@aurodesignsystem-dev/auro-formkit 0.0.0-pr1346.2 → 0.0.0-pr1346.4

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

@@ -2906,7 +2906,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '9.1.2';
 
-var styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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 styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -2914,6 +2914,8 @@ var tokensCss$1 = i$2`:host(:not([ondark])),:host(:not([appearance=inverse])){--
 
 // 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 */
+// ---------------------------------------------------------------------
 
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
@@ -3089,22 +3091,63 @@ class AuroDropdownBib extends i {
     // Handle ESC key via dialog's cancel event
     const dialog = this.shadowRoot.querySelector('dialog');
     dialog.addEventListener('cancel', (event) => {
-      event.preventDefault(); // Let parent handle closing
+      // Let parent handle closing
+      event.preventDefault();
       this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
         bubbles: true,
         composed: true
       }));
     });
 
-    // Re-dispatch navigation keyboard events so they cross the shadow DOM
-    // boundary and reach the combobox/select key handlers.
-    // Only intercept keys used for menu navigation — let all other keys
-    // (characters, Backspace, etc.) through so typing in inputs works.
-    const navKeys = new Set(['ArrowUp', 'ArrowDown', 'Enter', 'Escape']);
+    // 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: NOT intercepted — left to the browser's native focus trap
+    //   provided by showModal(), which cycles Tab between focusable
+    //   elements inside the dialog (e.g. the input and close button).
+    //   Intercepting Tab would kill the native focus trap and break
+    //   focus management inside the dialog.
+    //
+    // - Escape: The native <dialog> fires a `cancel` event on ESC
+    //   (handled above), so the re-dispatched Escape is a secondary
+    //   path for parent components that also listen for Escape keydown.
+    const navKeys = new Set([
+      'ArrowUp',
+      'ArrowDown',
+      'Enter',
+      'Escape'
+    ]);
     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.
+      if (event.key === 'Enter') {
+        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', {
@@ -3128,9 +3171,55 @@ class AuroDropdownBib extends i {
   }
 
   /**
-   * Opens the dialog using showModal() for accessibility.
-   * @param {boolean} modal - If true, uses showModal() (default). If false, uses show().
+   * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+   *
+   * The showModal() function places the dialog in the browser's **top layer**,
+   * which is a separate rendering layer above the normal DOM. On mobile, the
+   * compositor processes visual-viewport panning before top-layer touch
+   * handling. This means the entire viewport — including the top-layer dialog
+   * — can be panned by a touch gesture, causing the page behind the dialog to
+   * scroll into view. To prevent this, we add a touchmove listener that cancels
+   * the event if the touch started outside the dialog or any scrollable child within it.
+   *
+   * @private
+   */
+  _lockTouchScroll() {
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    this._touchMoveHandler = (event) => {
+      // Walk the composed path (which crosses shadow DOM boundaries) to
+      // check whether the touch started inside a scrollable element that
+      // lives within the dialog.  If so, allow the scroll.
+      for (const el of event.composedPath()) {
+        if (el === dialog) {
+          // Reached the dialog boundary without finding a scrollable child.
+          break;
+        }
+        if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
+          const { overflowY } = getComputedStyle(el);
+          if (overflowY === 'auto' || overflowY === 'scroll') {
+            return;
+          }
+        }
+      }
+
+      event.preventDefault();
+    };
+
+    document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
+  }
+
+  /**
+   * Removes the touchmove listener added by _lockTouchScroll().
+   * @private
    */
+  _unlockTouchScroll() {
+    if (this._touchMoveHandler) {
+      document.removeEventListener('touchmove', this._touchMoveHandler);
+      this._touchMoveHandler = undefined;
+    }
+  }
+
   open(modal = true) {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && !dialog.open) {
@@ -3147,6 +3236,8 @@ class AuroDropdownBib extends i {
 
         documentElement.style.overflow = prevOverflow;
 
+        this._lockTouchScroll();
+
       } else {
         // Use setAttribute instead of dialog.show() to avoid the dialog
         // focusing steps which steal focus from the trigger and cause
@@ -3162,6 +3253,7 @@ class AuroDropdownBib extends i {
   close() {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && dialog.open) {
+      this._unlockTouchScroll();
       dialog.close();
     }
   }
@@ -3427,7 +3519,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 class AuroElement extends i {
   static get properties() {
@@ -3700,6 +3792,18 @@ class AuroDropdown extends AuroElement {
    */
   show() {
     this.floater.showBib();
+
+    // Open dialog synchronously so callers remain in the user gesture
+    // chain. This is critical for mobile browsers (iOS Safari) to keep
+    // the virtual keyboard open when transitioning from the trigger
+    // input to an input inside the fullscreen dialog. Without this,
+    // 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);
+    }
   }
 
   /**
@@ -4086,6 +4190,14 @@ class AuroDropdown extends AuroElement {
         this.bibElement.value.close();
       }
     }
+
+    // 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;
+      this.bibElement.value.close();
+      this.bibElement.value.open(useModal);
+    }
   }
 
   /**

package/components/dropdown/dist/auro-dropdownBib.d.ts

@@ -74,9 +74,25 @@ export class AuroDropdownBib extends LitElement {
     bibTemplate: any;
     firstUpdated(changedProperties: any): void;
     /**
-     * Opens the dialog using showModal() for accessibility.
-     * @param {boolean} modal - If true, uses showModal() (default). If false, uses show().
+     * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+     *
+     * The showModal() function places the dialog in the browser's **top layer**,
+     * which is a separate rendering layer above the normal DOM. On mobile, the
+     * compositor processes visual-viewport panning before top-layer touch
+     * handling. This means the entire viewport — including the top-layer dialog
+     * — can be panned by a touch gesture, causing the page behind the dialog to
+     * scroll into view. To prevent this, we add a touchmove listener that cancels
+     * the event if the touch started outside the dialog or any scrollable child within it.
+     *
+     * @private
+     */
+    private _lockTouchScroll;
+    _touchMoveHandler: (event: any) => void;
+    /**
+     * Removes the touchmove listener added by _lockTouchScroll().
+     * @private
      */
+    private _unlockTouchScroll;
     open(modal?: boolean): void;
     /**
      * Closes the dialog.

package/components/dropdown/dist/index.js

@@ -2815,7 +2815,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '9.1.2';
 
-var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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 styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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 = 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)}`;
 
