@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.15 → 0.0.0-pr1408.17

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

@@ -1125,7 +1125,13 @@ function guardTouchPassthrough(element) {
 }
 
 /**
- * Restores the dropdown trigger after a fullscreen dialog closes.
+ * Restores the dropdown trigger after a fullscreen dialog closes
+ * when focus doesn't leave the component (e.g. using Esc or Enter keys).
+ * When leaving the component (e.g., tabbing out of the combobox after closing
+ * the fullscreen dialog), focus restoration is handled by the browser's native
+ * dialog focus restoration behavior, so this function only restores focus
+ * when focus remains inside the component after the dialog closes.
+
  *
  * Removes the `inert` attribute from the trigger so it is accessible again,
  * and restores focus to the given target after one animation frame. The rAF
@@ -1141,8 +1147,11 @@ function guardTouchPassthrough(element) {
 function restoreTriggerAfterClose(dropdown, focusTarget) {
   dropdown.trigger.inert = false;
 
+  // Wait a frame so that dialog.close() has completed and the browser's
+  // native focus restoration has run before we attempt to focus the
+  // trigger / input programmatically.
   requestAnimationFrame(() => {
-    if (!dropdown.isPopoverVisible) {
+    if (!dropdown.isPopoverVisible && dropdown.trigger.contains(document.activeElement)) {
       focusTarget.focus();
     }
   });
@@ -1165,7 +1174,7 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
  * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
  *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
  */
-function createDisplayContext(component, options = {}) {
+function createDisplayContext$1(component, options = {}) {
   const dd = options.dropdown || component.dropdown;
   // isPopoverVisible reflects as the `open` attribute.
   // It reports whether the bib is open in any mode (popover or modal).
@@ -1195,11 +1204,11 @@ function createDisplayContext(component, options = {}) {
  * @param {Object} strategy - Map of key names to handler functions.
  * @param {Object} [options] - Optional config passed to createDisplayContext.
  */
-function applyKeyboardStrategy(component, strategy, options = {}) {
+function applyKeyboardStrategy$1(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
     if (typeof handler === 'function') {
-      const ctx = createDisplayContext(component, options);
+      const ctx = createDisplayContext$1(component, options);
       await handler(component, evt, ctx);
     }
   });
@@ -1249,102 +1258,32 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
   if (!clearBtn) {
     return false;
   }
-  return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+  const isFocused = Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+  return isFocused;
 }
 
 const comboboxKeyboardStrategy = {
-  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
-    // block the browser's built-in "Enter activates focused button" behavior.
+  ArrowDown(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowDown normally.
     if (isClearBtnFocused(ctx)) {
-      evt.stopPropagation();
       return;
     }
 
-    if (ctx.isExpanded && component.optionActive) {
-      component.menu.makeSelection();
-      await component.updateComplete;
-      evt.preventDefault();
-      evt.stopPropagation();
-      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.
-      // This is safe because showBib() opens the dialog programmatically,
-      // not via event propagation.
-      evt.preventDefault();
-      evt.stopPropagation();
-      component.showBib();
-    }
-  },
-
-  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;
-      }
-      const clearBtn = getClearBtn(ctx);
-      const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
-
-      // 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', () => {
-            // 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 });
-        }
+    // option display and navigation are prevented if there are no available options
+    if (component.availableOptions.length > 0) {
+      // navigate if bib is open otherwise open it
+      if (component.dropdown.isPopoverVisible) {
+        evt.preventDefault();
 
-        // 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();
+        if (evt.altKey || evt.metaKey) {
+          component.activateLastEnabledAvailableOption();
         } else {
-          clearBtn.focus();
+          navigateArrow(component, 'down');
         }
-        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();
+      } else {
+        component.showBib();
       }
-      component.hideBib();
-      return;
-    }
-
-    // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
-      component.menu.value = component.menu.optionActive.value;
     }
