@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.31 → 0.0.0-pr1451.33

package/README.md

@@ -11,10 +11,10 @@ The following sections are editable by making changes to the following files:
 
 | SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
 |------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the kit                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this kit           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any kit specific information | `./docs/partials/readmeAddlInfo.md` |
-| kit Example Code | HTML sample code of the kits use            | `./apiExamples/basic.html`          |
+| Description            | Description of the kit                            | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this kit                 | `./docs/partials/useCases.md`       |
+| Install                | Installation instructions                         | `./docs/partials/kitInstall.md`     |
+| Getting Started        | Getting started links for each component          | `./docs/partials/gettingStarted.md` |
 -->
 
 # Formkit TESTING

package/components/checkbox/README.md

@@ -9,12 +9,11 @@ and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
-| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
-|------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the component                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
-| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                              |
+|------------------------|---------------------------------------------------|--------------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`           |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`              |
+| Getting Started        | Getting started link for this component           | `./docs/partials/readmeGettingStarted.md`  |
 -->
 
 # Checkbox
@@ -23,10 +22,6 @@ The following sections are editable by making changes to the following files:
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 <code>&lt;auro-checkbox&gt;</code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> for the purpose of allowing users to select one or more options of a limited number of choices.
 <!-- 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 -->
-<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-<!-- AURO-GENERATED-CONTENT:END -->
 
 ## Checkbox Use Cases
 

package/components/checkbox/demo/api.md

@@ -8,41 +8,41 @@ The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements..
 ## Properties
 
 | Property                        | Attribute                       | Type                     | Default     | Description                                      |
