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

package/components/menu/demo/customize.md

@@ -9,15 +9,20 @@
 <auro-anchorlink fluid href="#restrictedWidth" class="level2 body-xs">Restricted Width</auro-anchorlink>
 <auro-anchorlink fluid href="#scroll" class="level2 body-xs">Scroll</auro-anchorlink>
 <auro-anchorlink fluid href="#nocheckmark" class="level2 body-xs">No Checkmark</auro-anchorlink>
+<auro-anchorlink fluid href="#dividers" class="level2 body-xs">Dividers</auro-anchorlink>
 <auro-anchorlink fluid href="#nestedMenu" class="level2 body-xs">Nested Menu</auro-anchorlink>
 <auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
+<auro-anchorlink fluid href="#static" class="level2 body-xs">Static Options</auro-anchorlink>
+<auro-anchorlink fluid href="#matchWord" class="level2 body-xs">Match Word</auro-anchorlink>
+<auro-anchorlink fluid href="#persistent" class="level2 body-xs">Persistent Option</auro-anchorlink>
+<auro-anchorlink fluid href="#nomatch" class="level2 body-xs">No Match Placeholder</auro-anchorlink>
 <auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled Options</auro-anchorlink>
 <auro-anchorlink fluid href="#disabledMenu" class="level2 body-xs">Disabled Menu</auro-anchorlink>
+<auro-anchorlink fluid href="#loading" class="level2 body-xs">Loading</auro-anchorlink>
 <auro-anchorlink fluid href="#hidden" class="level2 body-xs">Hidden Options</auro-anchorlink>
 <auro-anchorlink fluid href="#multiselect" class="level2 body-xs">Multi-Select</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValueMultiselect" class="level2 body-xs">Preset Value (Multi)</auro-anchorlink>
-<auro-anchorlink fluid href="#preselect" class="level2 body-xs">Pre-Selected</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -52,9 +57,9 @@
             --ds-auro-menuoption-text-color: #5b1a6e;
           }
 </style>
-<auro-menu id="customTokensMenu">
+<auro-menu id="customTokensMenu" value="price">
 <auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price" selected>Price</auro-menuoption>
+<auro-menuoption value="price">Price</auro-menuoption>
 <auro-menuoption value="duration">Duration</auro-menuoption>
 <hr>
 <auro-menuoption value="departure">Departure</auro-menuoption>
@@ -75,9 +80,9 @@
     --ds-auro-menuoption-text-color: #5b1a6e;
   }
 &lt;/style&gt;
-&lt;auro-menu id="customTokensMenu"&gt;
+&lt;auro-menu id="customTokensMenu" value="price"&gt;
   &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="price" selected&gt;Price&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;hr&gt;
   &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
@@ -278,6 +283,47 @@
 &lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="dividers">Dividers</auro-header>
+<p>Insert standard <code>&lt;hr&gt;</code> elements between <code>auro-menuoption</code> elements to create visual group separators. Dividers are non-interactive and are skipped during keyboard navigation.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hr.html) -->
+<!-- The below content is automatically added from ./../apiExamples/hr.html -->
+<auro-menu>
+<auro-menuoption value="new tab">New tab</auro-menuoption>
+<auro-menuoption value="new window">New window</auro-menuoption>
+<auro-menuoption value="open file">Open file</auro-menuoption>
+<auro-menuoption value="open location">Open location</auro-menuoption>
+<hr>
+<auro-menuoption value="close window">Close window</auro-menuoption>
+<auro-menuoption value="close tab">Close tab</auro-menuoption>
+<auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+<hr>
+<auro-menuoption value="share">Share</auro-menuoption>
+<hr>
+<auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hr.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/hr.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
+  &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="new window"&gt;New window&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
+  &lt;hr&gt;
+  &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="close tab"&gt;Close tab&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
+  &lt;hr&gt;
+  &lt;auro-menuoption value="share"&gt;Share&lt;/auro-menuoption&gt;
+  &lt;hr&gt;
+  &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 <auro-header level="3" id="nestedMenu">Nested Menu</auro-header>
 <p>Nest additional <code>auro-menu</code> elements inside the default slot to create sub-menus. Each nested menu maintains its own selection state.</p>
 <div class="exampleWrapper">
@@ -358,6 +404,144 @@
 </section>
 <section>
 <auro-header level="2" id="customBehavior">Behavior</auro-header>