@@ -2823,6 +2823,8 @@ var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--
 
 // 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 */
+// ---------------------------------------------------------------------
 
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
@@ -2998,22 +3000,63 @@ class AuroDropdownBib extends LitElement {
     // Handle ESC key via dialog's cancel event
     const dialog = this.shadowRoot.querySelector('dialog');
     dialog.addEventListener('cancel', (event) => {
-      event.preventDefault(); // Let parent handle closing
+      // Let parent handle closing
+      event.preventDefault();
       this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
         bubbles: true,
         composed: true
       }));
     });
 
-    // Re-dispatch navigation keyboard events so they cross the shadow DOM
-    // boundary and reach the combobox/select key handlers.
-    // Only intercept keys used for menu navigation — let all other keys
-    // (characters, Backspace, etc.) through so typing in inputs works.
-    const navKeys = new Set(['ArrowUp', 'ArrowDown', 'Enter', 'Escape']);
+    // 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: NOT intercepted — left to the browser's native focus trap
+    //   provided by showModal(), which cycles Tab between focusable
+    //   elements inside the dialog (e.g. the input and close button).
+    //   Intercepting Tab would kill the native focus trap and break
+    //   focus management inside the dialog.
+    //
+    // - Escape: The native <dialog> fires a `cancel` event on ESC
+    //   (handled above), so the re-dispatched Escape is a secondary
+    //   path for parent components that also listen for Escape keydown.
+    const navKeys = new Set([
+      'ArrowUp',
+      'ArrowDown',
+      'Enter',
+      'Escape'
+    ]);
     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.
