@aurodesignsystem-dev/auro-formkit 0.0.0-pr1516.0 → 0.0.0-pr1519.0

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

@@ -387,11 +387,17 @@ let AuroFormValidation$1 = class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
-          elem.validity = 'patternMismatch';
-          elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
-          return;
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+          const isValidPartial = isPartialDateFormat && elem.util.isValidPartialDate(elem.value, elem.format);
+
+          if (!isValidPartial) {
+            elem.validity = 'patternMismatch';
+            elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            return;
+          }
         }
 
         // Perform the rest of the validation
@@ -485,15 +491,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 +818,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 +855,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 +876,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 +895,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 +911,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 +931,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 +977,7 @@ const comboboxKeyboardStrategy = {
         component.setClearBtnFocus();
       }
     }
-  },
+  }
 };
 
 /**
@@ -4873,7 +4872,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202606292156';
+var formkitVersion$2 = '202607011722';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -5625,7 +5624,19 @@ class AuroDropdown extends AuroElement$2 {
     if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
       this.trigger.focus();
     }
-  }
+
+
+    if (!this.isPopoverVisible) {
+      // wait til the bib gets fully closed and rendered
+      setTimeout(() => {
+        // check if it's still closed and the focus is still within the dropdown, but not in the bib. If so, move focus to the trigger.
+        if (!this.isPopoverVisible || !this.bib.matches(':focus-within')) {
+          return;
+        }
+        // Move focus out of bib into trigger.
+        this.trigger.focus();
+      });
+    }  }
 
   firstUpdated() {
     // Configure the floater to, this will generate the ID for the bib
@@ -10557,11 +10568,17 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
-          elem.validity = 'patternMismatch';
-          elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
-          return;
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+          const isValidPartial = isPartialDateFormat && elem.util.isValidPartialDate(elem.value, elem.format);
+
+          if (!isValidPartial) {
+            elem.validity = 'patternMismatch';
+            elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            return;
+          }
         }
 
         // Perform the rest of the validation
@@ -10655,15 +10672,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") {
@@ -16563,6 +16582,42 @@ class AuroInputUtilities {
     return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
   }
 
+  /**
+   * Validates a value against a partial date format (one that lacks yy/mm/dd all three).
+   * Single-component formats are checked as integer ranges; multi-component formats use
+   * a date-fns parse + round-trip to confirm both validity and exact formatting.
+   * @param {string} value - The user-facing display value.
+   * @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
+   * @returns {boolean}
+   */
+  isValidPartialDate(value, format$1) {
+    if (!value || !format$1) {
+      return false;
+    }
+    const normalizedFormat = format$1.toLowerCase();
+
+    if (normalizedFormat === 'dd') {
+      const num = Number(value);
+      return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
+    }
+    if (normalizedFormat === 'yy') {
+      const num = Number(value);
+      return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
+    }
+    if (normalizedFormat === 'yyyy') {
+      const num = Number(value);
+      return (/^\d{4}$/u).test(value) && num >= 1 && num <= 9999;
+    }
+
+    const dateFnsMask = this.toDateFnsMask(normalizedFormat);
+    // Use the 1st of the current month as the reference so that formats
+    // omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
+    const referenceDate = new Date();
+    referenceDate.setDate(1);
+    const parsed = parse(value, dateFnsMask, referenceDate);
+    return isValid(parsed) && format(parsed, dateFnsMask) === value;
+  }
+
   /**
    * Converts a display string to its model value.
    * For full date formats, converts the display string to an ISO date string.
@@ -16610,6 +16665,7 @@ class AuroInputUtilities {
     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;
     }
 
@@ -16767,6 +16823,7 @@ class BaseInput extends AuroElement$1 {
     // so a parent (datepicker/combobox) calling `validate()` synchronously
     // during its own update cycle sees a populated util instance.
     this.activeLabel = false;
+
     /** @private */
     this.allowedInputTypes = [
       "text",
@@ -16777,6 +16834,7 @@ class BaseInput extends AuroElement$1 {
       "tel"
     ];
     this.appearance = "default";
+
     /** @private */
     this.dateFormatMap = {
       'mm/dd/yyyy': 'dateMMDDYYYY',
@@ -16795,23 +16853,24 @@ class BaseInput extends AuroElement$1 {
       '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._maxObject = undefined;
     this.maxLength = undefined;
     this.min = undefined;
-    this._minObject = undefined;
     this.minLength = undefined;
     this.noValidate = false;
     this.onDark = false;
@@ -16828,23 +16887,27 @@ class BaseInput extends AuroElement$1 {
       "email"
     ];
     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;
-    this._valueObject = undefined;
   }
 
   // function to define props used within the scope of this component
@@ -17174,6 +17237,13 @@ class BaseInput extends AuroElement$1 {
         type: String
       },
 
+      /**
+       * Custom help text message to display when validity = `patternMismatch`.
+       */
+      setCustomValidityPatternMismatch: {
+        type: String
+      },
+
       /**
        * Custom help text message to display when validity = `rangeOverflow`.
        */
@@ -17244,7 +17314,7 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * Populates the `type` attribute on the input.
-       * @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
+       * @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
        * @default 'text'
        */
       type: {
@@ -17282,7 +17352,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;
   }
 
   /**
@@ -17290,7 +17360,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;
   }
 
   /**
@@ -17298,50 +17368,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() {
@@ -17370,7 +17397,6 @@ class BaseInput extends AuroElement$1 {
       format: this.format
     });
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   disconnectedCallback() {
@@ -17409,7 +17435,6 @@ class BaseInput extends AuroElement$1 {
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   /**
@@ -17553,8 +17578,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;
@@ -17576,14 +17599,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;
@@ -17625,120 +17648,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") {
@@ -17746,6 +17714,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);
@@ -17754,7 +17724,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;
         }
@@ -17848,9 +17820,9 @@ class BaseInput extends AuroElement$1 {
     // 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;
+      let selectionStart = null;
       try {
-        selectionStart = this.inputElement.selectionStart;
+        ({ selectionStart } = this.inputElement);
       } catch (error) { // eslint-disable-line no-unused-vars
         return;
       }
@@ -17954,7 +17926,6 @@ class BaseInput extends AuroElement$1 {
    */
   reset() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
     this.validation.reset(this);
   }
 
@@ -17963,7 +17934,6 @@ class BaseInput extends AuroElement$1 {
    */
   clear() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
   }
 
   /**
@@ -18492,7 +18462,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202606292156';
+var formkitVersion$1 = '202607011722';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19618,7 +19588,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202606292156';
+var formkitVersion = '202607011722';
 
 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}`;
 
@@ -19986,12 +19956,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"
@@ -20066,8 +20047,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;
@@ -20078,6 +20057,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
@@ -20439,17 +20442,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
-      },
     };
   }
 
@@ -20472,13 +20464,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.
@@ -20605,7 +20590,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);
   }
 
@@ -20619,44 +20604,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();
@@ -20680,6 +20637,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
@@ -20688,6 +20692,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
@@ -20699,17 +20710,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();
     }
@@ -20782,18 +20790,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);
@@ -20843,28 +20839,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;
+          }
+        });
       }
     });
 
@@ -20901,7 +20894,7 @@ class AuroCombobox extends AuroElement {
         this.dropdown.trigger.inert = false;
       }
 
-      setTimeout(() => {
+      this._scheduleTimer(() => {
         this.setInputFocus();
       }, 0);
     });
@@ -21045,7 +21038,7 @@ class AuroCombobox extends AuroElement {
 
     // racing condition on custom-combobox with custom-menu
     if (!this.menu) {
-      setTimeout(() => {
+      this._scheduleTimer(() => {
         this.configureMenu();
       }, 0);
       return;
@@ -21075,7 +21068,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;
         }
 
@@ -21088,7 +21081,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);
@@ -21100,17 +21093,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
@@ -21119,22 +21119,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 = '';
-          }
-        });
       }
     });
 
@@ -21147,6 +21131,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;
     });
@@ -21158,10 +21150,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;
@@ -21194,7 +21189,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();
       }
     });
@@ -21257,49 +21257,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;
     }
@@ -21307,7 +21298,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
@@ -21317,34 +21307,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;
+    }
   }
 
   /**
@@ -21412,6 +21412,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() {
@@ -21453,7 +21458,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);
   }
@@ -21470,15 +21475,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 = '';
   }
 
   /**
@@ -21496,6 +21493,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();
       }
@@ -21519,81 +21527,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) {
@@ -21606,7 +21583,7 @@ class AuroCombobox extends AuroElement {
         composed: true,
         detail: {
           optionSelected: this.menu.optionSelected,
-          value: this.menu.value
+          value: this.value
         }
       }));
 
@@ -21629,16 +21606,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')) {
@@ -21780,10 +21771,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}"
@@ -23388,14 +23379,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