fix(demo-inputs): wrap input component demos in dees-form containers for consistent form integration

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-12 - 3.76.1 - fix(demo-inputs)
+wrap input component demos in dees-form containers for consistent form integration
+
+- Adds dees-form wrappers across multiple input demo pages including checkbox, dropdown, file upload, iban, list, multitoggle, phone, quantity selector, radio group, tags, text, toggle, and typelist demos
+- Keeps horizontal and grid example layouts intact while nesting them inside form containers
+- Cleans up file upload and text demo markup to better match expected dees-form structure
+
 ## 2026-04-12 - 3.76.0 - feat(input)
 separate label info tooltips from description text across input components
 

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts

@@ -111,7 +111,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
-        <div class="checkbox-group">
+        <dees-form>
           <dees-input-checkbox
             .label=${'I agree to the Terms and Conditions'}
             .value=${true}
@@ -130,11 +130,11 @@ export const demoFunc = () => html`
             .description=${'Receive email updates about your account'}
             .key=${'notifications'}
           ></dees-input-checkbox>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
-        <div class="checkbox-group">
+        <dees-form>
           <dees-input-checkbox
             .label=${'Default state'}
             .value=${false}
@@ -162,10 +162,11 @@ export const demoFunc = () => html`
             .required=${true}
             .key=${'required'}
           ></dees-input-checkbox>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
+        <dees-form>
           <div class="horizontal-checkboxes">
             <dees-input-checkbox
               .label=${'Option A'}
@@ -195,6 +196,7 @@ export const demoFunc = () => html`
               .key=${'optionD'}
             ></dees-input-checkbox>
           </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
@@ -204,7 +206,7 @@ export const demoFunc = () => html`
         </div>
         
         <div class="feature-list">
-          <div class="checkbox-group">
+          <dees-form>
             <dees-input-checkbox
               .label=${'Dark Mode Support'}
               .value=${true}
@@ -234,7 +236,7 @@ export const demoFunc = () => html`
               .value=${false}
               .key=${'feature5'}
             ></dees-input-checkbox>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
       
@@ -242,7 +244,7 @@ export const demoFunc = () => html`
         <div class="form-section">
           <h4 class="section-title">Privacy Preferences</h4>
 
-          <div class="checkbox-group">
+          <dees-form>
             <dees-input-checkbox
               .label=${'Share analytics data'}
               .value=${true}
@@ -266,12 +268,12 @@ export const demoFunc = () => html`
               .value=${false}
               .description=${'Allow approved partners to access your data'}
             ></dees-input-checkbox>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
       
       <dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
-        <div class="checkbox-group">
+        <dees-form>
           <dees-input-checkbox
             .label=${'Feature toggle'}
             .value=${false}
@@ -295,7 +297,7 @@ export const demoFunc = () => html`
               }
             }}
           ></dees-input-checkbox>
-        </div>
+        </dees-form>
 
         <div class="interactive-section">
           <div id="checkbox-output" class="output-text">Feature is disabled</div>

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -69,7 +69,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-dropdown
             .label=${'Select Country'}
             .description=${'Choose the country where your business is registered'}
@@ -95,7 +95,7 @@ export const demoFunc = () => html`
               { option: 'Guest', key: 'guest' }
             ]}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -136,6 +136,7 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
+        <dees-form>
           <div class="horizontal-group">
             <dees-input-dropdown
               .label=${'Department'}
@@ -170,6 +171,7 @@ export const demoFunc = () => html`
               ]}
             ></dees-input-dropdown>
           </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -185,7 +187,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-dropdown
             .label=${'Required Field'}
             .required=${true}
@@ -204,7 +206,7 @@ export const demoFunc = () => html`
             ]}
             .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     

ts_web/elements/00group-input/dees-input-fileupload/demo.ts

@@ -55,6 +55,7 @@ export const demoFunc = () => html`
         .title=${'Modern file uploader'}
         .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
       >
+        <dees-form>
           <div class="demo-grid demo-grid--two">
             <div class="demo-stack">
               <dees-input-fileupload
@@ -90,6 +91,7 @@ export const demoFunc = () => html`
               ></dees-input-fileupload>
             </div>
           </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel
@@ -98,7 +100,6 @@ export const demoFunc = () => html`
       >
         <div class="demo-grid">
           <dees-form>
-            <div class="demo-stack">
               <dees-input-text
                 .label=${'Project name'}
                 .infoText=${'How should we refer to this project internally?'}
@@ -140,7 +141,6 @@ export const demoFunc = () => html`
               ></dees-input-text>
 
               <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
-            </div>
           </dees-form>
 
           <div class="demo-note">

ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts

@@ -30,7 +30,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-iban
             .label=${'Bank Account IBAN'}
             .infoText=${'Enter your International Bank Account Number'}
@@ -42,10 +42,11 @@ export const demoFunc = () => html`
             .infoText=${'This IBAN has been verified'}
             .value=${'DE89370400440532013000'}
           ></dees-input-iban>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
