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

package/components/select/demo/install.md

@@ -0,0 +1,92 @@
+<auro-header level="2" id="setup">Setup</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion expanded class="section" id="recommendedAccordion">
+<span slot="trigger">Recommended Installation and Implementation</span>
+<div class="accordion-content">
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../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>
+<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>
+
+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.
+
+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-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;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-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="autoAccordion">
+<span slot="trigger">Auto Installation and Implementation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/defaultRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/defaultRegistration.md -->
+<p>Once installed, the component can be used in your project by importing the component's registered module:</p>
+<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-select';</code></pre>
+<p>This import registers the <code>&lt;auro-select&gt;</code> custom element globally. You can then use it in your HTML:</p>
+<pre class="language-html"><code class="language-html">&lt;auro-select id="default-select"&gt;
+  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="cdnAccordion">
+<span slot="trigger">CDN Installation and Implementation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> CDN install & registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
+<auro-header level="3">Install & Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/cdnRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/cdnRegistration.md -->
+<p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"&gt;&lt;/script&gt;</code></pre>
+<p>This script registers the <code>&lt;auro-select&gt;</code> custom element globally. You can then use it in your HTML:</p>
+<pre class="language-html"><code class="language-html">&lt;auro-select id="cdn-select"&gt;
+  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>

package/components/select/demo/keyboard-behavior.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,6 +33,7 @@
     <!-- 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" />
     <style>
       table {
         --ds-color-container-secondary-default: transparent;
@@ -63,15 +64,26 @@
     <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('./keyboard-behavior.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('./keyboard-behavior.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>
 
     <!-- If additional elements are needed for the demo, add them here. -->

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

@@ -1,39 +1,250 @@
 <auro-header level="1" id="overview">Select - Keyboard Behavior</auro-header>
 <div class="contentWrapper">
-  <nav>
-    <auro-nav anchorNavContent=".scrollWrapper">
-      <!-- <span slot="label">Anchor Navigation</span> -->
-      <span slot="mobileToggleCollapsed">View More</span>
-      <span slot="mobileToggleExpanded">View Less</span>
-      <auro-anchorlink fluid href="#keyboard">Keyboard Behavior</auro-anchorlink>
-      <auro-anchorlink fluid href="#tabBehavior" class="level2 body-xs">Tab Behavior</auro-anchorlink>
-      <auro-anchorlink fluid href="#keyEvents" class="level2 body-xs">Key Events</auro-anchorlink>
-    </auro-nav>
-  </nav>
-  <div class="mainContent">
-  <div class="scrollWrapper">
-    <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-    <p>The <code>&lt;auro-select></code> component inherits the default tabindex behavior of <code>&lt;auro-dropdown></code> with no modifications.</p>
-    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/tabindex.md) -->
-    <!-- AURO-GENERATED-CONTENT:END -->
-    <p>There are no focusable elements inside the <code>&lt;auro-select></code> bib content.</p>
-    <div class="note">
-      <strong>Note:</strong> The following HTML5 select element keyboard behavior is unsupported in <code>&lt;auro-select multiSelect></code>:
-      <ul>
-        <li><strong>Extending selection (Shift+Arrow)</strong></li>
-        <li><strong>Select all (Cmd+A):</strong> Select all options</li>
-      </ul>
-    </div>
-    <auro-header level="2" id="keyEvents">Key Events</auro-header>
-    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
-    <!-- AURO-GENERATED-CONTENT:END -->
-    <auro-header level="3" id="keyEventsDropdown">Key Events inherited from Auro-Dropdown</auro-header>
-    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/keyEvents.md) -->
-    <!-- AURO-GENERATED-CONTENT:END -->
-    <section class="footnotes">
-    <hr />
-    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/footnotes/1.md) -->
-    <!-- AURO-GENERATED-CONTENT:END -->
-    </section>
-  </div>
+<nav>
+<auro-nav anchorNavContent=".scrollWrapper">
+<!-- <span slot="label">Anchor Navigation</span> -->
+<span slot="mobileToggleCollapsed">View More</span>
+<span slot="mobileToggleExpanded">View Less</span>
+<auro-anchorlink fluid href="#keyboard">Keyboard Behavior</auro-anchorlink>
+<auro-anchorlink fluid href="#tabBehavior" class="level2 body-xs">Tab Behavior</auro-anchorlink>
+<auro-anchorlink fluid href="#keyEvents" class="level2 body-xs">Key Events</auro-anchorlink>
+</auro-nav>
+</nav>
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+<p>The <code>&lt;auro-select></code> component inherits the default tabindex behavior of <code>&lt;auro-dropdown></code> with no modifications.</p>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/tabindex.md) -->
+<!-- The below content is automatically added from ./../../dropdown/docs/partials/tabindex.md -->
+<p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior, i.e., these keys step through the browser tabindex sequence.</auro-hyperlink></p>
+<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
+<p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
+<!-- AURO-GENERATED-CONTENT:END -->
+<p>There are no focusable elements inside the <code>&lt;auro-select></code> bib content.</p>
+<div class="note">
+<strong>Note:</strong> The following HTML5 select element keyboard behavior is unsupported in <code>&lt;auro-select multiSelect></code>:
+<ul>
+<li><strong>Extending selection (Shift+Arrow)</strong></li>
+<li><strong>Select all (Cmd+A):</strong> Select all options</li>
+</ul>
+</div>
+<auro-header level="2" id="keyEvents">Key Events</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td rowspan="6">ArrowDown</td>
+<td rowspan="2">-</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the next enabled option in the list. If the current <code>focused</code> option is the last enabled option, selection wraps to the first enabled option.
+</td>
+</tr>
+<tr>
+<td rowspan="2">Command</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="2">Option</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="6">ArrowUp</td>
+<td rowspan="2">-</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the previous enabled option in the list. If the current <code>focused</code> option is the first enabled option, selection wraps to the last enabled option.
+</td>
+</tr>
+<tr>
+<td rowspan="2">Command</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="2">Option</td>
+<td>Collapsed</td>
+<td>Trigger element</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
+<td>End</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="2">Enter</td>
+<td rowspan="2">-</td>
+<td>
+Expanded, without <code>multiSelect</code>
+</td>
+<td>Trigger element</td>
+<td>
+The current <code>focused</code> option is selected, closes the bib.
+</td>
+</tr>
+<tr>
+<td>
+Expanded, with <code>multiSelect</code>
+</td>
+<td>Trigger element</td>
+<td>
+The current <code>focused</code> option is toggled, does not close the bib.
+</td>
+</tr>
+<tr>
+<td>Home</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="2">Tab</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+The current <code>focused</code> option is selected.
+<div class="note">
+<strong>Note:</strong> the page will also navigate to the next focusable element in the tabindex sequence.
+</div>
+</td>
+</tr>
+<tr>
+<td>Shift</td>
+<td>Expanded</td>
+<td>Trigger element</td>
+<td>
+The current <code>focused</code> option is selected.
+<div class="note">
+<strong>Note:</strong> the page will also navigate to the previous focusable element in the tabindex sequence.
+</div>
+</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3" id="keyEventsDropdown">Key Events inherited from Auro-Dropdown</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../../dropdown/docs/partials/keyEvents.md -->
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td rowspan="2">Enter</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td>Escape</td>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Component <code>:host</code> or any <strong>focusable</strong> element within the component.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td rowspan="2">Space</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
 </div>

package/components/select/demo/keyboardBehavior.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"/>
@@ -63,15 +63,26 @@
     <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('./keyboardBehavior.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('./keyboardBehavior.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>
 
     <!-- If additional elements are needed for the demo, add them here. -->

package/components/select/demo/layout.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-select | Layout</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('./layout.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('./layout.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>
 
     <!-- If additional elements are needed for the demo, add them here. -->