@design.estate/dees-catalog 3.74.2 → 3.76.0

package/dist_watch/bundle.js

@@ -143838,8 +143838,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);
@@ -143848,7 +143848,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
      */
@@ -143899,6 +143900,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%)")};
+        }
       `
     ];
   }
@@ -143949,6 +143958,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();
@@ -143957,6 +143973,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);
@@ -143964,6 +143981,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");
@@ -144307,7 +144325,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>
@@ -144463,12 +144481,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);
@@ -144989,13 +145001,14 @@ var demoFunc10 = /* @__PURE__ */ __name(() => {
 // ts_web/elements/00group-layout/dees-tile/dees-tile.ts
 init_dist_ts30();
 init_theme();
-var _hasFooter_dec, _heading_dec, _a14, _DeesTile_decorators, _init12, _heading, _hasFooter;
+var _hasFooter_dec, _overscroll_dec, _heading_dec, _a14, _DeesTile_decorators, _init12, _heading, _overscroll, _hasFooter;
 _DeesTile_decorators = [customElement("dees-tile")];
-var _DeesTile = class _DeesTile extends (_a14 = DeesElement, _heading_dec = [n5({ type: String })], _hasFooter_dec = [r5()], _a14) {
+var _DeesTile = class _DeesTile extends (_a14 = DeesElement, _heading_dec = [n5({ type: String })], _overscroll_dec = [n5({ type: String, reflect: true })], _hasFooter_dec = [r5()], _a14) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _heading, __runInitializers(_init12, 8, this, "")), __runInitializers(_init12, 11, this);
-    __privateAdd(this, _hasFooter, __runInitializers(_init12, 12, this, false)), __runInitializers(_init12, 15, this);
+    __privateAdd(this, _overscroll, __runInitializers(_init12, 12, this, "auto")), __runInitializers(_init12, 15, this);
+    __privateAdd(this, _hasFooter, __runInitializers(_init12, 16, this, false)), __runInitializers(_init12, 19, this);
   }
   render() {
     return b2`
