@aurodesignsystem-dev/auro-formkit 0.0.0-pr1398.2 → 0.0.0-pr1398.3

package/components/combobox/demo/keyboardBehavior.md

@@ -0,0 +1,308 @@
+<auro-header level="1" id="overview">Combobox - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+  <div class="mainContent">
+    <div class="scrollWrapper">
+      <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+      <p>The component trigger contains an <code>&lt;auro-input&gt;</code> which has two focusable elements:</p>
+      <ol>
+        <li><strong>Input</strong></li>
+        <li><strong>Clear button:</strong> only shown when the input has a value.</li>
+      </ol>
+      <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
+      <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
+      <p>On <strong>large viewport devices</strong> (e.g., desktop browser, tablet) there is no focusable content inside the component bib.</p>
+      <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which may be tabbed through naturally.</p>
+      <auro-header level="2" id="keyEvents">Key Events</auro-header>
+      <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
+      <!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+      <div class="note">
+        <p><strong>Static vs Dynamic Option List:</strong> The <strong>expanded</strong> state can never be applied without list options rendered into the DOM. Since the component supports dynamic option lists generated <em>after</em> a value is typed into the <strong>input</strong>, certain key events (as noted in the <strong>Current State</strong> column of the table below) only function with the option list rendered into the DOM.</p>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Modifier</th>
+            <th>Current State</th>
+            <th>Focus Element</th>
+            <th>Behavior</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td rowspan="6">ArrowDown</td>
+            <td rowspan="2">-</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+            </td>
+            <td>Opens the bib.</td>
+          </tr>
+          <tr>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs depending on viewport size.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the next enabled option in the list. If the current <code>focused</code> option is the last enabled option, selection wraps to the first enabled option.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2">Command</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+            </td>
+            <td>Opens the bib.</td>
+          </tr>
+          <tr>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the last enabled option in the list.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2">Option</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+            </td>
+            <td>Opens the bib.</td>
+          </tr>
+          <tr>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the last enabled option in the list.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="6">ArrowUp</td>
+            <td rowspan="2">-</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+            </td>
+            <td>Opens the bib.</td>
+          </tr>
+          <tr>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the previous enabled option in the list. If the current <code>focused</code> option is the first enabled option, selection wraps to the last enabled option.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2">Command</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+            </td>
+            <td>Opens the bib.</td>
+          </tr>
+          <tr>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2">Option</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+            </td>
+            <td>Opens the bib.</td>
+          </tr>
+          <tr>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+            </td>
+          </tr>
+          <tr>
+            <td>End</td>
+            <td>-</td>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the last enabled option in the list.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="6">Enter</td>
+            <td rowspan="6">-</td>
+            <td>Collapsed, list options have been populated</td>
+            <td>
+              Trigger input, <strong>NOT</strong> the input clear button
+            </td>
+            <td>
+             The bib is opened.
+            </td>
+          </tr>
+          <tr>
+            <td>Collapsed</td>
+            <td>
+              Input clear button, <strong>NOT</strong> the input element
+            </td>
+            <td>
+              The <strong>input</strong> value is cleared, <strong>focus</strong> moves to the trigger input element.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2">Expanded, large viewport device</td>
+            <td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+            </td>
+            <td>
+              The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Trigger input close button, <strong>NOT</strong> the trigger input 
+            </td>
+            <td>
+              The input value is cleared and <strong>focus</strong> is moved to the trigger input element.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2">Expanded, small viewport device</td>
+            <td>
+              Dialog input element, <strong>NOT</strong> the dialog input clear button
+            </td>
+            <td>
+              The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Dialog input clear button, <strong>NOT</strong> the dialog input element
+            </td>
+            <td>
+              The <strong>input</strong> value is cleared, <strong>focus</strong> moves to the dialog input element.
+            </td>
+          </tr>
+          <tr>
+            <td>Escape</td>
+            <td>-</td>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Closes the bib, moves <strong>focus</strong> to the trigger input element.
+            </td>
+          </tr>
+          <tr>
+            <td>Home</td>
+            <td>-</td>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="3">Tab</td>
+            <td rowspan="2">-</td>
+            <td rowspan="2">Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Input clear button, <strong>NOT</strong> the input element
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content input clear buttons.
+              </div>
+            </td>
+            <td>
+              <span style="background-color: pink; color: red;">&nbsp;What do we do here?&nbsp;&nbsp;</span>
+            </td>
+          </tr>
+          <tr>
+            <td>Shift</td>
+            <td>Expanded</td>
+            <td>
+              Input element, <strong>NOT</strong> the input clear button
+              <div class="note">
+                <strong>Note:</strong> Includes both trigger and bib content inputs.
+              </div>
+            </td>
+            <td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+              <div class="note">
+                <strong>Note:</strong> the bib will <strong>NOT</strong> close and the page will <strong>NOT</strong> navigate to the previous focusable element in the tabindex order.
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <!-- AURO-GENERATED-CONTENT:END -->
+      <div class="note">
+        <p><strong>Note:</strong> The following keyboard behavior is unsupported at this time:</p>
+        <ul>
+          <li><strong>PageUp:</strong> The browser moves the <code>focused</code> option up by approximately one <strong>page</strong> of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly focused option is brought into view, usually aligning near the top of the visible list.</li>
+          <li><strong>PageDown:</strong> The browser advances the <code>focused</code> option down by approximately one <strong>page</strong> of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly focused option is brought into view, often aligning near the bottom of the visible list.</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+## DEVELOPER NOTES / CODE ACTION ITEMS / TODO ITEMS
+1. Remove the bridge for keyboard event bubbling out of the bib
+1. Prevent auro-dropdown `Enter` and `Space` key behavior for opening and closing the bib.
+1. Strip out key event listeners not listed in this document

