@aurodesignsystem-dev/auro-formkit 0.0.0-pr1480.9 → 0.0.0-pr1482.0

package/components/combobox/dist/index.js

@@ -1219,6 +1219,21 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
   return isFocused;
 }
 
+/**
+ * Reconcile the menu `_index` from `optionActive` so subsequent `makeSelection` calls find the correct option after async clearSelection has reset it.
+ * @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;
+    }
+  }
+}
+
 const comboboxKeyboardStrategy = {
   ArrowDown(component, evt, ctx) {
     // If the clear button has focus, let the browser handle ArrowDown normally.
@@ -1232,7 +1247,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -1255,7 +1270,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -1282,6 +1297,7 @@ const comboboxKeyboardStrategy = {
       // block the browser's built-in "Enter activates focused button" behavior.
       evt.stopPropagation();
     } else if (ctx.isExpanded && component.menu.optionActive) {
+      reconcileMenuIndex(component.menu);
       component.menu.makeSelection();
 
       if (ctx.isModal) {
@@ -1329,6 +1345,7 @@ const comboboxKeyboardStrategy = {
       // When the clear button is focused, Tab events do not bubble out of
       // its shadow DOM, so this handler only fires when the clear button
       // is NOT focused. In that case, select the active option and close.
+      reconcileMenuIndex(component.menu);
       component.menu.makeSelection();
       component.hideBib();
 
@@ -4580,7 +4597,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
   });
 }
 
-var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2$1 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -5211,7 +5228,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605262025';
+var formkitVersion$2 = '202606082059';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -5391,7 +5408,6 @@ class AuroDropdown extends AuroElement$2 {
   _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
-    this.desktopModal = false;
     this.disabled = false;
     this.disableKeyboardHandling = false;
     this.error = false;
@@ -5572,14 +5588,6 @@ class AuroDropdown extends AuroElement$2 {
         reflect: true
       },
 
-      /**
-       * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
-       */
-      desktopModal: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
        */
@@ -5867,15 +5875,6 @@ class AuroDropdown extends AuroElement$2 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearPageInert();
-    if (this._bibTabHandler) {
-      this.removeEventListener('keydown', this._bibTabHandler);
-      this._bibTabHandler = undefined;
-    }
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
-    }
     if (this.floater) {
       this.floater.hideBib('disconnect');
       this.floater.disconnect();
@@ -5903,45 +5902,19 @@ class AuroDropdown extends AuroElement$2 {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        this.bibElement.value.open(this.isBibFullscreen);
-        this.updateFocusTrap();
-
-        // Desktop modal: make siblings inert so content outside is not interactive
-        if (this.desktopModal && !this.isBibFullscreen) {
-          this._setPageInert();
-        }
+        const useModal = this.isBibFullscreen;
+        this.bibElement.value.open(useModal);
       } else {
         this.bibElement.value.close();
-        this._clearPageInert();
       }
     }
 
     // When fullscreen strategy changes while open, re-open dialog with correct mode
     // (e.g. resizing from desktop → mobile while dropdown is open)
     if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
+      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
-      this.bibElement.value.open(this.isBibFullscreen);
-
-      // Re-initialize focus management for the new strategy
-      this.updateFocusTrap();
-
-      // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
-      if (this.desktopModal && !this.isBibFullscreen) {
-        this._setPageInert();
-      } else {
-        this._clearPageInert();
-      }
-    }
-
-    // Handle desktopModal toggled while the dropdown is already open.
-    // Re-initialize focus trapping and page inert state to match the new mode.
-    if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
-      this.updateFocusTrap();
-      if (this.desktopModal) {
-        this._setPageInert();
-      } else {
-        this._clearPageInert();
-      }
+      this.bibElement.value.open(useModal);
     }
   }
 
