@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.1 → 0.0.0-pr1451.2

package/components/select/demo/design.md

@@ -0,0 +1,391 @@
+<auro-header level="1" id="overview">Select - Design</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="3" id="anatomy">Component Anatomy</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/layout.md) -->
+<!-- The below content is automatically added from ./../docs/partials/layout.md -->
+<p>The component consists of the following elements:</p>
+<ul>
+<li>
+<strong>trigger:</strong> shows the component label, current value and will render to reflect state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>), and a flag marking instances that are required.
+</li>
+<li>
+<strong>options list:</strong> a list of options that may be selected which are rendered in an element which can be expanded/collapsed by interacting with the trigger.
+</li>
+<li>
+<strong>help text:</strong> descriptive text rendered below the trigger intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
+</li>
+</ul>
+<auro-header level="4" id="trigger">Trigger</auro-header>
+<p>The trigger includes the component label, a flag marking the component optional/required and the current value. This label is required in order to ensure correct behavior when a guest is using accessibility tools such as screen readers and VoiceOver utilities. The invalid state will also announce to accessibility tools when applied.</p>
+<p>The optional/required flag content may be customized.</p>
+<p>When rendering the value of a selected option, the entire text content of the option will render in the trigger, including any icons.</p>
+<p>The trigger is a focusable element and will visually respond to common UI states - <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
+<auro-header level="4" id="options">List Options</auro-header>
+<p>The component will render a list of options that may be selected. Each option may be in one of the following states when rendered:</p>
+<ul>
+<li>
+<code>selected</code> - One option may be selected at a time and identifies the current value of the component. There is an optional feature that may be used to enable more than one option to be selected at a time.
+</li>
+<li>
+<code>active</code> - One option may be active at a time. The active option indicates the item that will become selected if the user chooses.
+</li>
+<li>
+<code>disabled</code> - One or more options may be disabled. Disabled options are not interactive and cannot be marked as active or selected.
+</li>
+</ul>
+<auro-header level="4" id="helpText">Help Text</auro-header>
+<p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers. In certain cases, a component label alone may be confusing.</p>
+<p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
+<auro-header level="3" id="colors">Colors</auro-header>
+<auro-header level="4" id="defaultColor">Default Color</auro-header>
+<p>When the component is used on a light background.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-select>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Bib Headline</span>
+<span slot="label">Select Example</span>
+<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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+</auro-menu>
+</auro-select>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-select&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
+  &lt;span slot="label"&gt;Select Example&lt;/span&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-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="inverseColor">Inverse Color</auro-header>
+<p>When the component is used on a darker background, set <code>appearance="inverse"</code> to invert the component colors for proper contrast and visibility.</p>
+<div class="exampleWrapper--ondark">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+<auro-select appearance="inverse">
+<span slot="bib.fullscreen.headline">Bib Headline</span>
+<span slot="label">Select Example</span>
+<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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+</auro-menu>
+</auro-select>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-select appearance="inverse"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
+  &lt;span slot="label"&gt;Select Example&lt;/span&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-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
+<p>The <code>auro-select</code> component supports the <code>shape</code>, <code>size</code> and <code>layout</code> feature set. The component defaults to the <code>layout="classic"</code>, <code>shape="classic"</code> and <code>size="lg"</code>.</p>
+<auro-header level="4" id="classicLayout">Classic Layout</auro-header>
+<p>The <code>classic</code> layout is default for <code>auro-select</code>. No customization is needed to achieve this look.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-select>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Bib Headline</span>
+<span slot="label">Select Example</span>
+<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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+</auro-menu>
+</auro-select>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-select&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
+  &lt;span slot="label"&gt;Select Example&lt;/span&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-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="emphasizedLayout">Emphasized Layout</auro-header>
+<p>The <code>emphasized</code> layout is only supported on light backgrounds.</p>
+<p>The <code>emphasized</code> layout supports the following shapes:</p>
+<ul>
+<li><code>pill</code></li>
+<li><code>pill-left</code></li>
+<li><code>pill-right</code></li>
+</ul>
+<p>The <code>emphasized</code> layout supports the following sizes:</p>
+<ul>
+<li><code>xl</code></li>
+</ul>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
+<div style="display: flex; flex-direction: row; gap: 10px;">
+<auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="label">Select Example</span>
+<auro-menu nocheckmark>
+<auro-menuoption value="flights">
+<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="cars">
+<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="hotels">
+<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="packages">
+<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="cruises">
+<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+</auro-menuoption>
+</auro-menu>
+</auro-select>
+<auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
+<span slot="label">Select Example</span>
+<auro-menu nocheckmark>
+<auro-menuoption value="flights">
+<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="cars">
+<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="hotels">
+<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="packages">
+<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+</auro-menuoption>
+<auro-menuoption value="cruises">
+<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+</auro-menuoption>
+</auro-menu>
+</auro-select>
+<auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
+<span slot="label">Select Example</span>
+<span slot="helpText">no displayValue in menuoptions</span>
+<auro-menu nocheckmark>
+<auro-menuoption value="flights">
+<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+</auro-menuoption>
+<auro-menuoption value="cars">
+<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+</auro-menuoption>
+<auro-menuoption value="hotels">
+<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+</auro-menuoption>
+<auro-menuoption value="packages">
+<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+</auro-menuoption>
+<auro-menuoption value="cruises">
+<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+</auro-menuoption>
+</auro-menu>
+</auro-select>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;div style="display: flex; flex-direction: row; gap: 10px;"&gt;
+  &lt;auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;"&gt;
+    &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+    &lt;span slot="label"&gt;Select Example&lt;/span&gt;
+    &lt;auro-menu nocheckmark&gt;
+      &lt;auro-menuoption value="flights"&gt;
+        &lt;auro-icon category="terminal" name="plane-diag-stroke" customcolor&gt;&lt;/auro-icon&gt; Flights
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="cars"&gt;
+        &lt;auro-icon category="destination" name="car-rental-stroke" customcolor&gt;&lt;/auro-icon&gt; Cars
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="hotels"&gt;
+        &lt;auro-icon category="destination" name="hotel-stroke" customcolor&gt;&lt;/auro-icon&gt; Hotels
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="packages"&gt;
+        &lt;auro-icon category="shop" name="gift-stroke" customcolor&gt;&lt;/auro-icon&gt; Packages
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="cruises"&gt;
+        &lt;auro-icon category="in-flight" name="boarding" customcolor&gt;&lt;/auro-icon&gt; Cruises
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+    &lt;/auro-menu&gt;
+  &lt;/auro-select&gt;
+  &lt;auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;"&gt;
+    &lt;span slot="label"&gt;Select Example&lt;/span&gt;
+    &lt;auro-menu nocheckmark&gt;
+      &lt;auro-menuoption value="flights"&gt;
+        &lt;auro-icon category="terminal" name="plane-diag-stroke" customcolor&gt;&lt;/auro-icon&gt; Flights
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="cars"&gt;
+        &lt;auro-icon category="destination" name="car-rental-stroke" customcolor&gt;&lt;/auro-icon&gt; Cars
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="hotels"&gt;
+        &lt;auro-icon category="destination" name="hotel-stroke" customcolor&gt;&lt;/auro-icon&gt; Hotels
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="packages"&gt;
+        &lt;auro-icon category="shop" name="gift-stroke" customcolor&gt;&lt;/auro-icon&gt; Packages
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="cruises"&gt;
+        &lt;auro-icon category="in-flight" name="boarding" customcolor&gt;&lt;/auro-icon&gt; Cruises
+        &lt;auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor&gt;&lt;/auro-icon&gt;
+      &lt;/auro-menuoption&gt;
+    &lt;/auro-menu&gt;
+  &lt;/auro-select&gt;
+  &lt;auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;"&gt;
+    &lt;span slot="label"&gt;Select Example&lt;/span&gt;
+    &lt;span slot="helpText"&gt;no displayValue in menuoptions&lt;/span&gt;
+    &lt;auro-menu nocheckmark&gt;
+      &lt;auro-menuoption value="flights"&gt;
+        &lt;auro-icon category="terminal" name="plane-diag-stroke" customcolor&gt;&lt;/auro-icon&gt; Flights
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="cars"&gt;
+        &lt;auro-icon category="destination" name="car-rental-stroke" customcolor&gt;&lt;/auro-icon&gt; Cars
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="hotels"&gt;
+        &lt;auro-icon category="destination" name="hotel-stroke" customcolor&gt;&lt;/auro-icon&gt; Hotels
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="packages"&gt;
+        &lt;auro-icon category="shop" name="gift-stroke" customcolor&gt;&lt;/auro-icon&gt; Packages
+      &lt;/auro-menuoption&gt;
+      &lt;auro-menuoption value="cruises"&gt;
+        &lt;auro-icon category="in-flight" name="boarding" customcolor&gt;&lt;/auro-icon&gt; Cruises
+      &lt;/auro-menuoption&gt;
+    &lt;/auro-menu&gt;
+  &lt;/auro-select&gt;
+&lt;/div&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="snowflakeLayout">Snowflake Layout</auro-header>
+<p>The <code>snowflake</code> layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.</p>
+<p>The <code>snowflake</code> layout is only expected to be used on dark backgrounds, in conjunction with <code>appearance="inverse"</code>.</p>
+<div class="exampleWrapper--ondark">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
+<auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="label">Label</span>
+<span slot="helpText">Help Text</span>
+<auro-menu nocheckmark>
+<auro-menuoption value="flights">
+<auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+</auro-menuoption>
+<auro-menuoption value="cars">
+<auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+</auro-menuoption>
+<auro-menuoption value="hotels">
+<auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+</auro-menuoption>
+<auro-menuoption value="packages">
+<auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+</auro-menuoption>
+<auro-menuoption value="cruises">
+<auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+</auro-menuoption>
+</auro-menu>
+</auro-select>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;span slot="label"&gt;Label&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+  &lt;auro-menu nocheckmark&gt;
+    &lt;auro-menuoption value="flights"&gt;
+      &lt;auro-icon category="terminal" name="plane-diag-stroke" customColor&gt;&lt;/auro-icon&gt; Flights
+    &lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="cars"&gt;
+      &lt;auro-icon category="destination" name="car-rental-stroke" customColor&gt;&lt;/auro-icon&gt; Cars
+    &lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="hotels"&gt;
+      &lt;auro-icon category="destination" name="hotel-stroke" customColor&gt;&lt;/auro-icon&gt; Hotels
+    &lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="packages"&gt;
+      &lt;auro-icon category="shop" name="gift-stroke" customColor&gt;&lt;/auro-icon&gt; Packages
+    &lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="cruises"&gt;
+      &lt;auro-icon category="in-flight" name="boarding" customColor&gt;&lt;/auro-icon&gt; Cruises
+    &lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</div>
+</div>
+</div>

