@aurodesignsystem-dev/auro-formkit 0.0.0-pr1541.4 → 0.0.0-pr1542.0

package/components/menu/demo/voiceover.md

@@ -20,7 +20,7 @@
 </ol>
 <div class="note"><strong>Note:</strong> <code>&lt;auro-menuoption&gt;</code> is not directly focusable — <code>tabindex="-1"</code> keeps it out of the tab order. In a select or combobox context, focus stays on the parent trigger and the active option is pointed at via <code>aria-activedescendant</code> (using <code>ariaActiveDescendantElement</code> to cross the shadow-root boundary).</div>
 <auro-header level="3" id="voiceOverSelection">Selection</auro-header>
-<p>When an option is selected via Enter (or Tab, which selects and moves focus out of the menu):</p>
+<p>When an option is selected via Enter or Space:</p>
 <ul>
 <li>VoiceOver announces the option label followed by <em>"selected"</em></li>
 <li>In multi-select mode, previously selected options remain selected and their state is preserved</li>
@@ -29,8 +29,8 @@
 <ol>
 <li><strong>Enter the menu:</strong> Focus moves into the listbox; VoiceOver announces role and item count</li>
 <li><strong>Navigate options:</strong> Use Arrow Down/Up keys; VoiceOver announces each option's label, role, and position</li>
-<li><strong>Select an option:</strong> Press Enter; VoiceOver confirms the selection</li>
-<li><strong>Exit:</strong> Tab out of the menu (Tab also selects the active option). When the menu is used inside a dropdown context, the parent handles Escape.</li>
+<li><strong>Select an option:</strong> Press Enter or Space; VoiceOver confirms the selection</li>
+<li><strong>Exit:</strong> Tab out of the menu or press Escape (when used within a dropdown context)</li>
 </ol>
 <auro-header level="2" id="voiceOverNestedMenus">Nested Menus</auro-header>
 <p>When a nested <code>auro-menu</code> is encountered, VoiceOver announces a new listbox context. Each nested menu maintains its own option count and position tracking.</p>

package/components/menu/demo/why-menu.md

@@ -4,7 +4,7 @@
 <p>Custom list implementations often fail to provide correct ARIA semantics, keyboard navigation, or screen reader announcements.</p>
 <p><code>auro-menu</code> provides:</p>
 <ul>
-<li><strong>Keyboard navigation</strong> — Arrow Up/Down move the active option; Enter selects it; Tab selects and moves focus out of the menu.</li>
+<li><strong>Keyboard navigation</strong> — Arrow keys move between options, Enter selects, Escape cancels, Home/End jump to the first and last options.</li>
 <li><strong>Active option tracking</strong> — The currently highlighted option is tracked programmatically, enabling <code>aria-activedescendant</code> patterns in parent components like <code>auro-select</code> and <code>auro-combobox</code>.</li>
 <li><strong>Multi-select semantics</strong> — When <code>multiSelect</code> is enabled, <code>aria-multiselectable</code> is set on the menu.</li>
 <li><strong>Loading state</strong> — <code>aria-busy</code> is set during loading, with customizable loading icon and text slots.</li>
@@ -24,14 +24,15 @@
 <ul>
 <li>Checkmark indicators for each selected option</li>
 <li>A <code>value</code> that returns a JSON-stringified array of selections</li>
-<li>Click-to-toggle behavior that deselects an already-selected option</li>
-<li><code>reset()</code> method for programmatic control</li>
+<li><code>allowDeselect</code> to toggle selections off</li>
+<li><code>selectAllMatchingOptions</code> for bulk selection operations</li>
+<li><code>clearSelection()</code> and <code>reset()</code> methods for programmatic control</li>
 </ul>
 <auro-header level="2" id="searchAndFiltering">Search and filtering</auro-header>
 <p>Native menus have no concept of filtering or highlighting matched text.</p>
 <p><code>auro-menu</code> supports:</p>
 <ul>
-<li><auro-hyperlink href="customize#matchWord"><code>matchWord</code></auro-hyperlink> to highlight matching portions of option text as the user types (used by <code>auro-combobox</code> for real-time filtering)</li>
+<li><code>matchWord</code> to highlight matching portions of option text as the user types (used by <code>auro-combobox</code> for real-time filtering)</li>
 <li>Programmatic <code>navigateOptions(direction)</code> for keyboard-driven traversal</li>
 </ul>
 <auro-header level="2" id="loadingState">Loading state</auro-header>
@@ -87,7 +88,7 @@
 <tr>
 <td>Keyboard navigation</td>
 <td>Browser-dependent</td>
