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

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

@@ -48,25 +48,27 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
-        <div class="demo-grid">
-          <dees-input-radiogroup
-            .label=${'Subscription Plan'}
-            .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
-            .selectedOption=${'Pro - $29/month'}
-            .description=${'Choose your subscription tier'}
-          ></dees-input-radiogroup>
-          
-          <dees-input-radiogroup
-            .label=${'Priority Level'}
-            .options=${['High', 'Medium', 'Low']}
-            .selectedOption=${'Medium'}
-            .required=${true}
-          ></dees-input-radiogroup>
-        </div>
+        <dees-form>
+          <div class="demo-grid">
+            <dees-input-radiogroup
+              .label=${'Subscription Plan'}
+              .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
+              .selectedOption=${'Pro - $29/month'}
+              .description=${'Choose your subscription tier'}
+            ></dees-input-radiogroup>
+
+            <dees-input-radiogroup
+              .label=${'Priority Level'}
+              .options=${['High', 'Medium', 'Low']}
+              .selectedOption=${'Medium'}
+              .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,41 +108,45 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
-        <div class="demo-grid">
-          <dees-input-radiogroup
-            .label=${'How satisfied are you?'}
-            .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
-            .selectedOption=${'Satisfied'}
-          ></dees-input-radiogroup>
-          
-          <dees-input-radiogroup
-            .label=${'Would you recommend us?'}
-            .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
-            .selectedOption=${'Probably'}
-          ></dees-input-radiogroup>
-        </div>
+        <dees-form>
+          <div class="demo-grid">
+            <dees-input-radiogroup
+              .label=${'How satisfied are you?'}
+              .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
+              .selectedOption=${'Satisfied'}
+            ></dees-input-radiogroup>
+
+            <dees-input-radiogroup
+              .label=${'Would you recommend us?'}
+              .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
+              .selectedOption=${'Probably'}
+            ></dees-input-radiogroup>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
-        <div class="demo-grid">
-          <dees-input-radiogroup
-            .label=${'Required Selection'}
-            .options=${['Option A', 'Option B', 'Option C']}
-            .required=${true}
-            .description=${'This field is required'}
-          ></dees-input-radiogroup>
-          
-          <dees-input-radiogroup
-            .label=${'Disabled State'}
-            .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
-            .selectedOption=${'Disabled Option 2'}
-            .disabled=${true}
-          ></dees-input-radiogroup>
-        </div>
+        <dees-form>
+          <div class="demo-grid">
+            <dees-input-radiogroup
+              .label=${'Required Selection'}
+              .options=${['Option A', 'Option B', 'Option C']}
+              .required=${true}
+              .description=${'This field is required'}
+            ></dees-input-radiogroup>
+
+            <dees-input-radiogroup
+              .label=${'Disabled State'}
+              .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
+              .selectedOption=${'Disabled Option 2'}
+              .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'}>