@design.estate/dees-catalog 3.76.0 → 3.77.0

package/dist_bundle/bundle.js

@@ -138730,90 +138730,92 @@ var demoFunc8 = /* @__PURE__ */ __name(() => b2`
     
     <div class="demo-container">
       <dees-panel .title=${"Basic Checkboxes"} .subtitle=${"Simple checkbox examples with various labels"}>
-        <div class="checkbox-group">
-          <dees-input-checkbox 
-            .label=${"I agree to the Terms and Conditions"} 
+        <dees-form>
+          <dees-input-checkbox
+            .label=${"I agree to the Terms and Conditions"}
             .value=${true}
             .key=${"terms"}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Subscribe to newsletter"} 
+
+          <dees-input-checkbox
+            .label=${"Subscribe to newsletter"}
             .value=${false}
             .key=${"newsletter"}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Enable notifications"} 
+
+          <dees-input-checkbox
+            .label=${"Enable notifications"}
             .value=${false}
             .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-input-checkbox 
-            .label=${"Default state"} 
+        <dees-form>
+          <dees-input-checkbox
+            .label=${"Default state"}
             .value=${false}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Checked state"} 
+
+          <dees-input-checkbox
+            .label=${"Checked state"}
             .value=${true}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Disabled unchecked"} 
+
+          <dees-input-checkbox
+            .label=${"Disabled unchecked"}
             .value=${false}
             .disabled=${true}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Disabled checked"} 
+
+          <dees-input-checkbox
+            .label=${"Disabled checked"}
             .value=${true}
             .disabled=${true}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Required checkbox"} 
+
+          <dees-input-checkbox
+            .label=${"Required checkbox"}
             .required=${true}
             .key=${"required"}
           ></dees-input-checkbox>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${"Horizontal Layout"} .subtitle=${"Checkboxes arranged horizontally for compact forms"}>
-        <div class="horizontal-checkboxes">
-          <dees-input-checkbox 
-            .label=${"Option A"} 
-            .value=${false}
-            .layoutMode=${"horizontal"}
-            .key=${"optionA"}
-          ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Option B"} 
-            .value=${true}
-            .layoutMode=${"horizontal"}
-            .key=${"optionB"}
-          ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Option C"} 
-            .value=${false}
-            .layoutMode=${"horizontal"}
-            .key=${"optionC"}
-          ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Option D"} 
-            .value=${true}
-            .layoutMode=${"horizontal"}
-            .key=${"optionD"}
-          ></dees-input-checkbox>
-        </div>
+        <dees-form>
+          <div class="horizontal-checkboxes">
+            <dees-input-checkbox
+              .label=${"Option A"}
+              .value=${false}
+              .layoutMode=${"horizontal"}
+              .key=${"optionA"}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox
+              .label=${"Option B"}
+              .value=${true}
+              .layoutMode=${"horizontal"}
+              .key=${"optionB"}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox
+              .label=${"Option C"}
+              .value=${false}
+              .layoutMode=${"horizontal"}
+              .key=${"optionC"}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox
+              .label=${"Option D"}
+              .value=${true}
+              .layoutMode=${"horizontal"}
+              .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"}>
@@ -138823,76 +138825,76 @@ var demoFunc8 = /* @__PURE__ */ __name(() => b2`
         </div>
         
         <div class="feature-list">
-          <div class="checkbox-group">
-            <dees-input-checkbox 
-              .label=${"Dark Mode Support"} 
+          <dees-form>
+            <dees-input-checkbox
+              .label=${"Dark Mode Support"}
               .value=${true}
               .key=${"feature1"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"Email Notifications"} 
+
+            <dees-input-checkbox
+              .label=${"Email Notifications"}
               .value=${true}
               .key=${"feature2"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"Two-Factor Authentication"} 
+
+            <dees-input-checkbox
+              .label=${"Two-Factor Authentication"}
               .value=${false}
               .key=${"feature3"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"API Access"} 
+
+            <dees-input-checkbox
+              .label=${"API Access"}
               .value=${true}
               .key=${"feature4"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"Advanced Analytics"} 
+
+            <dees-input-checkbox
+              .label=${"Advanced Analytics"}
               .value=${false}
               .key=${"feature5"}
             ></dees-input-checkbox>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
       
       <dees-panel .title=${"Privacy Settings Example"} .subtitle=${"Checkboxes in a typical form context"}>
         <div class="form-section">
           <h4 class="section-title">Privacy Preferences</h4>
-          
-          <div class="checkbox-group">
-            <dees-input-checkbox 
-              .label=${"Share analytics data"} 
+
+          <dees-form>
+            <dees-input-checkbox
+              .label=${"Share analytics data"}
               .value=${true}
               .description=${"Help us improve by sharing anonymous usage data"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"Personalized recommendations"} 
+
+            <dees-input-checkbox
+              .label=${"Personalized recommendations"}
               .value=${true}
               .description=${"Get suggestions based on your activity"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"Marketing communications"} 
+
+            <dees-input-checkbox
+              .label=${"Marketing communications"}
               .value=${false}
               .description=${"Receive promotional emails and special offers"}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${"Third-party integrations"} 
+
+            <dees-input-checkbox
+              .label=${"Third-party integrations"}
               .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-input-checkbox 
-            .label=${"Feature toggle"} 
+        <dees-form>
+          <dees-input-checkbox
+            .label=${"Feature toggle"}
             .value=${false}
             @changeSubject=${(event) => {
   const output = document.querySelector("#checkbox-output");
@@ -138902,9 +138904,9 @@ var demoFunc8 = /* @__PURE__ */ __name(() => b2`
   }
 }}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${"Debug mode"} 
+
+          <dees-input-checkbox
+            .label=${"Debug mode"}
             .value=${false}
             @changeSubject=${(event) => {
   const output = document.querySelector("#debug-output");
@@ -138914,8 +138916,8 @@ var demoFunc8 = /* @__PURE__ */ __name(() => b2`
   }
 }}
           ></dees-input-checkbox>
-        </div>
-        
+        </dees-form>
+
         <div class="interactive-section">
           <div id="checkbox-output" class="output-text">Feature is disabled</div>
           <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
@@ -143062,12 +143064,6 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
         flex-wrap: wrap;
       }
       
