@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.16 → 0.0.0-pr624.18

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

@@ -419,7 +419,6 @@ let AuroElement$5 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -857,7 +856,7 @@ let AuroLoader$1 = class AuroLoader extends i$2 {
 
 var loaderVersion$1 = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -924,6 +923,21 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$1, AuroLoader$1);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -990,13 +1004,23 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -1029,6 +1053,27 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -1119,14 +1164,17 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${o(this.tIndex)}"
+        tabindex="${o(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${e(classes)}"
+        class=${e(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${o(this.title ? this.title : undefined)}"
@@ -1135,6 +1183,9 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
         variant="${o(this.variant ? this.variant : undefined)}"
         .value="${o(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${o(this.buttonHref || undefined)}"
+        target="${o(this.buttonTarget || undefined)}"
+        rel="${o(this.buttonRel || undefined)}"
       >
         ${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -1143,12 +1194,12 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -2662,6 +2713,18 @@ class AuroCounter extends i$2 {
 
   firstUpdated() {
     this.initValue();
+    this.setTagAttribute("auro-counter");
+  }
+
+  /**
+   * Sets an attribute that matches the default tag name if the tag name is not the default.
+   * @param {string} tagName - The tag name to set as an attribute.
+   * @private
+   */
+  setTagAttribute(tagName) {
+    if (this.tagName.toLowerCase() !== tagName) {
+      this.setAttribute(tagName, true);
+    }
   }
 
   /**
@@ -2702,14 +2765,24 @@ class AuroCounter extends i$2 {
           <label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
           <slot id="counter-description" name="description"></slot>
         </div>
-        <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}">
+        <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}"
+          aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+        >
           <auro-counter-button
-          aria-hidden="true"
-          tindex="-1"
-          part="controlMinus"
-          @click="${() => this.decrement()}"
-          ?onDark="${this.onDark}"
-          ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
+            aria-hidden="true"
+            .tabindex="${'-1'}"
+            part="controlMinus"
+            @click="${() => this.decrement()}"
+            ?onDark="${this.onDark}"
+            ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
           >
             <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
           </auro-counter-button>
@@ -2719,12 +2792,12 @@ class AuroCounter extends i$2 {
           </div>
 
           <auro-counter-button
-          aria-hidden="true"
-          tindex="-1"
-          part="controlPlus"
-          @click="${() => this.increment()}"
-          ?onDark="${this.onDark}"
-          ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
+            aria-hidden="true"
+            .tabindex="${'-1'}"
+            part="controlPlus"
+            @click="${() => this.increment()}"
+            ?onDark="${this.onDark}"
+            ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
           >
             <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
           </auro-counter-button>
@@ -7351,7 +7424,6 @@ let AuroElement$1 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -7660,7 +7732,7 @@ class AuroLoader extends i$2 {
 
 var loaderVersion = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -7727,6 +7799,21 @@ class AuroButton extends AuroElement$1 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -7793,13 +7880,23 @@ class AuroButton extends AuroElement$1 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -7832,6 +7929,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -7922,14 +8040,17 @@ class AuroButton extends AuroElement$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${o(this.tIndex)}"
+        tabindex="${o(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${e(classes)}"
+        class=${e(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${o(this.title ? this.title : undefined)}"
@@ -7938,6 +8059,9 @@ class AuroButton extends AuroElement$1 {
         variant="${o(this.variant ? this.variant : undefined)}"
         .value="${o(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${o(this.buttonHref || undefined)}"
+        target="${o(this.buttonTarget || undefined)}"
+        rel="${o(this.buttonRel || undefined)}"
       >
         ${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -7946,12 +8070,12 @@ class AuroButton extends AuroElement$1 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -7960,7 +8084,7 @@ class AuroButton extends AuroElement$1 {
   }
 }
 
-var buttonVersion = '11.0.0';
+var buttonVersion = '11.2.1';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -9073,7 +9197,266 @@ class AuroElement extends i$2 {
   }
 }
 
-/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly */
+// Selectors for focusable elements
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[role="tab"]:not([disabled])',
+  '[role="link"]:not([disabled])',
+  '[role="button"]:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"])'
+];
+
+// List of custom components that are known to be focusable
+const FOCUSABLE_COMPONENTS = [
+  'auro-checkbox',
+  'auro-radio',
+  'auro-dropdown',
+  'auro-button',
+  'auro-combobox',
+  'auro-input',
+  'auro-counter',
+  'auro-menu',
+  'auro-select',
+  'auro-datepicker',
+  'auro-hyperlink',
+  'auro-accordion',
+];
+
+/**
+ * Determines if a given element is a custom focusable component.
+ * Returns true if the element matches a known focusable component and is not disabled.
+ *
+ * @param {HTMLElement} element The element to check for focusability.
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
+ */
+function isFocusableComponent(element) {
+  const componentName = element.tagName.toLowerCase();
+
+  // Guard Clause: Element is a focusable component
+  if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
+
+  // Guard Clause: Element is not disabled
+  if (element.hasAttribute('disabled')) return false;
+
+  // Guard Clause: The element is a hyperlink and has no href attribute
+  if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
+
+  // If all guard clauses pass, the element is a focusable component
+  return true;
+}
+
+/**
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+ * Returns a unique, ordered array of elements that can receive focus.
+ *
+ * @param {HTMLElement} container The container to search within
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+ */
+function getFocusableElements(container) {
+  // Get elements in DOM order by walking the tree
+  const orderedFocusableElements = [];
+
+  // Define a recursive function to collect focusable elements in DOM order
+  const collectFocusableElements = (root) => {
+    // Check if current element is focusable
+    if (root.nodeType === Node.ELEMENT_NODE) {
+      // Check if this is a custom component that is focusable
+      const isComponentFocusable = isFocusableComponent(root);
+
+      if (isComponentFocusable) {
+        // Add the component itself as a focusable element and don't traverse its shadow DOM
+        orderedFocusableElements.push(root);
+        return; // Skip traversing inside this component
+      }
+
+      // Check if the element itself matches any selector
+      for (const selector of FOCUSABLE_SELECTORS) {
+        if (root.matches?.(selector)) {
+          orderedFocusableElements.push(root);
+          break; // Once we know it's focusable, no need to check other selectors
+        }
+      }
+
+      // Process shadow DOM only for non-Auro components
+      if (root.shadowRoot) {
+        // Process shadow DOM children in order
+        if (root.shadowRoot.children) {
+          Array.from(root.shadowRoot.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+
+      // Process slots and their assigned nodes in order
+      if (root.tagName === 'SLOT') {
+        const assignedNodes = root.assignedNodes({ flatten: true });
+        for (const node of assignedNodes) {
+          collectFocusableElements(node);
+        }
+      } else {
+        // Process light DOM children in order
+        if (root.children) {
+          Array.from(root.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+    }
+  };
+
+  // Start the traversal from the container
+  collectFocusableElements(container);
+
+  // Remove duplicates that might have been collected through different paths
+  // while preserving order
+  const uniqueElements = [];
+  const seen = new Set();
+
+  for (const element of orderedFocusableElements) {
+    if (!seen.has(element)) {
+      seen.add(element);
+      uniqueElements.push(element);
+    }
+  }
+
+  return uniqueElements;
+}
+
+/**
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
+ */
+class FocusTrap {
+  /**
+   * Creates a new FocusTrap instance for the given container element.
+   * Initializes event listeners and prepares the container for focus management.
+   *
+   * @param {HTMLElement} container The DOM element to trap focus within.
+   * @throws {Error} If the provided container is not a valid HTMLElement.
+   */
+  constructor(container) {
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("FocusTrap requires a valid HTMLElement.");
+    }
+
+    this.container = container;
+    this.tabDirection = 'forward'; // or 'backward'
+
+    this._init();
+  }
+
+  /**
+   * Initializes the focus trap by setting up event listeners and attributes on the container.
+   * Prepares the container for focus management, including support for shadow DOM and inert attributes.
+   *
+   * @private
+   */
+  _init() {
+
+    // Add inert attribute to prevent focusing programmatically as well (if supported)
+    if ('inert' in HTMLElement.prototype) {
+      this.container.inert = false; // Ensure the container isn't inert
+      this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
+    }
+
+    // Track tab direction
+    this.container.addEventListener('keydown', this._onKeydown);
+  }
+
+  /**
+   * Handles keydown events to manage tab navigation within the container.
+   * Ensures that focus wraps around when reaching the first or last focusable element.
+   *
+   * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
+   * @private
+   */
+  _onKeydown = (e) => {
+    
+    if (e.key === 'Tab') {
+
+      // Set the tab direction based on the key pressed
+      this.tabDirection = e.shiftKey ? 'backward' : 'forward';
+
+      // Get the active element(s) in the document and shadow root
+      // This will include the active element in the shadow DOM if it exists
+      // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
+      const actives =  [
+        document.activeElement,
+        ...document.activeElement.shadowRoot && [document.activeElement.shadowRoot.activeElement] || []
+      ];
+
+      // Update the focusable elements
+      const focusables = this._getFocusableElements();
+
+      // If we're at either end of the focusable elements, wrap around to the other end
+      const focusIndex =
+        (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
+          ? focusables.length - 1
+          : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
+            ? 0
+            : null;
+
+      if (focusIndex !== null) {
+        focusables[focusIndex].focus();
+        e.preventDefault(); // Prevent default tab behavior
+        e.stopPropagation(); // Stop the event from bubbling up
+      }
+    }
+  };
+
+  /**
+   * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+   * Returns a unique, ordered array of elements that can receive focus.
+   *
+   * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+   * @private
+   */
+  _getFocusableElements() {
+    // Use the imported utility function to get focusable elements
+    const elements = getFocusableElements(this.container);
+    
+    // Filter out any elements with the 'focus-bookend' class
+    return elements;
+  }
+
+  /**
+   * Moves focus to the first focusable element within the container.
+   * Useful for setting initial focus when activating the focus trap.
+   */
+  focusFirstElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[0].focus();
+  }
+
+  /**
+   * Moves focus to the last focusable element within the container.
+   * Useful for setting focus when deactivating or cycling focus in reverse.
+   */
+  focusLastElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[focusables.length - 1].focus();
+  }
+
+  /**
+   * Removes event listeners and attributes added by the focus trap.
+   * Call this method to clean up when the focus trap is no longer needed.
+   */
+  disconnect() {
+
+    if (this.container.hasAttribute('data-focus-trap-container')) {
+      this.container.removeAttribute('data-focus-trap-container');
+    }
+
+    this.container.removeEventListener('keydown', this._onKeydown);
+  }
+}
+
+/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, no-unused-expressions */
 
 
 /**
@@ -9132,6 +9515,11 @@ class AuroCounterGroup extends AuroElement {
      */
     this.validation = new AuroFormValidation();
 
+    // Bind callback methods since we can't use arrow functions in class properties
+
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     /**
      * Generate unique names for dependency components.
      * @private
@@ -9171,6 +9559,8 @@ class AuroCounterGroup extends AuroElement {
   static get properties() {
     return {
 
+      ...super.properties,
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false
@@ -9309,51 +9699,6 @@ class AuroCounterGroup extends AuroElement {
     };
   }
 
-  /**
-   * 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' && this.dropdown && event.target.offsetParent === this.dropdown.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.
@@ -9387,6 +9732,52 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
+  /**
+   * Performs state updates that should happen when the dropdown is toggled.
+   * @returns {void}
+   * @private
+   */
+  handleDropdownToggle() {
+
+    // Check if the dropdown is open
+    const dropdownIsOpen = this.dropdown.isPopoverVisible;
+
+    // Adds and removes the focus trap based on the dropdown state
+    this.updateFocusTrap(dropdownIsOpen);
+
+    // Tasks to perform if the dropdown is closed
+    if (!dropdownIsOpen) {
+
+      // Shift focus to the dropdown trigger
+      this.dropdown.trigger.focus();
+    }
+  }
+
+  /**
+   * Updates the focus trap based on whether the dropdown is open or closed.
+   * If the dropdown is open, it creates a new focus trap and focuses the first element
+   * If the dropdown is closed, it disconnects the focus trap if it exists to prevent memory leaks and disable focus trapping.
+   * @param {boolean} dropdownIsOpen - Indicates whether the dropdown is currently open.
+   * @returns {void}
+   * @private
+   */
+  updateFocusTrap(dropdownIsOpen) {
+
+    // If the dropdown is open, create a focus trap and focus the first element
+    if (dropdownIsOpen) {
+      this.dropdownFocusTrap = new FocusTrap(this.dropdown.bibContent);
+      this.dropdownFocusTrap.focusFirstElement();
+      return;
+    }
+
+    // Guard Clause: Ensure there is a focus trap currently active before continuing
+    if (!this.dropdownFocusTrap) return;
+
+    // If the dropdown is not open, disconnect the focus trap if it exists
+    this.dropdownFocusTrap.disconnect();
+    this.dropdownFocusTrap = undefined;
+  }
+
   /**
    * Configures the dropdown counters by selecting all `auro-counter` elements,
    * appending them to the `auro-counter-wrapper` element within the shadow DOM,
@@ -9395,28 +9786,14 @@ class AuroCounterGroup extends AuroElement {
    */
   configureDropdownCounters() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
-    this.dropdown.addEventListener('keydown', (event) => this.trapKeyboard(event, this.counters, 'dropdown'));
-    // notify dropdown to reconfigure as the trigger text is updated
     this.dropdown.requestUpdate();
 
-    this.addEventListener('auroDropdown-toggled', () => {
-      if (!this.dropdown.isPopoverVisible) {
-        this.dropdown.focus();
-      }
-    });
+    this.dropdown.addEventListener("auroDropdown-toggled", this.handleDropdownToggle);
 
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');
     const counterSlot = counterWrapper.querySelector('slot');
     this.counters = counterSlot.assignedElements().filter(el => el.tagName.toLowerCase() === 'auro-counter' || el.hasAttribute('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());
     });
@@ -9558,6 +9935,13 @@ class AuroCounterGroup extends AuroElement {
     this.updateValueText();
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Remove the event listener for dropdown toggling
+    this.removeEventListener("auroDropdown-toggled", this.handleDropdownToggle);
+  }
+
   /**
    * Registers the custom element with the browser.
    * @param {string} [name="auro-counter-group"] - Custom element name to register.
@@ -9576,6 +9960,7 @@ class AuroCounterGroup extends AuroElement {
   renderCounterDropdown() {
     return u`
       <${this.dropdownTag} 
+        noHideOnThisFocusLoss
         chevron common fluid
         part="dropdown"
         ?autoPlacement="${this.autoPlacement}"