@aurodesignsystem-dev/auro-formkit 0.0.0-pr1431.2 → 0.0.0-pr1433.0

package/components/combobox/dist/index.js

@@ -3139,6 +3139,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -3556,6 +3557,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -3571,6 +3594,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -5045,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604091435';
+var formkitVersion$2 = '202604100244';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12802,7 +12830,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604091435';
+var formkitVersion$1 = '202604100244';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13867,11 +13895,11 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '202604100244';
 
 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}`;
 
-var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
+var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
 
 var styleSnowflakeCss = css`:host([layout*=snowflake][shape*=snowflake]) [auro-input]{width:100%}:host([layout*=snowflake][shape*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake][shape*=snowflake])::part(helpText){text-align:center}`;
 
@@ -14730,7 +14758,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   activateFirstEnabledAvailableOption() {
-    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.noMatch);
+    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.hasAttribute('nomatch'));
     this.updateActiveOption(firstEnabledOptionIndex);
   }
 
@@ -14744,7 +14772,7 @@ class AuroCombobox extends AuroElement {
 
     // Work backwards through the available options array to find the last enabled option
     for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
-      if (!this.availableOptions[index].disabled && !this.availableOptions[index].noMatch) {
+      if (!this.availableOptions[index].disabled && !this.availableOptions[index].hasAttribute('nomatch')) {
         lastEnabledOptionIndex = index;
         break;
       }
@@ -14829,14 +14857,18 @@ class AuroCombobox extends AuroElement {
   /**
    * Update displayValue or input.value, it's called when making a selection.
    * @param {string} label - The label of the selected option.
+   * @param {object} [options={}] - Optional display update settings.
+   * @param {boolean} [options.force=false] - Force display sync while focused.
    * @private
    */
-  updateTriggerTextDisplay(label) {
+  updateTriggerTextDisplay(label, options = {}) {
+    const { force = false } = options;
+
     // update the input content if persistInput is false
     // in suggestion mode, do not override input value if no selection has been made and the input currently has focus
     const isInputFocusedWithNoSelection = !this.menu.value && (this.input.matches(':focus-within') || (this.inputInBib && this.inputInBib.matches(':focus-within')));
 
-    if (!this.persistInput && !(this.behavior === 'suggestion' && isInputFocusedWithNoSelection)) {
+    if (!this.persistInput && (force || !(this.behavior === 'suggestion' && isInputFocusedWithNoSelection))) {
       this.input.value = label || this.value;
     }
 
@@ -14913,6 +14945,13 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
+    // Do not auto-open from programmatic value/option updates when the
+    // combobox is not focused. User-driven interactions still open normally
+    // once focus enters the component.
+    if (!this.componentHasFocus && !this.dropdown.isPopoverVisible) {
+      return;
+    }
+
     if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
@@ -15201,6 +15240,25 @@ class AuroCombobox extends AuroElement {
 
     // Handle menu option selection like select does
     this.menu.addEventListener('auroMenu-selectedOption', (event) => {
+      const hasMatchingOptionForValue =
+        typeof this.value === 'string' &&
+        this.value.length > 0 &&
+        this.menu && Array.isArray(this.menu.options) &&
+        this.menu.options.some((opt) => opt.value === this.value);
+
+      const isInitNoMatch = event.detail && event.detail.reason === 'no-match' &&
+        this.menu && this.menu.options && this.menu.options.length === 0 &&
+        typeof this.value === 'string' &&
+        this.value.length > 0;
+
+      const isTransientProgrammaticNoMatch = event.detail && event.detail.reason === 'no-match' &&
+        this._suppressNextEmptyInputClear &&
+        hasMatchingOptionForValue;
+
+      if (isInitNoMatch || isTransientProgrammaticNoMatch) {
+        return;
+      }
+
       // Update the optionSelected from the event details, not manually
       [this.optionSelected] = event.detail.options;
 
@@ -15376,7 +15434,18 @@ class AuroCombobox extends AuroElement {
     }
 
     if (!this.input.value) {
-      this.clear();
+      const hasCommittedValue = typeof this.value === 'string' && this.value.length > 0;
+      const hasCommittedSelection = Boolean(this.menu && this.menu.optionSelected);
+      const isBlurSideEffect = !this.componentHasFocus && !this.dropdownOpen;
+      const isTransientEmptyInputEvent = this._suppressNextEmptyInputClear && (!event || !event.detail || event.detail.value === null || event.detail.value === undefined);
+
+      // Preserve a committed value when an empty input event is emitted as a
+      // side effect of focus leaving the combobox (e.g., clicking a swap
+      // control between two comboboxes). User-driven empty input while focused
+      // should still clear as before.
+      if (!(isTransientEmptyInputEvent || (isBlurSideEffect && hasCommittedValue && hasCommittedSelection))) {
+        this.clear();
+      }
     }
     this.handleMenuOptions();
 
@@ -15559,6 +15628,19 @@ class AuroCombobox extends AuroElement {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('typedValue')) {
+      const nextTypedValue = this.typedValue === null || this.typedValue === undefined ? '' : this.typedValue;
+      if (this.input && this.input.value !== nextTypedValue) {
+        this.input.value = nextTypedValue;
+      }
+      if (this.inputInBib && this.inputInBib.value !== nextTypedValue) {
+        this.inputInBib.value = nextTypedValue;
+      }
+      if (this.menu) {
+        this.menu.matchWord = normalizeFilterValue(nextTypedValue);
+      }
+    }
+
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
@@ -15586,6 +15668,19 @@ class AuroCombobox extends AuroElement {
           this.clear();
         }
       }
+
+      // Keep trigger text synced after value/menu state has settled. Force the
+      // update so external programmatic swaps reflect immediately in the UI
+      // even if the input still technically holds focus during the same tick.
+      if (this.value) {
+        const selectedOption = this.menu && this.menu.optionSelected;
+        const hasMatchingSelectedOption = selectedOption && selectedOption.value === this.value;
+        const selectedOptionLabel = (selectedOption && selectedOption.getAttribute('label')) || (selectedOption && selectedOption.textContent ? selectedOption.textContent.trim() : undefined);
+        const nextDisplayLabel = hasMatchingSelectedOption ? (selectedOptionLabel || this.value) : this.value;
+
+        this.updateTriggerTextDisplay(nextDisplayLabel, { force: true });
+      }
+
       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)
@@ -15597,22 +15692,47 @@ class AuroCombobox extends AuroElement {
         this.menu.matchWord = normalizeFilterValue(this.input.value);
       }
 
-      this.dispatchEvent(new CustomEvent('input', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: {
-          optionSelected: this.menu.optionSelected,
-          value: this.menu.value
-        }
-      }));
+      // Only dispatch 'input' when the value transition is meaningful — at least one
+      // of old/new must be a non-empty string.  Skipping the event when both are
+      // empty/undefined prevents a feedback loop during SPA navigation where Lit's
+      // initial update cycle fires before the parent framework (e.g. Svelte) has
+      // had a chance to set the preselected value as a property.  Without this
+      // guard the event arrives with el.value === undefined, the surrounding
+      // framework reads it as '' and writes that back, permanently obscuring the
+      // intended preselected value.
+      const _oldValue = changedProperties.get('value');
+      const _oldIsNonEmpty = typeof _oldValue === 'string' && _oldValue.length > 0;
+      const _newIsNonEmpty = typeof this.value === 'string' && this.value.length > 0;
+
+      if (_newIsNonEmpty && this.menu && Array.isArray(this.menu.options) && this.menu.options.some((opt) => opt.value === this.value)) {
+        this._suppressNextEmptyInputClear = true;
+        clearTimeout(this._suppressNextEmptyInputClearTimeout);
+        const suppressNextEmptyInputClearDelay = 300;
+        this._suppressNextEmptyInputClearTimeout = setTimeout(() => {
+          this._suppressNextEmptyInputClear = false;
+        }, suppressNextEmptyInputClearDelay);
+      } else {
+        this._suppressNextEmptyInputClear = false;
+      }
 
-      // Deprecated, need to be removed.
-      this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
+      if (_oldIsNonEmpty || _newIsNonEmpty) {
+        this.dispatchEvent(new CustomEvent('input', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+          detail: {
+            optionSelected: this.menu.optionSelected,
+            value: this.menu.value
+          }
+        }));
+
+        // Deprecated, need to be removed.
+        this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
+      }
     }
 
     if (changedProperties.has('availableOptions')) {

package/components/combobox/dist/registered.js

@@ -3139,6 +3139,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -3556,6 +3557,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -3571,6 +3594,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -5045,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604091435';
+var formkitVersion$2 = '202604100244';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12802,7 +12830,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604091435';
+var formkitVersion$1 = '202604100244';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13867,11 +13895,11 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '202604100244';
 
 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}`;
 
