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

package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html}

@@ -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;
@@ -65,7 +66,7 @@
     <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')
+      fetch('./keyboard-behavior.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);

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

@@ -0,0 +1,276 @@
+<auro-header level="1" id="overview">Combobox - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+<p>The component trigger contains an <code>&lt;auro-input&gt;</code> which has two elements:</p>
+<ol>
+<li><strong>Input</strong></li>
+<li><strong>Clear button:</strong> only shown when the input has a value.</li>
+</ol>
+<p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</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>On <strong>large viewport devices</strong> (e.g., desktop browser, tablet) there is no focusable content inside the component bib.</p>
+<p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which can receive <strong>Click</strong> and <strong>Tap</strong> events.</p>
+<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 -->
+<div class="note">
+<p><strong>Static vs Dynamic Option List:</strong> The <strong>expanded</strong> state can never be applied without list options rendered into the DOM. Since the component supports dynamic option lists generated <em>after</em> a value is typed into the <strong>input</strong>, certain key events (as noted in the <strong>Current State</strong> column of the table below) only function with the option list rendered into the DOM.</p>
+</div>
+<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, list options have been populated</td>
+<td>
+Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs depending on viewport size.
+</div>
+</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, list options have been populated</td>
+<td>
+Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</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, list options have been populated</td>
+<td>
+Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</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, list options have been populated</td>
+<td>
+Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</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, list options have been populated</td>
+<td>
+Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</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, list options have been populated</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</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>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="4">Enter</td>
+<td rowspan="4">-</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+Trigger input, <strong>NOT</strong> the input clear button
+</td>
+<td>
+The bib is opened.
+</td>
+</tr>
+<tr>
+<td>Collapsed</td>
+<td>
+Input clear button, <strong>NOT</strong> the input element
+</td>
+<td>
+The <strong>input</strong> value is cleared, <strong>focus</strong> moves to the trigger input element.
+</td>
+</tr>
+<tr>
+<td>Expanded, large viewport device</td>
+<td>
+Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
+</td>
+</tr>
+<tr>
+<td>Expanded, small viewport device</td>
+<td>
+Dialog input element, <strong>NOT</strong> the dialog input clear button
+</td>
+<td>
+The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
+</td>
+</tr>
+<tr>
+<td>Escape</td>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+Closes the bib, moves <strong>focus</strong> to the trigger input element.
+</td>
+</tr>
+<tr>
+<td>Home</td>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</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>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.
+</td>
+</tr>
+<tr>
+<td>Shift</td>
+<td>Expanded</td>
+<td>
+Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+Advances the <code>focused</code> option to the first enabled option in the list.
+<div class="note">
+<strong>Note:</strong> the bib will <strong>NOT</strong> close and the page will <strong>NOT</strong> navigate to the previous focusable element in the tabindex order.
+</div>
+</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+<div class="note">
+<p><strong>Note:</strong> The following keyboard behavior is unsupported at this time:</p>
+<ul>
+<li><strong>PageUp:</strong> The browser moves the <code>focused</code> option up by approximately one <strong>page</strong> of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly focused option is brought into view, usually aligning near the top of the visible list.</li>
+<li><strong>PageDown:</strong> The browser advances the <code>focused</code> option down by approximately one <strong>page</strong> of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly focused option is brought into view, often aligning near the bottom of the visible list.</li>
+</ul>
+</div>
+</div>
+</div>
+</div>

package/components/combobox/demo/layout.md

@@ -0,0 +1,112 @@
+<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. The trigger includes a text input that allows the user to type and filter the available options.
+</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. The list is filtered based on user input.
+</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 text content of the option will render in the input field.</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. Options are filtered as the user types in the input. 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.
+</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="helpText">Colors</auro-header>
+<auro-header level="4" id="defaultColor">Default Color</auro-header>
+<p>When the component is used on a light background.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-combobox>
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<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>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
+  &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&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;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="inverseColor">Inverse Color</auro-header>
+<p>When the component is used on a darker background, set `appearance="inverse"` to invert the component colors for proper contrast and visibility.</p>
+<div class="exampleWrapper--ondark">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+<auro-combobox appearance="inverse">
+<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>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox appearance="inverse"&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;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/components/combobox/demo/readme.html

@@ -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" />
 </head>
   <body class="auro-markdown">
     <main></main>
@@ -46,7 +47,30 @@
           const rawHtml = marked.parse(text);
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
-        })
+          addCopyButtons();
+        });
+
+      function addCopyButtons() {
+        document.querySelectorAll('auro-accordion pre[class*="language-"]').forEach((pre) => {
+          const wrapper = document.createElement('div');
+          wrapper.className = 'pre-wrapper';
+          pre.parentNode.insertBefore(wrapper, pre);
+          wrapper.appendChild(pre);
+          const btn = document.createElement('button');
+          btn.className = 'copy-btn';
+          btn.textContent = 'Copy';
+          btn.addEventListener('click', () => {
+            const code = pre.querySelector('code');
+            const raw = code ? code.textContent : pre.textContent;
+            const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n');
+            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/combobox/demo/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 -->
@@ -37,12 +47,12 @@ By default, `auro-combobox` behaves as a suggestion list. This means any value m
 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
@@ -52,9 +62,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 #### 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 -->
@@ -63,13 +71,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 +86,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
@@ -96,9 +100,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 -->
@@ -113,46 +115,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 -->