+<auro-header level="3" id="static">Static Options</auro-header>
+<p>Add the <code>static</code> attribute to an <code>auro-menuoption</code> to make it non-interactive — the option renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers or informational rows inside a menu.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/static.html) -->
+<!-- The below content is automatically added from ./../apiExamples/static.html -->
+<auro-menu>
+<auro-menuoption static>Popular Destinations</auro-menuoption>
+<auro-menuoption value="sea">Seattle (SEA)</auro-menuoption>
+<auro-menuoption value="pdx">Portland (PDX)</auro-menuoption>
+<auro-menuoption value="sfo">San Francisco (SFO)</auro-menuoption>
+<auro-menuoption static>International</auro-menuoption>
+<auro-menuoption value="lhr">London (LHR)</auro-menuoption>
+<auro-menuoption value="nrt">Tokyo (NRT)</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/static.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/static.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
+  &lt;auro-menuoption static&gt;Popular Destinations&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="sea"&gt;Seattle (SEA)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="pdx"&gt;Portland (PDX)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="sfo"&gt;San Francisco (SFO)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption static&gt;International&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="lhr"&gt;London (LHR)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="nrt"&gt;Tokyo (NRT)&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="matchWord">Match Word</auro-header>
+<p>Set the <code>matchWord</code> property to a string, and any option whose text contains that substring will render the matching portion visually highlighted. Typically driven by an input's <code>keyup</code> handler to power real-time filtering — this is the mechanism <code>&lt;auro-combobox&gt;</code> uses to highlight matches as the user types.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/match-word.html) -->
+<!-- The below content is automatically added from ./../apiExamples/match-word.html -->
+<auro-input id="matchWordInput" required>
+<span slot="label">Enter a value to match in the menu</span>
+</auro-input>
+<br />
+<auro-menu id="matchWordMenu">
+<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-menu>
+<auro-menuoption value="apples">Apples</auro-menuoption>
+<auro-menuoption value="oranges">Oranges</auro-menuoption>
+<auro-menuoption value="peaches">Peaches</auro-menuoption>
+</auro-menu>
+<auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/match-word.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/match-word.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-input id="matchWordInput" required&gt;
+  &lt;span slot="label"&gt;Enter a value to match in the menu&lt;/span&gt;
+&lt;/auro-input&gt;
+&lt;br /&gt;
+&lt;auro-menu id="matchWordMenu"&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-menu&gt;
+    &lt;auro-menuoption value="apples"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="oranges"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="peaches"&gt;Peaches&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+  &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="persistent">Persistent Option</auro-header>
+<p>Add the <code>persistent</code> attribute to an <code>auro-menuoption</code> to opt it out of <code>matchWord</code> highlighting. The option remains fully interactive but its label is never rewritten — useful for utility rows like "Add new…" that should render identically regardless of the current filter string.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persistent.html) -->
+<!-- The below content is automatically added from ./../apiExamples/persistent.html -->
+<auro-input id="persistentExampleInput">
+<span slot="label">Type to highlight matches</span>
+</auro-input>
+<br />
+<auro-menu id="persistentExampleMenu">
+<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-menuoption value="add" persistent>+ Add a new sort option</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persistent.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/persistent.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-input id="persistentExampleInput"&gt;
+  &lt;span slot="label"&gt;Type to highlight matches&lt;/span&gt;
+&lt;/auro-input&gt;
+&lt;br /&gt;
+&lt;auro-menu id="persistentExampleMenu"&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-menuoption value="add" persistent&gt;+ Add a new sort option&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="nomatch">No Match Placeholder</auro-header>
+<p>Mark an option with the <code>nomatch</code> attribute to designate it as the placeholder shown when no other options match the user's input. When paired with <code>&lt;auro-combobox&gt;</code>, the combobox toggles the <code>hidden</code> attribute on this option automatically based on filter results.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nomatch.html) -->
+<!-- The below content is automatically added from ./../apiExamples/nomatch.html -->
+<auro-menu>
+<auro-menuoption value="stops">Stops</auro-menuoption>
+<auro-menuoption value="price">Price</auro-menuoption>
+<auro-menuoption value="duration">Duration</auro-menuoption>
+<auro-menuoption nomatch>No matching results</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nomatch.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/nomatch.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-menu&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 nomatch&gt;No matching results&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 <auro-header level="3" id="disabled">Disabled Options</auro-header>
 <p>Use the <code>disabled</code> attribute on <code>auro-menuoption</code> to prevent interaction with specific options.</p>
 <div class="exampleWrapper">
@@ -440,6 +624,123 @@
 &lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="loading">Loading</auro-header>
