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

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

@@ -6759,7 +6759,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '202604100244';
 
 /**
  * @license

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

@@ -6684,7 +6684,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '202604100244';
 
 /**
  * @license

package/components/input/dist/index.js

@@ -6626,7 +6626,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '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.

package/components/input/dist/registered.js

@@ -6626,7 +6626,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604091435';
+var formkitVersion = '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.

package/components/menu/demo/api.md

@@ -67,7 +67,7 @@ The `auro-menuoption` element provides users a way to define a menu option.
 | [iconTag](#iconTag)     |            |           | `string`  |         |                                                  |
 | [isActive](#isActive)    |            | readonly  | `boolean` |         | Returns whether the menu option is currently active and selectable.<br />An option is considered active if it is not hidden, not disabled, and not static. |
 | [key](#key)         | `key`      |           | `string`  |         | Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used. |
-| [noMatch](#noMatch)     | `noMatch`  |           | `boolean` |         | When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match. |
+| [noMatch](#noMatch)     | `nomatch`  |           | `boolean` | false   | When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match. |
 | [selected](#selected)    | `selected` |           | `boolean` | false   | Specifies that an option is selected.            |
 | [tabIndex](#tabIndex)    | `tabIndex` |           | `number`  |         | Specifies the tab index of the menu option.      |
 | [unsubscribe](#unsubscribe) |            |           |           | null    |                                                  |

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

@@ -527,6 +527,7 @@ class AuroMenuOption extends AuroElement {
     this.selected = false;
     this.noCheckmark = false;
     this.disabled = false;
+    this.noMatch = false;
 
     /**
      * @private
@@ -607,7 +608,8 @@ class AuroMenuOption extends AuroElement {
        */
       noMatch: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nomatch'
       },
 
       /**
@@ -707,7 +709,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);
       }
     }
@@ -742,9 +744,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);
     }
   }
 
@@ -913,9 +916,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);
   }
 
   /**
@@ -1319,10 +1324,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();
   }
 
@@ -1418,6 +1428,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) {
@@ -1598,6 +1618,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);
     }
   }
@@ -1942,7 +1965,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;
   };
 
   /**
@@ -1965,7 +1992,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);
   }
 
   /**
@@ -1987,7 +2019,11 @@ class AuroMenu extends AuroElement {
    * @returns {String|Array<String>}
    */
   get formattedValue() {
-    return this.menuService.currentValue;
+    const { menuService } = this;
+    if (!menuService) {
+      return '';
+    }
+    return menuService.currentValue;
   }
 
   /**
@@ -2031,7 +2067,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);
   }
 
   /**
@@ -2059,7 +2099,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
@@ -2068,8 +2109,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') {
@@ -2092,7 +2136,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;
   }
 
   /**
@@ -2100,7 +2148,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
@@ -2144,7 +2196,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
@@ -2209,7 +2265,11 @@ class AuroMenu extends AuroElement {
    * @protected
    */
   makeSelection() {
-    this.menuService.selectHighlightedOption();
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
+    menuService.selectHighlightedOption();
   }
 
   /**
@@ -2228,7 +2288,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');
@@ -2263,10 +2327,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/menu/demo/index.min.js

@@ -435,6 +435,7 @@ class AuroMenuOption extends AuroElement {
     this.selected = false;
     this.noCheckmark = false;
     this.disabled = false;
+    this.noMatch = false;
 
     /**
      * @private
@@ -515,7 +516,8 @@ class AuroMenuOption extends AuroElement {
        */
       noMatch: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nomatch'
       },
 
       /**
@@ -615,7 +617,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);
       }
     }
@@ -650,9 +652,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);
     }
   }
 
@@ -821,9 +824,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);
   }
 
   /**
@@ -1227,10 +1232,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();
   }
 
@@ -1326,6 +1336,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) {
@@ -1506,6 +1526,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);
     }
   }
@@ -1850,7 +1873,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;
   };
 
   /**
@@ -1873,7 +1900,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);
   }
 
   /**
@@ -1895,7 +1927,11 @@ class AuroMenu extends AuroElement {
    * @returns {String|Array<String>}
    */
   get formattedValue() {
-    return this.menuService.currentValue;
+    const { menuService } = this;
+    if (!menuService) {
+      return '';
+    }
+    return menuService.currentValue;
   }
 
   /**
@@ -1939,7 +1975,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);
   }
 
   /**
@@ -1967,7 +2007,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
@@ -1976,8 +2017,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') {
@@ -2000,7 +2044,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;
   }
 
   /**
@@ -2008,7 +2056,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
@@ -2052,7 +2104,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
@@ -2117,7 +2173,11 @@ class AuroMenu extends AuroElement {
    * @protected
    */
   makeSelection() {
-    this.menuService.selectHighlightedOption();
+    const { menuService } = this;
+    if (!menuService) {
+      return;
+    }
+    menuService.selectHighlightedOption();
   }
 
   /**
@@ -2136,7 +2196,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');
@@ -2171,10 +2235,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/menu/dist/auro-menuoption.d.ts

@@ -71,6 +71,7 @@ export class AuroMenuOption extends AuroElement {
         noMatch: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: string;
         };
         /**
          * Specifies that an option is selected.
@@ -113,6 +114,7 @@ export class AuroMenuOption extends AuroElement {
     selected: boolean;
     noCheckmark: boolean;
     disabled: boolean;
+    noMatch: boolean;
     /**
      * @private
      */