npm - @design.estate/dees-catalog - Versions diffs - 3.75.0 → 3.76.1 - Mend

@design.estate/dees-catalog 3.75.0 → 3.76.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/dist_bundle/bundle.js CHANGED Viewed

@@ -138477,8 +138477,8 @@ html\`
 // ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
 init_dist_ts30();
 init_dist_ts29();
-var _description_dec, _disabled_dec, _required_dec, _label_dec, _key_dec, _labelPosition_dec, _layoutMode_dec, _a12, _init10, _layoutMode, _labelPosition, _key, _label, _required, _disabled, _description;
-var _DeesInputBase = class _DeesInputBase extends (_a12 = DeesElement, _layoutMode_dec = [n5({ type: String })], _labelPosition_dec = [n5({ type: String })], _key_dec = [n5({ type: String })], _label_dec = [n5({ type: String })], _required_dec = [n5({ type: Boolean })], _disabled_dec = [n5({ type: Boolean })], _description_dec = [n5({ type: String })], _a12) {
+var _description_dec, _infoText_dec, _disabled_dec, _required_dec, _label_dec, _key_dec, _labelPosition_dec, _layoutMode_dec, _a12, _init10, _layoutMode, _labelPosition, _key, _label, _required, _disabled, _infoText, _description;
+var _DeesInputBase = class _DeesInputBase extends (_a12 = DeesElement, _layoutMode_dec = [n5({ type: String })], _labelPosition_dec = [n5({ type: String })], _key_dec = [n5({ type: String })], _label_dec = [n5({ type: String })], _required_dec = [n5({ type: Boolean })], _disabled_dec = [n5({ type: Boolean })], _infoText_dec = [n5({ type: String })], _description_dec = [n5({ type: String })], _a12) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _layoutMode, __runInitializers(_init10, 8, this, "auto")), __runInitializers(_init10, 11, this);
@@ -138487,7 +138487,8 @@ var _DeesInputBase = class _DeesInputBase extends (_a12 = DeesElement, _layoutMo
     __privateAdd(this, _label, __runInitializers(_init10, 20, this)), __runInitializers(_init10, 23, this);
     __privateAdd(this, _required, __runInitializers(_init10, 24, this, false)), __runInitializers(_init10, 27, this);
     __privateAdd(this, _disabled, __runInitializers(_init10, 28, this, false)), __runInitializers(_init10, 31, this);
-    __privateAdd(this, _description, __runInitializers(_init10, 32, this)), __runInitializers(_init10, 35, this);
+    __privateAdd(this, _infoText, __runInitializers(_init10, 32, this)), __runInitializers(_init10, 35, this);
+    __privateAdd(this, _description, __runInitializers(_init10, 36, this)), __runInitializers(_init10, 39, this);
     /**
      * Subject for value changes that all inputs should implement
      */
@@ -138538,6 +138539,14 @@ var _DeesInputBase = class _DeesInputBase extends (_a12 = DeesElement, _layoutMo
         :host([label-position="none"]) dees-label {
           display: none;
         }
+        /* Description text below input */
+        .descriptionText {
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 1.4;
+          color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+        }
       `
     ];
   }
@@ -138588,6 +138597,13 @@ var _DeesInputBase = class _DeesInputBase extends (_a12 = DeesElement, _layoutMo
   async unfreeze() {
     this.disabled = false;
   }
+  /**
+   * Renders the description text below the input.
+   * Call ${this.renderDescription()} at the end of your render template.
+   */
+  renderDescription() {
+    return this.description ? b2`<div class="descriptionText">${this.description}</div>` : "";
+  }
 };
 _init10 = __decoratorStart(_a12);
 _layoutMode = new WeakMap();
@@ -138596,6 +138612,7 @@ _key = new WeakMap();
 _label = new WeakMap();
 _required = new WeakMap();
 _disabled = new WeakMap();
+_infoText = new WeakMap();
 _description = new WeakMap();
 __decorateElement(_init10, 4, "layoutMode", _layoutMode_dec, _DeesInputBase, _layoutMode);
 __decorateElement(_init10, 4, "labelPosition", _labelPosition_dec, _DeesInputBase, _labelPosition);
