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

package/components/checkbox/README.md

@@ -43,11 +43,7 @@ The `<auro-checkbox>` 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/auro-formkit</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 -->
@@ -56,13 +52,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 -->
@@ -73,9 +67,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-checkbox/+esm"></script>
-```
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -89,9 +81,7 @@ 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 -->
@@ -106,37 +96,33 @@ However, if you need to load multiple versions of the same component on a single
 
 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 { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
-
+​
 // Register with a custom name if desired
 AuroCheckbox.register('custom-checkbox');
-AuroCheckboxGroup.register('custom-checkbox-group');
-```
+AuroCheckboxGroup.register('custom-checkbox-group');</code></pre>
 
 This will create a new custom element `<custom-checkbox>` and `<custom-checkbox-group>` that behaves exactly like `<auro-checkbox>` and `<auro-checkbox-group>`, allowing both to coexist on the same page without interfering with each other.
 
 <div class="exampleWrapper exampleWrapper--flex">
-  <custom-checkbox-group>
-    <span slot="legend">Form label goes here</span>
-    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
-  </custom-checkbox-group>
+<custom-checkbox-group>
+<span slot="legend">Form label goes here</span>
+<custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+<custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+<custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+<custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+</custom-checkbox-group>
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 
-```html
-  <custom-checkbox-group>
-    <span slot="legend">Form label goes here</span>
-    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
-  </custom-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;custom-checkbox-group&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+  &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+  &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+  &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+&lt;/custom-checkbox-group&gt;</code></pre>
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/checkbox/demo/api.min.js

@@ -1689,7 +1689,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604232250';
+var formkitVersion = '202604282013';
 
 // 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/demo/index.min.js

@@ -1681,7 +1681,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604232250';
+var formkitVersion = '202604282013';
 
 // 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/demo/readme.md

@@ -43,8 +43,6 @@ The `<auro-checkbox>` 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
-
 <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) -->

package/components/checkbox/dist/index.js

@@ -1634,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604232250';
+var formkitVersion = '202604282013';
 
 // 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

@@ -1634,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604232250';
+var formkitVersion = '202604282013';
 
 // 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

@@ -24,15 +24,15 @@ The following sections are editable by making changes to the following files:
 <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>
+<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>
+<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) -->
@@ -47,12 +47,12 @@ The following sections are editable by making changes to the following files:
 The `<auro-combobox>` element should be used in situations where users may:
 
 * Search
-  * Airports: user looks for a specific airport by searching for the city name or airport code
-  * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
+* Airports: user looks for a specific airport by searching for the city name or airport code
+* Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
 * Filter
-  * Options: user chooses filters for their search by using combobox
+* Options: user chooses filters for their search by using combobox
 * Select
-  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
+* Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Getting Started
@@ -60,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/auro-formkit</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 -->
@@ -73,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 -->
@@ -90,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/auro-formkit@latest/auro-combobox/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -106,9 +98,7 @@ 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 -->
@@ -123,46 +113,42 @@ However, if you need to load multiple versions of the same component on a single
 
 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>
+<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>
+<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>
-```
+<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-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/combobox/demo/accessibility.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-combobox | Accessibility</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"/>
@@ -39,15 +39,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('./accessibility.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('./accessibility.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/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"/>
@@ -39,19 +39,31 @@
     <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();
-          addCopyButtons();
-        });
+      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('./api.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('auro-accordion pre[class*="language-"]').forEach((pre) => {
+        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);
@@ -60,9 +72,8 @@
           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');
+            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);

package/components/combobox/demo/api.min.js

@@ -5228,7 +5228,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604232250';
+var formkitVersion$2 = '202604282013';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -6377,7 +6377,7 @@ var styleCss$1$1 = i$7`.util_displayInline{display:inline}.util_displayInlineBlo
 
 var styleDefaultCss = i$7`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
 
-var colorBaseCss = i$7`.wrapper{border-color:red;background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
+var colorBaseCss = i$7`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
 var tokensCss$1$1 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
 
@@ -12980,7 +12980,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604232250';
+var formkitVersion$1 = '202604282013';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14045,7 +14045,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604232250';
+var formkitVersion = '202604282013';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/demo/design.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-combobox | Design</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"/>
@@ -39,19 +39,31 @@
     <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('./design.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-          addCopyButtons();
-        });
+      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('./design.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('auro-accordion pre[class*="language-"]').forEach((pre) => {
+        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);
@@ -60,9 +72,8 @@
           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');
+            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);