+        <dees-form>
           <div class="payment-group">
             <dees-input-text
               .label=${'Account Holder'}
@@ -59,10 +60,11 @@ export const demoFunc = () => html`
               .value=${'GB82WEST12345698765432'}
             ></dees-input-iban>
           </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-iban
             .label=${'Payment Account'}
             .infoText=${'Required for processing payments'}
@@ -75,7 +77,7 @@ export const demoFunc = () => html`
             .value=${'FR1420041010050500013M02606'}
             .disabled=${true}
           ></dees-input-iban>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>

ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts

@@ -109,6 +109,7 @@ export const demoFunc = () => html`
       </dees-panel>
 
       <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
+        <dees-form>
           <div class="grid-layout">
             <dees-input-list
               .label=${'Team Members (Min 2, Max 5)'}
@@ -128,6 +129,7 @@ export const demoFunc = () => html`
               .description=${'Duplicate items are not allowed'}
             ></dees-input-list>
           </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>

ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts

@@ -53,6 +53,7 @@ export const demoFunc = () => html`
         <div class="section-title">Multi-Option Toggle</div>
         <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
 
+        <dees-form>
           <dees-input-multitoggle
             .label=${'Display Mode'}
             .infoText=${'Choose how content is displayed'}
@@ -61,20 +62,20 @@ export const demoFunc = () => html`
             .selectedOption=${'Grid View'}
           ></dees-input-multitoggle>
 
-        <br><br>
-        
           <dees-input-multitoggle
             .label=${'T-Shirt Size'}
             .infoText=${'Select your preferred size'}
             .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
             .selectedOption=${'M'}
           ></dees-input-multitoggle>
+        </dees-form>
       </div>
       
       <div class="section">
         <div class="section-title">Boolean Toggle</div>
         <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
 
+        <dees-form>
           <dees-input-multitoggle
             .label=${'Notifications'}
             .infoText=${'Enable or disable push notifications'}
@@ -82,8 +83,6 @@ export const demoFunc = () => html`
             .selectedOption=${'true'}
           ></dees-input-multitoggle>
 
-        <br><br>
-        
           <dees-input-multitoggle
             .label=${'Theme Mode'}
             .infoText=${'Switch between light and dark theme'}
@@ -92,12 +91,14 @@ export const demoFunc = () => html`
             .booleanFalseName=${'Light'}
             .selectedOption=${'Dark'}
           ></dees-input-multitoggle>
+        </dees-form>
       </div>
       
       <div class="section">
         <div class="section-title">Settings Grid</div>
         <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
 
+        <dees-form>
           <div class="settings-grid">
             <dees-input-multitoggle
               .label=${'Auto-Save'}
@@ -127,6 +128,7 @@ export const demoFunc = () => html`
               .selectedOption=${'Private'}
             ></dees-input-multitoggle>
           </div>
+        </dees-form>
       </div>
       
       <div class="section">

ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts

@@ -30,7 +30,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-phone
             .label=${'Phone Number'}
             .infoText=${'Enter your phone number with country code'}
@@ -44,10 +44,11 @@ export const demoFunc = () => html`
             .required=${true}
             .placeholder=${'+1 (555) 000-0000'}
           ></dees-input-phone>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
+        <dees-form>
           <div class="horizontal-group">
             <dees-input-phone
               .label=${'Mobile'}
@@ -61,10 +62,11 @@ export const demoFunc = () => html`
               .placeholder=${'+1 (800) 555-0000'}
             ></dees-input-phone>
           </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-phone
             .label=${'International Contact'}
             .infoText=${'Automatically formats international numbers'}
@@ -76,7 +78,7 @@ export const demoFunc = () => html`
             .value=${'911'}
             .disabled=${true}
           ></dees-input-phone>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>

ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts

@@ -66,7 +66,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-quantityselector
             .label=${'Quantity'}
             .infoText=${'Select the desired quantity'}
@@ -79,7 +79,7 @@ export const demoFunc = () => html`
             .infoText=${'Adjust the quantity of items'}
             .value=${3}
           ></dees-input-quantityselector>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -178,7 +178,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-quantityselector
             .label=${'Number of Licenses'}
             .infoText=${'Select how many licenses you need'}
@@ -192,7 +192,7 @@ export const demoFunc = () => html`
             .disabled=${true}
             .value=${5}
           ></dees-input-quantityselector>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>

ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts

@@ -48,6 +48,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
+        <dees-form>
           <div class="demo-grid">
             <dees-input-radiogroup
               .label=${'Subscription Plan'}
@@ -63,10 +64,11 @@ export const demoFunc = () => html`
               .required=${true}
             ></dees-input-radiogroup>
           </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-radiogroup
             .label=${'Do you agree with the terms?'}
             .options=${['Yes', 'No', 'Maybe']}
@@ -81,7 +83,7 @@ export const demoFunc = () => html`
             .selectedOption=${'Intermediate'}
             .description=${'Select your experience level with web development'}
           ></dees-input-radiogroup>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -106,6 +108,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
