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

package/components/menu/demo/getting-started.md

@@ -22,13 +22,10 @@
 <auro-anchorlink fluid href="#options" class="level2 body-xs">options</auro-anchorlink>
 <auro-anchorlink fluid href="#index" class="level2 body-xs">index</auro-anchorlink>
 <auro-anchorlink fluid href="#functions">Functions</auro-anchorlink>
+<auro-anchorlink fluid href="#makeSelection" class="level2 body-xs">makeSelection()</auro-anchorlink>
 <auro-anchorlink fluid href="#reset" class="level2 body-xs">reset()</auro-anchorlink>
-<auro-anchorlink fluid href="#selectByValue" class="level2 body-xs">selectByValue()</auro-anchorlink>
 <auro-anchorlink fluid href="#updateActiveOption" class="level2 body-xs">updateActiveOption()</auro-anchorlink>
 <auro-anchorlink fluid href="#navigateOptions" class="level2 body-xs">navigateOptions()</auro-anchorlink>
-<auro-anchorlink fluid href="#events">Events</auro-anchorlink>
-<auro-anchorlink fluid href="#eventList" class="level2 body-xs">Event List</auro-anchorlink>
-<auro-anchorlink fluid href="#eventAttribute" class="level2 body-xs">Option event attribute</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -296,7 +293,7 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
 <auro-header level="2" id="stateManagement">State Management</auro-header>
 <p>The following properties reflect the current state of the menu and can be accessed via JavaScript.</p>
 <auro-header level="3" id="value">value</auro-header>
-<p>Gets or sets the selected value. In multi-select mode, this is a JSON stringified array of selected option values (e.g., <code>'["stops","duration"]'</code>). If the value matches an option marked <code>disabled</code> or <code>static</code>, the selection is cleared (<code>optionSelected</code> becomes <code>undefined</code>) and <code>auroMenu-selectValueFailure</code> is dispatched. <code>hidden</code> options remain selectable by value.</p>
+<p>Gets or sets the selected value. In multi-select mode, this is a JSON stringified array of selected option values (e.g., <code>'["stops","duration"]'</code>).</p>
 <auro-header level="3" id="optionSelected">optionSelected</auro-header>
 <p>Returns the currently selected <code>&lt;auro-menuoption&gt;</code> element, or <code>undefined</code> if no option is selected. When <code>multiSelect</code> is enabled, returns an array of selected elements.</p>
 <auro-header level="3" id="optionActive">optionActive</auro-header>
@@ -311,148 +308,14 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
 <section>
 <auro-header level="2" id="functions">Functions</auro-header>
 <p>The following public methods are available on the <code>&lt;auro-menu&gt;</code> element.</p>
+<auro-header level="3" id="makeSelection">makeSelection()</auro-header>
+<p>Selects the currently active menu option. This is the programmatic equivalent of clicking on an option or pressing Enter while an option is focused.</p>
 <auro-header level="3" id="reset">reset()</auro-header>
 <p>Resets the menu to its initial state, clearing all selected options and restoring the value to <code>undefined</code>.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset.html) -->
-<!-- The below content is automatically added from ./../apiExamples/reset.html -->
-<auro-menu id="resetExample" value="duration">
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-</auro-menu>
-<br/><br/>
-<auro-button id="resetExampleBtn">RESET</auro-button>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/reset.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu id="resetExample" value="duration"&gt;
-  &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;
-&lt;br/&gt;&lt;br/&gt;
-&lt;auro-button id="resetExampleBtn"&gt;RESET&lt;/auro-button&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="selectByValue">selectByValue(value)</auro-header>
-<p>Selects the option(s) whose <code>value</code> matches the argument. Accepts a string in single-select mode or an array of strings in multi-select mode; passing <code>undefined</code>, <code>null</code>, an empty string, or an empty array clears the selection.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/select-by-value.html) -->
-<!-- The below content is automatically added from ./../apiExamples/select-by-value.html -->
-<auro-menu id="selectByValueMenu">
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-</auro-menu>
-<br />
-<auro-button id="selectByValueStops">Select "Stops"</auro-button>
-<auro-button id="selectByValueDuration">Select "Duration"</auro-button>
-<auro-button id="selectByValueClear">Clear selection</auro-button>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/select-by-value.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/select-by-value.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu id="selectByValueMenu"&gt;
-  &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;
-&lt;br /&gt;
-&lt;auro-button id="selectByValueStops"&gt;Select "Stops"&lt;/auro-button&gt;
-&lt;auro-button id="selectByValueDuration"&gt;Select "Duration"&lt;/auro-button&gt;
-&lt;auro-button id="selectByValueClear"&gt;Clear selection&lt;/auro-button&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="updateActiveOption">updateActiveOption(indexOrOption)</auro-header>
-<p>Sets the specified option as the currently active (highlighted) option. Accepts either a numeric index into <code>options</code> or an <code>&lt;auro-menuoption&gt;</code> element reference.</p>
+<auro-header level="3" id="updateActiveOption">updateActiveOption(option)</auro-header>
+<p>Sets the specified <code>&lt;auro-menuoption&gt;</code> element as the currently active (highlighted) option.</p>
 <auro-header level="3" id="navigateOptions">navigateOptions(direction)</auro-header>