-|---------------------------------|---------------------------------|--------------------------|-------------|--------------------------------------------------|
-| [appearance](#appearance)                    | `appearance`                    | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [disabled](#disabled)                      | `disabled`                      | `boolean`                |             | If set, disables the checkbox group.             |
-| [error](#error)                         | `error`                         | `string`                 |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [horizontal](#horizontal)                    | `horizontal`                    | `boolean`                |             | If set, checkboxes will be aligned horizontally. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`                |             | If set, disables auto-validation on blur.        |
-| [onDark](#onDark)                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
-| [required](#required)                      | `required`                      | `boolean`                |             | Populates the `required` attribute on the element. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                      | `validity`                      | `string`                 |             | Specifies the `validityState` this element is in. |
+|---------------------------------|---------------------------------|--------------------------|-------------|--------------------------------------------------|
+| `appearance`                    | `appearance`                    | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| `disabled`                      | `disabled`                      | `boolean`                |             | If set, disables the checkbox group.             |
+| `error`                         | `error`                         | `string`                 |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| `horizontal`                    | `horizontal`                    | `boolean`                |             | If set, checkboxes will be aligned horizontally. |
+| `noValidate`                    | `noValidate`                    | `boolean`                |             | If set, disables auto-validation on blur.        |
+| `onDark`                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| `required`                      | `required`                      | `boolean`                |             | Populates the `required` attribute on the element. Used for client-side validation. |
+| `setCustomValidity`             | `setCustomValidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
+| `setCustomValidityCustomError`  | `setCustomValidityCustomError`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
+| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
+| `validity`                      | `validity`                      | `string`                 |             | Specifies the `validityState` this element is in. |
 
 ## Methods
 
 | Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
-| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+|------------|----------------------------------------|--------------------------------------------------|
+| `reset`    | `(): void`                             | Resets component to initial state.               |
+| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
 | Event                       | Type               | Description                                      |
 |-----------------------------|--------------------|--------------------------------------------------|
-| `auroFormElement-validated` |                    | Notifies that the `validity` and `errorMessage` values have changed. |
-| [input](#input)                     | `CustomEvent<any>` |                                                  |
+| `auroFormElement-validated` |                    | Notifies that the `validity` and `errorMessage` values have changed. |
+| `input`                     | `CustomEvent<any>` |                                                  |
 
 ## Slots
 
 | Name            | Description                                      |
-|-----------------|--------------------------------------------------|
-| [default](#default)       | The default slot for the checkbox items.         |
-| [helpText](#helpText)      | Allows for the helper text to be overridden.     |
-| [legend](#legend)        | Allows for the legend to be overridden.          |
-| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
+|-----------------|--------------------------------------------------|
+| `default`       | The default slot for the checkbox items.         |
+| `helpText`      | Allows for the helper text to be overridden.     |
+| `legend`        | Allows for the legend to be overridden.          |
+| `optionalLabel` | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 # auro-checkbox
 
@@ -51,21 +51,21 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 ## Properties
 
 | Property     | Attribute    | Type                     | Default     | Description                                      |
-|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
-| [appearance](#appearance) | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [checked](#checked)    | `checked`    | `boolean`                |             | If set to true, the checkbox will be filled with a checkmark. |
-| [disabled](#disabled)   | `disabled`   | `boolean`                |             | If set to true, the checkbox will not be clickable. |
-| [error](#error)      | `error`      | `boolean`                |             | If set to true, the checkbox will be displayed with an error state. |
-| [id](#id)         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| [name](#name)       | `name`       | `string`                 |             | Accepts any string and is used to identify related checkboxes when submitting form data. |
-| [onDark](#onDark)     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
-| [value](#value)      | `value`      | `string`                 |             | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
+|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
+| `appearance` | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| `checked`    | `checked`    | `boolean`                |             | If set to true, the checkbox will be filled with a checkmark. |
+| `disabled`   | `disabled`   | `boolean`                |             | If set to true, the checkbox will not be clickable. |
+| `error`      | `error`      | `boolean`                |             | If set to true, the checkbox will be displayed with an error state. |
+| `id`         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| `name`       | `name`       | `string`                 |             | Accepts any string and is used to identify related checkboxes when submitting form data. |
+| `onDark`     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| `value`      | `value`      | `string`                 |             | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods
 
 | Method  | Type       | Description                        |
-|---------|------------|------------------------------------|
-| [reset](#reset) | `(): void` | Resets component to initial state. |
+|---------|------------|------------------------------------|
+| `reset` | `(): void` | Resets component to initial state. |
 
 ## Events
 
@@ -73,21 +73,21 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 |-------------------------|--------------------|--------------------------------------------------|
 | `auroCheckbox-focusin`  | `CustomEvent<any>` |                                                  |
 | `auroCheckbox-focusout` | `CustomEvent<any>` |                                                  |
-| `auroCheckbox-input`    | `CustomEvent<any>` |                                                  |
-| [change](#change)                |                    | (Deprecated) Notifies when checked value is changed. |
-| [input](#input)                 |                    | Notifies when when checked value is changed by user's interface. |
+| `auroCheckbox-input`    | `CustomEvent<any>` |                                                  |
+| `change`                |                    | (Deprecated) Notifies when checked value is changed. |
+| `input`                 |                    | Notifies when when checked value is changed by user's interface. |
 
 ## Slots
 
 | Name      | Description                              |
-|-----------|------------------------------------------|
-| [default](#default) | The default slot for the checkbox label. |
+|-----------|------------------------------------------|
+| `default` | The default slot for the checkbox label. |
 
 ## CSS Shadow Parts
 
 | Part             | Description                               |
-|------------------|-------------------------------------------|
-| [checkbox](#checkbox)       | apply css to a specific checkbox.         |
+|------------------|-------------------------------------------|
+| `checkbox`       | apply css to a specific checkbox.         |
 | `checkbox-input` | apply css to a specific checkbox's input. |
 | `checkbox-label` | apply css to a specific checkbox's label. |
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/checkbox/demo/getting-started.md

@@ -30,8 +30,8 @@
 <div class="mainContent">
 <div class="scrollWrapper">
 <section>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/pages/install.md) -->
-<!-- The below content is automatically added from ./../docs/pages/install.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
 <auro-header level="2" id="setup">Setup</auro-header>
 <auro-accordion-group Emphasis>
 <auro-accordion expanded class="section" id="recommendedAccordion">

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

@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605061848';
+var formkitVersion = '202605062137';
 
 // 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/keyboard-behavior.md

@@ -0,0 +1,36 @@
+<auro-header level="1" id="overview">Checkbox - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+<p>Each <code>&lt;auro-checkbox&gt;</code> participates independently in the browser's default <code>tabindex</code> sequence. When a checkbox is <code>disabled</code> it is removed from the <code>tabindex</code> sequence.</p>
+<p>Arrow key navigation within a <code>&lt;auro-checkbox-group&gt;</code> is not currently supported.</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 -->
+<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>Space</td>
+<td>-</td>
+<td>Not disabled</td>
+<td>Checkbox element</td>
+<td>
+              Toggles the <code>checked</code> state. Calls <code>preventDefault()</code> to block page scroll.
+</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</div>
+</div>

package/components/checkbox/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","customize.md","design.md","getting-started.md","index.md","install.md","voiceover.md"]
+["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]

package/components/checkbox/demo/readme.md

@@ -9,12 +9,11 @@ and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
-| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
-|------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the component                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
-| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                              |
+|------------------------|---------------------------------------------------|--------------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`           |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`              |
+| Getting Started        | Getting started link for this component           | `./docs/partials/readmeGettingStarted.md`  |
 -->
 
 # Checkbox
@@ -23,10 +22,6 @@ The following sections are editable by making changes to the following files:
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 <code>&lt;auro-checkbox&gt;</code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> for the purpose of allowing users to select one or more options of a limited number of choices.
 <!-- 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 -->
-<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-<!-- AURO-GENERATED-CONTENT:END -->
 
 ## Checkbox Use Cases
 

package/components/checkbox/dist/index.js

@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605061848';
+var formkitVersion = '202605062137';
 
 // 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

@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605061848';
+var formkitVersion = '202605062137';
 
 // 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

@@ -9,12 +9,11 @@ and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
-| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
-|------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the component                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
-| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                              |
+|------------------------|---------------------------------------------------|--------------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`           |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`              |
+| Getting Started        | Getting started link for this component           | `./docs/partials/readmeGettingStarted.md`  |
 -->
 
 # Combobox
@@ -35,10 +34,6 @@ The following sections are editable by making changes to the following files:
 <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 -->
-<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-<!-- AURO-GENERATED-CONTENT:END -->
 
 ## Combobox Use Cases
 

package/components/combobox/demo/getting-started.md

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

package/components/combobox/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","install.md","keyboard-behavior.md","voiceover.md"]
+["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]

package/components/combobox/demo/readme.md

@@ -9,12 +9,11 @@ and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
-| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
-|------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the component                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
-| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                              |
+|------------------------|---------------------------------------------------|--------------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`           |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`              |
+| Getting Started        | Getting started link for this component           | `./docs/partials/readmeGettingStarted.md`  |
 -->
 
 # Combobox
@@ -35,10 +34,6 @@ The following sections are editable by making changes to the following files:
 <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 -->
-<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-<!-- AURO-GENERATED-CONTENT:END -->
 
 ## Combobox Use Cases
 

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

@@ -5278,7 +5278,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605061848';
+var formkitVersion$2 = '202605062137';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -13030,7 +13030,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605061848';
+var formkitVersion$1 = '202605062137';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14095,7 +14095,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605061848';
+var formkitVersion = '202605062137';
 
 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/dist/index.js

@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605061848';
+var formkitVersion$2 = '202605062137';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12956,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605061848';
+var formkitVersion$1 = '202605062137';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14021,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605061848';
+var formkitVersion = '202605062137';
 
 var styleCss$1 = css`.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/dist/registered.js

@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605061848';
+var formkitVersion$2 = '202605062137';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12956,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605061848';
+var formkitVersion$1 = '202605062137';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14021,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605061848';
+var formkitVersion = '202605062137';
 
 var styleCss$1 = css`.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}`;