@aurodesignsystem/auro-formkit 2.0.0-beta.32 → 2.0.0-beta.34

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

@@ -31,11 +31,11 @@ const t$6=globalThis,i$d=t$6.trustedTypes,s$6=i$d?i$d.createPolicy("lit-html",{c
  */
 const a$5=Symbol.for(""),o$9=t=>{if(t?.r===a$5)return t?._$litStatic$},s$5=t=>({_$litStatic$:t,r:a$5}),i$b=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(undefined!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$5}),l$5=new Map,n$7=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&undefined!==(i=e[$],s=o$9(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");undefined===(r=l$5.get(t))&&(n.raw=n,l$5.set(t,r=n)),e=u;}return t(r,...e)},u$5=n$7(x$2);
 
-var styleButtonTokenCss = i$f`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;
+var styleButtonTokenCss = i$f`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;
 
-var styleButtonColorCss = i$f`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-color:var(--ds-auro-counter-control-border-active)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;
+var styleButtonColorCss = i$f`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;
 
-var styleButtonCss = i$f`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem);transform:unset}`;
+var styleButtonCss = i$f`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline:none;transform:unset}`;
 
 /**
  * @license
@@ -1291,11 +1291,11 @@ var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width"
 
 var minusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"minus-lg","category":"interface","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M5.75 12.75h12.5a.75.75 0 1 0 0-1.5H5.75a.75.75 0 1 0 0 1.5\"/></svg>"};
 
-var tokensCss$3 = i$f`:host{--ds-auro-counter-text-default: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #525252);--ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #054687);--ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));--ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);--ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8)}`;
+var tokensCss$3 = i$f`:host{--ds-auro-counter-text-default: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #525252);--ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #054687);--ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));--ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);--ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8)}`;
 
-var colorCss$5 = i$f`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;
+var colorCss$5 = i$f`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-active)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;
 
-var styleCss$6 = i$f`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;line-height:0}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
+var styleCss$6 = i$f`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;border-radius:var(--ds-size-500, 2.5rem);line-height:0}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
 
 /* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
@@ -1317,6 +1317,7 @@ class AuroCounter extends r$8 {
   constructor() {
     super();
 
+    this.defaultSlot = undefined;
     this.disabled = false;
     this.disableMax = false;
     this.disableMin = false;
@@ -1342,6 +1343,25 @@ class AuroCounter extends r$8 {
      * @type {string}
      */
     this.iconTag = versioning.generateTag("auro-icon", iconVersion$1, AuroIcon$1);
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$8.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this.handleKeyDown);
+    super.disconnectedCallback();
   }
 
   /**
@@ -1351,6 +1371,15 @@ class AuroCounter extends r$8 {
   static get properties() {
     return {
 
+      /**
+       * The default slot content.
+       * @type {string}
+       * @private
+       */
+      defaultSlot: {
+        type: String,
+      },
+
       /**
        * Indicates if the counter is disabled.
        */
@@ -1433,7 +1462,7 @@ class AuroCounter extends r$8 {
    * @returns {void}
    */
   increment(value) {
-    if (this.disabled) {
+    if (this.disabled || this.disableMax || this.value >= this.max) {
       return;
     }
 
@@ -1447,7 +1476,7 @@ class AuroCounter extends r$8 {
    * @returns {void}
    */
   decrement(value) {
-    if (this.disabled) {
+    if (this.disabled || this.disableMin || this.value <= this.min) {
       return;
     }
 
@@ -1485,19 +1514,6 @@ class AuroCounter extends r$8 {
     return true;
   }
 
-  /**
-   * Moves the focus to the first enabled button within the shadow DOM.
-   * This method searches for the first `auro-counter-button` element that is not disabled
-   * and sets the focus on it.
-   * @private
-   */
-  jumpFocusToEnabled() {
-    const button = this.shadowRoot.querySelector("auro-counter-button:not([disabled])");
-    if (button && button instanceof HTMLButtonElement) {
-      button.focus();
-    }
-  }
-
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -1506,11 +1522,47 @@ class AuroCounter extends r$8 {
     this.validation.validate(this, force);
   }
 
+  /**
+   * Handles the keydown event for the counter component.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   * @returns {void}
+   * @private
+   */
+  handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        this.increment();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.decrement();
+        break;
+    }
+  }
 
   firstUpdated() {
     this.initValue();
   }
 
+  /**
+   * Handles the change event for the default slot.
+   * Updates the defaultSlot property with the trimmed text content of the first assigned node.
+   *
+   * @param {Event} event - The event object representing the slot change event.
+   * @private
+   */
+  onDefaultSlotChange(event) {
+    const assignedNodes = event.target.assignedNodes();
+    if (assignedNodes.length > 0) {
+      this.defaultSlot = assignedNodes[0].textContent.trim();
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("value")) {
       this.validate();
@@ -1521,42 +1573,25 @@ class AuroCounter extends r$8 {
           },
         }),
         {
-          bubble: true,
-          composable: true,
+          bubbles: true,
+          composed: true,
         }
       );
-
-      if (
-        this.value === this.max ||
-        this.value === this.min ||
-        changedProperties.get("disableMax") ||
-        changedProperties.get("disableMin")
-      ) {
-        this.jumpFocusToEnabled();
-      }
     }
-    /* eslint-disable no-extra-parens */
-    if (
-      (changedProperties.has("disableMax") &&
-        changedProperties.get("disableMax") !== undefined) ||
-      (changedProperties.has("disableMin") &&
-        changedProperties.get("disableMin") !== undefined)
-    ) {
-      this.jumpFocusToEnabled();
-    }
-    /* eslint-enable no-extra-parens */
   }
 
   render() {
     return u$5`
       <div class="counter">
         <div class="content" >
-          <label class="label"><slot></slot></label>
-          <slot name="description"></slot>
+          <label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
+          <slot id="counter-description" name="description"></slot>
         </div>
-        
-        <div part="counterControl">
+        <div part="counterControl" aria-labelledby="counter-label" aria-describedby="counter-description" tabindex="${this.disabled ? '-1' : '0'}" role="spinbutton" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}">
           <auro-counter-button
+          aria-hidden="true"
+          iconOnly
+          tabindex="-1"
           part="controlMinus"
           @click="${() => this.decrement()}"
           ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
@@ -1569,6 +1604,9 @@ class AuroCounter extends r$8 {
           </div>
 
           <auro-counter-button
+          aria-hidden="true"
+          iconOnly
+          tabindex="-1"
           part="controlPlus"
           @click="${() => this.increment()}"
           ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
@@ -4343,6 +4381,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -4663,7 +4710,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {
@@ -4820,7 +4867,7 @@ if (!customElements.get("auro-counter-wrapper")) {
   customElements.define("auro-counter-wrapper", AuroCounterWrapper);
 }
 
-/* eslint-disable lit/no-invalid-html, lit/binding-positions */
+/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle */
 
 
 /**
@@ -4841,7 +4888,6 @@ class AuroCounterGroup extends r$8 {
     super();
 
     this.isDropdown = false;
-
     this.max = undefined;
     this.min = undefined;
     this.total = undefined;
@@ -4853,6 +4899,11 @@ class AuroCounterGroup extends r$8 {
      */
     this.counters = undefined;
 
+    /**
+     * @private
+     */
+    this.dropdown = undefined;
+
     /**
      * @private
      */
@@ -4926,6 +4977,51 @@ class AuroCounterGroup extends r$8 {
     };
   }
 
+  /**
+   * Traps keyboard tab interactions within dropdown when open.
+   * @private
+   * @param {KeyboardEvent} event - The keyboard event.
+   * @param {NodeList} counters - The list of counter elements.
+   */
+  trapKeyboard(event, counters) {
+    if (!this.dropdown.isPopoverVisible) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    const firstFocusable = counters[0];
+    const lastFocusable = counters[counters.length - 1];
+
+    if (event.key === 'Enter') {
+      firstFocusable.focus();
+    }
+
+    if (event.key === 'Escape') {
+      this.dropdown.hide();
+    }
+
+    if (event.key === 'Tab' && event.target.offsetParent.id === 'bib') {
+      this.dropdown.noHideOnThisFocusLoss = true;
+
+      const currentIndex = Array.from(counters).indexOf(document.activeElement);
+
+      if (event.shiftKey) {
+        if (currentIndex === 0) {
+          lastFocusable.focus();
+        } else {
+          counters[currentIndex - 1].focus();
+        }
+      } else if (currentIndex === counters.length - 1) {
+        firstFocusable.focus();
+      } else {
+        counters[currentIndex + 1].focus();
+      }
+
+    }
+  }
+
   /**
    * Dynamically disables increment/decrement buttons on a counter based on group value.
    * This method checks the total aggregated value against the group's min and max properties.
@@ -4959,12 +5055,21 @@ class AuroCounterGroup extends r$8 {
   }
 
   /**
-   * Configures the dropdown counters by selecting all `auro-counter` elements
-   * and appending them to the `auro-counter-wrapper` element within the shadow DOM.
-   * Adds an event listener to each counter to update the value on input.
+   * Configures the dropdown counters by selecting all `auro-counter` elements,
+   * appending them to the `auro-counter-wrapper` element within the shadow DOM,
+   * and setting up keyboard navigation and input event listeners.
    * @private
    */
   configureDropdownCounters() {
+    this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    this.dropdown.addEventListener('keydown', (event) => this.trapKeyboard(event, this.counters, 'dropdown'));
+
+    this.addEventListener('auroDropdown-toggled', () => {
+      if (!this.dropdown.isPopoverVisible) {
+        this.dropdown.focus();
+      }
+    });
+
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');
     this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
 
@@ -4973,6 +5078,15 @@ class AuroCounterGroup extends r$8 {
     });
 
     this.counters = counterWrapper.querySelectorAll("auro-counter, [auro-counter]");
+
+    if (this.keydownHandler) {
+      counterWrapper.removeEventListener('keydown', this.keydownHandler);
+    }
+    this.keydownHandler = (keydownEvent) => {
+      this.trapKeyboard(keydownEvent, this.counters);
+    };
+    counterWrapper.addEventListener('keydown', this.keydownHandler);
+
     this.counters.forEach((counter) => {
       counter.addEventListener("input", () => this.updateValue());
     });
@@ -5031,8 +5145,8 @@ class AuroCounterGroup extends r$8 {
           },
         }),
         {
-          bubble: true,
-          composable: true,
+          bubbles: true,
+          composed: true,
         }
       );
     }
@@ -5054,7 +5168,7 @@ class AuroCounterGroup extends r$8 {
     ${this.isDropdown
       ? u$5`<${this.dropdownTag} common chevron>
         <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 ? ', ' : ''}`)}
+          ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
         </slot></div>
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>