-      .input-group {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-      }
-
       .grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -143116,7 +143112,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
   }
 }}>
       <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"}
@@ -143137,7 +143133,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
             .value=${"secret123"}
             .key=${"password"}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -143160,28 +143156,30 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
   }
 }}>
       <dees-panel .title=${"Horizontal Layout"} .subtitle=${"Multiple inputs arranged horizontally for compact forms"}>
-        <div class="horizontal-group">
-          <dees-input-text 
-            .label=${"First Name"} 
-            .value=${"John"} 
-            .layoutMode=${"horizontal"}
-            .key=${"firstName"}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${"Last Name"} 
-            .value=${"Doe"} 
-            .layoutMode=${"horizontal"}
-            .key=${"lastName"}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${"Age"} 
-            .value=${"28"} 
-            .layoutMode=${"horizontal"}
-            .key=${"age"}
-          ></dees-input-text>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-text
+              .label=${"First Name"}
+              .value=${"John"}
+              .layoutMode=${"horizontal"}
+              .key=${"firstName"}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${"Last Name"}
+              .value=${"Doe"}
+              .layoutMode=${"horizontal"}
+              .key=${"lastName"}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${"Age"}
+              .value=${"28"}
+              .layoutMode=${"horizontal"}
+              .key=${"age"}
+            ></dees-input-text>
+          </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -143197,7 +143195,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
   }
 }}>
       <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"}
@@ -143211,25 +143209,25 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
           ></dees-input-text>
 
           <div class="grid-layout">
-          <dees-input-text 
-            .label=${"City"} 
-            .value=${"New York"} 
+          <dees-input-text
+            .label=${"City"}
+            .value=${"New York"}
             .labelPosition=${"left"}
           ></dees-input-text>
-          
+
           <dees-input-text
             .label=${"ZIP Code"}
             .value=${"10001"}
             .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}
