@aurodesignsystem-dev/auro-formkit 0.0.0-pr1480.8 → 0.0.0-pr1482.0

package/components/select/demo/keyboard-behavior.md

@@ -18,7 +18,6 @@
 <p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex sequence.</p>
 <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
 <p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
-<p>When the <code>desktopModal</code> attribute is set, focus is also trapped within the bib on desktop viewports. All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown until it is closed.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 <p>There are no focusable elements inside the <code>&lt;auro-select></code> bib content.</p>
 <div class="note">
@@ -43,7 +42,7 @@
 </thead>
 <tbody>
 <tr>
-<td rowspan="6">ArrowDown</td>
+<td rowspan="8">ArrowDown</td>
 <td rowspan="2">-</td>
 <td>Collapsed</td>
 <td>Trigger element</td>
@@ -57,10 +56,15 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed</td>
 <td>Trigger element</td>
-<td>Opens the bib.</td>
+<td>
+            Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -70,7 +74,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed</td>
 <td>Trigger element</td>
 <td>Opens the bib.</td>
@@ -83,7 +87,25 @@
 </td>
 </tr>
 <tr>
-<td rowspan="6">ArrowUp</td>
+<td rowspan="2">Control</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>
+            Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+            Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="8">ArrowUp</td>
 <td rowspan="2">-</td>
 <td>Collapsed</td>
 <td>Trigger element</td>
@@ -97,10 +119,15 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed</td>
 <td>Trigger element</td>
-<td>Opens the bib.</td>
+<td>
+            Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -110,7 +137,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed</td>
 <td>Trigger element</td>
 <td>Opens the bib.</td>
@@ -123,6 +150,24 @@
 </td>
 </tr>
 <tr>
+<td rowspan="2">Control</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>
+            Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+            Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
 <td>End</td>
 <td>-</td>
 <td>Expanded</td>

