@aurodesignsystem-dev/auro-formkit 0.0.0-pr1404.0 → 0.0.0-pr1405.0

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

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603271802';
+var formkitVersion = '202603271850';
 
 // 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 = '202603271802';
+var formkitVersion = '202603271850';
 
 // 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 = '202603271802';
+var formkitVersion = '202603271850';
 
 // 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 = '202603271802';
+var formkitVersion = '202603271850';
 
 // 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,6 +1300,8 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/* eslint-disable no-underscore-dangle */
+
 /**
  * Returns the clear button element from the active input's shadow
  * DOM, if available.
@@ -1330,7 +1332,7 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
 }
 
 const comboboxKeyboardStrategy = {
-  async Enter(component, evt, ctx) {
+  Enter(component, evt, ctx) {
     // If the clear button has focus, let the browser activate it normally.
     // stopPropagation prevents parent containers (e.g., forms) from treating
     // Enter as a submit, but we must NOT call preventDefault — that would
@@ -1341,11 +1343,15 @@ const comboboxKeyboardStrategy = {
     }
 
     if (ctx.isExpanded && component.optionActive) {
-      component.menu.makeSelection();
-      await component.updateComplete;
       evt.preventDefault();
       evt.stopPropagation();
-      component.setClearBtnFocus();
+      // Set flags before makeSelection so the showBib guard and the
+      // auroDropdown-toggled close handler both see them when the value
+      // change propagates through Lit's microtask update cycle.
+      component._focusClearBtnAfterClose = true;
+      component._clearBtnFocusPending = true;
+      component.menu.makeSelection();
+      component.hideBib();
     } else {
       // Prevent the keypress from bubbling to parent containers (e.g., forms)
       // which could interpret Enter as a submit or trigger other unintended behavior.
@@ -1377,15 +1383,32 @@ const comboboxKeyboardStrategy = {
       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);
 
-      // Tab from input: if clear button exists and doesn't have focus, focus it
+      // No active option, input has a value, clear button not focused →
+      // move focus to the dialog's clear button.
       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', () => {
@@ -1408,18 +1431,17 @@ const comboboxKeyboardStrategy = {
         return;
       }
 
-      // Tab from clear button (or no clear button / no value) →
-      // select the highlighted option if any, then close
-      if (component.optionActive) {
-        component.menu.makeSelection();
-      }
+      // No active option, no clear button (or already focused) → just close.
       component.hideBib();
       return;
     }
 
     // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
-      component.menu.value = component.menu.optionActive.value;
+    if (component.optionActive) {
+      evt.preventDefault();
+      component._focusClearBtnAfterClose = true;
+      component._clearBtnFocusPending = true;
+      component.menu.makeSelection();
     }
     component.hideBib();
   },
@@ -5070,7 +5092,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603271802';
+var formkitVersion$2 = '202603271850';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12834,7 +12856,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603271802';
+var formkitVersion$1 = '202603271850';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13873,7 +13895,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603271802';
+var formkitVersion = '202603271850';
 
 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}`;
 
@@ -14883,6 +14905,12 @@ 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;
@@ -14953,7 +14981,49 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        restoreTriggerAfterClose(this.dropdown, this.input);
+        // Close the fullscreen dialog synchronously so the browser's native
+        // focus restoration (back to document.body) happens NOW, before the
+        // rAF in restoreTriggerAfterClose. Without this, dialog.close() runs
+        // in Lit's async update cycle and can race with the rAF — in some
+        // browsers the dialog steals focus back to body AFTER the rAF has
+        // already placed it on the trigger input.
+        const bibEl = this.dropdown.bibElement && this.dropdown.bibElement.value;
+        if (bibEl) {
+          bibEl.close();
+        }
+
+        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);
+        }
       }
 
       if (this.dropdownOpen) {
@@ -15044,7 +15114,28 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      clearBtn.focus();
+      // 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();
+      }
     }
   }
 
@@ -17399,10 +17490,6 @@ class AuroMenu extends AuroElement {
    * @protected
    */
   provideContext() {
-    if (!this.rootMenu) {
-      return;
-    }
-
     this.menuService = new MenuService({host: this});
     this.menuService.setProperties(this.propertyValues);
     this.menuService.subscribe(this.handleMenuChange.bind(this));
@@ -17494,10 +17581,6 @@ class AuroMenu extends AuroElement {
   connectedCallback() {
     super.connectedCallback();
 
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-    }
-
     this.provideContext();
 
     this.addEventListener('keydown', this.handleKeyDown);
@@ -17589,9 +17672,9 @@ class AuroMenu extends AuroElement {
       if (this.multiSelect) {
         this.setAttribute('aria-multiselectable', 'true');
       }
-    }
 
-    this.handleNestedMenus(this);
+      this.handleNestedMenus(this);
+    }
   }
 
   /**
@@ -17635,8 +17718,6 @@ class AuroMenu extends AuroElement {
     if (menu.level > 0) {
       menu.setAttribute('role', 'group');
       menu.removeAttribute("root");
-      menu.menuService = menu.parentElement.menuService;
-      menu._contextProvider = menu.parentElement._contextProvider;
       if (!menu.hasAttribute('aria-label')) {
         menu.setAttribute('aria-label', 'submenu');
       }
@@ -17690,6 +17771,10 @@ class AuroMenu extends AuroElement {
    * @private
    */
   handleSlotChange() {
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+    }
+
     if (this.rootMenu) {
       this.initializeMenu();
     }

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

