@aurodesignsystem/auro-formkit 5.10.0 → 5.11.0

package/components/combobox/dist/index.js

@@ -1,6 +1,8 @@
 import { css, LitElement, html as html$1 } from 'lit';
 import { unsafeStatic, literal, html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
+import 'lit-html';
+import 'lit-html/directives/unsafe-html.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -884,7 +886,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -908,7 +910,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -999,6 +1001,233 @@ let AuroFormValidation$1 = class AuroFormValidation {
   }
 };
 
+/**
+ * Announces text to screen readers via an `aria-live` region inside the given shadow root.
+ *
+ * Expects the shadow root to contain an element with `id="srAnnouncement"`.
+ * The text is cleared and re-set inside a `requestAnimationFrame` so that
+ * repeated identical announcements still fire, and is cleared again after
+ * {@link ANNOUNCEMENT_DURATION_MS} so VoiceOver cannot swipe to stale text.
+ *
+ * @param {ShadowRoot} shadowRoot - The shadow root containing the live region.
+ * @param {string} text - The text to announce.
+ */
+
+const ANNOUNCEMENT_DURATION_MS = 1000;
+
+function announceToScreenReader(shadowRoot, text) {
+  const liveRegion = shadowRoot.querySelector('#srAnnouncement');
+  if (liveRegion) {
+    // Clear and re-set to ensure the announcement fires even with same text
+    liveRegion.textContent = '';
+    requestAnimationFrame(() => {
+      liveRegion.textContent = text;
+
+      // Clear after the announcement so VoiceOver cannot swipe to stale text
+      setTimeout(() => {
+        liveRegion.textContent = '';
+      }, ANNOUNCEMENT_DURATION_MS);
+    });
+  }
+}
+
+/**
+ * Schedules a callback after two animation frames.
+ *
+ * Used when opening a fullscreen dialog to wait for the dialog to render
+ * (first frame) and then for a Lit update cycle to complete (second frame)
+ * before performing an action like focusing the close button.
+ *
+ * @param {Function} fn - The callback to execute after two animation frames.
+ */
+function doubleRaf(fn) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(fn);
+  });
+}
+
+/**
+ * Prevents touch pass-through when a fullscreen dialog opens on a touch device.
+ *
+ * On coarse-pointer devices (phones / tablets), the tap that opens the
+ * fullscreen dialog can "pass through" to content beneath the finger —
+ * the touchstart opens the dialog, but the finger is still on the screen,
+ * so the subsequent touchend / click lands on whatever element sits at
+ * those coordinates (e.g. a menu option or calendar cell), selecting it
+ * unintentionally. This does NOT happen with mouse clicks because
+ * showModal() promotes the dialog to the top layer synchronously and the
+ * click has already completed.
+ *
+ * Guard: only activates on devices whose primary input is coarse.
+ * Laptops with a touchscreen report `pointer: fine` (trackpad / mouse is
+ * primary) so they are unaffected. Re-enables on the next touchstart,
+ * which is the user's first deliberate gesture inside the dialog.
+ *
+ * @param {HTMLElement} element - The element to disable pointer events on
+ *   (e.g. the menu or calendar wrapper).
+ */
+function guardTouchPassthrough(element) {
+  if (!element || !window.matchMedia('(pointer: coarse)').matches) return;
+
+  element.style.pointerEvents = 'none';
+  document.addEventListener('touchstart', () => {
+    element.style.pointerEvents = '';
+  }, { once: true });
+}
+
+/**
+ * Restores the dropdown trigger after a fullscreen 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
+ * delay lets Lit's microtask update cycle call `dialog.close()` first —
+ * without it the browser's native dialog focus restoration can conflict.
+ *
+ * The focus is only applied if the dropdown is still closed at the time the
+ * rAF fires, guarding against a rapid close-then-reopen race.
+ *
+ * @param {HTMLElement} dropdown - The `auro-dropdown` element.
+ * @param {HTMLElement} focusTarget - The element to focus (e.g. trigger or input).
+ */
+function restoreTriggerAfterClose(dropdown, focusTarget) {
+  dropdown.trigger.inert = false;
+
+  if (dropdown.isBibFullscreen) {
+    requestAnimationFrame(() => {
+      if (!dropdown.isPopoverVisible) {
+        focusTarget.focus();
+      }
+    });
+  }
+}
+
+/**
+ * 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.
+ */
+function applyKeyboardStrategy(component, strategy) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (handler) {
+      await handler(component, evt);
+    }
+  });
+}
+
+/**
+ * Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
+ * Optionally opens dropdown via showFn when closed.
+ * @param {HTMLElement} component - The component with dropdown and menu references.
+ * @param {string} direction - 'up' or 'down'.
+ * @param {Object} [options] - Optional config.
+ * @param {Function} [options.showFn] - Called to open the dropdown when closed.
+ */
+function navigateArrow(component, direction, options = {}) {
+  if (component.dropdown.isPopoverVisible) {
+    component.menu.navigateOptions(direction);
+  } else if (options.showFn) {
+    options.showFn();
+  }
+}
+
+const comboboxKeyboardStrategy = {
+  async Enter(component, evt) {
+    // If the clear button has focus, let the browser activate it normally.
+    const clearBtn = component.input.shadowRoot.querySelector('.clearBtn');
+    if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
+      return;
+    }
+
+    if (component.dropdown.isPopoverVisible && component.optionActive) {
+      component.menu.makeSelection();
+      await component.updateComplete;
+      evt.preventDefault();
+      evt.stopPropagation();
+      component.setClearBtnFocus();
+    } else {
+      component.showBib();
+    }
+  },
+
+  Tab(component) {
+    if (!component.dropdown.isPopoverVisible) {
+      return;
+    }
+
+    if (component.dropdown.isBibFullscreen) {
+      const clearBtn = component.inputInBib.shadowRoot.querySelector('.clearBtn');
+
+      // Use shadowRoot.activeElement to detect focus inside auro-button,
+      // since Safari does not propagate :focus-within through shadow DOM.
+      const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null;
+
+      // Tab from input: if clear button exists and doesn't have focus, focus it
+      if (clearBtn && !clearBtnHasFocus && component.inputInBib.value) {
+        // Force clear button container visible to work around Safari not
+        // propagating :focus-within through shadow DOM boundaries, which
+        // causes .wrapper:not(:focus-within) to hide .notification.clear.
+        const clearContainer = clearBtn.closest('.clear');
+        if (clearContainer) {
+          clearContainer.style.display = 'flex';
+          clearBtn.addEventListener('focusout', () => {
+            // Delay cleanup so :focus-within settles when focus moves
+            // to a sibling (e.g., Shift+Tab back to the input).
+            requestAnimationFrame(() => {
+              clearContainer.style.display = '';
+            });
+          }, { once: true });
+        }
+
+        // Focus the native button inside auro-button so the browser
+        // treats it as a real focusable element inside the dialog.
+        const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
+        if (nativeBtn) {
+          nativeBtn.focus();
+        } else {
+          clearBtn.focus();
+        }
+        return;
+      }
+
+      // Tab from clear button (or no clear button / no value) →
+      // select the highlighted option if any, then close
+      if (component.optionActive) {
+        component.menu.makeSelection();
+      }
+      component.hideBib();
+      return;
+    }
+
+    // Non-fullscreen: select + close
+    if (component.menu.optionActive && component.menu.optionActive.value) {
+      component.menu.value = component.menu.optionActive.value;
+    }
+    component.hideBib();
+  },
+
+  ArrowUp(component, evt) {
+    if (component.availableOptions.length > 0) {
+      component.showBib();
+    }
+    if (component.dropdown.isPopoverVisible) {
+      evt.preventDefault();
+      navigateArrow(component, 'up');
+    }
+  },
+
+  ArrowDown(component, evt) {
+    if (component.availableOptions.length > 0) {
+      component.showBib();
+    }
+    if (component.dropdown.isPopoverVisible) {
+      evt.preventDefault();
+      navigateArrow(component, 'down');
+    }
+  },
+};
+
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -2726,11 +2955,9 @@ const computePosition = (reference, floating, options) => {
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
-
 const MAX_CONFIGURATION_COUNT = 10;
 
 class AuroFloatingUI {
-
   /**
    * @private
    */
@@ -2745,7 +2972,11 @@ class AuroFloatingUI {
    * @private
    */
   static setupMousePressChecker() {
-    if (!AuroFloatingUI.isMousePressHandlerInitialized && window && window.addEventListener) {
+    if (
+      !AuroFloatingUI.isMousePressHandlerInitialized &&
+      window &&
+      window.addEventListener
+    ) {
       AuroFloatingUI.isMousePressHandlerInitialized = true;
 
       // Track timeout for isMousePressed reset to avoid race conditions
@@ -2753,7 +2984,7 @@ class AuroFloatingUI {
         AuroFloatingUI._mousePressedTimeout = null;
       }
       const mouseEventGlobalHandler = (event) => {
-        const isPressed = event.type === 'mousedown';
+        const isPressed = event.type === "mousedown";
         if (isPressed) {
           // Clear any pending timeout to prevent race condition
           if (AuroFloatingUI._mousePressedTimeout !== null) {
@@ -2772,8 +3003,8 @@ class AuroFloatingUI {
         }
       };
 
-      window.addEventListener('mousedown', mouseEventGlobalHandler);
-      window.addEventListener('mouseup', mouseEventGlobalHandler);
+      window.addEventListener("mousedown", mouseEventGlobalHandler);
+      window.addEventListener("mouseup", mouseEventGlobalHandler);
     }
   }
 
@@ -2821,11 +3052,12 @@ class AuroFloatingUI {
     // mirror the boxsize from bibSizer
     if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
-      const bibContent = this.element.bib.shadowRoot.querySelector(".container");
-      if (sizerStyle.width !== '0px') {
+      const bibContent =
+        this.element.bib.shadowRoot.querySelector(".container");
+      if (sizerStyle.width !== "0px") {
         bibContent.style.width = sizerStyle.width;
       }
-      if (sizerStyle.height !== '0px') {
+      if (sizerStyle.height !== "0px") {
         bibContent.style.height = sizerStyle.height;
       }
       bibContent.style.maxWidth = sizerStyle.maxWidth;
@@ -2843,28 +3075,34 @@ class AuroFloatingUI {
    * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
    */
   getPositioningStrategy() {
-    const breakpoint = this.element.bib.mobileFullscreenBreakpoint || this.element.floaterConfig?.fullscreenBreakpoint;
+    const breakpoint =
+      this.element.bib.mobileFullscreenBreakpoint ||
+      this.element.floaterConfig?.fullscreenBreakpoint;
     switch (this.behavior) {
       case "tooltip":
         return "floating";
       case "dialog":
       case "drawer":
         if (breakpoint) {
-          const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
+          const smallerThanBreakpoint = window.matchMedia(
+            `(max-width: ${breakpoint})`,
+          ).matches;
 
           this.element.expanded = smallerThanBreakpoint;
         }
         if (this.element.nested) {
           return "cover";
         }
-        return 'fullscreen';
+        return "fullscreen";
       case "dropdown":
       case undefined:
       case null:
         if (breakpoint) {
-          const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
+          const smallerThanBreakpoint = window.matchMedia(
+            `(max-width: ${breakpoint})`,
+          ).matches;
           if (smallerThanBreakpoint) {
-            return 'fullscreen';
+            return "fullscreen";
           }
         }
         return "floating";
@@ -2885,37 +3123,39 @@ class AuroFloatingUI {
     const strategy = this.getPositioningStrategy();
     this.configureBibStrategy(strategy);
 
-    if (strategy === 'floating') {
+    if (strategy === "floating") {
       this.mirrorSize();
       // Define the middlware for the floater configuration
       const middleware = [
         offset(this.element.floaterConfig?.offset || 0),
-        ...this.element.floaterConfig?.shift ? [shift()] : [], // Add shift middleware if shift is enabled.
-        ...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
-        ...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
+        ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
+        ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
+        ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
       ];
 
       // Compute the position of the bib
       computePosition(this.element.trigger, this.element.bib, {
-        strategy: this.element.floaterConfig?.strategy || 'fixed',
+        strategy: this.element.floaterConfig?.strategy || "fixed",
         placement: this.element.floaterConfig?.placement,
-        middleware: middleware || []
-      }).then(({ x, y }) => { // eslint-disable-line id-length
+        middleware: middleware || [],
+      }).then(({ x, y }) => {
+        // eslint-disable-line id-length
         Object.assign(this.element.bib.style, {
           left: `${x}px`,
           top: `${y}px`,
         });
       });
-    } else if (strategy === 'cover') {
+    } else if (strategy === "cover") {
       // Compute the position of the bib
       computePosition(this.element.parentNode, this.element.bib, {
-        placement: 'bottom-start'
-      }).then(({ x, y }) => { // eslint-disable-line id-length
+        placement: "bottom-start",
+      }).then(({ x, y }) => {
+        // eslint-disable-line id-length
         Object.assign(this.element.bib.style, {
           left: `${x}px`,
           top: `${y - this.element.parentNode.offsetHeight}px`,
           width: `${this.element.parentNode.offsetWidth}px`,
-          height: `${this.element.parentNode.offsetHeight}px`
+          height: `${this.element.parentNode.offsetHeight}px`,
         });
       });
     }
@@ -2928,12 +3168,12 @@ class AuroFloatingUI {
    */
   lockScroll(lock = true) {
     if (lock) {
-      document.body.style.overflow = 'hidden'; // hide body's scrollbar
+      document.body.style.overflow = "hidden"; // hide body's scrollbar
 
       // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
       this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
     } else {
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
     }
   }
 
@@ -2947,23 +3187,24 @@ class AuroFloatingUI {
    * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
    */
   configureBibStrategy(value) {
-    if (value === 'fullscreen') {
+    if (value === "fullscreen") {
       this.element.isBibFullscreen = true;
       // reset the prev position
-      this.element.bib.setAttribute('isfullscreen', "");
-      this.element.bib.style.position = 'fixed';
+      this.element.bib.setAttribute("isfullscreen", "");
+      this.element.bib.style.position = "fixed";
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
-      this.element.bib.style.width = '';
-      this.element.bib.style.height = '';
-      this.element.style.contain = '';
+      this.element.bib.style.width = "";
+      this.element.bib.style.height = "";
+      this.element.style.contain = "";
 
       // reset the size that was mirroring `size` css-part
-      const bibContent = this.element.bib.shadowRoot.querySelector(".container");
+      const bibContent =
+        this.element.bib.shadowRoot.querySelector(".container");
       if (bibContent) {
-        bibContent.style.width = '';
-        bibContent.style.height = '';
-        bibContent.style.maxWidth = '';
+        bibContent.style.width = "";
+        bibContent.style.height = "";
+        bibContent.style.maxWidth = "";
         bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
         this.configureTrial = 0;
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
@@ -2978,21 +3219,26 @@ class AuroFloatingUI {
         this.lockScroll(true);
       }
     } else {
-      this.element.bib.style.position = '';
-      this.element.bib.removeAttribute('isfullscreen');
+      this.element.bib.style.position = "";
+      this.element.bib.removeAttribute("isfullscreen");
       this.element.isBibFullscreen = false;
-      this.element.style.contain = 'layout';
+      this.element.style.contain = "layout";
     }
 
     const isChanged = this.strategy && this.strategy !== value;
     this.strategy = value;
     if (isChanged) {
-      const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
-        detail: {
-          value,
+      const event = new CustomEvent(
+        this.eventPrefix
+          ? `${this.eventPrefix}-strategy-change`
+          : "strategy-change",
+        {
+          detail: {
+            value,
+          },
+          composed: true,
         },
-        composed: true
-      });
+      );
 
       this.element.dispatchEvent(event);
     }
@@ -3024,19 +3270,24 @@ class AuroFloatingUI {
       return;
     }
 
-    if (this.element.noHideOnThisFocusLoss ||
-      this.element.hasAttribute('noHideOnThisFocusLoss')) {
+    if (
+      this.element.noHideOnThisFocusLoss ||
+      this.element.hasAttribute("noHideOnThisFocusLoss")
+    ) {
       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)) {
+    if (
+      this.element.contains(activeElement) ||
+      this.element.bib?.contains(activeElement)
+    ) {
       return;
     }
 
     // if fullscreen bib is in fullscreen mode, do not close
-    if (this.element.bib.hasAttribute('isfullscreen')) {
+    if (this.element.bib.hasAttribute("isfullscreen")) {
       return;
     }
 
@@ -3048,12 +3299,27 @@ class AuroFloatingUI {
     this.focusHandler = () => this.handleFocusLoss();
 
     this.clickHandler = (evt) => {
-      if ((!evt.composedPath().includes(this.element.trigger) &&
-        !evt.composedPath().includes(this.element.bib)) ||
-        (this.element.bib.backdrop && evt.composedPath().includes(this.element.bib.backdrop))) {
-        const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+      // When the bib is fullscreen (modal dialog), don't close on outside
+      // clicks. VoiceOver's synthetic click events inside a top-layer modal
+      // <dialog> may not include the bib in composedPath(), causing false
+      // positives. This mirrors the fullscreen guard in handleFocusLoss().
+      if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
 
-        if (existedVisibleFloatingUI && existedVisibleFloatingUI.element.isPopoverVisible) {
+      if (
+        (!evt.composedPath().includes(this.element.trigger) &&
+          !evt.composedPath().includes(this.element.bib)) ||
+        (this.element.bib.backdrop &&
+          evt.composedPath().includes(this.element.bib.backdrop))
+      ) {
+        const existedVisibleFloatingUI =
+          document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+
+        if (
+          existedVisibleFloatingUI &&
+          existedVisibleFloatingUI.element.isPopoverVisible
+        ) {
           // if something else is open, close that
           existedVisibleFloatingUI.hideBib();
           document.expandedAuroFormkitDropdown = null;
@@ -3066,9 +3332,14 @@ class AuroFloatingUI {
 
     // ESC key handler
     this.keyDownHandler = (evt) => {
-      if (evt.key === 'Escape' && this.element.isPopoverVisible) {
-        const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
-        if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this && existedVisibleFloatingUI.element.isPopoverVisible) {
+      if (evt.key === "Escape" && this.element.isPopoverVisible) {
+        const existedVisibleFloatingUI =
+          document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+        if (
+          existedVisibleFloatingUI &&
+          existedVisibleFloatingUI !== this &&
+          existedVisibleFloatingUI.element.isPopoverVisible
+        ) {
           // if something else is open, let it handle itself
           return;
         }
@@ -3076,17 +3347,17 @@ class AuroFloatingUI {
       }
     };
 
-    if (this.behavior !== 'drawer' && this.behavior !== 'dialog') {
+    if (this.behavior !== "drawer" && this.behavior !== "dialog") {
       // Add event listeners using the stored references
-      document.addEventListener('focusin', this.focusHandler);
+      document.addEventListener("focusin", this.focusHandler);
     }
 
-    document.addEventListener('keydown', this.keyDownHandler);
+    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
     setTimeout(() => {
-      window.addEventListener('click', this.clickHandler);
+      window.addEventListener("click", this.clickHandler);
     }, 0);
   }
 
@@ -3094,34 +3365,38 @@ class AuroFloatingUI {
     // Remove event listeners if they exist
 
     if (this.focusHandler) {
-      document.removeEventListener('focusin', this.focusHandler);
+      document.removeEventListener("focusin", this.focusHandler);
       this.focusHandler = null;
     }
 
     if (this.clickHandler) {
-      window.removeEventListener('click', this.clickHandler);
+      window.removeEventListener("click", this.clickHandler);
       this.clickHandler = null;
     }
 
     if (this.keyDownHandler) {
-      document.removeEventListener('keydown', this.keyDownHandler);
+      document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
     }
   }
 
   handleUpdate(changedProperties) {
-    if (changedProperties.has('isPopoverVisible')) {
+    if (changedProperties.has("isPopoverVisible")) {
       this.updateState();
     }
   }
 
   updateCurrentExpandedDropdown() {
     // Close any other dropdown that is already open
-    const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
-    if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this &&
+    const existedVisibleFloatingUI =
+      document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+    if (
+      existedVisibleFloatingUI &&
+      existedVisibleFloatingUI !== this &&
       existedVisibleFloatingUI.element.isPopoverVisible &&
-      document.expandedAuroFloater.eventPrefix === this.eventPrefix) {
-      document.expandedAuroFloater.hideBib();
+      existedVisibleFloatingUI.eventPrefix === this.eventPrefix
+    ) {
+      existedVisibleFloatingUI.hideBib();
     }
 
     document.expandedAuroFloater = this;
@@ -3130,7 +3405,7 @@ class AuroFloatingUI {
   showBib() {
     if (!this.element.disabled && !this.showing) {
       this.updateCurrentExpandedDropdown();
-      this.element.triggerChevron?.setAttribute('data-expanded', true);
+      this.element.triggerChevron?.setAttribute("data-expanded", true);
 
       // prevent double showing: isPopovervisible gets first and showBib gets called later
       if (!this.showing) {
@@ -3144,9 +3419,13 @@ class AuroFloatingUI {
       }
 
       // Setup auto update to handle resize and scroll
-      this.element.cleanup = autoUpdate(this.element.trigger || this.element.parentNode, this.element.bib, () => {
-        this.position();
-      });
+      this.element.cleanup = autoUpdate(
+        this.element.trigger || this.element.parentNode,
+        this.element.bib,
+        () => {
+          this.position();
+        },
+      );
     }
   }
 
@@ -3157,7 +3436,7 @@ class AuroFloatingUI {
   hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
-      this.element.triggerChevron?.removeAttribute('data-expanded');
+      this.element.triggerChevron?.removeAttribute("data-expanded");
 
       if (this.element.isPopoverVisible) {
         this.element.isPopoverVisible = false;
@@ -3177,13 +3456,16 @@ class AuroFloatingUI {
    * @param {String} eventType - The event type that triggered the toggle action.
    */
   dispatchEventDropdownToggle(eventType) {
-    const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
-      detail: {
-        expanded: this.showing,
-        eventType: eventType || "unknown",
+    const event = new CustomEvent(
+      this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
+      {
+        detail: {
+          expanded: this.showing,
+          eventType: eventType || "unknown",
+        },
+        composed: true,
       },
-      composed: true
-    });
+    );
 
     this.element.dispatchEvent(event);
   }
@@ -3195,12 +3477,15 @@ class AuroFloatingUI {
       this.showBib();
     }
 
-    const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick", {
-      composed: true,
-      detail: {
-        expanded: this.element.isPopoverVisible
-      }
-    });
+    const event = new CustomEvent(
+      this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
+      {
+        composed: true,
+        detail: {
+          expanded: this.element.isPopoverVisible,
+        },
+      },
+    );
 
     this.element.dispatchEvent(event);
   }
@@ -3208,30 +3493,32 @@ class AuroFloatingUI {
   handleEvent(event) {
     if (!this.element.disableEventShow) {
       switch (event.type) {
-        case 'keydown':
+        case "keydown": {
           // Support both Enter and Space keys for accessibility
           // Space is included as it's expected behavior for interactive elements
 
           const origin = event.composedPath()[0];
-          if (event.key === 'Enter' || event.key === ' ' && (!origin || origin.tagName !== "INPUT")) {
-
+          if (
+            event.key === "Enter" ||
+            (event.key === " " && (!origin || origin.tagName !== "INPUT"))
+          ) {
             event.preventDefault();
             this.handleClick();
           }
           break;
-        case 'mouseenter':
+        }
+        case "mouseenter":
           if (this.element.hoverToggle) {
             this.showBib();
           }
           break;
-        case 'mouseleave':
+        case "mouseleave":
           if (this.element.hoverToggle) {
             this.hideBib("mouseleave");
           }
           break;
-        case 'focus':
+        case "focus":
           if (this.element.focusShow) {
-
             /*
               This needs to better handle clicking that gives focus -
               currently it shows and then immediately hides the bib
@@ -3239,12 +3526,12 @@ class AuroFloatingUI {
             this.showBib();
           }
           break;
-        case 'blur':
+        case "blur":
           // send this task 100ms later queue to
           // wait a frame in case focus moves within the floating element/bib
           setTimeout(() => this.handleFocusLoss(), 0);
           break;
-        case 'click':
+        case "click":
           if (document.activeElement === document.body) {
             event.currentTarget.focus();
           }
@@ -3263,15 +3550,15 @@ class AuroFloatingUI {
    */
   handleTriggerTabIndex() {
     const focusableElementSelectors = [
-      'a',
-      'button',
+      "a",
+      "button",
       'input:not([type="hidden"])',
-      'select',
-      'textarea',
+      "select",
+      "textarea",
       '[tabindex]:not([tabindex="-1"])',
-      'auro-button',
-      'auro-input',
-      'auro-hyperlink'
+      "auro-button",
+      "auro-input",
+      "auro-hyperlink",
     ];
 
     const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
@@ -3299,10 +3586,10 @@ class AuroFloatingUI {
    * @param {*} eventPrefix
    */
   regenerateBibId() {
-    this.id = this.element.getAttribute('id');
+    this.id = this.element.getAttribute("id");
     if (!this.id) {
       this.id = window.crypto.randomUUID();
-      this.element.setAttribute('id', this.id);
+      this.element.setAttribute("id", this.id);
     }
 
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
@@ -3323,11 +3610,15 @@ class AuroFloatingUI {
     if (this.element.trigger) {
       this.disconnect();
     }
-    this.element.trigger = this.element.triggerElement || this.element.shadowRoot.querySelector('#trigger') || this.element.trigger;
-    this.element.bib = this.element.shadowRoot.querySelector('#bib') || this.element.bib;
-    this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');
-    this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon');
-
+    this.element.trigger =
+      this.element.triggerElement ||
+      this.element.shadowRoot.querySelector("#trigger") ||
+      this.element.trigger;
+    this.element.bib =
+      this.element.shadowRoot.querySelector("#bib") || this.element.bib;
+    this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
+    this.element.triggerChevron =
+      this.element.shadowRoot.querySelector("#showStateIcon");
 
     if (this.element.floaterConfig) {
       this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
@@ -3338,12 +3629,12 @@ class AuroFloatingUI {
 
     this.handleEvent = this.handleEvent.bind(this);
     if (this.element.trigger) {
-      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);
-      this.element.trigger.addEventListener('focus', this.handleEvent);
-      this.element.trigger.addEventListener('blur', this.handleEvent);
+      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);
+      this.element.trigger.addEventListener("focus", this.handleEvent);
+      this.element.trigger.addEventListener("blur", this.handleEvent);
     }
   }
 
@@ -3358,12 +3649,18 @@ class AuroFloatingUI {
 
       // Remove event & keyboard listeners
       if (this.element?.trigger) {
-        this.element.trigger.removeEventListener('keydown', this.handleEvent);
-        this.element.trigger.removeEventListener('click', this.handleEvent);
-        this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
-        this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
-        this.element.trigger.removeEventListener('focus', this.handleEvent);
-        this.element.trigger.removeEventListener('blur', this.handleEvent);
+        this.element.trigger.removeEventListener("keydown", this.handleEvent);
+        this.element.trigger.removeEventListener("click", this.handleEvent);
+        this.element.trigger.removeEventListener(
+          "mouseenter",
+          this.handleEvent,
+        );
+        this.element.trigger.removeEventListener(
+          "mouseleave",
+          this.handleEvent,
+        );
+        this.element.trigger.removeEventListener("focus", this.handleEvent);
+        this.element.trigger.removeEventListener("blur", this.handleEvent);
       }
     }
   }
@@ -3810,7 +4107,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$2 = '9.1.2';
 
-var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}: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}: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}.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}`;
+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([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)}`;
 
@@ -3818,6 +4115,8 @@ var tokensCss$1$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-';
@@ -3912,6 +4211,28 @@ class AuroDropdownBib extends LitElement {
       shape: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Accessible label for the dialog element, used when displayed as a modal.
+       * Applied via aria-labelledby on a visually hidden element rather than
+       * aria-label because iOS VoiceOver does not reliably read aria-label
+       * on <dialog> elements.
+       * @private
+       */
+      dialogLabel: {
+        type: String
+      },
+
+      /**
+       * Overrides the native role of the dialog element.
+       * For example, set to `"presentation"` on desktop combobox to prevent
+       * VoiceOver from announcing "listbox inside of a dialog".
+       * When `undefined`, the dialog keeps its native role.
+       * @private
+       */
+      dialogRole: {
+        type: String
       }
     };
   }
@@ -3979,7 +4300,10 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    // Dispatch a custom event when the component is connected
+    const dialog = this.shadowRoot.querySelector('dialog');
+    this._setupCancelHandler(dialog);
+    this._setupKeyboardBridge(dialog);
+
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
       composed: true,
@@ -3989,6 +4313,189 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Forwards the dialog's native `cancel` event (fired on ESC) as
+   * an `auro-bib-cancel` custom event so parent components can close.
+   * @param {HTMLDialogElement} dialog
+   * @private
+   */
+  _setupCancelHandler(dialog) {
+    dialog.addEventListener('cancel', (event) => {
+      event.preventDefault();
+      this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+
+  /**
+   * 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
+   * @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.
+      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', {
+        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.
+   *
+   * 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) {
+      if (modal) {
+        // Prevent showModal() from scrolling the page to bring the dialog
+        // into view. Locking overflow on <html> blocks the viewport scroll
+        // that browsers perform natively; we release it immediately after
+        // so it doesn't interfere with the modal's focus management.
+        const { documentElement } = document;
+        const prevOverflow = documentElement.style.overflow;
+        documentElement.style.overflow = 'hidden';
+
+        dialog.showModal();
+
+        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
+        // the floater's handleFocusLoss() to immediately hide the bib.
+        dialog.setAttribute('open', '');
+      }
+    }
+  }
+
+  /**
+   * Closes the dialog.
+   */
+  close() {
+    const dialog = this.shadowRoot.querySelector('dialog');
+    if (dialog && dialog.open) {
+      this._unlockTouchScroll();
+      dialog.close();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -4000,9 +4507,10 @@ class AuroDropdownBib extends LitElement {
     classes[`shape-${this.shape}`] = true;
 
     return html`
-      <div class="${classMap(classes)}" part="bibContainer">
+      <dialog class="${classMap(classes)}" part="bibContainer" role="${ifDefined(this.dialogRole)}" aria-labelledby="${ifDefined(this.dialogLabel ? 'dialogLabel' : undefined)}">
+        ${this.dialogLabel ? html`<span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.dialogLabel}</span>` : ''}
         <slot></slot>
-      </div>
+      </dialog>
     `;
   }
 }
@@ -4011,7 +4519,7 @@ var shapeSizeCss$1 = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.
 
 var colorCss$1$1 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([disabled],[onDark])) .wrapper:focus-within,:host(:not([disabled],[onDark])) .wrapper:active,:host(:not([disabled],[appearance=inverse])) .wrapper:focus-within,:host(:not([disabled],[appearance=inverse])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([disabled],[onDark])) .wrapper:hover,:host(:not([disabled],[appearance=inverse])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([ondark])) .wrapper,:host(:not([appearance=inverse])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([onDark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([onDark])[disabled]) #triggerLabel,:host(:not([appearance=inverse])[disabled]) #triggerLabel{cursor:default}:host(:not([ondark])[error]),:host(:not([appearance=inverse])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([disabled])[onDark]) .wrapper:focus-within,:host(:not([disabled])[onDark]) .wrapper:active,:host(:not([disabled])[appearance=inverse]) .wrapper:focus-within,:host(:not([disabled])[appearance=inverse]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host(:not([disabled])[onDark]) .wrapper:hover,:host(:not([disabled])[appearance=inverse]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark]) .label,:host([onDark]) .helpText,:host([appearance=inverse]) .label,:host([appearance=inverse]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper,:host([appearance=inverse]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([onDark][disabled]) #triggerLabel,:host([appearance=inverse][disabled]) #triggerLabel{cursor:default}:host([ondark][error]),:host([appearance=inverse][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
-var styleCss$1$2 = css`:host{position:relative;display:block;text-align:left}[popover=manual]{overflow:visible;padding:0;border:inherit;margin:0;background:inherit;outline:inherit}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
+var styleCss$1$2 = css`:host{position:relative;display:block;text-align:left}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
 
 var classicColorCss$1 = css``;
 
@@ -4249,7 +4757,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202602140013';
+var formkitVersion$2 = '202603102257';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -4363,7 +4871,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
  * @customElement auro-dropdown
  *
- * @slot - Default slot for the popover content.
+ * @slot - Default slot for the dropdown bib content.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
@@ -4375,6 +4883,13 @@ let AuroElement$2 = class AuroElement extends LitElement {
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
 class AuroDropdown extends AuroElement$2 {
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement$2.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -4440,15 +4955,6 @@ class AuroDropdown extends AuroElement$2 {
     this.shift = false;
     this.autoPlacement = false;
 
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
-
     /**
      * @private
      */
@@ -4522,6 +5028,18 @@ class AuroDropdown extends AuroElement$2 {
    */
   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);
+    }
   }
 
   /**
@@ -4529,13 +5047,37 @@ class AuroDropdown extends AuroElement$2 {
    * If not, trigger element will get focus.
    */
   focus() {
-    if (this.isPopoverVisible && this.focusTrap) {
-      this.focusTrap.focusFirstElement();
+    if (this.isPopoverVisible && this.bibContent) {
+      const focusables = getFocusableElements(this.bibContent);
+      if (focusables.length > 0) {
+        focusables[0].focus();
+      }
     } else {
       this.trigger.focus();
     }
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-dropdown` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (!this.trigger) {
+      return;
+    }
+
+    if (element) {
+      this.trigger.ariaActiveDescendantElement = element;
+    } else {
+      this.trigger.ariaActiveDescendantElement = null;
+      this.trigger.removeAttribute('aria-activedescendant');
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -4793,6 +5335,16 @@ class AuroDropdown extends AuroElement$2 {
        */
       tabIndex: {
         type: Number
+      },
+
+      /**
+       * Accessible label for the dropdown bib dialog element.
+       * @private
+       */
+      bibDialogLabel: {
+        type: String,
+        attribute: false,
+        reflect: false
       }
     };
   }
@@ -4844,7 +5396,10 @@ class AuroDropdown extends AuroElement$2 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.floater.disconnect();
+    if (this.floater) {
+      this.floater.hideBib('disconnect');
+      this.floater.disconnect();
+    }
     this.clearTriggerFocusEventBinding();
   }
 
@@ -4866,11 +5421,22 @@ class AuroDropdown extends AuroElement$2 {
 
     if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
       if (this.isPopoverVisible) {
-        this.bibElement.value.showPopover();
+        // 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;
+        this.bibElement.value.open(useModal);
       } else {
-        this.bibElement.value.hidePopover();
+        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);
+    }
   }
 
   /**
@@ -4888,11 +5454,28 @@ class AuroDropdown extends AuroElement$2 {
   }
 
   firstUpdated() {
-
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+
+    // Prevent `contain: layout` on the dropdown host. Layout containment
+    // creates a containing block for position:fixed descendants (the bib),
+    // which clips the bib inside ancestor overflow contexts such as a
+    // <dialog> element. Without it, the bib's position:fixed is relative
+    // to the viewport, letting Floating UI's flip middleware detect
+    // viewport boundaries and the bib escape overflow clipping.
+    const origConfigureBibStrategy = this.floater.configureBibStrategy.bind(this.floater);
+    this.floater.configureBibStrategy = (value) => {
+      origConfigureBibStrategy(value);
+      this.style.contain = '';
+    };
+
     this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
+    // Handle ESC key from dialog's cancel event
+    this.addEventListener('auro-bib-cancel', () => {
+      this.floater.hideBib('keydown');
+    });
+
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
      * @event auroDropdown-idAdded
@@ -4900,9 +5483,9 @@ class AuroDropdown extends AuroElement$2 {
      */
     this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
 
-    // Set the bib ID locally if the user hasn't provided a focusable trigger
+    // Set the bib ID locally for aria-controls (must be in the same shadow root as the trigger)
     if (!this.triggerContentFocusable) {
-      this.dropdownId = this.floater.element.id;
+      this.dropdownId = this.floater.element.bib.id;
     }
 
     this.bibContent = this.floater.element.bib;
@@ -4962,21 +5545,20 @@ class AuroDropdown extends AuroElement$2 {
    * @private
    */
   updateFocusTrap() {
-    // If the dropdown is open, create a focus trap and focus the first element
     if (this.isPopoverVisible && !this.disableFocusTrap) {
-      this.focusTrap = new FocusTrap(this.bibContent);
-      this.focusTrap.focusFirstElement();
+      if (!this.isBibFullscreen) {
+        // Desktop: show() doesn't trap focus, so use FocusTrap
+        this.focusTrap = new FocusTrap(this.bibContent);
+        this.focusTrap.focusFirstElement();
+      }
+      // Fullscreen: showModal() provides native focus trapping
       return;
     }
 
-    // Guard Clause: Ensure there is a focus trap currently active before continuing
-    if (!this.focusTrap) {
-      return;
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
     }
-
-    // If the dropdown is not open, disconnect the focus trap if it exists
-    this.focusTrap.disconnect();
-    this.focusTrap = undefined;
   }
 
   /**
@@ -5192,13 +5774,14 @@ class AuroDropdown extends AuroElement$2 {
               <div
                 id="showStateIcon"
                 class="chevron"
-                part="chevron">
+                part="chevron"
+                aria-hidden="true">
                 <${this.iconTag}
                   category="interface"
                   name="${this.isPopoverVisible ? 'chevron-up' : `chevron-down`}"
                   appearance="${this.onDark ? 'inverse' : this.appearance}"
-                  variant="${this.disabled ? 'disabled' : 'muted'}">
-                  >
+                  variant="${this.disabled ? 'disabled' : 'muted'}"
+                  ariaHidden="true">
                 </${this.iconTag}>
               </div>
             ` : undefined }
@@ -5212,8 +5795,8 @@ class AuroDropdown extends AuroElement$2 {
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
+          .dialogLabel="${this.bibDialogLabel}"
           ${ref(this.bibElement)}
-          popover="manual"
           >
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
@@ -10127,7 +10710,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -10151,7 +10734,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -10357,6 +10940,17 @@ let AuroElement$1 = class AuroElement extends LitElement {
  */
 class BaseInput extends AuroElement$1 {
 
+  // Delegate focus to the native <input> inside the shadow root so that
+  // showModal()'s dialog focusing steps reach the input element.
+  // This keeps the mobile virtual keyboard open when the fullscreen dialog
+  // opens, because the browser sees an input-to-input focus transfer.
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement$1.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -10374,6 +10968,7 @@ class BaseInput extends AuroElement$1 {
     this.icon = false;
     this.disabled = false;
     this.dvInputOnly = false;
+    this.hideLabelVisually = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -10481,6 +11076,15 @@ class BaseInput extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * The value for the aria-activedescendant attribute.
+       * Points to the ID of the currently active/highlighted option in a listbox.
+       */
+      a11yActivedescendant: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If set, the label will remain fixed in the active position.
        */
@@ -10587,6 +11191,16 @@ class BaseInput extends AuroElement$1 {
         attribute: false
       },
 
+      /**
+       * If set, the label will be hidden visually but still accessible to assistive technologies.
+       * @private
+       */
+      hideLabelVisually: {
+        type: Boolean,
+        reflect: true
+      },
+
+
       /**
        * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
        */
@@ -11164,31 +11778,34 @@ class BaseInput extends AuroElement$1 {
     // Process credit card type detection and formatting during input
     if (this.type === 'credit-card') {
       this.processCreditCard();
-    }
+      this.touched = true;
+      this.validation.validate(this);
+    } else {
 
-    // Sets value property to value of element value (el.value).
-    this.value = this.inputElement.value;
+      // Sets value property to value of element value (el.value).
+      this.value = this.inputElement.value;
 
-    // Determine if the value change was programmatic, including autofill.
-    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+      // Determine if the value change was programmatic, including autofill.
+      const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
 
-    // Validation on input or programmatic value change (including autofill).
-    if (this.validateOnInput || inputWasProgrammatic) {
-      this.touched = true;
-      this.validation.validate(this);
-    }
+      // Validation on input or programmatic value change (including autofill).
+      if (this.validateOnInput || inputWasProgrammatic) {
+        this.touched = true;
+        this.validation.validate(this);
+      }
 
-    // Prevents cursor jumping in Safari.
-    const { selectionStart } = this.inputElement;
+      // Prevents cursor jumping in Safari.
+      const { selectionStart } = this.inputElement;
 
-    if (this.setSelectionInputTypes.includes(this.type)) {
-      this.updateComplete.then(() => {
-        try {
-          this.inputElement.setSelectionRange(selectionStart, selectionStart);
-        } catch (error) { // eslint-disable-line
-          // do nothing
-        }
-      });
+      if (this.setSelectionInputTypes.includes(this.type)) {
+        this.updateComplete.then(() => {
+          try {
+            this.inputElement.setSelectionRange(selectionStart, selectionStart);
+          } catch (error) { // eslint-disable-line
+            // do nothing
+          }
+        });
+      }
     }
   }
 
@@ -11221,6 +11838,11 @@ class BaseInput extends AuroElement$1 {
     this.inputElement.scrollLeft = 100;
 
     if (!this.noValidate) {
+      // For credit card inputs with mask, ensure value is synced from mask instance
+      if (this.type === 'credit-card' && this.maskInstance) {
+        this.value = this.maskInstance.value;
+      }
+
       this.validation.validate(this);
     }
   }
@@ -11245,6 +11867,20 @@ class BaseInput extends AuroElement$1 {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -11869,7 +12505,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202602140013';
+var formkitVersion$1 = '202603102257';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12051,7 +12687,7 @@ class AuroInput extends BaseInput {
     return {
       'is-disabled': this.disabled,
       'withValue': this.hasValue,
-      'util_displayHiddenVisually': this.labelHidden,
+      'util_displayHiddenVisually': this.labelHidden || this.hideLabelVisually,
       [this.labelFontClass]: true,
     };
   }
@@ -12223,6 +12859,7 @@ class AuroInput extends BaseInput {
         ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
+        aria-activedescendant=${ifDefined(this.a11yActivedescendant)}
         aria-controls=${ifDefined(this.a11yControls)}
         aria-describedby="${this.uniqueId}"
         aria-expanded=${ifDefined(this.a11yExpanded)}
@@ -12837,6 +13474,18 @@ class AuroBibtemplate extends LitElement {
     this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
   }
 
+  /**
+   * Focuses the close button inside the bibtemplate's shadow DOM.
+   * Used by parent components to set initial focus when the fullscreen dialog opens.
+   * @returns {void}
+   */
+  focusCloseButton() {
+    const closeBtn = this.shadowRoot.querySelector('#closeButton');
+    if (closeBtn) {
+      closeBtn.focus();
+    }
+  }
+
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -12895,7 +13544,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202603102257';
 
 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}`;
 
@@ -13311,6 +13960,9 @@ class AuroCombobox extends AuroElement {
     this.availableOptions = [];
     this.dropdownId = undefined;
     this.dropdownOpen = false;
+    this.triggerExpandedState = false;
+    this._expandedTimeout = null;
+    this._inFullscreenTransition = false;
     this.errorMessage = null;
     this.isHiddenWhileLoading = false;
     this.largeFullscreenHeadline = false;
@@ -13331,7 +13983,7 @@ class AuroCombobox extends AuroElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default' | 'inverse'}
+       * @property {'default' | 'inverse'} appearance - The visual appearance of the component.
        * @default 'default'
        */
       appearance: {
@@ -13667,6 +14319,18 @@ class AuroCombobox extends AuroElement {
         reflect: false,
         attribute: false
       },
+
+      /**
+       * Deferred aria-expanded state for the trigger input.
+       * Delays the "true" transition so VoiceOver finishes its character echo
+       * before announcing "expanded".
+       * @private
+       */
+      triggerExpandedState: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
     };
   }
 
@@ -13764,6 +14428,8 @@ class AuroCombobox extends AuroElement {
       } else if (!option.hasAttribute('persistent')) {
         // Hide all other non-persistent options
         option.setAttribute('hidden', '');
+        option.removeAttribute('aria-setsize');
+        option.removeAttribute('aria-posinset');
       }
     });
 
@@ -13830,6 +14496,15 @@ class AuroCombobox extends AuroElement {
     this.availableOptions = [];
     this.updateFilter();
 
+    // Set aria-setsize/aria-posinset on each visible option so screen readers
+    // can announce position even when the listbox context is broken by
+    // shadow DOM boundaries in fullscreen dialog mode.
+    const optionCount = this.availableOptions.length;
+    this.availableOptions.forEach((option, index) => {
+      option.setAttribute('aria-setsize', optionCount);
+      option.setAttribute('aria-posinset', index + 1);
+    });
+
     if (this.value && this.input.value && !this.menu.value) {
       this.syncValuesAndStates();
     }
@@ -13863,7 +14538,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
-    if (!this.input.value) {
+    if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
     }
@@ -13886,6 +14561,10 @@ class AuroCombobox extends AuroElement {
   configureDropdown() {
     this.dropdown.a11yRole = "combobox";
 
+    // Prevent dropdown from closing on focus loss since menu content is slotted
+    // from combobox's light DOM and won't be detected by dropdown's contains() check.
+    this.dropdown.noHideOnThisFocusLoss = true;
+
     // Listen for the ID to be added to the dropdown so we can capture it and use it for accessibility.
     this.dropdown.addEventListener('auroDropdown-idAdded', (event) => {
       this.dropdownId = event.detail.id;
@@ -13896,12 +14575,80 @@ class AuroCombobox extends AuroElement {
       this.dropdownOpen = ev.detail.expanded;
       this.updateMenuShapeSize();
 
-      // wait a frame in case the bib gets hide immediately after showing because there is no value
-      setTimeout(() => {
-        if (this.componentHasFocus) {
-          this.setInputFocus();
+      // Defer aria-expanded "true" so VoiceOver finishes character echo
+      // before announcing "expanded". Set "false" immediately on close.
+      clearTimeout(this._expandedTimeout);
+      if (this.dropdownOpen) {
+        const expandedDelay = 150;
+        this._expandedTimeout = setTimeout(() => {
+          this.triggerExpandedState = true;
+        }, expandedDelay);
+      } else {
+        this.triggerExpandedState = false;
+      }
+
+      // 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');
+          });
         }
-      }, 0);
+
+        // 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);
+      }
+
+      if (this.dropdownOpen) {
+        // Suppress or restore dialog semantics based on mode.
+        // On desktop, VoiceOver verbosely announces "listbox inside of a dialog"
+        // which is disruptive for combobox usage. Fullscreen needs dialog semantics.
+        this.updateBibDialogRole();
+
+        if (this.dropdown.isBibFullscreen) {
+          // Guard against spurious validation during the focus transition
+          // from trigger to bib input. Setting trigger.inert = true removes
+          // focus, which fires focusout on the child auro-input before the
+          // bib input receives focus. That focusout triggers the input's own
+          // validate(), which dispatches a composed auroFormElement-validated
+          // event. Because composed events are retargetted at each shadow DOM
+          // boundary, the event appears to originate from the combobox itself
+          // and its listener unconditionally sets this.validity — causing
+          // premature validation. This flag suppresses all validation paths
+          // (focusout handler, handleInputValueChange, validate(), and the
+          // auroFormElement-validated listener) until focus settles in the bib.
+          this._inFullscreenTransition = true;
+
+          // Hide the trigger from assistive technology so VoiceOver cannot reach it
+          // behind the fullscreen dialog
+          this.dropdown.trigger.inert = true;
+
+          guardTouchPassthrough(this.menu);
+
+          // Wait for the bibtemplate to fully render across
+          // multiple Lit update cycles before moving focus into the bib
+          doubleRaf(() => {
+            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);
+        }
+      }
     });
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
@@ -13912,6 +14659,12 @@ class AuroCombobox extends AuroElement {
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
     this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
 
+    // Pass label text to the dropdown bib for accessible dialog naming
+    const labelElement = this.querySelector('[slot="label"]');
+    if (labelElement) {
+      this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
+    }
+
     // Exposes the CSS parts from the bibtemplate for styling
     this.bibtemplate.exposeCssParts();
 
@@ -13922,6 +14675,14 @@ class AuroCombobox extends AuroElement {
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
       this.updateMenuShapeSize();
+      this.updateBibDialogRole();
+
+      // When switching to fullscreen while open, hide trigger from assistive technology
+      if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
+        this.dropdown.trigger.inert = true;
+      } else if (!this.dropdown.isBibFullscreen) {
+        this.dropdown.trigger.inert = false;
+      }
 
       setTimeout(() => {
         this.setInputFocus();
@@ -13945,6 +14706,13 @@ class AuroCombobox extends AuroElement {
   setInputFocus() {
     if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
       this.inputInBib.focus();
+
+      // Place cursor at end of existing text so the user can continue editing
+      const nativeInput = this.inputInBib.inputElement;
+      if (nativeInput && nativeInput.value) {
+        const len = nativeInput.value.length;
+        nativeInput.setSelectionRange(len, len);
+      }
     } else if (!this.input.componentHasFocus) {
       const focusedEl = this.querySelector(":focus");
       this.input.focus();
@@ -13956,6 +14724,22 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * Suppresses or restores dialog semantics on the bib's dialog element.
+   * On desktop (non-fullscreen), VoiceOver verbosely announces "listbox inside
+   * of a dialog" which disrupts combobox usage. Setting role="presentation"
+   * suppresses this. In fullscreen mode, dialog semantics are restored.
+   * @private
+   */
+  updateBibDialogRole() {
+    const bibEl = this.dropdown.bibElement && this.dropdown.bibElement.value;
+    if (!bibEl) {
+      return;
+    }
+
+    bibEl.dialogRole = this.dropdown.isBibFullscreen ? undefined : 'presentation';
+  }
+
   /**
    * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
    * @private
@@ -14041,6 +14825,14 @@ class AuroCombobox extends AuroElement {
         setTimeout(() => {
           this.hideBib();
         }, 0);
+
+        // Announce the selection after the dropdown closes so it isn't
+        // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
+        const selectedValue = event.detail.stringValue;
+        const announcementDelay = 300;
+        setTimeout(() => {
+          announceToScreenReader(this.shadowRoot, `${selectedValue}, selected`);
+        }, announcementDelay);
       }
     });
 
@@ -14051,10 +14843,28 @@ class AuroCombobox extends AuroElement {
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
 
+      if (this.input) {
+        this.input.setActiveDescendant(this.optionActive);
+      }
+
+      // Announce the active option for screen readers including position,
+      // since shadow DOM boundaries prevent native reading of
+      // aria-setsize/aria-posinset via aria-activedescendant.
+      if (this.optionActive) {
+        const optionText = this.optionActive.textContent.trim();
+        const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
+        const optionIndex = this.availableOptions.indexOf(this.optionActive) + 1;
+        const optionCount = this.availableOptions.length;
+        announceToScreenReader(this.shadowRoot, `${optionText}${selectedState}, ${optionIndex} of ${optionCount}`);
+      }
+
+      // Check if user prefers reduced motion for accessibility
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
       this.optionActive.scrollIntoView({
         alignToTop: false,
         block: "nearest",
-        behavior: "smooth"
+        behavior: prefersReducedMotion ? "auto" : "smooth"
       });
     });
 
@@ -14073,7 +14883,7 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (!this.componentHasFocus) {
+      if (!this.componentHasFocus && !this._inFullscreenTransition) {
         this.validate();
       }
     });
@@ -14109,8 +14919,33 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    // When the event comes from the fullscreen bib input, sync the value to
+    // the trigger input. Setting trigger.value triggers Lit's updated()
+    // (async, microtask) which fires notifyValueChanged() → another 'input'
+    // event from the trigger. The _syncingBibValue guard persists across the
+    // async boundary and prevents that re-entrant event from running the
+    // non-fullscreen path (which would call clear() → hideBib()).
+    // When the event comes from the fullscreen bib input, sync the value to
+    // the trigger and run filtering, but suppress the re-entrant input event
+    // that the trigger fires (via Lit updated() → notifyValueChanged()) so
+    // the non-fullscreen hide/clear logic doesn't close the dialog.
     if (event.target === this.inputInBib) {
+      this._syncingBibValue = true;
       this.input.value = this.inputInBib.value;
+      this.input.updateComplete.then(() => {
+        this._syncingBibValue = false;
+      });
+
+      // Run filtering inline — the re-entrant event won't reach this code.
+      this.menu.matchWord = this.inputInBib.value;
+      this.optionActive = null;
+      this.handleMenuOptions();
+      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
+      return;
+    }
+
+    // Ignore re-entrant input events caused by the bib→trigger sync above.
+    if (this._syncingBibValue) {
       return;
     }
 
@@ -14124,8 +14959,11 @@ class AuroCombobox extends AuroElement {
     }
     this.handleMenuOptions();
 
-    // Validate only if the value was set programmatically
-    if (!this.componentHasFocus) {
+    // Validate only if the value was set programmatically (not during user
+    // interaction). In fullscreen dialog mode, componentHasFocus returns false
+    // because focus is inside the top-layer dialog, so also check
+    // dropdownOpen and the fullscreen transition flag.
+    if (!this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
       this.validate();
     }
 
@@ -14140,6 +14978,22 @@ class AuroCombobox extends AuroElement {
       this.hideBib();
     }
 
+    // iOS virtual keyboard retention: when in fullscreen mode, ensure the
+    // dialog opens and the bib input is focused synchronously within the
+    // input event (user gesture) chain. Without this, Lit's async update
+    // cycle delays showModal() past the user activation window, causing
+    // iOS Safari to dismiss the virtual keyboard when the fullscreen
+    // dialog opens — the user then has to tap the input again to resume
+    // typing.
+    if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0) {
+      if (!this.dropdown.isPopoverVisible) {
+        this.showBib();
+      }
+      if (this.dropdown.isPopoverVisible) {
+        this.setInputFocus();
+      }
+    }
+
     this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
   }
 
@@ -14149,61 +15003,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    this.addEventListener('keydown', async (evt) => {
-      if (evt.key === 'Enter') {
-        if (this.dropdown.isPopoverVisible && this.optionActive) {
-          this.menu.makeSelection();
-
-          await this.updateComplete;
-
-          evt.preventDefault();
-          evt.stopPropagation();
-          this.setClearBtnFocus();
-        } else {
-          this.showBib();
-        }
-      }
-
-      if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
-        if (this.dropdown.isBibFullscreen) {
-
-          // when focus is on the input, move focus back to close button with Tab key
-          if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
-            evt.preventDefault();
-            this.dropdown.focus();
-          }
-        } else {
-          if (this.menu.optionActive && this.menu.optionActive.value) {
-            this.menu.value = this.menu.optionActive.value;
-          }
-
-          setTimeout(() => {
-            if (!this.componentHasFocus) {
-              this.hideBib();
-            }
-          }, 0);
-        }
-      }
-
-      /**
-       * Prevent moving the cursor position while navigating the menu options.
-       */
-      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
-        if (this.availableOptions.length > 0) {
-          this.showBib();
-        }
-
-        if (this.dropdown.isPopoverVisible) {
-          evt.preventDefault();
-
-          // navigate on menu only when the focus is on input
-          if (!this.dropdown.isBibFullscreen || this.dropdown.isPopoverVisible) {
-            const direction = evt.key.replace('Arrow', '').toLowerCase();
-            this.menu.navigateOptions(direction);
-          }
-        }
-      }
-    });
+    applyKeyboardStrategy(this, comboboxKeyboardStrategy);
 
     this.addEventListener('focusin', () => {
       this.touched = true;
@@ -14212,6 +15012,14 @@ class AuroCombobox extends AuroElement {
     });
 
     this.addEventListener('auroFormElement-validated', (evt) => {
+      // During the fullscreen transition, child elements (auro-input) may fire
+      // their own validation events when the trigger becomes inert and loses
+      // focus. Those composed events bubble up through shadow DOM boundaries
+      // and would incorrectly set combobox validity. Ignore them.
+      if (this._inFullscreenTransition) {
+        return;
+      }
+
       this.input.validity = evt.detail.validity;
       this.input.errorMessage = evt.detail.message;
       this.validity = evt.detail.validity;
@@ -14238,6 +15046,11 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._inFullscreenTransition = false;
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-combobox');
@@ -14315,6 +15128,9 @@ class AuroCombobox extends AuroElement {
    * @param {boolean} [force=false] - Whether to force validation.
    */
   validate(force = false) {
+    if (this._inFullscreenTransition) {
+      return;
+    }
     this.validation.validate(this, force);
   }
 
@@ -14368,7 +15184,13 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if ((this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading || (this.availableOptions.length === 0 && this.noMatchOption)) {
+      // dropdownOpen is set synchronously by the auroDropdown-toggled event
+      // handler during showBib() → floater.showBib() → dispatchEventDropdownToggle(),
+      // so it's already true by the time updated() runs. This prevents the else
+      // branch from calling hideBib() when the dropdown was just opened but
+      // :focus-within hasn't propagated through the top-layer dialog's nested
+      // shadow DOM boundaries.
+      if ((this.availableOptions.length > 0 && (this.componentHasFocus || this.dropdownOpen)) || this.menu.loading || (this.availableOptions.length === 0 && this.noMatchOption)) {
         this.showBib();
       } else {
         this.hideBib();
@@ -14485,14 +15307,7 @@ class AuroCombobox extends AuroElement {
 
     return html`
       <div>
-        <div aria-live="polite" class="util_displayHiddenVisually">
-          ${this.optionActive && this.availableOptions.length > 0
-        ? html`
-              ${`${this.optionActive.textContent}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
-            `
-        : undefined
-      }
-        </div>
+        <span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
         <${this.dropdownTag}
           appearance="${this.onDark ? 'inverse' : this.appearance}"
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
@@ -14516,7 +15331,8 @@ class AuroCombobox extends AuroElement {
             <${this.inputTag}
               @input="${this.handleInputValueChange}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
-              .a11yExpanded="${this.dropdownOpen}"
+              .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
+              .a11yExpanded="${this.triggerExpandedState}"
               .a11yControls="${this.dropdownId}"
               .autocomplete="${this.autocomplete}"
               .inputmode="${this.inputmode}"
@@ -14549,8 +15365,10 @@ class AuroCombobox extends AuroElement {
             <slot @slotchange="${this.handleSlotChange}"></slot>
             <${this.inputTag}
               id="inputInBib"
+              autofocus
               @input="${this.handleInputValueChange}"
-              .a11yControls="${this.dropdownId}"
+              .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
+              .a11yControls=${`${this.dropdownId}-floater-bib`}
               .autocomplete="${this.autocomplete}"
               .format="${this.format}"
               .inputmode="${this.inputmode}"
@@ -14561,7 +15379,7 @@ class AuroCombobox extends AuroElement {
               ?icon="${this.triggerIcon}"
               ?required="${this.required}"
               a11yRole="combobox"
-              a11yExpanded="true"
+              .a11yExpanded="${this.dropdownOpen}"
               layout="classic"
               noValidate="true"
               shape="classic"