@aurodesignsystem-dev/auro-formkit 0.0.0-pr741.0 → 0.0.0-pr750.0

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

@@ -689,19 +689,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -896,10 +896,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }
@@ -3274,6 +3274,267 @@ class AuroFloatingUI {
   }
 }
 
+// Selectors for focusable elements
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[role="tab"]:not([disabled])',
+  '[role="link"]:not([disabled])',
+  '[role="button"]:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"])'
+];
+
+// List of custom components that are known to be focusable
+const FOCUSABLE_COMPONENTS = [
+  'auro-checkbox',
+  'auro-radio',
+  'auro-dropdown',
+  'auro-button',
+  'auro-combobox',
+  'auro-input',
+  'auro-counter',
+  'auro-menu',
+  'auro-select',
+  'auro-datepicker',
+  'auro-hyperlink',
+  'auro-accordion',
+];
+
+/**
+ * Determines if a given element is a custom focusable component.
+ * Returns true if the element matches a known focusable component and is not disabled.
+ *
+ * @param {HTMLElement} element The element to check for focusability.
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
+ */
+function isFocusableComponent(element) {
+  const componentName = element.tagName.toLowerCase();
+
+  // Guard Clause: Element is a focusable component
+  if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
+
+  // Guard Clause: Element is not disabled
+  if (element.hasAttribute('disabled')) return false;
+
+  // Guard Clause: The element is a hyperlink and has no href attribute
+  if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
+
+  // If all guard clauses pass, the element is a focusable component
+  return true;
+}
+
+/**
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+ * Returns a unique, ordered array of elements that can receive focus.
+ *
+ * @param {HTMLElement} container The container to search within
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+ */
+function getFocusableElements(container) {
+  // Get elements in DOM order by walking the tree
+  const orderedFocusableElements = [];
+
+  // Define a recursive function to collect focusable elements in DOM order
+  const collectFocusableElements = (root) => {
+    // Check if current element is focusable
+    if (root.nodeType === Node.ELEMENT_NODE) {
+      // Check if this is a custom component that is focusable
+      const isComponentFocusable = isFocusableComponent(root);
+
+      if (isComponentFocusable) {
+        // Add the component itself as a focusable element and don't traverse its shadow DOM
+        orderedFocusableElements.push(root);
+        return; // Skip traversing inside this component
+      }
+
+      // Check if the element itself matches any selector
+      for (const selector of FOCUSABLE_SELECTORS) {
+        if (root.matches?.(selector)) {
+          orderedFocusableElements.push(root);
+          break; // Once we know it's focusable, no need to check other selectors
+        }
+      }
+
+      // Process shadow DOM only for non-Auro components
+      if (root.shadowRoot) {
+        // Process shadow DOM children in order
+        if (root.shadowRoot.children) {
+          Array.from(root.shadowRoot.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+
+      // Process slots and their assigned nodes in order
+      if (root.tagName === 'SLOT') {
+        const assignedNodes = root.assignedNodes({ flatten: true });
+        for (const node of assignedNodes) {
+          collectFocusableElements(node);
+        }
+      } else {
+        // Process light DOM children in order
+        if (root.children) {
+          Array.from(root.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+    }
+  };
+
+  // Start the traversal from the container
+  collectFocusableElements(container);
+
+  // Remove duplicates that might have been collected through different paths
+  // while preserving order
+  const uniqueElements = [];
+  const seen = new Set();
+
+  for (const element of orderedFocusableElements) {
+    if (!seen.has(element)) {
+      seen.add(element);
+      uniqueElements.push(element);
+    }
+  }
+
+  return uniqueElements;
+}
+
+/**
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
+ */
+class FocusTrap {
+  /**
+   * Creates a new FocusTrap instance for the given container element.
+   * Initializes event listeners and prepares the container for focus management.
+   *
+   * @param {HTMLElement} container The DOM element to trap focus within.
+   * @throws {Error} If the provided container is not a valid HTMLElement.
+   */
+  constructor(container) {
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("FocusTrap requires a valid HTMLElement.");
+    }
+
+    this.container = container;
+    this.tabDirection = 'forward'; // or 'backward'
+
+    this._init();
+  }
+
+  /**
+   * Initializes the focus trap by setting up event listeners and attributes on the container.
+   * Prepares the container for focus management, including support for shadow DOM and inert attributes.
+   *
+   * @private
+   */
+  _init() {
+
+    // Add inert attribute to prevent focusing programmatically as well (if supported)
+    if ('inert' in HTMLElement.prototype) {
+      this.container.inert = false; // Ensure the container isn't inert
+      this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
+    }
+
+    // Track tab direction
+    this.container.addEventListener('keydown', this._onKeydown);
+  }
+
+  /**
+   * Handles keydown events to manage tab navigation within the container.
+   * Ensures that focus wraps around when reaching the first or last focusable element.
+   *
+   * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
+   * @private
+   */
+  _onKeydown = (e) => {
+    
+    if (e.key === 'Tab') {
+
+      // Set the tab direction based on the key pressed
+      this.tabDirection = e.shiftKey ? 'backward' : 'forward';
+
+      // Get the active element(s) in the document and shadow root
+      // This will include the active element in the shadow DOM if it exists
+      // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
+      let activeElement = document.activeElement;
+      const actives =  [activeElement];
+      while (activeElement?.shadowRoot?.activeElement) {
+        actives.push(activeElement.shadowRoot.activeElement);
+        activeElement = activeElement.shadowRoot.activeElement;
+      }
+
+      // Update the focusable elements
+      const focusables = this._getFocusableElements();
+
+      // If we're at either end of the focusable elements, wrap around to the other end
+      const focusIndex =
+        (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
+          ? focusables.length - 1
+          : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
+            ? 0
+            : null;
+
+      if (focusIndex !== null) {
+        focusables[focusIndex].focus();
+        e.preventDefault(); // Prevent default tab behavior
+        e.stopPropagation(); // Stop the event from bubbling up
+      }
+    }
+  };
+
+  /**
+   * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+   * Returns a unique, ordered array of elements that can receive focus.
+   *
+   * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+   * @private
+   */
+  _getFocusableElements() {
+    // Use the imported utility function to get focusable elements
+    const elements = getFocusableElements(this.container);
+    
+    // Filter out any elements with the 'focus-bookend' class
+    return elements;
+  }
+
+  /**
+   * Moves focus to the first focusable element within the container.
+   * Useful for setting initial focus when activating the focus trap.
+   */
+  focusFirstElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[0].focus();
+  }
+
+  /**
+   * Moves focus to the last focusable element within the container.
+   * Useful for setting focus when deactivating or cycling focus in reverse.
+   */
+  focusLastElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[focusables.length - 1].focus();
+  }
+
+  /**
+   * Removes event listeners and attributes added by the focus trap.
+   * Call this method to clean up when the focus trap is no longer needed.
+   */
+  disconnect() {
+
+    if (this.container.hasAttribute('data-focus-trap-container')) {
+      this.container.removeAttribute('data-focus-trap-container');
+    }
+
+    this.container.removeEventListener('keydown', this._onKeydown);
+  }
+}
+
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -3912,11 +4173,11 @@ var dropdownVersion$1 = '3.0.0';
 
 var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
 
-var colorCss$1$2 = i$5`:host(:not([ondark])) .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])) .wrapper:focus-within,:host(:not([ondark])) .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([onDark])[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])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .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]) .wrapper:focus-within,:host([onDark]) .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([onDark][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][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
+var colorCss$1$2 = i$5`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .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])) .wrapper:focus-within,:host(:not([ondark])) .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([onDark])[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])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .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]) .wrapper:focus-within,:host([onDark]) .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([onDark][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][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
 
 var classicColorCss = i$5``;
 
-var classicLayoutCss = i$5`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
+var classicLayoutCss = i$5`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}`;
 
 var styleEmphasizedCss = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
 
@@ -3924,7 +4185,7 @@ var styleSnowflakeCss = i$5`:host{display:block}.wrapper{display:flex;flex:1;fle
 
 var colorCss$5 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$6 = i$5`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss$6 = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -4229,10 +4490,8 @@ let AuroElement$3 = class AuroElement extends i$2 {
 // See LICENSE in the project root for license information.
 
 
-/**
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
+/*
  * @slot - Default slot for the popover content.
- * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
@@ -4251,18 +4510,22 @@ class AuroDropdown extends AuroElement$3 {
     this.matchWidth = false;
     this.noHideOnThisFocusLoss = false;
 
-    this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
+    this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
 
     // Layout Config
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'xl';
+    this.layout = undefined;
+    this.shape = undefined;
+    this.size = undefined;
 
     this.parentBorder = false;
 
     this.privateDefaults();
   }
 
+  /**
+   * @private
+   * @returns {object} Class definition for the wrapper element.
+   */
   get commonWrapperClasses() {
     return {
       'trigger': true,
@@ -4280,13 +4543,10 @@ class AuroDropdown extends AuroElement$3 {
   privateDefaults() {
     this.chevron = false;
     this.disabled = false;
+    this.disableFocusTrap = false;
     this.error = false;
-    this.inset = false;
-    this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
-    this.a11yAutocomplete = 'none';
-    this.labeled = true;
     this.a11yRole = 'button';
     this.onDark = false;
     this.showTriggerBorders = true;
@@ -4382,6 +4642,18 @@ class AuroDropdown extends AuroElement$3 {
     this.floater.showBib();
   }
 
+  /**
+   * When bib is open, focus on the first element inside of bib.
+   * If not, trigger element will get focus.
+   */
+  focus() {
+    if (this.isPopoverVisible && this.focusTrap) {
+      this.focusTrap.focusFirstElement();
+    } else {
+      this.trigger.focus();
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -4395,6 +4667,15 @@ class AuroDropdown extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * If declared, the dropdown will only show by calling the API .show() public method.
+       * @default false
+       */
+      disableEventShow: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, applies a border around the trigger slot.
        */
@@ -4413,17 +4694,17 @@ class AuroDropdown extends AuroElement$3 {
       },
 
       /**
-       * If declared, the dropdown will be styled with the common theme.
+       * If declared, the dropdown is not interactive.
        */
-      common: {
+      disabled: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * If declared, the dropdown is not interactive.
+       * If declared, the focus trap inside of bib will be turned off.
        */
-      disabled: {
+      disableFocusTrap: {
         type: Boolean,
         reflect: true
       },
@@ -4468,22 +4749,6 @@ class AuroDropdown extends AuroElement$3 {
         reflect: true
       },
 
-      /**
-       * Makes the trigger to be full width of its parent container.
-       */
-      fluid: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If declared, will apply padding around trigger slot content.
-       */
-      inset: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If true, the dropdown bib is displayed.
        */
@@ -4527,15 +4792,6 @@ class AuroDropdown extends AuroElement$3 {
         reflect: true
       },
 
-      /**
-       * Defines if there is a label preset.
-       * @private
-       */
-      labeled: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
@@ -4596,6 +4852,9 @@ class AuroDropdown extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       *  If declared, and a function is set, that function will execute when the slot content is updated.
+       */
       onSlotChange: {
         type: Function,
         reflect: false
@@ -4610,14 +4869,6 @@ class AuroDropdown extends AuroElement$3 {
         reflect: true
       },
 
-      /**
-       * If declared, will apply border-radius to trigger and default slots.
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -4632,22 +4883,14 @@ class AuroDropdown extends AuroElement$3 {
         type: String || undefined,
         attribute: false,
         reflect: false
-      },
-
-      /**
-       * The value for the aria-autocomplete attribute of the trigger element.
-       */
-      a11yAutocomplete: {
-        type: String,
-        attribute: false,
       }
     };
   }
 
   static get styles() {
     return [
-      colorCss$1$2,
       tokensCss$1$2,
+      colorCss$1$2,
 
       // default layout
       classicColorCss,
@@ -4710,6 +4953,12 @@ class AuroDropdown extends AuroElement$3 {
       this.handleTriggerContentSlotChange();
     }
 
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
+    }
   }
 
   firstUpdated() {
@@ -4775,6 +5024,27 @@ class AuroDropdown extends AuroElement$3 {
     this.hasFocus = true;
   }
 
+  /**
+   * @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();
+      return;
+    }
+
+    // Guard Clause: Ensure there is a focus trap currently active before continuing
+    if (!this.focusTrap) {
+      return;
+    }
+
+    // If the dropdown is not open, disconnect the focus trap if it exists
+    this.focusTrap.disconnect();
+    this.focusTrap = undefined;
+  }
+
   /**
    * Function to support @focusout event.
    * @private
@@ -5060,10 +5330,7 @@ class AuroDropdown extends AuroElement$3 {
           id="bib"
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
-          ?isfullscreen="${this.isBibFullscreen}"
-          ?common="${this.common}"
-          ?rounded="${this.common || this.rounded}"
-          ?inset="${this.common || this.inset}">
+          ?isfullscreen="${this.isBibFullscreen}">
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
           </div>
@@ -7044,7 +7311,7 @@ class AuroBibtemplate extends i$2 {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
             <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
           </${this.buttonTag}>
           <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
@@ -7072,7 +7339,7 @@ var bibTemplateVersion = '1.0.0';
 
 var colorCss$3 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$4 = i$5`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss$4 = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$2 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -7278,68 +7545,7 @@ class AuroHelpText extends i$2 {
 
 var helpTextVersion = '1.0.0';
 
-i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
-
-i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
-
-i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/**
- * Converts value to an array.
- * If the value is a JSON string representing an array, it will be parsed.
- * If the value is already an array, it is returned.
- * If the value is undefined, it returns undefined.
- * @private
- * @param {any} value - The value to be converted. Can be a string, array, or undefined.
- * @returns {Array|undefined} - The converted array or undefined.
- * @throws {Error} - Throws an error if the value is not an array, undefined,
- * or if the value cannot be parsed into an array from a JSON string.
- */
-function arrayConverter(value) {
-  // Allow undefined
-  if (value === undefined) {
-    return undefined;
-  }
-
-  // Return the value if it is already an array
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  try {
-    // If value is a JSON string, parse it
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-
-    // Check if the parsed value is an array
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-  } catch (error) {
-    // If JSON parsing fails, continue to throw an error below
-    /* eslint-disable no-console */
-    console.error('JSON parsing failed:', error);
-  }
-
-  // Throw error if the input is not an array or undefined
-  throw new Error('Invalid value: Input must be an array or undefined');
-}
-
-i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
-
-i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
-
-i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
-
-i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
-
-i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
-
-var styleCss$3 = i$5`.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}[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)}.mainContent{position:relative;display:flex;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:8px}.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,:host([layout*=snowflake]) .triggerContent{padding:0 8px 0 24px}:host([layout*=classic]) .triggerContent{padding:0 8px}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
+var styleCss$3 = i$5`.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}[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)}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}.mainContent{position:relative;display:flex;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-50, 0.25rem)}.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,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-50, 0.25rem) 0 var(--ds-size-150, 0.75rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-50, 0.25rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -7354,7 +7560,6 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
  * @slot label - Defines the content of the label.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot helpText - Defines the content of the helpText.
- * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
  * @slot valueText - Dropdown value text display.
  * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
@@ -7624,6 +7829,14 @@ class AuroSelect extends AuroElement$4 {
         reflect: true
       },
 
+      /**
+       * Define custom placeholder text.
+       */
+      placeholder: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Populates the `required` attribute on the element. Used for client-side validation.
        */
@@ -7670,11 +7883,12 @@ class AuroSelect extends AuroElement$4 {
       },
 
       /**
-       * Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
-       * @type {String|Array<String>}
+       * Value selected for the component.
        */
       value: {
-        type: Object
+        type: String,
+        reflect: true,
+        attribute: 'value'
       },
 
       /**
@@ -7726,6 +7940,25 @@ class AuroSelect extends AuroElement$4 {
     ];
   }
 
+  /**
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @private
+   * @returns {String|Array<String>}
+   */
+  get formattedValue() {
+    if (this.multiSelect) {
+      if (!this.value) {
+        return undefined;
+      }
+      if (this.value.startsWith("[")) {
+        return JSON.parse(this.value);
+      }
+      return [this.value];
+    }
+    return this.value;
+  }
+
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
@@ -7734,7 +7967,7 @@ class AuroSelect extends AuroElement$4 {
   get commonLabelClasses() {
     return {
       'is-disabled': this.disabled,
-      'withValue': this.value && this.value.length > 0,
+      'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
       'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
     };
   }
@@ -7760,6 +7993,21 @@ class AuroSelect extends AuroElement$4 {
 
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.isPopoverVisible = this.dropdown.isPopoverVisible;
+
+      if (this.dropdown.isPopoverVisible) {
+        // wait til the bib gets fully rendered
+        setTimeout(() => {
+          if (this.dropdown.isBibFullscreen) {
+            // trigger holds the focus since menu is not a focusable element.
+            this.dropdown.trigger.focus();
+
+            // default focus indicator on the first menu option
+            if (this.menu.index < 0) {
+              this.menu.navigateOptions('down');
+            }
+          }
+        });
+      }
     });
 
     // setting up bibtemplate
@@ -7910,46 +8158,58 @@ class AuroSelect extends AuroElement$4 {
   configureSelect() {
 
     this.addEventListener('keydown', (evt) => {
-      if (evt.key === 'ArrowUp') {
-        evt.preventDefault();
+      // when the focus is on trigger not on close button
+      if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
+        if (evt.key === 'ArrowUp') {
+          evt.preventDefault();
 
-        this.dropdown.show();
+          this.dropdown.show();
+
+          if (this.dropdown.isPopoverVisible) {
+            this.menu.navigateOptions('up');
+          }
 
-        if (this.dropdown.isPopoverVisible) {
-          this.menu.navigateOptions('up');
+          return;
         }
 
-        return;
-      }
+        if (evt.key === 'ArrowDown') {
+          evt.preventDefault();
 
-      if (evt.key === 'ArrowDown') {
-        evt.preventDefault();
+          this.dropdown.show();
 
-        this.dropdown.show();
+          if (this.dropdown.isPopoverVisible) {
+            this.menu.navigateOptions('down');
+          }
 
-        if (this.dropdown.isPopoverVisible) {
-          this.menu.navigateOptions('down');
+          return;
         }
 
-        return;
-      }
+        if (evt.key === 'Enter') {
+          if (!this.dropdown.isPopoverVisible) {
+            evt.preventDefault();
+            this.menu.makeSelection();
+          }
 
-      if (evt.key === 'Enter') {
-        if (!this.dropdown.isPopoverVisible) {
-          evt.preventDefault();
-          this.menu.makeSelection();
+          return;
         }
-
-        return;
       }
 
-      if (evt.key === 'Tab') {
+      if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
         if (this.dropdown.isBibFullscreen) {
           evt.preventDefault();
+
+            // when the focus is on trigger not on close button
+          if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
+            // `dropdown.focus` will move focus to the first focusable element in bib when it's open,
+            // when bib it not open, it will focus onto trigger.
+            this.dropdown.focus();
+          } else {
+            // when close button has the focus, move focus back to the trigger
+            this.dropdown.trigger.focus();
+          }
         } else {
           this.dropdown.hide();
         }
-
         return;
       }
 
@@ -8117,38 +8377,29 @@ class AuroSelect extends AuroElement$4 {
     this.configureDropdown();
     this.configureMenu();
     this.configureSelect();
-
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
-      if (this.menu) {
-        this.menu.value = this.value;
-      }
-    }
   }
 
   /**
    * Update the menu value. With checks for menu existence. Awaits value update.
    * @param {string} value - The value to set in the menu.
-   * @returns void
+   * @returns {void}
    * @private
    */
   async updateMenuValue(value) {
     if (!this.menu) return;
 
+    this.menu.setAttribute('value', value);
     this.menu.value = value;
     await this.menu.updateComplete;
   }
 
   async updated(changedProperties) {
-    if (changedProperties.has('multiSelect')) {
+    if (changedProperties.has('multiSelect') && !changedProperties.has('value')) {
       this.clearSelection();
     }
 
     if (changedProperties.has('value')) {
       if (this.value) {
-        this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
-
         await this.updateMenuValue(this.value);
 
         if (this.menu) {
@@ -8174,7 +8425,7 @@ class AuroSelect extends AuroElement$4 {
         composed: true,
         detail: {
           optionSelected: this.optionSelected,
-          value: this.value
+          value: this.formattedValue
         }
       }));
     }
@@ -8233,13 +8484,13 @@ class AuroSelect extends AuroElement$4 {
     const selectedValue = selectedOption.value;
 
     if (this.multiSelect) {
-      const currentArray = Array.isArray(this.value) ? this.value : [];
+      const currentArray = this.formattedValue;
 
       if (!currentArray.includes(selectedValue)) {
-        this.value = [
+        this.value = JSON.stringify([
           ...currentArray,
           selectedValue
-        ];
+        ]);
       }
     } else {
       const currentValue = this.value;
@@ -8262,12 +8513,17 @@ class AuroSelect extends AuroElement$4 {
     }
 
     if (this.multiSelect) {
-      nativeSelect.value = this.value ? this.value[0] : '';
+      nativeSelect.value = this.multiSelect ? this.multiSelect[0] : '';
     } else {
       nativeSelect.value = this.value || '';
     }
   }
 
+  /**
+   * Returns HTML for the hidden a11y screen reader content.
+   * @private
+   * @returns {html} - Returns HTML for the hidden a11y screen reader content.
+   */
   renderAriaHtml() {
     return u`
       <div aria-live="polite" class="util_displayHiddenVisually">
@@ -8288,6 +8544,11 @@ class AuroSelect extends AuroElement$4 {
     `;
   }
 
+  /**
+   * Returns HTML for the hidden HTML5 select.
+   * @private
+   * @returns {html} - Returns HTML for the hidden HTML5 select.
+   */
   renderNativeSelect() {
     return u`
       <div class="nativeSelectWrapper util_displayHidden">
@@ -8334,7 +8595,7 @@ class AuroSelect extends AuroElement$4 {
         : u`
           <${this.helpTextTag} error ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-              ERROR MESSAGE ${this.errorMessage}
+              ${this.errorMessage}
             </p>
           </${this.helpTextTag}>
         `
@@ -8349,14 +8610,14 @@ class AuroSelect extends AuroElement$4 {
    */
   renderLayoutEmphasized() {
     const placeholderClass = {
-      hidden: this.value,
+      'util_displayHidden': this.value
     };
 
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
       'hasFocus': this.isPopoverVisible,
-      'withValue': this.value && this.value.length > 0,
+      'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
       'force': this.forceDisplayValue,
     };
 
@@ -8383,7 +8644,6 @@ class AuroSelect extends AuroElement$4 {
           .offset="${this.offset}"
           .placement="${this.placement}"
           chevron
-          fluid
           for="selectMenu"
           layout="${this.layout}"
           part="dropdown"
@@ -8400,11 +8660,9 @@ class AuroSelect extends AuroElement$4 {
                   ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
-                ${this.value ? undefined : u`
-                  <div id="placeholder" class="${e(placeholderClass)}">
-                    <slot name="placeholder"></slot>
-                  </div>
-                `}
+                <div id="placeholder" class="${e(placeholderClass)}">
+                  ${this.placeholder}
+                </div>
               </div>
               <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
                 <slot name="displayValue"></slot>
@@ -8431,14 +8689,14 @@ class AuroSelect extends AuroElement$4 {
    */
   renderLayoutSnowflake() {
     const placeholderClass = {
-      hidden: this.value,
+      'util_displayHidden': this.value
     };
 
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
       'hasFocus': this.isPopoverVisible,
-      'withValue': this.value && this.value.length > 0,
+      'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
       'force': this.forceDisplayValue,
     };
 
@@ -8464,7 +8722,6 @@ class AuroSelect extends AuroElement$4 {
           .offset="${this.offset}"
           .placement="${this.placement}"
           chevron
-          fluid
           for="selectMenu"
           layout="${this.layout}"
           part="dropdown"
@@ -8481,11 +8738,9 @@ class AuroSelect extends AuroElement$4 {
                   ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
-                ${this.value ? undefined : u`
-                  <div id="placeholder" class="${e(placeholderClass)}">
-                    <slot name="placeholder"></slot>
-                  </div>
-                `}
+                <div id="placeholder" class="${e(placeholderClass)}">
+                  ${this.placeholder}
+                </div>
               </div>
               <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
                 <slot name="displayValue"></slot>
@@ -8513,14 +8768,14 @@ class AuroSelect extends AuroElement$4 {
    */
   renderLayoutClassic() {
     const placeholderClass = {
-      hidden: this.value,
+      'util_displayHidden': this.value
     };
 
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
       'hasFocus': this.isPopoverVisible,
-      'withValue': this.value && this.value.length > 0,
+      'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
       'force': this.forceDisplayValue,
     };
 
@@ -8546,7 +8801,6 @@ class AuroSelect extends AuroElement$4 {
           .offset="${this.offset}"
           .placement="${this.placement}"
           chevron
-          fluid
           for="selectMenu"
           layout="${this.layout}"
           part="dropdown"
@@ -8563,11 +8817,9 @@ class AuroSelect extends AuroElement$4 {
                   ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
-                ${this.value ? undefined : u`
-                  <div id="placeholder" class="${e(placeholderClass)}">
-                    <slot name="placeholder"></slot>
-                  </div>
-                `}
+                <div id="placeholder" class="${e(placeholderClass)}">
+                  ${this.placeholder}
+                </div>
               </div>
               <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
                 <slot name="displayValue"></slot>
@@ -8617,106 +8869,6 @@ class AuroSelect extends AuroElement$4 {
 
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
-
-  // function that renders the HTML and CSS into  the scope of the component
-  renderBACKUP() {
-    const placeholderClass = {
-      hidden: this.value,
-    };
-
-    return u`
-      <div class="outerWrapper">
-        <div aria-live="polite" class="util_displayHiddenVisually">
-          ${this.optionActive && this.options.length > 0
-            ? u`
-              ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
-            `
-            : undefined
-          };
-
-          ${this.optionSelected && this.options.length > 0
-            ? u`
-            ${`${this.optionSelected.innerText} selected`}
-            `
-            : undefined
-          };
-        </div>
-        <div id="slotHolder" aria-hidden="true">
-          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
-        </div>
-        <${this.dropdownTag}
-          ?autoPlacement="${this.autoPlacement}"
-          ?disabled="${this.disabled}"
-          ?error="${this.validity !== undefined && this.validity !== 'valid'}"
-          ?matchWidth="${this.matchWidth}"
-          ?noFlip="${this.noFlip}"
-          ?onDark="${this.onDark}"
-          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
-          .offset="${this.offset}"
-          .placement="${this.placement}"
-          chevron
-          fluid
-          for="selectMenu"
-          layout="${this.layout}"
-          part="dropdown"
-          shape="${this.shape}"
-          size="${this.size}">
-          <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder"
-              class="${e(placeholderClass)}"
-              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
-              >
-              <slot name="placeholder"></slot>
-            </span>
-            <slot name="valueText" id="valueText"></slot>
-          </span>
-
-          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
-            <slot></slot>
-          </${this.bibtemplateTag}>
-          <slot name="label" slot="label"></slot>
-          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
-          <p slot="helpText">
-            ${!this.validity || this.validity === undefined || this.validity === 'valid'
-              ? u`
-                <span id="${this.uniqueId}" part="helpText">
-                  <slot name="helpText"></slot>
-                </span>`
-              : u`
-                <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.errorMessage}
-                </span>`
-            }
-          </p>
-        </${this.dropdownTag}>
-        <div class="nativeSelectWrapper">
-          <select 
-            tabindex="-1"
-            id="${`native-select-${this.id || this.uniqueId}`}"
-            name="${this.name || ''}"
-            ?disabled="${this.disabled}"
-            ?required="${this.required}"
-            aria-hidden="true"
-            autocomplete="${o(this.autocomplete)}"
-            @change="${this._handleNativeSelectChange}">
-            <option value="" ?selected="${!this.value}"></option>
-            ${this.options.map((option) => {
-              const optionValue = option.value || option.textContent;
-              return u`
-                <option 
-                  value="${optionValue}" 
-                  ?selected="${this.value === optionValue}">
-                  ${option.textContent}
-                </option>
-              `;
-            })}
-          </select>
-        </div>
-        <!-- Help text and error message template -->
-        ${this.renderHtmlHelpText()}
-      </div>
-    `;
-  }
 }
 
 var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
@@ -8776,7 +8928,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -8889,9 +9040,14 @@ class AuroMenu extends AuroElement$4 {
         reflect: true,
         attribute: 'multiselect'
       },
+
+      /**
+       * Value selected for the component.
+       */
       value: {
-        // Allow string, string[] arrays and undefined
-        type: Object
+        type: String,
+        reflect: true,
+        attribute: 'value'
       },
 
       /**
@@ -8926,6 +9082,25 @@ class AuroMenu extends AuroElement$4 {
     AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenu);
   }
 
+  /**
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @private
+   * @returns {String|Array<String>}
+   */
+  get formattedValue() {
+    if (this.multiSelect) {
+      if (!this.value) {
+        return undefined;
+      }
+      if (this.value.startsWith("[")) {
+        return JSON.parse(this.value);
+      }
+      return [this.value];
+    }
+    return this.value;
+  }
+
   // Lifecycle Methods
 
   connectedCallback() {
@@ -8968,7 +9143,7 @@ class AuroMenu extends AuroElement$4 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('multiSelect')) {
+    if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
     }
@@ -8982,7 +9157,7 @@ class AuroMenu extends AuroElement$4 {
       } else {
         if (this.multiSelect) {
           // In multiselect mode, this.value should be an array of strings
-          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const valueArray = this.formattedValue;
           const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
           this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
@@ -9149,14 +9324,14 @@ class AuroMenu extends AuroElement$4 {
    */
   handleSelectState(option) {
     if (this.multiSelect) {
-      const currentValue = this.value || [];
+      const currentValue = this.formattedValue || [];
       const currentSelected = this.optionSelected || [];
 
       if (!currentValue.includes(option.value)) {
-        this.value = [
+        this.value = JSON.stringify([
           ...currentValue,
           option.value
-        ];
+        ]);
       }
       if (!currentSelected.includes(option)) {
         this.optionSelected = [
@@ -9179,13 +9354,15 @@ class AuroMenu extends AuroElement$4 {
    * @param {HTMLElement} option - The menuoption to be deselected.
    */
   handleDeselectState(option) {
-    if (this.multiSelect && Array.isArray(this.value)) {
+    if (this.multiSelect) {
       // Remove this option from array
-      this.value = this.value.filter((val) => val !== option.value);
+      const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
 
       // If array is empty after removal, set back to undefined
-      if (this.value.length === 0) {
+      if (newFormattedValue && newFormattedValue.length === 0) {
         this.value = undefined;
+      } else {
+        this.value = JSON.stringify(newFormattedValue);
       }
 
       this.optionSelected = this.optionSelected.filter((val) => val !== option);
@@ -9536,7 +9713,7 @@ class AuroMenu extends AuroElement$4 {
   }
 }
 
-var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-150, 0.75rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-150, 0.75rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
 var colorCss$1 = i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;