-var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
+var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input][slot=trigger]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
 
 var styleSnowflakeCss = css`:host([layout*=snowflake][shape*=snowflake]) [auro-input]{width:100%}:host([layout*=snowflake][shape*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake][shape*=snowflake])::part(helpText){text-align:center}`;
 
@@ -14730,7 +14758,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   activateFirstEnabledAvailableOption() {
-    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.noMatch);
+    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.hasAttribute('nomatch'));
     this.updateActiveOption(firstEnabledOptionIndex);
   }
 
@@ -14744,7 +14772,7 @@ class AuroCombobox extends AuroElement {
 
     // Work backwards through the available options array to find the last enabled option
     for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
-      if (!this.availableOptions[index].disabled && !this.availableOptions[index].noMatch) {
+      if (!this.availableOptions[index].disabled && !this.availableOptions[index].hasAttribute('nomatch')) {
         lastEnabledOptionIndex = index;
         break;
       }
@@ -14829,14 +14857,18 @@ class AuroCombobox extends AuroElement {
   /**
    * Update displayValue or input.value, it's called when making a selection.
    * @param {string} label - The label of the selected option.
+   * @param {object} [options={}] - Optional display update settings.
+   * @param {boolean} [options.force=false] - Force display sync while focused.
    * @private
    */
-  updateTriggerTextDisplay(label) {
+  updateTriggerTextDisplay(label, options = {}) {
+    const { force = false } = options;
+
     // update the input content if persistInput is false
     // in suggestion mode, do not override input value if no selection has been made and the input currently has focus
     const isInputFocusedWithNoSelection = !this.menu.value && (this.input.matches(':focus-within') || (this.inputInBib && this.inputInBib.matches(':focus-within')));
 
-    if (!this.persistInput && !(this.behavior === 'suggestion' && isInputFocusedWithNoSelection)) {
+    if (!this.persistInput && (force || !(this.behavior === 'suggestion' && isInputFocusedWithNoSelection))) {
       this.input.value = label || this.value;
     }
 
@@ -14913,6 +14945,13 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
+    // Do not auto-open from programmatic value/option updates when the
+    // combobox is not focused. User-driven interactions still open normally
+    // once focus enters the component.
+    if (!this.componentHasFocus && !this.dropdown.isPopoverVisible) {
+      return;
+    }
+
     if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
@@ -15201,6 +15240,25 @@ class AuroCombobox extends AuroElement {
 
     // Handle menu option selection like select does
     this.menu.addEventListener('auroMenu-selectedOption', (event) => {
+      const hasMatchingOptionForValue =
+        typeof this.value === 'string' &&
+        this.value.length > 0 &&
+        this.menu && Array.isArray(this.menu.options) &&
+        this.menu.options.some((opt) => opt.value === this.value);
+
+      const isInitNoMatch = event.detail && event.detail.reason === 'no-match' &&
+        this.menu && this.menu.options && this.menu.options.length === 0 &&
+        typeof this.value === 'string' &&
+        this.value.length > 0;
+
+      const isTransientProgrammaticNoMatch = event.detail && event.detail.reason === 'no-match' &&
+        this._suppressNextEmptyInputClear &&
+        hasMatchingOptionForValue;
+
+      if (isInitNoMatch || isTransientProgrammaticNoMatch) {
+        return;
+      }
+
       // Update the optionSelected from the event details, not manually
       [this.optionSelected] = event.detail.options;
 
@@ -15376,7 +15434,18 @@ class AuroCombobox extends AuroElement {
     }
 
     if (!this.input.value) {
-      this.clear();
+      const hasCommittedValue = typeof this.value === 'string' && this.value.length > 0;
+      const hasCommittedSelection = Boolean(this.menu && this.menu.optionSelected);
+      const isBlurSideEffect = !this.componentHasFocus && !this.dropdownOpen;
+      const isTransientEmptyInputEvent = this._suppressNextEmptyInputClear && (!event || !event.detail || event.detail.value === null || event.detail.value === undefined);
+
+      // Preserve a committed value when an empty input event is emitted as a
+      // side effect of focus leaving the combobox (e.g., clicking a swap
+      // control between two comboboxes). User-driven empty input while focused
+      // should still clear as before.
+      if (!(isTransientEmptyInputEvent || (isBlurSideEffect && hasCommittedValue && hasCommittedSelection))) {
+        this.clear();
+      }
     }
     this.handleMenuOptions();
 
@@ -15559,6 +15628,19 @@ class AuroCombobox extends AuroElement {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('typedValue')) {
+      const nextTypedValue = this.typedValue === null || this.typedValue === undefined ? '' : this.typedValue;
+      if (this.input && this.input.value !== nextTypedValue) {
+        this.input.value = nextTypedValue;
+      }
+      if (this.inputInBib && this.inputInBib.value !== nextTypedValue) {
+        this.inputInBib.value = nextTypedValue;
+      }
+      if (this.menu) {
+        this.menu.matchWord = normalizeFilterValue(nextTypedValue);
+      }
+    }
+
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
@@ -15586,6 +15668,19 @@ class AuroCombobox extends AuroElement {
           this.clear();
         }
       }
+
+      // Keep trigger text synced after value/menu state has settled. Force the
+      // update so external programmatic swaps reflect immediately in the UI
+      // even if the input still technically holds focus during the same tick.
+      if (this.value) {
+        const selectedOption = this.menu && this.menu.optionSelected;
+        const hasMatchingSelectedOption = selectedOption && selectedOption.value === this.value;
+        const selectedOptionLabel = (selectedOption && selectedOption.getAttribute('label')) || (selectedOption && selectedOption.textContent ? selectedOption.textContent.trim() : undefined);
+        const nextDisplayLabel = hasMatchingSelectedOption ? (selectedOptionLabel || this.value) : this.value;
+
+        this.updateTriggerTextDisplay(nextDisplayLabel, { force: true });
+      }
+
       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)
@@ -15597,22 +15692,47 @@ class AuroCombobox extends AuroElement {
         this.menu.matchWord = normalizeFilterValue(this.input.value);
       }
 
-      this.dispatchEvent(new CustomEvent('input', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: {
-          optionSelected: this.menu.optionSelected,
-          value: this.menu.value
-        }
-      }));
+      // Only dispatch 'input' when the value transition is meaningful — at least one
+      // of old/new must be a non-empty string.  Skipping the event when both are
+      // empty/undefined prevents a feedback loop during SPA navigation where Lit's
+      // initial update cycle fires before the parent framework (e.g. Svelte) has
+      // had a chance to set the preselected value as a property.  Without this
+      // guard the event arrives with el.value === undefined, the surrounding
+      // framework reads it as '' and writes that back, permanently obscuring the
+      // intended preselected value.
+      const _oldValue = changedProperties.get('value');
+      const _oldIsNonEmpty = typeof _oldValue === 'string' && _oldValue.length > 0;
+      const _newIsNonEmpty = typeof this.value === 'string' && this.value.length > 0;
+
+      if (_newIsNonEmpty && this.menu && Array.isArray(this.menu.options) && this.menu.options.some((opt) => opt.value === this.value)) {
+        this._suppressNextEmptyInputClear = true;
+        clearTimeout(this._suppressNextEmptyInputClearTimeout);
+        const suppressNextEmptyInputClearDelay = 300;
+        this._suppressNextEmptyInputClearTimeout = setTimeout(() => {
+          this._suppressNextEmptyInputClear = false;
+        }, suppressNextEmptyInputClearDelay);
+      } else {
+        this._suppressNextEmptyInputClear = false;
+      }
 
-      // Deprecated, need to be removed.
-      this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
+      if (_oldIsNonEmpty || _newIsNonEmpty) {
+        this.dispatchEvent(new CustomEvent('input', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+          detail: {
+            optionSelected: this.menu.optionSelected,
+            value: this.menu.value
+          }
+        }));
+
+        // Deprecated, need to be removed.
+        this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
+      }
     }
 
     if (changedProperties.has('availableOptions')) {

package/components/counter/demo/api.min.js

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202604091435';
+var formkitVersion$1 = '202604100244';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -3799,6 +3799,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -4216,6 +4217,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -4231,6 +4254,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -5705,7 +5733,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '202604100244';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {