@aurodesignsystem-dev/auro-formkit 0.0.0-pr1595.7 → 0.0.0-pr1600.0

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

@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202608300438';
+var formkitVersion$1 = '202608312237';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1411,6 +1411,36 @@ class AuroCounter extends i$2 {
     this.value -= value !== undefined ? value : 1;
   }
 
+  /**
+   * Moves focus to the spinbutton control container.
+   * The +/- buttons are internal `tabindex="-1"` controls; the container is the
+   * widget's single focusable element. `focusVisible: true` forces the container's
+   * `:focus-visible` ring to render even though the interaction was a pointer
+   * click, so focus stays visible on the counter after using its buttons.
+   * @private
+   */
+  focusControl() {
+    const control = this.shadowRoot?.querySelector('[part="counterControl"]');
+    if (control && !this.disabled) {
+      control.focus({ focusVisible: true });
+    }
+  }
+
+  /**
+   * Handles a pointer click on a control button.
+   * A pointer click focuses the clicked button, so if the value change disables
+   * that button at an extreme the browser would drop focus to the document body.
+   * Move focus to the spinbutton container first, then change the value: focus is
+   * no longer on the button when it becomes disabled, so it is never lost and the
+   * counter (and any enclosing dropdown) stays operable (AB#1634231).
+   * @param {'increment' | 'decrement'} action - The control action to perform.
+   * @private
+   */
+  handleControlClick(action) {
+    this.focusControl();
+    this[action]();
+  }
+
   /**
    * Initializes the value of the counter.
    * If the current value is undefined, it sets the value to the minimum value.
@@ -1553,7 +1583,7 @@ class AuroCounter extends i$2 {
               .tabindex="${'-1'}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               part="controlMinus"
-              @click="${() => this.decrement()}"
+              @click="${() => this.handleControlClick('decrement')}"
               ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
             >
               <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
@@ -1567,7 +1597,7 @@ class AuroCounter extends i$2 {
               .tabindex="${'-1'}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               part="controlPlus"
-              @click="${() => this.increment()}"
+              @click="${() => this.handleControlClick('increment')}"
               ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
             >
               <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
@@ -5399,7 +5429,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608300438';
+var formkitVersion = '202608312237';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7538,12 +7568,15 @@ class AuroCounterGroup extends AuroElement {
 
     this.matchWidth = false;
     this.isDropdown = false;
+
+    /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
     this.fullscreenBreakpoint = 'sm';
     this.largeFullscreenHeadline = false;
     this.autoPlacement = false;
     this.noFlip = false;
     this.shift = false;
 
+    /** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
     this.placement = 'bottom-start';
 
     /**
@@ -7572,6 +7605,16 @@ class AuroCounterGroup extends AuroElement {
     /** @private */
     this.updateValidity = this.updateValidity.bind(this);
 
