@aurodesignsystem/auro-formkit 5.10.0 → 5.11.0

package/components/select/dist/registered.js

@@ -1,6 +1,8 @@
 import { LitElement, css, html as html$1 } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { unsafeStatic, literal, html } from 'lit/static-html.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 { ifDefined as ifDefined$1 } from 'lit-html/directives/if-defined.js';
@@ -952,7 +954,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')) {
@@ -976,7 +978,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;
@@ -1067,6 +1069,171 @@ 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 selectKeyboardStrategy = {
+  ArrowUp(component, evt) {
+    evt.preventDefault();
+    navigateArrow(component, 'up', { showFn: () => component.dropdown.show() });
+  },
+
+  ArrowDown(component, evt) {
+    evt.preventDefault();
+    navigateArrow(component, 'down', { showFn: () => component.dropdown.show() });
+  },
+
+  Enter(component, evt) {
+    evt.preventDefault();
+    component.menu.makeSelection();
+  },
+
+  Tab(component) {
+    if (!component.dropdown.isPopoverVisible) {
+      return;
+    }
+
+    // Tab selects the focused option and closes the popup per the
+    // WAI-ARIA APG select-only combobox / listbox pattern.
+    if (component.optionActive && !component.multiSelect) {
+      component.menu.makeSelection();
+    }
+    component.dropdown.hide();
+  },
+
+  default(component, evt) {
+    component.updateActiveOptionBasedOnKey(evt.key);
+  },
+};
+
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -2834,11 +3001,9 @@ const computePosition = (reference, floating, options) => {
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
-
 const MAX_CONFIGURATION_COUNT = 10;
 
 class AuroFloatingUI {
-
   /**
    * @private
    */
@@ -2853,7 +3018,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
@@ -2861,7 +3030,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) {
@@ -2880,8 +3049,8 @@ class AuroFloatingUI {
         }
       };
 
-      window.addEventListener('mousedown', mouseEventGlobalHandler);
-      window.addEventListener('mouseup', mouseEventGlobalHandler);
+      window.addEventListener("mousedown", mouseEventGlobalHandler);
+      window.addEventListener("mouseup", mouseEventGlobalHandler);
     }
   }
 
@@ -2929,11 +3098,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;
@@ -2951,28 +3121,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";
@@ -2993,37 +3169,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`,
         });
       });
     }
@@ -3036,12 +3214,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 = "";
     }
   }
 
@@ -3055,23 +3233,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) {
@@ -3086,21 +3265,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);
     }
@@ -3132,19 +3316,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;
     }
 
@@ -3156,12 +3345,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;
@@ -3174,9 +3378,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;
         }
@@ -3184,17 +3393,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);
   }
 
@@ -3202,34 +3411,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;
@@ -3238,7 +3451,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) {
@@ -3252,9 +3465,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();
+        },
+      );
     }
   }
 
@@ -3265,7 +3482,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;
@@ -3285,13 +3502,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);
   }
@@ -3303,12 +3523,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);
   }
@@ -3316,30 +3539,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
@@ -3347,12 +3572,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();
           }
@@ -3371,15 +3596,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];
@@ -3407,10 +3632,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`);
@@ -3431,11 +3656,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;
@@ -3446,12 +3675,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);
     }
   }
 
@@ -3466,12 +3695,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);
       }
     }
   }
@@ -3918,7 +4153,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '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 = 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)}`;
 
@@ -3926,6 +4161,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-';
@@ -4020,6 +4257,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
       }
     };
   }
