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

package/components/select/demo/layout.md

@@ -1,25 +1,39 @@
-<auro-header level="1" id="overview">Select - Layout</auro-header>
-<div class="contentWrapper">
-<div class="mainContent">
-<div class="scrollWrapper">
-
-### Component Anatomy
-
-The `auro-select` component is composed of two key parts:
-
-- **Trigger** — The visible, interactive element that the user clicks (or otherwise activates) to expand the component. The trigger displays the current selection or placeholder text.
-- **Bib** — The expandable panel that appears when the trigger is activated. The bib contains the menu options that the user may select by clicking on them.
-
-When the trigger is activated, the bib expands to reveal the available options. Selecting an option from the bib updates the trigger's displayed value and collapses the bib.
-
-### Shape | Size | Layout Support
-
-The `auro-select` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `layout="classic"`, `shape="classic"` and `size="lg"`.
-
-#### Classic Layout (Legacy)
-
-The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
-
+<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 -->
@@ -37,12 +51,11 @@ The `classic` layout is default for `auro-select`. No customization is needed to
 </auro-menu>
 </auro-select>
 <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-<span slot="trigger">See code</span>
+<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 -->
-
+<!-- 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;
@@ -55,245 +68,43 @@ The `classic` layout is default for `auro-select`. No customization is needed to
     &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>
-
-#### Emphasized Layout
-
-The `emphasized` layout is only supported on light backgrounds.
-
-The `emphasized` layout supports the following shapes:
-- `pill`
-- `pill-left`
-- `pill-right`
-
-The `emphasized` layout supports the following sizes:
-- `xl`
-
-<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>
+&lt;/auro-select&gt;</code></pre>
 <!-- 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>
-
-#### Snowflake Layout
-
-The `snowflake` 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.
-
-The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.
-
+</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/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-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/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;
+<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>
-</div>
-</div>
-</div>
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/components/select/demo/readme.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-select</title>
 
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- 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"/>
@@ -33,20 +33,55 @@
     <!-- 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>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./readme.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
+      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('./readme.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);
+      addCopyButtons();
+
+      function addCopyButtons() {
+        document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
+          const pre = code.parentElement;
+          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 raw = code.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);
+        });
+      }
     </script>
     <script src="./index.min.js" data-demo-script="true" type="module"></script>
 

package/components/select/demo/readme.md

@@ -51,8 +51,6 @@ See description.
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
-#### NPM Installation
-
 <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
@@ -94,54 +92,36 @@ To only develop a single component, use the `--filter` flag:
 <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
+<p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
+<p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
+<p>To do this, import the component class directly and call its `register(name)` method with a unique name:</p>
 
-## Custom Component Registration for Version Management
-
-There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
-
-When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+<pre class="language-js"><code class="language-js">// Import the classes
+import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
+import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
+import { AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menuoption/class';
+​
+// Register each component with a custom name
+AuroSelect.register('custom-select');
+AuroMenu.register('custom-menu');
+AuroMenuOption.register('custom-menuoption');</code></pre>
 
-However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+The `<auro-menu>` and `<auro-menuoption>` components must also be custom registered when using a custom `<auro-select>` registration. All three components work together and need to be registered under the same custom naming convention.
 
-You can do this by importing only the component class and using the `register(name)` method with a unique name:
+This will create new custom elements that behave exactly like their standard counterparts, allowing both to coexist on the same page without interfering with each other.
 
-<pre class="language-js"><code class="language-js">// Import the class only
-import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
-​
-// Register with a custom name if desired
-AuroSelect.register('custom-select');</code></pre>
-
-This will create a new custom element `<custom-select>` that behaves exactly like `<auro-select>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-select placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</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>
-</custom-select>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
-<pre class="language-html"><code class="language-html">&lt;custom-select placeholder="Placeholder Text"&gt;
+<pre class="language-html"><code class="language-html">&lt;custom-select placeholder="Placeholder Text" id="custom-select"&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
   &lt;span slot="label"&gt;Label&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;custom-menu&gt;
+    &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
+    &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
+    &lt;custom-menuoption value="duration"&gt;Duration&lt;/custom-menuoption&gt;
+    &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
+    &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
+    &lt;custom-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/custom-menuoption&gt;
+  &lt;/custom-menu&gt;
 &lt;/custom-select&gt;</code></pre>
-</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->