1.9.0

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2025-06-22 - 1.9.0 - feat(form-inputs)
+Improve form input consistency and auto spacing across inputs and buttons
+
+- Add an 'insideForm' property to dees-button for auto-detection and proper margin adjustment in forms.
+- Update dees-input-radio to include a 'name' property so that radio buttons in the same group are mutually exclusive.
+- Enhance dees-form to group radio inputs properly when collecting form data.
+- Revise readme.hints.md and readme.plan.md to document changes and provide guidance for dees-input-radio.
+- Update demos for dees-button and dees-form to showcase correct spacing in vertical and horizontal layouts.
+
 ## 2025-06-20 - 1.8.20 - fix(deps)
 Update dependency versions: bump @design.estate/dees-domtools from ^2.1.1 to ^2.3.3, @design.estate/dees-element from ^2.0.42 to ^2.0.44, lucide from ^0.515.0 to ^0.518.0, and @git.zone/tsbundle from ^2.0.15 to ^2.4.0
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.8.20",
+  "version": "1.9.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

readme.hints.md

@@ -58,4 +58,22 @@
   - View mode selectors
   - Action grouping
   - Navigation options
-  - Filter controls
+  - Filter controls
+
+## Form Components
+
+### dees-input-radio
+- Radio button component with proper group behavior
+- Properties:
+  - `name`: Group name for mutually exclusive selection
+  - `key`: Unique identifier for the radio option
+  - `value`: Boolean indicating selection state
+  - `label`: Display label
+- Features:
+  - Automatic group management (radios with same name are mutually exclusive)
+  - Cannot be deselected by clicking (proper radio behavior)
+  - Form integration: Radio groups are collected by name, value is the selected radio's key
+  - Works both inside and outside forms
+  - Supports disabled state
+- Fixed: Radio buttons now properly deselect others in the group on first click
+- Note: When using in forms, set both `name` (for grouping) and `key` (for the value)

readme.plan.md

@@ -1,213 +1,159 @@
-# Input Component Unification Plan
+# Command: cat ~/.claude/CLAUDE.md
 
-Command to reread guidelines: `cat /home/philkunz/.claude/CLAUDE.md`
+# Margin Harmonization Plan for @design.estate/dees-catalog
 
-## Problem Summary
+## Implementation Status: Phase 1 Complete ✅
 
-The dees-input components have inconsistent margin behavior causing vertical alignment issues in horizontal flexbox layouts:
+Phase 1 has been successfully implemented. Buttons now auto-detect form context and apply appropriate spacing.
 
-- **dees-input-text**: 8px top, 24px bottom margin
-- **dees-input-dropdown**: 0px top, 24px bottom margin  
-- **dees-input-checkbox/radio**: 20px top, 20px bottom margin
-- Different components use different label implementations (some use dees-label, others have built-in labels)
+## Objective
+Implement consistent spacing across all form elements using auto-detection and CSS-based approach for buttons while maintaining the existing input spacing system.
 
-## Proposed Solution
+## Current Issues
+- Buttons have no default margins (inconsistent with inputs)
+- Manual spacing required when mixing buttons with inputs in forms
+- No unified spacing constants across components
 
-### 1. Standardize Margin System
+## Implementation Plan (Improved)
 
-Create a unified margin approach for all input components:
+### Phase 1: Add Auto-Detected Form Spacing to Buttons ✅
+- [x] Update `dees-button.ts`
+  - Add `insideForm` property (boolean, reflected) with auto-detection
+  - Add connectedCallback for automatic form detection:
+    ```typescript
+    @property({ type: Boolean, reflect: true })
+    public insideForm: boolean = false;
+    
+    connectedCallback() {
+      super.connectedCallback();
+      // Auto-detect if inside a form
+      if (!this.insideForm && this.closest('dees-form')) {
+        this.insideForm = true;
+      }
+    }
+    ```
+  - Add margin styles for both vertical and horizontal form contexts:
+    ```css
+    /* Default vertical form layout */
+    :host([inside-form]) {
+      display: block;
+      margin-bottom: var(--dees-input-vertical-gap);
+    }
+    :host([inside-form]:last-child) {
+      margin-bottom: 0;
+    }
+    
+    /* Horizontal form layout - auto-detected via parent */
+    :host([inside-form]):host-context(dees-form[horizontal-layout]) {
+      display: inline-block;
+      margin-right: var(--dees-input-horizontal-gap);
+      margin-bottom: 0;
+    }
+    :host([inside-form]):host-context(dees-form[horizontal-layout]):last-child {
+      margin-right: 0;
+    }
+    ```
+- [x] Update `dees-form-submit.ts`
+  - Remove need for manual attribute setting (auto-detection handles it)
+  - Verify integration works correctly
 