+    /**
+     * Whether the most recent pointerdown began inside this group's composed tree.
+     * Used to keep the dropdown open when a counter button disables itself on click.
+     * @private
+     */
+    this.pointerdownInsideGroup = false;
+
+    /** @private */
+    this.trackPointerdown = this.trackPointerdown.bind(this);
+
     /**
      * Generate unique names for dependency components.
      * @private
@@ -7957,6 +8000,20 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
+  /**
+   * Records whether a pointerdown originated inside this group's composed tree.
+   * @param {PointerEvent} event - The pointerdown event.
+   * @private
+   */
+  trackPointerdown(event) {
+    this.pointerdownInsideGroup = event.composedPath().includes(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('pointerdown', this.trackPointerdown, true);
+  }
+
   /**
    * Hides the dropdown bib if its open.
    * @returns {void}
@@ -8154,6 +8211,12 @@ class AuroCounterGroup extends AuroElement {
     if (this.isDropdown) {
       applyKeyboardStrategy$1(this, counterGroupKeyboardStrategy);
 
+      // Track where the most recent pointer interaction began so the focusout
+      // handler below can tell a counter-button click apart from an outside
+      // click. Capture phase + composedPath so clicks inside the bib's nested
+      // shadow roots still resolve to this group. (AB#1634231)
+      document.addEventListener('pointerdown', this.trackPointerdown, true);
+
       // noHideOnThisFocusLoss=true on the dropdown prevents handleFocusLoss from
       // closing the bib when focus moves out via Tab. Close explicitly via focusout:
       // if relatedTarget is outside the counter-group's light DOM, focus has left.
@@ -8161,9 +8224,29 @@ class AuroCounterGroup extends AuroElement {
         if (!this.dropdown?.isPopoverVisible || this.dropdown?.isBibFullscreen) {
           return;
         }
+
+        // Focus moved to a specific element still inside the group — keep the bib open.
         if (event.relatedTarget && this.contains(event.relatedTarget)) {
           return;
         }
+
+        // A null relatedTarget means focus was dropped without landing on a
+        // specific element. This fires when a counter's +/- button becomes
+        // disabled at an extreme immediately after being clicked: the browser
+        // blurs the now-disabled button, closing the bib as an unwanted side
+        // effect of using the counters. If that blur was triggered by a pointer
+        // interaction that began inside the group, keep the bib open. A genuine
+        // outside click also yields a null relatedTarget, but its pointerdown
+        // originated outside the group, so we still close. (AB#1634231)
+        if (!event.relatedTarget) {
+          if (this.pointerdownInsideGroup) {
+            return;
+          }
+          this.hideBib();
+          return;
+        }
+
+        // Focus moved to a known element outside the group (e.g. Tab to the next field).
         this.hideBib();
       });
     }

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

@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202608300438';
+var formkitVersion$1 = '202608312237';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1411,6 +1411,36 @@ class AuroCounter extends i$2 {
     this.value -= value !== undefined ? value : 1;
   }
 
+  /**
+   * Moves focus to the spinbutton control container.
+   * The +/- buttons are internal `tabindex="-1"` controls; the container is the
+   * widget's single focusable element. `focusVisible: true` forces the container's
+   * `:focus-visible` ring to render even though the interaction was a pointer
+   * click, so focus stays visible on the counter after using its buttons.
+   * @private
+   */
+  focusControl() {
+    const control = this.shadowRoot?.querySelector('[part="counterControl"]');
+    if (control && !this.disabled) {
+      control.focus({ focusVisible: true });
+    }
+  }
+
+  /**
+   * Handles a pointer click on a control button.
+   * A pointer click focuses the clicked button, so if the value change disables
+   * that button at an extreme the browser would drop focus to the document body.
+   * Move focus to the spinbutton container first, then change the value: focus is
+   * no longer on the button when it becomes disabled, so it is never lost and the
+   * counter (and any enclosing dropdown) stays operable (AB#1634231).
+   * @param {'increment' | 'decrement'} action - The control action to perform.
+   * @private
+   */
+  handleControlClick(action) {
+    this.focusControl();
+    this[action]();
+  }
+
   /**
    * Initializes the value of the counter.
    * If the current value is undefined, it sets the value to the minimum value.
@@ -1553,7 +1583,7 @@ class AuroCounter extends i$2 {
               .tabindex="${'-1'}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               part="controlMinus"
-              @click="${() => this.decrement()}"
+              @click="${() => this.handleControlClick('decrement')}"
               ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
             >
               <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
@@ -1567,7 +1597,7 @@ class AuroCounter extends i$2 {
               .tabindex="${'-1'}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               part="controlPlus"
-              @click="${() => this.increment()}"
+              @click="${() => this.handleControlClick('increment')}"
               ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
             >
               <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
@@ -5399,7 +5429,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608300438';
+var formkitVersion = '202608312237';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7538,12 +7568,15 @@ class AuroCounterGroup extends AuroElement {
 
     this.matchWidth = false;
     this.isDropdown = false;
+
+    /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
     this.fullscreenBreakpoint = 'sm';
     this.largeFullscreenHeadline = false;
     this.autoPlacement = false;
     this.noFlip = false;
     this.shift = false;
 
+    /** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
     this.placement = 'bottom-start';
 
     /**
@@ -7572,6 +7605,16 @@ class AuroCounterGroup extends AuroElement {
     /** @private */
     this.updateValidity = this.updateValidity.bind(this);
 
+    /**
+     * Whether the most recent pointerdown began inside this group's composed tree.
+     * Used to keep the dropdown open when a counter button disables itself on click.
+     * @private
+     */
+    this.pointerdownInsideGroup = false;
+
+    /** @private */
+    this.trackPointerdown = this.trackPointerdown.bind(this);
+
     /**
      * Generate unique names for dependency components.
      * @private
@@ -7957,6 +8000,20 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
+  /**
+   * Records whether a pointerdown originated inside this group's composed tree.
+   * @param {PointerEvent} event - The pointerdown event.
+   * @private
+   */
+  trackPointerdown(event) {
+    this.pointerdownInsideGroup = event.composedPath().includes(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('pointerdown', this.trackPointerdown, true);
+  }
+
   /**
    * Hides the dropdown bib if its open.
    * @returns {void}
@@ -8154,6 +8211,12 @@ class AuroCounterGroup extends AuroElement {
     if (this.isDropdown) {
       applyKeyboardStrategy$1(this, counterGroupKeyboardStrategy);
 
+      // Track where the most recent pointer interaction began so the focusout
+      // handler below can tell a counter-button click apart from an outside
+      // click. Capture phase + composedPath so clicks inside the bib's nested
+      // shadow roots still resolve to this group. (AB#1634231)
+      document.addEventListener('pointerdown', this.trackPointerdown, true);
+
       // noHideOnThisFocusLoss=true on the dropdown prevents handleFocusLoss from
       // closing the bib when focus moves out via Tab. Close explicitly via focusout:
       // if relatedTarget is outside the counter-group's light DOM, focus has left.
@@ -8161,9 +8224,29 @@ class AuroCounterGroup extends AuroElement {
         if (!this.dropdown?.isPopoverVisible || this.dropdown?.isBibFullscreen) {
           return;
         }
+
+        // Focus moved to a specific element still inside the group — keep the bib open.
         if (event.relatedTarget && this.contains(event.relatedTarget)) {
           return;
         }
+
+        // A null relatedTarget means focus was dropped without landing on a
+        // specific element. This fires when a counter's +/- button becomes
+        // disabled at an extreme immediately after being clicked: the browser
+        // blurs the now-disabled button, closing the bib as an unwanted side
+        // effect of using the counters. If that blur was triggered by a pointer
+        // interaction that began inside the group, keep the bib open. A genuine
+        // outside click also yields a null relatedTarget, but its pointerdown
+        // originated outside the group, so we still close. (AB#1634231)
+        if (!event.relatedTarget) {
+          if (this.pointerdownInsideGroup) {
+            return;
+          }
+          this.hideBib();
+          return;
+        }
+
+        // Focus moved to a known element outside the group (e.g. Tab to the next field).
         this.hideBib();
       });
     }

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

@@ -200,12 +200,14 @@ export class AuroCounterGroup extends AuroElement {
     value: {} | undefined;
     matchWidth: boolean;
     isDropdown: boolean;
-    fullscreenBreakpoint: string;
+    /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
+    fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
     largeFullscreenHeadline: boolean;
     autoPlacement: boolean;
     noFlip: boolean;
     shift: boolean;
-    placement: string;
+    /** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
+    placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
     /**
      * @private
      */
@@ -237,6 +239,18 @@ export class AuroCounterGroup extends AuroElement {
      * @private
      */
     private updateValidity;
+    /**
+     * Whether the most recent pointerdown began inside this group's composed tree.
+     * Used to keep the dropdown open when a counter button disables itself on click.
+     * @private
+     */
+    private pointerdownInsideGroup;
+    /**
+     * Records whether a pointerdown originated inside this group's composed tree.
+     * @param {PointerEvent} event - The pointerdown event.
+     * @private
+     */
+    private trackPointerdown;
     /**
      * Dynamically generated dropdown tag.
      * @private

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

@@ -90,6 +90,26 @@ export class AuroCounter extends LitElement {
      * @returns {void}
      */
     decrement(value?: number): void;
+    /**
+     * Moves focus to the spinbutton control container.
+     * The +/- buttons are internal `tabindex="-1"` controls; the container is the
+     * widget's single focusable element. `focusVisible: true` forces the container's
+     * `:focus-visible` ring to render even though the interaction was a pointer
+     * click, so focus stays visible on the counter after using its buttons.
+     * @private
+     */
+    private focusControl;
+    /**
+     * Handles a pointer click on a control button.
+     * A pointer click focuses the clicked button, so if the value change disables
+     * that button at an extreme the browser would drop focus to the document body.
+     * Move focus to the spinbutton container first, then change the value: focus is
+     * no longer on the button when it becomes disabled, so it is never lost and the
+     * counter (and any enclosing dropdown) stays operable (AB#1634231).
+     * @param {'increment' | 'decrement'} action - The control action to perform.
+     * @private
+     */
+    private handleControlClick;
     /**
      * Initializes the value of the counter.
      * If the current value is undefined, it sets the value to the minimum value.

package/components/counter/dist/index.js

@@ -1077,7 +1077,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202608300438';
+var formkitVersion$1 = '202608312237';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1361,6 +1361,36 @@ class AuroCounter extends LitElement {
     this.value -= value !== undefined ? value : 1;
   }
 
+  /**
+   * Moves focus to the spinbutton control container.
+   * The +/- buttons are internal `tabindex="-1"` controls; the container is the
+   * widget's single focusable element. `focusVisible: true` forces the container's
+   * `:focus-visible` ring to render even though the interaction was a pointer
+   * click, so focus stays visible on the counter after using its buttons.
+   * @private
+   */
+  focusControl() {
+    const control = this.shadowRoot?.querySelector('[part="counterControl"]');
+    if (control && !this.disabled) {
+      control.focus({ focusVisible: true });
+    }
+  }
+
+  /**
+   * Handles a pointer click on a control button.
+   * A pointer click focuses the clicked button, so if the value change disables
+   * that button at an extreme the browser would drop focus to the document body.
+   * Move focus to the spinbutton container first, then change the value: focus is
+   * no longer on the button when it becomes disabled, so it is never lost and the
+   * counter (and any enclosing dropdown) stays operable (AB#1634231).
+   * @param {'increment' | 'decrement'} action - The control action to perform.
+   * @private
+   */
+  handleControlClick(action) {
+    this.focusControl();
+    this[action]();
+  }
+
   /**
    * Initializes the value of the counter.
    * If the current value is undefined, it sets the value to the minimum value.
@@ -1503,7 +1533,7 @@ class AuroCounter extends LitElement {
               .tabindex="${'-1'}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               part="controlMinus"
-              @click="${() => this.decrement()}"
+              @click="${() => this.handleControlClick('decrement')}"
               ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
             >
               <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
@@ -1517,7 +1547,7 @@ class AuroCounter extends LitElement {
               .tabindex="${'-1'}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               part="controlPlus"
-              @click="${() => this.increment()}"
+              @click="${() => this.handleControlClick('increment')}"
               ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
             >
               <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
@@ -5331,7 +5361,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608300438';
+var formkitVersion = '202608312237';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7470,12 +7500,15 @@ class AuroCounterGroup extends AuroElement {
 
     this.matchWidth = false;
     this.isDropdown = false;
+
+    /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
     this.fullscreenBreakpoint = 'sm';
     this.largeFullscreenHeadline = false;
     this.autoPlacement = false;
     this.noFlip = false;
     this.shift = false;
 
+    /** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
     this.placement = 'bottom-start';
 
     /**
@@ -7504,6 +7537,16 @@ class AuroCounterGroup extends AuroElement {
     /** @private */
     this.updateValidity = this.updateValidity.bind(this);
 
+    /**
+     * Whether the most recent pointerdown began inside this group's composed tree.
+     * Used to keep the dropdown open when a counter button disables itself on click.
+     * @private
+     */
+    this.pointerdownInsideGroup = false;
+
+    /** @private */
+    this.trackPointerdown = this.trackPointerdown.bind(this);
+
     /**
      * Generate unique names for dependency components.
      * @private
@@ -7889,6 +7932,20 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
+  /**
+   * Records whether a pointerdown originated inside this group's composed tree.
+   * @param {PointerEvent} event - The pointerdown event.
+   * @private
+   */
+  trackPointerdown(event) {
+    this.pointerdownInsideGroup = event.composedPath().includes(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('pointerdown', this.trackPointerdown, true);
+  }
+
   /**
    * Hides the dropdown bib if its open.
    * @returns {void}
@@ -8086,6 +8143,12 @@ class AuroCounterGroup extends AuroElement {
     if (this.isDropdown) {
       applyKeyboardStrategy$1(this, counterGroupKeyboardStrategy);
 
+      // Track where the most recent pointer interaction began so the focusout
+      // handler below can tell a counter-button click apart from an outside
+      // click. Capture phase + composedPath so clicks inside the bib's nested
+      // shadow roots still resolve to this group. (AB#1634231)
+      document.addEventListener('pointerdown', this.trackPointerdown, true);
+
       // noHideOnThisFocusLoss=true on the dropdown prevents handleFocusLoss from
       // closing the bib when focus moves out via Tab. Close explicitly via focusout:
       // if relatedTarget is outside the counter-group's light DOM, focus has left.
@@ -8093,9 +8156,29 @@ class AuroCounterGroup extends AuroElement {
         if (!this.dropdown?.isPopoverVisible || this.dropdown?.isBibFullscreen) {
           return;
         }
+
+        // Focus moved to a specific element still inside the group — keep the bib open.
         if (event.relatedTarget && this.contains(event.relatedTarget)) {
           return;
         }
+
+        // A null relatedTarget means focus was dropped without landing on a
+        // specific element. This fires when a counter's +/- button becomes
+        // disabled at an extreme immediately after being clicked: the browser
+        // blurs the now-disabled button, closing the bib as an unwanted side
+        // effect of using the counters. If that blur was triggered by a pointer
+        // interaction that began inside the group, keep the bib open. A genuine
+        // outside click also yields a null relatedTarget, but its pointerdown
+        // originated outside the group, so we still close. (AB#1634231)
+        if (!event.relatedTarget) {
+          if (this.pointerdownInsideGroup) {
+            return;
+          }
+          this.hideBib();
+          return;
+        }
+
+        // Focus moved to a known element outside the group (e.g. Tab to the next field).
         this.hideBib();
       });
     }