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

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

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

@@ -1214,33 +1214,13 @@ function guardTouchPassthrough(element) {
  *
  * @param {HTMLElement} dropdown - The `auro-dropdown` element.
  * @param {HTMLElement} focusTarget - The element to focus (e.g. trigger or input).
- * @param {Function} [onAfterRestore] - Optional callback invoked instead of focusing
- *   `focusTarget`. Use when the caller needs a custom post-close focus target while
- *   still delegating all trigger-restoration cleanup to this function.
- *   When provided, `inert` removal is deferred to inside the rAF so that
- *   `dialog.close()`'s synchronous focus restoration (which runs in a Lit
- *   microtask before the rAF) cannot move focus back to the trigger and
- *   trigger a spurious VoiceOver announcement before the callback's custom
- *   focus target takes over.
  */
-function restoreTriggerAfterClose(dropdown, focusTarget, onAfterRestore) {
-  // Default path: clear inert immediately so the trigger is focusable when
-  // the rAF fires. With no callback there is no custom focus target, so
-  // dialog.close() restoring focus to the trigger is fine.
-  if (!onAfterRestore) {
-    dropdown.trigger.inert = false;
-  }
+function restoreTriggerAfterClose(dropdown, focusTarget) {
+  dropdown.trigger.inert = false;
 
   requestAnimationFrame(() => {
     if (!dropdown.isPopoverVisible) {
-      if (typeof onAfterRestore === 'function') {
-        // Defer inert removal to here so dialog.close() (microtask) cannot
-        // restore focus to the trigger before the callback's target takes over.
-        dropdown.trigger.inert = false;
-        onAfterRestore();
-      } else {
-        focusTarget.focus();
-      }
+      focusTarget.focus();
     }
   });
 }
@@ -1322,7 +1302,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 +1332,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,10 +1343,11 @@ const comboboxKeyboardStrategy = {
     }
 
     if (ctx.isExpanded && component.optionActive) {
+      component.menu.makeSelection();
+      await component.updateComplete;
       evt.preventDefault();
       evt.stopPropagation();
-      component._pendingClearBtnFocus = true;
-      component.menu.makeSelection();
+      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.
@@ -1395,16 +1375,67 @@ const comboboxKeyboardStrategy = {
       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.
+      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', () => {
+            // Delay cleanup so :focus-within settles when focus moves
+            // to a sibling (e.g., Shift+Tab back to the input).
+            requestAnimationFrame(() => {
+              clearContainer.style.display = '';
+            });
+          }, { once: true });
+        }
+
+        // Focus the native button inside auro-button so the browser
+        // treats it as a real focusable element inside the dialog.
+        const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
+        if (nativeBtn) {
+          nativeBtn.focus();
+        } else {
+          clearBtn.focus();
+        }
+        return;
+      }
+
+      // No active option, no clear button (or already focused) → just close.
+      component.hideBib();
+      return;
+    }
+
+    // Non-fullscreen: select + close
     if (component.optionActive) {
       evt.preventDefault();
-      component._pendingClearBtnFocus = true;
+      component._focusClearBtnAfterClose = true;
+      component._clearBtnFocusPending = true;
       component.menu.makeSelection();
-      // Do NOT call hideBib() here — makeSelection() defers it via
-      // auroMenu-selectedOption's setTimeout(hideBib). Calling hideBib()
-      // synchronously sets isPopoverVisible=false, causing
-      // handleInputValueChange's Lit microtask to call showBib() (iOS guard),
-      // re-opening the dialog and trapping focus before setClearBtnFocus fires.
-      return;
     }
     component.hideBib();
   },