+      if (event.key === 'Enter') {
+        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', {
@@ -3037,9 +3080,55 @@ class AuroDropdownBib extends LitElement {
   }
 
   /**
-   * Opens the dialog using showModal() for accessibility.
-   * @param {boolean} modal - If true, uses showModal() (default). If false, uses show().
+   * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+   *
+   * The showModal() function places the dialog in the browser's **top layer**,
+   * which is a separate rendering layer above the normal DOM. On mobile, the
+   * compositor processes visual-viewport panning before top-layer touch
+   * handling. This means the entire viewport — including the top-layer dialog
+   * — can be panned by a touch gesture, causing the page behind the dialog to
+   * scroll into view. To prevent this, we add a touchmove listener that cancels
+   * the event if the touch started outside the dialog or any scrollable child within it.
+   *
+   * @private
+   */
+  _lockTouchScroll() {
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    this._touchMoveHandler = (event) => {
+      // Walk the composed path (which crosses shadow DOM boundaries) to
+      // check whether the touch started inside a scrollable element that
+      // lives within the dialog.  If so, allow the scroll.
+      for (const el of event.composedPath()) {
+        if (el === dialog) {
+          // Reached the dialog boundary without finding a scrollable child.
+          break;
+        }
+        if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
+          const { overflowY } = getComputedStyle(el);
+          if (overflowY === 'auto' || overflowY === 'scroll') {
+            return;
+          }
+        }
+      }
+
+      event.preventDefault();
+    };
+
+    document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
+  }
+
+  /**
+   * Removes the touchmove listener added by _lockTouchScroll().
+   * @private
    */
+  _unlockTouchScroll() {
+    if (this._touchMoveHandler) {
+      document.removeEventListener('touchmove', this._touchMoveHandler);
+      this._touchMoveHandler = undefined;
+    }
+  }
+
   open(modal = true) {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && !dialog.open) {
@@ -3056,6 +3145,8 @@ class AuroDropdownBib extends LitElement {
 
         documentElement.style.overflow = prevOverflow;
 
+        this._lockTouchScroll();
+
       } else {
         // Use setAttribute instead of dialog.show() to avoid the dialog
         // focusing steps which steal focus from the trigger and cause
@@ -3071,6 +3162,7 @@ class AuroDropdownBib extends LitElement {
   close() {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && dialog.open) {
+      this._unlockTouchScroll();
       dialog.close();
     }
   }
@@ -3336,7 +3428,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3609,6 +3701,18 @@ class AuroDropdown extends AuroElement {
    */
   show() {
     this.floater.showBib();
+
+    // Open dialog synchronously so callers remain in the user gesture
+    // chain. This is critical for mobile browsers (iOS Safari) to keep
+    // the virtual keyboard open when transitioning from the trigger
+    // input to an input inside the fullscreen dialog. Without this,
+    // 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);
+    }
   }
 
   /**
@@ -3995,6 +4099,14 @@ class AuroDropdown extends AuroElement {
         this.bibElement.value.close();
       }
     }
+
+    // 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;
+      this.bibElement.value.close();
+      this.bibElement.value.open(useModal);
+    }
   }
 
   /**

package/components/dropdown/dist/registered.js

@@ -2815,7 +2815,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '9.1.2';
 
-var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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 styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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 = 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)}`;
 
@@ -2823,6 +2823,8 @@ var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--
 
 // 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 */
+// ---------------------------------------------------------------------
 
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
@@ -2998,22 +3000,63 @@ class AuroDropdownBib extends LitElement {
     // Handle ESC key via dialog's cancel event
     const dialog = this.shadowRoot.querySelector('dialog');
     dialog.addEventListener('cancel', (event) => {
-      event.preventDefault(); // Let parent handle closing
+      // Let parent handle closing
+      event.preventDefault();
       this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
         bubbles: true,
         composed: true
       }));
     });
 
