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

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,40 +136,42 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
-        <div class="horizontal-group">
-          <dees-input-dropdown
-            .label=${'Department'}
-            .layoutMode=${'horizontal'}
-            .options=${[
-              { option: 'Engineering', key: 'eng' },
-              { option: 'Design', key: 'design' },
-              { option: 'Marketing', key: 'marketing' },
-              { option: 'Sales', key: 'sales' }
-            ]}
-          ></dees-input-dropdown>
-          
-          <dees-input-dropdown
-            .label=${'Team Size'}
-            .layoutMode=${'horizontal'}
-            .enableSearch=${false}
-            .options=${[
-              { option: '1-5', key: 'small' },
-              { option: '6-20', key: 'medium' },
-              { option: '21-50', key: 'large' },
-              { option: '50+', key: 'xlarge' }
-            ]}
-          ></dees-input-dropdown>
-          
-          <dees-input-dropdown
-            .label=${'Location'}
-            .layoutMode=${'horizontal'}
-            .options=${[
-              { option: 'Remote', key: 'remote' },
-              { option: 'On-site', key: 'onsite' },
-              { option: 'Hybrid', key: 'hybrid' }
-            ]}
-          ></dees-input-dropdown>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-dropdown
+              .label=${'Department'}
+              .layoutMode=${'horizontal'}
+              .options=${[
+                { option: 'Engineering', key: 'eng' },
+                { option: 'Design', key: 'design' },
+                { option: 'Marketing', key: 'marketing' },
+                { option: 'Sales', key: 'sales' }
+              ]}
+            ></dees-input-dropdown>
+
+            <dees-input-dropdown
+              .label=${'Team Size'}
+              .layoutMode=${'horizontal'}
+              .enableSearch=${false}
+              .options=${[
+                { option: '1-5', key: 'small' },
+                { option: '6-20', key: 'medium' },
+                { option: '21-50', key: 'large' },
+                { option: '50+', key: 'xlarge' }
+              ]}
+            ></dees-input-dropdown>
+
+            <dees-input-dropdown
+              .label=${'Location'}
+              .layoutMode=${'horizontal'}
+              .options=${[
+                { option: 'Remote', key: 'remote' },
+                { option: 'On-site', key: 'onsite' },
+                { option: 'Hybrid', key: 'hybrid' }
+              ]}
+            ></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>