@@ -5951,14 +5924,8 @@ class AuroDropdown extends AuroElement$2 {
    * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
    */
   handleDropdownToggle(event) {
+    this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
-
-    // Tear down FocusTrap when closing. Creation happens in updated()
-    // after the dialog is open so getFocusableElements can find content.
-    if (!this.isPopoverVisible) {
-      this.updateFocusTrap();
-    }
-
     const eventType = event.detail.eventType || "unknown";
     if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
       this.trigger.focus();
@@ -6057,178 +6024,19 @@ class AuroDropdown extends AuroElement$2 {
    * @private
    */
   updateFocusTrap() {
-    // Always clean up existing handlers/traps before setting up new ones
-    // to prevent duplicate listeners on repeated calls.
-    if (this._bibTabHandler) {
-      this.removeEventListener('keydown', this._bibTabHandler);
-      this._bibTabHandler = undefined;
-    }
-
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
-    }
-
     if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
-        if (this.desktopModal) {
-          // Desktop modal: trap focus only within the bib content.
-          // Can't use FocusTrap on the bib element because keydown events
-          // from slotted content bubble through the dropdown host (light DOM),
-          // not through the bib (shadow projection target). Using FocusTrap
-          // on the dropdown would include the trigger in the tab cycle.
-          // Instead, listen for Tab on the dropdown and manually wrap focus
-          // within the bib's focusable elements.
-          this._bibTabHandler = (event) => {
-            if (event.key !== 'Tab') {
-              return;
-            }
-
-            // Collect focusable elements from the bib content.
-            const focusables = getFocusableElements(this.bibContent);
-
-            // Fallback: try from slotted content directly
-            if (!focusables.length) {
-              const slot = this.shadowRoot.querySelector('.slotContent slot');
-              const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
-
-              for (const node of assignedNodes) {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                  focusables.push(...getFocusableElements(node));
-                }
-              }
-            }
-
-            if (!focusables.length) {
-              return;
-            }
-
-            event.preventDefault();
-
-            const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
-
-            // Walk the active element chain through shadow roots
-            const actives = this._getActiveElements();
-
-            let idx = focusables.findIndex((el) => actives.includes(el));
-
-            if (idx === -1) { // eslint-disable-line no-magic-numbers
-              // Focus is not on a known element — move to first/last
-              idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
-            }
-
-            // Try each element in order, skipping any that can't receive focus
-            // (e.g. hidden elements, elements in collapsed sections)
-            for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
-              let nextIdx = idx + direction;
-
-              // Wrap around
-              if (nextIdx < 0) {
-                nextIdx = focusables.length - 1;
-              } else if (nextIdx >= focusables.length) {
-                nextIdx = 0;
-              }
-
-              focusables[nextIdx].focus();
-
-              // Verify focus actually moved to the target
-              const newActives = this._getActiveElements();
-
-              if (newActives.includes(focusables[nextIdx])) {
-                return;
-              }
-
-              // Focus didn't stick — skip this element and try the next
-              idx = nextIdx;
-            }
-          };
-          this.addEventListener('keydown', this._bibTabHandler);
-
-          // Move initial focus into the bib content, matching FocusTrap behavior
-          requestAnimationFrame(() => {
-            const focusables = getFocusableElements(this.bibContent);
-            if (focusables.length) {
-              focusables[0].focus();
-            }
-          });
-        } else {
-          // Normal desktop: use FocusTrap on the bib element
-          this.focusTrap = new FocusTrap(this.bibContent);
-          this.focusTrap.focusFirstElement();
-        }
+        // Desktop: show() doesn't trap focus, so use FocusTrap
+        this.focusTrap = new FocusTrap(this.bibContent);
+        this.focusTrap.focusFirstElement();
       }
       // Fullscreen: showModal() provides native focus trapping
