@aurodesignsystem-dev/auro-formkit 0.0.0-pr1400.3 → 0.0.0-pr1402.0

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

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270129';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270129';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270129';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270129';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1300,8 +1300,6 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
-/* eslint-disable no-underscore-dangle */
-
 /**
  * Returns the clear button element from the active input's shadow
  * DOM, if available.
@@ -1359,52 +1357,24 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component, evt, ctx) {
+  Tab(component, _evt, ctx) {
     if (!ctx.isExpanded) {
       return;
     }
 
-    // Shift+Tab moves the highlight to the first non-disabled option
-    // without making a selection or closing the bib.
-    if (evt.shiftKey) {
-      evt.preventDefault();
-      const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
-      if (firstActive) {
-        component.menu.updateActiveOption(firstActive);
-      }
-      return;
-    }
-
     if (ctx.isModal) {
       if (!ctx.activeInput) {
         return;
       }
-
-      // Active option → select immediately and close the dialog.
-      // Flag the component so the close handler focuses the trigger's
-      // clear button instead of the input. Set flags before makeSelection
-      // because the value change triggers showBib via Lit's updated().
-      if (component.optionActive) {
-        evt.preventDefault();
-        component._focusClearBtnAfterClose = true;
-        component._clearBtnFocusPending = true;
-        component.menu.makeSelection();
-        component.hideBib();
-        return;
-      }
-
       const clearBtn = getClearBtn(ctx);
       const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
 
-      // No active option, input has a value, clear button not focused →
-      // move focus to the dialog's clear button.
+      // Tab from input: if clear button exists and doesn't have focus, focus it
       if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
-
         // Force clear button container visible to work around Safari not
         // propagating :focus-within through shadow DOM boundaries, which
         // causes .wrapper:not(:focus-within) to hide .notification.clear.
         const clearContainer = clearBtn.closest('.clear');
-
         if (clearContainer) {
           clearContainer.style.display = 'flex';
           clearBtn.addEventListener('focusout', () => {
@@ -1427,17 +1397,18 @@ const comboboxKeyboardStrategy = {
         return;
       }
 
-      // No active option, no clear button (or already focused) → just close.
+      // Tab from clear button (or no clear button / no value) →
+      // select the highlighted option if any, then close
+      if (component.optionActive) {
+        component.menu.makeSelection();
+      }
       component.hideBib();
       return;
     }
 
     // Non-fullscreen: select + close
-    if (component.optionActive) {
-      evt.preventDefault();
-      component._focusClearBtnAfterClose = true;
-      component._clearBtnFocusPending = true;
-      component.menu.makeSelection();
+    if (component.menu.optionActive && component.menu.optionActive.value) {
+      component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
   },
@@ -4532,6 +4503,17 @@ class AuroDropdownBib extends i$4 {
        */
       hasActiveDescendant: {
         type: Boolean
+      },
+
+      /**
+       * When true, the keyboard bridge allows native Tab behavior
+       * instead of intercepting it. Set this for bib consumers
+       * (e.g. counter) whose content contains real focusable elements
+       * that need native Tab navigation.
+       * @private
+       */
+      nativeFocusableContent: {
+        type: Boolean
       }
     };
   }
@@ -4698,6 +4680,12 @@ class AuroDropdownBib extends i$4 {
         }
       }
 
