@aurodesignsystem/auro-formkit 3.5.0 → 4.0.0-rc-658.1

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

@@ -89,11 +89,11 @@ function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['Oranges'];
+    valueExample.value = 'Oranges';
   });
 
   document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['Dragon Fruit'];
+    valueExample.value = 'Dragon Fruit';
   });
 
   document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
@@ -12605,122 +12605,6 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
-
-i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
-
-i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/**
- * Converts value to an array.
- * If the value is a JSON string representing an array, it will be parsed.
- * If the value is already an array, it is returned.
- * If the value is undefined, it returns undefined.
- * @private
- * @param {any} value - The value to be converted. Can be a string, array, or undefined.
- * @returns {Array|undefined} - The converted array or undefined.
- * @throws {Error} - Throws an error if the value is not an array, undefined,
- * or if the value cannot be parsed into an array from a JSON string.
- */
-function arrayConverter$1(value) {
-  // Allow undefined
-  if (value === undefined) {
-    return undefined;
-  }
-
-  // Return the value if it is already an array
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  try {
-    // If value is a JSON string, parse it
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-
-    // Check if the parsed value is an array
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-  } catch (error) {
-    // If JSON parsing fails, continue to throw an error below
-    /* eslint-disable no-console */
-    console.error('JSON parsing failed:', error);
-  }
-
-  // Throw error if the input is not an array or undefined
-  throw new Error('Invalid value: Input must be an array or undefined');
-}
-
-/**
- * Compare two arrays for equality.
- * @private
- * @param {Array} arr1 - First array to compare.
- * @param {Array} arr2 - Second array to compare.
- * @returns {boolean} True if arrays are equal.
- */
-function arraysAreEqual$1(arr1, arr2) {
-  // If both arrays undefined, they are equal (true)
-  if (arr1 === undefined || arr2 === undefined) {
-    return arr1 === arr2;
-  }
-
-  // If arrays have different lengths, they are not equal
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-
-  // If every item at each index is the same, return true
-  for (let index = 0; index < arr1.length; index += 1) {
-    if (arr1[index] !== arr2[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Compares array for changes.
- * @private
- * @param {Array|any} newVal - New value to compare.
- * @param {Array|any} oldVal - Old value to compare.
- * @returns {boolean} True if arrays have changed.
- */
-function arrayOrUndefinedHasChanged$1(newVal, oldVal) {
-  try {
-    // Check if values are undefined or arrays
-    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
-
-    // If non-array or non-undefined, throw error
-    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
-      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
-      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
-    }
-
-    // Return true if arrays have changed, false if they are the same
-    return !arraysAreEqual$1(newVal, oldVal);
-  } catch (error) {
-    /* eslint-disable no-console */
-    console.error(error);
-    // If validation fails, it has changed
-    return true;
-  }
-}
-
-i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
-
-i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
-
-i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
-
-i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
-
-i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
-
 var styleCss$3 = i$5`.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}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}[auro-input]::part(wrapper):focus-within{border-bottom-width:0 !important;box-shadow:unset !important;outline:unset !important}#slotHolder{display:none}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
@@ -12912,11 +12796,10 @@ class AuroCombobox extends i$2 {
 
       /**
        * Specifies the current selected option.
+       * @type {HTMLElement}
        */
       optionSelected: {
-        type: Object,
-        converter: arrayConverter$1,
-        hasChanged: arrayOrUndefinedHasChanged$1
+        type: Object
       },
 
       /**
@@ -12988,11 +12871,10 @@ class AuroCombobox extends i$2 {
 
       /**
        * Value selected for the dropdown menu.
-       * @type {Array|String<Array>}
+       * @type {string}
        */
       value: {
-        converter: arrayConverter$1,
-        hasChanged: arrayOrUndefinedHasChanged$1
+        type: Object
       },
 
       /**
@@ -13064,17 +12946,15 @@ class AuroCombobox extends i$2 {
 
     if (this.menu.optionSelected) {
       // Get first option since combobox is single-select
-      const [selected] = this.menu.optionSelected;
+      const selected = this.menu.optionSelected;
 
-      if (!this.optionSelected || this.optionSelected[0] !== selected) {
-        // Store as array
-        this.optionSelected = [selected];
+      if (!this.optionSelected || this.optionSelected !== selected) {
+        this.optionSelected = selected;
       }
 
-      if (!this.value || this.value[0] !== selected.value) {
-        // Store as array
-        this.value = [selected.value];
-        // Menu already expects array
+      if (!this.value || this.value !== selected.value) {
+        this.value = selected.value;
+
         this.menu.value = this.value;
       }
 
@@ -13254,14 +13134,14 @@ class AuroCombobox extends i$2 {
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', () => {
       if (this.menu.optionSelected) {
-        const [selected] = this.menu.optionSelected;
+        const selected = this.menu.optionSelected;
 
-        if (!this.optionSelected || this.optionSelected[0] !== selected) {
-          this.optionSelected = [selected];
+        if (!this.optionSelected || this.optionSelected !== selected) {
+          this.optionSelected = selected;
         }
 
-        if (!this.value || this.value[0] !== this.optionSelected[0].value) {
-          this.value = [this.optionSelected[0].value];
+        if (!this.value || this.value !== this.optionSelected.value) {
+          this.value = this.optionSelected.value;
           this.menu.value = this.value;
         }
 
@@ -13363,11 +13243,6 @@ class AuroCombobox extends i$2 {
       if (document.activeElement !== this) {
         this.validate();
       }
-
-      // Set to undefined if empty
-      if (this.value && this.value.length === 0) {
-        this.value = undefined;
-      }
     });
 
     // Handle validation messages from auroFormElement-validated event
@@ -13462,10 +13337,8 @@ class AuroCombobox extends i$2 {
 
     let hasChange = false;
 
-    // Store value as array or undefined
-    if (!this.value || this.value[0] !== this.input.value) {
-      // Menu expects an array
-      this.menu.value = this.input.value ? [this.input.value] : undefined;
+    if (!this.value || this.value !== this.input.value) {
+      this.menu.value = this.input.value;
       this.value = this.menu.value;
       hasChange = true;
       this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
@@ -13475,7 +13348,7 @@ class AuroCombobox extends i$2 {
       }));
     }
 
-    if (this.optionSelected && this.optionSelected[0] && this.input.value !== this.optionSelected[0].textContent) {
+    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
       this.optionSelected = undefined;
       hasChange = true;
     }
@@ -13618,15 +13491,15 @@ class AuroCombobox extends i$2 {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
       if (this.value) {
-        if (this.optionSelected && this.optionSelected[0] && this.optionSelected[0].value === this.value[0]) {
+        if (this.optionSelected && this.optionSelected.value === this.value) {
           // If value updates and the previously selected option already matches the new value
           // just update the input value to use the textContent of the optionSelected
-          this.input.value = this.optionSelected[0].textContent;
+          this.input.value = this.optionSelected.textContent;
         } else {
           // Otherwise just enter the value into the input
           this.optionSelected = undefined;
-          // Use first value since combobox is single-select
-          const [inputValue] = this.value;
+
+          const inputValue = this.value;
           this.input.value = inputValue;
 
           // Update the menu value and matchWord
@@ -13784,102 +13657,6 @@ var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-b
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
-// ---------------------------------------------------------------------
-
-/**
- * Converts value to an array.
- * If the value is a JSON string representing an array, it will be parsed.
- * If the value is already an array, it is returned.
- * If the value is undefined, it returns undefined.
- * @private
- * @param {any} value - The value to be converted. Can be a string, array, or undefined.
- * @returns {Array|undefined} - The converted array or undefined.
- * @throws {Error} - Throws an error if the value is not an array, undefined,
- * or if the value cannot be parsed into an array from a JSON string.
- */
-function arrayConverter(value) {
-  // Allow undefined
-  if (value === undefined) {
-    return undefined;
-  }
-
-  // Return the value if it is already an array
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  try {
-    // If value is a JSON string, parse it
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-
-    // Check if the parsed value is an array
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-  } catch (error) {
-    // If JSON parsing fails, continue to throw an error below
-    /* eslint-disable no-console */
-    console.error('JSON parsing failed:', error);
-  }
-
-  // Throw error if the input is not an array or undefined
-  throw new Error('Invalid value: Input must be an array or undefined');
-}
-
-/**
- * Compare two arrays for equality.
- * @private
- * @param {Array} arr1 - First array to compare.
- * @param {Array} arr2 - Second array to compare.
- * @returns {boolean} True if arrays are equal.
- */
-function arraysAreEqual(arr1, arr2) {
-  // If both arrays undefined, they are equal (true)
-  if (arr1 === undefined || arr2 === undefined) {
-    return arr1 === arr2;
-  }
-
-  // If arrays have different lengths, they are not equal
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-
-  // If every item at each index is the same, return true
-  for (let index = 0; index < arr1.length; index += 1) {
-    if (arr1[index] !== arr2[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Compares array for changes.
- * @private
- * @param {Array|any} newVal - New value to compare.
- * @param {Array|any} oldVal - Old value to compare.
- * @returns {boolean} True if arrays have changed.
- */
-function arrayOrUndefinedHasChanged(newVal, oldVal) {
-  try {
-    // Check if values are undefined or arrays
-    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
-
-    // If non-array or non-undefined, throw error
-    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
-      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
-      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
-    }
-
-    // Return true if arrays have changed, false if they are the same
-    return !arraysAreEqual(newVal, oldVal);
-  } catch (error) {
-    /* eslint-disable no-console */
-    console.error(error);
-    // If validation fails, it has changed
-    return true;
-  }
-}
 
 /**
  * Validates if an option can be interacted with.
@@ -13913,7 +13690,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
   element.dispatchEvent(new CustomEvent(eventName, eventConfig));
 }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -13921,14 +13698,14 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
  * @attr {object} optionactive - Specifies the current active menuOption.
  * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
  * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -13941,7 +13718,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines */
+/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
 
 class AuroMenu extends i$2 {
   constructor() {
@@ -14021,9 +13798,8 @@ class AuroMenu extends i$2 {
         reflect: true
       },
       optionSelected: {
-        // Allow HTMLElement[] arrays and undefined
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
       },
       optionActive: {
         type: Object,
@@ -14039,10 +13815,8 @@ class AuroMenu extends i$2 {
         attribute: 'multiselect'
       },
       value: {
-        // Allow string[] arrays and undefined
-        type: Object,
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow string, string[] arrays and undefined
+        type: Object
       }
     };
   }
@@ -14095,30 +13869,39 @@ class AuroMenu extends i$2 {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('multiSelect')) {
+      // Reset selection if multiSelect mode changes
+      this.clearSelection();
+    }
+
     if (changedProperties.has('value')) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.optionSelected = undefined;
-        // Reset index tracking
         this.index = -1;
       } else {
-        // Convert single values to arrays
-        const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+        if (this.multiSelect) {
+          // In multiselect mode, this.value should be an array of strings
+          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
-        // Find all matching options
-        const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
+          this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
+        } else {
+          // In single-select mode, this.value should be a string
+          const matchingOptions = this.items.find((item) => item.value === this.value);
 
-        if (matchingOptions.length > 0) {
-          if (this.multiSelect) {
-            // For multiselect, keep all matching options
+          if (matchingOptions) {
             this.optionSelected = matchingOptions;
+            this.index = this.items.indexOf(matchingOptions);
           } else {
-            // For single select, only use the first match
-            this.optionSelected = [matchingOptions[0]];
-            this.index = this.items.indexOf(matchingOptions[0]);
+            // If no matching option found, reset selection
+            this.optionSelected = undefined;
+            this.index = -1;
           }
-        } else {
-          // No matches found - trigger failure event
+        }
+
+        // If no matching options were found in either mode
+        if (!this.optionSelected || (Array.isArray(this.optionSelected) && this.optionSelected.length === 0)) {
           dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
           this.optionSelected = undefined;
           this.index = -1;
@@ -14270,8 +14053,8 @@ class AuroMenu extends i$2 {
       }
     } else {
       // Single select - use arrays with single values
-      this.value = [option.value];
-      this.optionSelected = [option];
+      this.value = option.value;
+      this.optionSelected = option;
     }
 
     this.index = this.items.indexOf(option);
@@ -14593,8 +14376,13 @@ class AuroMenu extends i$2 {
     if (!this.optionSelected) {
       return false;
     }
-    // Always treat as array for both single and multi-select
-    return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
+
+    if (this.multiSelect) {
+      // In multi-select mode, check if the option is in the selected array
+      return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
+    }
+
+    return this.optionSelected === option;
   }
 
   /**

package/components/combobox/demo/index.html

@@ -46,6 +46,7 @@
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./index.min.js"