-    }
-  }
-
-  /**
-   * Returns the chain of active (focused) elements through shadow roots.
-   * @private
-   * @returns {Array<HTMLElement>}
-   */
-  _getActiveElements() {
-    let { activeElement } = document;
-    const actives = [activeElement];
-
-    while (activeElement?.shadowRoot?.activeElement) {
-      activeElement = activeElement.shadowRoot.activeElement;
-      actives.push(activeElement);
-    }
-
-    return actives;
-  }
-
-  /**
-   * Sets `inert` on sibling elements of the dropdown's top-level host
-   * so that content outside the dropdown is not interactive while the modal is open.
-   * Walks up through shadow DOM boundaries to find the outermost host element
-   * in the light DOM, then sets `inert` on siblings at each ancestor level
-   * to ensure all page content outside the host subtree is inert.
-   * @private
-   */
-  _setPageInert() {
-    if (this._inertSiblings) {
       return;
     }
 
-    this._inertSiblings = [];
-
-    // Walk up through shadow DOM boundaries to find the topmost host
-    // element in the light DOM. For example, if this dropdown is inside
-    // auro-datepicker's shadow DOM, we walk up to the datepicker element
-    // so we set inert on its siblings — not on the datepicker itself.
-    let host = this;
-    while (host.getRootNode() instanceof ShadowRoot) {
-      host = host.getRootNode().host;
-    }
-
-    // Walk up the ancestor chain, inerting siblings at each level
-    // to ensure the entire page outside the host subtree is inert.
-    let current = host;
-    while (current.parentElement) {
-      const parent = current.parentElement;
-      for (const sibling of parent.children) {
-        if (sibling !== current) {
-          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
-          sibling.inert = true;
-        }
-      }
-      current = parent;
-    }
-  }
-
-  /**
-   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
-   * @private
-   */
-  _clearPageInert() {
-    if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
-      }
-      this._inertSiblings = undefined;
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
     }
   }
 
@@ -6467,7 +6275,6 @@ class AuroDropdown extends AuroElement$2 {
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
-          ?desktopmodal="${this.desktopModal}"
           .dialogLabel="${this.bibDialogLabel}"
           ${ref(this.bibElement)}
           >
@@ -13166,7 +12973,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605262025';
+var formkitVersion$1 = '202606082059';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14120,14 +13927,6 @@ class AuroBibtemplate extends LitElement {
       large: {
         type: Boolean,
         reflect: true
-      },
-
-      /**
-       * If declared, the footer slot will be rendered even when not in fullscreen mode.
-       */
-      showFooter: {
-        type: Boolean,
-        reflect: true
       }
     };
   }