+<p>Use the <code>loading</code> attribute on <code>auro-menu</code> to indicate that options are being fetched asynchronously. Optional <code>loadingIcon</code> and <code>loadingText</code> slots let you customize the placeholder — a spinner, message, both, or neither.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
+<!-- The below content is automatically added from ./../apiExamples/loading.html -->
+<auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
+<table id="loadingExampleTable">
+<thead>
+<tr>
+<td width="25%">Spinner + Text</td>
+<td width="25%">Text Only</td>
+<td width="25%">Spinner Only</td>
+<td width="25%">None</td>
+</tr>
+</thead>
+<tr>
+<td>
+<auro-menu>
+<auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+<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>
+</td>
+<td>
+<auro-menu>
+<span slot="loadingText">Loading...</span>
+<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>
+</td>
+<td>
+<auro-menu>
+<auro-loader slot="loadingIcon" orbit xs></auro-loader>
+<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>
+</td>
+<td>
+<auro-menu>
+<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>
+</td>
+</tr>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-button id="loadingExampleToggleButton"&gt;Toggle Loading&lt;/auro-button&gt;
+&lt;table id="loadingExampleTable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td width="25%"&gt;Spinner + Text&lt;/td&gt;
+      &lt;td width="25%"&gt;Text Only&lt;/td&gt;
+      &lt;td width="25%"&gt;Spinner Only&lt;/td&gt;
+      &lt;td width="25%"&gt;None&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tr&gt;
+    &lt;td&gt;
+      &lt;auro-menu&gt;
+        &lt;auro-loader slot="loadingIcon" orbit xs&gt;&lt;/auro-loader&gt;&lt;span slot="loadingText"&gt;Loading...&lt;/span&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;/td&gt;
+    &lt;td&gt;
+      &lt;auro-menu&gt;
+        &lt;span slot="loadingText"&gt;Loading...&lt;/span&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;/td&gt;
+    &lt;td&gt;
+      &lt;auro-menu&gt;
+        &lt;auro-loader slot="loadingIcon" orbit xs&gt;&lt;/auro-loader&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;/td&gt;
+    &lt;td&gt;
+      &lt;auro-menu&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;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 <auro-header level="3" id="hidden">Hidden Options</auro-header>
 <p>Use the <code>hidden</code> attribute on <code>auro-menuoption</code> to visually hide an option while keeping it in the DOM.</p>
 <div class="exampleWrapper">
@@ -509,7 +810,7 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="presetValue">Preset Value</auro-header>
-<p>Use the <code>value</code> attribute on <code>auro-menu</code> to set the selected option when the menu renders.</p>
+<p>Use the <code>value</code> attribute on <code>auro-menu</code> to set the selected option when the menu renders. The value must match a selectable option; if it matches an option marked <code>disabled</code> or <code>static</code>, no option is selected and <code>auroMenu-selectValueFailure</code> is dispatched.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preset-value.html) -->
 <!-- The below content is automatically added from ./../apiExamples/preset-value.html -->
@@ -562,47 +863,6 @@
 &lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<auro-header level="3" id="preselect">Pre-Selected</auro-header>
-<p>Use the <code>selected</code> attribute on <code>auro-menuoption</code> to pre-select an option when the menu renders.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preselect.html) -->
-<!-- The below content is automatically added from ./../apiExamples/preselect.html -->
-<auro-menu>
-<auro-menuoption value="new tab">New tab</auro-menuoption>
-<auro-menuoption value="new window" selected>New window</auro-menuoption>
-<auro-menuoption value="open file">Open file</auro-menuoption>
-<auro-menuoption value="open location">Open location</auro-menuoption>
-<hr>
-<auro-menuoption value="close window">Close window</auro-menuoption>
-<auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
-<auro-menuoption value="save page as...">Save page as...</auro-menuoption>
-<hr>
-<auro-menuoption value="share" disabled>Share</auro-menuoption>
-<hr>
-<auro-menuoption value="print">Print</auro-menuoption>
-</auro-menu>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/preselect.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/preselect.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
-  &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="new window" selected&gt;New window&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
-  &lt;hr&gt;
-  &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="close tab" disabled&gt;Close tab&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
-  &lt;hr&gt;
-  &lt;auro-menuoption value="share" disabled&gt;Share&lt;/auro-menuoption&gt;
-  &lt;hr&gt;
-  &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
 </section>
 </div>
 </div>

package/components/menu/demo/design.md

@@ -22,7 +22,7 @@
 <auro-header level="2" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
 <p>The <code>auro-menu</code> component supports the <code>shape</code> and <code>size</code> feature set. The component defaults to <code>shape="box"</code> and <code>size="sm"</code>. The <code>layout</code> attribute is not supported by this component.</p>
 <auro-header level="3" id="size">Size</auro-header>
-<p>Use the <code>size</code> attribute to change the size of menu options. Supported values are <code>sm</code> (default) and <code>md</code>.</p>
+<p>Use the <code>size</code> attribute to change the size of menu options. Supported values are <code>xs</code>, <code>sm</code> (default), <code>md</code>, <code>lg</code>, and <code>xl</code>.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size.html) -->
 <!-- The below content is automatically added from ./../apiExamples/size.html -->

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

@@ -22,10 +22,13 @@
 <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">
@@ -293,7 +296,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>).</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>). 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>
 <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>
@@ -308,14 +311,148 @@ 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>
-<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>
+<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="navigateOptions">navigateOptions(direction)</auro-header>
-<p>Moves the highlight to the next or previous option. Accepts <code>'up'</code> or <code>'down'</code> as the direction parameter.</p>
+<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>
 </section>
 </div>
 </div>