@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.0

package/components/checkbox/demo/voiceover.md

@@ -0,0 +1,37 @@
+<auro-header level="1" id="overview">Checkbox - VoiceOver Behavior</auro-header>
+<p>This page documents the VoiceOver experience when using the <code>&lt;auro-checkbox&gt;</code> component. It covers announcements and gestures for interacting with checkbox groups.</p>
+<auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive Announcements</auro-header>
+<auro-header level="3" id="voiceOverFocusAnnouncement">Focus</auro-header>
+<p>When focus moves to a checkbox the following is announced:</p>
+<ol>
+<li><strong>Label:</strong> The checkbox label text (default slot content)</li>
+<li><strong>State:</strong> <em>"checked"</em> or <em>"unchecked"</em></li>
+<li><strong>Role:</strong> <em>"checkbox"</em></li>
+<li>
+<strong>State hints:</strong>
+<table class="compressed body-xs">
+<thead>
+<tr>
+<th>State</th>
+<th>What gets announced</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Disabled</td>
+<td><em>"dimmed"</em></td>
+</tr>
+<tr>
+<td>Invalid</td>
+<td><em>"invalid data"</em></td>
+</tr>
+</tbody>
+</table>
+</li>
+</ol>
+<auro-header level="3" id="voiceOverGroupContext">Group Context</auro-header>
+<p>When entering a checkbox group, VoiceOver announces the legend text followed by <em>"group"</em> to provide context for the set of related checkboxes.</p>
+<auro-header level="3" id="voiceOverToggle">Toggle Announcement</auro-header>
+<p>When the user toggles a checkbox via <kbd>Space</kbd> or double-tap, VoiceOver announces the new state: <em>"checked"</em> or <em>"unchecked"</em>.</p>
+<auro-header level="3" id="voiceOverNavigation">Navigation</auro-header>
+<p>Each checkbox is an independent tab stop. Users navigate between checkboxes using <kbd>Tab</kbd> / <kbd>Shift+Tab</kbd> or VoiceOver's swipe gestures. Arrow key navigation within a group is not currently supported.</p>

package/components/checkbox/dist/auro-checkbox-group.d.ts