@@ -143253,7 +143251,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
   return { valid: false, message: "Please enter a valid email address" };
 }}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -143277,7 +143275,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
   });
 }}>
       <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}
@@ -143291,7 +143289,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
             .value=${"sk-1234567890abcdef"}
             .infoText=${"Keep this key secure and never share it"}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -144381,12 +144379,6 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .shopping-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -144433,7 +144425,7 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
     
     <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"}
@@ -144446,7 +144438,7 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
             .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) => {
@@ -144538,7 +144530,7 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
       </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"}
@@ -144552,7 +144544,7 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
             .disabled=${true}
             .value=${5}
           ></dees-input-quantityselector>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${"Order Form"} .subtitle=${"Complete order form with quantity selection"}>
@@ -144788,12 +144780,6 @@ var demoFunc16 = /* @__PURE__ */ __name(() => b2`
           margin-bottom: 0;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .demo-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -144813,25 +144799,27 @@ var demoFunc16 = /* @__PURE__ */ __name(() => b2`
     
     <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"]}
@@ -144846,7 +144834,7 @@ var demoFunc16 = /* @__PURE__ */ __name(() => b2`
             .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"}>
@@ -144871,41 +144859,45 @@ var demoFunc16 = /* @__PURE__ */ __name(() => b2`
       </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=${[
@@ -144930,7 +144922,7 @@ var demoFunc16 = /* @__PURE__ */ __name(() => b2`
             .selectedOption=${"English"}
             .direction=${"horizontal"}
           ></dees-input-radiogroup>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${"7. Form Integration"} .subtitle=${"Works seamlessly with dees-form"}>
@@ -145498,12 +145490,6 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
         flex-wrap: wrap;
       }
       
-      .input-group {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-      }
-
       .spacer {
         height: 200px;
         display: flex;
@@ -145531,7 +145517,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
   }
 }}>
       <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"}
@@ -145557,7 +145543,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
   { option: "Guest", key: "guest" }
 ]}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -145593,40 +145579,42 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
   });
 }}>
       <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=${[
+        <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=${[
+            ></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=${[
+            ></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-input-dropdown>
+          </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -145639,7 +145627,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
   }
 }}>
       <dees-panel .title=${"4. States"} .subtitle=${"Different states and configurations"}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-dropdown
             .label=${"Required Field"}
             .required=${true}
@@ -145658,7 +145646,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
 ]}
             .selectedOption=${{ option: "Cannot Select", key: "disabled" }}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -146431,41 +146419,43 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
         .title=${"Modern file uploader"}
         .subtitle=${"Shadcn-inspired layout with drag & drop, previews and validation"}
       >
-        <div class="demo-grid demo-grid--two">
-          <div class="demo-stack">
-            <dees-input-fileupload
-              .label=${"Attachments"}
-              .infoText=${"Upload supporting documents for your request"}
-              .description=${"Accepted formats: images, PDF, and ZIP archives up to 10MB"}
-              .accept=${"image/*,.pdf,.zip"}
-              .maxSize=${10 * 1024 * 1024}
-            ></dees-input-fileupload>
-
-            <dees-input-fileupload
-              .label=${"Brand assets"}
-              .infoText=${"Upload high-resolution imagery (JPG/PNG)"}
-              .accept=${"image/jpeg,image/png"}
-              .multiple=${false}
-              .maxSize=${5 * 1024 * 1024}
-              .buttonText=${"Select cover image"}
-            ></dees-input-fileupload>
-          </div>
+        <dees-form>
+          <div class="demo-grid demo-grid--two">
+            <div class="demo-stack">
+              <dees-input-fileupload
+                .label=${"Attachments"}
+                .infoText=${"Upload supporting documents for your request"}
+                .description=${"Accepted formats: images, PDF, and ZIP archives up to 10MB"}
+                .accept=${"image/*,.pdf,.zip"}
+                .maxSize=${10 * 1024 * 1024}
+              ></dees-input-fileupload>
 
-          <div class="demo-stack">
-            <dees-input-fileupload
-              .label=${"Audio uploads"}
-              .infoText=${"Share podcast drafts (MP3/WAV, max 25MB each)"}
-              .accept=${"audio/*"}
-              .maxSize=${25 * 1024 * 1024}
-            ></dees-input-fileupload>
-
-            <dees-input-fileupload
-              .label=${"Disabled example"}
-              .infoText=${"Uploader is disabled while moderation is pending"}
-              .disabled=${true}
-            ></dees-input-fileupload>
+              <dees-input-fileupload
+                .label=${"Brand assets"}
+                .infoText=${"Upload high-resolution imagery (JPG/PNG)"}
+                .accept=${"image/jpeg,image/png"}
+                .multiple=${false}
+                .maxSize=${5 * 1024 * 1024}
+                .buttonText=${"Select cover image"}
+              ></dees-input-fileupload>
+            </div>
+
+            <div class="demo-stack">
+              <dees-input-fileupload
+                .label=${"Audio uploads"}
+                .infoText=${"Share podcast drafts (MP3/WAV, max 25MB each)"}
+                .accept=${"audio/*"}
+                .maxSize=${25 * 1024 * 1024}
+              ></dees-input-fileupload>
+
+              <dees-input-fileupload
+                .label=${"Disabled example"}
+                .infoText=${"Uploader is disabled while moderation is pending"}
+                .disabled=${true}
+              ></dees-input-fileupload>
+            </div>
           </div>
-        </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel
@@ -146474,7 +146464,6 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
       >
         <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?"}
@@ -146516,7 +146505,6 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
               ></dees-input-text>
 
               <dees-form-submit .text=${"Submit briefing"}></dees-form-submit>
-            </div>
           </dees-form>
 
           <div class="demo-note">
@@ -148758,12 +148746,6 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .payment-group {
           display: flex;
           align-items: center;
@@ -148775,7 +148757,7 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
     
     <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"}
@@ -148787,27 +148769,29 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
             .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"}>
-        <div class="payment-group">
-          <dees-input-text 
-            .label=${"Account Holder"} 
-            .layoutMode=${"horizontal"}
-            .value=${"John Doe"}
-          ></dees-input-text>
-          
-          <dees-input-iban 
-            .label=${"IBAN"} 
-            .layoutMode=${"horizontal"}
-            .value=${"GB82WEST12345698765432"}
-          ></dees-input-iban>
-        </div>
+        <dees-form>
+          <div class="payment-group">
+            <dees-input-text
+              .label=${"Account Holder"}
+              .layoutMode=${"horizontal"}
+              .value=${"John Doe"}
+            ></dees-input-text>
+
+            <dees-input-iban
+              .label=${"IBAN"}
+              .layoutMode=${"horizontal"}
+              .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"}
@@ -148820,7 +148804,7 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
             .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"}>
@@ -148984,81 +148968,83 @@ var demoFunc21 = /* @__PURE__ */ __name(() => b2`
       <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>
-      </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-form>
           <dees-input-multitoggle
-            .label=${"Auto-Save"}
+            .label=${"Notifications"}
+            .infoText=${"Enable or disable push notifications"}
             .type=${"boolean"}
-            .booleanTrueName=${"Enabled"}
-            .booleanFalseName=${"Disabled"}
-            .selectedOption=${"Enabled"}
+            .selectedOption=${"true"}
           ></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"}
+            .label=${"Theme Mode"}
+            .infoText=${"Switch between light and dark theme"}
             .type=${"boolean"}
-            .booleanTrueName=${"Private"}
-            .booleanFalseName=${"Public"}
-            .selectedOption=${"Private"}
+            .booleanTrueName=${"Dark"}
+            .booleanFalseName=${"Light"}
+            .selectedOption=${"Dark"}
           ></dees-input-multitoggle>
-        </div>
+        </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"}
+              .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">
@@ -149337,12 +149323,6 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .horizontal-group {
           display: flex;
           align-items: center;
@@ -149354,7 +149334,7 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
     
     <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"}
@@ -149368,27 +149348,29 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
             .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"}>
-        <div class="horizontal-group">
-          <dees-input-phone 
-            .label=${"Mobile"} 
-            .layoutMode=${"horizontal"}
-            .value=${"4155551234"}
-          ></dees-input-phone>
-          
-          <dees-input-phone 
-            .label=${"Office"} 
-            .layoutMode=${"horizontal"}
-            .placeholder=${"+1 (800) 555-0000"}
-          ></dees-input-phone>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-phone
+              .label=${"Mobile"}
+              .layoutMode=${"horizontal"}
+              .value=${"4155551234"}
+            ></dees-input-phone>
+
+            <dees-input-phone
+              .label=${"Office"}
+              .layoutMode=${"horizontal"}
+              .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"}
@@ -149400,7 +149382,7 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
             .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"}>
@@ -149632,7 +149614,7 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
 
     <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}
@@ -149651,12 +149633,12 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
             .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}
@@ -149685,42 +149667,44 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
             .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"}>
-        <div class="horizontal-toggles">
-          <dees-input-toggle
-            .label=${"WiFi"}
-            .value=${true}
-            .layoutMode=${"horizontal"}
-          ></dees-input-toggle>
+        <dees-form>
+          <div class="horizontal-toggles">
+            <dees-input-toggle
+              .label=${"WiFi"}
+              .value=${true}
+              .layoutMode=${"horizontal"}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${"Bluetooth"}
-            .value=${false}
-            .layoutMode=${"horizontal"}
-          ></dees-input-toggle>
+            <dees-input-toggle
+              .label=${"Bluetooth"}
+              .value=${false}
+              .layoutMode=${"horizontal"}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${"GPS"}
-            .value=${true}
-            .layoutMode=${"horizontal"}
-          ></dees-input-toggle>
+            <dees-input-toggle
+              .label=${"GPS"}
+              .value=${true}
+              .layoutMode=${"horizontal"}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${"NFC"}
-            .value=${false}
-            .layoutMode=${"horizontal"}
-          ></dees-input-toggle>
-        </div>
+            <dees-input-toggle
+              .label=${"NFC"}
+              .value=${false}
+              .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}
@@ -149748,7 +149732,7 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
               .description=${"Vibrate for notifications"}
               .key=${"vibration"}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
@@ -149759,7 +149743,7 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
         </div>
 
         <div class="feature-toggles">
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${"Dark Mode"}
               .value=${true}
@@ -149789,12 +149773,12 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
               .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}
@@ -149816,7 +149800,7 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
   }
 }}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
 
         <div class="interactive-section">
           <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
