@aurodesignsystem/auro-formkit 2.0.0-beta.29 → 2.0.0-beta.30

package/components/counter/demo/index.min.js

@@ -1583,7 +1583,7 @@ class AuroCounter extends r {
   }
 }
 
-var styleCss$1 = i$5`:host{position:relative;display:block}[slot=trigger]{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}[auro-dropdown]{display:block}`;
+var styleCss$1 = i$5`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:auto;text-overflow:ellipsis}[auro-dropdown]{display:block}`;
 
 var dropdownVersion = '3.0.0';
 
@@ -1648,6 +1648,9 @@ if (!customElements.get("auro-counter-wrapper")) {
  * @element auro-counter-group
  * @extends LitElement
  * @slot Default - Slot for counter elements.
+ * @slot Label - Dropdown label content. Only used when `isDropdown` is true.
+ * @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
+ * @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
  */
 class AuroCounterGroup extends r {
   constructor() {
@@ -1866,7 +1869,11 @@ class AuroCounterGroup extends r {
     return u`
     ${this.isDropdown
       ? u`<${this.dropdownTag} common chevron>
-        <div slot="trigger">${this.total}<slot name="placeholder"></slot></div>
+        <div slot="trigger"><slot name="valueText">
+          ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.shadowRoot.querySelector('.label slot').assignedNodes()[0].textContent}${index !== this.counters.length - 1 ? ', ' : ''}`)}
+        </slot></div>
+        <div slot="label"><slot name="label"></slot></div>
+        <div slot="helpText"><slot name="helpText"></slot></div>
         <auro-counter-wrapper isInDropdown>
         </auro-counter-wrapper>
       </${this.dropdownTag}>

package/components/counter/dist/auro-counter-group.d.ts

@@ -7,6 +7,9 @@
  * @element auro-counter-group
  * @extends LitElement
  * @slot Default - Slot for counter elements.
+ * @slot Label - Dropdown label content. Only used when `isDropdown` is true.
+ * @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
+ * @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
  */
 export class AuroCounterGroup extends LitElement {
     static get styles(): import("lit").CSSResult[];

package/components/counter/dist/auro-counter-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-counter-group.d.ts","sourceRoot":"","sources":["../src/auro-counter-group.js"],"names":[],"mappings":"AAqBA;;;;;;;;;GASG;AACH;IAoCE,+CAEC;IAED;QAGI;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;MAKN;IAkHD;;;;;OAKG;IACH,uBAJW,MAAM,QAMhB;IA9MC,oBAAuB;IAEvB,SAAoB;IACpB,SAAoB;IACpB,cAAsB;IACtB,cAAyB;IACzB,UAAsB;IAEtB;;OAEG;IACH,iBAAyB;IAEzB;;OAEG;IACH,mBAA0C;IAQ1C;;;;OAIG;IACH,oBAAyF;IAyD3F;;;;;;;OAOG;IACH,uBASC;IAED;;;;;OAKG;IACH,0BAKC;IAED;;;;;OAKG;IACH,kCAYC;IAED;;;;;OAKG;IACH,6BAGC;IAED;;;;;OAKG;IACH,oBAeC;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED,sCAgBC;IAaD,4CAWC;CACF;2BAxP0B,KAAK"}
+{"version":3,"file":"auro-counter-group.d.ts","sourceRoot":"","sources":["../src/auro-counter-group.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;GAYG;AACH;IAoCE,+CAEC;IAED;QAGI;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;MAKN;IAkHD;;;;;OAKG;IACH,uBAJW,MAAM,QAMhB;IA9MC,oBAAuB;IAEvB,SAAoB;IACpB,SAAoB;IACpB,cAAsB;IACtB,cAAyB;IACzB,UAAsB;IAEtB;;OAEG;IACH,iBAAyB;IAEzB;;OAEG;IACH,mBAA0C;IAQ1C;;;;OAIG;IACH,oBAAyF;IAyD3F;;;;;;;OAOG;IACH,uBASC;IAED;;;;;OAKG;IACH,0BAKC;IAED;;;;;OAKG;IACH,kCAYC;IAED;;;;;OAKG;IACH,6BAGC;IAED;;;;;OAKG;IACH,oBAeC;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED,sCAgBC;IAaD,4CAeC;CACF;2BA/P0B,KAAK"}

package/components/counter/dist/index.js

@@ -1583,7 +1583,7 @@ class AuroCounter extends r {
   }
 }
 
-var styleCss$1 = i$5`:host{position:relative;display:block}[slot=trigger]{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}[auro-dropdown]{display:block}`;
+var styleCss$1 = i$5`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:auto;text-overflow:ellipsis}[auro-dropdown]{display:block}`;
 
 var dropdownVersion = '3.0.0';
 
@@ -1648,6 +1648,9 @@ if (!customElements.get("auro-counter-wrapper")) {
  * @element auro-counter-group
  * @extends LitElement
  * @slot Default - Slot for counter elements.
+ * @slot Label - Dropdown label content. Only used when `isDropdown` is true.
+ * @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
+ * @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
  */
 class AuroCounterGroup extends r {
   constructor() {
@@ -1866,7 +1869,11 @@ class AuroCounterGroup extends r {
     return u`
     ${this.isDropdown
       ? u`<${this.dropdownTag} common chevron>
-        <div slot="trigger">${this.total}<slot name="placeholder"></slot></div>
+        <div slot="trigger"><slot name="valueText">
+          ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.shadowRoot.querySelector('.label slot').assignedNodes()[0].textContent}${index !== this.counters.length - 1 ? ', ' : ''}`)}
+        </slot></div>
+        <div slot="label"><slot name="label"></slot></div>
+        <div slot="helpText"><slot name="helpText"></slot></div>
         <auro-counter-wrapper isInDropdown>
         </auro-counter-wrapper>
       </${this.dropdownTag}>

package/components/counter/src/auro-counter-group.js

@@ -28,6 +28,9 @@ import './auro-counter-wrapper.js';
  * @element auro-counter-group
  * @extends LitElement
  * @slot Default - Slot for counter elements.
+ * @slot Label - Dropdown label content. Only used when `isDropdown` is true.
+ * @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
+ * @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
  */
 export class AuroCounterGroup extends LitElement {
   constructor() {
@@ -246,7 +249,11 @@ export class AuroCounterGroup extends LitElement {
     return html`
     ${this.isDropdown
       ? html`<${this.dropdownTag} common chevron>
-        <div slot="trigger">${this.total}<slot name="placeholder"></slot></div>
+        <div slot="trigger"><slot name="valueText">
+          ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.shadowRoot.querySelector('.label slot').assignedNodes()[0].textContent}${index !== this.counters.length - 1 ? ', ' : ''}`)}
+        </slot></div>
+        <div slot="label"><slot name="label"></slot></div>
+        <div slot="helpText"><slot name="helpText"></slot></div>
         <auro-counter-wrapper isInDropdown>
         </auro-counter-wrapper>
       </${this.dropdownTag}>

package/components/counter/src/styles/counter-group-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative;display:block}[slot=trigger]{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}[auro-dropdown]{display:block}`;
+export default css`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:auto;text-overflow:ellipsis}[auro-dropdown]{display:block}`;

package/components/counter/src/styles/counter-group.css

@@ -4,11 +4,10 @@
   display: block;
 }
 
-[slot=trigger] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ds-size-100, 0.5rem);
+[slot=trigger], ::slotted([slot=valueText]) {
+  display: block;
+  overflow: auto;
+  text-overflow: ellipsis;
 }
 
 [auro-dropdown] {

package/components/counter/src/styles/counter-group.scss

@@ -17,12 +17,10 @@
   display: block;
 }
 
-[slot="trigger"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ds-size-100, $ds-size-100);
-    
+[slot="trigger"], ::slotted([slot="valueText"]) {
+  display: block;
+  overflow: auto;
+  text-overflow: ellipsis;
 }
 
 [auro-dropdown] {

package/components/datepicker/.turbo/turbo-build.log

@@ -373,10 +373,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 7.6s
+created dist in 7.7s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.7s
+created ./demo/ in 3.9s
 
 ./demo/api.js → ./demo/...
 created ./demo/ in 3.4s

package/components/datepicker/README.md

@@ -93,10 +93,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.28/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.28/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.28/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.28/dist/auro-datepicker__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.29/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.29/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.29/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.29/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

package/components/datepicker/demo/api.min.js

@@ -13348,26 +13348,38 @@ let AuroHelpText$1 = class AuroHelpText extends r$9 {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -18107,26 +18119,38 @@ class AuroHelpText extends r {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component

package/components/datepicker/demo/index.min.js

@@ -13088,26 +13088,38 @@ let AuroHelpText$1 = class AuroHelpText extends r$9 {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -17847,26 +17859,38 @@ class AuroHelpText extends r {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component

package/components/datepicker/dist/index.js

@@ -13088,26 +13088,38 @@ let AuroHelpText$1 = class AuroHelpText extends r$9 {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -17847,26 +17859,38 @@ class AuroHelpText extends r {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component

package/components/dropdown/.turbo/turbo-build.log

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.5s
+created dist in 1.6s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 978ms
+created ./demo/ in 944ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 803ms
+created ./demo/ in 1.1s
 
 > @aurodesignsystem/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.28/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.29/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/dropdown/demo/api.min.js

@@ -2610,26 +2610,38 @@ class AuroHelpText extends r {
       this.slotNodes = event.target.assignedNodes();
     }
 
-    if (this.slotNodes) {
-      this.hasTextContent = this.slotNodes.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-
-        if (!slot.querySelector) {
-          return false;
-        }
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
 
-        const nestedSlot = slot.tagName === 'SLOT' ? slot : slot.querySelector('slot');
-        if (!nestedSlot) {
-          return false;
-        }
-        const nestedSlotNodes = nestedSlot.assignedNodes();
-        return nestedSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTextContent = false;
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
     }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
   }
 
   // function that renders the HTML and CSS into  the scope of the component