+        <dees-form>
           <div class="demo-grid">
             <dees-input-radiogroup
               .label=${'How satisfied are you?'}
@@ -119,9 +122,11 @@ export const demoFunc = () => html`
               .selectedOption=${'Probably'}
             ></dees-input-radiogroup>
           </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
+        <dees-form>
           <div class="demo-grid">
             <dees-input-radiogroup
               .label=${'Required Selection'}
@@ -137,10 +142,11 @@ export const demoFunc = () => html`
               .disabled=${true}
             ></dees-input-radiogroup>
           </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-radiogroup
             .label=${'Theme Preference'}
             .options=${[
@@ -165,7 +171,7 @@ export const demoFunc = () => html`
             .selectedOption=${'English'}
             .direction=${'horizontal'}
           ></dees-input-radiogroup>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>

ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts

@@ -115,6 +115,7 @@ export const demoFunc = () => html`
       </dees-panel>
 
       <dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
+        <dees-form>
           <div class="grid-layout">
             <dees-input-tags
               .label=${'Top 3 Skills'}
@@ -133,6 +134,7 @@ export const demoFunc = () => html`
               .description=${'Choose up to 5 categories'}
             ></dees-input-tags>
           </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>

ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -89,7 +89,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Username'}
             .value=${'johndoe'}
@@ -110,7 +110,7 @@ export const demoFunc = () => html`
             .value=${'secret123'}
             .key=${'password'}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -140,6 +140,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
+        <dees-form>
           <div class="horizontal-group">
             <dees-input-text
               .label=${'First Name'}
@@ -162,6 +163,7 @@ export const demoFunc = () => html`
               .key=${'age'}
             ></dees-input-text>
           </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -181,7 +183,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Label on Top (Default)'}
             .value=${'Standard layout'}
@@ -207,13 +209,13 @@ export const demoFunc = () => html`
             .labelPosition=${'left'}
           ></dees-input-text>
         </div>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
     <dees-demowrapper>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Required Field'}
             .required=${true}
@@ -237,7 +239,7 @@ export const demoFunc = () => html`
               return { valid: false, message: 'Please enter a valid email address' };
             }}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -266,7 +268,7 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Password with Toggle'}
             .isPasswordBool=${true}
@@ -280,7 +282,7 @@ export const demoFunc = () => html`
             .value=${'sk-1234567890abcdef'}
             .infoText=${'Keep this key secure and never share it'}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     

ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts

@@ -116,7 +116,7 @@ export const demoFunc = () => html`
 
     <div class="demo-container">
       <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Enable feature'}
             .value=${false}
@@ -135,12 +135,12 @@ export const demoFunc = () => html`
             .description=${'This toggle has additional helper text explaining its purpose'}
             .key=${'withDesc'}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
         <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
       </dees-panel>
 
       <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Default (off)'}
             .value=${false}
@@ -169,10 +169,11 @@ export const demoFunc = () => html`
             .required=${true}
             .description=${'This toggle cannot be turned off'}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
+        <dees-form>
           <div class="horizontal-toggles">
             <dees-input-toggle
               .label=${'WiFi'}
@@ -198,13 +199,14 @@ export const demoFunc = () => html`
               .layoutMode=${'horizontal'}
             ></dees-input-toggle>
           </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
         <div class="settings-section">
           <h4 class="section-title">Notification Settings</h4>
 
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${'Push notifications'}
               .value=${true}
@@ -232,7 +234,7 @@ export const demoFunc = () => html`
               .description=${'Vibrate for notifications'}
               .key=${'vibration'}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
@@ -243,7 +245,7 @@ export const demoFunc = () => html`
         </div>
 
         <div class="feature-toggles">
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${'Dark Mode'}
               .value=${true}
@@ -273,12 +275,12 @@ export const demoFunc = () => html`
               .value=${false}
               .key=${'beta'}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
       <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Airplane mode'}
             .value=${false}
@@ -300,7 +302,7 @@ export const demoFunc = () => html`
               }
             }}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
 
         <div class="interactive-section">
           <div id="airplane-output" class="output-text">Airplane mode: OFF</div>

ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts

@@ -45,7 +45,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Tags'}
             .infoText=${'Add tags by typing and pressing Enter'}
@@ -58,11 +58,11 @@ export const demoFunc = () => html`
             .infoText=${'Add email addresses of team members'}
             .value=${['alice@example.com', 'bob@example.com']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Your Skills'}
             .infoText=${'List your professional skills'}
@@ -82,11 +82,11 @@ export const demoFunc = () => html`
               .value=${['innovation', 'startup', 'growth']}
             ></dees-input-typelist>
           </div>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Project Dependencies'}
             .infoText=${'List all required npm packages'}
@@ -100,7 +100,7 @@ export const demoFunc = () => html`
             .disabled=${true}
             .value=${['system', 'protected', 'readonly']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>