-<td>Arrow Up/Down, Enter, Tab</td>
+<td>Full arrow/Enter/Escape/Home/End</td>
 </tr>
 <tr>
 <td>Composable primitive</td>
@@ -95,9 +96,9 @@
 <td>Foundation for select and combobox</td>
 </tr>
 <tr>
-<td>Multi-select deselect</td>
-<td>Ctrl+click list box</td>
-<td>Click-to-toggle in multi-select</td>
+<td>Deselect support</td>
+<td>No</td>
+<td><code>allowDeselect</code> attribute</td>
 </tr>
 </tbody>
 </table>

package/components/menu/dist/auro-menu-utils.d.ts

@@ -10,15 +10,6 @@
  * or if the value cannot be parsed into an array from a JSON string.
  */
 export function arrayConverter(value: any): any[] | undefined;
-/**
- * Serializes a multi-select value array back into the String `value` property.
- * An empty (or missing) array collapses to `undefined` so an emptied selection
- * clears `value` rather than reflecting a `"[]"` attribute.
- * @private
- * @param {Array<string>|undefined} values - The selected values.
- * @returns {string|undefined} JSON string of the values, or undefined when empty.
- */
-export function serializeMultiSelectValue(values: Array<string> | undefined): string | undefined;
 /**
  * Compare two arrays for equality.
  * @private
@@ -34,16 +25,6 @@ export function arraysAreEqual(arr1: any[], arr2: any[]): boolean;
  * @returns {boolean} True if option is interactive.
  */
 export function isOptionInteractive(option: HTMLElement): boolean;
-/**
- * Validates if an option may be selected by matching a programmatic value.
- * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
- * `hidden` as its type-ahead filter, so a filtered-out option is still a
- * valid programmatic selection. Only disabled and static options — which are
- * never selectable — are rejected.
- * @param {HTMLElement} option - The option to check.
- * @returns {boolean} True if option can be selected by value.
- */
-export function isSelectableByValue(option: HTMLElement): boolean;
 /**
  * Helper method to dispatch custom events.
  * @param {HTMLElement} element - Element to dispatch event from.

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

@@ -60,17 +60,21 @@ export class AuroMenu extends AuroElement {
             reflect: boolean;
             attribute: string;
         };
+        /**
+         * Specifies the current active menuOption.
+         */
         optionActive: {
             type: ObjectConstructor;
             attribute: string;
         };