-    component.hideBib();
   },
 
   ArrowUp(component, evt, ctx) {
@@ -1353,31 +1292,85 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
+    // option display and navigation are prevented if there are no available options
     if (component.availableOptions.length > 0) {
-      component.showBib();
+      // navigate if bib is open otherwise open it
+      if (component.dropdown.isPopoverVisible) {
+        evt.preventDefault();
+
+        if (evt.altKey || evt.metaKey) {
+          component.activateFirstEnabledAvailableOption();
+        } else {
+          navigateArrow(component, 'up');
+        }
+      } else {
+        component.showBib();
+      }
     }
-    // Read live visibility — ctx.isExpanded was computed before showBib() above,
-    // so it wouldn't reflect the state change.
-    if (component.dropdown.isPopoverVisible) {
+  },
+
+  End(component, evt, ctx) {
+    if (ctx.isExpanded) {
       evt.preventDefault();
-      navigateArrow(component, 'up');
+      evt.stopPropagation();
+      component.activateLastEnabledAvailableOption();
     }
   },
 
-  ArrowDown(component, evt, ctx) {
-    // If the clear button has focus, let the browser handle ArrowDown normally.
+  Enter(component, evt, ctx) {
     if (isClearBtnFocused(ctx)) {
-      return;
-    }
+      // 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
+      // block the browser's built-in "Enter activates focused button" behavior.
+      evt.stopPropagation();
+    } else if (ctx.isExpanded && component.menu.optionActive) {
+      component.menu.makeSelection();
 
-    if (component.availableOptions.length > 0) {
+      if (ctx.isModal) {
+        component.setTriggerInputFocus();
+      }
+
+      evt.preventDefault();
+      evt.stopPropagation();
+    } else {
+      // Prevent the keypress from bubbling to parent containers (e.g., forms)
+      // which could interpret Enter as a submit or trigger other unintended behavior.
+      // This is safe because showBib() opens the dialog programmatically,
+      // not via event propagation.
+      evt.preventDefault();
+      evt.stopPropagation();
       component.showBib();
     }
-    // Read live visibility — ctx.isExpanded was computed before showBib() above,
-    // so it wouldn't reflect the state change.
-    if (component.dropdown.isPopoverVisible) {
+  },
+
+  Escape(component, _evt, ctx) {
+    if (ctx.isExpanded && ctx.isModal) {
+      component.setTriggerInputFocus();
+    }
+  },
+
+  Home(component, evt, ctx) {
+    if (ctx.isExpanded) {
       evt.preventDefault();
-      navigateArrow(component, 'down');
+      evt.stopPropagation();
+      component.activateFirstEnabledAvailableOption();
+    }
+  },
+
+  Tab(component, evt, ctx) {
+    if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
+      // ClearBtn will not bubble up tab key events when it's focused, so need to manage it here when focused
+      component.menu.makeSelection();
+      component.hideBib();
+
+      // In fullscreen modal mode, closing the dialog does not
+      // automatically restores focus to the input. In the tab case,
+      // Explicitly move focus to the trigger's clear button so the
+      // user can continues tabbing through the page normally.
+      if (ctx.isModal && !evt.shiftKey) {
+        component.setClearBtnFocus();
+      }
     }
   },
 };
@@ -3195,6 +3188,11 @@ class AuroFloatingUI {
     this.clickHandler = null;
     this.keyDownHandler = null;
 
+    /**
+     * @private
+     */
+    this.enableKeyboardHandling = true;
+
     /**
      * @private
      */
@@ -3455,11 +3453,10 @@ class AuroFloatingUI {
       return;
     }
 
-    const { activeElement } = document;
     // if focus is still inside of trigger or bib, do not close
     if (
-      this.element.contains(activeElement) ||
-      this.element.bib?.contains(activeElement)
+      this.element.matches(":focus") ||
+      this.element.matches(":focus-within")
     ) {
       return;
     }
@@ -3530,7 +3527,9 @@ class AuroFloatingUI {
       document.addEventListener("focusin", this.focusHandler);
     }
 
-    document.addEventListener("keydown", this.keyDownHandler);
+    if (this.enableKeyboardHandling) {
+      document.addEventListener("keydown", this.keyDownHandler);
+    }
 
     // send this task to the end of queue to prevent conflicting
     // it conflicts if showBib gets call from a button that's not this.element.trigger
@@ -3786,8 +3785,9 @@ class AuroFloatingUI {
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
   }
 
-  configure(elem, eventPrefix) {
+  configure(elem, eventPrefix, enableKeyboardHandling = true) {
     AuroFloatingUI.setupMousePressChecker();
+    this.enableKeyboardHandling = enableKeyboardHandling;
 
     this.eventPrefix = eventPrefix;
     if (this.element !== elem) {
@@ -3820,7 +3820,9 @@ class AuroFloatingUI {
 
     this.handleEvent = this.handleEvent.bind(this);
     if (this.element.trigger) {
-      this.element.trigger.addEventListener("keydown", this.handleEvent);
+      if (this.enableKeyboardHandling) {
+        this.element.trigger.addEventListener("keydown", this.handleEvent);
+      }
       this.element.trigger.addEventListener("click", this.handleEvent);
       this.element.trigger.addEventListener("mouseenter", this.handleEvent);
       this.element.trigger.addEventListener("mouseleave", this.handleEvent);
@@ -4298,12 +4300,83 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$3 = '9.1.2';
 
+/**
+ * Computes display state once per keydown event.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return ctx;
+}
+
+/**
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
+ * Handles both sync and async handlers.
+ * @param {HTMLElement} component - The component to attach the listener to.
+ * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
+ */
+function applyKeyboardStrategy(component, strategy, options = {}) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
+    }
+  });
+}
+
 var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
 var tokensCss$1$2 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
 
+/**
+ * Creates a keyboard strategy for dialog-specific key handling.
+ * All other keydown behavior is left to the browser's native bubbling path.
+ * @param {HTMLElement} bib - The dropdown bib element.
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
+ */
+// eslint-disable-next-line no-unused-vars
+function createDropdownBibKeyboardStrategy(bib) {
+  return {
+    // eslint-disable-next-line no-unused-vars
+    Enter(_dialog, event) {
+      // Floating UI handles Enter key to open the dropdown
+    },
+    // eslint-disable-next-line no-unused-vars
+    Escape(_dialog, event) {
+      // Floating UI handles Escape key to close the dropdown
+    }
+  };
+}
+
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 /* eslint-disable max-lines */
@@ -4428,11 +4501,7 @@ class AuroDropdownBib extends i$4 {
       },
 
       /**
-       * Set by auro-dropdown when a menu option is highlighted via
-       * aria-activedescendant. The dialog keyboard bridge checks this
-       * flag so that Enter selects the highlighted option instead of
-       * activating the focused interactive element (e.g. the trigger
-       * button, or the bibtemplate close button in fullscreen).
+       * Tracks whether a menu option is currently highlighted.
        * @private
        */
       hasActiveDescendant: {
@@ -4506,7 +4575,7 @@ class AuroDropdownBib extends i$4 {
 
     const dialog = this.shadowRoot.querySelector('dialog');
     this._setupCancelHandler(dialog);
-    this._setupKeyboardBridge(dialog);
+    applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
 
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -4533,92 +4602,6 @@ class AuroDropdownBib extends i$4 {
     });
   }
 
-  /**
-   * showModal() creates a closed focus scope — keyboard events inside
-   * the dialog's shadow DOM do NOT bubble out to the combobox/select
-   * keydown handlers in the parent shadow DOM. This handler bridges
-   * that gap by re-dispatching navigation keys so they cross the
-   * shadow boundary and reach the menu navigation logic in the parent
-   * component.
-   *
-   * The trade-off: intercepting these keys means native keyboard
-   * behaviors that would normally "just work" must be manually
-   * re-implemented here:
-   *
-   * - Enter on buttons: Custom elements (auro-button) don't get the
-   *   native Enter→click that <button> provides, so we call .click()
-   *   directly when Enter is pressed on a button-like element.
-   *
-   * - Tab: Intercepted and re-dispatched so parent components
-   *   (select/combobox) can select the active option and close the
-   *   dialog. The <dialog> provides containment and isolation
-   *   (inert background, VoiceOver focus trapping, top layer), while
-   *   the content inside is a role="listbox" navigated via
-   *   aria-activedescendant (options are not focusable). Tab keyboard
-   *   behavior follows listbox conventions (select + close) because
-   *   the dialog's native Tab trap only cycles between the close
-   *   button and browser chrome.
-   *
-   * - Escape: The native <dialog> fires a `cancel` event on ESC
-   *   (handled by _setupCancelHandler), so the re-dispatched Escape
-   *   is a secondary path for parent components that also listen for
-   *   Escape keydown.
-   *
-   * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
-   * @private
-   */
-  _setupKeyboardBridge(dialog) {
-    const navKeys = new Set([
-      'ArrowUp',
-      'ArrowDown',
-      'Enter',
-      'Escape',
-      'Tab'
-    ]);
-
-    dialog.addEventListener('keydown', (event) => {
-      if (!navKeys.has(event.key)) {
-        return;
-      }
-
-      // Custom elements (auro-button) don't get the native Enter→click
-      // behavior that <button> has. Find the button in the composed path
-      // and click it directly — but only when no menu option is
-      // highlighted. In fullscreen mode focus stays on the close button
-      // while arrow keys move the active-descendant highlight through
-      // the listbox. If the user presses Enter with an option
-      // highlighted, the intent is to select that option, not to click
-      // the close button. In that case we fall through and bridge the
-      // Enter key to the parent component's keyboard strategy.
-      if (event.key === 'Enter') {
-        if (!this.hasActiveDescendant) {
-          const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
-          const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
-          if (btn) {
-            event.preventDefault();
-            event.stopPropagation();
-            btn.click();
-            return;
-          }
-        }
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
-      const newEvent = new KeyboardEvent('keydown', {
-        key: event.key,
-        code: event.code,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      });
-      this.dispatchEvent(newEvent);
-    });
-  }
 
   /**
    * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
@@ -4993,7 +4976,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603310527';
+var formkitVersion$2 = '202604031704';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -5174,7 +5157,7 @@ class AuroDropdown extends AuroElement$2 {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
-    this.disableFocusTrap = false;
+    this.disableKeyboardHandling = false;
     this.error = false;
     this.tabIndex = 0;
     this.noToggle = false;
@@ -5272,9 +5255,8 @@ class AuroDropdown extends AuroElement$2 {
     // showModal() fires asynchronously via Lit's update cycle, which
     // falls outside the user activation window and causes iOS to
     // dismiss the keyboard.
-    if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
-      const useModal = !this.disableFocusTrap;
-      this.bibElement.value.open(useModal);
+    if (this.bibElement && this.bibElement.value) {
+      this.bibElement.value.open(this.isBibFullscreen);
     }
   }
 
@@ -5388,9 +5370,9 @@ class AuroDropdown extends AuroElement$2 {
       },
 
       /**
-       * If declared, the focus trap inside of bib will be turned off.
+       * If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
        */
-      disableFocusTrap: {
+      disableKeyboardHandling: {
         type: Boolean,
         reflect: true
       },
@@ -5668,7 +5650,7 @@ class AuroDropdown extends AuroElement$2 {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        const useModal = this.isBibFullscreen && !this.disableFocusTrap;
+        const useModal = this.isBibFullscreen;
         this.bibElement.value.open(useModal);
       } else {
         this.bibElement.value.close();
@@ -5678,7 +5660,7 @@ class AuroDropdown extends AuroElement$2 {
     // When fullscreen strategy changes while open, re-open dialog with correct mode
     // (e.g. resizing from desktop → mobile while dropdown is open)
     if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
-      const useModal = this.isBibFullscreen && !this.disableFocusTrap;
+      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
       this.bibElement.value.open(useModal);
     }
@@ -5700,7 +5682,7 @@ class AuroDropdown extends AuroElement$2 {
 
   firstUpdated() {
     // Configure the floater to, this will generate the ID for the bib
-    this.floater.configure(this, 'auroDropdown');
+    this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
 
     // Prevent `contain: layout` on the dropdown host. Layout containment
     // creates a containing block for position:fixed descendants (the bib),
@@ -5790,7 +5772,7 @@ class AuroDropdown extends AuroElement$2 {
    * @private
    */
   updateFocusTrap() {
-    if (this.isPopoverVisible && !this.disableFocusTrap) {
+    if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
         // Desktop: show() doesn't trap focus, so use FocusTrap
         this.focusTrap = new FocusTrap(this.bibContent);
@@ -6008,6 +5990,7 @@ class AuroDropdown extends AuroElement$2 {
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
+          aria-disabled="${o(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
           @blur="${this.handleFocusOut}">
           <div class="triggerContentWrapper" id="triggerLabel">
@@ -11734,6 +11717,12 @@ class BaseInput extends AuroElement$1 {
     this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
+    this.clearBtn = this.clearButtonRef.value;
+
+    // This must get moved into inputKeyboardStrategy when implemented
+    this.clearBtn.addEventListener('keydown', (evt) => {
+      evt.stopPropagation();
+    });
 
     this.patchInputEvent(this.inputElement);
 
@@ -12757,7 +12746,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603310527';
+var formkitVersion$1 = '202604031704';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12814,6 +12803,11 @@ class AuroInput extends BaseInput {
      * @private
      */
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, _$2);
+
+    /**
+     * @private
+     */
+    this.clearButtonRef = e$1();
   }
 
   static get styles() {
@@ -12831,6 +12825,19 @@ class AuroInput extends BaseInput {
     ];
   }
 
+  /**
+   * Returns classmap configuration for the clear button visibility.
+   * The button is hidden when the input has no value, is read-only, or is disabled.
+   * @private
+   * @returns {Record<string, boolean>} - Classmap object controlling clear button display state.
+   */
+  get clearBtnClassMap() {
+    return {
+      'util_displayHidden': !this.hasValue || this.readyOnly || this.disabled
+    };
+  }
+
+
   /**
    * Determines if the HTML input element should be visually hidden.
    * Returns true when display value content exists without focus and has a value,
@@ -13150,10 +13157,11 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           appearance="${this.onDark ? 'inverse' : this.appearance}"
-          class="notificationBtn clearBtn"
+          class="notificationBtn clearBtn ${e$3(this.clearBtnClassMap)}"
           shape="circle"
           size="sm"
-          variant="ghost">
+          variant="ghost"
+          ${n$2(this.clearButtonRef)}>
           <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
             aria-hidden="true"
@@ -13298,11 +13306,7 @@ class AuroInput extends BaseInput {
         <div part="accent-right" class="accents right">
           ${this.renderValidationErrorIconHtml()}
           ${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
-          ${this.hasValue ? u$7`
-            ${!this.disabled && !this.readonly ? u$7`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
@@ -13334,11 +13338,7 @@ class AuroInput extends BaseInput {
           ${this.layout.includes('right') || this.layout === "emphasized" ? u$7`
             ${this.renderValidationErrorIconHtml()}
           ` : undefined}
-          ${this.hasValue ? u$7`
-            ${!this.disabled && !this.readonly ? u$7`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="${e$3(this.helpTextClasses)}" part="inputHelpText">
@@ -13366,11 +13366,7 @@ class AuroInput extends BaseInput {
         </div>
         <div class="accents right">
           ${this.renderValidationErrorIconHtml()}
-          ${this.hasValue ? u$7`
-            ${!this.disabled && !this.readonly ? u$7`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
@@ -13796,7 +13792,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603310527';
+var formkitVersion = '202604031704';
 
 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}`;
 
@@ -14275,6 +14271,7 @@ class AuroCombobox extends AuroElement {
 
       /**
        * Array of available options to display in the dropdown.
+       * This array contains all non-hidden options (e.g., hidden by filtering on input value).
        * @private
        */
       availableOptions: {
@@ -14652,12 +14649,40 @@ class AuroCombobox extends AuroElement {
     AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCombobox);
   }
 
+  /**
+   * Mark the first available (non-hidden), enabled option as `active`.
+   * @private
+   * @returns {void}
+   */
+  activateFirstEnabledAvailableOption() {
+    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled);
+    this.updateActiveOption(firstEnabledOptionIndex);
+  }
+
+  /**
+   * Mark the last available (non-hidden), enabled option as `active`.
+   * @private
+   * @returns {void}
+   */
+  activateLastEnabledAvailableOption() {
+    let lastEnabledOptionIndex = -1;
+
+    // Work backwards through the available options array to find the last enabled option
+    for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
+      if (!this.availableOptions[index].disabled) {
+        lastEnabledOptionIndex = index;
+        break;
+      }
+    }
+
+    this.updateActiveOption(lastEnabledOptionIndex);
+  }
+
   /**
    * Updates the filter for the available options based on the input value.
    * @private
    */
   updateFilter() {
-
     // Reset available options if noFilter is set to false after being true.
     if (this.noFilter) {
       this.availableOptions = [...this.options];
@@ -14776,6 +14801,10 @@ class AuroCombobox extends AuroElement {
     if (this.value && this.input.value && !this.menu.value) {
       this.syncValuesAndStates();
     }
+
+    if (!this.availableOptions.includes(this.menu.optionActive)) {
+      this.activateFirstEnabledAvailableOption();
+    }
   }
 
   /**
@@ -14849,9 +14878,6 @@ class AuroCombobox extends AuroElement {
       if (this.dropdownOpen) {
         const expandedDelay = 150;
         this._expandedTimeout = setTimeout(() => {
-          if (!this.value) {
-            this.updateActiveOption(0);
-          }
           this.triggerExpandedState = true;
         }, expandedDelay);
       } else {
@@ -14861,22 +14887,16 @@ class AuroCombobox extends AuroElement {
       // Clear aria-activedescendant when dropdown closes
       if (!this.dropdownOpen && this.input) {
         this.input.setActiveDescendant(null);
-        this.optionActive = null;
-
-        // Remove the highlighted state from all menu options so re-opening
-        // the dropdown doesn't show a stale highlight.
-        if (this.options) {
-          this.options.forEach((opt) => {
-            opt.active = false;
-            opt.classList.remove('active');
-          });
-        }
 
         // Restore pointer events on the menu in case they were disabled
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        restoreTriggerAfterClose(this.dropdown, this.input);
+        // When closing a fullscreen bib, restore focus to the trigger so that
+        // keyboard navigation continues from the correct place in the page
+        if (this.dropdown.isBibFullscreen) {
+          restoreTriggerAfterClose(this.dropdown, this.input);
+        }
       }
 
       if (this.dropdownOpen) {
@@ -14911,13 +14931,6 @@ class AuroCombobox extends AuroElement {
             this.setInputFocus();
             this._inFullscreenTransition = false;
           });
-        } else {
-          // wait a frame in case the bib gets hidden immediately after showing because there is no value
-          setTimeout(() => {
-            if (this.componentHasFocus) {
-              this.setInputFocus();
-            }
-          }, 0);
         }
       }
     });
@@ -14967,7 +14980,25 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      clearBtn.focus();
+      // Wait for the element to fully render across
+      // multiple Lit update cycles before moving focus
+      doubleRaf(() => {
+        clearBtn.focus();
+      });
+    }
+  }
+
+  /**
+   * @private
+   */
+  setTriggerInputFocus() {
+    const input = this.input.shadowRoot.querySelector('input');
+    if (input) {
+      // Wait for the element to fully render across
+      // multiple Lit update cycles before moving focus
+      doubleRaf(() => {
+        input.focus();
+      });
     }
   }
 
@@ -15290,7 +15321,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    applyKeyboardStrategy(this, comboboxKeyboardStrategy, {
+    applyKeyboardStrategy$1(this, comboboxKeyboardStrategy, {
       // In modal mode the input moves into the bib; route keyboard events to that element instead.
       inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
     });
@@ -16299,7 +16330,7 @@ class AuroMenuOption extends AuroElement {
     });
 
     return u$7`
-      <div class="${classes}">
+      <div class="${classes}" aria-disabled="${this.disabled ? 'true' : 'false'}">
         ${this.selected && !this.noCheckmark
         ? this.generateIconHtml(checkmarkIcon.svg)
         : undefined}
@@ -17070,10 +17101,10 @@ class AuroMenu extends AuroElement {
 
     // Event Bindings
 
-    /**
-     * @private
-     */
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    // /**
+    //  * @private
+    //  */
+    // this.handleKeyDown = this.handleKeyDown.bind(this);
 
 
     /**
@@ -17422,7 +17453,7 @@ class AuroMenu extends AuroElement {
 
     this.provideContext();
 
-    this.addEventListener('keydown', this.handleKeyDown);
+    // this.addEventListener('keydown', this.handleKeyDown);
     this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
     this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.addEventListener('slotchange', this.handleSlotChange);
@@ -17430,7 +17461,7 @@ class AuroMenu extends AuroElement {
   }
 
   disconnectedCallback() {
-    this.removeEventListener('keydown', this.handleKeyDown);
+    // this.removeEventListener('keydown', this.handleKeyDown);
     this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
     this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.removeEventListener('slotchange', this.handleSlotChange);
@@ -17571,26 +17602,33 @@ class AuroMenu extends AuroElement {
 
   // Event Handlers
 
-  /**
-   * Handles keyboard navigation.
-   * @private
-   * @param {KeyboardEvent} event - Event object from the browser.
-   */
-  handleKeyDown(event) {
-    event.preventDefault();
-    switch (event.key) {
-      case "ArrowDown":
-        this.menuService.highlightNext();
-        break;
-      case "ArrowUp":
-        this.menuService.highlightPrevious();
-        break;
-      case "Tab":
-      case "Enter":
-        this.menuService.selectHighlightedOption();
-        break;
-    }
-  }
+  // /**
+  //  * Handles keyboard navigation.
+  //  * @private
+  //  * @param {KeyboardEvent} event - Event object from the browser.
+  //  */
+  // handleKeyDown(event) {
+  //   // Update to Chris keyboard handler
+  //   // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
+  //   event.preventDefault();
+  //   switch (event.key) {
+  //     case "ArrowDown":
+  //       console.warn("ArrowDown key is pressed and heard from menu");
+  //       this.menuService.highlightNext();
+  //       break;
+  //     case "ArrowUp":
+  //       console.warn("ArrowUp key is pressed and heard from menu");
+  //       this.menuService.highlightPrevious();
+  //       break;
+  //     case "Tab":
+  //     case "Enter":
+  //       this.menuService.selectHighlightedOption();
+  //       // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
+  //       break;
+  //     default:
+  //       break;
+  //   }
+  // }
 
   /**
    * Navigates the menu options in the specified direction.