-<p>Moves the active option to the next or previous option. Accepts <code>'up'</code> or <code>'down'</code> as the direction parameter.</p>
-</section>
-<section>
-<auro-header level="2" id="events">Events</auro-header>
-<p>The <code>&lt;auro-menu&gt;</code> element dispatches custom events that consumers can subscribe to via <code>addEventListener</code>. The example below wires listeners for the full event set and logs each firing.</p>
-<auro-header level="3" id="eventList">Event List</auro-header>
-<ul>
-<li><code>auroMenu-selectedOption</code> — a new selection has been made.</li>
-<li><code>auroMenu-activatedOption</code> — the active (highlighted) option changed via keyboard or hover.</li>
-<li><code>auroMenu-optionsChange</code> — the set of available options was updated (e.g., after a slot change).</li>
-<li><code>auroMenu-selectValueReset</code> — the menu's <code>value</code> was reset via <code>reset()</code>.</li>
-<li><code>auroMenu-selectValueFailure</code> — a value selection (via <code>selectByValue()</code>, the <code>value</code> attribute, or setting the <code>value</code> property) found no matching selectable option. This includes values that match an option marked <code>disabled</code> or <code>static</code>, which are never selectable.</li>
-</ul>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/events.html) -->
-<!-- The below content is automatically added from ./../apiExamples/events.html -->
-<auro-menu id="eventsExampleMenu">
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-</auro-menu>
-<br />
-<auro-button id="eventsExampleReset">reset()</auro-button>
-<auro-button id="eventsExampleBadValue">selectByValue("nonexistent")</auro-button>
-<auro-button id="eventsExampleClearLog">Clear log</auro-button>
-        <pre id="eventsExampleLog" style="max-height: 200px; overflow: auto; padding: var(--ds-size-100, 8px); background: var(--ds-color-container-secondary, #f5f5f5); border-radius: 4px;">(interact with the menu above)</pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/events.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/events.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu id="eventsExampleMenu"&gt;
-  &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;
-&lt;br /&gt;
-&lt;auro-button id="eventsExampleReset"&gt;reset()&lt;/auro-button&gt;
-&lt;auro-button id="eventsExampleBadValue"&gt;selectByValue("nonexistent")&lt;/auro-button&gt;
-&lt;auro-button id="eventsExampleClearLog"&gt;Clear log&lt;/auro-button&gt;
-&lt;pre id="eventsExampleLog" style="max-height: 200px; overflow: auto; padding: var(--ds-size-100, 8px); background: var(--ds-color-container-secondary, #f5f5f5); border-radius: 4px;"&gt;(interact with the menu above)&lt;/pre&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="eventAttribute">Option event attribute</auro-header>
-<p>Attach an <code>event</code> attribute to any <code>auro-menuoption</code> to dispatch a named custom event from the menu when that option is selected. The generic <code>auroMenu-customEventFired</code> event is also dispatched on every firing — its <code>detail.option</code> references the option that triggered it, so a single listener can route on the <code>event</code> attribute value.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/event-attribute.html) -->
-<!-- The below content is automatically added from ./../apiExamples/event-attribute.html -->
-<auro-menu id="eventAttrExample">
-<auro-menuoption value="search" event="custom-flight-search">Search flights</auro-menuoption>
-<auro-menuoption value="clear" event="custom-clear-filters">Clear filters</auro-menuoption>
-<auro-menuoption value="save" event="custom-save-preferences">Save preferences</auro-menuoption>
-</auro-menu>
-<p>Last custom event: <output id="eventAttrOutput">(none)</output></p>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/event-attribute.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/event-attribute.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu id="eventAttrExample"&gt;
-  &lt;auro-menuoption value="search" event="custom-flight-search"&gt;Search flights&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="clear" event="custom-clear-filters"&gt;Clear filters&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="save" event="custom-save-preferences"&gt;Save preferences&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;
-&lt;p&gt;Last custom event: &lt;output id="eventAttrOutput"&gt;(none)&lt;/output&gt;&lt;/p&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+<p>Moves the highlight to the next or previous option. Accepts <code>'up'</code> or <code>'down'</code> as the direction parameter.</p>
 </section>
 </div>
 </div>

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

@@ -221,18 +221,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
@@ -245,20 +233,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.
@@ -441,7 +415,6 @@ class AuroMenu extends AuroElement {
 
       /**
        * Specifies the current active menuOption.
-       * @readonly
        */
       optionActive: {
         type: Object,
@@ -449,18 +422,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,
@@ -584,7 +554,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
    */
@@ -669,11 +639,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() === '')) {
@@ -686,31 +651,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;
@@ -752,9 +697,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')) {
@@ -967,7 +911,7 @@ class AuroMenu extends AuroElement {
       const currentSelected = this.optionSelected || [];
 
       if (!currentValue.includes(option.value)) {
-        this.value = serializeMultiSelectValue([
+        this.value = JSON.stringify([
           ...currentValue,
           option.value
         ]);
@@ -993,9 +937,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) {
@@ -1042,11 +992,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([
       [
@@ -1509,7 +1454,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.
@@ -1539,7 +1483,6 @@ class AuroMenuOption extends AuroElement {
     this.noCheckmark = false;
     this.disabled = false;
     this.noMatch = false;
-    this.persistent = false;
 
     /**
      * @private
@@ -1561,12 +1504,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
@@ -1601,12 +1538,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
-      },
     };
   }
 
@@ -1781,103 +1712,6 @@ class AuroMenuOption extends AuroElement {
   }
 }
 
-function auroMenuLoadingExample() {
-  document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
-    document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
-  });
-}
-
-function updateMatch() {
-  let matchWordMenu = document.querySelector('#matchWordMenu');
-
-  matchWordMenu.matchWord = matchWordInput.value;
-}
-
-function auroMenuMatchWordExample() {
-  let matchWordInput = document.querySelector('#matchWordInput');
-
-  matchWordInput.addEventListener('keyup', updateMatch);
-}
-
-function auroMenuResetExample() {
-  const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
-  const resetExampleElem = document.querySelector('#resetExample');
-  
-  if (resetExampleElem && resetExampleBtnElem) {
-    resetExampleBtnElem.addEventListener('click', () => {
-      resetExampleElem.reset();
-    });
-  }
-}
-
-function auroMenuEventAttributeExample() {
-  const menu = document.querySelector('#eventAttrExample');
-  const output = document.querySelector('#eventAttrOutput');
-
-  menu.addEventListener('auroMenu-customEventFired', (evt) => {
-    const eventName = evt.detail.option.getAttribute('event');
-    output.textContent = `${eventName} (from "${evt.detail.option.textContent}")`;
-  });
-}
-
-function auroMenuEventsExample() {
-  const menu = document.querySelector('#eventsExampleMenu');
-  const log = document.querySelector('#eventsExampleLog');
-  const resetBtn = document.querySelector('#eventsExampleReset');
-  const badValueBtn = document.querySelector('#eventsExampleBadValue');
-  const clearBtn = document.querySelector('#eventsExampleClearLog');
-
-  let entries = [];
-  const write = (name, detail) => {
-    const label = detail && detail.tagName ? detail.tagName.toLowerCase() : JSON.stringify(detail);
-    entries.unshift(`${name}: ${label}`);
-    log.textContent = entries.slice(0, 10).join('\n');
-  };
-
-  menu.addEventListener('auroMenu-selectedOption', () => {
-    write('auroMenu-selectedOption', menu.optionSelected);
-  });
-  menu.addEventListener('auroMenu-activatedOption', (evt) => {
-    write('auroMenu-activatedOption', evt.detail);
-  });
-  menu.addEventListener('auroMenu-optionsChange', (evt) => {
-    write('auroMenu-optionsChange', { count: (evt.detail.options || []).length });
-  });
-  menu.addEventListener('auroMenu-selectValueReset', () => {
-    write('auroMenu-selectValueReset', { value: menu.value });
-  });
-  menu.addEventListener('auroMenu-selectValueFailure', (evt) => {
-    write('auroMenu-selectValueFailure', evt.detail);
-  });
-
-  resetBtn.addEventListener('click', () => menu.reset());
-  badValueBtn.addEventListener('click', () => menu.selectByValue('nonexistent'));
-  clearBtn.addEventListener('click', () => {
-    entries = [];
-    log.textContent = '(interact with the menu above)';
-  });
-}
-
-function auroMenuPersistentExample() {
-  const input = document.querySelector('#persistentExampleInput');
-  const menu = document.querySelector('#persistentExampleMenu');
-
-  input.addEventListener('keyup', () => {
-    menu.matchWord = input.value;
-  });
-}
-
-function auroMenuSelectByValueExample() {
-  const menu = document.querySelector('#selectByValueMenu');
-  const stopsBtn = document.querySelector('#selectByValueStops');
-  const durationBtn = document.querySelector('#selectByValueDuration');
-  const clearBtn = document.querySelector('#selectByValueClear');
-
-  stopsBtn.addEventListener('click', () => menu.selectByValue('stops'));
-  durationBtn.addEventListener('click', () => menu.selectByValue('duration'));
-  clearBtn.addEventListener('click', () => menu.selectByValue(undefined));
-}
-
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 
@@ -1886,36 +1720,7 @@ AuroMenuOption.register();
 AuroMenu.register('custom-menu');
 AuroMenuOption.register('custom-menuoption');
 
-const examples = [
-  auroMenuLoadingExample,
-  auroMenuMatchWordExample,
-  auroMenuResetExample,
-  auroMenuEventAttributeExample,
-  auroMenuEventsExample,
-  auroMenuPersistentExample,
-  auroMenuSelectByValueExample
-];
-
-function initExamples(pending, initCount) {
-  pending = pending || examples.slice();
-  initCount = initCount || 0;
-  const stillPending = [];
-
-  for (const fn of pending) {
-    try {
-      fn();
-    } catch {
-      stillPending.push(fn);
-    }
-  }
-
-  if (stillPending.length && initCount <= 20) {
-    setTimeout(() => {
-      initExamples(stillPending, initCount + 1);
-    }, 100);
-  }
+function initExamples(initCount) {
 }
 
-initExamples();
-
 export { initExamples };

package/components/menu/demo/keyboard-behavior.md

@@ -7,90 +7,11 @@
 <auro-header level="2" id="keyEvents">Key Events</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
 <!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+<!-- auro-menu does not implement direct keyboard event handling. -->
+<!-- Keyboard navigation is delegated to parent components (auro-select, auro-combobox) via their keyboard strategy files. -->
 <div class="note">
-<p><strong>Note:</strong> <code>&lt;auro-menu&gt;</code> registers a <code>keydown</code> listener on its host. By default the menu is not focusable — no <code>tabindex</code> on the host, and menuoptions are <code>tabindex="-1"</code> — so the listener does not fire on its own. It fires whenever a <code>keydown</code> reaches the host, which happens in any of the following ways:</p>
-<ul>
-<li>A wrapping component focuses something inside the menu subtree and the event bubbles up to the host. In the standard integrations (<code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>), keyboard behavior is primarily parent-managed rather than bubble-driven: focus stays on the parent's trigger/input, and the parent captures keys there and drives the menu directly via its public <code>navigateOptions()</code> / <code>updateActiveOption()</code> methods and the menu's internal <code>makeSelection()</code> routine (<code>@private</code>, not part of the public menu API).</li>
-<li>A wrapping component dispatches or reroutes a <code>KeyboardEvent</code> at the menu programmatically (for example, <code>menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))</code>).</li>
-<li>The author makes the host focusable (for example, by adding <code>tabindex="0"</code> to the <code>&lt;auro-menu&gt;</code> element) and focuses it. The host already has <code>role="listbox"</code>, so this yields a bare, focusable listbox that responds to the keys in the table below. For full combobox semantics use <code>&lt;auro-select&gt;</code> or <code>&lt;auro-combobox&gt;</code>, or replicate their <code>aria-activedescendant</code> wiring from a separate trigger.</li>
-</ul>
-<p>Keys not listed below (<code>Home</code>, <code>End</code>, <code>Escape</code>, type-ahead) are handled by the parent — see the <code>&lt;auro-select&gt;</code> and <code>&lt;auro-combobox&gt;</code> keyboard behavior docs. An "interactive option" is one that is not <code>disabled</code>, <code>hidden</code>, or <code>static</code> — these are always skipped during navigation and selection, along with <code>&lt;hr&gt;</code> dividers.</p>
-</div>
-<table>
-<thead>
-<tr>
-<th>Key</th>
-<th>Current State</th>
-<th>Behavior</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td rowspan="5">ArrowDown</td>
-<td>No option is active</td>
-<td>The first interactive option becomes active.</td>
-</tr>
-<tr>
-<td>An option is active, followed by interactive options</td>
-<td>Advances the active option to the next interactive option.</td>
-</tr>
-<tr>
-<td>The last interactive option is active</td>
-<td>Wraps to the first interactive option.</td>
-</tr>
-<tr>
-<td>Menu has no options or all options are non-interactive</td>
-<td>No option becomes active; no <code>auroMenu-activatedOption</code> event fires.</td>
-</tr>
-<tr>
-<td>Menu is in <code>loading</code> state</td>
-<td>The rendered loading placeholder is inert (marked <code>disabled</code>) and is not part of <code>items</code>, so it cannot become active.</td>
-</tr>
-<tr>
-<td rowspan="4">ArrowUp</td>
-<td>No option is active</td>
-<td>The last interactive option becomes active.</td>
-</tr>
-<tr>
-<td>An option is active, preceded by interactive options</td>
-<td>Advances the active option to the previous interactive option.</td>
-</tr>
-<tr>
-<td>The first interactive option is active</td>
-<td>Wraps to the last interactive option.</td>
-</tr>
-<tr>
-<td>Menu has no options or all options are non-interactive</td>
-<td>No option becomes active.</td>
-</tr>
-<tr>
-<td rowspan="4">Enter</td>
-<td>Single-select, active option is not currently selected</td>
-<td>The active option is selected. Any previous selection is cleared. <code>auroMenu-selectedOption</code> fires.</td>
-</tr>
-<tr>
-<td>Single-select, active option is already selected</td>
-<td>No selection change, but <code>auroMenu-selectedOption</code> still fires so the parent can react (for example, close the dropdown).</td>
-</tr>
-<tr>
-<td>Multi-select</td>
-<td>The active option toggles selected. Other selections are preserved.</td>
-</tr>
-<tr>
-<td>Active option is disabled, hidden, or static</td>
-<td>Selection is a no-op.</td>
-</tr>
-<tr>
-<td rowspan="2">Tab</td>
-<td>An option is active</td>
-<td>The active option is selected (same behavior as <code>Enter</code>).<div class="note"><strong>Note:</strong> <code>Tab</code> does not <code>preventDefault</code>, so focus continues to the next element in the tabindex sequence after selection.</div></td>
-</tr>
-<tr>
-<td>No option is active</td>
-<td>Focus moves to the next tabbable element; no selection change.</td>
-</tr>
-</tbody>
-</table>
+<p><strong>Note:</strong> The <code>&lt;auro-menu&gt;</code> component does not handle keyboard events directly. Keyboard navigation is managed by the parent component (e.g., <code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>) through their keyboard strategy classes, which call menu methods such as <code>navigateOptions()</code>, <code>makeSelection()</code>, and <code>updateActiveOption()</code>.</p>
+</div>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 </div>