@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.15 → 0.0.0-pr1451.16

package/components/checkbox/README.md

@@ -21,7 +21,7 @@ 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-checkbox>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of allowing users to select one or more options of a limited number of choices.
+<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 -->
@@ -32,7 +32,7 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-checkbox>` element should be used in situations where users may:
+The <code>&lt;auro-checkbox&gt;</code> element should be used in situations where users may:
 
 * Be filling out a form
 * Need to select one or more options
@@ -84,10 +84,8 @@ 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 -->
-
-## Custom Component Registration for Version Management
-
+<!-- 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.
 
 When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
@@ -105,24 +103,14 @@ AuroCheckboxGroup.register('custom-checkbox-group');</code></pre>
 
 This will create a new custom element `<custom-checkbox>` and `<custom-checkbox-group>` that behaves exactly like `<auro-checkbox>` and `<auro-checkbox-group>`, allowing both to coexist on the same page without interfering with each other.
 
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-checkbox-group>
-<span slot="legend">Form label goes here</span>
-<custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-<custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-<custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-<custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
-</custom-checkbox-group>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
+<!-- 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-accordion>
+&lt;/custom-checkbox-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/checkbox/demo/accessibility.html

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/accessibility.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-checkbox | Accessibility</title>
+
+    <!-- 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-checkbox'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"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- 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="./styles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./accessibility.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+  </body>
+</html>

package/components/checkbox/demo/accessibility.md

@@ -0,0 +1,44 @@
+<auro-header level="1" id="overview">Checkbox - Accessibility</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+The `auro-checkbox` component follows native HTML checkbox semantics. This page documents the ARIA attributes, screen reader behavior, and other accessibility features built into the component.
+
+For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+
+<auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
+<auro-header level="3" id="checkboxGroup">Checkbox Group</auro-header>
+The `<auro-checkbox-group>` element uses a `<fieldset>` with a `<legend>` internally, providing native grouping semantics:
+
+| Attribute | Value | Description |
+|---|---|---|
+| `role` | `group` (implicit via `fieldset`) | Groups related checkboxes together. |
+| `aria-invalid` | `true` / `false` | Reflects whether the group is currently in an invalid state. |
+
+<auro-header level="3" id="checkboxElement">Checkbox</auro-header>
+Each `<auro-checkbox>` renders a native `<input type="checkbox">` inside its shadow DOM:
+
+| Attribute | Value | Description |
+|---|---|---|
+| `type` | `checkbox` | Native checkbox input type. |
+| `aria-checked` | `true` / `false` | Reflects the checked state of the checkbox. |
+| `aria-disabled` | `true` / `false` | Indicates whether the checkbox is disabled. |
+
+<auro-header level="2" id="screenReaderAnnouncements">Screen Reader Announcements</auro-header>
+- **Focus** — When focus moves to a checkbox, the screen reader announces the checkbox label, its checked/unchecked state, and role ("checkbox").
+- **State change** — Toggling the checkbox announces the new state ("checked" or "unchecked").
+- **Group context** — The legend text provides group context when navigating between groups.
+- **Error** — When validation fails, the error message is announced to screen reader users.
+
+<auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
+- The `legend` slot content provides the accessible group label via the native `<legend>` element.
+- Each checkbox's default slot content provides its individual accessible label.
+- A label is required for each checkbox. Without it, assistive technology users will not have context for what the checkbox controls.
+- The `(optional)` label is automatically appended when the `required` attribute is not set.
+
+<auro-header level="2" id="formParticipation">Form Participation</auro-header>
+The `<auro-checkbox-group>` participates in form validation and submission. When used inside a `<form>` or `<auro-form>`, checked checkbox values are included in the form data.
+
+</div>
+</div>
+</div>

package/components/checkbox/demo/api.html

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
 
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/apiExamples.md
+  All demo code should be added/edited in ./demo/api.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -18,44 +18,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-checkbox</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-checkbox'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"/>
 
     <!-- Design Token Alaska Theme -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
+
     <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr243.4/dist/bundled/themes/alaska.global.min.css" />
-    
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
     <!-- 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" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.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('./api.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        });
-    </script>
-    
-    <script type="module" data-demo-script="true">
-      import { initExamples } from "./api.min.js"
-      initExamples();
-    </script>
-
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./api.md');
+      import { initExamples } from "./api.min.js";
+      initExamples();
+    </script>
+    <script src="./api.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/checkbox/demo/api.md

@@ -90,380 +90,4 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 | `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 -->
-
-## Basic
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-<!-- The below content is automatically added from ./../apiExamples/basic.html -->
-<auro-checkbox-group>
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
-<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
-<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"&gt;Checkbox option that has some extra text that should wrap when rendered in a narrow container&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Property & Attribute Examples
-
-### Appearance on Dark Backgrounds
-
-Use the `appearance="inverse"` attribute to render the checkbox for use on dark backgrounds.
-
-<div class="exampleWrapper--ondark" aria-hidden>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
-<auro-checkbox-group appearance="inverse">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
-<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
-<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
-<auro-checkbox-group appearance="inverse">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
-<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
-<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Disabled
-
-Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or the entire `<auro-checkbox-group>`.
-
-#### Disabled Checkbox within Group
-
-The `disabled` attribute used to disable a single `<auro-checkbox>` element.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-<auro-checkbox-group>
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### Disabled Group
-
-The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
-<!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
-<auro-checkbox-group disabled>
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
-<auro-checkbox-group appearance="inverse" disabled>
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group disabled&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
-<auro-checkbox-group appearance="inverse" disabled>
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-<auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Horizontal Group
-
-Using the `horizontal` attribute will render the checkbox options on a horizontal line.
-
-**Note**: Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
-<!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
-<auro-checkbox-group horizontal>
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
-<auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
-<auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group horizontal&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1"&gt;Yes&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2"&gt;No&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3"&gt;Maybe&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Form Validation
-
-In the `auro-checkbox-group` element, the `required` and `error` states are the two possible validation states.
-
-It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`.
-
-### Error
-
-Use the `error` attribute to force an error state on the element.
-
-The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
-
-**Note**: The `error` attribute is only supported on the `<auro-checkbox-group>` element, not on individual `<auro-checkbox>` elements.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-group.html) -->
-<!-- The below content is automatically added from ./../apiExamples/error-group.html -->
-<auro-checkbox-group error="custom error">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
-<auro-checkbox-group appearance="inverse" error="custom error">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-group.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/error-group.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group error="custom error"&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1"&gt;Error checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2"&gt;Error checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3"&gt;Error checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked&gt;Error checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
-<auro-checkbox-group appearance="inverse" error="custom error">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-<auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### Required
-
-When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
-<!-- The below content is automatically added from ./../apiExamples/required.html -->
-<auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
-<auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
-<auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
-<auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group required setCustomValidityValueMissing="Please select an option"&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="value1" name="required" id="checkbox-required1"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value2" name="required" id="checkbox-required2"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value3" name="required" id="checkbox-required3"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value4" name="required" id="checkbox-required4"&gt;Checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Slot Examples
-
-### Custom Optional Label
-
-The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
-<!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
-<auro-checkbox-group>
-<span slot="legend">Form label goes here</span>
-<span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
-<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
-<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
-<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;span slot="optionalLabel" style="font-size: small; color: grey"&gt; - optional&lt;/span&gt;
-  &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"&gt;Checkbox option that has some extra text that should wrap when rendered in a narrow container&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Common Usage Patterns & Functional Examples
-
-### Reset State
-
-Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
-<!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
-<auro-button id="resetStateBtn">Reset</auro-button>
-<br/><br/>
-<auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
-<span slot="legend">Form label goes here</span>
-<auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
-<auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
-<auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
-<auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
-
-<pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
-&lt;br/&gt;&lt;br/&gt;
-&lt;auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option"&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;auro-checkbox value="value1" name="resetState" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value2" name="resetState" id="checkbox-basic2"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value3" name="resetState" id="checkbox-basic3"&gt;Checkbox option&lt;/auro-checkbox&gt;
-  &lt;auro-checkbox value="value4" name="resetState" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
-&lt;/auro-checkbox-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
-
-<pre class="language-js"><code class="language-js">export function resetStateExample() {
-  const elem = document.querySelector('#resetStateExample');
-​
-  document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
-    elem.reset();
-  });
-}</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Restyle Component with CSS Variables
-
-The component may be restyled by changing the values of the following token(s).
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
-
-<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-​
-:host {
-  --ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
-  --ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{v.$ds-advanced-color-boolean-indicator});
-  --ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #{v.$ds-advanced-color-boolean-isfalse});
-  --ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-  --ds-auro-checkbox-outline-color: transparent;
-  --ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->

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

@@ -238,7 +238,8 @@ class AuroCheckbox extends i$2 {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -1689,7 +1690,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605041621';
+var formkitVersion = '202605041723';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.