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

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

@@ -3207,26 +3207,38 @@ let AuroHelpText$1 = class AuroHelpText extends r$a {
       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
@@ -7966,26 +7978,38 @@ 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

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

@@ -3065,26 +3065,38 @@ let AuroHelpText$1 = class AuroHelpText extends r$a {
       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
@@ -7824,26 +7836,38 @@ 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

package/components/combobox/dist/index.js

@@ -3042,26 +3042,38 @@ let AuroHelpText$1 = class AuroHelpText extends r$a {
       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
@@ -7801,26 +7813,38 @@ 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

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

@@ -342,19 +342,19 @@ Complete!
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created dist in 698ms
+created dist in 1s
 
 ./demo/index.js → ./demo/...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created ./demo/ in 606ms
+created ./demo/ in 676ms
 
 ./demo/api.js → ./demo/...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created ./demo/ in 605ms
+created ./demo/ in 699ms
 
 > @aurodesignsystem/auro-counter@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component counter
@@ -386,10 +386,14 @@ Web Component Analyzer analyzing 2 files...
   ⁕ FILE:src=./../apiExamples/basic.html 
   ⁕ FILE:src=./../apiExamples/description.html 
   ⁕ FILE:src=./../apiExamples/dropdown.html 
+  ⁕ FILE:src=./../apiExamples/dropdown-value-text.html 
+  ⁕ FILE:src=./../apiExamples/dropdown-help-text.html 
   ⁕ FILE:src=./../apiExamples/disabled.html 
   ⁕ CODE:src=./../apiExamples/basic.html 
   ⁕ CODE:src=./../apiExamples/description.html 
   ⁕ CODE:src=./../apiExamples/dropdown.html 
+  ⁕ CODE:src=./../apiExamples/dropdown-value-text.html 
+  ⁕ CODE:src=./../apiExamples/dropdown-help-text.html 
   ⁕ CODE:src=./../apiExamples/disabled.html 
 
 ✔ /demo/api.md Updated

package/components/counter/.turbo/turbo-bundler.log

@@ -7,16 +7,16 @@
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created dist in 631ms
+created dist in 670ms
 
 ./demo/index.js → ./demo/...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created ./demo/ in 451ms
+created ./demo/ in 370ms
 
 ./demo/api.js → ./demo/...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created ./demo/ in 299ms
+created ./demo/ in 296ms

package/components/counter/README.md

@@ -100,7 +100,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.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-counter@2.0.0-beta.28/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.29/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases

package/components/counter/demo/api.md

@@ -61,9 +61,12 @@
 
 ## Slots
 
-| Name      | Description                |
-|-----------|----------------------------|
-| [Default](#Default) | Slot for counter elements. |
+| Name        | Description                                      |
+|-------------|--------------------------------------------------|
+| [Default](#Default)   | Slot for counter elements.                       |
+| [HelpText](#HelpText)  | Dropdown help text content. Only used when `isDropdown` is true. |
+| [Label](#Label)     | Dropdown label content. Only used when `isDropdown` is true. |
+| [ValueText](#ValueText) | Dropdown value text display. Only used when `isDropdown` is true. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples

package/components/counter/demo/api.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/demo/index.md

@@ -109,22 +109,22 @@ The `auro-counter` component is a ui element that enables a way to increment or
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
-  <div style="width: 300px;">
-      <auro-counter-group isDropdown>
-        <div slot="placeholder">Passengers</div>
-        <auro-counter>
-          Short label
-          <span slot="description">This is an example of a long sub label wrapping behavior</span>
-        </auro-counter>
-        <auro-counter>
-          This is an example of the wrapping behavior for a long label
-          <span slot="description">with short sub label text</span>
-        </auro-counter>
-        <auro-counter>
-          This is an example of the wrapping behavior for a long label
-          <span slot="description">Combined with an example of a long sub label wrapping behavior</span>
-        </auro-counter>
-      </auro-counter-group>
+  <div style="max-width: 350px;">
+    <auro-counter-group isDropdown>
+      <div slot="label">Passengers</div>
+      <auro-counter>
+        Adults
+        <span slot="description">18 years or older</span>
+      </auro-counter>
+      <auro-counter>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+      </auro-counter>
+      <auro-counter>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
+      </auro-counter>
+    </auro-counter-group>
   </div>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -134,22 +134,124 @@ The `auro-counter` component is a ui element that enables a way to increment or
 <!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
 
 ```html
-<div style="width: 300px;">
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <div slot="label">Passengers</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with custom value text
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
+  <div style="max-width: 350px;">
     <auro-counter-group isDropdown>
-      <div slot="placeholder">Passengers</div>
+      <div slot="valueText">Custom value text</div>
+      <div slot="label"></div>
       <auro-counter>
-        Short label
-        <span slot="description">This is an example of a long sub label wrapping behavior</span>
+        Adults
+        <span slot="description">18 years or older</span>
       </auro-counter>
       <auro-counter>
-        This is an example of the wrapping behavior for a long label
-        <span slot="description">with short sub label text</span>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
       </auro-counter>
       <auro-counter>
-        This is an example of the wrapping behavior for a long label
-        <span slot="description">Combined with an example of a long sub label wrapping behavior</span>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
       </auro-counter>
     </auro-counter-group>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-value-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-value-text.html -->
+
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <div slot="valueText">Custom value text</div>
+    <div slot="label"></div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with help text
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-help-text.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-help-text.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group isDropdown>
+      <div slot="helpText">This is help text</div>
+      <auro-counter>
+        Adults
+        <span slot="description">18 years or older</span>
+      </auro-counter>
+      <auro-counter>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+      </auro-counter>
+      <auro-counter>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
+      </auro-counter>
+    </auro-counter-group>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-help-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-help-text.html -->
+
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <div slot="helpText">This is help text</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
 </div>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->