-    // Re-dispatch navigation keyboard events so they cross the shadow DOM
-    // boundary and reach the combobox/select key handlers.
-    // Only intercept keys used for menu navigation — let all other keys
-    // (characters, Backspace, etc.) through so typing in inputs works.
-    const navKeys = new Set(['ArrowUp', 'ArrowDown', 'Enter', 'Escape']);
+    // 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: NOT intercepted — left to the browser's native focus trap
+    //   provided by showModal(), which cycles Tab between focusable
+    //   elements inside the dialog (e.g. the input and close button).
+    //   Intercepting Tab would kill the native focus trap and break
+    //   focus management inside the dialog.
+    //
+    // - Escape: The native <dialog> fires a `cancel` event on ESC
+    //   (handled above), so the re-dispatched Escape is a secondary
+    //   path for parent components that also listen for Escape keydown.
+    const navKeys = new Set([
+      'ArrowUp',
+      'ArrowDown',
+      'Enter',
+      'Escape'
+    ]);
     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.
+      if (event.key === 'Enter') {
+        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', {
@@ -3037,9 +3080,55 @@ class AuroDropdownBib extends LitElement {
   }
 
   /**
-   * Opens the dialog using showModal() for accessibility.
-   * @param {boolean} modal - If true, uses showModal() (default). If false, uses show().
+   * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+   *
+   * The showModal() function places the dialog in the browser's **top layer**,
+   * which is a separate rendering layer above the normal DOM. On mobile, the
+   * compositor processes visual-viewport panning before top-layer touch
+   * handling. This means the entire viewport — including the top-layer dialog
+   * — can be panned by a touch gesture, causing the page behind the dialog to
+   * scroll into view. To prevent this, we add a touchmove listener that cancels
+   * the event if the touch started outside the dialog or any scrollable child within it.
+   *
+   * @private
+   */
+  _lockTouchScroll() {
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    this._touchMoveHandler = (event) => {
+      // Walk the composed path (which crosses shadow DOM boundaries) to
+      // check whether the touch started inside a scrollable element that
+      // lives within the dialog.  If so, allow the scroll.
+      for (const el of event.composedPath()) {
+        if (el === dialog) {
+          // Reached the dialog boundary without finding a scrollable child.
+          break;
+        }
+        if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
+          const { overflowY } = getComputedStyle(el);
+          if (overflowY === 'auto' || overflowY === 'scroll') {
+            return;
+          }
+        }
+      }
+
+      event.preventDefault();
+    };
+
+    document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
+  }
+
+  /**
+   * Removes the touchmove listener added by _lockTouchScroll().
+   * @private
    */
+  _unlockTouchScroll() {
+    if (this._touchMoveHandler) {
+      document.removeEventListener('touchmove', this._touchMoveHandler);
+      this._touchMoveHandler = undefined;
+    }
+  }
+
   open(modal = true) {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && !dialog.open) {
@@ -3056,6 +3145,8 @@ class AuroDropdownBib extends LitElement {
 
         documentElement.style.overflow = prevOverflow;
 
+        this._lockTouchScroll();
+
       } else {
         // Use setAttribute instead of dialog.show() to avoid the dialog
         // focusing steps which steal focus from the trigger and cause
@@ -3071,6 +3162,7 @@ class AuroDropdownBib extends LitElement {
   close() {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && dialog.open) {
+      this._unlockTouchScroll();
       dialog.close();
     }
   }
@@ -3336,7 +3428,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3609,6 +3701,18 @@ class AuroDropdown extends AuroElement {
    */
   show() {
     this.floater.showBib();
+
+    // Open dialog synchronously so callers remain in the user gesture
+    // chain. This is critical for mobile browsers (iOS Safari) to keep
+    // the virtual keyboard open when transitioning from the trigger
+    // input to an input inside the fullscreen dialog. Without this,
+    // 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);
+    }
   }
 
   /**
@@ -3995,6 +4099,14 @@ class AuroDropdown extends AuroElement {
         this.bibElement.value.close();
       }
     }
+
+    // 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;
+      this.bibElement.value.close();
+      this.bibElement.value.open(useModal);
+    }
   }
 
   /**