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

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

@@ -52,81 +52,83 @@ export const demoFunc = () => html`
       <div class="section">
         <div class="section-title">Multi-Option Toggle</div>
         <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
-        
-        <dees-input-multitoggle
-          .label=${'Display Mode'}
-          .infoText=${'Choose how content is displayed'}
-          .description=${'This setting affects how items appear on your dashboard'}
-          .options=${['List View', 'Grid View', 'Compact']}
-          .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>
+          <dees-input-multitoggle
+            .label=${'Display Mode'}
+            .infoText=${'Choose how content is displayed'}
+            .description=${'This setting affects how items appear on your dashboard'}
+            .options=${['List View', 'Grid View', 'Compact']}
+            .selectedOption=${'Grid View'}
+          ></dees-input-multitoggle>
+
+          <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-input-multitoggle
-          .label=${'Notifications'}
-          .infoText=${'Enable or disable push notifications'}
-          .type=${'boolean'}
-          .selectedOption=${'true'}
-        ></dees-input-multitoggle>
-        
-        <br><br>
-        
-        <dees-input-multitoggle
-          .label=${'Theme Mode'}
-          .infoText=${'Switch between light and dark theme'}
-          .type=${'boolean'}
-          .booleanTrueName=${'Dark'}
-          .booleanFalseName=${'Light'}
-          .selectedOption=${'Dark'}
-        ></dees-input-multitoggle>
+
+        <dees-form>
+          <dees-input-multitoggle
+            .label=${'Notifications'}
+            .infoText=${'Enable or disable push notifications'}
+            .type=${'boolean'}
+            .selectedOption=${'true'}
+          ></dees-input-multitoggle>
+
+          <dees-input-multitoggle
+            .label=${'Theme Mode'}
+            .infoText=${'Switch between light and dark theme'}
+            .type=${'boolean'}
+            .booleanTrueName=${'Dark'}
+            .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>
-        
-        <div class="settings-grid">
-          <dees-input-multitoggle
-            .label=${'Auto-Save'}
-            .type=${'boolean'}
-            .booleanTrueName=${'Enabled'}
-            .booleanFalseName=${'Disabled'}
-            .selectedOption=${'Enabled'}
-          ></dees-input-multitoggle>
-          
-          <dees-input-multitoggle
-            .label=${'Language'}
-            .options=${['English', 'German', 'French', 'Spanish']}
-            .selectedOption=${'English'}
-          ></dees-input-multitoggle>
-          
-          <dees-input-multitoggle
-            .label=${'Quality'}
-            .options=${['Low', 'Medium', 'High', 'Ultra']}
-            .selectedOption=${'High'}
-          ></dees-input-multitoggle>
-          
-          <dees-input-multitoggle
-            .label=${'Privacy'}
-            .type=${'boolean'}
-            .booleanTrueName=${'Private'}
-            .booleanFalseName=${'Public'}
-            .selectedOption=${'Private'}
-          ></dees-input-multitoggle>
-        </div>
+
+        <dees-form>
+          <div class="settings-grid">
+            <dees-input-multitoggle
+              .label=${'Auto-Save'}
+              .type=${'boolean'}
+              .booleanTrueName=${'Enabled'}
+              .booleanFalseName=${'Disabled'}
+              .selectedOption=${'Enabled'}
+            ></dees-input-multitoggle>
+
+            <dees-input-multitoggle
+              .label=${'Language'}
+              .options=${['English', 'German', 'French', 'Spanish']}
+              .selectedOption=${'English'}
+            ></dees-input-multitoggle>
+
+            <dees-input-multitoggle
+              .label=${'Quality'}
+              .options=${['Low', 'Medium', 'High', 'Ultra']}
+              .selectedOption=${'High'}
+            ></dees-input-multitoggle>
+
+            <dees-input-multitoggle
+              .label=${'Privacy'}
+              .type=${'boolean'}
+              .booleanTrueName=${'Private'}
+              .booleanFalseName=${'Public'}
+              .selectedOption=${'Private'}
+            ></dees-input-multitoggle>
+          </div>
+        </dees-form>
       </div>
       
       <div class="section">