@aurodesignsystem-dev/auro-formkit 0.0.0-pr1503.4 → 0.0.0-pr1503.5

package/components/menu/demo/customize.md

@@ -9,16 +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-anchorlink fluid href="#allowDeselect" class="level2 body-xs">Allow Deselect</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -53,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>
@@ -76,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;
@@ -279,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">
@@ -359,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">
@@ -441,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">
@@ -510,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 -->
@@ -563,74 +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>
-<auro-header level="3" id="allowDeselect">Allow Deselect</auro-header>
-<p>Use the <code>allowDeselect</code> attribute to allow users to click a selected option again to deselect it in single-select mode. In multi-select mode, deselection is always available regardless of this attribute.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/allow-deselect.html) -->
-<!-- The below content is automatically added from ./../apiExamples/allow-deselect.html -->
-<auro-menu allowDeselect>
-<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>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/allow-deselect.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/allow-deselect.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu allowDeselect&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;</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 -->