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

package/components/combobox/demo/install.md

@@ -0,0 +1,77 @@
+<auro-header level="1" id="install">Install</auro-header>
+<auro-header level="2" id="npmInstall">NPM Installation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="2" id="gettingStarted">Getting Started</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/gettingStarted.md -->
+
+### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.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 -->
+<auro-header level="2" id="defaultSetup">Default Component Setup</auro-header>
+Once installed, the component can be used in your project by importing the component's registered module:
+
+<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
+
+This import registers the `<auro-combobox>` custom element globally. You can then use it in your HTML:
+
+<pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
+  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
+
+<auro-header level="2" id="cdn">Install from CDN</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/bundleInstallDescription.md) -->
+<!-- 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.
+
+<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 -->
+<auro-header level="2" id="customRegistration">Custom Component Registration</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../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 -->
+
+<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');</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.
+
+<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/{keyboardBehavior.html → keyboard-behavior.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,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.min.css" />
     <style>
       table {
         --ds-color-container-secondary-default: transparent;
@@ -63,15 +64,8 @@
     <main></main>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./keyboardBehavior.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
+      import { renderPage } from './demo-support.js';
+      await renderPage('./keyboard-behavior.md');
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

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/keyboard-behavior/keyEvents.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyboard-behavior/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/readme.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,20 +33,14 @@
     <!-- 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('./readme.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
+      import { renderPage } from './demo-support.js';
+      await renderPage('./readme.md');
     </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 -->
@@ -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 -->