@aurodesignsystem-dev/auro-formkit 0.0.0-pr1508.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") {
@@ -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 = '202606231948';
+var formkitVersion$2 = '202607010100';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -6145,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}"
@@ -10654,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") {
@@ -16598,6 +16594,13 @@ 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);
 
@@ -16749,76 +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.maxLength = undefined;
-    this.min = undefined;
-    this.minLength = undefined;
-    this.required = false;
-    this.onDark = false;
-    this.setCustomValidityForType = undefined;
-    this.size = 'lg';
-    this.shape = 'classic';
-    this.value = 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",
@@ -16827,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',
@@ -16844,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
@@ -17368,6 +17351,15 @@ class BaseInput extends AuroElement$1 {
 
     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;
@@ -17451,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]) {
@@ -17740,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.
+        }
+      });
+    }
   }
 
   /**
@@ -17873,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 || "";
   }
@@ -18364,7 +18395,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202606231948';
+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.
@@ -18867,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"
@@ -18940,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}>
     `;
   }
 
@@ -19090,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)}`;
 
@@ -19485,7 +19521,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202606231948';
+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}`;
 
@@ -19853,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"
@@ -19933,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;
@@ -19945,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
@@ -20306,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
-      },
     };
   }
 
@@ -20339,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.
@@ -20491,8 +20542,11 @@ class AuroCombobox extends AuroElement {
       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();
@@ -20520,19 +20574,19 @@ class AuroCombobox extends AuroElement {
    * 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> | null} Promise that resolves after the inputs flush,
-   *   or null when no sync was needed (so callers can skip post-flush work).
+   * @returns {Promise<void>} Resolves after both inputs flush and imask
+   *   re-asserts; resolves immediately when no sync is needed.
    * @private
    */
-  syncInputValuesAcrossTriggerAndBib(nextValue) {
+  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 = this.inputInBib.value !== nextValue;
+    const bibNeedsSync = Boolean(this.inputInBib) && this.inputInBib.value !== nextValue;
     if (!triggerNeedsSync && !bibNeedsSync) {
-      return null;
+      return;
     }
 
     this._syncingDisplayValue = true;
@@ -20546,16 +20600,21 @@ class AuroCombobox extends AuroElement {
       this.inputInBib.value = nextValue;
       pending.push(this.inputInBib.updateComplete);
     }
-    return Promise.all(pending).then(() => {
+    // 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 && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
+      if (bibNeedsSync && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
         this.inputInBib.maskInstance.updateValue();
       }
+    } finally {
       this._syncingDisplayValue = false;
-    });
+    }
   }
 
   /**
@@ -20566,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
@@ -20577,11 +20643,8 @@ 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();
     }
 
@@ -20660,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);
@@ -20776,7 +20827,7 @@ class AuroCombobox extends AuroElement {
         this.dropdown.trigger.inert = false;
       }
 
-      setTimeout(() => {
+      this._scheduleTimer(() => {
         this.setInputFocus();
       }, 0);
     });
@@ -20920,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;
@@ -20975,9 +21026,7 @@ 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) {
@@ -20991,7 +21040,7 @@ class AuroCombobox extends AuroElement {
         const selectedValue = this.menu.value;
         if (selectedValue) {
           const announcementDelay = 300;
-          setTimeout(() => {
+          this._scheduleTimer(() => {
             announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
           }, announcementDelay);
         }
@@ -21003,10 +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);
       }
     });
 
@@ -21019,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;
     });
@@ -21030,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;
@@ -21066,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();
       }
     });
@@ -21129,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;
     }
@@ -21179,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
@@ -21189,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;
+    }
   }
 
   /**
@@ -21284,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() {
@@ -21325,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);
   }
@@ -21360,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();
       }
@@ -21383,56 +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, or when filter
-      // mode needs setMenuValue to dispatch auroMenu-selectValueFailure (the
-      // listener at line 1206 clears combobox.value, mirroring select's
-      // pattern). Otherwise sync the input display for freeform values.
-      if (this.menu.options && this.menu.options.length > 0) {
-        if (this.menu.options.some((opt) => opt.value === this.value) || this.behavior === 'filter') {
-          this.setMenuValue(this.value);
-        } else {
-          // 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.
-          if (this.menu.value || this.menu.optionSelected) {
-            this.menu.clearSelection();
-          }
-          // Suggestion-mode freeform value: sync the trigger + bib to show it,
-          // then refresh the filter once the inputs flush (handleInputValueChange
-          // bailed on _syncingDisplayValue).
-          const syncPromise = this.syncInputValuesAcrossTriggerAndBib(this.value || '');
-          if (syncPromise) {
-            syncPromise.then(() => {
-              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) {
@@ -21445,7 +21516,7 @@ class AuroCombobox extends AuroElement {
         composed: true,
         detail: {
           optionSelected: this.menu.optionSelected,
-          value: this.menu.value
+          value: this.value
         }
       }));
 
@@ -21468,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')) {
@@ -21619,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}"
@@ -23227,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