package/components/select/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-select.md","readme.md"]
+["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]

package/components/select/dist/index.js

@@ -1257,33 +1257,50 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/**
+ * Returns the enabled (non-disabled) options for a menu, safely.
+ *
+ * Auro-menu's `options` getter returns `undefined` when the menu has no items
+ * (initItems sets `items` to undefined for empty menus). Callers that reach for
+ * `.find()` / `[...spread]` would otherwise crash; this helper normalizes the
+ * empty case to `[]` so array methods are always safe.
+ *
+ * @param {HTMLElement | null | undefined} menu - The auro-menu element.
+ * @returns {Array<HTMLElement>} Non-disabled options, empty array when none.
+ */
+function getEnabledOptions(menu) {
+  return (menu?.options || []).filter((option) => !option.disabled);
+}
+
 /* eslint-disable new-cap */
 
 const selectKeyboardStrategy = {
   ArrowDown(component, evt, ctx) {
     evt.preventDefault();
-    if (evt.altKey || evt.metaKey) {
-      // navigate to last enabled option
-      selectKeyboardStrategy.End(component, evt, ctx);
-      return;
+    if (ctx.isExpanded) {
+      if (evt.altKey || evt.ctrlKey || evt.metaKey) {
+        // navigate to last enabled option
+        selectKeyboardStrategy.End(component, evt, ctx);
+      } else {
+        navigateArrow(component, 'down', { ctx });
+      }
+    } else {
+      component.dropdown.show();
     }
-    navigateArrow(component, 'down', {
-      ctx,
-      showFn: () => component.dropdown.show(),
-    });
   },
 
   ArrowUp(component, evt, ctx) {
     evt.preventDefault();
-    if (evt.altKey || evt.metaKey) {
-      // navigate to first enabled option
-      selectKeyboardStrategy.Home(component, evt, ctx);
-      return;
+    if (ctx.isExpanded) {
+      if (evt.altKey || evt.ctrlKey || evt.metaKey) {
+        // navigate to first enabled option
+        selectKeyboardStrategy.Home(component, evt, ctx);
+      } else {
+        navigateArrow(component, 'up', { ctx });
+      }
+    } else {
+      component.dropdown.show();
     }
-    navigateArrow(component, 'up', {
-      ctx,
-      showFn: () => component.dropdown.show(),
-    });
   },
 
   Escape(component, evt, ctx) {
@@ -1303,7 +1320,8 @@ const selectKeyboardStrategy = {
     }
     evt.preventDefault();
     evt.stopPropagation();
-    const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
+    // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
+    const lastOption = getEnabledOptions(component.menu).pop();
     if (lastOption) {
       component.menu.updateActiveOption(lastOption);
     }
@@ -1325,7 +1343,7 @@ const selectKeyboardStrategy = {
     }
     evt.preventDefault();
     evt.stopPropagation();
-    const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
+    const [firstOption] = getEnabledOptions(component.menu);
     if (firstOption) {
       component.menu.updateActiveOption(firstOption);
     }
@@ -4635,7 +4653,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
   });
 }
 
-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([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2 = 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)}`;
 
@@ -5266,7 +5284,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605261805';
+var formkitVersion$1 = '202606082059';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -5446,7 +5464,6 @@ class AuroDropdown extends AuroElement {
   _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
-    this.desktopModal = false;
     this.disabled = false;
     this.disableKeyboardHandling = false;
     this.error = false;
@@ -5627,14 +5644,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
-       */
-      desktopModal: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
        */
@@ -5922,15 +5931,6 @@ class AuroDropdown extends AuroElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearPageInert();
-    if (this._bibTabHandler) {
-      this.removeEventListener('keydown', this._bibTabHandler);
-      this._bibTabHandler = undefined;
-    }
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
-    }
     if (this.floater) {
       this.floater.hideBib('disconnect');
       this.floater.disconnect();
@@ -5958,45 +5958,19 @@ class AuroDropdown extends AuroElement {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        this.bibElement.value.open(this.isBibFullscreen);
-        this.updateFocusTrap();
-
-        // Desktop modal: make siblings inert so content outside is not interactive
-        if (this.desktopModal && !this.isBibFullscreen) {
-          this._setPageInert();
-        }
+        const useModal = this.isBibFullscreen;
+        this.bibElement.value.open(useModal);
       } else {
         this.bibElement.value.close();
-        this._clearPageInert();
       }
     }
 
     // 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.bibElement.value.close();
-      this.bibElement.value.open(this.isBibFullscreen);
-
-      // Re-initialize focus management for the new strategy
-      this.updateFocusTrap();
-
-      // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
-      if (this.desktopModal && !this.isBibFullscreen) {
-        this._setPageInert();
-      } else {
-        this._clearPageInert();
-      }
-    }
-
-    // Handle desktopModal toggled while the dropdown is already open.
-    // Re-initialize focus trapping and page inert state to match the new mode.
-    if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
-      this.updateFocusTrap();
-      if (this.desktopModal) {
-        this._setPageInert();
-      } else {
-        this._clearPageInert();
-      }
+      this.bibElement.value.open(useModal);
     }
   }
 
@@ -6006,14 +5980,8 @@ class AuroDropdown extends AuroElement {
    * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
    */
   handleDropdownToggle(event) {
+    this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
-
-    // Tear down FocusTrap when closing. Creation happens in updated()
-    // after the dialog is open so getFocusableElements can find content.
-    if (!this.isPopoverVisible) {
-      this.updateFocusTrap();
-    }
-
     const eventType = event.detail.eventType || "unknown";
     if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
       this.trigger.focus();
@@ -6112,178 +6080,19 @@ class AuroDropdown extends AuroElement {
    * @private
    */
   updateFocusTrap() {
-    // Always clean up existing handlers/traps before setting up new ones
-    // to prevent duplicate listeners on repeated calls.
-    if (this._bibTabHandler) {
-      this.removeEventListener('keydown', this._bibTabHandler);
-      this._bibTabHandler = undefined;
-    }
-
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
-    }
-
     if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
-        if (this.desktopModal) {
-          // Desktop modal: trap focus only within the bib content.
-          // Can't use FocusTrap on the bib element because keydown events
-          // from slotted content bubble through the dropdown host (light DOM),
-          // not through the bib (shadow projection target). Using FocusTrap
-          // on the dropdown would include the trigger in the tab cycle.
-          // Instead, listen for Tab on the dropdown and manually wrap focus
-          // within the bib's focusable elements.
-          this._bibTabHandler = (event) => {
-            if (event.key !== 'Tab') {
-              return;
-            }
-
-            // Collect focusable elements from the bib content.
-            const focusables = getFocusableElements(this.bibContent);
-
-            // Fallback: try from slotted content directly
-            if (!focusables.length) {
-              const slot = this.shadowRoot.querySelector('.slotContent slot');
-              const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
-
-              for (const node of assignedNodes) {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                  focusables.push(...getFocusableElements(node));
-                }
-              }
-            }
-
-            if (!focusables.length) {
-              return;
-            }
-
-            event.preventDefault();
-
-            const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
-
-            // Walk the active element chain through shadow roots
-            const actives = this._getActiveElements();
-
-            let idx = focusables.findIndex((el) => actives.includes(el));
-
-            if (idx === -1) { // eslint-disable-line no-magic-numbers
-              // Focus is not on a known element — move to first/last
-              idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
-            }
-
-            // Try each element in order, skipping any that can't receive focus
-            // (e.g. hidden elements, elements in collapsed sections)
-            for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
-              let nextIdx = idx + direction;
-
-              // Wrap around
-              if (nextIdx < 0) {
-                nextIdx = focusables.length - 1;
-              } else if (nextIdx >= focusables.length) {
-                nextIdx = 0;
-              }
-
-              focusables[nextIdx].focus();
-
-              // Verify focus actually moved to the target
-              const newActives = this._getActiveElements();
-
-              if (newActives.includes(focusables[nextIdx])) {
-                return;
-              }
-
-              // Focus didn't stick — skip this element and try the next
-              idx = nextIdx;
-            }
-          };
-          this.addEventListener('keydown', this._bibTabHandler);
-
-          // Move initial focus into the bib content, matching FocusTrap behavior
-          requestAnimationFrame(() => {
-            const focusables = getFocusableElements(this.bibContent);
-            if (focusables.length) {
-              focusables[0].focus();
-            }
-          });
-        } else {
-          // Normal desktop: use FocusTrap on the bib element
-          this.focusTrap = new FocusTrap(this.bibContent);
-          this.focusTrap.focusFirstElement();
-        }
+        // Desktop: show() doesn't trap focus, so use FocusTrap
+        this.focusTrap = new FocusTrap(this.bibContent);
+        this.focusTrap.focusFirstElement();
       }
       // Fullscreen: showModal() provides native focus trapping
-    }
-  }
-
-  /**
-   * Returns the chain of active (focused) elements through shadow roots.
-   * @private
-   * @returns {Array<HTMLElement>}
-   */
-  _getActiveElements() {
-    let { activeElement } = document;
-    const actives = [activeElement];
-
-    while (activeElement?.shadowRoot?.activeElement) {
-      activeElement = activeElement.shadowRoot.activeElement;
-      actives.push(activeElement);
-    }
-
-    return actives;
-  }
-
-  /**
-   * Sets `inert` on sibling elements of the dropdown's top-level host
-   * so that content outside the dropdown is not interactive while the modal is open.
-   * Walks up through shadow DOM boundaries to find the outermost host element
-   * in the light DOM, then sets `inert` on siblings at each ancestor level
-   * to ensure all page content outside the host subtree is inert.
-   * @private
-   */
-  _setPageInert() {
-    if (this._inertSiblings) {
       return;
     }
 
-    this._inertSiblings = [];
-
-    // Walk up through shadow DOM boundaries to find the topmost host
-    // element in the light DOM. For example, if this dropdown is inside
-    // auro-datepicker's shadow DOM, we walk up to the datepicker element
-    // so we set inert on its siblings — not on the datepicker itself.
-    let host = this;
-    while (host.getRootNode() instanceof ShadowRoot) {
-      host = host.getRootNode().host;
-    }
-
-    // Walk up the ancestor chain, inerting siblings at each level
-    // to ensure the entire page outside the host subtree is inert.
-    let current = host;
-    while (current.parentElement) {
-      const parent = current.parentElement;
-      for (const sibling of parent.children) {
-        if (sibling !== current) {
-          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
-          sibling.inert = true;
-        }
-      }
-      current = parent;
-    }
-  }
-
-  /**
-   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
-   * @private
-   */
-  _clearPageInert() {
-    if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
-      }
-      this._inertSiblings = undefined;
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
     }
   }
 
@@ -6522,7 +6331,6 @@ class AuroDropdown extends AuroElement {
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
-          ?desktopmodal="${this.desktopModal}"
           .dialogLabel="${this.bibDialogLabel}"
           ${ref(this.bibElement)}
           >
@@ -6890,14 +6698,6 @@ class AuroBibtemplate extends LitElement {
       large: {
         type: Boolean,
         reflect: true
-      },
-
-      /**
-       * If declared, the footer slot will be rendered even when not in fullscreen mode.
-       */
-      showFooter: {
-        type: Boolean,
-        reflect: true
       }
     };
   }
@@ -7000,7 +6800,7 @@ class AuroBibtemplate extends LitElement {
           <slot></slot>
         </div>
 
-      ${this.isFullscreen || this.showFooter ? html`
+      ${this.isFullscreen ? html`
         <div id="footerContainer">
           <slot name="footer"></slot>
         </div>` : null}
@@ -7237,7 +7037,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605261805';
+var formkitVersion = '202606082059';
 
 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);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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}`;
 
@@ -7789,7 +7589,7 @@ class AuroSelect extends AuroElement$1 {
             this.menu.updateActiveOption(this.optionSelected[0]);
           } else {
             // If no activeOption has yet to be set, then make the first enabled option active by default
-            const firstActive = this.menu.menuService.menuOptions.find((option) => !option.disabled);
+            const [firstActive] = getEnabledOptions(this.menu);
             this.menu.updateActiveOption(firstActive);
           }
         }
@@ -8013,12 +7813,23 @@ class AuroSelect extends AuroElement$1 {
       this.menu.multiSelect = this.multiSelect;
     }
 
+    // Menu's items are populated by initItems() during its firstUpdated/slotchange.
+    // Since the parent select's firstUpdated runs before the child menu's, call initItems()
+    // here so renderNativeSelect can render the native <option> list on first paint.
+    if (typeof this.menu.initItems === 'function') {
+      this.menu.initItems();
+    }
     this.options = this.menu.options;
     this.updateOptionPositions();
     this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
-    this.menu.addEventListener("auroMenu-deselectPrevented", () => {
-      this.hideBib();
+    this.menu.addEventListener("auroMenu-selectValueFailure", () => {
+      this.value = undefined;
+      this.optionSelected = this.multiSelect ? [] : undefined;
+      // The trigger label is rendered imperatively into #value, so a property
+      // change alone won't clear it. Refresh so stale text doesn't linger when
+      // a runtime value change fails to match any option.
+      this.updateDisplayedValue();
     });
 
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
@@ -8040,16 +7851,20 @@ class AuroSelect extends AuroElement$1 {
       }
     });
 
-    this.menu.addEventListener('auroMenu-selectedOption', (event) => {
+    this.menu.addEventListener('auroMenu-selectedOption', () => {
 
       // Update the displayed value
       this.updateDisplayedValue();
 
-      const options = event.detail.options || [];
-
-      this.value = event.detail.stringValue;
+      this.value = this.menu.value;
 
-      this.optionSelected = this.multiSelect ? options : options[0];
+      // Clone the multiselect array so external mutation of select.optionSelected
+      // can't reach back into menu's internal state through a shared reference.
+      let nextSelected = this.menu.optionSelected;
+      if (this.multiSelect) {
+        nextSelected = Array.isArray(nextSelected) ? [...nextSelected] : [];
+      }
+      this.optionSelected = nextSelected;
 
       if (this.dropdown.isPopoverVisible && !this.multiSelect) {
         this.dropdown.hide();
@@ -8058,7 +7873,7 @@ class AuroSelect extends AuroElement$1 {
 
       // 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 selectedValue = this.menu.currentLabel;
       const announcementDelay = 300;
       setTimeout(() => {
         announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
@@ -8254,7 +8069,7 @@ class AuroSelect extends AuroElement$1 {
 
   setMenuValue(value) {
     if (!this.menu) return;
-    this.menu.value = value;
+    this.menu.selectByValue(value);
   }
 
   /**