@aurodesignsystem-dev/auro-formkit 0.0.0-pr1507.0 → 0.0.0-pr1508.1

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

@@ -485,15 +485,17 @@ let AuroFormValidation$1 = class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -810,6 +812,8 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/* eslint-disable no-underscore-dangle */
+
 /**
  * Returns the clear button element from the active input's shadow
  * DOM, if available.
@@ -845,11 +849,9 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
  * @param {Object} menu - The menu component.
  */
 function reconcileMenuIndex(menu) {
-  // eslint-disable-next-line no-underscore-dangle
   if (menu._index < 0 && menu.optionActive && menu.items) {
     const idx = menu.items.indexOf(menu.optionActive);
     if (idx >= 0) {
-      // eslint-disable-next-line no-underscore-dangle
       menu._index = idx;
     }
   }
@@ -868,11 +870,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
-          component.activateLastEnabledAvailableOption();
-        } else {
-          navigateArrow(component, 'down');
-        }
+        navigateArrow(component, 'down');
       } else {
         component.showBib();
       }
@@ -891,11 +889,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
-          component.activateFirstEnabledAvailableOption();
-        } else {
-          navigateArrow(component, 'up');
-        }
+        navigateArrow(component, 'up');
       } else {
         component.showBib();
       }
@@ -911,13 +905,18 @@ const comboboxKeyboardStrategy = {
   },
 
   Enter(component, evt, ctx) {
+    // Forms should not submit on Enter from a combobox, regardless of which
+    // child element (input, clear button, menu) is focused.
+    evt.stopPropagation();
+
     if (isClearBtnFocused(ctx)) {
-      // If the clear button has focus, let the browser activate it normally.
-      // stopPropagation prevents parent containers (e.g., forms) from treating
-      // Enter as a submit, but we must NOT call preventDefault — that would
-      // block the browser's built-in "Enter activates focused button" behavior.
-      evt.stopPropagation();
-    } else if (ctx.isExpanded && component.menu.optionActive) {
+      // Let the browser dispatch Enter to the focused clear button so its
+      // built-in activation fires and clears the selection. Do NOT call
+      // preventDefault — that would block the activation.
+      return;
+    }
+
+    if (ctx.isExpanded && component.menu.optionActive) {
       reconcileMenuIndex(component.menu);
       component.menu.makeSelection();
 
@@ -926,14 +925,8 @@ const comboboxKeyboardStrategy = {
       }
 
       evt.preventDefault();
-      evt.stopPropagation();
     } else {
-      // Prevent the keypress from bubbling to parent containers (e.g., forms)
-      // which could interpret Enter as a submit or trigger other unintended behavior.
-      // This is safe because showBib() opens the dialog programmatically,
-      // not via event propagation.
       evt.preventDefault();
-      evt.stopPropagation();
       component.showBib();
     }
   },
@@ -978,7 +971,7 @@ const comboboxKeyboardStrategy = {
         component.setClearBtnFocus();
       }
     }
-  },
+  }
 };
 
 /**
@@ -4873,7 +4866,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202606192121';
+var formkitVersion$2 = '202607010100';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -5824,6 +5817,14 @@ class AuroDropdown extends AuroElement$2 {
           };
           this.addEventListener('keydown', this._bibTabHandler);
 
+          // Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
+          // desktopModal trap owns focus management. Without this, the very
+          // first focus move into the bib (from the RAF below) triggers
+          // handleFocusLoss → hideBib, tearing down the trap before the
+          // user can press Tab.
+          this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
+          this.noHideOnThisFocusLoss = true;
+
           // Move initial focus into the bib content, matching FocusTrap behavior
           requestAnimationFrame(() => {
             const focusables = getFocusableElements(this.bibContent);
@@ -6137,6 +6138,7 @@ class AuroDropdown extends AuroElement$2 {
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${o(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${o(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
@@ -10646,15 +10648,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -16590,10 +16594,18 @@ class AuroInputUtilities {
    * @returns {string | undefined}
    */
   toFormattedValue(valueObject, format) {
+    // Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
+    // `format` argument has to fail gracefully rather than throw on
+    // `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
+    // as "no format → no display value".
+    if (!format) {
+      return undefined;
+    }
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
       return undefined;
     }
 