@@ -4087,7 +4346,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,
@@ -4097,6 +4359,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 = {
@@ -4108,9 +4553,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>
     `;
   }
 }
@@ -4119,7 +4565,7 @@ var shapeSizeCss = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.sh
 
 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$1 = 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$1 = 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 = css``;
 
@@ -4357,7 +4803,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202602140013';
+var formkitVersion$1 = '202603102257';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -4471,7 +4917,7 @@ 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.
@@ -4483,6 +4929,13 @@ class AuroElement extends LitElement {
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
 class AuroDropdown extends AuroElement {
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -4548,15 +5001,6 @@ class AuroDropdown extends AuroElement {
     this.shift = false;
     this.autoPlacement = false;
 
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
-
     /**
      * @private
      */
@@ -4630,6 +5074,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);
+    }
   }
 
   /**
@@ -4637,13 +5093,37 @@ class AuroDropdown extends AuroElement {
    * 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 {
@@ -4901,6 +5381,16 @@ class AuroDropdown extends AuroElement {
        */
       tabIndex: {
         type: Number
+      },
+
+      /**
+       * Accessible label for the dropdown bib dialog element.
+       * @private
+       */
+      bibDialogLabel: {
+        type: String,
+        attribute: false,
+        reflect: false
       }
     };
   }
@@ -4952,7 +5442,10 @@ class AuroDropdown extends AuroElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.floater.disconnect();
+    if (this.floater) {
+      this.floater.hideBib('disconnect');
+      this.floater.disconnect();
+    }
     this.clearTriggerFocusEventBinding();
   }
 
@@ -4974,11 +5467,22 @@ class AuroDropdown extends AuroElement {
 
     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);
+    }
   }
 
   /**
@@ -4996,11 +5500,28 @@ class AuroDropdown extends AuroElement {
   }
 
   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
@@ -5008,9 +5529,9 @@ class AuroDropdown extends AuroElement {
      */
     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;
@@ -5070,21 +5591,20 @@ class AuroDropdown extends AuroElement {
    * @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;
   }
 
   /**
@@ -5300,13 +5820,14 @@ class AuroDropdown extends AuroElement {
               <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 }
@@ -5320,8 +5841,8 @@ class AuroDropdown extends AuroElement {
           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>
@@ -5728,6 +6249,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 }));
@@ -6014,7 +6547,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202603102257';
 
 var styleCss = 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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
@@ -6534,28 +7067,76 @@ class AuroSelect extends AuroElement$1 {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    // Prevent dropdown from closing on focus loss since menu content is slotted
+    // from select's light DOM and won't be detected by dropdown's contains() check.
+    // Select handles Tab key closing explicitly, ESC via dialog cancel, and
+    // click outside works correctly via composedPath().
+    this.dropdown.noHideOnThisFocusLoss = true;
+
+
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.isPopoverVisible = this.dropdown.isPopoverVisible;
 
+      // Clear aria-activedescendant when dropdown closes
+      if (!this.dropdown.isPopoverVisible) {
+        this.dropdown.setActiveDescendant(null);
+        this.optionActive = null;
+
+        restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
+      }
+
       if (this.dropdown.isPopoverVisible) {
         this.updateMenuShapeSize();
-        // wait til the bib gets fully rendered
-        setTimeout(() => {
-          if (this.dropdown.isBibFullscreen) {
-            // trigger holds the focus since menu is not a focusable element.
-            this.dropdown.trigger.focus();
 
-            // default focus indicator on the first menu option
-            if (this.menu.index < 0) {
-              this.menu.navigateOptions('down');
+        if (this.dropdown.isBibFullscreen) {
+          // 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 (close button) across
+          // multiple Lit update cycles before moving focus into the bib
+          doubleRaf(() => {
+            this.bibtemplate.focusCloseButton();
+
+            // If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
+            // No selection → no highlight
+            if (this.optionSelected && !Array.isArray(this.optionSelected)) {
+              this.menu.updateActiveOption(this.optionSelected);
+            } else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
+              this.menu.updateActiveOption(this.optionSelected[0]);
             }
-          }
-        });
+
+            // Scroll the selected option into view when dropdown opens
+            this.scrollSelectedOptionIntoView();
+          });
+        } else {
+          // wait til the bib gets fully rendered
+          setTimeout(() => {
+            // Keep focus on trigger so aria-activedescendant announces menu options
+            this.dropdown.trigger.focus();
+
+            // Scroll the selected option into view when dropdown opens
+            this.scrollSelectedOptionIntoView();
+          });
+        }
       }
     });
 
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       this.updateMenuShapeSize();
+
+      // When switching to fullscreen while open, focus the close button
+      // so it's not stuck on the trigger behind the dialog
+      if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
+        this.dropdown.trigger.inert = true;
+        doubleRaf(() => {
+          this.bibtemplate.focusCloseButton();
+        });
+      } else if (!this.dropdown.isBibFullscreen) {
+        this.dropdown.trigger.inert = false;
+      }
     });
 
     // setting up bibtemplate
@@ -6565,6 +7146,12 @@ class AuroSelect extends AuroElement$1 {
       this.dropdown.dropdownWidth = this.customBibWidth;
     }
 
+    // Pass label text to the dropdown bib for accessible dialog naming
+    const labelElement = this.querySelector('span[slot="label"]');
+    if (labelElement) {
+      this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
+    }
+
     // Exposes the CSS parts from the dropdown for styling
     this.dropdown.exposeCssParts();
   }
@@ -6666,6 +7253,23 @@ class AuroSelect extends AuroElement$1 {
     }
   }
 
+  /**
+   * Sets aria-setsize and aria-posinset on each menu option so screen readers
+   * can announce position even when the listbox context is broken by
+   * shadow DOM boundaries.
+   * @private
+   * @returns {void}
+   */
+  updateOptionPositions() {
+    if (!this.menu || !this.menu.options) return;
+    const visibleOptions = this.menu.options;
+    const count = visibleOptions.length;
+    visibleOptions.forEach((option, index) => {
+      option.setAttribute('aria-setsize', count);
+      option.setAttribute('aria-posinset', index + 1);
+    });
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -6687,13 +7291,38 @@ class AuroSelect extends AuroElement$1 {
     this.updateMenuShapeSize();
     this.setMenuValue(this.value);
 
+    // Set accessible name on the menu for screen readers based on the label slot content
+    const labelElement = this.querySelector('[slot="label"]');
+    if (labelElement) {
+      this.menu.setAttribute('aria-label', labelElement.textContent.trim());
+    }
+
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;
     }
 
     this.options = this.menu.options;
-    this.menu.setAttribute('aria-hidden', 'true');
+    this.updateOptionPositions();
     this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
+
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
+      this.optionActive = evt.detail;
+
+      if (this.dropdown) {
+        this.dropdown.setActiveDescendant(this.optionActive);
+      }
+
+      // Announce the active option for screen readers
+      if (this.optionActive) {
+        const optionText = this.optionActive.textContent.trim();
+        const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
+        announceToScreenReader(this.shadowRoot, `${optionText}${selectedState}`);
+      }
+
+      if (this.dropdown.isPopoverVisible) {
+        this.scrollActiveOptionIntoView();
+      }
+    });
     this.menu.addEventListener('auroMenu-selectedOption', (event) => {
 
       // Update the displayed value
@@ -6706,6 +7335,14 @@ class AuroSelect extends AuroElement$1 {
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
+
+      // 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);
     });
   }
 
@@ -6717,66 +7354,7 @@ class AuroSelect extends AuroElement$1 {
   configureSelect() {
     this.nativeSelect = this.shadowRoot.querySelector('select');
 
-    this.addEventListener('keydown', (evt) => {
-
-      // when the focus is on trigger not on close button
-      if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
-        if (evt.key === 'ArrowUp') {
-          evt.preventDefault();
-
-          this.dropdown.show();
-
-          if (this.dropdown.isPopoverVisible) {
-            this.menu.navigateOptions('up');
-          }
-
-          return;
-        }
-
-        if (evt.key === 'ArrowDown') {
-          evt.preventDefault();
-
-          this.dropdown.show();
-
-          if (this.dropdown.isPopoverVisible) {
-            this.menu.navigateOptions('down');
-          }
-
-          return;
-        }
-
-        if (evt.key === 'Enter') {
-          if (!this.dropdown.isPopoverVisible) {
-            evt.preventDefault();
-            this.menu.makeSelection();
-          }
-
-          return;
-        }
-      }
-
-      if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
-        if (this.dropdown.isBibFullscreen) {
-          evt.preventDefault();
-
-          // when the focus is on trigger not on close button
-          if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
-            // `dropdown.focus` will move focus to the first focusable element in bib when it's open,
-            // when bib it not open, it will focus onto trigger.
-            this.dropdown.focus();
-          } else {
-            // when close button has the focus, move focus back to the trigger
-            this.dropdown.trigger.focus();
-          }
-        } else {
-          this.dropdown.hide();
-        }
-        return;
-      }
-
-      // Handle all other key presses by updating the active option based on the key pressed
-      this.updateActiveOptionBasedOnKey(evt.key);
-    });
+    applyKeyboardStrategy(this, selectKeyboardStrategy);
 
     this.addEventListener('focusin', this.handleFocusin);
 
@@ -6786,6 +7364,16 @@ class AuroSelect extends AuroElement$1 {
     });
   }
 
+  /**
+   * Updates the active option in the menu.
+   * @param {number} index - Index of the option to make active.
+   */
+  updateActiveOption(index) {
+    if (this.menu) {
+      this.menu.index = index;
+    }
+  }
+
   /**
    * Updates the active option in the menu based on keyboard input.
    * @private
@@ -6949,6 +7537,48 @@ class AuroSelect extends AuroElement$1 {
     this.menu.value = value;
   }
 
+  /**
+   * Scrolls the currently active option into view.
+   * Respects user's motion preferences for accessibility.
+   * @private
+   */
+  scrollActiveOptionIntoView() {
+    if (!this.menu || !this.menu.optionActive) return;
+
+    // Check if user prefers reduced motion for accessibility
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    this.menu.optionActive.scrollIntoView({
+      alignToTop: false,
+      block: "nearest",
+      behavior: prefersReducedMotion ? "auto" : "smooth"
+    });
+  }
+
+  /**
+   * Scrolls the currently selected option into view.
+   * Respects user's motion preferences for accessibility.
+   * @private
+   */
+  scrollSelectedOptionIntoView() {
+    if (!this.menu || !this.menu.optionSelected) return;
+
+    const selectedOption = this.multiSelect && Array.isArray(this.menu.optionSelected)
+      ? this.menu.optionSelected[0]
+      : this.menu.optionSelected;
+
+    if (selectedOption) {
+      // Check if user prefers reduced motion for accessibility
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+      selectedOption.scrollIntoView({
+        alignToTop: true,
+        block: "start",
+        behavior: prefersReducedMotion ? "auto" : "smooth"
+      });
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('multiSelect') && !changedProperties.has('value')) {
       this.clearSelection();
@@ -6960,7 +7590,9 @@ class AuroSelect extends AuroElement$1 {
       this._updateNativeSelect();
       this.validate();
       this.hideBib();
-      this.focus();
+      if (this.dropdown && this.dropdown.trigger) {
+        this.dropdown.trigger.focus();
+      }
 
       // LEGACY EVENT
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
@@ -7009,6 +7641,7 @@ class AuroSelect extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
+    this.menu.reset();
     this.validation.reset(this);
   }
 
@@ -7158,7 +7791,7 @@ class AuroSelect extends AuroElement$1 {
         </div>
         <${this.dropdownTag}
           appearance="${this.onDark ? 'inverse' : this.appearance}"
-          a11yRole="select"
+          .a11yRole=${"combobox"}
           ?autoPlacement="${this.autoPlacement}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           ?matchWidth="${this.matchWidth}"
@@ -7173,16 +7806,16 @@ class AuroSelect extends AuroElement$1 {
           part="dropdown"
           shape="${this.shape}"
           size="${this.size}">
-          <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
+          <div slot="trigger" id="triggerFocus" class="triggerContent">
             <div class="accents left">
               <slot name="typeIcon"></slot>
             </div>
             <div class="mainContent">
               <div class="${classMap(valueContainerClasses)}">
-                <label class="${classMap(this.commonLabelClasses)}">
+                <span id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
                   ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
-                </label>
+                </span>
                 <div class="value" id="value"></div>
                 <div id="placeholder" class="${classMap(placeholderClass)}">
                   ${this.placeholder}
@@ -7194,7 +7827,6 @@ class AuroSelect extends AuroElement$1 {
             </div>
             <div class="accents right"></div>
           </div>
-          <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
             <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
@@ -7238,6 +7870,7 @@ class AuroSelect extends AuroElement$1 {
         </div>
         <${this.dropdownTag}
           appearance="${this.onDark ? 'inverse' : this.appearance}"
+          .a11yRole=${"combobox"}
           ?autoPlacement="${this.autoPlacement}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           ?matchWidth="${this.matchWidth}"
@@ -7251,16 +7884,16 @@ class AuroSelect extends AuroElement$1 {
           part="dropdown"
           shape="${this.shape}"
           size="${this.size}">
-          <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
+          <div slot="trigger" id="triggerFocus" class="triggerContent">
             <div class="accents left">
               <slot name="typeIcon"></slot>
             </div>
             <div class="mainContent">
               <div class="${classMap(valueContainerClasses)}">
-                <label class="${classMap(this.commonLabelClasses)}">
+                <span id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
                   ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
-                </label>
+                </span>
                 <div class="value body-default" id="value"></div>
                 <div id="placeholder" class="${classMap(placeholderClass)}">
                   ${this.placeholder}
@@ -7272,7 +7905,6 @@ class AuroSelect extends AuroElement$1 {
             </div>
             <div class="accents right"></div>
           </div>
-          <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
             <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
@@ -7282,6 +7914,7 @@ class AuroSelect extends AuroElement$1 {
           </div>
         </${this.dropdownTag}>
         ${this.renderNativeSelect()}
+        <span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
       </div>
     `;
   }