-```css
-/* Default vertical stacking mode (for forms) */
-:host {
-  margin: 0;
-  margin-bottom: 16px; /* Reduced from 24px for better density */
+### Phase 2: Create Unified Spacing Constants (Optional Enhancement)
+- [ ] Add CSS custom properties to `dees-input-base.ts`:
+  ```css
+  :root {
+    --dees-form-gap: 16px;
+  }
+  ```
+- [ ] Update existing `--dees-input-vertical-gap` to use `--dees-form-gap`
+- [ ] Update button margins to use the same variable
+
+### Phase 3: Testing and Documentation
+- [ ] Test mixed forms with inputs and buttons (both vertical and horizontal)
+- [ ] Verify last-child margin removal works
+- [ ] Test auto-detection behavior
+- [ ] Update demos:
+  - `dees-form.demo.ts` - show buttons auto-detecting form context
+  - `dees-button.demo.ts` - add form context example with manual override
+- [ ] Document the `insideForm` property and auto-detection in readme.md
+
+### Phase 4: Clean Up
+- [ ] Ensure all spacing uses consistent values (16px)
+- [ ] Verify no breaking changes
+- [ ] Update changelog.md
+
+## Technical Details
+
+### Button Form Integration
+```typescript
+// In dees-button.ts
+@property({ type: Boolean, reflect: true })
+public insideForm: boolean = false;
+
+connectedCallback() {
+  super.connectedCallback();
+  // Auto-detect if inside a form
+  if (!this.insideForm && this.closest('dees-form')) {
+    this.insideForm = true;
+  }
 }
 
