@aurodesignsystem-dev/auro-formkit 0.0.0-pr726.0 → 0.0.0-pr730.1

package/components/combobox/demo/api.md

@@ -40,7 +40,7 @@
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
 | [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
-| [isValid](#isValid)  | `(): boolean`                          |                                                  |
+| [isValid](#isValid)  | `(): boolean`                          | Checks if the element is valid.                  |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 

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

@@ -5232,7 +5232,7 @@ const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c
 
 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 styleCss$4$2 = 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}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:hidden;width:100%;padding:0;border:0;background:unset;outline:none;text-overflow:ellipsis}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center}`;
+var styleCss$4$2 = 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}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center}`;
 
 var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}: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}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
 
@@ -5240,7 +5240,7 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
 
 var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
 
-var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{padding-top:4px;cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;padding-bottom:8px;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents>*{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
+var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
 
 var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
 
@@ -10169,7 +10169,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 helptext - Sets the help text displayed below the input.
+ * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
@@ -10640,7 +10640,7 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   firstUpdated() {
-    // clicking anywhere in the main wrapper will focus the input. Clicking the helptext or label will not focus the input.
+    // clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
     this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -12957,20 +12957,6 @@ class AuroInput extends BaseInput {
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
   }
 
-  static get properties() {
-    return {
-      ...super.properties,
-
-      /**
-       * @type {boolean}
-       */
-      hideInputVisually: {
-        type: Boolean,
-        reflect: true,
-      }
-    };
-  }
-
   static get styles() {
     return [
       i$5`${classicStyleCss}`,
@@ -13006,11 +12992,7 @@ class AuroInput extends BaseInput {
    */
   get commonInputClasses() {
     return {
-      'util_displayHiddenVisually': this.hideInputVisually !== undefined
-        ? this.hideInputVisually
-        // eslint-disable-next-line no-warning-comments
-        // TODO: refactor this to use a less brittle/forced solution.
-        : this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
+      'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
     };
   }
 
@@ -13021,11 +13003,7 @@ class AuroInput extends BaseInput {
    */
   get legacyInputClasses() {
     return {
-      ...this.commonInputClasses,
-      'util_displayHiddenVisually':
-        this.hideInputVisually !== undefined
-          ? this.hideInputVisually
-          : !this.hasFocus && !this.value
+      ...this.commonInputClasses
     };
   }
 
@@ -13098,7 +13076,12 @@ class AuroInput extends BaseInput {
    * @returns {void}
    */
   checkDisplayValueSlotChange() {
-    const nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
+    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') {
+      nodes = nodes[0].assignedNodes();
+    }
 
     let hasContent = false;
 
@@ -13305,7 +13288,7 @@ class AuroInput extends BaseInput {
         ? u$2`
           <${this.helpTextTag} ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" part="helpText">
-              <slot name="helptext">${this.getHelpText()}</slot>
+              <slot name="helpText">${this.getHelpText()}</slot>
             </p>
           </${this.helpTextTag}>
         `
@@ -15984,7 +15967,6 @@ class AuroCombobox extends AuroElement$1 {
 
       /**
        * Value selected for the dropdown menu.
-       * @type {string}
        */
       value: {
         type: String
@@ -16034,6 +16016,10 @@ class AuroCombobox extends AuroElement$1 {
     ];
   }
 
+  /**
+   * Checks if the element is valid.
+   * @returns {boolean} - Returns true if the element is valid, false otherwise.
+   */
   isValid() {
     let valid = true;
 
@@ -16057,87 +16043,95 @@ class AuroCombobox extends AuroElement$1 {
   }
 
   /**
-   * Processes hidden state of all menu options and determines if there are any available options not hidden.
+   * Updates the filter for the available options based on the input value.
    * @private
-   * @returns {void}
    */
-  handleMenuOptions() {
-    // Reset menu matchword UI
-    this.menu.updateItemsState(new Map([
-      [
-        'matchWord',
-        true
-      ]
-    ]));
+  updateFilter() {
 
-    this.generateOptionsArray();
-    this.availableOptions = [];
+    // Reset available options if noFilter is set to false after being true.
+    if (this.noFilter) {
+      this.availableOptions = [...this.options];
+      return;
+    }
 
-    if (this.menu.optionSelected) {
-      // Get first option since combobox is single-select
-      const selected = this.menu.optionSelected;
+    this.noMatchOption = undefined;
 
-      if (!this.optionSelected || this.optionSelected !== selected) {
-        this.optionSelected = selected;
-      }
+    this.options.forEach((option) => {
+      let matchString = option.textContent.toLowerCase();
 
-      if (!this.value || this.value !== selected.value) {
-        this.value = selected.value;
+      if (option.hasAttribute('nomatch')) {
+        this.noMatchOption = option;
+      }
 
-        this.menu.value = this.value;
+      if (option.hasAttribute('persistent')) {
+        this.availableOptions.push(option);
       }
 
-      if (this.input.value !== selected.textContent) {
-        this.input.value = selected.textContent;
+      if (option.hasAttribute('suggest')) {
+        matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
       }
 
-      if (this.menu.matchWord !== this.input.value) {
-        this.menu.matchWord = this.input.value;
+      // only count options that match the typed input value AND are not currently selected AND are not static
+      if (this.input.value && matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
+        option.removeAttribute('hidden');
+        this.availableOptions.push(option);
+      } else if (!option.hasAttribute('persistent')) {
+        // Hide all other non-persistent options
+        option.setAttribute('hidden', '');
       }
+    });
 
-      this.classList.add('combobox-filled');
+    if (this.availableOptions.length === 0) {
+      if (this.noMatchOption) {
+        this.noMatchOption.removeAttribute('hidden');
+      } else {
+        this.hideBib();
+      }
+    } else if (this.noMatchOption) {
+      this.noMatchOption.setAttribute('hidden', '');
     }
+  }
 
-    if (this.noFilter) {
-      this.availableOptions = [...this.options];
-    } else {
-      this.noMatchOption = undefined;
-
-      this.options.forEach((option) => {
-        let matchString = option.textContent.toLowerCase();
+  /**
+   * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
+   * @private
+   * @returns {void}
+   */
+  async syncValuesAndStates() {
 
-        if (option.hasAttribute('nomatch')) {
-          this.noMatchOption = option;
-        }
+    // Sync values
+    this.menu.value = this.value;
+    this.menu.matchWord = this.value;
+    this.input.value = this.value;
 
-        if (option.hasAttribute('persistent')) {
-          this.availableOptions.push(option);
-        }
+    // Wait a lifecycle for child components to update
+    await Promise.all([this.menu.updateComplete]);
+  }
 
-        if (option.hasAttribute('suggest')) {
-          matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
-        }
+  /**
+   * Resets the menu matchWord to true.
+   * @private
+   */
+  resetMenuMatchword() {
+    this.menu.updateItemsState(new Map([
+      [
+        'matchWord',
+        true
+      ]
+    ]));
+  };
 
-        // only count options that match the typed input value AND are not currently selected AND are not static
-        if (this.input.value && matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
-          option.removeAttribute('hidden');
-          this.availableOptions.push(option);
-        } else if (!option.hasAttribute('persistent')) {
-          // Hide all other non-persistent options
-          option.setAttribute('hidden', '');
-        }
-      });
+  /**
+   * Processes hidden state of all menu options and determines if there are any available options not hidden.
+   * @private
+   * @returns {void}
+   */
+  handleMenuOptions() {
 
-      if (this.availableOptions.length === 0) {
-        if (this.noMatchOption) {
-          this.noMatchOption.removeAttribute('hidden');
-        } else {
-          this.hideBib();
-        }
-      } else if (this.noMatchOption) {
-        this.noMatchOption.setAttribute('hidden', '');
-      }
-    }
+    this.resetMenuMatchword();
+    this.generateOptionsArray();
+    this.availableOptions = [];
+    this.updateFilter();
   }
 
   /**
@@ -16204,7 +16198,11 @@ class AuroCombobox extends AuroElement$1 {
       this.dropdownOpen = ev.detail.expanded;
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
-      setTimeout(this.setInputFocus, 0);
+      setTimeout(() => {
+        if (document.activeElement === this) {
+          this.setInputFocus();
+        }
+      }, 0);
     });
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
@@ -16295,8 +16293,6 @@ class AuroCombobox extends AuroElement$1 {
           this.menu.matchWord = this.input.value;
         }
 
-        this.classList.add('combobox-filled');
-
         // update the hidden state of options based on newly selected value
         this.handleMenuOptions();
 
@@ -16437,9 +16433,6 @@ class AuroCombobox extends AuroElement$1 {
     // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
       this.hideBib();
-      this.classList.remove('combobox-filled');
-    } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
-      this.classList.add('combobox-filled');
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
@@ -16497,7 +16490,6 @@ class AuroCombobox extends AuroElement$1 {
    * @private
    * @returns {void}
    */
-
   performUpdate() {
     super.performUpdate();
 
@@ -16556,30 +16548,18 @@ class AuroCombobox extends AuroElement$1 {
     this.validation.validate(this, force);
   }
 
-  updated(changedProperties) {
+  async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
-    if (changedProperties.has('value')) {
-      if (this.value) {
-        if (this.optionSelected && this.optionSelected.value === this.value) {
-          // If value updates and the previously selected option already matches the new value
-          // just update the input value to use the textContent of the optionSelected
-          this.input.value = this.optionSelected.textContent;
-        } else {
-          // Otherwise just enter the value into the input
-          this.optionSelected = undefined;
+    if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
 
-          const inputValue = this.value;
-          this.input.value = inputValue;
+      // Sync the input, menu, and optionSelected states
+      await this.syncValuesAndStates();
 
-          // Update the menu value and matchWord
-          this.menu.matchWord = inputValue;
-          this.handleMenuOptions();
-
-          // If the value got set programmatically make sure we hide the bib
-          // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-          if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
-            this.hideBib();
-          }
+      if (this.value) {
+        // If the value got set programmatically make sure we hide the bib
+        // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
+        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+          this.hideBib();
         }
       } else {
         this.reset();
@@ -17587,7 +17567,7 @@ class AuroMenu extends AuroElement$1 {
   }
 }
 
-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);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);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) + 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 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)}`;