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

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

@@ -3206,6 +3206,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -3623,6 +3624,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() {
@@ -3638,6 +3661,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;
@@ -5112,7 +5140,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604091435';
+var formkitVersion$2 = '202604100244';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12876,7 +12904,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-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.
@@ -13941,11 +13969,11 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '202604100244';
 
 var styleCss$3 = i$7`.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 = i$7`: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 = i$7`: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 = i$7`: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}`;
 
@@ -14804,7 +14832,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);
   }
 
@@ -14818,7 +14846,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;
       }
@@ -14903,14 +14931,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;
     }
 
@@ -14987,6 +15019,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;
@@ -15275,6 +15314,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;
 
@@ -15450,7 +15508,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();
 
@@ -15633,6 +15702,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) {
@@ -15660,6 +15742,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)
@@ -15671,22 +15766,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')) {
@@ -16083,6 +16203,7 @@ class AuroMenuOption extends AuroElement {
     this.selected = false;
     this.noCheckmark = false;
     this.disabled = false;
+    this.noMatch = false;
 
     /**
      * @private
@@ -16163,7 +16284,8 @@ class AuroMenuOption extends AuroElement {
        */
       noMatch: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nomatch'
       },
 
       /**
@@ -16263,7 +16385,7 @@ class AuroMenuOption extends AuroElement {
       this.setAttribute('aria-selected', this.selected.toString());
 
       // Update menu service selection state if this isn't an internal update
-      if (this.internalUpdateInProgress !== true) {
+      if (this.internalUpdateInProgress !== true && this.menuService) {
         this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
       }
     }
@@ -16298,9 +16420,10 @@ class AuroMenuOption extends AuroElement {
   }
 
   disconnectedCallback() {
-    if (this.menuService) {
-      this.menuService.unsubscribe(this.handleMenuChange);
-      this.menuService.removeMenuOption(this);
+    const { menuService } = this;
+    if (menuService) {
+      menuService.unsubscribe(this.handleMenuChange);
+      menuService.removeMenuOption(this);
     }
   }
 
@@ -16469,9 +16592,11 @@ class AuroMenuOption extends AuroElement {
    * @private
    */
   handleMouseEnter() {
-    if (!this.disabled) {
-      this.menuService.setHighlightedOption(this);
+    const { menuService } = this;
+    if (!menuService || this.disabled) {
+      return;
     }
+    menuService.setHighlightedOption(this);
   }
 
   /**
@@ -16875,10 +17000,15 @@ class MenuService {
       return;
     }
 
+    const before = this.selectedOptions || [];
     const optionsSet = new Set(optionsToDeselect);
-    this.selectedOptions = (this.selectedOptions || [])
-      .filter(opt => !optionsSet.has(opt));
+    const after = before.filter(opt => !optionsSet.has(opt));
+
+    if (this.optionsArraysMatch(after, before)) {
+      return;
+    }
 
+    this.selectedOptions = after;
     this.stageUpdate();
   }
 
@@ -16974,6 +17104,16 @@ class MenuService {
         return;
       }
 
+      const hostValue = this.host && this.host.value;
+      const hostHasValue = hostValue !== undefined &&
+        hostValue !== null &&
+        (!Array.isArray(hostValue) || hostValue.length > 0) &&
+        (typeof hostValue !== 'string' || hostValue.trim() !== '');
+
+      if (hostHasValue && this._pendingValue != null) {
+        return;
+      }
+
       this.clearPendingValue();
 
       if (this.selectedOptions.length > 0) {
@@ -17154,6 +17294,9 @@ class MenuService {
     this.notify({ type: 'optionsChange', options: this._menuOptions });
 
     if (this._pendingValue != null) {
+      // Reset the retry count so a new option registration gives a fresh
+      // budget — the initial retries fired before delayed options arrived.
+      this._pendingRetryCount = 0;
       this.queuePendingValue(this._pendingValue);
     }
   }
@@ -17498,7 +17641,11 @@ class AuroMenu extends AuroElement {
    * @returns {string} - Returns the label of the currently selected option(s).
    */
   get currentLabel() {
-    return this.menuService.currentLabel;
+    const { menuService } = this;
+    if (!menuService) {
+      return '';
+    }
+    return menuService.currentLabel;
   };
 
   /**
@@ -17521,7 +17668,12 @@ class AuroMenu extends AuroElement {
    * @param {number} value - Sets the index of the currently active option.
    */
   set index(value) {
-    this.menuService.setHighlightedIndex(value);
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
+
+    menuService.setHighlightedIndex(value);
   }
 
   /**
@@ -17543,7 +17695,11 @@ class AuroMenu extends AuroElement {
    * @returns {String|Array<String>}
    */
   get formattedValue() {
-    return this.menuService.currentValue;
+    const { menuService } = this;
+    if (!menuService) {
+      return '';
+    }
+    return menuService.currentValue;
   }
 
   /**
@@ -17587,7 +17743,11 @@ class AuroMenu extends AuroElement {
    * @param {HTMLElement} option - The option to set as active.
    */
   updateActiveOption(option) {
-    this.menuService.setHighlightedOption(option);
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
+    menuService.setHighlightedOption(option);
   }
 
   /**
@@ -17615,7 +17775,8 @@ class AuroMenu extends AuroElement {
     if (event.type === 'valueChange') {
 
       // New option is array value or first option with fallback to undefined for empty array in all cases
-      const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
+      const options = event.options || [];
+      const newOption = this.multiSelect && options.length ? options : options[0] || undefined;
       const newValue = event.stringValue;
 
       // Check if the option or value has actually changed
@@ -17624,8 +17785,11 @@ class AuroMenu extends AuroElement {
         this.setInternalValue(newValue);
       }
 
-      // Notify components of selection change
-      this.notifySelectionChange(event);
+      // Notify components of selection change (pass normalized options to avoid undefined iterability errors)
+      this.notifySelectionChange({
+        ...event,
+        options
+      });
     }
 
     if (event.type === 'highlightChange') {
@@ -17648,7 +17812,11 @@ class AuroMenu extends AuroElement {
    * @returns {Array<HTMLElement>}
    */
   get selectedOptions() {
-    return this.menuService ? this.menuService.selectedOptions : [];
+    const { menuService } = this;
+    if (!menuService) {
+      return [];
+    }
+    return menuService.selectedOptions;
   }
 
   /**
@@ -17656,7 +17824,11 @@ class AuroMenu extends AuroElement {
    * @returns {HTMLElement|null}
    */
   get selectedOption() {
-    return this.menuService ? this.menuService.selectedOptions[0] : null;
+    const { menuService } = this;
+    if (!menuService) {
+      return null;
+    }
+    return menuService.selectedOptions[0] || null;
   }
 
   // Lifecycle Methods
@@ -17700,7 +17872,11 @@ class AuroMenu extends AuroElement {
     // keys are not yet resolved (framework mount-order race), selectByValue
     // queues a bounded retry automatically via queuePendingValue.
     if (changedProperties.has('value') && !this.internalUpdateInProgress) {
-      this.menuService.selectByValue(this.value);
+      const { menuService } = this;
+      if (!menuService) {
+        return;
+      }
+      menuService.selectByValue(this.value);
     }
 
     // Handle loading state changes
@@ -17765,7 +17941,11 @@ class AuroMenu extends AuroElement {
    * @protected
    */
   makeSelection() {
-    this.menuService.selectHighlightedOption();
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
+    menuService.selectHighlightedOption();
   }
 
   /**
@@ -17784,7 +17964,11 @@ class AuroMenu extends AuroElement {
    * @public
    */
   reset() {
-    this.menuService.reset();
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
+    menuService.reset();
 
     // Dispatch reset event
     dispatchMenuEvent(this, 'auroMenu-selectValueReset');
@@ -17819,10 +18003,14 @@ class AuroMenu extends AuroElement {
    * @protected
    */
   navigateOptions(direction) {
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
     if (direction === 'up') {
-      this.menuService.highlightPrevious();
+      menuService.highlightPrevious();
     } else if (direction === 'down') {
-      this.menuService.highlightNext();
+      menuService.highlightNext();
     }
   }
 

package/components/combobox/dist/auro-combobox.d.ts

@@ -409,6 +409,8 @@ export 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
      */
     private updateTriggerTextDisplay;
@@ -551,6 +553,8 @@ export class AuroCombobox extends AuroElement {
     validate(force?: boolean): void;
     updated(changedProperties: any): void;
     hasValue: boolean;
+    _suppressNextEmptyInputClear: boolean;
+    _suppressNextEmptyInputClearTimeout: NodeJS.Timeout;
     /**
      * Applies slotted nodes to a target element with a new slot name.
      * @private