@@ -1223,6 +1223,8 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/* eslint-disable no-underscore-dangle */
+
 /**
  * Returns the clear button element from the active input's shadow
  * DOM, if available.
@@ -1253,7 +1255,7 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
 }
 
 const comboboxKeyboardStrategy = {
-  async Enter(component, evt, ctx) {
+  Enter(component, evt, ctx) {
     // If the clear button has focus, let the browser activate it normally.
     // stopPropagation prevents parent containers (e.g., forms) from treating
     // Enter as a submit, but we must NOT call preventDefault — that would
@@ -1264,11 +1266,15 @@ const comboboxKeyboardStrategy = {
     }
 
     if (ctx.isExpanded && component.optionActive) {
-      component.menu.makeSelection();
-      await component.updateComplete;
       evt.preventDefault();
       evt.stopPropagation();
-      component.setClearBtnFocus();
+      // Set flags before makeSelection so the showBib guard and the
+      // auroDropdown-toggled close handler both see them when the value
+      // change propagates through Lit's microtask update cycle.
+      component._focusClearBtnAfterClose = true;
+      component._clearBtnFocusPending = true;
+      component.menu.makeSelection();
+      component.hideBib();
     } else {
       // Prevent the keypress from bubbling to parent containers (e.g., forms)
       // which could interpret Enter as a submit or trigger other unintended behavior.
@@ -1300,15 +1306,32 @@ const comboboxKeyboardStrategy = {
       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);
 
-      // Tab from input: if clear button exists and doesn't have focus, focus it
+      // No active option, input has a value, clear button not focused →
+      // move focus to the dialog's clear button.
       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', () => {
@@ -1331,18 +1354,17 @@ const comboboxKeyboardStrategy = {
         return;
       }
 
-      // Tab from clear button (or no clear button / no value) →
-      // select the highlighted option if any, then close
-      if (component.optionActive) {
-        component.menu.makeSelection();
-      }
+      // No active option, no clear button (or already focused) → just close.
       component.hideBib();
       return;
     }
 
     // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
-      component.menu.value = component.menu.optionActive.value;
+    if (component.optionActive) {
+      evt.preventDefault();
+      component._focusClearBtnAfterClose = true;
+      component._clearBtnFocusPending = true;
+      component.menu.makeSelection();
     }
     component.hideBib();
   },
@@ -4993,7 +5015,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603271802';
+var formkitVersion$2 = '202603271850';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12757,7 +12779,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603271802';
+var formkitVersion$1 = '202603271850';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13796,7 +13818,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603271802';
+var formkitVersion = '202603271850';
 
 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}`;
 
@@ -14806,6 +14828,12 @@ 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;
@@ -14876,7 +14904,49 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        restoreTriggerAfterClose(this.dropdown, this.input);
+        // Close the fullscreen dialog synchronously so the browser's native
+        // focus restoration (back to document.body) happens NOW, before the
+        // rAF in restoreTriggerAfterClose. Without this, dialog.close() runs
+        // in Lit's async update cycle and can race with the rAF — in some
+        // browsers the dialog steals focus back to body AFTER the rAF has
+        // already placed it on the trigger input.
+        const bibEl = this.dropdown.bibElement && this.dropdown.bibElement.value;
+        if (bibEl) {
+          bibEl.close();
+        }
+
+        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);
+        }
       }
 
       if (this.dropdownOpen) {
@@ -14967,7 +15037,28 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      clearBtn.focus();
+      // 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();
+      }
     }
   }
 
@@ -17322,10 +17413,6 @@ class AuroMenu extends AuroElement {
    * @protected
    */
   provideContext() {
-    if (!this.rootMenu) {
-      return;
-    }
-
     this.menuService = new MenuService({host: this});
     this.menuService.setProperties(this.propertyValues);
     this.menuService.subscribe(this.handleMenuChange.bind(this));
@@ -17417,10 +17504,6 @@ class AuroMenu extends AuroElement {
   connectedCallback() {
     super.connectedCallback();
 
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-    }
-
     this.provideContext();
 
     this.addEventListener('keydown', this.handleKeyDown);
@@ -17512,9 +17595,9 @@ class AuroMenu extends AuroElement {
       if (this.multiSelect) {
         this.setAttribute('aria-multiselectable', 'true');
       }
-    }
 
-    this.handleNestedMenus(this);
+      this.handleNestedMenus(this);
+    }
   }
 
   /**
@@ -17558,8 +17641,6 @@ class AuroMenu extends AuroElement {
     if (menu.level > 0) {
       menu.setAttribute('role', 'group');
       menu.removeAttribute("root");
-      menu.menuService = menu.parentElement.menuService;
-      menu._contextProvider = menu.parentElement._contextProvider;
       if (!menu.hasAttribute('aria-label')) {
         menu.setAttribute('aria-label', 'submenu');
       }
@@ -17613,6 +17694,10 @@ class AuroMenu extends AuroElement {
    * @private
    */
   handleSlotChange() {
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+    }
+
     if (this.rootMenu) {
       this.initializeMenu();
     }

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

@@ -428,6 +428,8 @@ 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,5 +1,5 @@
 export namespace comboboxKeyboardStrategy {
-    function Enter(component: any, evt: any, ctx: any): Promise<void>;
+    function Enter(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;