@@ -145021,8 +145034,10 @@ var _DeesTile = class _DeesTile extends (_a14 = DeesElement, _heading_dec = [n5(
 };
 _init12 = __decoratorStart(_a14);
 _heading = new WeakMap();
+_overscroll = new WeakMap();
 _hasFooter = new WeakMap();
 __decorateElement(_init12, 4, "heading", _heading_dec, _DeesTile, _heading);
+__decorateElement(_init12, 4, "overscroll", _overscroll_dec, _DeesTile, _overscroll);
 __decorateElement(_init12, 4, "hasFooter", _hasFooter_dec, _DeesTile, _hasFooter);
 _DeesTile = __decorateElement(_init12, 0, "DeesTile", _DeesTile_decorators, _DeesTile);
 __name(_DeesTile, "DeesTile");
@@ -145080,7 +145095,14 @@ __publicField(_DeesTile, "styles", [
         border-radius: 8px;
         border-top: 1px solid var(--dees-color-border-subtle);
         border-bottom: 1px solid var(--dees-color-border-subtle);
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      :host([overscroll="contain"]) .tile-content {
+        overscroll-behavior: contain;
       }
 
       .tile-content.no-footer {
@@ -145167,7 +145189,7 @@ var _DeesModal = class _DeesModal extends (_a15 = DeesElement, _heading_dec2 = [
         ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ""}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}" .overscroll=${"contain"}>
           <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">
@@ -145289,14 +145311,6 @@ __publicField(_DeesModal, "styles", [
         overscroll-behavior: contain;
       }
 
-      dees-tile::part(content) {
-        overflow-x: hidden;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
-      }
-
       dees-tile::part(outer) {
         box-shadow:
           0 0 0 1px ${cssManager.bdTheme("hsl(0 0% 0% / 0.03)", "hsl(0 0% 100% / 0.03)")},
@@ -145562,31 +145576,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>
@@ -145607,12 +145621,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({
@@ -145622,7 +145636,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() {
@@ -145631,11 +145645,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``}
@@ -145644,10 +145658,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");
@@ -146000,7 +146014,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">
@@ -146078,6 +146092,7 @@ var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_
             </div>
           </div>
         </dees-tile>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -147253,7 +147268,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"
@@ -147276,6 +147291,7 @@ var renderDatepicker = /* @__PURE__ */ __name((component) => {
               <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
             </div>
           </div>
+          ${component.renderDescription()}
         </div>
       `;
 }, "renderDatepicker");
@@ -148461,12 +148477,13 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
             .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>
 
@@ -148621,14 +148638,14 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
             .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-panel>
@@ -148716,7 +148733,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"}"
@@ -148738,6 +148755,7 @@ var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_
                   ${this.validationText}
                 </div>
               ` : b2`<div class="validationContainer"></div>`}
+          ${this.renderDescription()}
         </div>
       </div>
     `;
@@ -149774,13 +149792,14 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -149878,14 +149897,14 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -149902,7 +149921,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
@@ -149931,7 +149950,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}"
@@ -149968,6 +149987,7 @@ var _DeesInputQuantitySelector = class _DeesInputQuantitySelector extends (_a23
             aria-label="Increase quantity"
           >+</div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -150370,7 +150390,7 @@ var _DeesInputRadiogroup = class _DeesInputRadiogroup extends (_a24 = DeesInputB
             `;
     })}
         </div>
-        ${this.description ? b2`<div class="description-text">${this.description}</div>` : ""}
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -150597,14 +150617,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%)")};
@@ -150878,6 +150890,7 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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" },
@@ -151489,7 +151502,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" : ""}"
@@ -151500,6 +151513,7 @@ var _DeesInputDropdown = class _DeesInputDropdown extends (_a27 = DeesInputBase,
             ${this.selectedOption?.option || "Select an option"}
           </div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -151777,14 +151791,15 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
           <div class="demo-stack">
             <dees-input-fileupload
               .label=${"Attachments"}
-              .description=${"Upload supporting documents for your request"}
+              .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"}
-              .description=${"Upload high-resolution imagery (JPG/PNG)"}
+              .infoText=${"Upload high-resolution imagery (JPG/PNG)"}
               .accept=${"image/jpeg,image/png"}
               .multiple=${false}
               .maxSize=${5 * 1024 * 1024}
@@ -151795,14 +151810,14 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
           <div class="demo-stack">
             <dees-input-fileupload
               .label=${"Audio uploads"}
-              .description=${"Share podcast drafts (MP3/WAV, max 25MB each)"}
+              .infoText=${"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"}
+              .infoText=${"Uploader is disabled while moderation is pending"}
               .disabled=${true}
             ></dees-input-fileupload>
           </div>
@@ -151818,7 +151833,7 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
             <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>
@@ -151832,7 +151847,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}
@@ -151842,7 +151857,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}
@@ -151851,7 +151866,7 @@ 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>
@@ -152270,7 +152285,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
@@ -152310,6 +152325,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>
     `;
   }
@@ -154118,12 +154134,13 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -154149,13 +154166,13 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -154166,7 +154183,7 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
         <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>
@@ -154192,7 +154209,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}
@@ -154210,6 +154227,7 @@ var _DeesInputIban = class _DeesInputIban extends (_a29 = DeesInputBase, _entere
       this.validateIban(eventArg);
     }}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -154325,7 +154343,8 @@ var demoFunc21 = /* @__PURE__ */ __name(() => b2`
         
         <dees-input-multitoggle
           .label=${"Display Mode"}
-          .description=${"Choose how content is displayed"}
+          .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>
@@ -154334,7 +154353,7 @@ var demoFunc21 = /* @__PURE__ */ __name(() => b2`
         
         <dees-input-multitoggle
           .label=${"T-Shirt Size"}
-          .description=${"Select your preferred size"}
+          .infoText=${"Select your preferred size"}
           .options=${["XS", "S", "M", "L", "XL", "XXL"]}
           .selectedOption=${"M"}
         ></dees-input-multitoggle>
@@ -154346,7 +154365,7 @@ var demoFunc21 = /* @__PURE__ */ __name(() => b2`
         
         <dees-input-multitoggle
           .label=${"Notifications"}
-          .description=${"Enable or disable push notifications"}
+          .infoText=${"Enable or disable push notifications"}
           .type=${"boolean"}
           .selectedOption=${"true"}
         ></dees-input-multitoggle>
@@ -154355,7 +154374,7 @@ var demoFunc21 = /* @__PURE__ */ __name(() => b2`
         
         <dees-input-multitoggle
           .label=${"Theme Mode"}
-          .description=${"Switch between light and dark theme"}
+          .infoText=${"Switch between light and dark theme"}
           .type=${"boolean"}
           .booleanTrueName=${"Dark"}
           .booleanFalseName=${"Light"}
@@ -154404,7 +154423,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}
@@ -154473,7 +154492,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>
@@ -154484,6 +154503,7 @@ var _DeesInputMultitoggle = class _DeesInputMultitoggle extends (_a30 = DeesInpu
     )}
           </div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -154693,13 +154713,14 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -154726,7 +154747,7 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <dees-input-phone
             .label=${"International Contact"}
-            .description=${"Automatically formats international numbers"}
+            .infoText=${"Automatically formats international numbers"}
             .value=${"441234567890"}
           ></dees-input-phone>
 
@@ -154765,7 +154786,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}
@@ -154773,6 +154794,7 @@ var _DeesInputPhone = class _DeesInputPhone extends (_a31 = DeesInputBase, _form
           .placeholder=${this.placeholder}
           @input=${(event) => this.handlePhoneInput(event)}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -155210,7 +155232,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>
@@ -155475,12 +155497,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);
@@ -155536,13 +155552,14 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -155552,7 +155569,7 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
 
@@ -155576,14 +155593,14 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
         <div class="input-group">
           <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>
@@ -155596,16 +155613,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>
         
@@ -155632,7 +155649,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();
@@ -155665,6 +155682,7 @@ var _DeesInputTypelist = class _DeesInputTypelist extends (_a33 = DeesInputBase,
             .disabled=${this.disabled}
           />
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }
@@ -156094,9 +156112,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>
     `;
   }
@@ -156385,14 +156401,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;
@@ -156911,9 +156919,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>
     `;
   }
@@ -157656,13 +157662,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;
@@ -167371,17 +167370,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
@@ -168333,13 +168333,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;
@@ -168377,7 +168370,7 @@ var renderRichtext = /* @__PURE__ */ __name((component) => {
                   </div>
                 ` : ""}
           </dees-tile>
-          ${component.description ? b2`<div class="description">${component.description}</div>` : ""}
+          ${component.renderDescription()}
         </div>
       `;
 }, "renderRichtext");
@@ -170828,26 +170821,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>
@@ -172516,7 +172509,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 
@@ -172529,7 +172522,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
@@ -172550,7 +172543,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
@@ -172703,7 +172696,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>
@@ -190090,7 +190083,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"
@@ -190152,6 +190145,7 @@ var _DeesInputProfilePicture = class _DeesInputProfilePicture extends (_a76 = De
           accept="${this.acceptedFormats.join(",")}"
           @change=${this.handleFileSelect}
         />
+        ${this.renderDescription()}
       </div>
     `;
   }