package/components/combobox/dist/index.js

@@ -1122,7 +1122,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).
@@ -1152,11 +1152,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);
     }
   });
@@ -3388,11 +3388,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;
     }
@@ -4231,12 +4230,83 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$2 = '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 = css`: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 = css`.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$1 = css`: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 */
@@ -4361,26 +4431,11 @@ class AuroDropdownBib extends LitElement {
       },
 
       /**
-       * 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: {
         type: Boolean
-      },
-
-      /**
-       * When true, the keyboard bridge allows native Tab behavior
-       * instead of intercepting it. Set this for bib consumers
-       * (e.g. counter) whose content contains real focusable elements
-       * that need native Tab navigation.
-       * @private
-       */
-      nativeFocusableContent: {
-        type: Boolean
       }
     };
   }
@@ -4450,7 +4505,7 @@ class AuroDropdownBib extends LitElement {
 
     const dialog = this.shadowRoot.querySelector('dialog');
     this._setupCancelHandler(dialog);
-    this._setupKeyboardBridge(dialog);
+    applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
 
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -4477,98 +4532,6 @@ class AuroDropdownBib extends LitElement {
     });
   }
 
-  /**
-   * 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;
-          }
-        }
-      }
-
-      // Allow native Tab when the bib contains focusable content
-      // (e.g. counter buttons) that needs normal Tab navigation.
-      if (event.key === 'Tab' && this.nativeFocusableContent) {
-        return;
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
-      const newEvent = new KeyboardEvent('keydown', {
-        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.
@@ -4943,7 +4906,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202603271519';
+var formkitVersion$2 = '202604012043';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -5124,7 +5087,6 @@ class AuroDropdown extends AuroElement$2 {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
-    this.disableFocusTrap = false;
     this.error = false;
     this.tabIndex = 0;
     this.noToggle = false;
@@ -5222,9 +5184,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);
     }
   }
 
@@ -5337,14 +5298,6 @@ class AuroDropdown extends AuroElement$2 {
         reflect: true
       },
 
-      /**
-       * If declared, the focus trap inside of bib will be turned off.
-       */
-      disableFocusTrap: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -5618,7 +5571,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();
@@ -5628,7 +5581,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);
     }
@@ -5740,7 +5693,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);
@@ -12700,7 +12653,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202603271519';
+var formkitVersion$1 = '202604012043';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13739,7 +13692,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202603271519';
+var formkitVersion = '202604012043';
 
 var styleCss$1 = css`.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}`;
 
@@ -15233,7 +15186,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),
     });