@@ -95,12 +95,12 @@ export class AuroCheckboxGroup extends LitElement {
      */
     static register(name?: string): void;
     _initializeDefaults(): void;
-    appearance: string;
+    appearance: string | undefined;
     validity: any;
     disabled: any;
-    required: boolean;
-    horizontal: boolean;
-    onDark: boolean;
+    required: boolean | undefined;
+    horizontal: boolean | undefined;
+    onDark: boolean | undefined;
     /**
      * Indicates whether the checkbox group is in a dirty state (has been interacted with).
      * @type {boolean}
@@ -141,7 +141,7 @@ export class AuroCheckboxGroup extends LitElement {
      */
     private handleValueUpdate;
     firstUpdated(): void;
-    focusWithin: boolean;
+    focusWithin: boolean | undefined;
     /**
      * Helper method that handles the state of preselected checkboxes.
      * @private
@@ -154,7 +154,7 @@ export class AuroCheckboxGroup extends LitElement {
      * @returns {void}
      */
     private handleItems;
-    checkboxes: Element[];
+    checkboxes: Element[] | undefined;
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/checkbox/dist/auro-checkbox.d.ts

@@ -46,7 +46,6 @@ export class AuroCheckbox extends LitElement {
          */
         id: {
             type: StringConstructor;
-            reflect: boolean;
         };
         /**
          * The id for input node.
@@ -133,12 +132,12 @@ export class AuroCheckbox extends LitElement {
      */
     static register(name?: string): void;
     _initializeDefaults(): void;
-    appearance: string;
+    appearance: string | undefined;
     checked: any;
-    disabled: boolean;
-    error: boolean;
-    onDark: boolean;
-    touched: boolean;
+    disabled: boolean | undefined;
+    error: boolean | undefined;
+    onDark: boolean | undefined;
+    touched: boolean | undefined;
     /**
      * @private
      */
@@ -172,8 +171,8 @@ export class AuroCheckbox extends LitElement {
      * @returns {HTMLElement}
      */
     private generateIconHtml;
-    dom: Document;
-    svg: ChildNode;
+    dom: Document | undefined;
+    svg: ChildNode | null | undefined;
     /**
      * Resets component to initial state.
      * @returns {void}
@@ -186,7 +185,7 @@ export class AuroCheckbox extends LitElement {
      */
     private updateAriaLabel;
     firstUpdated(): void;
-    inputId: string;
+    inputId: string | undefined;
     /**
      * Handles keydown event to toggle the checkbox with Space key.
      * @private

package/components/checkbox/dist/index.js

@@ -190,8 +190,7 @@ class AuroCheckbox extends LitElement {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -1635,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605011845';
+var formkitVersion = '202605041857';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -190,8 +190,7 @@ class AuroCheckbox extends LitElement {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -1635,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605011845';
+var formkitVersion = '202605041857';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/README.md

@@ -21,9 +21,19 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-`<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
-
-By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
+<p><code>&lt;auro-combobox&gt;</code> combines a text input with a filterable dropdown menu, letting users either type a value or pick one from a list. As the user types, the menu narrows to show only matching options.</p>
+<p>The component supports two modes:</p>
+<ul>
+<li><strong>Suggestion (default)</strong> — The user may type any value. The menu provides suggestions but does not restrict input.</li>
+<li><strong>Filter</strong> — The user must select from the menu. Typing filters the available options but does not set the component's value. The value is only set when a menu option is selected.</li>
+</ul>
+<p>Common use cases:</p>
+<ul>
+<li><strong>Airport or city search</strong> — Type a city name or airport code to filter a long list of destinations.</li>
+<li><strong>Country or region selection</strong> — Quickly find and select from a large set of geographic options.</li>
+<li><strong>Autocomplete fields</strong> — Provide type-ahead suggestions for form fields where the set of valid values is known.</li>
+<li><strong>Search with suggestions</strong> — Offer recommended results while still allowing freeform input.</li>
+</ul>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -50,11 +60,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
-#### NPM Installation
-
-```shell
-$ npm i @aurodesignsystem/auro-formkit
-```
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -63,13 +69,11 @@ $ npm i @aurodesignsystem/auro-formkit
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
-```json
-{
+<pre class="language-json"><code class="language-json">{
     "compilerOptions": {
         "moduleResolution": "bundler"
     }
-}
-```
+}</code></pre>
 
 This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -80,9 +84,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+esm"></script>
-```
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/@latest/auro-combobox/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -96,63 +98,36 @@ Running the `dev` command will open a `localhost` development server for all com
 
 To only develop a single component, use the `--filter` flag:
 
-```shell
-npx turbo dev --filter=@aurodesignsystem/auro-input
-```
+<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 -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
+<!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.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 <code>register(name)</code> method with a unique name:</p>
+<!-- AURO-GENERATED-CONTENT:END -->
 
-## 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.
-
-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.
-
-You can do this by importing only the component class and using the `register(name)` method with a unique name:
-
-```js
-// Import the class only
+<pre class="language-js"><code class="language-js">// Import the class only
 import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
-
+​
 // Register with a custom name if desired
-AuroCombobox.register('custom-combobox');
-```
+AuroCombobox.register('custom-combobox');</code></pre>
 
 This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
 
-<div class="exampleWrapper exampleWrapper--flex">
-  <custom-combobox>
-    <span slot="bib.fullscreen.headline">Bib Header</span>
-    <span slot="label">Name</span>
-    <auro-menu>
-      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-      <auro-menuoption static nomatch>No matching option</auro-menuoption>
-    </auro-menu>
-  </custom-combobox>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-```html
-  <custom-combobox>
-    <span slot="bib.fullscreen.headline">Bib Header</span>
-    <span slot="label">Name</span>
-    <auro-menu>
-      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-      <auro-menuoption static nomatch>No matching option</auro-menuoption>
-    </auro-menu>
-  </custom-combobox>
-```
-</auro-accordion>
+<pre class="language-html"><code class="language-html">&lt;custom-combobox&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/custom-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/combobox/demo/accessibility.html

@@ -0,0 +1,50 @@
+<!--
+  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/accessibility.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- 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-combobox | Accessibility</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-combobox'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.min.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./accessibility.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <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>
+  </body>
+</html>

package/components/combobox/demo/accessibility.md

@@ -0,0 +1,77 @@
+<auro-header level="1" id="overview">Combobox - Accessibility</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+The `auro-combobox` component follows the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" target="_blank">W3C APG Combobox</a> pattern. This page documents the ARIA semantics, screen reader announcements, and other accessibility behaviors built into the component.
+
+For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+
+<auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
+<auro-header level="3" id="trigger">Trigger</auro-header>
+The trigger element exposes the following ARIA attributes:
+
+| Attribute | Value | Description |
+|---|---|---|
+| `role` | `combobox` | Identifies the trigger as a combobox control. |
+| `aria-expanded` | `true` / `false` | Reflects whether the bib (listbox) is currently open. |
+| `aria-controls` | `{bib-id}` | References the bib element that the trigger controls. |
+| `aria-labelledby` | `{label-id}` | Associates the trigger with its visible label text. |
+| `aria-activedescendant` | `{option-id}` | Points to the currently highlighted option when the bib is open. Cleared when the bib closes. |
+| `aria-autocomplete` | `list` / `both` | Indicates the type of autocomplete behavior provided by the combobox. |
+
+<auro-header level="3" id="menuOptions">Menu Options</auro-header>
+Each menu option exposes the following ARIA attributes:
+
+| Attribute | Value | Description |
+|---|---|---|
+| `role` | `option` | Identifies each item as a selectable option. |
+| `aria-selected` | `true` / `false` | Indicates whether the option is currently selected. |
+| `aria-setsize` | `{count}` | Total number of options available, so screen readers can announce "option X of Y." |
+| `aria-posinset` | `{index}` | The 1-based position of the option within the set. |
+
+<auro-header level="3" id="helpTextAndErrors">Help Text and Errors</auro-header>
+- Help text is associated with the component so screen readers can announce contextual guidance.
+- When validation fails, the error message is rendered with `role="alert"` and `aria-live="assertive"` to ensure it is announced immediately.
+
+<auro-header level="2" id="activeDescendant">Active Descendant</auro-header>
+Focus management in `auro-combobox` follows the **active descendant** pattern rather than moving DOM focus between options:
+
+1. When the bib opens, focus remains on the **input** element.
+2. Arrow keys update `aria-activedescendant` on the input to reference the currently highlighted option.
+3. This allows screen readers to announce each option as the user navigates without moving focus away from the input.
+
+When the bib closes, `aria-activedescendant` is cleared so stale references are not announced.
+
+<auro-header level="2" id="screenReaderAnnouncements">Screen Reader Announcements</auro-header>
+The component uses a visually hidden live region (`aria-live="polite"`) to announce state changes:
+
+- **Option highlighted** — When an option becomes active (via arrow keys or type-ahead), the live region announces the option text along with its selected state (e.g. "Apples, not selected").
+- **Option selected** — After an option is selected, the live region announces the selected value (e.g. "Apples, selected"). This announcement is slightly delayed to avoid being overridden by the bib's collapse announcement.
+
+<auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
+- The `label` slot content is used as the accessible name for both the input (via `aria-labelledby`) and the menu (via `aria-label`).
+- A label is required. Without it, assistive technology users will not have context for what the combobox controls.
+- The `(optional)` label is automatically appended when the `required` attribute is not set.
+
+<auro-header level="2" id="fullscreenBehavior">Fullscreen (Modal) Behavior</auro-header>
+On smaller viewports, the bib opens as a fullscreen modal dialog:
+
+- The dialog is opened with `showModal()`, which provides **native focus trapping** — only elements inside the dialog are reachable via Tab.
+- Content outside the dialog is automatically made **inert** by the browser, preventing interaction with the page behind it.
+- The dialog receives an accessible label derived from the component's `label` slot text via `aria-labelledby`.
+- A close button inside the dialog is focused when the modal opens, giving screen reader users an immediate action to dismiss it.
+- Touch scrolling on the page behind the dialog is blocked to prevent the background from scrolling into view.
+
+<auro-header level="2" id="reducedMotion">Reduced Motion</auro-header>
+The component respects the `prefers-reduced-motion` media query. When the user has requested reduced motion, scroll animations (e.g. scrolling the selected or active option into view) use instant scrolling instead of smooth scrolling.
+
+<auro-header level="2" id="formParticipation">Form Participation</auro-header>
+A hidden native `<input>` element is rendered alongside the custom component with `aria-hidden="true"`. This element:
+
+- Participates in HTML form submissions, ensuring the selected value is included in form data.
+- Supports the `required` and `disabled` attributes.
+- Is invisible and unreachable by assistive technology — all user interaction goes through the custom component.
+
+</div>
+</div>
+</div>

package/components/combobox/demo/api.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-combobox</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-combobox'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,33 +33,21 @@
     <!-- 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.min.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('./api.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        });
-    </script>
-
     <!-- 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-button@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
-
-    <script type="module" data-demo-script="true">
-      import { initExamples } from "./api.min.js"
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./api.md');
+      import { initExamples } from "./api.min.js";
       initExamples();
     </script>
+    <script src="./api.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>