+      // Allow native Tab when the bib contains focusable content
+      // (e.g. counter buttons) that needs normal Tab navigation.
+      if (event.key === 'Tab' && this.nativeFocusableContent) {
+        return;
+      }
+
       event.preventDefault();
       event.stopPropagation();
       const newEvent = new KeyboardEvent('keydown', {
@@ -5088,7 +5076,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603270007';
+var formkitVersion$2 = '202603270129';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12852,7 +12840,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603270007';
+var formkitVersion$1 = '202603270129';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13891,7 +13879,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270129';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14901,12 +14889,6 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
-    // Suppress reopening the bib when a Tab selection is in progress —
-    // the value change from makeSelection triggers availableOptions update
-    // which calls showBib from updated(), but the bib should stay closed.
-    if (this._clearBtnFocusPending) {
-      return;
-    }
     if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
@@ -14977,38 +14959,7 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        const shouldFocusClearBtn = this._focusClearBtnAfterClose;
-        this._focusClearBtnAfterClose = false;
-
-        if (shouldFocusClearBtn) {
-          // Set a guard so duplicate toggle events don't call
-          // restoreTriggerAfterClose and steal focus from the clear button.
-          this._clearBtnFocusPending = true;
-
-          restoreTriggerAfterClose(this.dropdown, this.input);
-
-          if (this.input.componentHasFocus) {
-            // Desktop: input already has focus, redirect to clear button
-            // after restoreTriggerAfterClose's rAF settles.
-            requestAnimationFrame(() => {
-              this.setClearBtnFocus();
-              this._clearBtnFocusPending = false;
-            });
-          } else {
-            // Fullscreen: input will receive focus after dialog.close().
-            // Listen for that focus event then redirect to clear button.
-            const onFocus = () => {
-              this.input.removeEventListener('focusin', onFocus);
-              requestAnimationFrame(() => {
-                this.setClearBtnFocus();
-                this._clearBtnFocusPending = false;
-              });
-            };
-            this.input.addEventListener('focusin', onFocus);
-          }
-        } else if (!this._clearBtnFocusPending) {
-          restoreTriggerAfterClose(this.dropdown, this.input);
-        }
+        restoreTriggerAfterClose(this.dropdown, this.input);
       }
 
       if (this.dropdownOpen) {
@@ -15099,28 +15050,7 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      // Force the clear button container visible — without :focus-within
-      // the CSS rule `.wrapper:not(:focus-within) .notification.clear`
-      // hides the container with display:none, preventing focus.
-      const clearContainer = clearBtn.closest('.clear');
-
-      if (clearContainer) {
-        clearContainer.style.display = 'flex';
-        clearBtn.addEventListener('focusout', () => {
-          requestAnimationFrame(() => {
-            clearContainer.style.display = '';
-          });
-        }, { once: true });
-      }
-
-      // Focus the native button inside auro-button so the browser
-      // treats it as a real focusable element.
-      const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
-      if (nativeBtn) {
-        nativeBtn.focus();
-      } else {
-        clearBtn.focus();
-      }
+      clearBtn.focus();
     }
   }
 

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

@@ -1223,8 +1223,6 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
-/* eslint-disable no-underscore-dangle */
-
 /**
  * Returns the clear button element from the active input's shadow
  * DOM, if available.
@@ -1282,52 +1280,24 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component, evt, ctx) {
+  Tab(component, _evt, ctx) {
     if (!ctx.isExpanded) {
       return;
     }
 
-    // Shift+Tab moves the highlight to the first non-disabled option
-    // without making a selection or closing the bib.
-    if (evt.shiftKey) {
-      evt.preventDefault();
-      const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
-      if (firstActive) {
-        component.menu.updateActiveOption(firstActive);
-      }
-      return;
-    }
-
     if (ctx.isModal) {
       if (!ctx.activeInput) {
         return;
       }
-
-      // Active option → select immediately and close the dialog.
-      // Flag the component so the close handler focuses the trigger's
-      // clear button instead of the input. Set flags before makeSelection
-      // because the value change triggers showBib via Lit's updated().
-      if (component.optionActive) {
-        evt.preventDefault();
-        component._focusClearBtnAfterClose = true;
-        component._clearBtnFocusPending = true;
-        component.menu.makeSelection();
-        component.hideBib();
-        return;
-      }
-
       const clearBtn = getClearBtn(ctx);
       const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
 
-      // No active option, input has a value, clear button not focused →
-      // move focus to the dialog's clear button.
+      // Tab from input: if clear button exists and doesn't have focus, focus it
       if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
-
         // Force clear button container visible to work around Safari not
         // propagating :focus-within through shadow DOM boundaries, which
         // causes .wrapper:not(:focus-within) to hide .notification.clear.
         const clearContainer = clearBtn.closest('.clear');
-
         if (clearContainer) {
           clearContainer.style.display = 'flex';
           clearBtn.addEventListener('focusout', () => {
@@ -1350,17 +1320,18 @@ const comboboxKeyboardStrategy = {
         return;
       }
 
-      // No active option, no clear button (or already focused) → just close.
+      // Tab from clear button (or no clear button / no value) →
+      // select the highlighted option if any, then close
+      if (component.optionActive) {
+        component.menu.makeSelection();
+      }
       component.hideBib();
       return;
     }
 
     // Non-fullscreen: select + close
-    if (component.optionActive) {
-      evt.preventDefault();
-      component._focusClearBtnAfterClose = true;
-      component._clearBtnFocusPending = true;
-      component.menu.makeSelection();
+    if (component.menu.optionActive && component.menu.optionActive.value) {
+      component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
   },
@@ -4455,6 +4426,17 @@ class AuroDropdownBib extends i$4 {
        */
       hasActiveDescendant: {
         type: Boolean
+      },
+
+      /**
+       * When true, the keyboard bridge allows native Tab behavior
+       * instead of intercepting it. Set this for bib consumers
+       * (e.g. counter) whose content contains real focusable elements
+       * that need native Tab navigation.
+       * @private
+       */
+      nativeFocusableContent: {
+        type: Boolean
       }
     };
   }
