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

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

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603271959';
+var formkitVersion = '202603280001';
 
 // 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 = '202603271959';
+var formkitVersion = '202603280001';
 
 // 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 = '202603271959';
+var formkitVersion = '202603280001';
 
 // 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 = '202603271959';
+var formkitVersion = '202603280001';
 
 // 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

@@ -1201,27 +1201,6 @@ function guardTouchPassthrough(element) {
   }, { once: true });
 }
 
-/**
- * Closes the fullscreen dialog element synchronously.
- *
- * When a dropdown closes, Lit's async update cycle may call `dialog.close()`
- * too late — the browser's native focus restoration (back to `document.body`)
- * can race with the `requestAnimationFrame` in {@link restoreTriggerAfterClose},
- * stealing focus back to `body` after it was already placed on the trigger.
- *
- * Calling this *before* `restoreTriggerAfterClose` ensures the dialog's native
- * focus restore fires first, so the rAF wins the race.
- *
- * @param {HTMLElement} dropdown - The `auro-dropdown` element whose bib may
- *   contain a `<dialog>`.
- */
-function closeFullscreenDialog(dropdown) {
-  const bibEl = dropdown.bibElement && dropdown.bibElement.value;
-  if (bibEl) {
-    bibEl.close();
-  }
-}
-
 /**
  * Restores the dropdown trigger after a fullscreen dialog closes.
  *
@@ -1321,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.
@@ -1353,7 +1330,7 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
 }
 
 const comboboxKeyboardStrategy = {
-  Enter(component, evt, ctx) {
+  async 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
@@ -1364,15 +1341,11 @@ const comboboxKeyboardStrategy = {
     }
 
     if (ctx.isExpanded && component.optionActive) {
+      component.menu.makeSelection();
+      await component.updateComplete;
       evt.preventDefault();
       evt.stopPropagation();
-      // 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();
+      component.setClearBtnFocus();
     } else {
       // Prevent the keypress from bubbling to parent containers (e.g., forms)
       // which could interpret Enter as a submit or trigger other unintended behavior.
@@ -1404,32 +1377,15 @@ 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);
 
-      // 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', () => {
@@ -1452,17 +1408,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();
   },
@@ -5113,7 +5070,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603271959';
+var formkitVersion$2 = '202603280001';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12877,7 +12834,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603271959';
+var formkitVersion$1 = '202603280001';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13916,7 +13873,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603271959';
+var formkitVersion = '202603280001';
 
 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}`;
 
@@ -14926,12 +14883,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;
@@ -15002,40 +14953,7 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        closeFullscreenDialog(this.dropdown);
-
-        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) {
@@ -15126,28 +15044,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

@@ -1124,27 +1124,6 @@ function guardTouchPassthrough(element) {
   }, { once: true });
 }
 
-/**
- * Closes the fullscreen dialog element synchronously.
- *
- * When a dropdown closes, Lit's async update cycle may call `dialog.close()`
- * too late — the browser's native focus restoration (back to `document.body`)
- * can race with the `requestAnimationFrame` in {@link restoreTriggerAfterClose},
- * stealing focus back to `body` after it was already placed on the trigger.
- *
- * Calling this *before* `restoreTriggerAfterClose` ensures the dialog's native
- * focus restore fires first, so the rAF wins the race.
- *
- * @param {HTMLElement} dropdown - The `auro-dropdown` element whose bib may
- *   contain a `<dialog>`.
- */
-function closeFullscreenDialog(dropdown) {
-  const bibEl = dropdown.bibElement && dropdown.bibElement.value;
-  if (bibEl) {
-    bibEl.close();
-  }
-}
-
 /**
  * Restores the dropdown trigger after a fullscreen dialog closes.
  *
@@ -1244,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.
@@ -1276,7 +1253,7 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
 }
 
 const comboboxKeyboardStrategy = {
-  Enter(component, evt, ctx) {
+  async 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
@@ -1287,15 +1264,11 @@ const comboboxKeyboardStrategy = {
     }
 
     if (ctx.isExpanded && component.optionActive) {
+      component.menu.makeSelection();
+      await component.updateComplete;
       evt.preventDefault();
       evt.stopPropagation();
-      // 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();
+      component.setClearBtnFocus();
     } else {
       // Prevent the keypress from bubbling to parent containers (e.g., forms)
       // which could interpret Enter as a submit or trigger other unintended behavior.
@@ -1327,32 +1300,15 @@ 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);
 
-      // 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', () => {
@@ -1375,17 +1331,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();
   },
@@ -5036,7 +4993,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603271959';
+var formkitVersion$2 = '202603280001';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12800,7 +12757,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603271959';
+var formkitVersion$1 = '202603280001';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13839,7 +13796,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603271959';
+var formkitVersion = '202603280001';
 
 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}`;
 
@@ -14849,12 +14806,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;
@@ -14925,40 +14876,7 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        closeFullscreenDialog(this.dropdown);
-
-        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) {
@@ -15049,28 +14967,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,5 +1,5 @@
 export namespace comboboxKeyboardStrategy {
-    function Enter(component: any, evt: any, ctx: any): void;
+    function Enter(component: any, evt: any, ctx: any): Promise<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;