package/components/select/demo/getting-started.html

@@ -0,0 +1,125 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/getting-started.md
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-select | Getting Started</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" /> -->
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script type="module">
+      import {unified} from 'https://esm.sh/unified';
+      import remarkParse from 'https://esm.sh/remark-parse';
+      import remarkGfm from 'https://esm.sh/remark-gfm';
+      import remarkRehype from 'https://esm.sh/remark-rehype';
+      import rehypeRaw from 'https://esm.sh/rehype-raw';
+      import rehypeHighlight from 'https://esm.sh/rehype-highlight';
+      import rehypeStringify from 'https://esm.sh/rehype-stringify';
+
+      const response = await fetch('./getting-started.md');
+      const text = await response.text();
+      const result = await unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype, { allowDangerousHtml: true })
+        .use(rehypeRaw)
+        .use(rehypeHighlight)
+        .use(rehypeStringify)
+        .process(text);
+
+      document.querySelector('main').innerHTML = String(result);
+    </script>
+    <script type="module">
+      // import "https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js";
+      // import "https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js";
+
+      function addCopyButtons() {
+        document.querySelectorAll('pre[class*="language-"]').forEach((pre) => {
+          const wrapper = document.createElement('div');
+          wrapper.className = 'pre-wrapper';
+          pre.parentNode.insertBefore(wrapper, pre);
+          wrapper.appendChild(pre);
+          const btn = document.createElement('button');
+          btn.className = 'copy-btn';
+          btn.textContent = 'Copy';
+          btn.addEventListener('click', () => {
+            const code = pre.querySelector('code');
+            const raw = code ? code.textContent : pre.textContent;
+            const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
+            navigator.clipboard.writeText(text).then(() => {
+              btn.textContent = 'Copied!';
+              setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
+            });
+          });
+          wrapper.appendChild(btn);
+        });
+      }
+
+      function openAccordion(id) {
+        document.querySelectorAll('auro-accordion').forEach((accordion) => {
+          accordion.removeAttribute('expanded');
+        });
+        const target = document.getElementById(id);
+        if (target) {
+          target.setAttribute('expanded', '');
+          // Wait for accordion collapse/expand animation (500ms) to finish before scrolling
+          setTimeout(() => {
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }, 550);
+        }
+      }
+
+      window.openAccordion = openAccordion;
+
+      // function loadMd(path) {
+      //   fetch(path)
+      //     .then((response) => response.text())
+      //     .then((text) => {
+      //       const rawHtml = marked.parse(text);
+      //       document.querySelector("main").innerHTML = rawHtml;
+      //       Prism.highlightAll();
+      //       addCopyButtons();
+      //     });
+      // }
+
+      // loadMd("./getting-started.md");
+      addCopyButtons();
+    </script>
+    <script src="./getting-started.min.js" data-demo-script="true" type="module"></script>
+  </body>
+</html>

package/components/select/demo/getting-started.js

@@ -0,0 +1,9 @@
+// import { exampleFunction } from "exampleFile.js";
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { AuroSelect } from '../src/auro-select.js';
+import '../../menu/src/registered.js';
+
+AuroSelect.register(); // registering to `auro-select`
+AuroSelect.register('custom-select');