@@ -14230,7 +14029,7 @@ class AuroBibtemplate extends LitElement {
           <slot></slot>
         </div>
 
-      ${this.isFullscreen || this.showFooter ? html`
+      ${this.isFullscreen ? html`
         <div id="footerContainer">
           <slot name="footer"></slot>
         </div>` : null}
@@ -14239,7 +14038,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605262025';
+var formkitVersion = '202606082059';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14596,6 +14395,25 @@ function normalizeFilterValue(value) {
   return raw.trim() ? raw.trimEnd() : raw;
 }
 
+/**
+ * Returns the option's plain-text label suitable for input.value, with
+ * HTML-indentation whitespace collapsed and the displayValue slot text
+ * removed (the slot renders separately in the trigger).
+ * @param {HTMLElement} option - An auro-menuoption element.
+ * @returns {string} Normalized label.
+ */
+function getOptionLabel(option) {
+  if (!option) {
+    return '';
+  }
+  const clone = option.cloneNode(true);
+  const displayValueEl = clone.querySelector('[slot="displayValue"]');
+  if (displayValueEl) {
+    displayValueEl.remove();
+  }
+  return (clone.textContent || '').replace(/\s+/gu, ' ').trim();
+}
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input.
@@ -14723,7 +14541,19 @@ class AuroCombobox extends AuroElement {
       availableOptions: {
         state: true,
         type: Array,
-        reflect: false
+        reflect: false,
+        hasChanged(newVal, oldVal) {
+          if (!oldVal && !newVal) {
+            return false;
+          }
+          if (!oldVal || !newVal) {
+            return true;
+          }
+          if (newVal.length !== oldVal.length) {
+            return true;
+          }
+          return newVal.some((opt, idx) => opt !== oldVal[idx]);
+        }
       },
 
       /**
@@ -15154,18 +14984,15 @@ class AuroCombobox extends AuroElement {
         matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
       }
 
-      // If input is empty, show all options (except static ones)
-      if (!filterValue) {
-        if (!option.hasAttribute('static')) {
-          option.removeAttribute('hidden');
-          this.availableOptions.push(option);
-        }
-      } else if (matchString.includes(filterValue) && !option.hasAttribute('static')) {
-        // only count options that match the typed input value AND are not static
+      if (!filterValue && option.hasAttribute('static')) {
+        // Static options are shown when the input is empty so consumers can
+        // surface headers / "add new" rows when no filter is active.
+        option.removeAttribute('hidden');
+        this.availableOptions.push(option);
+      } else if (filterValue && matchString.includes(filterValue) && !option.hasAttribute('static')) {
         option.removeAttribute('hidden');
         this.availableOptions.push(option);
       } else if (!option.hasAttribute('persistent')) {
-        // Hide all other non-persistent options
         option.setAttribute('hidden', '');
         option.removeAttribute('aria-setsize');
         option.removeAttribute('aria-posinset');
@@ -15173,7 +15000,9 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.availableOptions.length === 0) {
-      if (this.noMatchOption) {
+      // Only surface the nomatch option once the user has actually typed
+      // something. Empty input is handled by the bib being closed.
+      if (this.noMatchOption && filterValue) {
         this.noMatchOption.removeAttribute('hidden');
       } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
@@ -15189,11 +15018,14 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   syncValuesAndStates() {
-    // Only sync matchWord, don't set menu.value here since setMenuValue should handle that
+    // Do NOT call setMenuValue here — the caller (handleMenuOptions) already
+    // guards setMenuValue with an option-match check. Calling it unconditionally
+    // sets free-form values on the menu, triggering clearSelection which resets
+    // _index and breaks subsequent makeSelection calls.
     if (this.menu) {
       this.menu.matchWord = normalizeFilterValue(this.input.value);
     }
-    const label = this.menu.currentLabel;
+    const label = getOptionLabel(this.menu.optionSelected) || this.menu.currentLabel;
     this.updateTriggerTextDisplay(label || this.value);
   }
 
@@ -15208,7 +15040,39 @@ class AuroCombobox extends AuroElement {
     const isInputFocusedWithNoSelection = !this.menu.value && (this.input.matches(':focus-within') || (this.inputInBib && this.inputInBib.matches(':focus-within')));
 
     if (!this.persistInput && !(this.behavior === 'suggestion' && isInputFocusedWithNoSelection)) {
-      this.input.value = label || this.value;
+      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;
+        });
+      }
     }
 
     // update the displayValue in the trigger if displayValue slot content is present
@@ -15222,6 +15086,14 @@ class AuroCombobox extends AuroElement {
       const displayValueEl = this.menu.optionSelected.querySelector("[slot='displayValue']");
       if (displayValueEl) {
         this.input.appendChild(displayValueEl.cloneNode(true));
+        // auro-input's hasDisplayValueContent is non-reactive; nudge it to
+        // re-evaluate the slot and re-render so the displayValue wrapper
+        // gets its hasContent class. Without this, the apple/icon stays
+        // hidden when input.value is set in the same tick as the append.
+        if (typeof this.input.checkDisplayValueSlotChange === 'function') {
+          this.input.checkDisplayValueSlotChange();
+          this.input.requestUpdate();
+        }
       }
     }
 
@@ -15255,7 +15127,10 @@ class AuroCombobox extends AuroElement {
       this.syncValuesAndStates();
     }
 
-    if (!this.availableOptions.includes(this.menu.optionActive)) {
+    // 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.
+    if (!this.availableOptions.includes(this.menu.optionActive) || this.menu._index < 0) {
       this.activateFirstEnabledAvailableOption();
     }
   }
@@ -15380,8 +15255,13 @@ class AuroCombobox extends AuroElement {
 
           guardTouchPassthrough(this.menu);
 
-          // Wait for the bibtemplate to fully render across
-          // multiple Lit update cycles before moving focus into the bib
+          // 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.
+          requestAnimationFrame(() => {
+            this.setInputFocus();
+          });
+
           doubleRaf(() => {
             this.setInputFocus();
             this._inFullscreenTransition = false;
@@ -15462,10 +15342,30 @@ class AuroCombobox extends AuroElement {
    */
   setInputFocus() {
     if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
-      this.inputInBib.focus();
+      // Sync the native input value synchronously before focusing.
+      // Lit's property-to-attribute sync is async (microtask), so the
+      // native <input> inside inputInBib may still hold a stale value
+      // when focus moves here during the fullscreen transition. Without
+      // this, keystrokes (e.g. Backspace) operate on the wrong content.
+      const nativeInput = this.inputInBib.inputElement;
+      const triggerNativeInput = this.input.inputElement;
+      if (nativeInput && triggerNativeInput && nativeInput.value !== triggerNativeInput.value) {
+        this.inputInBib.skipNextProgrammaticInputEvent = true;
+        nativeInput.value = triggerNativeInput.value || '';
+      }
+
+      // Focus the native input directly to ensure it receives keystrokes
+      // after the fullscreen dialog opens. The dialog's showModal() may
+      // have moved focus to the dialog element itself; focusing the
+      // auro-input custom element doesn't always reach the native input
+      // when the dialog DOM isn't fully painted.
+      if (nativeInput) {
+        nativeInput.focus();
+      } else {
+        this.inputInBib.focus();
+      }
 
       // Place cursor at end of existing text so the user can continue editing
-      const nativeInput = this.inputInBib.inputElement;
       if (nativeInput && nativeInput.value) {
         const len = nativeInput.value.length;
         nativeInput.setSelectionRange(len, len);
@@ -15573,53 +15473,92 @@ class AuroCombobox extends AuroElement {
       this.menu.setAttribute('nocheckmark', '');
     }
 
-    this.menu.addEventListener("auroMenu-deselectPrevented", () => {
-      this.hideBib();
-    });
+    // Handle menu option selection
+    this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
+      // Capture before the consumption below — true means this event is the
+      // echo of our own setMenuValue (programmatic value sync), false means
+      // a fresh user selection.
+      const isEcho = this._pendingMenuValueSync === true;
 
-    // Handle menu option selection like select does
-    this.menu.addEventListener('auroMenu-selectedOption', (event) => {
-      // Update the optionSelected from the event details, not manually
-      [this.optionSelected] = event.detail.options;
+      if (this.menu.optionSelected) {
+        const selected = this.menu.optionSelected;
 
-      // Update the internal value to match the menu's value
-      this.value = event.detail.stringValue;
+        if (!this.optionSelected || this.optionSelected !== selected) {
+          this.optionSelected = selected;
+        }
 
-      // Update display
-      this.updateTriggerTextDisplay(event.detail.label || event.detail.value);
+        // Skip writeback when this event is the echo of our own setMenuValue —
+        // otherwise it cascades against handleInputValueChange in suggestion mode.
+        if (this._pendingMenuValueSync) {
+          this._pendingMenuValueSync = false;
+        } else if (!this.value || this.value !== this.optionSelected.value) {
+          this.value = this.optionSelected.value;
+        }
 
-      // Update match word for filtering
-      const trimmedInput = normalizeFilterValue(this.input.value);
-      if (this.menu.matchWord !== trimmedInput) {
-        this.menu.matchWord = trimmedInput;
-      }
+        // Update display
+        this.updateTriggerTextDisplay(getOptionLabel(this.optionSelected) || this.menu.value);
 
-      // Update available options based on selection
-      this.handleMenuOptions();
+        // Update match word for filtering
+        const trimmedInput = normalizeFilterValue(this.input.value);
+        if (this.menu.matchWord !== trimmedInput) {
+          this.menu.matchWord = trimmedInput;
+        }
+      }
 
       // Hide dropdown on selection (except during slot changes)
-      if (event.detail && event.detail.source !== 'slotchange') {
-        setTimeout(() => {
-          // 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();
-          }
-        }, 0);
+      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();
+        }
 
         // Announce the selection after the dropdown closes so it isn't
         // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
-        const selectedValue = event.detail.stringValue;
+        const selectedValue = this.menu.value;
         const announcementDelay = 300;
         setTimeout(() => {
           announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
         }, announcementDelay);
       }
+
+      // Programmatic value syncs leave availableOptions stale because
+      // updateTriggerTextDisplay sets input.value with _syncingDisplayValue
+      // and handleInputValueChange bails. Refresh the filter on echo events
+      // 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 = '';
+          }
+        });
+      }
     });
 
     this.menu.addEventListener('auroMenu-customEventFired', () => {
       this.hideBib();
     });
 
+    // When the menu cannot match a programmatic value to any option,
+    // clear the combobox selection state so it doesn't reference a
+    // stale option. Safe from re-entrancy because any resulting
+    // input.value changes dispatch isProgrammatic events.
+    this.menu.addEventListener('auroMenu-selectValueFailure', () => {
+      this.value = undefined;
+      this.optionSelected = undefined;
+    });
+
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
 
@@ -15720,11 +15659,12 @@ class AuroCombobox extends AuroElement {
     // event from the trigger. The _syncingBibValue guard persists across the
     // async boundary and prevents that re-entrant event from running the
     // non-fullscreen path (which would call clear() → hideBib()).
-    // When the event comes from the fullscreen bib input, sync the value to
-    // the trigger and run filtering, but suppress the re-entrant input event
-    // that the trigger fires (via Lit updated() → notifyValueChanged()) so
-    // the non-fullscreen hide/clear logic doesn't close the dialog.
     if (event.target === this.inputInBib) {
+      // Mirror the trigger-branch bail below — programmatic inputInBib writes
+      // notify back into this branch via Lit's notifyValueChanged.
+      if (this._syncingDisplayValue) {
+        return;
+      }
       this._syncingBibValue = true;
       this.input.value = this.inputInBib.value;
       this.input.updateComplete.then(() => {
@@ -15734,18 +15674,37 @@ class AuroCombobox extends AuroElement {
       // 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;
+      }
+
       this.handleMenuOptions();
       this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
       return;
     }
 
-    // Ignore re-entrant input events caused by the bib→trigger sync above.
-    if (this._syncingBibValue) {
+    // 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;
 
@@ -15753,7 +15712,7 @@ class AuroCombobox extends AuroElement {
       this.value = this.input.value;
     }
 
-    if (!this.input.value) {
+    if (!this.input.value && !this._clearing) {
       this.clear();
     }
     this.handleMenuOptions();
@@ -15883,10 +15842,18 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   setMenuValue(value) {
-    if (!this.menu) {
+    if (!this.menu || this.menu.value === value) {
       return;
     }
+    // One-shot flag consumed by the auroMenu-selectedOption listener so the
+    // echo of this sync doesn't propagate back to this.value.
+    this._pendingMenuValueSync = true;
     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._pendingMenuValueSync = false;
+    }, 0);
   }
 
   /**
@@ -15908,16 +15875,24 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   clear() {
-    // Clear combobox state first
-    this.optionSelected = undefined;
-    this.value = undefined;
-
-    // Then clear input and menu
-    if (this.input.value) {
-      this.input.clear();
+    // input.clear() fires an input event that re-enters handleInputValueChange
+    // → which calls clear() again on empty input. Guard against that loop.
+    if (this._clearing) {
+      return;
     }
-    if (this.menu.value || this.menu.optionSelected) {
-      this.menu.reset();
+    this._clearing = true;
+    try {
+      this.optionSelected = undefined;
+      this.value = undefined;
+
+      if (this.input.value) {
+        this.input.clear();
+      }
+      if (this.menu.value || this.menu.optionSelected) {
+        this.menu.reset();
+      }
+    } finally {
+      this._clearing = false;
     }
   }
 
@@ -15945,29 +15920,64 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
-      if (this.menu && this.hasValue && this.menu.options) {
-        this.menu.options.forEach((opt) => {
-          if (!opt.hasAttribute('static')) {
-            opt.removeAttribute('hidden');
-          }
-        });
-      }
-
-      if (this.behavior === 'suggestion') {
-        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+      // 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 {
-          this.menu.value = undefined;
-          // Sync the input display for freeform values that don't match any option
-          this.input.value = this.value;
-        }
-      } else {
-        // Use setMenuValue like select does instead of direct assignment
-        this.setMenuValue(this.value);
-        if (!this.value) {
-          this.clear();
+          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.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)
@@ -16004,12 +16014,18 @@ class AuroCombobox extends AuroElement {
       // branch from calling hideBib() when the dropdown was just opened but
       // :focus-within hasn't propagated through the top-layer dialog's nested
       // shadow DOM boundaries.
-      if ((this.availableOptions.length > 0 && (this.componentHasFocus || this.dropdownOpen)) || (this.menu && this.menu.loading) || (this.availableOptions.length === 0 && this.noMatchOption)) {
+      // Skip the show/hide side effects when the availableOptions change came
+      // 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.availableOptions.includes(this.menu.optionActive)) {
           this.activateFirstEnabledAvailableOption();
         }
-      } else {
+      } else if (this.dropdown && this.dropdown.isPopoverVisible) {
         this.hideBib();
       }
     }