@aurodesignsystem/auro-formkit 5.1.3 → 5.1.4

package/components/combobox/dist/index.js

@@ -4300,7 +4300,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -5085,8 +5085,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) {
@@ -10147,7 +10152,7 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -10221,7 +10226,7 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
  * @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.
@@ -10249,6 +10254,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;
@@ -10342,6 +10348,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.
        */
@@ -13107,7 +13121,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 === '')
+      );
   }
 
   /**
@@ -13127,7 +13147,7 @@ class AuroInput extends BaseInput {
    * @private
    */
   get labelHidden() {
-    return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
+    return this.hasDisplayValueContent && !this.dvInputOnly && !this.hasFocus && this.hasValue;
   }
 
   /**
@@ -13136,18 +13156,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';
   }
 
   /**
@@ -13157,7 +13185,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') {
@@ -13200,6 +13238,13 @@ class AuroInput extends BaseInput {
     };
   }
 
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      [this.inputFontClass]: true,
+    };
+  }
+
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
@@ -13272,7 +13317,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();
     }
 
@@ -13363,7 +13408,7 @@ class AuroInput extends BaseInput {
         type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
       />
       <div class="${classMap(displayValueClasses)}" aria-hidden="true" part="displayValue">
-        <div class="displayValueWrapper">
+        <div class="${classMap(this.commonDisplayValueWrapperClasses)}">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
         </div>
       </div>
@@ -15581,7 +15626,7 @@ var bibTemplateVersion = '1.0.0';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}: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 = css`: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 = css`: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 = css`: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}`;
 
@@ -15625,7 +15670,7 @@ class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -15907,7 +15952,9 @@ class AuroHelpText extends LitElement {
  * @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.
  */
 
@@ -15917,75 +15964,60 @@ class AuroCombobox extends AuroElement {
   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
@@ -16023,7 +16055,7 @@ class AuroCombobox extends AuroElement {
       },
 
       /**
-       * 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,
@@ -16058,6 +16090,14 @@ class AuroCombobox extends AuroElement {
         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.
        */
@@ -16140,6 +16180,17 @@ class AuroCombobox extends AuroElement {
         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.
@@ -16193,6 +16244,18 @@ class AuroCombobox extends AuroElement {
         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.
        */
@@ -16209,6 +16272,14 @@ class AuroCombobox extends AuroElement {
         reflect: true
       },
 
+      /**
+       * Specifies the value of the input element within the combobox.
+       */
+      typedValue: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Specifies the `validityState` this element is in.
        */
@@ -16268,6 +16339,24 @@ class AuroCombobox extends AuroElement {
     ];
   }
 
+  /**
+   * 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.
@@ -16356,11 +16445,38 @@ class AuroCombobox extends AuroElement {
     // 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();
   }
 
   /**
@@ -16382,11 +16498,15 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleMenuOptions() {
-
     this.resetMenuMatchword();
+
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.syncValuesAndStates();
+    }
   }
 
   /**
@@ -16484,14 +16604,29 @@ class AuroCombobox extends AuroElement {
     });
   }
 
+  /**
+   * @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();
+      }
     }
   }
 
@@ -16527,6 +16662,8 @@ class AuroCombobox extends AuroElement {
   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
@@ -16547,7 +16684,7 @@ class AuroCombobox extends AuroElement {
     }
 
     // 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;
 
@@ -16557,12 +16694,10 @@ class AuroCombobox extends AuroElement {
 
         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;
@@ -16570,18 +16705,14 @@ class AuroCombobox extends AuroElement {
 
         // 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', () => {
@@ -16623,12 +16754,8 @@ class AuroCombobox extends AuroElement {
       }
     });
 
-    // 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} }));
     });
   }
 
@@ -16672,29 +16799,9 @@ class AuroCombobox extends AuroElement {
     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
@@ -16719,10 +16826,16 @@ class AuroCombobox extends AuroElement {
    * @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();
         }
@@ -16737,6 +16850,10 @@ class AuroCombobox extends AuroElement {
             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();
@@ -16766,8 +16883,15 @@ class AuroCombobox extends AuroElement {
     });
 
     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;
+    });
   }
 
   /**
@@ -16812,7 +16936,9 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   focus() {
-    this.input.focus();
+    if (!this.componentHasFocus) {
+      this.input.focus();
+    }
   }
 
   /**
@@ -16820,8 +16946,13 @@ class AuroCombobox extends AuroElement {
    * @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;
   }
 
   /**
@@ -16830,6 +16961,11 @@ class AuroCombobox extends AuroElement {
    */
   clear() {
     this.input.clear();
+    if (this.menu.value || this.menu.optionSelected) {
+      this.menu.reset();
+    }
+    this.optionSelected = undefined;
+    this.value = undefined;
   }
 
   /**
@@ -16842,7 +16978,16 @@ class AuroCombobox extends AuroElement {
 
   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
@@ -16856,6 +17001,19 @@ class AuroCombobox extends AuroElement {
 
       // 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')) {
@@ -16898,6 +17056,16 @@ class AuroCombobox extends AuroElement {
     });
   }
 
+  /**
+   * 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
@@ -16907,6 +17075,10 @@ class AuroCombobox extends AuroElement {
   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) => {
@@ -16983,14 +17155,16 @@ class AuroCombobox extends AuroElement {
               .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}"
@@ -17006,7 +17180,7 @@ class AuroCombobox extends AuroElement {
           <${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}"
@@ -17016,6 +17190,7 @@ class AuroCombobox extends AuroElement {
               .inputmode="${this.inputmode}"
               .placeholder="${this.placeholder}"
               .type="${this.type}"
+              .value="${this.typedValue}"
               ?disabled="${this.disabled}"
               ?icon="${this.triggerIcon}"
               ?required="${this.required}"