@@ -138603,6 +138620,7 @@ __decorateElement(_init10, 4, "key", _key_dec, _DeesInputBase, _key);
 __decorateElement(_init10, 4, "label", _label_dec, _DeesInputBase, _label);
 __decorateElement(_init10, 4, "required", _required_dec, _DeesInputBase, _required);
 __decorateElement(_init10, 4, "disabled", _disabled_dec, _DeesInputBase, _disabled);
+__decorateElement(_init10, 4, "infoText", _infoText_dec, _DeesInputBase, _infoText);
 __decorateElement(_init10, 4, "description", _description_dec, _DeesInputBase, _description);
 __decoratorMetadata(_init10, _DeesInputBase);
 __name(_DeesInputBase, "DeesInputBase");
@@ -138712,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"}>
@@ -138805,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");
@@ -138884,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");
@@ -138896,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>
@@ -138946,7 +138966,7 @@ var _DeesInputCheckbox = class _DeesInputCheckbox extends (_a13 = DeesInputBase,
           </div>
           <div class="label-container">
             ${this.label ? b2`<div class="checkbox-label">${this.label}</div>` : ""}
-            ${this.description ? b2`<div class="description-text">${this.description}</div>` : ""}
+            ${this.renderDescription()}
           </div>
         </div>
       </div>
@@ -139102,12 +139122,6 @@ __publicField(_DeesInputCheckbox, "styles", [
           color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
         }
-        /* Description */
-        .description-text {
-          font-size: 12px;
-          color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-          line-height: 1.5;
-        }
     `
 ]);
 __runInitializers(_init11, 1, _DeesInputCheckbox);
@@ -140208,31 +140222,31 @@ var demoFunc11 = /* @__PURE__ */ __name(() => b2`
     </div>
     <div class="demo-section">
-      <h3>Description (Info Icon)</h3>
-      <p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
+      <h3>Info Text (Info Icon)</h3>
+      <p>When <code>infoText</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
       <div class="label-grid">
         <div class="label-row">
-          <span class="annotation">description="..."</span>
-          <dees-label .label=${"API Key"} .description=${"Your API key can be found in the developer settings dashboard."}></dees-label>
+          <span class="annotation">infoText="..."</span>
+          <dees-label .label=${"API Key"} .infoText=${"Your API key can be found in the developer settings dashboard."}></dees-label>
         </div>
         <div class="label-row">
-          <span class="annotation">short description</span>
-          <dees-label .label=${"Region"} .description=${"Select your nearest datacenter."}></dees-label>
+          <span class="annotation">short infoText</span>
+          <dees-label .label=${"Region"} .infoText=${"Select your nearest datacenter."}></dees-label>
         </div>
       </div>
     </div>
     <div class="demo-section">
-      <h3>Required + Description</h3>
+      <h3>Required + Info Text</h3>
       <p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
       <div class="label-grid">
         <div class="label-row">
-          <span class="annotation">required + description</span>
-          <dees-label .label=${"Password"} .required=${true} .description=${"Must be at least 8 characters with one uppercase letter and one number."}></dees-label>
+          <span class="annotation">required + infoText</span>
+          <dees-label .label=${"Password"} .required=${true} .infoText=${"Must be at least 8 characters with one uppercase letter and one number."}></dees-label>
         </div>
         <div class="label-row">
-          <span class="annotation">required + description</span>
-          <dees-label .label=${"Email Address"} .required=${true} .description=${"We will send a verification link to this address."}></dees-label>
+          <span class="annotation">required + infoText</span>
+          <dees-label .label=${"Email Address"} .required=${true} .infoText=${"We will send a verification link to this address."}></dees-label>
         </div>
       </div>
     </div>
@@ -140253,12 +140267,12 @@ var demoFunc11 = /* @__PURE__ */ __name(() => b2`
 // ts_web/elements/00group-layout/dees-label/dees-label.ts
 init_dist_ts30();
 init_theme();
-var _required_dec2, _description_dec2, _label_dec2, _a16, _DeesLabel_decorators, _init14, _label2, _description2, _required2;
+var _required_dec2, _infoText_dec2, _label_dec2, _a16, _DeesLabel_decorators, _init14, _label2, _infoText2, _required2;
 _DeesLabel_decorators = [customElement("dees-label")];
 var _DeesLabel = class _DeesLabel extends (_a16 = DeesElement, _label_dec2 = [n5({
   type: String,
   reflect: true
-})], _description_dec2 = [n5({
+})], _infoText_dec2 = [n5({
   type: String,
   reflect: true
 })], _required_dec2 = [n5({
@@ -140268,7 +140282,7 @@ var _DeesLabel = class _DeesLabel extends (_a16 = DeesElement, _label_dec2 = [n5
   constructor() {
     super(...arguments);
     __privateAdd(this, _label2, __runInitializers(_init14, 8, this, "")), __runInitializers(_init14, 11, this);
-    __privateAdd(this, _description2, __runInitializers(_init14, 12, this)), __runInitializers(_init14, 15, this);
+    __privateAdd(this, _infoText2, __runInitializers(_init14, 12, this)), __runInitializers(_init14, 15, this);
     __privateAdd(this, _required2, __runInitializers(_init14, 16, this, false)), __runInitializers(_init14, 19, this);
   }
   render() {
@@ -140277,11 +140291,11 @@ var _DeesLabel = class _DeesLabel extends (_a16 = DeesElement, _label_dec2 = [n5
             <div class="label">
               ${this.label}
               ${this.required ? b2`<span class="required">*</span>` : ""}
-              ${this.description ? b2`
+              ${this.infoText ? b2`
                     <div class="description-icon">
                       <dees-icon .icon=${"lucide:info"}></dees-icon>
                     </div>
-                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
+                    <dees-speechbubble .text=${this.infoText}></dees-speechbubble>
                   ` : b2``}
             </div>
           ` : b2``}
@@ -140290,10 +140304,10 @@ var _DeesLabel = class _DeesLabel extends (_a16 = DeesElement, _label_dec2 = [n5
 };
 _init14 = __decoratorStart(_a16);
 _label2 = new WeakMap();
-_description2 = new WeakMap();
+_infoText2 = new WeakMap();
 _required2 = new WeakMap();
 __decorateElement(_init14, 4, "label", _label_dec2, _DeesLabel, _label2);
-__decorateElement(_init14, 4, "description", _description_dec2, _DeesLabel, _description2);
+__decorateElement(_init14, 4, "infoText", _infoText_dec2, _DeesLabel, _infoText2);
 __decorateElement(_init14, 4, "required", _required_dec2, _DeesLabel, _required2);
 _DeesLabel = __decorateElement(_init14, 0, "DeesLabel", _DeesLabel_decorators, _DeesLabel);
 __name(_DeesLabel, "DeesLabel");
@@ -140646,7 +140660,7 @@ var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_
         }
       </style>
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <dees-tile>
           <div slot="header" class="toolbar">
             <div class="toolbar-left">
@@ -140724,6 +140738,7 @@ var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_
             </div>
           </div>
         </dees-tile>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -141899,7 +141914,7 @@ init_dist_ts30();
 var renderDatepicker = /* @__PURE__ */ __name((component) => {
   return b2`
         <div class="input-wrapper">
-          <dees-label .label=${component.label} .description=${component.description} .required=${component.required}></dees-label>
+          <dees-label .label=${component.label} .infoText=${component.infoText} .required=${component.required}></dees-label>
           <div class="input-container">
             <input
               type="text"
@@ -141922,6 +141937,7 @@ var renderDatepicker = /* @__PURE__ */ __name((component) => {
               <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
             </div>
           </div>
+          ${component.renderDescription()}
         </div>
       `;
 }, "renderDatepicker");
@@ -143102,17 +143118,18 @@ 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"}
             .key=${"username"}
+            .description=${"Your username will be visible to other users"}
           ></dees-input-text>
           <dees-input-text
             .label=${"Email Address"}
             .value=${"john@example.com"}
-            .description=${"We will never share your email with anyone"}
+            .infoText=${"We will never share your email with anyone"}
             .key=${"email"}
           ></dees-input-text>
@@ -143122,7 +143139,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
             .value=${"secret123"}
             .key=${"password"}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
@@ -143145,28 +143162,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>
@@ -143182,7 +143201,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"}
@@ -143196,25 +143215,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}
@@ -143238,7 +143257,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>
@@ -143262,21 +143281,21 @@ 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}
             .value=${"mySecurePassword123"}
-            .description=${"Click the eye icon to show/hide password"}
+            .infoText=${"Click the eye icon to show/hide password"}
           ></dees-input-text>
           <dees-input-text
             .label=${"API Key"}
             .isPasswordBool=${true}
             .value=${"sk-1234567890abcdef"}
-            .description=${"Keep this key secure and never share it"}
+            .infoText=${"Keep this key secure and never share it"}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
@@ -143362,7 +143381,7 @@ var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_
             `}
       </style>
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <div class="maincontainer">
           <input
             type="${this.isPasswordBool && !this.showPasswordBool ? "password" : "text"}"
@@ -143384,6 +143403,7 @@ var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_
                   ${this.validationText}
                 </div>
               ` : b2`<div class="validationContainer"></div>`}
+          ${this.renderDescription()}
         </div>
       </div>
     `;
@@ -144417,19 +144437,20 @@ 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"}
-            .description=${"Select the desired quantity"}
+            .infoText=${"Select the desired quantity"}
+            .description=${"Minimum order quantity is 1 item"}
             .value=${1}
           ></dees-input-quantityselector>
           <dees-input-quantityselector
             .label=${"Items in Cart"}
-            .description=${"Adjust the quantity of items"}
+            .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) => {
@@ -144521,21 +144542,21 @@ 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"}
-            .description=${"Select how many licenses you need"}
+            .infoText=${"Select how many licenses you need"}
             .required=${true}
             .value=${1}
           ></dees-input-quantityselector>
           <dees-input-quantityselector
             .label=${"Fixed Quantity"}
-            .description=${"This quantity cannot be changed"}
+            .infoText=${"This quantity cannot be changed"}
             .disabled=${true}
             .value=${5}
           ></dees-input-quantityselector>
-        </div>
+        </dees-form>
       </dees-panel>
       <dees-panel .title=${"Order Form"} .subtitle=${"Complete order form with quantity selection"}>
@@ -144548,7 +144569,7 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
           ></dees-input-dropdown>
           <dees-input-quantityselector
             .label=${"Quantity"}
-            .description=${"Number of licenses"}
+            .infoText=${"Number of licenses"}
             .value=${1}
           ></dees-input-quantityselector>
           <dees-input-text
@@ -144577,7 +144598,7 @@ var _DeesInputQuantitySelector = class _DeesInputQuantitySelector extends (_a23
   render() {
     return b2`
       <div class="input-wrapper">
-        ${this.label ? b2`<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>` : ""}
+        ${this.label ? b2`<dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>` : ""}
         <div
           class="quantity-container ${this.disabled ? "disabled" : ""}"
           data-min="${this.value <= 0}"
@@ -144614,6 +144635,7 @@ var _DeesInputQuantitySelector = class _DeesInputQuantitySelector extends (_a23
             aria-label="Increase quantity"
           >+</div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -144795,25 +144817,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"]}
@@ -144828,7 +144852,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"}>
@@ -144853,41 +144877,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=${[
@@ -144912,7 +144940,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"}>
@@ -145016,7 +145044,7 @@ var _DeesInputRadiogroup = class _DeesInputRadiogroup extends (_a24 = DeesInputB
             `;
     })}
         </div>
-        ${this.description ? b2`<div class="description-text">${this.description}</div>` : ""}
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -145243,14 +145271,6 @@ __publicField(_DeesInputRadiogroup, "styles", [
         line-height: 20px;
       }
-      .description-text {
-        font-size: 13px;
-        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
-        margin-top: 10px;
-        line-height: 1.5;
-        letter-spacing: -0.003em;
-      }
       /* Validation styles */
       :host([validationState="invalid"]) .radio-circle {
         border-color: ${cssManager.bdTheme("hsl(0 72.2% 50.6%)", "hsl(0 62.8% 30.6%)")};
@@ -145521,9 +145541,10 @@ 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"}
             .options=${[
   { option: "United States", key: "us" },
   { option: "Canada", key: "ca" },
@@ -145546,7 +145567,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
   { option: "Guest", key: "guest" }
 ]}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
@@ -145582,40 +145603,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>
@@ -145628,7 +145651,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}
@@ -145647,7 +145670,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
 ]}
             .selectedOption=${{ option: "Cannot Select", key: "disabled" }}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
@@ -146135,7 +146158,7 @@ var _DeesInputDropdown = class _DeesInputDropdown extends (_a27 = DeesInputBase,
   render() {
     return b2`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <div class="maincontainer">
           <div
             class="selectedBox ${this.isOpened ? "open" : ""} ${this.disabled ? "disabled" : ""}"
@@ -146146,6 +146169,7 @@ var _DeesInputDropdown = class _DeesInputDropdown extends (_a27 = DeesInputBase,
             ${this.selectedOption?.option || "Select an option"}
           </div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -146419,40 +146443,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"}
-              .description=${"Upload supporting documents for your request"}
-              .accept=${"image/*,.pdf,.zip"}
-              .maxSize=${10 * 1024 * 1024}
-            ></dees-input-fileupload>
-            <dees-input-fileupload
-              .label=${"Brand assets"}
-              .description=${"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"}
-              .description=${"Share podcast drafts (MP3/WAV, max 25MB each)"}
-              .accept=${"audio/*"}
-              .maxSize=${25 * 1024 * 1024}
-            ></dees-input-fileupload>
-            <dees-input-fileupload
-              .label=${"Disabled example"}
-              .description=${"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
@@ -146461,10 +146488,9 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
       >
         <div class="demo-grid">
           <dees-form>
-            <div class="demo-stack">
               <dees-input-text
                 .label=${"Project name"}
-                .description=${"How should we refer to this project internally?"}
+                .infoText=${"How should we refer to this project internally?"}
                 .required=${true}
                 .key=${"projectName"}
               ></dees-input-text>
@@ -146478,7 +146504,7 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
               <dees-input-fileupload
                 .label=${"Statement of work"}
-                .description=${"Upload a signed statement of work (PDF, max 15MB)"}
+                .infoText=${"Upload a signed statement of work (PDF, max 15MB)"}
                 .required=${true}
                 .accept=${"application/pdf"}
                 .maxSize=${15 * 1024 * 1024}
@@ -146488,7 +146514,7 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
               <dees-input-fileupload
                 .label=${"Creative references"}
-                .description=${"Optional. Upload up to five visual references"}
+                .infoText=${"Optional. Upload up to five visual references"}
                 .accept=${"image/*"}
                 .maxFiles=${5}
                 .maxSize=${8 * 1024 * 1024}
@@ -146497,13 +146523,12 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
               <dees-input-text
                 .label=${"Notes"}
-                .description=${"Add optional context for reviewers"}
+                .infoText=${"Add optional context for reviewers"}
                 .inputType=${"textarea"}
                 .key=${"notes"}
               ></dees-input-text>
               <dees-form-submit .text=${"Submit briefing"}></dees-form-submit>
-            </div>
           </dees-form>
           <div class="demo-note">
@@ -146916,7 +146941,7 @@ var _DeesInputFileupload = class _DeesInputFileupload extends (_a28 = DeesInputB
       <div class="input-wrapper">
         <dees-label
           .label=${this.label}
-          .description=${this.description}
+          .infoText=${this.infoText}
           .required=${this.required}
         ></dees-label>
         <dees-tile
@@ -146956,6 +146981,7 @@ var _DeesInputFileupload = class _DeesInputFileupload extends (_a28 = DeesInputB
           </div>
         </dees-tile>
         ${this.validationMessage ? b2`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>` : b2``}
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -148761,58 +148787,61 @@ 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"}
-            .description=${"Enter your International Bank Account Number"}
+            .infoText=${"Enter your International Bank Account Number"}
+            .description=${"Your IBAN can be found on your bank statement"}
           ></dees-input-iban>
           <dees-input-iban
             .label=${"Verified IBAN"}
-            .description=${"This IBAN has been verified"}
+            .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"}
-            .description=${"Required for processing payments"}
+            .infoText=${"Required for processing payments"}
             .required=${true}
           ></dees-input-iban>
           <dees-input-iban
             .label=${"Locked IBAN"}
-            .description=${"This IBAN cannot be changed"}
+            .infoText=${"This IBAN cannot be changed"}
             .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"}>
         <dees-form>
           <dees-input-text .label=${"Recipient Name"} .required=${true}></dees-input-text>
           <dees-input-iban .label=${"Recipient IBAN"} .required=${true}></dees-input-iban>
-          <dees-input-text .label=${"Transfer Reference"} .description=${"Optional reference for the transfer"}></dees-input-text>
+          <dees-input-text .label=${"Transfer Reference"} .infoText=${"Optional reference for the transfer"}></dees-input-text>
           <dees-input-text .label=${"Amount"} .inputType=${"number"} .required=${true}></dees-input-text>
         </dees-form>
       </dees-panel>
@@ -148838,7 +148867,7 @@ var _DeesInputIban = class _DeesInputIban extends (_a29 = DeesInputBase, _entere
   render() {
     return b2`
       <div class="input-wrapper">
-        <dees-label .label=${this.label || "IBAN"} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label || "IBAN"} .infoText=${this.infoText}></dees-label>
         <dees-input-text
           .value=${this.value}
           .disabled=${this.disabled}
@@ -148856,6 +148885,7 @@ var _DeesInputIban = class _DeesInputIban extends (_a29 = DeesInputBase, _entere
       this.validateIban(eventArg);
     }}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -148968,80 +148998,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"}
-          .description=${"Choose how content is displayed"}
-          .options=${["List View", "Grid View", "Compact"]}
-          .selectedOption=${"Grid View"}
-        ></dees-input-multitoggle>
-        <br><br>
-        <dees-input-multitoggle
-          .label=${"T-Shirt Size"}
-          .description=${"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"}
-          .description=${"Enable or disable push notifications"}
-          .type=${"boolean"}
-          .selectedOption=${"true"}
-        ></dees-input-multitoggle>
-        <br><br>
-        <dees-input-multitoggle
-          .label=${"Theme Mode"}
-          .description=${"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">
@@ -149050,7 +149083,7 @@ var demoFunc21 = /* @__PURE__ */ __name(() => b2`
         <dees-input-multitoggle
           .label=${"Account Type"}
-          .description=${"This setting is locked"}
+          .infoText=${"This setting is locked"}
           .options=${["Free", "Pro", "Enterprise"]}
           .selectedOption=${"Enterprise"}
           .disabled=${true}
@@ -149119,7 +149152,7 @@ var _DeesInputMultitoggle = class _DeesInputMultitoggle extends (_a30 = DeesInpu
   render() {
     return b2`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <div class="mainbox">
           <div class="selections">
           <div class="indicator"></div>
@@ -149130,6 +149163,7 @@ var _DeesInputMultitoggle = class _DeesInputMultitoggle extends (_a30 = DeesInpu
     )}
           </div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -149336,43 +149370,46 @@ 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"}
-            .description=${"Enter your phone number with country code"}
+            .infoText=${"Enter your phone number with country code"}
+            .description=${"Include country code for international numbers"}
             .value=${"5551234567"}
           ></dees-input-phone>
           <dees-input-phone
             .label=${"Contact Phone"}
-            .description=${"Required for account verification"}
+            .infoText=${"Required for account verification"}
             .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"}
-            .description=${"Automatically formats international numbers"}
+            .infoText=${"Automatically formats international numbers"}
             .value=${"441234567890"}
           ></dees-input-phone>
@@ -149381,7 +149418,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"}>
@@ -149411,7 +149448,7 @@ var _DeesInputPhone = class _DeesInputPhone extends (_a31 = DeesInputBase, _form
   render() {
     return b2`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <dees-input-text
           .value=${this.formattedPhone}
           .disabled=${this.disabled}
@@ -149419,6 +149456,7 @@ var _DeesInputPhone = class _DeesInputPhone extends (_a31 = DeesInputBase, _form
           .placeholder=${this.placeholder}
           @input=${(event) => this.handlePhoneInput(event)}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -149612,7 +149650,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}
@@ -149631,12 +149669,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}
@@ -149665,42 +149703,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}
@@ -149728,7 +149768,7 @@ var demoFunc23 = /* @__PURE__ */ __name(() => b2`
               .description=${"Vibrate for notifications"}
               .key=${"vibration"}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
@@ -149739,7 +149779,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}
@@ -149769,12 +149809,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}
@@ -149796,7 +149836,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>
@@ -149856,7 +149896,7 @@ var _DeesInputToggle = class _DeesInputToggle extends (_a32 = DeesInputBase, _va
           </div>
           <div class="label-container">
             ${this.label ? b2`<div class="toggle-label">${this.label}</div>` : ""}
-            ${this.description ? b2`<div class="description-text">${this.description}</div>` : ""}
+            ${this.renderDescription()}
           </div>
         </div>
       </div>
@@ -150121,12 +150161,6 @@ __publicField(_DeesInputToggle, "styles", [
         color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
       }
-      /* Description */
-      .description-text {
-        font-size: 12px;
-        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        line-height: 1.5;
-      }
     `
 ]);
 __runInitializers(_init30, 1, _DeesInputToggle);
@@ -150179,61 +150213,62 @@ 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"}
-            .description=${"Add tags by typing and pressing Enter"}
+            .infoText=${"Add tags by typing and pressing Enter"}
+            .description=${"Tags help categorize and filter your content"}
             .value=${["javascript", "typescript", "web-components"]}
           ></dees-input-typelist>
           <dees-input-typelist
             .label=${"Team Members"}
-            .description=${"Add email addresses of team members"}
+            .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"}
-            .description=${"List your professional skills"}
+            .infoText=${"List your professional skills"}
             .value=${["HTML", "CSS", "JavaScript", "Node.js", "React"]}
           ></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"}
-            .description=${"List all required npm packages"}
+            .infoText=${"List all required npm packages"}
             .required=${true}
             .value=${["@design.estate/dees-element", "@design.estate/dees-domtools"]}
           ></dees-input-typelist>
           <dees-input-typelist
             .label=${"System Tags"}
-            .description=${"These tags are managed by the system"}
+            .infoText=${"These tags are managed by the system"}
             .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"}>
@@ -150242,16 +150277,16 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
           <dees-input-text
             .label=${"Summary"}
             .inputType=${"textarea"}
-            .description=${"Brief description of the article"}
+            .infoText=${"Brief description of the article"}
           ></dees-input-text>
           <dees-input-typelist
             .label=${"Tags"}
-            .description=${"Add relevant tags for better discoverability"}
+            .infoText=${"Add relevant tags for better discoverability"}
             .value=${["tutorial", "web-development"]}
           ></dees-input-typelist>
           <dees-input-typelist
             .label=${"Co-Authors"}
-            .description=${"Add email addresses of co-authors"}
+            .infoText=${"Add email addresses of co-authors"}
           ></dees-input-typelist>
         </dees-form>
@@ -150278,7 +150313,7 @@ var _DeesInputTypelist = class _DeesInputTypelist extends (_a33 = DeesInputBase,
   render() {
     return b2`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <div class="mainbox">
           <div class="tags" @click=${() => {
       this.shadowRoot.querySelector("input").focus();
@@ -150311,6 +150346,7 @@ var _DeesInputTypelist = class _DeesInputTypelist extends (_a33 = DeesInputBase,
             .disabled=${this.disabled}
           />
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -150468,7 +150504,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">
@@ -150740,9 +150776,7 @@ var _DeesInputTags = class _DeesInputTags extends (_a35 = DeesInputBase, _value_
           <div class="validation-message">${this.validationText}</div>
         ` : ""}
-        ${this.description ? b2`
-          <div class="description">${this.description}</div>
-        ` : ""}
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -151031,14 +151065,6 @@ __publicField(_DeesInputTags, "styles", [
         line-height: 1.5;
       }
-      /* Description styles */
-      .description {
-        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
-      }
       /* Scrollbar styling */
       .suggestions-dropdown::-webkit-scrollbar {
         width: 8px;
@@ -151167,25 +151193,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"}>
@@ -151557,9 +151585,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
           <div class="validation-message">${this.validationText}</div>
         ` : ""}
-        ${this.description ? b2`
-          <div class="description">${this.description}</div>
-        ` : ""}
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -152302,13 +152328,6 @@ __publicField(_DeesInputList, "styles", [
         line-height: 1.4;
       }
-      .description {
-        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
-        font-size: 12px;
-        margin-top: 4px;
-        line-height: 1.4;
-      }
       /* Scrollbar styling */
       .list-items::-webkit-scrollbar {
         width: 8px;
@@ -162017,17 +162036,18 @@ var _DeesInputWysiwyg = class _DeesInputWysiwyg extends (_a40 = DeesInputBase, _
     return u3`
       <dees-label
         .label="${this.label}"
-        .description="${this.description}"
+        .infoText="${this.infoText}"
         .required="${this.required}"
       ></dees-label>
       <div class="wysiwyg-container">
-        <div
+        <div
           class="editor-content ${this.draggedBlockId ? "dragging" : ""}"
           id="editor-content"
         >
           <!-- Blocks will be rendered programmatically -->
         </div>
       </div>
+      ${this.renderDescription()}
     `;
   }
   // Old renderBlock method removed - using programmatic rendering instead
@@ -162979,13 +162999,6 @@ var richtextStyles = [
         border-color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
-      .description {
-        margin-top: 8px;
-        font-size: 12px;
-        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
-        line-height: 1.4;
-      }
       :host([disabled]) dees-tile {
         opacity: 0.6;
         cursor: not-allowed;
@@ -163023,7 +163036,7 @@ var renderRichtext = /* @__PURE__ */ __name((component) => {
                   </div>
                 ` : ""}
           </dees-tile>
-          ${component.description ? b2`<div class="description">${component.description}</div>` : ""}
+          ${component.renderDescription()}
         </div>
       `;
 }, "renderRichtext");
@@ -165474,26 +165487,26 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         <div class="searchGrid hidden">
           <dees-input-text
             .label=${"lucene syntax search"}
-            .description=${`
+            .infoText=${`
               You can use the lucene syntax to search for data, e.g.:
               \`\`\`
               name: "john" AND age: 18
               \`\`\`
             `}
           ></dees-input-text>
           <dees-input-multitoggle
             .label=${"search mode"}
             .options=${["table", "data", "server"]}
             .selectedOption=${"table"}
-            .description=${`
+            .infoText=${`
               There are three basic modes:
               * table: only searches data already in the table
               * data: searches original data, ignoring table transforms
               * server: searches data on the server
             `}
           ></dees-input-multitoggle>
         </div>
@@ -167162,7 +167175,7 @@ ${JSON.stringify(data, null, 2)}`;
             .required=${true}
             key="firstName"
             label="First Name"
-            .description=${"Your given name"}
+            .infoText=${"Your given name"}
           ></dees-input-text>
           <dees-input-text
@@ -167175,7 +167188,7 @@ ${JSON.stringify(data, null, 2)}`;
             .required=${true}
             key="email"
             label="Email Address"
-            .description=${"We will use this to contact you"}
+            .infoText=${"We will use this to contact you"}
           ></dees-input-text>
           <dees-input-dropdown
@@ -167196,7 +167209,7 @@ ${JSON.stringify(data, null, 2)}`;
             key="password"
             label="Password"
             isPasswordBool
-            .description=${"Minimum 8 characters"}
+            .infoText=${"Minimum 8 characters"}
           ></dees-input-text>
           <dees-input-checkbox
@@ -167349,7 +167362,7 @@ ${JSON.stringify(data, null, 2)}`;
           <dees-input-fileupload
             key="documents"
             .label=${"Upload Documents"}
-            .description=${"PDF, DOC, or DOCX files up to 10MB"}
+            .infoText=${"PDF, DOC, or DOCX files up to 10MB"}
           ></dees-input-fileupload>
           <dees-form-submit>Submit Application</dees-form-submit>
@@ -184736,7 +184749,7 @@ var _DeesInputProfilePicture = class _DeesInputProfilePicture extends (_a76 = De
   render() {
     return b2`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <div
           class="profile-container"
@@ -184798,6 +184811,7 @@ var _DeesInputProfilePicture = class _DeesInputProfilePicture extends (_a76 = De
           accept="${this.acceptedFormats.join(",")}"
           @change=${this.handleFileSelect}
         />
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -201434,7 +201448,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.75.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."
 };
 export {
@@ -203399,4 +203413,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1776015948766.js.map
+//# sourceMappingURL=bundle-1776020698391.js.map