-/* Last child in container should have no bottom margin */
-:host(:last-child) {
+// CSS addition
+/* Default vertical form layout */
+:host([inside-form]) {
+  display: block;
+  margin-bottom: var(--dees-input-vertical-gap);
+}
+:host([inside-form]:last-child) {
   margin-bottom: 0;
 }
 
-/* Horizontal layout mode - activated by parent context or attribute */
-:host([horizontal-layout]) {
-  margin: 0;
-  margin-right: 16px;
+/* Horizontal form layout - auto-detected via parent */
+:host([inside-form]):host-context(dees-form[horizontal-layout]) {
+  display: inline-block;
+  margin-right: var(--dees-input-horizontal-gap);
   margin-bottom: 0;
 }
-
-:host([horizontal-layout]:last-child) {
+:host([inside-form]):host-context(dees-form[horizontal-layout]):last-child {
   margin-right: 0;
 }
 ```
 
-### 2. Unified Label Architecture
+### Usage Example
+```html
+<!-- Automatic detection - buttons get form spacing automatically -->
+<dees-form>
+  <dees-input-text label="Name"></dees-input-text>
+  <dees-input-email label="Email"></dees-input-email>
+  <dees-button>Save Draft</dees-button>  <!-- Auto-detects form context -->
+  <dees-form-submit>Submit</dees-form-submit>  <!-- Auto-detects form context -->
+</dees-form>
 
-All input components should use the `dees-label` component for consistency:
+<!-- Manual override if needed -->
+<div class="custom-container">
+  <dees-button inside-form="true">Standalone button with form spacing</dees-button>
+</div>
 
-- Move label rendering from built-in implementations to `dees-label` usage
-- Add a `labelPosition` property to all inputs: `'top' | 'left' | 'right' | 'none'`
-- Default to 'top' for text/dropdown, 'right' for checkbox/radio
-
-### 3. Layout Mode Support
-
-Add a `layoutMode` property to all input components:
-
-```typescript
-@property({ type: String })
-public layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
+<!-- Horizontal form - spacing adjusts automatically -->
+<dees-form horizontal-layout>
+  <dees-input-text label="Search"></dees-input-text>
+  <dees-button>Search</dees-button>  <!-- Gets right margin instead of bottom -->
+</dees-form>
 ```
 
-- `vertical`: Traditional form layout (label on top)
-- `horizontal`: Inline layout (label position configurable)
-- `auto`: Detect from parent context
+## Success Criteria
+1. Buttons automatically detect form context and apply appropriate spacing
+2. Manual override available via `insideForm` property
+3. Supports both vertical and horizontal form layouts
+4. No breaking changes for existing implementations
+5. Consistent 16px spacing between all form elements
+6. Clear documentation and examples
+7. All tests pass
 
-### 4. Implementation Steps
-
-1. **Create base input class** (`DeesInputBase`):
-   - Common margin styles
-   - Layout mode detection
-   - Label position handling
-   - Shared properties (key, required, disabled, value)
-
-2. **Update dees-input-text**:
-   - Extend from DeesInputBase
-   - Remove hardcoded margins
-   - Keep using dees-label component
-
-3. **Update dees-input-dropdown**:
-   - Extend from DeesInputBase
-   - Remove hardcoded margins
-   - Switch from built-in label to dees-label
-
-4. **Update dees-input-checkbox**:
-   - Extend from DeesInputBase
-   - Remove hardcoded margins
-   - Add support for label position (keep default as 'right')
-   - Switch to dees-label component
-
-5. **Update dees-input-radio**:
-   - Same as checkbox
-
-6. **Update dees-form**:
-   - Add property to control child input layout mode
-   - Ensure proper spacing context
-
-### 5. CSS Variable System
-
-Introduce CSS variables for consistent spacing:
-
-```css
-:host {
-  --dees-input-spacing-unit: 8px;
-  --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
-  --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
-  --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
-}
-```
-
-### 6. Backward Compatibility
-
-- Keep existing properties and methods
-- Add deprecation notices for properties that will be removed
-- Provide migration guide in documentation
-
-### 7. Testing Requirements
-
-- Test all inputs in vertical form layouts
-- Test all inputs in horizontal flexbox containers
-- Test mixed input types in same container
-- Test with and without labels
-- Test theme switching (light/dark)
-- Test responsive behavior
-
-## Expected Outcome
-
-- All input components will align properly in horizontal layouts
-- Consistent spacing in vertical forms
-- Unified label handling across all inputs
-- Better developer experience with predictable behavior
-- Maintained backward compatibility
-
-## Timeline
-
-1. Phase 1: Create DeesInputBase class and update dees-input-text ✅
-2. Phase 2: Update remaining input components ✅
-3. Phase 3: Update documentation and examples ✅
-4. Phase 4: Testing and refinement ✅
-
-## Implementation Status
-
-### Completed:
-
-1. **Created DeesInputBase class** (`dees-input-base.ts`):
-   - Generic base class with unified margin system
-   - Layout mode support (vertical/horizontal/auto)
-   - Label position control
-   - Common properties and methods
-   - CSS variables for consistent spacing
-
-2. **Updated all input components**:
-   - `dees-input-text`: Now extends DeesInputBase, margins removed
-   - `dees-input-dropdown`: Now extends DeesInputBase, uses dees-label
-   - `dees-input-checkbox`: Now extends DeesInputBase, uses dees-label (default label position: right)
-   - `dees-input-radio`: Now extends DeesInputBase, uses dees-label (default label position: right)
-   - `dees-input-phone`: Now extends DeesInputBase with phone formatting functionality
-   - `dees-input-iban`: Now extends DeesInputBase with IBAN validation
-   - `dees-input-quantityselector`: Now extends DeesInputBase
-   - `dees-input-multitoggle`: Now extends DeesInputBase with value property for forms
-   - `dees-input-typelist`: Now extends DeesInputBase
-   - `dees-input-fileupload`: Now extends DeesInputBase, uses dees-label
-
-3. **Updated dees-form**:
-   - Added `horizontal-layout` property
-   - Auto-detection of layout mode for child inputs
-   - Added dropdown to form input types
-
-4. **Fixed TypeScript errors**:
-   - Added value property to dropdown for form compatibility
-   - Fixed changeSubject typing
-   - Updated form value type to include dropdown options
-   - Fixed firstUpdated method signatures (phone, iban, fileupload)
-   - Fixed CSS-in-JS errors in quantityselector (removed dynamic references)
-   - Added value property to multitoggle for form compatibility
-   - Removed duplicate properties in fileupload (label, key, disabled, required)
-
-### Result:
-
-All input components now have:
-- Unified 16px bottom margin in vertical layouts
-- 16px right margin in horizontal layouts
-- No margin on last child
-- Consistent label handling via dees-label
-- Flexible layout modes
-- Better alignment in flexbox containers
-
-## Demo Improvements
-
-### Created external demo files:
-1. **dees-input-text.demo.ts**: Comprehensive demos showing:
-   - Basic text inputs with descriptions
-   - Horizontal layout examples
-   - Label position variations
-   - Validation states
-   - Password input features
-
-2. **dees-input-checkbox.demo.ts**: Interactive demos featuring:
-   - Basic checkbox usage
-   - Horizontal layout groups
-   - Feature selection with batch operations
-   - Real-world examples
-
-3. **dees-input-radio.demo.ts**: Radio button demos including:
-   - Radio groups with proper behavior
-   - Horizontal yes/no questions
-   - Survey-style layouts
-   - Settings examples
-
-### Updated existing demos:
-1. **dees-input-dropdown.demo.ts**: Enhanced with dees-demowrapper and comprehensive examples
-2. **dees-form.demo.ts**: Added horizontal form layout examples and advanced form features
-3. **dees-simple-appdash.demo.ts**: Enhanced settings view with horizontal forms and radio groups
-
-All demos now use the `dees-demowrapper` component for consistency and include proper styling for light/dark themes.
+## Benefits of This Approach
+- **Automatic behavior** - Works out of the box, no manual attributes needed
+- **Consistent with inputs** - Follows the same pattern as existing form elements
+- **Layout aware** - Automatically adapts to vertical/horizontal forms
+- **Minimal code** - Simple CSS-based solution with light JS detection
+- **Backward compatible** - Existing code continues to work
+- **Override capability** - Manual control when needed
+- **Uses existing variables** - Leverages `--dees-input-vertical-gap` and `--dees-input-horizontal-gap`

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.8.20',
+  version: '1.9.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-button.demo.ts

@@ -1,6 +1,42 @@
-import { html } from '@design.estate/dees-element';
+import { html, css } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
+  <style>
+    ${css`
+      h3 {
+        margin-top: 32px;
+        margin-bottom: 16px;
+        color: #333;
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        h3 {
+          color: #ccc;
+        }
+      }
+      
+      .form-demo {
+        background: #f5f5f5;
+        padding: 20px;
+        border-radius: 8px;
+        margin: 20px 0;
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        .form-demo {
+          background: #1a1a1a;
+        }
+      }
+      
+      .button-group {
+        display: flex;
+        gap: 16px;
+        margin: 20px 0;
+      }
+    `}
+  </style>
+
+  <h3>Button Types</h3>
   <dees-button>This is a slotted Text</dees-button>
   <p>
     <dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button>
@@ -8,8 +44,34 @@ export const demoFunc = () => html`
   <p><dees-button type="discreet">This is discreete button</dees-button></p>
   <p><dees-button disabled>This is a disabled button</dees-button></p>
   <p><dees-button type="big">This is a slotted Text</dees-button></p>
+
+  <h3>Button States</h3>
   <p><dees-button status="normal">Normal Status</dees-button></p>
   <p><dees-button disabled status="pending">Pending Status</dees-button></p>
   <p><dees-button disabled status="success">Success Status</dees-button></p>
   <p><dees-button disabled status="error">Error Status</dees-button></p>
+
+  <h3>Buttons in Forms (Auto-spacing)</h3>
+  <div class="form-demo">
+    <dees-form>
+      <dees-input-text label="Name" key="name"></dees-input-text>
+      <dees-input-text label="Email" key="email"></dees-input-text>
+      <dees-button>Save Draft</dees-button>
+      <dees-button type="highlighted">Save and Continue</dees-button>
+      <dees-form-submit>Submit Form</dees-form-submit>
+    </dees-form>
+  </div>
+
+  <h3>Buttons Outside Forms (No auto-spacing)</h3>
+  <div class="button-group">
+    <dees-button>Button 1</dees-button>
+    <dees-button>Button 2</dees-button>
+    <dees-button>Button 3</dees-button>
+  </div>
+
+  <h3>Manual Form Spacing</h3>
+  <div>
+    <dees-button inside-form="true">Manually spaced button 1</dees-button>
+    <dees-button inside-form="true">Manually spaced button 2</dees-button>
+  </div>
 `;

ts_web/elements/dees-button.ts

@@ -55,10 +55,24 @@ export class DeesButton extends DeesElement {
   })
   public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
+  @property({
+    type: Boolean,
+    reflect: true
+  })
+  public insideForm: boolean = false;
+
   constructor() {
     super();
   }
 
+  public async connectedCallback() {
+    await super.connectedCallback();
+    // Auto-detect if inside a form
+    if (!this.insideForm && this.closest('dees-form')) {
+      this.insideForm = true;
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -71,6 +85,27 @@ export class DeesButton extends DeesElement {
         display: none;
       }
 
+      /* Form spacing styles */
+      /* Default vertical form layout */
+      :host([inside-form]) {
+        margin-bottom: 16px; /* Using standard 16px like inputs */
+      }
+      
+      :host([inside-form]:last-child) {
+        margin-bottom: 0;
+      }
+      
+      /* Horizontal form layout - auto-detected via parent */
+      dees-form[horizontal-layout] :host([inside-form]) {
+        display: inline-block;
+        margin-right: 16px;
+        margin-bottom: 0;
+      }
+      
+      dees-form[horizontal-layout] :host([inside-form]:last-child) {
+        margin-right: 0;
+      }
+
       .button {
         transition: all 0.1s , color 0s;
         position: relative;

ts_web/elements/dees-form.demo.ts

@@ -15,234 +15,173 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
-        .demo-section {
-          background: #f8f9fa;
-          border-radius: 8px;
-          padding: 24px;
+        dees-panel {
+          margin-bottom: 24px;
         }
         
-        @media (prefers-color-scheme: dark) {
-          .demo-section {
-            background: #1a1a1a;
-          }
-        }
-        
-        .demo-section h3 {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #0069f2;
-          font-size: 18px;
-        }
-        
-        .demo-section p {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #666;
-          font-size: 14px;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .demo-section p {
-            color: #999;
-          }
-        }
-        
-        .form-container {
-          background: #fff;
-          border: 1px solid #e0e0e0;
-          border-radius: 8px;
-          padding: 24px;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .form-container {
-            background: #222;
-            border-color: #333;
-          }
-        }
-        
-        .horizontal-form {
-          display: flex;
-          align-items: flex-start;
-          gap: 16px;
-          flex-wrap: wrap;
+        dees-panel:last-child {
+          margin-bottom: 0;
         }
       `}
     </style>
     
     <div class="demo-container">
-      <div class="demo-section">
-        <h3>Complete Form Example</h3>
-        <p>A comprehensive form with various input types, validation, and form submission handling</p>
-        
-        <div class="form-container">
-          <dees-form
-            @formData=${async (eventArg) => {
-              const form: DeesForm = eventArg.currentTarget;
-              form.setStatus('pending', 'Processing...');
-              await domtools.plugins.smartdelay.delayFor(2000);
-              form.setStatus('success', 'Form submitted successfully!');
-              await domtools.plugins.smartdelay.delayFor(2000);
-              form.reset();
-            }}
-          >
-            <dees-input-text 
-              .required=${true} 
-              key="firstName" 
-              label="First Name"
-              .description=${'Your given name'}
-            ></dees-input-text>
-            
-            <dees-input-text 
-              .required=${true} 
-              key="lastName" 
-              label="Last Name"
-            ></dees-input-text>
-            
-            <dees-input-text 
-              .required=${true} 
-              key="email" 
-              label="Email Address"
-              .description=${'We will use this to contact you'}
-            ></dees-input-text>
-            
-            <dees-input-dropdown
-              .required=${true}
-              key="country"
-              .label=${'Country'}
-              .options=${[
-                { option: 'United States', key: 'us' },
-                { option: 'Canada', key: 'ca' },
-                { option: 'Germany', key: 'de' },
-                { option: 'France', key: 'fr' },
-                { option: 'United Kingdom', key: 'uk' },
-              ]}
-            ></dees-input-dropdown>
-            
-            <dees-input-text
-              .required=${true}
-              key="password"
-              label="Password"
-              isPasswordBool
-              .description=${'Minimum 8 characters'}
-            ></dees-input-text>
-            
-            <dees-input-checkbox
-              .required=${true}
-              key="terms"
-              label="I agree to the Terms and Conditions"
-            ></dees-input-checkbox>
-            
-            <dees-input-checkbox
-              key="newsletter"
-              label="Send me promotional emails"
-              .value=${true}
-            ></dees-input-checkbox>
-            
-            <dees-form-submit>Create Account</dees-form-submit>
-          </dees-form>
-        </div>
-      </div>
+      <dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
+        <dees-form
+          @formData=${async (eventArg) => {
+            const form: DeesForm = eventArg.currentTarget;
+            form.setStatus('pending', 'Processing...');
+            await domtools.plugins.smartdelay.delayFor(2000);
+            form.setStatus('success', 'Form submitted successfully!');
+            await domtools.plugins.smartdelay.delayFor(2000);
+            form.reset();
+          }}
+        >
+          <dees-input-text 
+            .required=${true} 
+            key="firstName" 
+            label="First Name"
+            .description=${'Your given name'}
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .required=${true} 
+            key="lastName" 
+            label="Last Name"
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .required=${true} 
+            key="email" 
+            label="Email Address"
+            .description=${'We will use this to contact you'}
+          ></dees-input-text>
+          
+          <dees-input-dropdown
+            .required=${true}
+            key="country"
+            .label=${'Country'}
+            .options=${[
+              { option: 'United States', key: 'us' },
+              { option: 'Canada', key: 'ca' },
+              { option: 'Germany', key: 'de' },
+              { option: 'France', key: 'fr' },
+              { option: 'United Kingdom', key: 'uk' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-text
+            .required=${true}
+            key="password"
+            label="Password"
+            isPasswordBool
+            .description=${'Minimum 8 characters'}
+          ></dees-input-text>
+          
+          <dees-input-checkbox
+            .required=${true}
+            key="terms"
+            label="I agree to the Terms and Conditions"
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox
+            key="newsletter"
+            label="Send me promotional emails"
+            .value=${true}
+          ></dees-input-checkbox>
+          
+          <dees-form-submit>Create Account</dees-form-submit>
+        </dees-form>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Horizontal Form Layout</h3>
-        <p>Compact form with inputs arranged horizontally - perfect for filters and quick forms</p>
-        
-        <div class="form-container">
-          <dees-form horizontal-layout>
-            <dees-input-text 
-              key="search" 
-              label="Search"
-            ></dees-input-text>
-            
-            <dees-input-dropdown
-              key="category"
-              .label=${'Category'}
-              .enableSearch=${false}
-              .options=${[
-                { option: 'All', key: 'all' },
-                { option: 'Products', key: 'products' },
-                { option: 'Services', key: 'services' },
-                { option: 'Support', key: 'support' },
-              ]}
-            ></dees-input-dropdown>
-            
-            <dees-input-dropdown
-              key="sort"
-              .label=${'Sort By'}
-              .enableSearch=${false}
-              .options=${[
-                { option: 'Newest', key: 'newest' },
-                { option: 'Popular', key: 'popular' },
-                { option: 'Price: Low to High', key: 'price_asc' },
-                { option: 'Price: High to Low', key: 'price_desc' },
-              ]}
-            ></dees-input-dropdown>
-            
-            <dees-input-checkbox
-              key="inStock"
-              label="In Stock Only"
-              .value=${true}
-            ></dees-input-checkbox>
-          </dees-form>
-        </div>
-      </div>
+      <dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
+        <dees-form horizontal-layout>
+          <dees-input-text 
+            key="search" 
+            label="Search"
+          ></dees-input-text>
+          
+          <dees-input-dropdown
+            key="category"
+            .label=${'Category'}
+            .enableSearch=${false}
+            .options=${[
+              { option: 'All', key: 'all' },
+              { option: 'Products', key: 'products' },
+              { option: 'Services', key: 'services' },
+              { option: 'Support', key: 'support' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-dropdown
+            key="sort"
+            .label=${'Sort By'}
+            .enableSearch=${false}
+            .options=${[
+              { option: 'Newest', key: 'newest' },
+              { option: 'Popular', key: 'popular' },
+              { option: 'Price: Low to High', key: 'price_asc' },
+              { option: 'Price: High to Low', key: 'price_desc' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-checkbox
+            key="inStock"
+            label="In Stock Only"
+            .value=${true}
+          ></dees-input-checkbox>
+        </dees-form>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Advanced Form Features</h3>
-        <p>Form with specialized input types and complex validation</p>
-        
-        <div class="form-container">
-          <dees-form
-            @formData=${async (eventArg) => {
-              const form: DeesForm = eventArg.currentTarget;
-              const data = eventArg.detail.data;
-              console.log('Form data:', data);
-              form.setStatus('success', 'Data logged to console!');
-            }}
-          >
-            <dees-input-iban 
-              key="iban"
-              label="IBAN"
-              .required=${true}
-            ></dees-input-iban>
-            
-            <dees-input-phone
-              key="phone"
-              label="Phone Number"
-              .required=${true}
-            ></dees-input-phone>
-            
-            <dees-input-multitoggle
-              key="preferences"
-              .label=${'Notification Preferences'}
-              .options=${['Email', 'SMS', 'Push', 'In-App']}
-              .selectedOption=${'Email'}
-            ></dees-input-multitoggle>
-            
-            <dees-input-multiselect
-              key="interests"
-              .label=${'Areas of Interest'}
-              .options=${[
-                { option: 'Technology', key: 'tech' },
-                { option: 'Design', key: 'design' },
-                { option: 'Business', key: 'business' },
-                { option: 'Marketing', key: 'marketing' },
-                { option: 'Sales', key: 'sales' },
-              ]}
-            ></dees-input-multiselect>
-            
-            <dees-input-fileupload
-              key="documents"
-              .label=${'Upload Documents'}
-              .description=${'PDF, DOC, or DOCX files up to 10MB'}
-            ></dees-input-fileupload>
-            
-            <dees-form-submit>Submit Application</dees-form-submit>
-          </dees-form>
-        </div>
-      </div>
+      <dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
+        <dees-form
+          @formData=${async (eventArg) => {
+            const form: DeesForm = eventArg.currentTarget;
+            const data = eventArg.detail.data;
+            console.log('Form data:', data);
+            form.setStatus('success', 'Data logged to console!');
+          }}
+        >
+          <dees-input-iban 
+            key="iban"
+            label="IBAN"
+            .required=${true}
+          ></dees-input-iban>
+          
+          <dees-input-phone
+            key="phone"
+            label="Phone Number"
+            .required=${true}
+          ></dees-input-phone>
+          
+          <dees-input-multitoggle
+            key="preferences"
+            .label=${'Notification Preferences'}
+            .options=${['Email', 'SMS', 'Push', 'In-App']}
+            .selectedOption=${'Email'}
+          ></dees-input-multitoggle>
+          
+          <dees-input-multiselect
+            key="interests"
+            .label=${'Areas of Interest'}
+            .options=${[
+              { option: 'Technology', key: 'tech' },
+              { option: 'Design', key: 'design' },
+              { option: 'Business', key: 'business' },
+              { option: 'Marketing', key: 'marketing' },
+              { option: 'Sales', key: 'sales' },
+            ]}
+          ></dees-input-multiselect>
+          
+          <dees-input-fileupload
+            key="documents"
+            .label=${'Upload Documents'}
+            .description=${'PDF, DOC, or DOCX files up to 10MB'}
+          ></dees-input-fileupload>
+          
+          <dees-form-submit>Submit Application</dees-form-submit>
+        </dees-form>
+      </dees-panel>
     </div>
   </dees-demowrapper>
-`;
+`;

ts_web/elements/dees-form.ts

@@ -132,12 +132,31 @@ export class DeesForm extends DeesElement {
   public async collectFormData() {
     const children = this.getFormElements();
     const valueObject: { [key: string]: string | number | boolean | any[] | File[] | { option: string; key: string; payload?: any } } = {};
+    const radioGroups = new Map<string, DeesInputRadio[]>();
+    
     for (const child of children) {
       if (!child.key) {
         console.log(`form element with label "${child.label}" has no key. skipping.`);
+        continue;
+      }
+      
+      // Handle radio buttons specially
+      if (child instanceof DeesInputRadio && child.name) {
+        if (!radioGroups.has(child.name)) {
+          radioGroups.set(child.name, []);
+        }
+        radioGroups.get(child.name).push(child);
+      } else {
+        valueObject[child.key] = child.value;
       }
-      valueObject[child.key] = child.value;
     }
+    
+    // Process radio groups - use the name as key and selected radio's key as value
+    for (const [groupName, radios] of radioGroups) {
+      const selectedRadio = radios.find(radio => radio.value === true);
+      valueObject[groupName] = selectedRadio ? selectedRadio.key : null;
+    }
+    
     return valueObject;
   }
 

ts_web/elements/dees-input-radio.demo.ts

@@ -3,33 +3,7 @@ import '@design.estate/dees-wcctools/demotools';
 import type { DeesInputRadio } from './dees-input-radio.js';
 
 export const demoFunc = () => html`
-  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-    // Implement radio group behavior
-    const radioGroups = new Map<string, DeesInputRadio[]>();
-    
-    // Group radios by their container
-    const radioContainers = elementArg.querySelectorAll('.radio-group');
-    radioContainers.forEach((container) => {
-      const radios = Array.from(container.querySelectorAll('dees-input-radio')) as DeesInputRadio[];
-      const groupName = container.getAttribute('data-group') || 'default';
-      radioGroups.set(groupName, radios);
-      
-      // Add click handlers for radio group behavior
-      radios.forEach((radio) => {
-        radio.addEventListener('click', () => {
-          if (!radio.disabled && !radio.value) {
-            // Uncheck all other radios in the group
-            radios.forEach((r) => {
-              if (r !== radio) {
-                r.value = false;
-              }
-            });
-            radio.value = true;
-          }
-        });
-      });
-    });
-  }}>
+  <dees-demowrapper>
     <style>
       ${css`
         .demo-container {
@@ -121,37 +95,43 @@ export const demoFunc = () => html`
         <h3>Basic Radio Groups</h3>
         <p>Radio buttons for single-choice selections</p>
         
-        <div class="radio-group" data-group="plan">
+        <div class="radio-group">
           <div class="radio-group-title">Select your subscription plan:</div>
           <dees-input-radio 
             .label=${'Basic Plan - $9/month'} 
             .value=${true}
             .key=${'plan-basic'}
+            .name=${'plan'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Pro Plan - $29/month'}
             .key=${'plan-pro'}
+            .name=${'plan'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Enterprise Plan - $99/month'}
             .key=${'plan-enterprise'}
+            .name=${'plan'}
           ></dees-input-radio>
         </div>
         
-        <div class="radio-group" data-group="priority">
+        <div class="radio-group">
           <div class="radio-group-title">Task Priority:</div>
           <dees-input-radio 
             .label=${'High Priority'} 
             .key=${'priority-high'}
+            .name=${'priority'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Medium Priority'}
             .value=${true}
             .key=${'priority-medium'}
+            .name=${'priority'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Low Priority'}
             .key=${'priority-low'}
+            .name=${'priority'}
           ></dees-input-radio>
         </div>
       </div>
@@ -160,43 +140,49 @@ export const demoFunc = () => html`
         <h3>Horizontal Layout</h3>
         <p>Radio buttons arranged horizontally for yes/no questions</p>
         
-        <div class="radio-group" data-group="agreement" style="flex-direction: row;">
+        <div class="radio-group" style="flex-direction: row;">
           <div style="margin-right: 16px;">Do you agree?</div>
           <dees-input-radio 
             .label=${'Yes'} 
             .layoutMode=${'horizontal'} 
             .value=${true}
             .key=${'agree-yes'}
+            .name=${'agreement'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'No'} 
             .layoutMode=${'horizontal'}
             .key=${'agree-no'}
+            .name=${'agreement'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Maybe'} 
             .layoutMode=${'horizontal'}
             .key=${'agree-maybe'}
+            .name=${'agreement'}
           ></dees-input-radio>
         </div>
         
-        <div class="radio-group" data-group="experience" style="flex-direction: row;">
+        <div class="radio-group" style="flex-direction: row;">
           <div style="margin-right: 16px;">Experience Level:</div>
           <dees-input-radio 
             .label=${'Beginner'} 
             .layoutMode=${'horizontal'}
             .key=${'exp-beginner'}
+            .name=${'experience'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Intermediate'} 
             .layoutMode=${'horizontal'}
             .value=${true}
             .key=${'exp-intermediate'}
+            .name=${'experience'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Expert'} 
             .layoutMode=${'horizontal'}
             .key=${'exp-expert'}
+            .name=${'experience'}
           ></dees-input-radio>
         </div>
       </div>
@@ -206,22 +192,22 @@ export const demoFunc = () => html`
         <p>Multiple radio groups in a survey format</p>
         
         <div class="grid-layout">
-          <div class="radio-group" data-group="satisfaction">
+          <div class="radio-group">
             <div class="radio-group-title">How satisfied are you?</div>
-            <dees-input-radio .label=${'Very Satisfied'} .key=${'sat-very'}></dees-input-radio>
-            <dees-input-radio .label=${'Satisfied'} .value=${true} .key=${'sat-normal'}></dees-input-radio>
-            <dees-input-radio .label=${'Neutral'} .key=${'sat-neutral'}></dees-input-radio>
-            <dees-input-radio .label=${'Dissatisfied'} .key=${'sat-dis'}></dees-input-radio>
-            <dees-input-radio .label=${'Very Dissatisfied'} .key=${'sat-verydis'}></dees-input-radio>
+            <dees-input-radio .label=${'Very Satisfied'} .key=${'sat-very'} .name=${'satisfaction'}></dees-input-radio>
+            <dees-input-radio .label=${'Satisfied'} .value=${true} .key=${'sat-normal'} .name=${'satisfaction'}></dees-input-radio>
+            <dees-input-radio .label=${'Neutral'} .key=${'sat-neutral'} .name=${'satisfaction'}></dees-input-radio>
+            <dees-input-radio .label=${'Dissatisfied'} .key=${'sat-dis'} .name=${'satisfaction'}></dees-input-radio>
+            <dees-input-radio .label=${'Very Dissatisfied'} .key=${'sat-verydis'} .name=${'satisfaction'}></dees-input-radio>
           </div>
           
-          <div class="radio-group" data-group="recommend">
+          <div class="radio-group">
             <div class="radio-group-title">Would you recommend us?</div>
-            <dees-input-radio .label=${'Definitely'} .key=${'rec-def'}></dees-input-radio>
-            <dees-input-radio .label=${'Probably'} .value=${true} .key=${'rec-prob'}></dees-input-radio>
-            <dees-input-radio .label=${'Not Sure'} .key=${'rec-unsure'}></dees-input-radio>
-            <dees-input-radio .label=${'Probably Not'} .key=${'rec-probnot'}></dees-input-radio>
-            <dees-input-radio .label=${'Definitely Not'} .key=${'rec-defnot'}></dees-input-radio>
+            <dees-input-radio .label=${'Definitely'} .key=${'rec-def'} .name=${'recommend'}></dees-input-radio>
+            <dees-input-radio .label=${'Probably'} .value=${true} .key=${'rec-prob'} .name=${'recommend'}></dees-input-radio>
+            <dees-input-radio .label=${'Not Sure'} .key=${'rec-unsure'} .name=${'recommend'}></dees-input-radio>
+            <dees-input-radio .label=${'Probably Not'} .key=${'rec-probnot'} .name=${'recommend'}></dees-input-radio>
+            <dees-input-radio .label=${'Definitely Not'} .key=${'rec-defnot'} .name=${'recommend'}></dees-input-radio>
           </div>
         </div>
       </div>
@@ -230,26 +216,30 @@ export const demoFunc = () => html`
         <h3>States</h3>
         <p>Different radio button states</p>
         
-        <div class="radio-group" data-group="states">
+        <div class="radio-group">
           <dees-input-radio 
             .label=${'Normal Radio'} 
             .key=${'state-normal'}
+            .name=${'states'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Selected Radio'} 
             .value=${true}
             .key=${'state-selected'}
+            .name=${'states'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Disabled Unchecked'} 
             .disabled=${true}
             .key=${'state-disabled1'}
+            .name=${'states2'}
           ></dees-input-radio>
           <dees-input-radio 
             .label=${'Disabled Checked'} 
             .disabled=${true} 
             .value=${true}
             .key=${'state-disabled2'}
+            .name=${'states2'}
           ></dees-input-radio>
         </div>
       </div>
@@ -258,18 +248,18 @@ export const demoFunc = () => html`
         <h3>Settings Example</h3>
         <p>Common radio button patterns in settings</p>
         
-        <div class="radio-group" data-group="theme">
+        <div class="radio-group">
           <div class="radio-group-title">Theme Preference:</div>
-          <dees-input-radio .label=${'Light Theme'} .key=${'theme-light'}></dees-input-radio>
-          <dees-input-radio .label=${'Dark Theme'} .value=${true} .key=${'theme-dark'}></dees-input-radio>
-          <dees-input-radio .label=${'System Default'} .key=${'theme-system'}></dees-input-radio>
+          <dees-input-radio .label=${'Light Theme'} .key=${'theme-light'} .name=${'theme'}></dees-input-radio>
+          <dees-input-radio .label=${'Dark Theme'} .value=${true} .key=${'theme-dark'} .name=${'theme'}></dees-input-radio>
+          <dees-input-radio .label=${'System Default'} .key=${'theme-system'} .name=${'theme'}></dees-input-radio>
         </div>
         
-        <div class="radio-group" data-group="notifications">
+        <div class="radio-group">
           <div class="radio-group-title">Notification Frequency:</div>
-          <dees-input-radio .label=${'All Notifications'} .key=${'notif-all'}></dees-input-radio>
-          <dees-input-radio .label=${'Important Only'} .value=${true} .key=${'notif-important'}></dees-input-radio>
-          <dees-input-radio .label=${'None'} .key=${'notif-none'}></dees-input-radio>
+          <dees-input-radio .label=${'All Notifications'} .key=${'notif-all'} .name=${'notifications'}></dees-input-radio>
+          <dees-input-radio .label=${'Important Only'} .value=${true} .key=${'notif-important'} .name=${'notifications'}></dees-input-radio>
+          <dees-input-radio .label=${'None'} .key=${'notif-none'} .name=${'notifications'}></dees-input-radio>
         </div>
       </div>
     </div>

ts_web/elements/dees-input-radio.ts

@@ -17,6 +17,8 @@ export class DeesInputRadio extends DeesInputBase<DeesInputRadio> {
   @property()
   public value: boolean = false;
 
+  @property({ type: String })
+  public name: string = '';
 
   constructor() {
     super();
@@ -95,7 +97,27 @@ export class DeesInputRadio extends DeesInputBase<DeesInputRadio> {
   }
 
   public async toggleSelected () {
-    this.value = !this.value;
+    // Radio buttons can only be selected, not deselected by clicking
+    if (this.value) {
+      return;
+    }
+    
+    // If this radio has a name, find and deselect other radios in the same group
+    if (this.name) {
+      // Try to find a form container first, then fall back to document
+      const container = this.closest('dees-form') || 
+                       this.closest('dees-demowrapper') || 
+                       this.closest('.radio-group')?.parentElement ||
+                       document;
+      const allRadios = container.querySelectorAll(`dees-input-radio[name="${this.name}"]`);
+      allRadios.forEach((radio: DeesInputRadio) => {
+        if (radio !== this && radio.value) {
+          radio.value = false;
+        }
+      });
+    }
+    
+    this.value = true;
     this.dispatchEvent(new CustomEvent('newValue', {
       detail: this.value,
       bubbles: true

ts_web/elements/dees-input-text.ts

@@ -100,7 +100,8 @@ export class DeesInputText extends DeesInputBase {
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid ${cssManager.bdTheme( colors.bright.blueActive, colors.dark.blueActive)};
+        border-bottom: 1px solid
+          ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
         cursor: text;
       }
 
@@ -117,6 +118,7 @@ export class DeesInputText extends DeesInputBase {
         padding: 4px 0px;
         width: 40px;
         z-index: 3;
+        text-align: center;
       }
 
       .showPassword:hover {
@@ -146,18 +148,20 @@ export class DeesInputText extends DeesInputBase {
           letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
           color: ${this.goBright ? '#333' : '#ccc'};
         }
-        ${this.validationText ? css`
-          .validationContainer {
-            height: 22px;
-            opacity: 1;
-          }
-        ` : css`
-          .validationContainer {
-            height: 4px;
-            padding: 2px !important;
-            opacity: 0;
-          }
-        `}
+        ${this.validationText
+          ? css`
+              .validationContainer {
+                height: 22px;
+                opacity: 1;
+              }
+            `
+          : css`
+              .validationContainer {
+                height: 4px;
+                padding: 2px !important;
+                opacity: 0;
+              }
+            `}
       </style>
       <div class="input-wrapper">
         <dees-label .label=${this.label} .description=${this.description}></dees-label>
@@ -168,9 +172,7 @@ export class DeesInputText extends DeesInputBase {
             @input="${this.updateValue}"
             .disabled=${this.disabled}
           />
-          <div class="validationContainer">
-            ${this.validationText}
-          </div>
+          <div class="validationContainer">${this.validationText}</div>
           ${this.isPasswordBool
             ? html`
                 <div class="showPassword" @click=${this.togglePasswordView}>