@@ -150161,12 +150145,6 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .horizontal-group {
           display: flex;
           gap: 24px;
@@ -150193,7 +150171,7 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
     
     <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"}
@@ -150206,11 +150184,11 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
             .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"}
@@ -150218,23 +150196,23 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
           ></dees-input-typelist>
 
           <div class="horizontal-group">
-          <dees-input-typelist
-            .label=${"Categories"}
-            .layoutMode=${"horizontal"}
-            .value=${["Technology", "Design", "Business"]}
-          ></dees-input-typelist>
-          
-          <dees-input-typelist
-            .label=${"Keywords"}
-            .layoutMode=${"horizontal"}
-            .value=${["innovation", "startup", "growth"]}
-          ></dees-input-typelist>
-        </div>
-        </div>
+            <dees-input-typelist
+              .label=${"Categories"}
+              .layoutMode=${"horizontal"}
+              .value=${["Technology", "Design", "Business"]}
+            ></dees-input-typelist>
+
+            <dees-input-typelist
+              .label=${"Keywords"}
+              .layoutMode=${"horizontal"}
+              .value=${["innovation", "startup", "growth"]}
+            ></dees-input-typelist>
+          </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"}
@@ -150248,7 +150226,7 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
             .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"}>
@@ -150484,7 +150462,7 @@ var DeesInputTypelist = _DeesInputTypelist;
 // ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts
 init_dist_ts30();
 var _a34;
-var demoFunc25 = /* @__PURE__ */ __name(() => b2(_a34 || (_a34 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .suggestions=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <div class="grid-layout">\n          <dees-input-tags\n            .label=', "\n            .placeholder=", "\n            .maxTags=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n          \n          <dees-input-tags\n            .label=", "\n            .placeholder=", "\n            .maxTags=", "\n            .suggestions=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n        </div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .required=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .value=", "\n          .disabled=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-form>\n          <dees-input-text\n            .label=", "\n            .placeholder=", "\n            .required=", "\n            .key=", '\n          ></dees-input-text>\n          \n          <div class="grid-layout">\n            <dees-input-tags\n              .label=', "\n              .placeholder=", "\n              .required=", "\n              .key=", "\n              .suggestions=", "\n            ></dees-input-tags>\n            \n            <dees-input-tags\n              .label=", "\n              .placeholder=", "\n              .key=", "\n              .maxTags=", "\n              .suggestions=", "\n            ></dees-input-tags>\n          </div>\n          \n          <dees-input-text\n            .label=", "\n            .inputType=", "\n            .placeholder=", "\n            .key=", "\n          ></dees-input-text>\n          \n          <dees-form-submit .text=", "></dees-form-submit>\n        </dees-form>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-input-tags\n          id="interactive-tags"\n          .label=', "\n          .placeholder=", "\n          .suggestions=", "\n          @change=", `
+var demoFunc25 = /* @__PURE__ */ __name(() => b2(_a34 || (_a34 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .suggestions=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-form>\n          <div class="grid-layout">\n            <dees-input-tags\n              .label=', "\n              .placeholder=", "\n              .maxTags=", "\n              .value=", "\n              .description=", "\n            ></dees-input-tags>\n\n            <dees-input-tags\n              .label=", "\n              .placeholder=", "\n              .maxTags=", "\n              .suggestions=", "\n              .value=", "\n              .description=", "\n            ></dees-input-tags>\n          </div>\n        </dees-form>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .required=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .value=", "\n          .disabled=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-form>\n          <dees-input-text\n            .label=", "\n            .placeholder=", "\n            .required=", "\n            .key=", '\n          ></dees-input-text>\n          \n          <div class="grid-layout">\n            <dees-input-tags\n              .label=', "\n              .placeholder=", "\n              .required=", "\n              .key=", "\n              .suggestions=", "\n            ></dees-input-tags>\n            \n            <dees-input-tags\n              .label=", "\n              .placeholder=", "\n              .key=", "\n              .maxTags=", "\n              .suggestions=", "\n            ></dees-input-tags>\n          </div>\n          \n          <dees-input-text\n            .label=", "\n            .inputType=", "\n            .placeholder=", "\n            .key=", "\n          ></dees-input-text>\n          \n          <dees-form-submit .text=", "></dees-form-submit>\n        </dees-form>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-input-tags\n          id="interactive-tags"\n          .label=', "\n          .placeholder=", "\n          .suggestions=", "\n          @change=", `
         ></dees-input-tags>
         
         <div class="tag-preview" id="tags-preview">
@@ -151173,25 +151151,27 @@ var demoFunc26 = /* @__PURE__ */ __name(() => b2`
       </dees-panel>
 
       <dees-panel .title=${"3. Validation & Constraints"} .subtitle=${"Lists with minimum/maximum items and duplicate prevention"}>
-        <div class="grid-layout">
-          <dees-input-list
-            .label=${"Team Members (Min 2, Max 5)"}
-            .placeholder=${"Add team member..."}
-            .minItems=${2}
-            .maxItems=${5}
-            .value=${["Alice", "Bob"]}
-            .required=${true}
-            .description=${"Add 2-5 team members"}
-          ></dees-input-list>
-          
-          <dees-input-list
-            .label=${"Unique Tags (No Duplicates)"}
-            .placeholder=${"Add unique tag..."}
-            .allowDuplicates=${false}
-            .value=${["frontend", "backend", "database"]}
-            .description=${"Duplicate items are not allowed"}
-          ></dees-input-list>
-        </div>
+        <dees-form>
+          <div class="grid-layout">
+            <dees-input-list
+              .label=${"Team Members (Min 2, Max 5)"}
+              .placeholder=${"Add team member..."}
+              .minItems=${2}
+              .maxItems=${5}
+              .value=${["Alice", "Bob"]}
+              .required=${true}
+              .description=${"Add 2-5 team members"}
+            ></dees-input-list>
+
+            <dees-input-list
+              .label=${"Unique Tags (No Duplicates)"}
+              .placeholder=${"Add unique tag..."}
+              .allowDuplicates=${false}
+              .value=${["frontend", "backend", "database"]}
+              .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"}>
@@ -164592,11 +164572,44 @@ var tableStyles = [
         100% { color: var(--dees-color-text-primary); }
       }
 
+      /* Border/background flash variant for cells with styled content
+         (badges, icons, custom components) where a text-color animation
+         would be invisible. Activated via flashBorder on Column. */
+      .innerCellContainer.flashing-border {
+        animation: dees-table-cell-flash-border
+                   var(--dees-table-flash-duration, 900ms)
+                   var(--dees-table-flash-easing);
+        border-radius: 3px;
+      }
+
+      @keyframes dees-table-cell-flash-border {
+        0%,
+        35% {
+          box-shadow: inset 0 0 0 1.5px var(--dees-table-flash-color);
+          background: ${cssManager.bdTheme(
+    "hsl(45 93% 62% / 0.10)",
+    "hsl(45 93% 62% / 0.08)"
+  )};
+        }
+        100% {
+          box-shadow: inset 0 0 0 1.5px transparent;
+          background: transparent;
+        }
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .innerCellContainer.flashing {
           animation: none;
           color: var(--dees-table-flash-color);
         }
+        .innerCellContainer.flashing-border {
+          animation: none;
+          box-shadow: inset 0 0 0 1.5px var(--dees-table-flash-color);
+          background: ${cssManager.bdTheme(
+    "hsl(45 93% 62% / 0.10)",
+    "hsl(45 93% 62% / 0.08)"
+  )};
+        }
       }
 
       /* Dev-time warning banner shown when highlight-updates="flash" but
@@ -165537,13 +165550,15 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
           const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
           const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
           const isFlashing = !!flashSet?.has(editKey);
+          const useFlashBorder = isFlashing && !!col.flashBorder;
           const cellClasses = [
             isEditable ? "editable" : "",
             isFocused && !isEditing ? "focused" : "",
             isEditing ? "editingCell" : ""
           ].filter(Boolean).join(" ");
+          const flashClass = isFlashing ? useFlashBorder ? "innerCellContainer flashing-border" : "innerCellContainer flashing" : "innerCellContainer";
           const innerHtml = b2`<div
-                              class=${isFlashing ? "innerCellContainer flashing" : "innerCellContainer"}
+                              class=${flashClass}
                             >
                               ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
                             </div>`;
@@ -166075,6 +166090,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     if (!changedProperties.has("data")) return;
     const effectiveColumns = this.__getEffectiveColumns();
     const visibleCols = effectiveColumns.filter((c11) => !c11.hidden);
+    const colByKey = new Map(visibleCols.map((c11) => [String(c11.key), c11]));
     const nextSnapshot = /* @__PURE__ */ new Map();
     const newlyFlashing = /* @__PURE__ */ new Map();
     for (const row of this.data) {
@@ -166087,7 +166103,17 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       const prevCells = this.__prevSnapshot?.get(rowId);
       if (!prevCells) continue;
       for (const [colKey, nextVal] of cellMap) {
-        if (prevCells.get(colKey) !== nextVal) {
+        const prevVal = prevCells.get(colKey);
+        const colDef = colByKey.get(colKey);
+        let changed;
+        if (colDef?.flashCompare) {
+          changed = colDef.flashCompare(prevVal, nextVal);
+        } else if (nextVal !== null && nextVal !== void 0 && typeof nextVal === "object") {
+          changed = false;
+        } else {
+          changed = prevVal !== nextVal;
+        }
+        if (changed) {
           if (this.__editingCell && this.__editingCell.rowId === rowId && this.__editingCell.colKey === colKey) continue;
           let set3 = newlyFlashing.get(rowId);
           if (!set3) {
@@ -201426,7 +201452,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.76.0",
+  version: "3.77.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -203391,4 +203417,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1776019869407.js.map
+//# sourceMappingURL=bundle-1776025100805.js.map