+        /**
+         * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
+         */
         optionSelected: {
             type: ObjectConstructor;
-            attribute: boolean;
         };
         /**
          * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
-         * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
          */
         value: {
             type: StringConstructor;
@@ -167,7 +171,7 @@ export class AuroMenu extends AuroElement {
      */
     private get formattedValue();
     /**
-     * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
+     * Selects options by value.
      * @param {string|string[]|undefined|null} value - The value(s) to select.
      * @public
      */

package/components/menu/dist/auro-menuoption.d.ts

@@ -2,7 +2,6 @@
  * The `auro-menuoption` element provides users a way to define a menu option.
  * @customElement auro-menuoption
  *
- * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
  * @slot default - The default slot for the menu option text.
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -14,11 +13,6 @@ export class AuroMenuOption extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
-         *
-         * @deprecated Use the `value` attribute on `auro-menu` instead.
-         */
         selected: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -51,11 +45,6 @@ export class AuroMenuOption extends AuroElement {
             reflect: boolean;
             attribute: string;
         };
-        /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
-        persistent: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         layout: {
             type: StringConstructor;
             attribute: string;
@@ -85,7 +74,6 @@ export class AuroMenuOption extends AuroElement {
     noCheckmark: boolean;
     disabled: boolean;
     noMatch: boolean;
-    persistent: boolean;
     /**
      * @private
      */

package/components/menu/dist/index.js

@@ -241,18 +241,6 @@ function arrayConverter(value) {
   throw new Error('Invalid value: Input must be an array or undefined');
 }
 
-/**
- * Serializes a multi-select value array back into the String `value` property.
- * An empty (or missing) array collapses to `undefined` so an emptied selection
- * clears `value` rather than reflecting a `"[]"` attribute.
- * @private
- * @param {Array<string>|undefined} values - The selected values.
- * @returns {string|undefined} JSON string of the values, or undefined when empty.
- */
-function serializeMultiSelectValue(values) {
-  return values && values.length > 0 ? JSON.stringify(values) : undefined;
-}
-
 /**
  * Validates if an option can be interacted with.
  * @private
@@ -265,20 +253,6 @@ function isOptionInteractive(option) {
          !option.hasAttribute('static');
 }
 
-/**
- * Validates if an option may be selected by matching a programmatic value.
- * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
- * `hidden` as its type-ahead filter, so a filtered-out option is still a
- * valid programmatic selection. Only disabled and static options — which are
- * never selectable — are rejected.
- * @param {HTMLElement} option - The option to check.
- * @returns {boolean} True if option can be selected by value.
- */
-function isSelectableByValue(option) {
-  return !option.hasAttribute('disabled') &&
-         !option.hasAttribute('static');
-}
-
 /**
  * Helper method to dispatch custom events.
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -448,7 +422,6 @@ class AuroMenu extends AuroElement {
 
       /**
        * Specifies the current active menuOption.
-       * @readonly
        */
       optionActive: {
         type: Object,
@@ -456,18 +429,15 @@ class AuroMenu extends AuroElement {
       },
 
       /**
-       * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
-       * @readonly
+       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
        */
       optionSelected: {
         // Allow HTMLElement, HTMLElement[] arrays and undefined
-        type: Object,
-        attribute: false
+        type: Object
       },
 
       /**
        * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
-       * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
        */
       value: {
         type: String,
@@ -591,7 +561,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
+   * Selects options by value.
    * @param {string|string[]|undefined|null} value - The value(s) to select.
    * @public
    */
@@ -676,11 +646,6 @@ class AuroMenu extends AuroElement {
         this.initItems();
       }
 
-      // Set when reconciliation reassigns `value` below. That reassignment schedules a
-      // second updated() cycle, so the `event`-attribute dispatch is deferred to that
-      // cycle to avoid firing option custom events twice on the same selection.
-      let valueReconciled = false;
-
       // Handle null/undefined/empty case — empty/whitespace strings clear selection
       // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
       if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -693,31 +658,11 @@ class AuroMenu extends AuroElement {
           // Defensive default: `formattedValue` can be undefined for unexpected value types,
           // and calling `.includes` on undefined would throw during reconciliation.
           const valueArray = this.formattedValue || [];
-          const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
+          const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
           newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
-
-          // Reconcile `value` with the selectable set. Drop only entries whose option is
-          // loaded but non-selectable (disabled/static) — leaving them would desync `value`
-          // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
-          // so the rejected entry would resurface on the next select/deselect. Entries with no
-          // matching item yet are preserved so async preselection still works once options render.
-          const rejectedValues = this.items
-            ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
-            : [];
-          if (rejectedValues.length > 0) {
-            const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
-            this.value = serializeMultiSelectValue(reconciled);
-            valueReconciled = true;
-          }
         } else {
-          // In single-select mode, this.value should be a string. Reject
-          // disabled/static options so a programmatic value pointing at a
-          // non-selectable option falls through to the no-match path below
-          // (dispatching auroMenu-selectValueFailure) instead of pinning it.
-          // `hidden` is intentionally NOT excluded: the combobox toggles
-          // `hidden` as its type-ahead filter, so a filtered-out option is
-          // still a valid programmatic selection.
-          const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
+          // In single-select mode, this.value should be a string
+          const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
 
           if (matchingOption) {
             newSelected = matchingOption;
@@ -759,9 +704,8 @@ class AuroMenu extends AuroElement {
         ]
       ]));
 
-      // Notify of changes. Skip when reconciliation just reassigned `value`: the
-      // follow-on update cycle re-runs this branch and fires the events exactly once.
-      if (this.optionSelected !== undefined && !valueReconciled) {
+      // Notify of changes
+      if (this.optionSelected !== undefined) {
         const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
         selected.forEach((opt) => {
           if (opt.hasAttribute('event')) {
@@ -974,7 +918,7 @@ class AuroMenu extends AuroElement {
       const currentSelected = this.optionSelected || [];
 
       if (!currentValue.includes(option.value)) {
-        this.value = serializeMultiSelectValue([
+        this.value = JSON.stringify([
           ...currentValue,
           option.value
         ]);
@@ -1000,9 +944,15 @@ class AuroMenu extends AuroElement {
    */
   handleDeselectState(option) {
     if (this.multiSelect) {
-      // Remove this option from array; an empty result collapses `value` to undefined.
+      // Remove this option from array
       const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
-      this.value = serializeMultiSelectValue(newFormattedValue);
+
+      // If array is empty after removal, set back to undefined
+      if (newFormattedValue && newFormattedValue.length === 0) {
+        this.value = undefined;
+      } else {
+        this.value = JSON.stringify(newFormattedValue);
+      }
 
       this.optionSelected = this.optionSelected.filter((val) => val !== option);
       if (this.optionSelected.length === 0) {
@@ -1049,11 +999,6 @@ class AuroMenu extends AuroElement {
     this.optionSelected = undefined;
     this._index = -1;
 
-    // Clear active option state so a follow-up open/navigation starts fresh
-    // rather than reusing a stale reference from before the reset.
-    this.items?.forEach((item) => item.classList.remove('active'));
-    this.optionActive = undefined;
-
     // Reset UI state
     this.updateItemsState(new Map([
       [
@@ -1503,7 +1448,6 @@ let menuOptionIdCounter = 0;
  * The `auro-menuoption` element provides users a way to define a menu option.
  * @customElement auro-menuoption
  *
- * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
  * @slot default - The default slot for the menu option text.
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -1533,7 +1477,6 @@ class AuroMenuOption extends AuroElement {
     this.noCheckmark = false;
     this.disabled = false;
     this.noMatch = false;
-    this.persistent = false;
 
     /**
      * @private
@@ -1555,12 +1498,6 @@ class AuroMenuOption extends AuroElement {
         type: Boolean,
         reflect: true
       },
-
-      /**
-       * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
-       *
-       * @deprecated Use the `value` attribute on `auro-menu` instead.
-       */
       selected: {
         type: Boolean,
         reflect: true
@@ -1595,12 +1532,6 @@ class AuroMenuOption extends AuroElement {
         reflect: true,
         attribute: 'nomatch'
       },
-
-      /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
-      persistent: {
-        type: Boolean,
-        reflect: true
-      },
     };
   }
 

package/components/menu/dist/registered.js

@@ -200,18 +200,6 @@ class AuroLibraryRuntimeUtils {
 // See LICENSE in the project root for license information.
 
 
-/**
- * Serializes a multi-select value array back into the String `value` property.
- * An empty (or missing) array collapses to `undefined` so an emptied selection
- * clears `value` rather than reflecting a `"[]"` attribute.
- * @private
- * @param {Array<string>|undefined} values - The selected values.
- * @returns {string|undefined} JSON string of the values, or undefined when empty.
- */
-function serializeMultiSelectValue(values) {
-  return values && values.length > 0 ? JSON.stringify(values) : undefined;
-}
-
 /**
  * Validates if an option can be interacted with.
  * @private
@@ -224,20 +212,6 @@ function isOptionInteractive(option) {
          !option.hasAttribute('static');
 }
 
-/**
- * Validates if an option may be selected by matching a programmatic value.
- * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
- * `hidden` as its type-ahead filter, so a filtered-out option is still a
- * valid programmatic selection. Only disabled and static options — which are
- * never selectable — are rejected.
- * @param {HTMLElement} option - The option to check.
- * @returns {boolean} True if option can be selected by value.
- */
-function isSelectableByValue(option) {
-  return !option.hasAttribute('disabled') &&
-         !option.hasAttribute('static');
-}
-
 /**
  * Helper method to dispatch custom events.
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -407,7 +381,6 @@ class AuroMenu extends AuroElement {
 
       /**
        * Specifies the current active menuOption.
-       * @readonly
        */
       optionActive: {
         type: Object,
@@ -415,18 +388,15 @@ class AuroMenu extends AuroElement {
       },
 
       /**
-       * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
-       * @readonly
+       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
        */
       optionSelected: {
         // Allow HTMLElement, HTMLElement[] arrays and undefined
-        type: Object,
-        attribute: false
+        type: Object
       },
 
       /**
        * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
-       * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
        */
       value: {
         type: String,
@@ -550,7 +520,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
+   * Selects options by value.
    * @param {string|string[]|undefined|null} value - The value(s) to select.
    * @public
    */
@@ -635,11 +605,6 @@ class AuroMenu extends AuroElement {
         this.initItems();
       }
 
-      // Set when reconciliation reassigns `value` below. That reassignment schedules a
-      // second updated() cycle, so the `event`-attribute dispatch is deferred to that
-      // cycle to avoid firing option custom events twice on the same selection.
-      let valueReconciled = false;
-
       // Handle null/undefined/empty case — empty/whitespace strings clear selection
       // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
       if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -652,31 +617,11 @@ class AuroMenu extends AuroElement {
           // Defensive default: `formattedValue` can be undefined for unexpected value types,
           // and calling `.includes` on undefined would throw during reconciliation.
           const valueArray = this.formattedValue || [];
-          const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
+          const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
           newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
-
-          // Reconcile `value` with the selectable set. Drop only entries whose option is
-          // loaded but non-selectable (disabled/static) — leaving them would desync `value`
-          // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
-          // so the rejected entry would resurface on the next select/deselect. Entries with no
-          // matching item yet are preserved so async preselection still works once options render.
-          const rejectedValues = this.items
-            ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
-            : [];
-          if (rejectedValues.length > 0) {
-            const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
-            this.value = serializeMultiSelectValue(reconciled);
-            valueReconciled = true;
-          }
         } else {
-          // In single-select mode, this.value should be a string. Reject
-          // disabled/static options so a programmatic value pointing at a
-          // non-selectable option falls through to the no-match path below
-          // (dispatching auroMenu-selectValueFailure) instead of pinning it.
-          // `hidden` is intentionally NOT excluded: the combobox toggles
-          // `hidden` as its type-ahead filter, so a filtered-out option is
-          // still a valid programmatic selection.
-          const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
+          // In single-select mode, this.value should be a string
+          const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
 
           if (matchingOption) {
             newSelected = matchingOption;
@@ -718,9 +663,8 @@ class AuroMenu extends AuroElement {
         ]
       ]));
 
-      // Notify of changes. Skip when reconciliation just reassigned `value`: the
-      // follow-on update cycle re-runs this branch and fires the events exactly once.
-      if (this.optionSelected !== undefined && !valueReconciled) {
+      // Notify of changes
+      if (this.optionSelected !== undefined) {
         const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
         selected.forEach((opt) => {
           if (opt.hasAttribute('event')) {
@@ -933,7 +877,7 @@ class AuroMenu extends AuroElement {
       const currentSelected = this.optionSelected || [];
 
       if (!currentValue.includes(option.value)) {
-        this.value = serializeMultiSelectValue([
+        this.value = JSON.stringify([
           ...currentValue,
           option.value
         ]);
@@ -959,9 +903,15 @@ class AuroMenu extends AuroElement {
    */
   handleDeselectState(option) {
     if (this.multiSelect) {
-      // Remove this option from array; an empty result collapses `value` to undefined.
+      // Remove this option from array
       const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
-      this.value = serializeMultiSelectValue(newFormattedValue);
+
+      // If array is empty after removal, set back to undefined
+      if (newFormattedValue && newFormattedValue.length === 0) {
+        this.value = undefined;
+      } else {
+        this.value = JSON.stringify(newFormattedValue);
+      }
 
       this.optionSelected = this.optionSelected.filter((val) => val !== option);
       if (this.optionSelected.length === 0) {
@@ -1008,11 +958,6 @@ class AuroMenu extends AuroElement {
     this.optionSelected = undefined;
     this._index = -1;
 
-    // Clear active option state so a follow-up open/navigation starts fresh
-    // rather than reusing a stale reference from before the reset.
-    this.items?.forEach((item) => item.classList.remove('active'));
-    this.optionActive = undefined;
-
     // Reset UI state
     this.updateItemsState(new Map([
       [
@@ -1462,7 +1407,6 @@ let menuOptionIdCounter = 0;
  * The `auro-menuoption` element provides users a way to define a menu option.
  * @customElement auro-menuoption
  *
- * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
  * @slot default - The default slot for the menu option text.
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -1492,7 +1436,6 @@ class AuroMenuOption extends AuroElement {
     this.noCheckmark = false;
     this.disabled = false;
     this.noMatch = false;
-    this.persistent = false;
 
     /**
      * @private
@@ -1514,12 +1457,6 @@ class AuroMenuOption extends AuroElement {
         type: Boolean,
         reflect: true
       },
-
-      /**
-       * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
-       *
-       * @deprecated Use the `value` attribute on `auro-menu` instead.
-       */
       selected: {
         type: Boolean,
         reflect: true
@@ -1554,12 +1491,6 @@ class AuroMenuOption extends AuroElement {
         reflect: true,
         attribute: 'nomatch'
       },
-
-      /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
-      persistent: {
-        type: Boolean,
-        reflect: true
-      },
     };
   }
 

package/components/radio/demo/customize.min.js

@@ -1227,7 +1227,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607082038';
+var formkitVersion = '202607082142';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/demo/getting-started.min.js

@@ -1227,7 +1227,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607082038';
+var formkitVersion = '202607082142';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1227,7 +1227,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607082038';
+var formkitVersion = '202607082142';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/index.js

@@ -1166,7 +1166,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202607082038';
+var formkitVersion = '202607082142';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/registered.js

@@ -1166,7 +1166,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202607082038';
+var formkitVersion = '202607082142';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.