@@ -7322,6 +7955,7 @@ class AuroSelect extends AuroElement$1 {
         </div>
         <${this.dropdownTag}
           appearance="${this.onDark ? 'inverse' : this.appearance}"
+          .a11yRole=${"combobox"}
           ?autoPlacement="${this.autoPlacement}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           ?matchWidth="${!this.flexMenuWidth}"
@@ -7335,16 +7969,16 @@ class AuroSelect extends AuroElement$1 {
           part="dropdown"
           shape="${this.shape}"
           size="${this.size}">
-          <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
+          <div slot="trigger" id="triggerFocus" class="triggerContent">
             <div class="accents left">
               <slot name="typeIcon"></slot>
             </div>
             <div class="mainContent">
               <div class="${classMap(valueContainerClasses)}">
-                <label class="${classMap(this.commonLabelClasses)}">
+                <span id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
                   ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
-                </label>
+                </span>
                 <div class="${classMap(valueClasses)}" id="value"></div>
                 <div id="placeholder" class="${classMap(placeholderClass)}">
                   ${this.placeholder}
@@ -7356,7 +7990,6 @@ class AuroSelect extends AuroElement$1 {
             </div>
             <div class="accents right"></div>
           </div>
-          <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
             <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
@@ -7366,6 +7999,7 @@ class AuroSelect extends AuroElement$1 {
           </div>
         </${this.dropdownTag}>
         ${this.renderNativeSelect()}
+        <span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
       </div>
     `;
   }