@aurodesignsystem/auro-formkit 5.1.3 → 5.1.4

package/components/combobox/demo/api.min.js

@@ -32,7 +32,7 @@ class DynamicData {
 // Javascript example file
 // -----------------------
 
-function dynamicMenuExample() {
+async function dynamicMenuExample() {
   // Resets the root menu
   function resetMenu(root) {
     while (root.firstChild) {
@@ -40,22 +40,49 @@ function dynamicMenuExample() {
     }
   }
 
+  function swapValues() {
+    const elOne = document.querySelector('#dynamicMenuExample');
+    const elTwo = document.querySelector('#dynamicMenuExampleTwo');
+
+    const elOneValue = elOne.value;
+    const elTwoValue = elTwo.value;
+
+    const elOneInputValue = elOne.input.value;
+    const elTwoInputValue = elTwo.input.value;
+
+    elOne.reset();
+    elTwo.reset();
+
+    elOne.value = elTwoValue;
+    elTwo.value = elOneValue;
+
+
+    setTimeout(() => {
+      elOne.typedValue = elTwoInputValue;
+      elTwo.typedValue = elOneInputValue;
+    }, 0);
+  }
+
+  document.querySelector('#dynamicMenuSwapButton').addEventListener('click', () => {
+    swapValues();
+  });
+
   // Generates HTML for menu and submenus using country & city data from an external API
-  function generateHtml(data) {
-    const initialMenu = document.querySelector('#initMenu');
+  function generateHtml(data, selector) {
+    const initialMenu = document.querySelector(selector);
 
     resetMenu(initialMenu);
 
     for (let index = 0; index < data.length; index++) {
-      let country = data[index]['country'];
-      let cities = data[index]['cities'];
+      const country = data[index]['country'];
+      const cities = data[index]['cities'];
 
-      generateMenuOptionHtml(initialMenu, country, country);
+      generateMenuOptionHtml(initialMenu, country, country.substring(0, 3).toUpperCase());
 
       for (let indexB = 0; indexB < cities.length; indexB++) {
-        let subMenu = document.createElement('auro-menu');
+        const subMenu = document.createElement('auro-menu');
 
-        generateMenuOptionHtml(subMenu, cities[indexB], cities[indexB]);
+        generateMenuOptionHtml(subMenu, cities[indexB], cities[indexB].substring(0, 3).toUpperCase());
 
         initialMenu.appendChild(subMenu);
       }
@@ -63,26 +90,55 @@ function dynamicMenuExample() {
 
   // Helper function that generates HTML for menuoptions
   function generateMenuOptionHtml(menu, label, value) {
-    let option = document.createElement('auro-menuoption');
+    const option = document.createElement('auro-menuoption');
+    const displayValue = document.createElement('div');
+    displayValue.setAttribute("slot", "displayValue");
+    displayValue.innerHTML = value;
 
     option.value = value;
     option.innerHTML = label;
-
     menu.appendChild(option);
+    option.appendChild(displayValue);
   }
 
   // Main javascript that runs all JS to create example
   const dynamicData = new DynamicData();
-  const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
-  const dropdownEl = dynamicMenuExample.shadowRoot.querySelector(dynamicMenuExample.dropdownTag._$litStatic$);
-  const inputEl = dropdownEl.querySelector(dynamicMenuExample.inputTag._$litStatic$);
+  const dynamicMenuExampleEl = document.querySelector('#dynamicMenuExample');
+  const dropdownEl = dynamicMenuExampleEl.shadowRoot.querySelector(dynamicMenuExampleEl.dropdownTag._$litStatic$);
+  const inputEl = dropdownEl.querySelector(dynamicMenuExampleEl.inputTag._$litStatic$);
 
   inputEl.addEventListener('input', () => {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
 
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
+  });
+
+
+  if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
+    let data = dynamicData.getData();
+    data = dynamicData.filterData(data, inputEl.value);
+    generateHtml(data, '#initMenu');
+  }
+
+  // TODO: Need to refactor this to to not console a console error
+  const dynamicDataTwo = new DynamicData();
+  const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExample');
+  const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
+  const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
+
+  inputElTwo.addEventListener('input', () => {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputEl.value);
+
+    generateHtml(data, '#initMenuTwo');
   });
+
+  if (dynamicMenuExampleElTwo.value && dynamicMenuExampleElTwo.value.length > 0 && dynamicMenuExampleElTwo.input.value && (!dynamicMenuExampleElTwo.menu.availableOptions || dynamicMenuExampleElTwo.menu.availableOptions.length === 0)) {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputElTwo.value);
+    generateHtml(data, '#initMenuTwo');
+  }
 }
 
 function valueExample() {
@@ -4511,7 +4567,7 @@ let AuroElement$4 = class AuroElement extends i$2 {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -5296,8 +5352,13 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {
@@ -10371,7 +10432,7 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -10445,7 +10506,7 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
- * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screen reader to read
  * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
  * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
@@ -10473,6 +10534,7 @@ class BaseInput extends AuroElement$2$1 {
     this.activeLabel = false;
     this.icon = false;
     this.disabled = false;
+    this.dvInputOnly = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -10566,6 +10628,14 @@ class BaseInput extends AuroElement$2$1 {
     return {
       ...super.properties,
 
+      /**
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
+       */
+      dvInputOnly: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * The value for the role attribute.
        */
@@ -13331,7 +13401,13 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
+    return (
+      this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
+      (
+        (!this.value || this.value.length === 0) &&
+        !this.hasFocus &&
+        (!this.placeholder || this.placeholder === '')
+      );
   }
 
   /**
@@ -13351,7 +13427,7 @@ class AuroInput extends BaseInput {
    * @private
    */
   get labelHidden() {
-    return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
+    return this.hasDisplayValueContent && !this.dvInputOnly && !this.hasFocus && this.hasValue;
   }
 
   /**
@@ -13360,18 +13436,26 @@ class AuroInput extends BaseInput {
    * @returns {string} - The font class for the label.
    */
   get labelFontClass() {
-    const isHidden = this.inputHidden;
-
     if (this.layout.startsWith('emphasized')) {
-      return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
+      let typeSize = 'body-sm';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'accent-xl';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'accent-xl';
+      }
+
+      return typeSize;
     }
 
     if (this.layout === 'snowflake') {
-      return isHidden ? 'body-lg' : 'body-xs';
+      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return isHidden ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**
@@ -13381,7 +13465,17 @@ class AuroInput extends BaseInput {
    */
   get inputFontClass() {
     if (this.layout.startsWith('emphasized')) {
-      return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
+      let typeSize = 'accent-xl';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'body-sm';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'body-sm';
+      }
+
+      return typeSize;
     }
 
     if (this.layout === 'snowflake') {
@@ -13424,6 +13518,13 @@ class AuroInput extends BaseInput {
     };
   }
 
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      [this.inputFontClass]: true,
+    };
+  }
+
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
@@ -13496,7 +13597,7 @@ class AuroInput extends BaseInput {
     let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
 
     // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
-    if (nodes[0].tagName === 'SLOT') {
+    if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
       nodes = nodes[0].assignedNodes();
     }
 
@@ -13587,7 +13688,7 @@ class AuroInput extends BaseInput {
         type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
       />
       <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
-        <div class="displayValueWrapper">
+        <div class="${e(this.commonDisplayValueWrapperClasses)}">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
         </div>
       </div>
@@ -15805,7 +15906,7 @@ var bibTemplateVersion = '1.0.0';
 
 var styleCss$4 = 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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
-var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
+var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
 var styleSnowflakeCss = i$5`:host([layout*=snowflake][shape*=snowflake]) [auro-input]{width:100%}:host([layout*=snowflake][shape*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake][shape*=snowflake])::part(helpText){text-align:center}`;
 
@@ -15849,7 +15950,7 @@ let AuroElement$1 = class AuroElement extends i$2 {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -16131,7 +16232,9 @@ class AuroHelpText extends i$2 {
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
- * @event auroCombobox-valueSet - Notifies that the component has a new value set.
+ * @event auroCombobox-valueSet - (Deprecated) Notifies that the component has a new value set.
+ * @event input - Notifies that the component has a new value set.
+ * @event inputValue - Notifies that the components internal HTML5 input value has changed.
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
  */
 
@@ -16141,75 +16244,60 @@ class AuroCombobox extends AuroElement$1 {
   constructor() {
     super();
 
-    this.matchWidth = true;
-
-    this.privateDefaults();
-  }
-
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.dropdownOpen = false;
-    this.dropdownId = undefined;
-    this.onDark = false;
-
-    this.noFilter = false;
-    this.validity = undefined;
-    this.value = undefined;
-    this.optionSelected = undefined;
-
-    this.checkmark = false;
+    // Defaults that effect the combobox behavior and state
     this.disabled = false;
+    this.msgSelectionMissing = 'Please select an option.';
+    this.noFilter = false;
     this.noValidate = false;
-    this.required = false;
-    this.triggerIcon = false;
-
-    this.availableOptions = [];
     this.optionActive = null;
-    this.msgSelectionMissing = 'Please select an option.';
+    this.persistInput = false;
+    this.required = false;
+    this.value = undefined;
+    this.typedValue = undefined;
 
+    // Defaults that effect the overall layout of the combobox
+    this.checkmark = false;
+    this.dvInputOnly = false;
     this.fullscreenBreakpoint = 'sm';
-    this.largeFullscreenHeadline = false;
-
-    this.validation = new AuroFormValidation$1();
-
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
-
-    this.isHiddenWhileLoading = false;
-
-    // Error message
-    this.errorMessage = null;
-
-    // Layout Config
-    /**
-     * @private
-     */
     this.layout = 'classic';
-
-    /**
-     * @private
-     */
+    this.matchWidth = true;
     this.shape = 'classic';
-
-    /**
-     * @private
-     */
     this.size = 'xl';
+    this.triggerIcon = false;
 
-    // floaterConfig
+    // Defaults that effect the dropdown
     this.placement = 'bottom-start';
     this.offset = 0;
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.privateDefaults();
+  }
+
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
     const versioning = new AuroDependencyVersioning$3();
 
     this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
     this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', '1.0.0', AuroHelpText);
+
+    this.availableOptions = [];
+    this.dropdownId = undefined;
+    this.dropdownOpen = false;
+    this.errorMessage = null;
+    this.isHiddenWhileLoading = false;
+    this.largeFullscreenHeadline = false;
+    this.onDark = false;
+    this.optionSelected = undefined;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.touched = false;
+    this.validation = new AuroFormValidation$1();
+    this.validity = undefined;
   }
 
   // This function is to define props used within the scope of this component
@@ -16247,7 +16335,7 @@ class AuroCombobox extends AuroElement$1 {
       },
 
       /**
-       * When attribute is present auro-menu will apply checkmarks to selected options.
+       * When attribute is present auro-menu will apply check marks to selected options.
        */
       checkmark: {
         type: Boolean,
@@ -16282,6 +16370,14 @@ class AuroCombobox extends AuroElement$1 {
         attribute: false
       },
 
+      /**
+       * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
+       */
+      dvInputOnly: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
        */
@@ -16364,6 +16460,17 @@ class AuroCombobox extends AuroElement$1 {
         type: Object
       },
 
+      /**
+       * If declared, selecting a menu option will not change the input value. By doing so,
+       * the current menu filter will be preserved and the user can continue from their last
+       * filter state. It is recommended to use this in combination with the `displayValue` slot.
+       * @type {Boolean}
+       */
+      persistInput: {
+        type: Boolean,
+        reflect: true
+      },
+
       /* eslint-disable jsdoc/require-description-complete-sentence */
       /**
        * Position where the bib should appear relative to the trigger.
@@ -16417,6 +16524,18 @@ class AuroCombobox extends AuroElement$1 {
         type: String
       },
 
+      /**
+       * Indicates whether the combobox is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      },
+
       /**
        * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
        */
@@ -16433,6 +16552,14 @@ class AuroCombobox extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * Specifies the value of the input element within the combobox.
+       */
+      typedValue: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Specifies the `validityState` this element is in.
        */
@@ -16492,6 +16619,24 @@ class AuroCombobox extends AuroElement$1 {
     ];
   }
 
+  /**
+   * Returns the current value of the input element within the combobox.
+   * @returns {string|undefined} The value of the input element, or undefined if the input is not present.
+   */
+  get inputValue() {
+    if (!this.input) {
+      return undefined;
+    }
+    return this.input.value;
+  }
+
+  // /**
+  //  * Sets the value of the input element within the combobox.
+  //  */
+  // set inputValue(value) {
+  //   this.input.value = value;
+  // }
+
   /**
    * Checks if the element is valid.
    * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -16580,11 +16725,38 @@ class AuroCombobox extends AuroElement$1 {
     // Wait a lifecycle for child components to update
     await Promise.all([this.menu.updateComplete]);
 
-    if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
-      this.input.value = this.menu.optionSelected.textContent;
-    } else {
-      this.input.value = this.value;
+    this.updateTriggerTextDisplay();
+  }
+
+  /**
+   * Update displayValue or input.value, it's called when making a selection.
+   * @private
+   */
+  updateTriggerTextDisplay() {
+    // update the input content if persistInput is false
+    if (!this.persistInput) {
+      if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
+        this.input.value = this.menu.optionSelected.textContent;
+      } else {
+        this.input.value = this.value;
+      }
     }
+
+    // update the displayValue in the trigger if displayValue slot content is present
+    const displayValueInTrigger = this.input.querySelector('[slot="displayValue"]');
+
+    if (displayValueInTrigger) {
+      displayValueInTrigger.remove();
+    }
+
+    if (this.menu.optionSelected) {
+      const displayValueEl = this.menu.optionSelected.querySelector("[slot='displayValue']");
+      if (displayValueEl) {
+        this.input.appendChild(displayValueEl.cloneNode(true));
+      }
+    }
+
+    this.requestUpdate();
   }
 
   /**
@@ -16606,11 +16778,15 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleMenuOptions() {
-
     this.resetMenuMatchword();
+
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.syncValuesAndStates();
+    }
   }
 
   /**
@@ -16708,14 +16884,29 @@ class AuroCombobox extends AuroElement$1 {
     });
   }
 
+  /**
+   * @private
+   */
+  setClearBtnFocus() {
+    const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
+    if (clearBtn) {
+      clearBtn.focus();
+    }
+  }
+
   /**
    * @private
    */
   setInputFocus() {
     if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
       this.inputInBib.focus();
-    } else {
+    } else if (!this.input.componentHasFocus) {
+      const focusedEl = this.querySelector(":focus");
       this.input.focus();
+      // current focus is on a menuoption, after clicking on it.
+      if (this.persistInput && focusedEl && (focusedEl.tagName.toLowerCase() === 'auro-menuoption' || focusedEl.hasAttribute('auro-menuoption'))) {
+        this.setClearBtnFocus();
+      }
     }
   }
 
@@ -16751,6 +16942,8 @@ class AuroCombobox extends AuroElement$1 {
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
 
+    this.menu.value = this.value;
+
     this.updateMenuShapeSize();
 
     // a racing condition on custom-combobox with custom-menu
@@ -16771,7 +16964,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     // handle the menu event for an option selection
-    this.menu.addEventListener('auroMenu-selectedOption', () => {
+    this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
 
@@ -16781,12 +16974,10 @@ class AuroCombobox extends AuroElement$1 {
 
         if (!this.value || this.value !== this.optionSelected.value) {
           this.value = this.optionSelected.value;
-          this.menu.value = this.value;
+          // this.menu.value = this.value;
         }
 
-        if (this.input.value !== this.optionSelected.textContent) {
-          this.input.value = this.optionSelected.textContent;
-        }
+        this.updateTriggerTextDisplay();
 
         if (this.menu.matchWord !== this.input.value) {
           this.menu.matchWord = this.input.value;
@@ -16794,18 +16985,14 @@ class AuroCombobox extends AuroElement$1 {
 
         // update the hidden state of options based on newly selected value
         this.handleMenuOptions();
-
-        this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
       }
 
       // dropdown bib should hide when making a selection
-      setTimeout(() => {
-        this.hideBib();
-      }, 0);
+      if (evt.detail && evt.detail.source !== 'slotchange') {
+        setTimeout(() => {
+          this.hideBib();
+        }, 0);
+      }
     });
 
     this.menu.addEventListener('auroMenu-customEventFired', () => {
@@ -16847,12 +17034,8 @@ class AuroCombobox extends AuroElement$1 {
       }
     });
 
-    // Handle validation messages from auroFormElement-validated event
-    this.input.addEventListener('auroFormElement-validated', (evt) => {
-      // not to bubble up input's validated event.
-      evt.stopPropagation();
-
-      this.errorMessage = evt.detail.message;
+    this.input.addEventListener('input', () => {
+      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
     });
   }
 
@@ -16896,29 +17079,9 @@ class AuroCombobox extends AuroElement$1 {
     this.menu.matchWord = this.input.value;
     this.optionActive = null;
 
-    let hasChange = false;
-
-    if (!this.value || this.value !== this.input.value) {
-      this.menu.value = this.input.value;
-      this.value = this.menu.value;
-      hasChange = true;
-      this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    }
-
-    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
-      this.optionSelected = undefined;
-      hasChange = true;
-    }
-
-    if (!hasChange) {
-      return;
+    if (!this.input.value) {
+      this.clear();
     }
-
-    this.menu.clearSelection();
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
@@ -16943,10 +17106,16 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   configureCombobox() {
-    this.addEventListener('keydown', (evt) => {
+    this.addEventListener('keydown', async (evt) => {
       if (evt.key === 'Enter') {
         if (this.dropdown.isPopoverVisible && this.optionActive) {
           this.menu.makeSelection();
+
+          await this.updateComplete;
+
+          evt.preventDefault();
+          evt.stopPropagation();
+          this.setClearBtnFocus();
         } else {
           this.showBib();
         }
@@ -16961,6 +17130,10 @@ class AuroCombobox extends AuroElement$1 {
             this.dropdown.focus();
           }
         } else {
+          if (this.menu.optionActive && this.menu.optionActive.value) {
+            this.menu.value = this.menu.optionActive.value;
+          }
+
           setTimeout(() => {
             if (!this.componentHasFocus) {
               this.hideBib();
@@ -16990,8 +17163,15 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     this.addEventListener('focusin', () => {
+      this.touched = true;
+
       this.focus();
     });
+
+    this.addEventListener('auroFormElement-validated', (evt) => {
+      this.input.validity = evt.detail.validity;
+      this.input.errorMessage = evt.detail.message;
+    });
   }
 
   /**
@@ -17036,7 +17216,9 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   focus() {
-    this.input.focus();
+    if (!this.componentHasFocus) {
+      this.input.focus();
+    }
   }
 
   /**
@@ -17044,8 +17226,13 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.input.reset();
+    this.optionSelected = undefined;
+    this.value = undefined;
+    this.typedValue = undefined;
+    this.input.value = undefined;
+    this.menu.value = undefined;
     this.validation.reset(this);
+    this.touched = false;
   }
 
   /**
@@ -17054,6 +17241,11 @@ class AuroCombobox extends AuroElement$1 {
    */
   clear() {
     this.input.clear();
+    if (this.menu.value || this.menu.optionSelected) {
+      this.menu.reset();
+    }
+    this.optionSelected = undefined;
+    this.value = undefined;
   }
 
   /**
@@ -17066,7 +17258,16 @@ class AuroCombobox extends AuroElement$1 {
 
   async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
-    if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
+    if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+      } else {
+        this.hasValue = false;
+      }
+
+      if (this.hasValue && !this.input.value && (!this.menu.availableOptions || this.menu.availableOptions.length === 0)) {
+        this.input.value = this.value;
+      }
 
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
@@ -17080,6 +17281,19 @@ class AuroCombobox extends AuroElement$1 {
 
       // Sync the input, menu, and optionSelected states
       await this.syncValuesAndStates();
+
+      this.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      }));
+
+      // Deprecated, need to be removed.
+      this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      }));
     }
 
     if (changedProperties.has('availableOptions')) {
@@ -17122,6 +17336,16 @@ class AuroCombobox extends AuroElement$1 {
     });
   }
 
+  /**
+   * Updates the active option in the menu.
+   * @param {number} index - Index of the option to make active.
+   */
+  updateActiveOption(index) {
+    if (this.menu) {
+      this.menu.updateActiveOption(index);
+    }
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -17131,6 +17355,10 @@ class AuroCombobox extends AuroElement$1 {
   handleSlotChange(event) {
     switch (event.target.name) {
       case '':
+        if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {
+          this.configureMenu();
+        }
+
         // Treat only generic menuoptions.
         this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
         this.options.forEach((opt) => {
@@ -17207,14 +17435,16 @@ class AuroCombobox extends AuroElement$1 {
               .inputmode="${this.inputmode}"
               .placeholder="${this.placeholder}"
               .type="${this.type}"
+              .value="${this.typedValue}"
               ?disabled="${this.disabled}"
               ?icon="${this.triggerIcon}"
-              ?noValidate="${this.noValidate}"
+              ?dvInputOnly="${this.dvInputOnly}"
               ?onDark="${this.onDark}"
               ?required="${this.required}"
               a11yRole="combobox"
               id="${this.id}"
               layout="${this.layout}"
+              noValidate="true"
               setCustomValidity="${this.setCustomValidity}"
               setCustomValidityCustomError="${this.setCustomValidityCustomError}"
               setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
@@ -17230,7 +17460,7 @@ class AuroCombobox extends AuroElement$1 {
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
             <slot name="bib.fullscreen.headline" slot="header"></slot>
             <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
-            <slot></slot>
+            <slot @slotchange="${this.handleSlotChange}"></slot>
             <${this.inputTag}
               id="inputInBib"
               @input="${this.handleInputValueChange}"
@@ -17240,6 +17470,7 @@ class AuroCombobox extends AuroElement$1 {
               .inputmode="${this.inputmode}"
               .placeholder="${this.placeholder}"
               .type="${this.type}"
+              .value="${this.typedValue}"
               ?disabled="${this.disabled}"
               ?icon="${this.triggerIcon}"
               ?required="${this.required}"
@@ -17557,6 +17788,10 @@ class AuroMenu extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
+    if (changedProperties.has('optionSelected')) {
+      this.notifySelectionChange();
+    }
+
     if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
@@ -17566,8 +17801,7 @@ class AuroMenu extends AuroElement$1 {
     if (changedProperties.has("value")) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
-        this.optionSelected = undefined;
-        this.index = -1;
+        this.clearSelection();
       } else {
         if (this.multiSelect) {
           // In multiselect mode, this.value should be an array of strings
@@ -17671,6 +17905,12 @@ class AuroMenu extends AuroElement$1 {
       if (changedProperties.has('matchWord') && regexWord &&
           isOptionInteractive(option) && !option.hasAttribute('persistent')) {
         const nested = option.querySelectorAll('.nestingSpacer');
+
+        const displayValueEl = option.querySelector('[slot="displayValue"]');
+        if (displayValueEl) {
+          option.removeChild(displayValueEl);
+        }
+
         // Create nested spacers
         const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
@@ -17680,6 +17920,9 @@ class AuroMenu extends AuroElement$1 {
             regexWord,
             (match) => `<strong>${match}</strong>`
           );
+        if (displayValueEl) {
+          option.append(displayValueEl);
+        }
       }
 
       // Update disabled state
@@ -17811,6 +18054,7 @@ class AuroMenu extends AuroElement$1 {
   clearSelection() {
     this.optionSelected = undefined;
     this.value = undefined;
+    this.index = -1;
   }
 
   /**
@@ -17908,7 +18152,7 @@ class AuroMenu extends AuroElement$1 {
       // In multiselect, toggle individual selections
       this.toggleOption(option);
       // In single select, only handle selection of new options
-    } else if (!this.isOptionSelected(option)) {
+    } else if (this.option !== this.optionSelected || !this.isOptionSelected(option)) {
       this.clearSelection();
       this.handleSelectState(option);
     }
@@ -17939,7 +18183,7 @@ class AuroMenu extends AuroElement$1 {
    * @param {MouseEvent} event - Event object from the browser.
    */
   handleMouseSelect(event) {
-    if (event.target === this) {
+    if (!this.rootMenu || event.target === this) {
       return;
     }
 
@@ -17964,8 +18208,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -17980,6 +18225,15 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    if (this.value) {
+      this.items.forEach((opt) => {
+        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
+          this.handleSelectState(opt);
+          this.notifySelectionChange(evt.type);
+        }
+      });
+    }
   }
 
   /**
@@ -18034,7 +18288,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {
@@ -18063,10 +18316,11 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Notifies selection change to parent components.
+   * @param {any} source - The source that triggers this event.
    * @private
    */
-  notifySelectionChange() {
-    dispatchMenuEvent(this, 'auroMenu-selectedOption');
+  notifySelectionChange(source = undefined) {
+    dispatchMenuEvent(this, 'auroMenu-selectedOption', { source });
   }
 
   /**
@@ -18139,7 +18393,7 @@ class AuroMenu extends AuroElement$1 {
   }
 }
 
-var styleCss$1 = i$5`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}: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-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}: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([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + 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`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}: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-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}: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)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + 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{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected]:hover),:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus:hover),:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]:focus:hover),:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}`;
 
@@ -18613,7 +18867,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,