@@ -4621,6 +4603,12 @@ class AuroDropdownBib extends i$4 {
         }
       }
 
+      // Allow native Tab when the bib contains focusable content
+      // (e.g. counter buttons) that needs normal Tab navigation.
+      if (event.key === 'Tab' && this.nativeFocusableContent) {
+        return;
+      }
+
       event.preventDefault();
       event.stopPropagation();
       const newEvent = new KeyboardEvent('keydown', {
@@ -5011,7 +4999,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603270007';
+var formkitVersion$2 = '202603270129';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12775,7 +12763,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603270007';
+var formkitVersion$1 = '202603270129';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13814,7 +13802,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270129';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14824,12 +14812,6 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
-    // Suppress reopening the bib when a Tab selection is in progress —
-    // the value change from makeSelection triggers availableOptions update
-    // which calls showBib from updated(), but the bib should stay closed.
-    if (this._clearBtnFocusPending) {
-      return;
-    }
     if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
@@ -14900,38 +14882,7 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        const shouldFocusClearBtn = this._focusClearBtnAfterClose;
-        this._focusClearBtnAfterClose = false;
-
-        if (shouldFocusClearBtn) {
-          // Set a guard so duplicate toggle events don't call
-          // restoreTriggerAfterClose and steal focus from the clear button.
-          this._clearBtnFocusPending = true;
-
-          restoreTriggerAfterClose(this.dropdown, this.input);
-
-          if (this.input.componentHasFocus) {
-            // Desktop: input already has focus, redirect to clear button
-            // after restoreTriggerAfterClose's rAF settles.
-            requestAnimationFrame(() => {
-              this.setClearBtnFocus();
-              this._clearBtnFocusPending = false;
-            });
-          } else {
-            // Fullscreen: input will receive focus after dialog.close().
-            // Listen for that focus event then redirect to clear button.
-            const onFocus = () => {
-              this.input.removeEventListener('focusin', onFocus);
-              requestAnimationFrame(() => {
-                this.setClearBtnFocus();
-                this._clearBtnFocusPending = false;
-              });
-            };
-            this.input.addEventListener('focusin', onFocus);
-          }
-        } else if (!this._clearBtnFocusPending) {
-          restoreTriggerAfterClose(this.dropdown, this.input);
-        }
+        restoreTriggerAfterClose(this.dropdown, this.input);
       }
 
       if (this.dropdownOpen) {
@@ -15022,28 +14973,7 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      // Force the clear button container visible — without :focus-within
-      // the CSS rule `.wrapper:not(:focus-within) .notification.clear`
-      // hides the container with display:none, preventing focus.
-      const clearContainer = clearBtn.closest('.clear');
-
-      if (clearContainer) {
-        clearContainer.style.display = 'flex';
-        clearBtn.addEventListener('focusout', () => {
-          requestAnimationFrame(() => {
-            clearContainer.style.display = '';
-          });
-        }, { once: true });
-      }
-
-      // Focus the native button inside auro-button so the browser
-      // treats it as a real focusable element.
-      const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
-      if (nativeBtn) {
-        nativeBtn.focus();
-      } else {
-        clearBtn.focus();
-      }
+      clearBtn.focus();
     }
   }
 

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

@@ -428,8 +428,6 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private configureDropdown;
-    _focusClearBtnAfterClose: boolean;
-    _clearBtnFocusPending: boolean;
     bibtemplate: any;
     inputInBib: any;
     /**

package/components/combobox/dist/comboboxKeyboardStrategy.d.ts

@@ -1,6 +1,6 @@
 export namespace comboboxKeyboardStrategy {
     function Enter(component: any, evt: any, ctx: any): Promise<void>;
-    function Tab(component: any, evt: any, ctx: any): void;
+    function Tab(component: any, _evt: any, ctx: any): void;
     function ArrowUp(component: any, evt: any, ctx: any): void;
     function ArrowDown(component: any, evt: any, ctx: any): void;
 }