@@ -4807,6 +4838,7 @@ class AuroDropdownBib extends i$4 {
     return u$7`
       <dialog class="${e$3(classes)}" part="bibContainer" role="${o(this.dialogRole)}" aria-labelledby="${o(this.dialogLabel ? 'dialogLabel' : undefined)}">
         ${this.dialogLabel ? u$7`<span id="dialogLabel" class="util_displayHiddenVisually">${this.dialogLabel}</span>` : ''}
+        <span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
         <slot></slot>
       </dialog>
     `;
@@ -5055,7 +5087,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603262115';
+var formkitVersion$2 = '202603262341';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12819,7 +12851,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603262115';
+var formkitVersion$1 = '202603262341';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13858,7 +13890,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603262115';
+var formkitVersion = '202603262341';
 
 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}`;
 
@@ -14290,7 +14322,6 @@ class AuroCombobox extends AuroElement {
     this.dropdownOpen = false;
     this.triggerExpandedState = false;
     this._expandedTimeout = null;
-    this._pendingClearBtnFocus = false;
     this._inFullscreenTransition = false;
     this.errorMessage = null;
     this.isHiddenWhileLoading = false;
@@ -14869,6 +14900,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;
@@ -14924,6 +14961,11 @@ class AuroCombobox extends AuroElement {
       // Clear aria-activedescendant when dropdown closes
       if (!this.dropdownOpen && this.input) {
         this.input.setActiveDescendant(null);
+        // Also clear on inputInBib since fullscreen mode sets
+        // aria-activedescendant on both inputs.
+        if (this.inputInBib) {
+          this.inputInBib.setActiveDescendant(null);
+        }
         this.optionActive = null;
 
         // Remove the highlighted state from all menu options so re-opening
@@ -14939,25 +14981,36 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        if (this._pendingClearBtnFocus) {
-          this._pendingClearBtnFocus = false;
-
-          // Delegate all trigger-restoration cleanup to restoreTriggerAfterClose
-          // (inert, and any future ARIA/tabindex work), but override the final
-          // focus target via the callback. setTimeout(0) inside the rAF ensures
-          // setClearBtnFocus() wins after all Lit update microtasks and the
-          // dialog.close() native focus restoration have fully settled.
-          restoreTriggerAfterClose(this.dropdown, this.input, () => {
-            setTimeout(() => {
-              // Only move focus to the clear button if this component is still
-              // connected and the dropdown has not been reopened in the meantime.
-              if (!this.isConnected || this.dropdownOpen) {
-                return;
-              }
+        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();
-            }, 0);
-          });
-        } else {
+              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);
         }
       }
@@ -15049,40 +15102,27 @@ class AuroCombobox extends AuroElement {
    */
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
-    if (!clearBtn) {
-      return;
-    }
-
-    // .notification.clear is hidden by CSS when the wrapper lacks :focus-within.
-    // Force it visible so the native button is focusable, then clean up on blur.
-    const clearContainer = clearBtn.closest('.clear');
-
-    if (clearContainer) {
-      clearContainer.style.display = 'flex';
-    }
-    const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
-
-    if (nativeBtn) {
-      nativeBtn.focus();
-    } else {
-      clearBtn.focus();
-    }
-
-    // If focus failed (e.g. element inert, disabled, or hidden for another reason),
-    // clean up the inline style immediately so the clear UI does not stay visible.
-    const focusLanded = clearBtn.shadowRoot
-      ? clearBtn.shadowRoot.activeElement !== null
-      : document.activeElement === clearBtn;
-
-    if (clearContainer) {
-      if (focusLanded) {
+    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 {
-        clearContainer.style.display = '';
+        clearBtn.focus();
       }
     }
   }
@@ -15235,6 +15275,13 @@ class AuroCombobox extends AuroElement {
         this.input.setActiveDescendant(this.optionActive);
       }
 
+      // In fullscreen mode, focus is on inputInBib inside the dialog, so
+      // aria-activedescendant must also be set there for screen readers to
+      // follow the active option from the focused element.
+      if (this.inputInBib && this.dropdown.isBibFullscreen) {
+        this.inputInBib.setActiveDescendant(this.optionActive);
+      }
+
       // Announce the active option for screen readers including position,
       // since shadow DOM boundaries prevent native reading of
       // aria-setsize/aria-posinset via aria-activedescendant.
@@ -15243,7 +15290,17 @@ class AuroCombobox extends AuroElement {
         const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
         const optionIndex = this.availableOptions.indexOf(this.optionActive) + 1;
         const optionCount = this.availableOptions.length;
-        announceToScreenReader(this.shadowRoot, `${optionText}${selectedState}, ${optionIndex} of ${optionCount}`);
+
+        // In fullscreen mode the combobox's live region is outside the modal
+        // dialog and inert, so route announcements to the bib's live region
+        // which is inside the dialog.
+        const bibEl = this.dropdown.bibElement && this.dropdown.bibElement.value;
+        const bibShadowRoot = bibEl && bibEl.shadowRoot;
+        const announcementRoot = this.dropdown.isBibFullscreen && bibShadowRoot
+          ? bibShadowRoot
+          : this.shadowRoot;
+
+        announceToScreenReader(announcementRoot, `${optionText}${selectedState}, ${optionIndex} of ${optionCount}`);
       }
 
       // Check if user prefers reduced motion for accessibility