@aurodesignsystem/auro-formkit 5.10.0 → 5.11.0

package/components/counter/dist/index.js

@@ -256,7 +256,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
       </div>
     `}};
 
-var iconVersion$2 = '9.1.0';
+var iconVersion$2 = '9.1.2';
 
 class DateFormatter {
 
@@ -1014,7 +1014,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')) {
@@ -1038,7 +1038,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;
@@ -1129,6 +1129,34 @@ 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.
+ */
+
+
+/**
+ * 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);
+  });
+}
+
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -1392,7 +1420,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.
@@ -1409,6 +1437,13 @@ var formkitVersion$1 = '202602140013';
  * @slot description - Descriptive content for the counter.
  */
 class AuroCounter extends LitElement {
+  static get shadowRootOptions() {
+    return {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -1455,14 +1490,6 @@ class AuroCounter extends LitElement {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
 
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   connectedCallback() {
@@ -1777,7 +1804,7 @@ class AuroCounter extends LitElement {
             aria-valuemax="${this.max}" 
             aria-valuemin="${this.min}" 
             aria-valuenow="${this.value}"
-            aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+            aria-valuetext="'${this.value !== undefined ? this.value : this.min}'"
             role="spinbutton" 
             tabindex="${this.disabled ? '-1' : '0'}" 
           >
@@ -3544,11 +3571,9 @@ const computePosition = (reference, floating, options) => {
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
-
 const MAX_CONFIGURATION_COUNT = 10;
 
 class AuroFloatingUI {
-
   /**
    * @private
    */
@@ -3563,7 +3588,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
@@ -3571,7 +3600,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) {
@@ -3590,8 +3619,8 @@ class AuroFloatingUI {
         }
       };
 
-      window.addEventListener('mousedown', mouseEventGlobalHandler);
-      window.addEventListener('mouseup', mouseEventGlobalHandler);
+      window.addEventListener("mousedown", mouseEventGlobalHandler);
+      window.addEventListener("mouseup", mouseEventGlobalHandler);
     }
   }
 
@@ -3639,11 +3668,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;
@@ -3661,28 +3691,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";
@@ -3703,37 +3739,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`,
         });
       });
     }
@@ -3746,12 +3784,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 = "";
     }
   }
 
@@ -3765,23 +3803,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) {
@@ -3796,21 +3835,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);
     }
@@ -3842,19 +3886,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;
     }
 
@@ -3866,12 +3915,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;
@@ -3884,9 +3948,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;
         }
@@ -3894,17 +3963,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);
   }
 
@@ -3912,34 +3981,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;
@@ -3948,7 +4021,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) {
@@ -3962,9 +4035,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();
+        },
+      );
     }
   }
 
@@ -3975,7 +4052,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;
@@ -3995,13 +4072,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);
   }
@@ -4013,12 +4093,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);
   }
@@ -4026,30 +4109,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
@@ -4057,12 +4142,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();
           }
@@ -4081,15 +4166,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];
@@ -4117,10 +4202,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`);
@@ -4141,11 +4226,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;
@@ -4156,12 +4245,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);
     }
   }
 
@@ -4176,12 +4265,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);
       }
     }
   }
@@ -4628,7 +4723,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '9.1.2';
 
-var styleCss$2 = 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 = 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)}`;
 
@@ -4636,6 +4731,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-';
@@ -4730,6 +4827,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
       }
     };
   }
@@ -4797,7 +4916,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,
@@ -4807,6 +4929,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 = {
@@ -4818,9 +5123,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>
     `;
   }
 }
@@ -4829,7 +5135,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``;
 
@@ -5067,7 +5373,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202603102257';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {
@@ -5181,7 +5487,7 @@ let AuroElement$1 = 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.
@@ -5193,6 +5499,13 @@ let AuroElement$1 = class AuroElement extends LitElement {
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
 class AuroDropdown extends AuroElement$1 {
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement$1.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -5258,15 +5571,6 @@ class AuroDropdown extends AuroElement$1 {
     this.shift = false;
     this.autoPlacement = false;
 
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
-
     /**
      * @private
      */
@@ -5340,6 +5644,18 @@ class AuroDropdown extends AuroElement$1 {
    */
   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);
+    }
   }
 
   /**
@@ -5347,13 +5663,37 @@ class AuroDropdown extends AuroElement$1 {
    * 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 {
@@ -5611,6 +5951,16 @@ class AuroDropdown extends AuroElement$1 {
        */
       tabIndex: {
         type: Number
+      },
+
+      /**
+       * Accessible label for the dropdown bib dialog element.
+       * @private
+       */
+      bibDialogLabel: {
+        type: String,
+        attribute: false,
+        reflect: false
       }
     };
   }
@@ -5662,7 +6012,10 @@ class AuroDropdown extends AuroElement$1 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.floater.disconnect();
+    if (this.floater) {
+      this.floater.hideBib('disconnect');
+      this.floater.disconnect();
+    }
     this.clearTriggerFocusEventBinding();
   }
 
@@ -5684,11 +6037,22 @@ class AuroDropdown extends AuroElement$1 {
 
     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);
+    }
   }
 
   /**
@@ -5706,11 +6070,28 @@ class AuroDropdown extends AuroElement$1 {
   }
 
   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
@@ -5718,9 +6099,9 @@ class AuroDropdown extends AuroElement$1 {
      */
     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;
@@ -5780,21 +6161,20 @@ class AuroDropdown extends AuroElement$1 {
    * @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;
   }
 
   /**
@@ -6010,13 +6390,14 @@ class AuroDropdown extends AuroElement$1 {
               <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 }
@@ -6030,8 +6411,8 @@ class AuroDropdown extends AuroElement$1 {
           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>
@@ -6438,6 +6819,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 }));
@@ -7114,6 +7507,24 @@ class AuroCounterGroup extends AuroElement {
         this.dropdown.hide();
       }
     });
+
+    // Focus close button when fullscreen dialog opens
+    this.dropdown.addEventListener('auroDropdown-toggled', () => {
+      if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+        doubleRaf(() => {
+          this.bibtemplate.focusCloseButton();
+        });
+      }
+    });
+
+    // Tab closes the fullscreen dialog
+    // The dialog event bridge intercepts Tab and re-dispatches it as a
+    // composed keydown; this listener catches the re-dispatched event.
+    this.addEventListener('keydown', (evt) => {
+      if (evt.key === 'Tab' && this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+        this.dropdown.hide();
+      }
+    });
   }
 
   /**