@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.30 → 0.0.0-pr1451.32

package/README.md

@@ -11,13 +11,13 @@ 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
+# Formkit TESTING
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
@@ -108,157 +108,20 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/gettingStarted.md) -->
 <!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->
 
-### TypeScript Module Resolution
-
-When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
-
-```json
-{
-    "compilerOptions": {
-        "moduleResolution": "bundler"
-    }
-}
-```
-
-This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Install from CDN
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/bundleInstallDescription.md) -->
-<!-- The below content is automatically added from ./docs/partials/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.
-
-Each component is imported individually by its export path:
-
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Additional Information
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
-<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
-
-### Turborepo Overview
-
-This monorepo is managed using [Turborepo](https://turborepo.org/).
-
-### Managing dependencies
-
-#### Best practices for dependency installation
-
-When you install a dependency in a component or package in `auro-formkit`, you should install it directly in the package that uses it. 
-
-The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
-
-### Types of Dependencies by Source
-
-#### External Dependencies
-- These are packages fetched from the `npm` registry (e.g., Lit, Rollup, Sass)
-- Declared in `package.json` using exact versions or version ranges
-- Installed in `node_modules` during `npm install` or `yarn install`
-
-#### Internal Dependencies
-- These are packages from within the `auro-formkit` monorepo
-- Allow sharing code between different packages in your repository
-- Example: The `@aurodesignsystem/combobox` package might depend on `@aurodesignsystem/input`
-- Must be declared in `package.json` just like external dependencies
-- Use workspace protocols (e.g., `"workspace:*"` or `"workspace:^1.0.0"`)
-
-### Types of Dependencies by Purpose
-
-#### Dependencies (`dependencies`)
-- Required for the package to function in production
-- Example:
-  ```json
-  {
-    "dependencies": {
-      "lit": "^3.0.0"
-    }
-  }
-  ```
-
-### Development Dependencies (`devDependencies`)
-- Only needed during development, testing, or building
-- Not included in the production bundle
-- Example:
-  ```json
-  {
-    "devDependencies": {
-      "@aurodesignsystem/auro-dropdown": "*",
-      "@aurodesignsystem/build-tools": "*",
-      "rollup": "^4.24.4"
-    }
-  }
-  ```
-
-### Example: Component Dependencies
-
-Let's use `@aurodesignsystem/combobox` as an example to illustrate these concepts:
-
-```json
-{
-  "name": "@aurodesignsystem/combobox",
-  "dependencies": {
-    "lit": "^3.2.1"
-  },
-  "devDependencies": {
-    // Internal component dependencies
-    "@aurodesignsystem/auro-dropdown": "*",
-    "@aurodesignsystem/auro-input": "*",
-    // Build utilities
-    "rollup": "^4.24.4",
-    "@aurodesignsystem/build-tools": "*"
-  }
-}
-```
-
-This structure ensures that:
-1. The package explicitly declares all its dependencies
-2. Internal dependencies are properly tracked and versioned
-3. Development tools are separated from production dependencies
-
-- External dependencies come from the `npm` registry.
-
-- Internal dependencies let you share functionality within your repository.
-
-This practice has several benefits:
-
-- **Improved clarity:** It's easier to understand what a package depends on when its dependencies are listed in its `package.json`. Developers working in the repository can see at a glance what dependencies are used within the package.
-
-- **Enhanced flexibility:** In a monorepo at scale, it can be unrealistic to expect each package to use the same version of an external dependency.
-
-- **Better caching ability:** If you install too many dependencies in the root of your repository, you'll be changing the workspace root whenever you add, update, or delete a dependency, leading to unnecessary cache misses.
-
-- **Pruning unused dependencies:** When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need.
-
-For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
-
-### Root `package.json`
-
-The only dependencies that belong in the root `package.json` are **tools for managing the repository**.
-
-Some examples of dependencies that make sense to install in the root are `turbo`, `husky`, or `stylelint`.
-
-Conversely, dependencies Auro components rely on should be installed in their respective packages, such as `Lit`, `Rollup`, or other `auro-formkit` dependencies.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit Development
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
-
-### Filtering
-
-Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
-
-To only develop a single component, use the `--filter` flag:
-
-```shell
-npx turbo dev --filter=@aurodesignsystem/auro-input
-```
+### Getting Started
+
+Each component contains its own Getting Started documentation.
+
+<ul>
+  <li><a href="https://auro.alaskaair.com/components/auro/checkbox/getting-started">checkbox</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/combobox/getting-started">combobox</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/counter/getting-started">counter</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/datepicker/getting-started">datepicker</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/dropdown/getting-started">dropdown</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/form/getting-started">form</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/input/getting-started">input</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/menu/getting-started">menu</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/radio/getting-started">radio</a></li>
+  <li><a href="https://auro.alaskaair.com/components/auro/select/getting-started">select</a></li>
+</ul>
 <!-- AURO-GENERATED-CONTENT:END -->

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
 
@@ -40,73 +35,7 @@ The <code>&lt;auro-checkbox&gt;</code> element should be used in situations wher
 
 ## Getting Started
 
-<!-- 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-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 -->
-
-## Install from CDN
-
-<!-- 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-checkbox/+esm"&gt;&lt;/script&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit Development
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
-
-### Filtering
-
-Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
-
-To only develop a single component, use the `--filter` flag:
-
-<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 -->
-<auro-header level="2" id="customRegistration">Custom Component Registration for Version Management</auro-header>
-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.
-
-You can do this by importing only the component class and using the <code>register(name)</code> method with a unique name:
-
-<pre class="language-js"><code class="language-js">// Import the class only
-import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
-​
-// Register with a custom name if desired
-AuroCheckbox.register('custom-checkbox');
-AuroCheckboxGroup.register('custom-checkbox-group');</code></pre>
-
-This will create a new custom element <code>&gt;custom-checkbox&lt;</code> and <code>&gt;custom-checkbox-group&lt;</code> that behaves exactly like <code>&gt;auro-checkbox&lt;</code> and <code>&lt;auro-checkbox-group&gt;</code>, allowing both to coexist on the same page without interfering with each other.
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
-<pre class="language-html"><code class="language-html">&lt;custom-checkbox-group&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-&lt;/custom-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeGettingStarted.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeGettingStarted.md -->
+For Getting Started instructions, visit the [auro-checkbox Getting Started page](https://auro.alaskaair.com/components/auro/checkbox/getting-started).
 <!-- AURO-GENERATED-CONTENT:END -->

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/demo-support.min.js

@@ -22886,6 +22886,19 @@ const BIGINT     = 8;
 
 const env = typeof self === 'object' ? self : globalThis;
 
+const guard = (name, init) => {
+  switch (name) {
+    case 'Function':
+    case 'SharedWorker':
+    case 'Worker':
+    case 'eval':
+    case 'setInterval':
+    case 'setTimeout':
+      throw new TypeError('unable to deserialize ' + name);
+  }
+  return new env[name](init);
+};
+
 const deserializer = ($, _) => {
   const as = (out, index) => {
     $.set(index, out);
@@ -22933,7 +22946,7 @@ const deserializer = ($, _) => {
       }
       case ERROR: {
         const {name, message} = value;
-        return as(new env[name](message), index);
+        return as(guard(name, message), index);
       }
       case BIGINT:
         return as(BigInt(value), index);
@@ -22946,7 +22959,7 @@ const deserializer = ($, _) => {
         return as(new DataView(buffer), value);
       }
     }
-    return as(new env[type](value), index);
+    return as(guard(type, value), index);
   };
 
   return unpair;

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 = '202605052101';
+var formkitVersion = '202605062026';
 
 // 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"]