@@ -16740,79 +16752,19 @@ class BaseInput extends AuroElement$1 {
   constructor() {
     super();
 
-    this.appearance = "default";
-    this.disabled = false;
-    this.layout = 'classic';
-    this.locale = 'en-US';
-    this.max = undefined;
-    this._maxObject = undefined;
-    this.maxLength = undefined;
-    this.min = undefined;
-    this._minObject = undefined;
-    this.minLength = undefined;
-    this.required = false;
-    this.onDark = false;
-    this.setCustomValidityForType = undefined;
-    this.size = 'lg';
-    this.shape = 'classic';
-    this.value = undefined;
-    this._valueObject = undefined;
-
-    this._initializePrivateDefaults();
-  }
-
-  /**
-   * Internal Defaults.
-   * @private
-   * @returns {void}
-   */
-  _initializePrivateDefaults() {
+    // Single-source initialization. Alphabetized so duplicate or stale
+    // defaults are immediately obvious on a diff. Every field is assigned
+    // exactly once here (previously the constructor + the old
+    // `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
+    // fields and double-allocated `util` and `validation`, discarding the
+    // first instance). `validation` is now allocated exactly once; `util`
+    // is seeded here with an en-US default and then rebuilt in
+    // `connectedCallback` once the consumer-resolved locale is available,
+    // so a parent (datepicker/combobox) calling `validate()` synchronously
+    // during its own update cycle sees a populated util instance.
     this.activeLabel = false;
-    this.appearance = "default";
-    this.icon = false;
-    this.disabled = false;
-    this.dvInputOnly = false;
-    this.hideLabelVisually = false;
-    this.max = undefined;
-    this.maxLength = undefined;
-    this.min = undefined;
-    this.minLength = undefined;
-    this.noValidate = false;
-    this.onDark = false;
-    this.required = false;
-    this.setCustomValidityForType = undefined;
-
-    // Used for storing raw values returned from input mask.
-    this._rawMaskValue = undefined;
-
-    /**
-     * @private
-     */
-    this.layout = 'classic';
-
-    /**
-     * @private
-     */
-    this.shape = 'classic';
-
-    /**
-     * @private
-     */
-    this.size = 'lg';
-
-    this.touched = false;
-    this.util = new AuroInputUtilities({
-      locale: "en-US",
-      format: this.format
-    });
-    this.validation = new AuroFormValidation();
-    this.inputIconName = undefined;
-    this.showPassword = false;
-    this.validationCCLength = undefined;
-    this.hasValue = false;
-    this.label = 'Input label is undefined';
-
 
+    /** @private */
     this.allowedInputTypes = [
       "text",
       "number",
@@ -16821,7 +16773,9 @@ class BaseInput extends AuroElement$1 {
       "credit-card",
       "tel"
     ];
-    this.icon = false;
+    this.appearance = "default";
+
+    /** @private */
     this.dateFormatMap = {
       'mm/dd/yyyy': 'dateMMDDYYYY',
       'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -16838,27 +16792,62 @@ class BaseInput extends AuroElement$1 {
       'dd/mm': 'dateDDMM',
       'mm/dd': 'dateMMDD'
     };
+    this.disabled = false;
+
+    /** @private */
     this.domHandler = new DomHandler();
     this.dvInputOnly = false;
     this.hasValue = false;
+    this.hideLabelVisually = false;
+    this.icon = false;
+
+    /** @private */
     this.inputIconName = undefined;
+
+    /** @private */
     this.label = 'Input label is undefined';
+    this.layout = 'classic';
+    this.locale = 'en-US';
+    this.max = undefined;
+    this.maxLength = undefined;
+    this.min = undefined;
+    this.minLength = undefined;
     this.noValidate = false;
-    this._rawMaskValue = undefined; // Used for storing raw values returned from input mask.
+    this.onDark = false;
+    // Raw values returned from the input mask before model normalization.
+    this._rawMaskValue = undefined;
+    this.required = false;
+    this.setCustomValidityForType = undefined;
+    // Credit Card is intentionally excluded — its mask manages the cursor
+    // itself, and listing it here caused cursor placement issues in Safari.
+    /** @private */
     this.setSelectionInputTypes = [
       "text",
       "password",
       "email"
-    ]; // Credit Card is not included as this caused cursor placement issues in Safari.
+    ];
+    this.shape = 'classic';
+
+    /** @private */
     this.showPassword = false;
+    this.size = 'lg';
     this.touched = false;
+
+    /** @private */
     this.uniqueId = new UniqueId().create();
+
+    /** @private */
     this.util = new AuroInputUtilities({
       locale: this.locale,
       format: this.format
     });
+
+    /** @private */
     this.validation = new AuroFormValidation();
+
+    /** @private */
     this.validationCCLength = undefined;
+    this.value = undefined;
   }
 
   // function to define props used within the scope of this component
@@ -17296,7 +17285,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject || this._computeDateObjectFallback(this.value);
+    return this.value && dateFormatter.isValidDate(this.value) ? dateFormatter.stringToDateInstance(this.value) : undefined;
   }
 
   /**
@@ -17304,7 +17293,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject || this._computeDateObjectFallback(this.min);
+    return this.min && dateFormatter.isValidDate(this.min) ? dateFormatter.stringToDateInstance(this.min) : undefined;
   }
 
   /**
@@ -17312,50 +17301,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get maxObject() {
-    return this._maxObject || this._computeDateObjectFallback(this.max);
-  }
-
-  /**
-   * Parses a date string into a Date object when the corresponding `_*Object`
-   * field hasn't been synced yet by `updated()`. Returns undefined when the
-   * input type/format isn't a full date or the string is not a valid date.
-   *
-   * Why this exists: a parent (datepicker) can call `inputN.validate()` from
-   * inside its own `updated()` before this input's `updated()` has run
-   * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
-   * and range checks would otherwise silently no-op (flipping the result to
-   * `valid` or `patternMismatch`).
-   * @private
-   * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
-   * @returns {Date|undefined}
-   */
-  _computeDateObjectFallback(dateStr) {
-    if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
-      return undefined;
-    }
-    if (!dateFormatter.isValidDate(dateStr)) {
-      return undefined;
-    }
-    return dateFormatter.stringToDateInstance(dateStr);
-  }
-
-  /**
-   * Internal setter for readonly date object properties.
-   * @private
-   * @param {'valueObject'|'minObject'|'maxObject'} propertyName - Public object property name.
-   * @param {Date|undefined} propertyValue - Value to assign.
-   * @returns {void}
-   */
-  setDateObjectProperty(propertyName, propertyValue) {
-    const internalPropertyName = `_${propertyName}`;
-    const previousValue = this[internalPropertyName];
-
-    if (previousValue === propertyValue) {
-      return;
-    }
-
-    this[internalPropertyName] = propertyValue;
-    this.requestUpdate(propertyName, previousValue);
+    return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
   }
 
   connectedCallback() {
@@ -17384,7 +17330,6 @@ class BaseInput extends AuroElement$1 {
       format: this.format
     });
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   disconnectedCallback() {
@@ -17404,12 +17349,17 @@ class BaseInput extends AuroElement$1 {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
 
-    // add attribute for query selectors when auro-input is registered under a custom name
-    if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
-      this.setAttribute('auro-input', '');
-    }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
+    // Normalize the format token to lowercase so case-mixed values supplied
+    // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
+    // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
+    // format silently misses the map and leaves `setCustomValidityForType`
+    // unset.
+    if (this.format) {
+      this.format = this.format.toLowerCase();
+    }
+
     // use validity message override if declared when initializing the component
     if (this.hasAttribute('setCustomValidity')) {
       this.ValidityMessageOverride = this.setCustomValidity;
@@ -17418,7 +17368,6 @@ class BaseInput extends AuroElement$1 {
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   /**
@@ -17494,6 +17443,13 @@ class BaseInput extends AuroElement$1 {
 
     if (typeToI18n.includes(this.type)) {
       this.setCustomValidityForType = i18n(this.lang, this.type);
+    // COVERAGE: this `else if` branch is unreachable in WTR. connectedCallback
+    // (L682) calls configureDataForType, which at L1266-1268 assigns
+    // `this.format = this.util.getDateMaskFromLocale().toLowerCase()` for any
+    // type=date input whose `format` attribute is unset. That runs before
+    // firstUpdated invokes setCustomHelpTextMessage, so `!this.format` is
+    // always false here. Retained as a defensive fallback; the whole function
+    // is @deprecated per AB#1557296 and slated for removal.
     } else if (!this.format && this.type === 'date') {
       this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY');
     } else if (this.dateFormatMap[this.format]) {
@@ -17555,8 +17511,6 @@ class BaseInput extends AuroElement$1 {
       this.configureDataForType();
     }
 
-    this.syncDateValues(changedProperties);
-
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
@@ -17578,14 +17532,14 @@ class BaseInput extends AuroElement$1 {
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        if (this.maskInstance && this.type === 'credit-card') {
+        if (this.maskInstance && this.type !== 'date') {
           // Route through the mask so its _value and el.value stay in lock-step
           // (set value calls updateControl which writes el.value = displayValue).
           // Writing el.value directly leaves the mask thinking displayValue is
-          // stale; _saveSelection on the next focus/click then warns. Scoped to
-          // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
-          // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
-          // and flip validity from patternMismatch to tooShort.
+          // stale; _saveSelection on the next focus/click then warns. Date is
+          // excluded because its formattedValue can be raw ISO when the calendar
+          // is invalid, and re-masking through mm/dd/yyyy would truncate it and
+          // flip validity from patternMismatch to tooShort.
           this.maskInstance.value = formattedValue || '';
         } else if (formattedValue) {
           this.inputElement.value = formattedValue;
@@ -17627,120 +17581,65 @@ class BaseInput extends AuroElement$1 {
     }));
   }
 
-
-  /**
-   * Synchronizes the ISO string values and Date object representations for date-related properties.
-   * This keeps the model and display values aligned when either side changes.
-   *
-   * When a full date format is in use, this method updates `value`, `min`, and `max` from their corresponding
-   * Date objects or vice versa, based on which properties have changed. It only runs when the current configuration
-   * represents a full year/month/day date format.
-   *
-   * @param {Map<string, unknown>|undefined} [changedProperties=undefined] - Optional map of changed properties used to limit which values are synchronized.
-   * @returns {void}
-   * @private
-   */
-  syncDateValues(changedProperties = undefined) {
-    if (!this.util.isFullDateFormat(this.type, this.format)) {
-      return;
-    }
-
-    this.syncSingleDateValue(changedProperties, 'valueObject', 'value');
-    this.syncSingleDateValue(changedProperties, 'minObject', 'min');
-    this.syncSingleDateValue(changedProperties, 'maxObject', 'max');
-  }
-
-  /**
-   * Synchronizes one date object/string property pair.
-   * @private
-   * @param {Map<string, unknown>|undefined} changedProperties - Map of changed properties from Lit.
-   * @param {string} objectProperty - Date object property name.
-   * @param {string} valueProperty - ISO string property name.
-   * @returns {void}
-   */
-  syncSingleDateValue(changedProperties, objectProperty, valueProperty) {
-    const objectPropertyChanged = !changedProperties || changedProperties.has(objectProperty);
-
-    // objectProperty wins over valueProperty when both changed
-    if (objectPropertyChanged && this[objectProperty]) {
-      this[valueProperty] = dateFormatter.toISOFormatString(this[objectProperty]);
-      return;
-    }
-
-    const valuePropertyChanged = !changedProperties || changedProperties.has(valueProperty);
-    if (!valuePropertyChanged) {
-      return;
-    }
-
-    // when value is newly set to the same ISO string that corresponds to the existing Date object, do not clear the Date object (avoid unnecessary updates)
-    if (
-      changedProperties &&
-      valueProperty === 'value' &&
-      changedProperties.get('value') === undefined &&
-      this[objectProperty] instanceof Date &&
-      this[valueProperty] === dateFormatter.toISOFormatString(this[objectProperty])
-    ) {
-      return;
-    }
-
-    if (dateFormatter.isValidDate(this[valueProperty])) {
-      this.setDateObjectProperty(objectProperty, dateFormatter.stringToDateInstance(this[valueProperty]));
-    } else {
-      this.setDateObjectProperty(objectProperty, undefined);
-    }
-  }
-
   /**
    * Sets up IMasks and logic based on auto-formatting requirements.
    * @private
    * @returns {void}
    */
   configureAutoFormatting() {
-    // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
-    // by _configuringMask above) could otherwise trigger handleInput →
-    // processCreditCard → configureAutoFormatting before the outer call's
-    // set value has finished its alignCursor pass.
+    // _configuringMask gates two things: external re-entry into this method
+    // while setup is mid-flight (from property changes that call back here),
+    // and the accept/complete listeners below — both need to ignore the mask
+    // events fired by our own value-restore step.
     if (this._configuringMask) return;
     this._configuringMask = true;
     try {
+      // Destroy any prior mask so IMask can attach fresh under the new format.
+      // Null the reference too — if the new maskOptions.mask is falsy (e.g.
+      // type switched from credit-card to text) the IMask() reassignment
+      // below is skipped, and downstream writes at line ~823 would otherwise
+      // route through the destroyed instance.
       if (this.maskInstance) {
         this.maskInstance.destroy();
+        this.maskInstance = null;
       }
 
-      // Pass new format to util
       this.util.updateFormat(this.format);
 
       const maskOptions = this.util.getMaskOptions(this.type, this.format);
 
       if (this.inputElement && maskOptions.mask) {
-
-        // Stash and clear any existing value before IMask init.
-        // IMask's constructor processes the current input value which requires
-        // selection state — clearing first avoids that scenario entirely.
-        // When the format changes (e.g. locale switch) and we have a valid ISO
-        // model value, compute the display string for the NEW format instead of
-        // re-using the old display string, which may be invalid in the new mask.
+        // Capture the current display so it can be re-applied after IMask
+        // attaches. The restore at the bottom goes through maskInstance.value
+        // (not inputElement.value directly) so the mask's internal state and
+        // the input's displayed text stay in lock-step.
         let existingValue = this.inputElement.value;
+
+        // Format-change case (e.g. locale switch): existingValue is the OLD
+        // mask's display string and may not parse under the new mask. When
+        // we have a valid date model, rebuild the display from valueObject
+        // (the canonical source) using the new mask's format function.
         if (
           this.util.isFullDateFormat(this.type, this.format) &&
           this.value &&
-          dateFormatter.isValidDate(this.value) &&
-          this.valueObject instanceof Date &&
-          !Number.isNaN(this.valueObject.getTime()) &&
+          this.valueObject &&
           typeof maskOptions.format === 'function'
         ) {
           existingValue = maskOptions.format(this.valueObject);
         }
 
+        // Clear before IMask attaches so the constructor seeds an empty
+        // internal value. Otherwise IMask reads the stale unmasked string
+        // and emits a spurious 'accept' before the restore below runs.
         this.skipNextProgrammaticInputEvent = true;
         this.inputElement.value = '';
 
         this.maskInstance = IMask(this.inputElement, maskOptions);
 
+        // Mask fires 'accept' on every value change, including the restore
+        // step below. Skip events fired during configureAutoFormatting so
+        // we don't overwrite a value the parent just pushed.
         this.maskInstance.on('accept', () => {
-          // Suppress propagation during configureAutoFormatting's own value-restoration
-          // (line below) — the mask emits 'accept' on every value-set, including ours,
-          // and we don't want to overwrite a value the parent just pushed.
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
           if (this.type === "date") {
@@ -17748,6 +17647,8 @@ class BaseInput extends AuroElement$1 {
           }
         });
 
+        // Mask fires 'complete' on the restore step below for any value that
+        // happens to be a complete match. Same setup-suppression as 'accept'.
         this.maskInstance.on('complete', () => {
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
@@ -17756,7 +17657,9 @@ class BaseInput extends AuroElement$1 {
           }
         });
 
-        // Restore the stashed value through IMask so it's properly masked
+        // Write existingValue through the mask (not the input directly) so
+        // the mask reformats it under the new rules and keeps its internal
+        // _value aligned with the input's displayed text.
         if (existingValue) {
           this.maskInstance.value = existingValue;
         }
@@ -17836,6 +17739,38 @@ class BaseInput extends AuroElement$1 {
       this.touched = true;
       this.validation.validate(this);
     }
+
+    // Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
+    // update that can re-render the input and reset the native cursor; we
+    // capture the caret position before that update commits and restore it
+    // via `setSelectionRange` once the update has flushed. Gated on
+    // `setSelectionInputTypes` so credit-card (and other masked types whose
+    // formatter manages the cursor itself) doesn't get a competing write.
+    // Capture the caret position INSIDE the gate — reading `selectionStart`
+    // on input types that don't support text selection (number, email in
+    // some browsers) throws InvalidStateError, which would crash all input
+    // handling. Wrap the read in try/catch belt-and-suspenders even though
+    // the gated types currently support it, since the list is a public
+    // property a consumer could mutate.
+    if (this.setSelectionInputTypes.includes(this.type)) {
+      let selectionStart = null;
+      try {
+        ({ selectionStart } = this.inputElement);
+      } catch (error) { // eslint-disable-line no-unused-vars
+        return;
+      }
+      if (typeof selectionStart !== 'number') {
+        return;
+      }
+      this.updateComplete.then(() => {
+        try {
+          this.inputElement.setSelectionRange(selectionStart, selectionStart);
+        } catch (error) { // eslint-disable-line no-unused-vars
+          // Some input types (number/email in certain UAs) throw on
+          // setSelectionRange; swallow and let the native cursor stand.
+        }
+      });
+    }
   }
 
   /**
@@ -17924,7 +17859,6 @@ class BaseInput extends AuroElement$1 {
    */
   reset() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
     this.validation.reset(this);
   }
 
@@ -17933,7 +17867,6 @@ class BaseInput extends AuroElement$1 {
    */
   clear() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
   }
 
   /**
@@ -17971,7 +17904,7 @@ class BaseInput extends AuroElement$1 {
    */
   get placeholderStr() {
     if (!this.placeholder && this.type === 'date') {
-      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+      return this.format.toUpperCase();
     }
     return this.placeholder || "";
   }
@@ -18462,7 +18395,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202606192121';
+var formkitVersion$1 = '202607010100';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -18965,6 +18898,7 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickShowPassword}"
           appearance="${this.onDark ? 'inverse' : this.appearance}"
+          aria-pressed="${this.showPassword ? 'true' : 'false'}"
           class="notificationBtn passwordBtn"
           shape="circle"
           size="sm"
@@ -19038,25 +18972,29 @@ class AuroInput extends BaseInput {
    * @returns {html} - Returns HTML for the help text and error message.
    */
   renderHtmlHelpText() {
+    // Single `<p>` with stable identity across validity transitions —
+    // previously two distinct templates (valid vs invalid) caused Lit to
+    // replace the node entirely on a flip, and VoiceOver wouldn't
+    // re-announce because the live-region element it was watching had been
+    // removed and a new one inserted. Keeping one node means the `role`,
+    // `aria-live`, and text content all change in-place, which AT does
+    // observe and announce.
+    const isError = this.validity && this.validity !== 'valid';
     return u$7`
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
-        ? u$7`
-          <${this.helpTextTag}
-            appearance="${this.onDark ? 'inverse' : this.appearance}">
-            <p id="${this.uniqueId}" part="helpText">
-              <slot name="helpText">${this.getHelpText()}</slot>
-            </p>
-          </${this.helpTextTag}>
-        `
-        : u$7`
-          <${this.helpTextTag} error
-            appearance="${this.onDark ? 'inverse' : this.appearance}">
-            <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-              ${this.errorMessage}
-            </p>
-          </${this.helpTextTag}>
-        `
-      }
+      <${this.helpTextTag}
+        appearance="${this.onDark ? 'inverse' : this.appearance}"
+        ?error=${isError}>
+        <p
+          id="${this.uniqueId}"
+          part="helpText"
+          role="${o(isError ? 'alert' : undefined)}"
+          aria-live="${o(isError ? 'assertive' : undefined)}">
+          ${isError
+        ? this.errorMessage
+        : u$7`<slot name="helpText">${this.getHelpText()}</slot>`
+      }
+        </p>
+      </${this.helpTextTag}>
     `;
   }
 
@@ -19188,7 +19126,7 @@ class AuroInput extends BaseInput {
 
 var colorCss$3 = i$6`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$6`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -19583,7 +19521,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202606192121';
+var formkitVersion = '202607010100';
 
 var styleCss$3 = i$6`.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([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -19951,12 +19889,23 @@ function getOptionLabel(option) {
   if (!option) {
     return '';
   }
-  const clone = option.cloneNode(true);
-  const displayValueEl = clone.querySelector('[slot="displayValue"]');
-  if (displayValueEl) {
-    displayValueEl.remove();
+
+  // Consumer-provided override: short-circuit the DOM walk entirely.
+  if (option.dataset && option.dataset.label) {
+    return option.dataset.label;
+  }
+
+  // Walk direct children — the `slot` attribute only applies to direct children
+  // of the slot host, so a shallow filter is sufficient. Avoids the cloneNode +
+  // querySelector allocation that ran on every keystroke via syncValuesAndStates.
+  let text = '';
+  for (const node of option.childNodes) {
+    const isDisplayValueSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'displayValue';
+    if (!isDisplayValueSlot) {
+      text += node.textContent || '';
+    }
   }
-  return (clone.textContent || '').replace(/\s+/gu, ' ').trim();
+  return text.replace(/\s+/gu, ' ').trim();
 }
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
@@ -20031,8 +19980,6 @@ class AuroCombobox extends AuroElement {
     this.availableOptions = [];
     this.dropdownId = undefined;
     this.dropdownOpen = false;
-    this.triggerExpandedState = false;
-    this._expandedTimeout = null;
     this._inFullscreenTransition = false;
     this.errorMessage = null;
     this.isHiddenWhileLoading = false;
@@ -20043,6 +19990,30 @@ class AuroCombobox extends AuroElement {
     this.touched = false;
     this.validation = new AuroFormValidation$1();
     this.validity = undefined;
+    this._userTyped = false;
+    // Tracks every setTimeout scheduled via _scheduleTimer so
+    // disconnectedCallback can cancel them. Without this, a detached
+    // combobox's pending timers still fire — most are no-ops, but
+    // configureMenu's racing-condition retry would otherwise loop.
+    this._pendingTimers = new Set();
+  }
+
+  /**
+   * setTimeout wrapper that records the timer id so disconnectedCallback
+   * can cancel any outstanding callbacks. The id is removed from the set
+   * once the callback fires so the set doesn't grow unbounded.
+   * @param {Function} fn - Callback to run.
+   * @param {number} ms - Delay in milliseconds.
+   * @returns {number} The timer id.
+   * @private
+   */
+  _scheduleTimer(fn, ms) {
+    const id = setTimeout(() => {
+      this._pendingTimers.delete(id);
+      fn();
+    }, ms);
+    this._pendingTimers.add(id);
+    return id;
   }
 
   // This function is to define props used within the scope of this component
@@ -20404,17 +20375,6 @@ class AuroCombobox extends AuroElement {
         attribute: false
       },
 
-      /**
-       * Deferred aria-expanded state for the trigger input.
-       * Delays the "true" transition so VoiceOver finishes its character echo
-       * before announcing "expanded".
-       * @private
-       */
-      triggerExpandedState: {
-        type: Boolean,
-        reflect: false,
-        attribute: false
-      },
     };
   }
 
@@ -20437,13 +20397,6 @@ class AuroCombobox extends AuroElement {
     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.
@@ -20570,7 +20523,7 @@ class AuroCombobox extends AuroElement {
     if (this.menu) {
       this.menu.matchWord = normalizeFilterValue(this.input.value);
     }
-    const label = getOptionLabel(this.menu.optionSelected) || this.menu.currentLabel;
+    const label = getOptionLabel(this.menu.optionSelected);
     this.updateTriggerTextDisplay(label || this.value);
   }
 
@@ -20584,44 +20537,16 @@ class AuroCombobox extends AuroElement {
     // in suggestion mode, do not override input value if no selection has been made and the input currently has focus
     const isInputFocusedWithNoSelection = !this.menu.value && (this.input.matches(':focus-within') || (this.inputInBib && this.inputInBib.matches(':focus-within')));
 
-    if (!this.persistInput && !(this.behavior === 'suggestion' && isInputFocusedWithNoSelection)) {
-      const nextValue = label || this.value;
-      // Only set the flag when there's an actual write to suppress —
-      // syncValuesAndStates re-enters here during typing when both inputs
-      // already match, and a no-op flag flip would make the bib branch's
-      // bail eat legitimate user-input events.
-      const triggerNeedsSync = this.input.value !== nextValue;
-      const bibNeedsSync = Boolean(this.inputInBib && this.inputInBib !== this.input && this.inputInBib.value !== nextValue);
-      if (triggerNeedsSync || bibNeedsSync) {
-        this._syncingDisplayValue = true;
-        if (triggerNeedsSync) {
-          this.input.value = nextValue;
-        }
-        if (bibNeedsSync) {
-          this.inputInBib.value = nextValue;
-        }
-        const pending = [];
-        if (triggerNeedsSync) {
-          pending.push(this.input.updateComplete);
-        }
-        if (bibNeedsSync) {
-          pending.push(this.inputInBib.updateComplete);
-        }
-        Promise.all(pending).then(() => {
-          // imask reasserts otherwise, and handleBlur reverts to its stale value.
-          if (triggerNeedsSync && this.input.maskInstance && typeof this.input.maskInstance.updateValue === 'function') {
-            this.input.maskInstance.updateValue();
-          }
-          if (bibNeedsSync && this.inputInBib && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
-            this.inputInBib.maskInstance.updateValue();
-          }
-          this._syncingDisplayValue = false;
-        });
-      }
+    const suppressed = this.persistInput || (this.behavior === 'suggestion' && isInputFocusedWithNoSelection);
+    if (!suppressed) {
+      this.syncInputValuesAcrossTriggerAndBib(label || this.value);
     }
 
-    // update the displayValue in the trigger if displayValue slot content is present
-    const displayValueInTrigger = this.input.querySelector('[slot="displayValue"]');
+    // Replace any previously appended displayValue clone in the trigger.
+    // :not(slot) excludes the template's <slot name="displayValue"
+    // slot="displayValue"> forwarder, which also has slot="displayValue"
+    // and would otherwise be matched first and removed.
+    const displayValueInTrigger = this.input.querySelector('[slot="displayValue"]:not(slot)');
 
     if (displayValueInTrigger) {
       displayValueInTrigger.remove();
@@ -20645,6 +20570,53 @@ class AuroCombobox extends AuroElement {
     this.requestUpdate();
   }
 
+  /**
+   * Writes nextValue to the trigger input and the bib input when their current
+   * value differs, then re-asserts imask after Lit's update flushes.
+   * @param {string} nextValue - The value to write to both inputs.
+   * @returns {Promise<void>} Resolves after both inputs flush and imask
+   *   re-asserts; resolves immediately when no sync is needed.
+   * @private
+   */
+  async syncInputValuesAcrossTriggerAndBib(nextValue) {
+    // Only set the flag when there's an actual write to suppress —
+    // syncValuesAndStates re-enters here during typing when both inputs
+    // already match, and a no-op flag flip would make the bib branch's
+    // bail eat legitimate user-input events.
+    const triggerNeedsSync = this.input.value !== nextValue;
+    const bibNeedsSync = Boolean(this.inputInBib) && this.inputInBib.value !== nextValue;
+    if (!triggerNeedsSync && !bibNeedsSync) {
+      return;
+    }
+
+    this._syncingDisplayValue = true;
+
+    const pending = [];
+    if (triggerNeedsSync) {
+      this.input.value = nextValue;
+      pending.push(this.input.updateComplete);
+    }
+    if (bibNeedsSync) {
+      this.inputInBib.value = nextValue;
+      pending.push(this.inputInBib.updateComplete);
+    }
+    // finally — not a bare .then — so that an imask throw (see commit
+    // d1857401c: imask can throw on credit-card format change) doesn't strand
+    // _syncingDisplayValue=true and silently swallow every subsequent input.
+    try {
+      await Promise.all(pending);
+      // imask reasserts otherwise, and handleBlur reverts to its stale value.
+      if (triggerNeedsSync && this.input.maskInstance && typeof this.input.maskInstance.updateValue === 'function') {
+        this.input.maskInstance.updateValue();
+      }
+      if (bibNeedsSync && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
+        this.inputInBib.maskInstance.updateValue();
+      }
+    } finally {
+      this._syncingDisplayValue = false;
+    }
+  }
+
   /**
    * Processes hidden state of all menu options and determines if there are any available options not hidden.
    * @private
@@ -20653,6 +20625,13 @@ class AuroCombobox extends AuroElement {
   handleMenuOptions() {
     this.generateOptionsArray();
     this.availableOptions = [];
+    // Single source of truth for the menu's filter/highlight token per call.
+    // syncValuesAndStates re-writes the same value on exact-match keystrokes —
+    // Lit's hasChanged makes that a no-op — and the prior duplicate set inside
+    // handleTriggerInputValueChange is gone.
+    if (this.menu) {
+      this.menu.matchWord = normalizeFilterValue(this.input.value);
+    }
     this.updateFilter();
 
     // Set aria-setsize/aria-posinset on each visible option so screen readers
@@ -20664,17 +20643,14 @@ class AuroCombobox extends AuroElement {
       option.setAttribute('aria-posinset', index + 1);
     });
 
-    if (this.value && this.input.value && !this.menu.value) {
-      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
-        this.setMenuValue(this.value);
-      }
-
+    if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
+      this.setMenuValue(this.input.value);
       this.syncValuesAndStates();
     }
 
-    // Re-activate when optionActive is no longer visible, or when _index has
-    // been reset (e.g. by clearSelection in an async update) so that
-    // makeSelection() can find the correct option.
+    // Re-activate when optionActive is not in the current scrollable viewport,
+    // or when _index has been reset (e.g. by clearSelection in an async update)
+    // so that makeSelection() can find the correct option.
     if (!this.availableOptions.includes(this.menu.optionActive) || this.menu._index < 0) {
       this.activateFirstEnabledAvailableOption();
     }
@@ -20747,18 +20723,6 @@ class AuroCombobox extends AuroElement {
       this.dropdownOpen = ev.detail.expanded;
       this.updateMenuShapeSize();
 
-      // Defer aria-expanded "true" so VoiceOver finishes character echo
-      // before announcing "expanded". Set "false" immediately on close.
-      clearTimeout(this._expandedTimeout);
-      if (this.dropdownOpen) {
-        const expandedDelay = 150;
-        this._expandedTimeout = setTimeout(() => {
-          this.triggerExpandedState = true;
-        }, expandedDelay);
-      } else {
-        this.triggerExpandedState = false;
-      }
-
       // Clear aria-activedescendant when dropdown closes
       if (!this.dropdownOpen && this.input) {
         this.input.setActiveDescendant(null);
@@ -20808,28 +20772,25 @@ class AuroCombobox extends AuroElement {
 
           guardTouchPassthrough(this.menu);
 
-          // The dialog's showModal() steals focus from the trigger.
-          // A single rAF is enough for the dialog DOM to be painted and
-          // focusable, then doubleRaf finalizes the transition.
+          // showModal() takes focus away from the trigger. Early focus once
+          // the dialog has painted; the shared doubleRaf below is the fallback
+          // for when the dialog needs an extra frame and also clears the
+          // validation guard.
           requestAnimationFrame(() => {
             this.setInputFocus();
           });
-
-          doubleRaf(() => {
-            this.setInputFocus();
-            this._inFullscreenTransition = false;
-          });
-        } else {
-          // Desktop popover-open: restore the trigger caret to end-of-text.
-          // Clicking the trigger lands on auro-input's floating <label for="…">
-          // overlay; Chrome resets the native input's selection to [0, 0] on
-          // label-focus before any JS runs. setInputFocus()'s non-fullscreen
-          // branch parks the caret at end. doubleRaf lets the dropdown layout
-          // settle first, matching the fullscreen branch timing.
-          doubleRaf(() => {
-            this.setInputFocus();
-          });
         }
+        // else (desktop popover-open): Chrome resets the trigger caret to
+        // [0, 0] when its floating <label for="…"> overlay receives focus.
+        // The shared doubleRaf below parks the caret back at end-of-text
+        // after the dropdown layout settles.
+
+        doubleRaf(() => {
+          this.setInputFocus();
+          if (this._inFullscreenTransition) {
+            this._inFullscreenTransition = false;
+          }
+        });
       }
     });
 
@@ -20866,7 +20827,7 @@ class AuroCombobox extends AuroElement {
         this.dropdown.trigger.inert = false;
       }
 
-      setTimeout(() => {
+      this._scheduleTimer(() => {
         this.setInputFocus();
       }, 0);
     });
@@ -20934,24 +20895,7 @@ class AuroCombobox extends AuroElement {
         nativeInput.setSelectionRange(len, len);
       }
     } else {
-      // Safety net for the strategy-change setTimeout: a viewport-crossing
-      // fullscreen→floating switch can close the dialog and leave focus on
-      // body. Every other Branch 2 callsite already has focus on the input
-      // via the focusin → this.focus() redirect (L1448-1452), so this is a
-      // no-op in the common case.
-      if (!this.input.componentHasFocus) {
-        this.input.focus();
-      }
-
-      // Park the trigger native input's caret at end-of-text every time the
-      // popover opens. Chrome focuses the native via the floating <label for="…">
-      // overlay on click and resets selection to [0, 0]; no JS fires between
-      // mousedown and selectionchange, so we restore the caret here.
-      const triggerNativeInput = this.input.inputElement;
-      if (triggerNativeInput && triggerNativeInput.value) {
-        const len = triggerNativeInput.value.length;
-        triggerNativeInput.setSelectionRange(len, len);
-      }
+      this.input.focus();
     }
   }
 
@@ -21027,7 +20971,7 @@ class AuroCombobox extends AuroElement {
 
     // racing condition on custom-combobox with custom-menu
     if (!this.menu) {
-      setTimeout(() => {
+      this._scheduleTimer(() => {
         this.configureMenu();
       }, 0);
       return;
@@ -21057,7 +21001,7 @@ class AuroCombobox extends AuroElement {
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
 
-        if (!this.optionSelected || this.optionSelected !== selected) {
+        if (this.optionSelected !== selected) {
           this.optionSelected = selected;
         }
 
@@ -21070,7 +21014,7 @@ class AuroCombobox extends AuroElement {
         }
 
         // Update display
-        this.updateTriggerTextDisplay(getOptionLabel(this.optionSelected) || this.menu.value);
+        this.updateTriggerTextDisplay(getOptionLabel(this.optionSelected));
 
         // Update match word for filtering
         const trimmedInput = normalizeFilterValue(this.input.value);
@@ -21082,17 +21026,24 @@ class AuroCombobox extends AuroElement {
       // Hide dropdown on selection (except during slot changes)
       if (evt.detail && evt.detail.source !== 'slotchange') {
         // do not close while typing in suggestion mode with no value selected, to allow freeform input
-        if (this.menu.value || this.behavior !== 'suggestion') {
-          this.hideBib();
+        this.hideBib();
+
+        // Move focus to the clear button when the user makes a selection.
+        if (!isEcho && this.menu.value !== undefined) {
+          this.setClearBtnFocus();
         }
 
         // Announce the selection after the dropdown closes so it isn't
         // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
+        // Skip when there's no selected value (e.g. menu.clearSelection() from
+        // the unmatched-value path), otherwise VoiceOver reads "undefined".
         const selectedValue = this.menu.value;
-        const announcementDelay = 300;
-        setTimeout(() => {
-          announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
-        }, announcementDelay);
+        if (selectedValue) {
+          const announcementDelay = 300;
+          this._scheduleTimer(() => {
+            announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
+          }, announcementDelay);
+        }
       }
 
       // Programmatic value syncs leave availableOptions stale because
@@ -21101,22 +21052,6 @@ class AuroCombobox extends AuroElement {
       // only — fresh user selections take the existing hideBib path.
       if (isEcho && this.menu.optionSelected) {
         this._programmaticFilterRefresh = true;
-        this.handleMenuOptions();
-        setTimeout(() => {
-          this._programmaticFilterRefresh = false;
-        }, 0);
-      }
-
-      // base-input skips auto-validate when focus is inside its own shadow,
-      // which it is after setTriggerInputFocus — re-run so prior tooShort
-      // clears. processCreditCard reasserts errorMessage on every render.
-      if (!isEcho && this.menu.optionSelected && this.input.validate) {
-        this.input.updateComplete.then(() => {
-          this.input.validate(true);
-          if (this.input.validity === 'valid') {
-            this.input.errorMessage = '';
-          }
-        });
       }
     });
 
@@ -21129,6 +21064,14 @@ class AuroCombobox extends AuroElement {
     // stale option. Safe from re-entrancy because any resulting
     // input.value changes dispatch isProgrammatic events.
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
+      // Announce the rejection BEFORE we clear `this.value` so the live
+      // region carries the attempted value — without this the bib closes
+      // silently and screen-reader users get no signal that their request
+      // (e.g. a direct setMenuValue() call) was dropped.
+      const attemptedValue = this.value;
+      if (attemptedValue) {
+        announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${attemptedValue}`);
+      }
       this.value = undefined;
       this.optionSelected = undefined;
     });
@@ -21140,10 +21083,13 @@ class AuroCombobox extends AuroElement {
         this.input.setActiveDescendant(this.optionActive);
       }
 
-      // Announce the active option for screen readers including position,
-      // since shadow DOM boundaries prevent native reading of
-      // aria-setsize/aria-posinset via aria-activedescendant.
-      if (this.optionActive) {
+      // In fullscreen mode the menu sits inside a nested <dialog> shadow root,
+      // and aria-activedescendant references across that boundary are lost —
+      // VoiceOver/NVDA don't read the active option natively, so we mirror it
+      // into the polite live region. In popover mode aria-activedescendant on
+      // the trigger input is read natively; double-announcing would flood the
+      // queue on arrow-key repeat.
+      if (this.optionActive && this.dropdown.isBibFullscreen) {
         const optionText = this.optionActive.textContent.trim();
         const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
         const optionIndex = this.availableOptions.indexOf(this.optionActive) + 1;
@@ -21176,7 +21122,12 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (!this.componentHasFocus && !this._inFullscreenTransition) {
+      // Skip while the dropdown is open — focus transits out briefly on
+      // mousedown of a menu option (popover top-layer breaks :focus-within),
+      // and validating against the pre-selection value flashes a stale error
+      // between mousedown and mouseup. The next focusout fires after the
+      // dropdown closes and validates against the post-selection value.
+      if (!this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen) {
         this.validate();
       }
     });
@@ -21239,49 +21190,40 @@ class AuroCombobox extends AuroElement {
       if (this._syncingDisplayValue) {
         return;
       }
-      this._syncingBibValue = true;
-      this.input.value = this.inputInBib.value;
-      this.input.updateComplete.then(() => {
-        this._syncingBibValue = false;
-      });
 
-      // Run filtering inline — the re-entrant event won't reach this code.
-      this.menu.matchWord = normalizeFilterValue(this.inputInBib.value);
-      this.optionActive = null;
-
-      // In suggestion mode, keep the combobox value in sync with the typed
-      // text so that freeform values are captured (mirroring the non-fullscreen
-      // path). Clear the selection when the input is emptied.
-      if (this.behavior === 'suggestion') {
-        this.value = this.inputInBib.value || undefined;
+      // Filtering runs via re-entrance: writing this.input.value below
+      // dispatches an 'input' event that the trigger's listener routes to
+      // handleTriggerInputValueChange, which refreshes the menu filter.
+      if (this.input.value !== this.inputInBib.value) {
+        this._syncingBibValue = true;
+        this.input.value = this.inputInBib.value;
+        this.input.updateComplete.then(() => {
+          this._syncingBibValue = false;
+        });
       }
 
-      this.handleMenuOptions();
       this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
-      return;
+    } else if (event.target === this.input) {
+
+      // Also sync the native input immediately so keystrokes arriving
+      // before Lit's async update cycle (e.g. rapid Backspaces during a
+      // fullscreen transition) operate on the correct content.
+      // Skip the next programmatic input event to prevent the patched setter
+      // from re-entering handleInputValueChange via the bib path.
+      const bibNativeInput = this.inputInBib.inputElement;
+      if (bibNativeInput && bibNativeInput.value !== this.input.value) {
+        this.inputInBib.skipNextProgrammaticInputEvent = true;
+        bibNativeInput.value = this.input.value || '';
+      }
     }
 
+    this.value = this.input.value;
+
     // Ignore re-entrant input events caused by programmatic value sets.
     if (this._syncingBibValue || this._syncingDisplayValue) {
       return;
     }
 
-    this.inputInBib.value = this.input.value;
-
-    // Also sync the native input immediately so keystrokes arriving
-    // before Lit's async update cycle (e.g. rapid Backspaces during a
-    // fullscreen transition) operate on the correct content.
-    // Skip the next programmatic input event to prevent the patched setter
-    // from re-entering handleInputValueChange via the bib path.
-    const bibNativeInput = this.inputInBib.inputElement;
-    if (bibNativeInput && bibNativeInput.value !== this.input.value) {
-      this.inputInBib.skipNextProgrammaticInputEvent = true;
-      bibNativeInput.value = this.input.value || '';
-    }
-
-    this.menu.matchWord = normalizeFilterValue(this.input.value);
-    this.optionActive = null;
-
     if (this.behavior === 'suggestion') {
       this.value = this.input.value;
     }
@@ -21289,7 +21231,6 @@ class AuroCombobox extends AuroElement {
     if (!this.input.value && !this._clearing) {
       this.clear();
     }
-    this.handleMenuOptions();
 
     // Validate only if the value was set programmatically (not during user
     // interaction). In fullscreen dialog mode, componentHasFocus returns false
@@ -21299,34 +21240,44 @@ class AuroCombobox extends AuroElement {
       this.validate();
     }
 
-    if (this.input.value && this.input.value.length === 0) {
-      // Hide menu if value is empty, otherwise show if there are available suggestions
-      this.hideBib();
-    } else if (this.menu.loading) {
-      // if input has value but menu is loading, show bib immediately
-      this.showBib();
-    } else if (this.availableOptions.length === 0 && !this.dropdown.isBibFullscreen) {
-      // Force dropdown bib to hide if input value has no matching suggestions
-      this.hideBib();
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
+  }
+
+  /**
+   * Handles input value changes originating from the trigger input.
+   * Refreshes menu options and filtering, delegates to handleInputValueChange
+   * for value synchronization, and manages fullscreen bib focus.
+   * @private
+   * @param {Event} event - The input event from the trigger input element.
+   * @returns {void}
+   */
+  handleTriggerInputValueChange(event) {
+    // 'input' fires for every user-initiated value change — typing, paste,
+    // IME composition end, dead-key composition, drag-drop. Flip _userTyped
+    // here so updated('availableOptions') auto-opens the bib for sources
+    // that keydown alone misses: paste fires no keydown, IME uses
+    // key='Process', and dead keys produce multi-char keys (all bypass the
+    // prior keydown.key.length===1 gate). Skip programmatic syncs.
+    if (!this._syncingDisplayValue && !this._syncingBibValue && !this._programmaticFilterRefresh) {
+      this._userTyped = true;
     }
 
-    // iOS virtual keyboard retention: when in fullscreen mode, ensure the
-    // dialog opens and the bib input is focused synchronously within the
-    // input event (user gesture) chain. Without this, Lit's async update
-    // cycle delays showModal() past the user activation window, causing
-    // iOS Safari to dismiss the virtual keyboard when the fullscreen
-    // dialog opens — the user then has to tap the input again to resume
-    // typing.
-    if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0) {
-      if (!this.dropdown.isPopoverVisible) {
-        this.showBib();
-      }
-      if (this.dropdown.isPopoverVisible) {
-        this.setInputFocus();
-      }
+    this.handleMenuOptions();
+    this.optionActive = null;
+
+    if (this.value === this.input.value) {
+      return;
     }
 
-    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
+    this.handleInputValueChange(event);
+
+    if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
+      this.setInputFocus();
+    }
+
+    if (this._programmaticFilterRefresh) {
+      this._programmaticFilterRefresh = false;
+    }
   }
 
   /**
@@ -21394,6 +21345,11 @@ class AuroCombobox extends AuroElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inFullscreenTransition = false;
+    // Cancel any outstanding timers so detached callbacks don't fire on
+    // disposed DOM — most are no-ops, but configureMenu's racing-condition
+    // retry would otherwise keep rescheduling itself indefinitely.
+    this._pendingTimers.forEach((id) => clearTimeout(id));
+    this._pendingTimers.clear();
   }
 
   firstUpdated() {
@@ -21435,7 +21391,7 @@ class AuroCombobox extends AuroElement {
     this.menu.value = value;
     // Backup clear: if menu.value === menu.optionSelected.value already, the
     // listener won't fire and the flag would swallow the next user click.
-    setTimeout(() => {
+    this._scheduleTimer(() => {
       this._pendingMenuValueSync = false;
     }, 0);
   }
@@ -21452,15 +21408,7 @@ class AuroCombobox extends AuroElement {
     this.menu.value = undefined;
     this.validation.reset(this);
     this.touched = false;
-    // Force validity back to the cleared state. validation.reset() calls
-    // validate() at the end, and (post-credit-card-fix) the trigger input's
-    // residual validity may still be copied into the combobox by the
-    // auroInputElements loop. Explicitly clear here so reset() actually
-    // leaves the component in a "no validity" state.
     this.validity = undefined;
-    this.errorMessage = '';
-    this.input.validity = undefined;
-    this.input.errorMessage = '';
   }
 
   /**
@@ -21478,6 +21426,17 @@ class AuroCombobox extends AuroElement {
       this.optionSelected = undefined;
       this.value = undefined;
 
+      // Clear the appended displayValue clone in the trigger if present.
+      // :not(slot) excludes the template's <slot name="displayValue"
+      // slot="displayValue"> forwarder (line 1816), which also has
+      // slot="displayValue" and would otherwise be matched first and removed,
+      // permanently breaking the consumer-provided displayValue slot.
+      const displayValueInTrigger = this.input.querySelector('[slot="displayValue"]:not(slot)');
+
+      if (displayValueInTrigger) {
+        displayValueInTrigger.remove();
+      }
+
       if (this.input.value) {
         this.input.clear();
       }
@@ -21501,81 +21460,50 @@ class AuroCombobox extends AuroElement {
   }
 
   updated(changedProperties) {
-    // After the component is ready, send direct value changes to auro-menu.
+    // After the component is ready, propagate direct changes down to child components.
     if (changedProperties.has('value')) {
-      if (this.value && this.value.length > 0) {
-        this.hasValue = true;
-      } else {
-        this.hasValue = false;
+      // Only flag programmatic refreshes — user-typed value changes must not
+      // suppress the availableOptions branch's showBib(). Firefox batches
+      // 'value' and 'availableOptions' into the same updated() call, so
+      // setting the flag unconditionally here masks the user-typed open path.
+      if (!this._userTyped) {
+        this._programmaticFilterRefresh = true;
       }
 
-      if (this.hasValue && !this.input.value && (!this.menu.options || this.menu.options.length === 0)) {
-        this.input.value = this.value;
-      }
+      if (this.input.value !== this.value) {
+        // Clear menu.value AND menu.optionSelected together. Clearing only
+        // menu.value leaves the previously-selected option element pinned
+        // as menu.optionSelected; a later auroMenu-selectedOption event
+        // would then write its stale .value back into combobox.value
+        // (e.g. Tab-after-Backspace re-selecting the prior option).
+        if (this.menu.value || this.menu.optionSelected) {
+          this.menu.clearSelection();
+        }
 
-      // Sync menu.value only when an option actually matches; otherwise clear it.
-      if (this.menu.options && this.menu.options.length > 0) {
-        if (this.menu.options.some((opt) => opt.value === this.value)) {
-          this.setMenuValue(this.value);
-        } else if (this.behavior === 'filter') {
-          // In filter mode, freeform values aren't allowed. Push the unmatched
-          // value through setMenuValue so menu dispatches auroMenu-selectValueFailure
-          // and the listener at line 1206 clears combobox.value (mirrors select's
-          // pattern). Bypassing setMenuValue here would skip the failure cascade.
-          this.setMenuValue(this.value);
-        } else {
-          if (this.menu.value) {
-            this.menu.value = undefined;
-          }
-          // Sync the display for programmatic freeform value changes (e.g. the
-          // swap-values pattern). Guard with _syncingDisplayValue so that the
-          // re-entrant input event from base-input.notifyValueChanged() is
-          // ignored by handleInputValueChange. Skip the sync when input already
-          // matches to avoid spurious events during the normal typing path.
-          const nextValue = this.value || '';
-          const triggerNeedsSync = this.input.value !== nextValue;
-          const bibNeedsSync = Boolean(this.inputInBib && this.inputInBib !== this.input && this.inputInBib.value !== nextValue);
-          if (triggerNeedsSync || bibNeedsSync) {
-            this._syncingDisplayValue = true;
-            if (triggerNeedsSync) {
-              this.input.value = nextValue;
-            }
-            if (bibNeedsSync) {
-              this.inputInBib.value = nextValue;
-            }
-            const pending = [];
-            if (triggerNeedsSync) {
-              pending.push(this.input.updateComplete);
-            }
-            if (bibNeedsSync) {
-              pending.push(this.inputInBib.updateComplete);
-            }
-            Promise.all(pending).then(() => {
-              if (triggerNeedsSync && this.input.maskInstance && typeof this.input.maskInstance.updateValue === 'function') {
-                this.input.maskInstance.updateValue();
-              }
-              if (bibNeedsSync && this.inputInBib && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
-                this.inputInBib.maskInstance.updateValue();
-              }
-              this._syncingDisplayValue = false;
-              // handleInputValueChange bailed on the flag — refresh the filter.
-              this._programmaticFilterRefresh = true;
-              this.handleMenuOptions();
-              setTimeout(() => {
-                this._programmaticFilterRefresh = false;
-              }, 0);
-            });
-          }
+        if (!this.persistInput) {
+          this.syncInputValuesAcrossTriggerAndBib(this.value || '');
+        }
+
+        // Programmatic value with no matching option: updateFilter will close
+        // the bib silently (see line 648 — no noMatchOption + 0 results
+        // hides). Announce so screen-reader users hear the request was
+        // dropped. Gated on `input.value !== this.value` so this never fires
+        // for user typing — that path always reconciles input.value to
+        // this.value before updated() runs.
+        if (
+          this.value &&
+          this.menu &&
+          this.menu.options &&
+          this.menu.options.length > 0 &&
+          !this.menu.options.some((opt) => opt.value === this.value)
+        ) {
+          announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${this.value}`);
         }
       }
+
       if (!this.value) {
         this.clear();
       }
-      if (this.value && !this.componentHasFocus) {
-        // 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)
-        this.hideBib();
-      }
 
       // Sync the input and match word, but don't directly set menu.value again
       if (this.menu) {
@@ -21588,7 +21516,7 @@ class AuroCombobox extends AuroElement {
         composed: true,
         detail: {
           optionSelected: this.menu.optionSelected,
-          value: this.menu.value
+          value: this.value
         }
       }));
 
@@ -21611,16 +21539,30 @@ class AuroCombobox extends AuroElement {
       // from a programmatic filter refresh after a value swap — the user
       // didn't interact, so we shouldn't auto-open the bib (especially for
       // the no-match path where the existing condition unconditionally fires).
-      if (this._programmaticFilterRefresh) {
-        this._programmaticFilterRefresh = false;
-      } else if ((this.availableOptions.length > 0 && (this.componentHasFocus || this.dropdownOpen)) || (this.menu && this.menu.loading) || (this.availableOptions.length === 0 && this.noMatchOption)) {
-        this.showBib();
+      if ((this.menu && !this._programmaticFilterRefresh)) {
+        if (
+          this.availableOptions.length > 0 ||
+          this.menu.loading ||
+          this.noMatchOption
+        ) {
+          if (this._userTyped) {
+            if (!this.dropdownOpen) {
+              this.showBib();
+            }
+            this._userTyped = false;
+          }
+        }
+
         if (!this.availableOptions.includes(this.menu.optionActive)) {
           this.activateFirstEnabledAvailableOption();
         }
-      } else if (this.dropdown && this.dropdown.isPopoverVisible) {
+      } else if (!this.dropdown.isBibFullscreen) {
         this.hideBib();
       }
+
+      if (this._programmaticFilterRefresh) {
+        this._programmaticFilterRefresh = false;
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -21762,10 +21704,10 @@ class AuroCombobox extends AuroElement {
           shape="${this.shape}"
           size="${this.size}">
             <${this.inputTag}
-              @input="${this.handleInputValueChange}"
+              @input="${this.handleTriggerInputValueChange}"
               appearance="${this.onDark ? 'inverse' : this.appearance}"
               .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
-              .a11yExpanded="${this.triggerExpandedState}"
+              .a11yExpanded="${this.dropdownOpen}"
               .a11yControls="${this.dropdownId}"
               .autocomplete="${this.autocomplete}"
               .inputmode="${this.inputmode}"
@@ -23370,14 +23312,10 @@ async function dynamicMenuExample() {
   // Helper function that generates HTML for menuoptions
   function generateMenuOptionHtml(menu, label, value) {
     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