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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/components/checkbox/demo/accessibility.html +1 -1
  2. package/components/checkbox/demo/api.html +2 -1
  3. package/components/checkbox/demo/customize.html +1 -1
  4. package/components/checkbox/demo/demo-support.min.js +60 -0
  5. package/components/checkbox/demo/design.html +2 -1
  6. package/components/checkbox/demo/getting-started.html +1 -1
  7. package/components/checkbox/demo/getting-started.md +154 -0
  8. package/components/checkbox/demo/index.html +1 -1
  9. package/components/checkbox/demo/index.min.js +3 -2
  10. package/components/checkbox/demo/install.html +49 -0
  11. package/components/checkbox/demo/keyboard-behavior.html +1 -1
  12. package/components/checkbox/demo/pages.json +1 -0
  13. package/components/checkbox/demo/readme.html +2 -1
  14. package/components/checkbox/demo/styles.min.css +1 -1
  15. package/components/checkbox/demo/voiceover.html +1 -1
  16. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  17. package/components/checkbox/dist/index.js +3 -2
  18. package/components/checkbox/dist/registered.js +3 -2
  19. package/components/combobox/demo/accessibility.html +1 -3
  20. package/components/combobox/demo/api.html +2 -3
  21. package/components/combobox/demo/customize.html +1 -1
  22. package/components/combobox/demo/demo-support.min.js +60 -0
  23. package/components/combobox/demo/design.html +2 -3
  24. package/components/combobox/demo/getting-started.html +1 -1
  25. package/components/combobox/demo/index.html +1 -1
  26. package/components/combobox/demo/install.html +50 -0
  27. package/components/combobox/demo/keyboard-behavior.html +1 -3
  28. package/components/combobox/demo/pages.json +1 -0
  29. package/components/combobox/demo/readme.html +2 -3
  30. package/components/combobox/demo/registered.min.js +5 -4
  31. package/components/combobox/demo/styles.min.css +1 -1
  32. package/components/combobox/demo/voiceover.html +1 -3
  33. package/components/combobox/dist/index.js +5 -4
  34. package/components/combobox/dist/registered.js +5 -4
  35. package/components/counter/README.md +21 -47
  36. package/components/counter/demo/accessibility.html +49 -0
  37. package/components/counter/demo/accessibility.md +34 -0
  38. package/components/counter/demo/api.html +13 -21
  39. package/components/counter/demo/api.md +49 -1299
  40. package/components/counter/demo/api.min.js +1 -8390
  41. package/components/counter/demo/auro-counter-group.min.js +8392 -0
  42. package/components/counter/demo/customize.html +53 -0
  43. package/components/counter/demo/customize.md +650 -0
  44. package/components/counter/demo/demo-support.js +1 -0
  45. package/components/counter/demo/demo-support.min.js +55792 -0
  46. package/components/counter/demo/design.html +52 -0
  47. package/components/counter/demo/design.md +192 -0
  48. package/components/counter/demo/getting-started.html +54 -0
  49. package/components/counter/demo/getting-started.md +482 -0
  50. package/components/counter/demo/index.html +14 -20
  51. package/components/counter/demo/index.md +117 -51
  52. package/components/counter/demo/index.min.js +1 -8390
  53. package/components/{dropdown/demo/keyboardBehavior.html → counter/demo/keyboard-behavior.html} +9 -42
  54. package/components/counter/demo/keyboardBehavior.html +7 -40
  55. package/components/counter/demo/pages.json +1 -0
  56. package/components/counter/demo/readme.html +12 -16
  57. package/components/counter/demo/readme.md +21 -47
  58. package/components/counter/demo/styles.min.css +1 -0
  59. package/components/counter/demo/styles.scss +1 -0
  60. package/components/counter/demo/voiceover.html +51 -0
  61. package/components/counter/demo/voiceover.md +80 -0
  62. package/components/counter/dist/index.js +2 -2
  63. package/components/counter/dist/registered.js +2 -2
  64. package/components/datepicker/demo/accessibility.html +2 -3
  65. package/components/datepicker/demo/api.html +2 -2
  66. package/components/datepicker/demo/auro-datepicker.min.js +5 -4
  67. package/components/datepicker/demo/customize.html +1 -1
  68. package/components/datepicker/demo/demo-support.min.js +60 -0
  69. package/components/datepicker/demo/design.html +3 -4
  70. package/components/datepicker/demo/getting-started.html +1 -1
  71. package/components/datepicker/demo/index.html +1 -1
  72. package/components/datepicker/demo/keyboard-behavior.html +2 -4
  73. package/components/datepicker/demo/pages.json +1 -0
  74. package/components/datepicker/demo/readme.html +2 -2
  75. package/components/datepicker/demo/styles.min.css +1 -1
  76. package/components/datepicker/demo/voiceover.html +2 -4
  77. package/components/datepicker/dist/index.js +5 -4
  78. package/components/datepicker/dist/registered.js +5 -4
  79. package/components/dropdown/README.md +0 -21
  80. package/components/dropdown/demo/accessibility.html +49 -0
  81. package/components/dropdown/demo/accessibility.md +45 -0
  82. package/components/dropdown/demo/api.html +11 -20
  83. package/components/dropdown/demo/api.md +40 -1364
  84. package/components/dropdown/demo/api.min.js +2 -5098
  85. package/components/dropdown/demo/auro-dropdown.min.js +5099 -0
  86. package/components/dropdown/demo/customize.html +54 -0
  87. package/components/dropdown/demo/customize.md +780 -0
  88. package/components/dropdown/demo/demo-support.js +1 -0
  89. package/components/dropdown/demo/demo-support.min.js +55792 -0
  90. package/components/dropdown/demo/design.html +52 -0
  91. package/components/dropdown/demo/design.md +186 -0
  92. package/components/dropdown/demo/getting-started.html +54 -0
  93. package/components/dropdown/demo/getting-started.md +463 -0
  94. package/components/dropdown/demo/index.html +12 -21
  95. package/components/dropdown/demo/index.md +78 -233
  96. package/components/dropdown/demo/index.min.js +1 -5097
  97. package/components/dropdown/demo/keyboard-behavior.html +48 -0
  98. package/components/dropdown/demo/pages.json +1 -0
  99. package/components/dropdown/demo/readme.html +8 -21
  100. package/components/dropdown/demo/readme.md +0 -21
  101. package/components/dropdown/demo/styles.min.css +1 -0
  102. package/components/dropdown/demo/styles.scss +1 -0
  103. package/components/dropdown/demo/voiceover.html +51 -0
  104. package/components/dropdown/demo/voiceover.md +63 -0
  105. package/components/dropdown/dist/index.js +1 -1
  106. package/components/dropdown/dist/registered.js +1 -1
  107. package/components/form/README.md +9 -9
  108. package/components/form/demo/accessibility.html +51 -0
  109. package/components/form/demo/accessibility.md +23 -0
  110. package/components/form/demo/api.html +12 -15
  111. package/components/form/demo/api.md +14 -290
  112. package/components/form/demo/api.min.js +2 -71921
  113. package/components/form/demo/auro-form.min.js +718 -0
  114. package/components/form/demo/autocomplete.html +2 -2
  115. package/components/form/demo/customize.html +54 -0
  116. package/components/form/demo/customize.md +246 -0
  117. package/components/form/demo/demo-support.js +1 -0
  118. package/components/form/demo/demo-support.min.js +55792 -0
  119. package/components/form/demo/getting-started.html +54 -0
  120. package/components/form/demo/getting-started.md +434 -0
  121. package/components/form/demo/index.html +13 -15
  122. package/components/form/demo/index.md +67 -97
  123. package/components/form/demo/index.min.js +2 -71921
  124. package/components/form/demo/keyboard-behavior.html +51 -0
  125. package/components/form/demo/pages.json +1 -0
  126. package/components/form/demo/readme.html +13 -18
  127. package/components/form/demo/readme.md +9 -9
  128. package/components/form/demo/registerDemoDeps.min.js +71212 -0
  129. package/components/form/demo/styles.min.css +1 -0
  130. package/components/form/demo/styles.scss +1 -0
  131. package/components/form/demo/voiceover.html +51 -0
  132. package/components/form/demo/voiceover.md +36 -0
  133. package/components/form/demo/working.html +3 -2
  134. package/components/input/demo/accessibility.html +1 -1
  135. package/components/input/demo/api.html +1 -1
  136. package/components/input/demo/auro-input.min.js +3 -2
  137. package/components/input/demo/customize.html +1 -1
  138. package/components/input/demo/demo-support.min.js +60 -0
  139. package/components/input/demo/design.html +2 -1
  140. package/components/input/demo/getting-started.html +1 -1
  141. package/components/input/demo/index.html +1 -1
  142. package/components/input/demo/keyboard-behavior.html +2 -1
  143. package/components/input/demo/pages.json +1 -0
  144. package/components/input/demo/readme.html +2 -2
  145. package/components/input/demo/styles.min.css +1 -1
  146. package/components/input/demo/voiceover.html +1 -1
  147. package/components/input/dist/base-input.d.ts +1 -0
  148. package/components/input/dist/index.js +3 -2
  149. package/components/input/dist/registered.js +3 -2
  150. package/components/menu/README.md +8 -26
  151. package/components/menu/demo/accessibility.html +53 -0
  152. package/components/menu/demo/accessibility.md +34 -0
  153. package/components/menu/demo/api.html +12 -18
  154. package/components/menu/demo/api.md +43 -1102
  155. package/components/menu/demo/api.min.js +2 -2288
  156. package/components/menu/demo/auro-menu.min.js +2289 -0
  157. package/components/menu/demo/customize.html +54 -0
  158. package/components/menu/demo/customize.md +637 -0
  159. package/components/menu/demo/demo-support.js +1 -0
  160. package/components/menu/demo/demo-support.min.js +55792 -0
  161. package/components/menu/demo/design.html +53 -0
  162. package/components/menu/demo/design.md +81 -0
  163. package/components/menu/demo/getting-started.html +54 -0
  164. package/components/menu/demo/getting-started.md +322 -0
  165. package/components/menu/demo/index.html +14 -20
  166. package/components/menu/demo/index.md +26 -63
  167. package/components/menu/demo/index.min.js +1 -2287
  168. package/components/menu/demo/keyboard-behavior.html +53 -0
  169. package/components/menu/demo/pages.json +1 -0
  170. package/components/menu/demo/readme.html +12 -16
  171. package/components/menu/demo/readme.md +8 -26
  172. package/components/menu/demo/styles.min.css +1 -0
  173. package/components/menu/demo/styles.scss +1 -0
  174. package/components/menu/demo/voiceover.html +53 -0
  175. package/components/menu/demo/voiceover.md +33 -0
  176. package/components/radio/demo/accessibility.html +2 -1
  177. package/components/radio/demo/api.html +2 -1
  178. package/components/radio/demo/customize.html +2 -1
  179. package/components/radio/demo/demo-support.min.js +60 -0
  180. package/components/radio/demo/design.html +2 -1
  181. package/components/radio/demo/getting-started.html +2 -1
  182. package/components/radio/demo/getting-started.md +154 -0
  183. package/components/radio/demo/index.html +1 -1
  184. package/components/radio/demo/index.min.js +1 -1
  185. package/components/radio/demo/keyboard-behavior.html +2 -1
  186. package/components/radio/demo/pages.json +1 -0
  187. package/components/radio/demo/readme.html +3 -3
  188. package/components/radio/demo/styles.min.css +1 -1
  189. package/components/radio/demo/voiceover.html +2 -1
  190. package/components/radio/dist/index.js +1 -1
  191. package/components/radio/dist/registered.js +1 -1
  192. package/components/select/demo/accessibility.html +1 -1
  193. package/components/select/demo/api.html +2 -1
  194. package/components/select/demo/customize.html +1 -1
  195. package/components/select/demo/demo-support.min.js +60 -0
  196. package/components/select/demo/design.html +2 -1
  197. package/components/select/demo/getting-started.html +1 -1
  198. package/components/select/demo/index.html +1 -1
  199. package/components/select/demo/install.html +50 -0
  200. package/components/select/demo/keyboard-behavior.html +1 -1
  201. package/components/select/demo/keyboardBehavior.html +1 -1
  202. package/components/select/demo/layout.html +2 -1
  203. package/components/select/demo/pages.json +1 -0
  204. package/components/select/demo/readme.html +2 -1
  205. package/components/select/demo/registered.min.js +2 -2
  206. package/components/select/demo/styles.min.css +1 -1
  207. package/components/select/demo/voiceover.html +1 -1
  208. package/components/select/dist/index.js +2 -2
  209. package/components/select/dist/registered.js +2 -2
  210. package/custom-elements.json +249 -246
  211. package/package.json +1 -1
  212. package/components/counter/demo/keyboard-behavior.md +0 -127
  213. package/components/dropdown/demo/keyboard-behavior.md +0 -72
  214. package/components/form/demo/keyboard-behavior.md +0 -38
  215. package/components/menu/demo/keyboard-behavior.md +0 -18
package/components/checkbox/demo/accessibility.html CHANGED
@@ -37,7 +37,7 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./accessibility.md');
42
42
  </script>
43
43
 
package/components/checkbox/demo/api.html CHANGED
@@ -40,9 +40,10 @@
40
40
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
41
41
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
42
42
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
43
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
43
44
 
44
45
  <script type="module">
45
- import { renderPage } from './demo-support.js';
46
+ import { renderPage } from './demo-support.min.js';
46
47
  await renderPage('./api.md');
47
48
  import { initExamples } from "./api.min.js";
48
49
  initExamples();
package/components/checkbox/demo/customize.html CHANGED
@@ -41,7 +41,7 @@
41
41
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
42
42
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
43
43
  <script type="module">
44
- import { renderPage } from './demo-support.js';
44
+ import { renderPage } from './demo-support.min.js';
45
45
  await renderPage('./customize.md');
46
46
  import { initExamples } from "./api.min.js";
47
47
  initExamples();
package/components/checkbox/demo/demo-support.min.js CHANGED
@@ -55676,7 +55676,67 @@ function rehypeStringify(options) {
55676
55676
  }
55677
55677
  }
55678
55678
 
55679
+ /**
55680
+ * Fetches the docs/pages/ directory listing, builds a nav bar with links to
55681
+ * each .md file, and prepends it to <body>. Clicking a link renders that page
55682
+ * without a full reload. Pass the path to the pages directory relative to the
55683
+ * HTML file, e.g. '../docs/pages/'.
55684
+ *
55685
+ * @param {string} pagesDir - Path to the docs/pages directory.
55686
+ * @param {string} [activeFile] - Filename (no path) of the currently active page.
55687
+ */
55688
+ async function injectPageNav(pagesDir, activeFile) {
55689
+ let files = [];
55690
+ try {
55691
+ const res = await fetch(`${pagesDir}pages.json`);
55692
+ if (!res.ok) {
55693
+ return;
55694
+ }
55695
+ files = await res.json();
55696
+ } catch {
55697
+ return;
55698
+ }
55699
+
55700
+ if (!files.length) {
55701
+ return;
55702
+ }
55703
+
55704
+ const nav = document.createElement('nav');
55705
+ nav.id = 'page-nav';
55706
+
55707
+ files.forEach((file) => {
55708
+ const label = file.replace(/\.md$/, '').replace(/-/g, ' ');
55709
+ const a = document.createElement('auro-hyperlink');
55710
+ a.textContent = label;
55711
+ a.setAttribute('href', `./${file.replace(/\.md$/, '.html')}`);
55712
+ a.setAttribute('type', 'cta');
55713
+ a.setAttribute('variant', 'ghost');
55714
+ a.setAttribute('size', 'sm');
55715
+ a.dataset.page = file;
55716
+
55717
+ if (file === activeFile) {
55718
+ a.setAttribute('variant', 'tertiary');
55719
+ }
55720
+
55721
+ nav.appendChild(a);
55722
+ });
55723
+
55724
+ document.body.prepend(nav);
55725
+ }
55726
+
55679
55727
  async function renderPage(mdPath) {
55728
+ if (!document.getElementById('page-nav')) {
55729
+ let pagesDir;
55730
+ if (mdPath.includes('/docs/pages/')) {
55731
+ pagesDir = mdPath.substring(0, mdPath.lastIndexOf('/') + 1);
55732
+ } else {
55733
+ // mdPath is like './index.md' served from demo/ — pages.json is co-located
55734
+ pagesDir = mdPath.substring(0, mdPath.lastIndexOf('/') + 1);
55735
+ }
55736
+ const activeFile = mdPath.split('/').pop();
55737
+ await injectPageNav(pagesDir, activeFile);
55738
+ }
55739
+
55680
55740
  const response = await fetch(mdPath);
55681
55741
  const text = await response.text();
55682
55742
  const result = await unified()
package/components/checkbox/demo/design.html CHANGED
@@ -37,13 +37,14 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./design.md');
42
42
  </script>
43
43
 
44
44
  <!-- If additional elements are needed for the demo, add them here. -->
45
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
46
46
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
47
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
48
49
 
49
50
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/checkbox/demo/getting-started.html CHANGED
@@ -41,7 +41,7 @@
41
41
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
42
42
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
43
43
  <script type="module">
44
- import { renderPage } from './demo-support.js';
44
+ import { renderPage } from './demo-support.min.js';
45
45
  await renderPage('./getting-started.md');
46
46
  import { initExamples } from "./api.min.js";
47
47
  initExamples();
package/components/checkbox/demo/getting-started.md CHANGED
@@ -8,6 +8,9 @@
8
8
  <auro-anchorlink fluid href="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
9
9
  <auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
10
10
  <auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
11
+ <auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
12
+ <auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
13
+ <auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
11
14
  <auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
12
15
  <auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
13
16
  <auro-anchorlink fluid href="#slotsGroup" class="level2 body-xs">auro-checkbox-group</auro-anchorlink>
@@ -120,6 +123,157 @@ This will create a new custom element <code>&gt;custom-checkbox&lt;</code> and <
120
123
  <!-- AURO-GENERATED-CONTENT:END -->
121
124
  </section>
122
125
  <section>
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
127
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
128
+ <auro-header level="2" id="frameworks">Frameworks</auro-header>
129
+ <auro-accordion-group Emphasis>
130
+ <auro-accordion class="section" id="react">
131
+ <span slot="trigger">React</span>
132
+ <div class="accordion-content">
133
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
134
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
135
+ React 19 includes <a href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</a>, so <code>&lt;auro-checkbox&gt;</code> works directly in JSX without any wrapper library.
136
+
137
+ <auro-header level="3" id="reactImport">Import the Component</auro-header>
138
+ Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
139
+
140
+ <pre class="language-js"><code class="language-js">import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
141
+ ​
142
+ AuroCheckbox.register('[custom]-checkbox');
143
+ AuroCheckboxGroup.register('[custom]-checkbox-group');</code></pre>
144
+
145
+ <auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
146
+ The component ships with TypeScript type definitions for the `AuroCheckbox` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `<auro-checkbox>` in JSX, add the following declaration to a `.d.ts` file in your project:
147
+
148
+ <pre class="language-js"><code class="language-js">import type { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
149
+ ​
150
+ declare global {
151
+ namespace JSX {
152
+ interface IntrinsicElements {
153
+ '[custom]-checkbox': React.HTMLAttributes&lt;AuroCheckbox&gt; &amp; Partial&lt;AuroCheckbox&gt;;
154
+ '[custom]-checkbox-group': React.HTMLAttributes&lt;AuroCheckboxGroup&gt; &amp; Partial&lt;AuroCheckboxGroup&gt;;
155
+ }
156
+ }
157
+ }</code></pre>
158
+
159
+ <auro-header level="3" id="reactEvents">Event Handling</auro-header>
160
+ Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:
161
+
162
+ <pre class="language-js"><code class="language-js">import { useRef, useEffect } from 'react';
163
+ ​
164
+ function MyCheckboxGroup() {
165
+ const groupRef = useRef&lt;HTMLElement&gt;(null);
166
+ ​
167
+ useEffect(() =&gt; {
168
+ const el = groupRef.current;
169
+ if (!el) return;
170
+ ​
171
+ const handleInput = () =&gt; {
172
+ console.log('Selected values:', (el as any).value);
173
+ };
174
+ ​
175
+ el.addEventListener('input', handleInput);
176
+ return () =&gt; el.removeEventListener('input', handleInput);
177
+ }, []);
178
+ ​
179
+ return (
180
+ &lt;custom-checkbox-group ref={groupRef}&gt;
181
+ &lt;span slot="legend"&gt;Select options&lt;/span&gt;
182
+ &lt;custom-checkbox value="option1" name="example"&gt;Option 1&lt;/custom-checkbox&gt;
183
+ &lt;custom-checkbox value="option2" name="example"&gt;Option 2&lt;/custom-checkbox&gt;
184
+ &lt;/custom-checkbox-group&gt;
185
+ );
186
+ }</code></pre>
187
+
188
+ <auro-header level="3" id="reactModuleResolution">Module Resolution</auro-header>
189
+ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
190
+
191
+ <pre class="language-js"><code class="language-js">{
192
+ "compilerOptions": {
193
+ "moduleResolution": "bundler"
194
+ }
195
+ }</code></pre>
196
+ <!-- AURO-GENERATED-CONTENT:END -->
197
+ </div>
198
+ </auro-accordion>
199
+ <auro-accordion class="section" id="svelte">
200
+ <span slot="trigger">Svelte</span>
201
+ <div class="accordion-content">
202
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
203
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
204
+ Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code>&lt;auro-checkbox&gt;</code> works directly in Svelte templates without any wrapper or configuration.
205
+
206
+ <auro-header level="3" id="svelteImport">Import the Component</auro-header>
207
+ Import and register the components in the `<script>` block:
208
+
209
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
210
+ import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
211
+ ​
212
+ AuroCheckbox.register('[custom]-checkbox');
213
+ AuroCheckboxGroup.register('[custom]-checkbox-group');
214
+ &lt;/script&gt;</code></pre>
215
+
216
+ <auro-header level="3" id="svelteUsage">Basic Usage</auro-header>
217
+ Use `<auro-checkbox-group>` directly in your Svelte template:
218
+
219
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
220
+ import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
221
+ ​
222
+ AuroCheckbox.register('[custom]-checkbox');
223
+ AuroCheckboxGroup.register('[custom]-checkbox-group');
224
+ &lt;/script&gt;
225
+ &lt;custom-checkbox-group&gt;
226
+ &lt;span slot="legend"&gt;Select options&lt;/span&gt;
227
+ &lt;custom-checkbox value="option1" name="example"&gt;Option 1&lt;/custom-checkbox&gt;
228
+ &lt;custom-checkbox value="option2" name="example"&gt;Option 2&lt;/custom-checkbox&gt;
229
+ &lt;/custom-checkbox-group&gt;</code></pre>
230
+
231
+ <auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
232
+ Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-checkbox>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
233
+
234
+ <pre class="language-js"><code class="language-js">import type { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
235
+ ​
236
+ declare namespace svelteHTML {
237
+ interface IntrinsicElements {
238
+ '[custom]-checkbox': Partial&lt;AuroCheckbox&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroCheckbox&gt;;
239
+ '[custom]-checkbox-group': Partial&lt;AuroCheckboxGroup&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroCheckboxGroup&gt;;
240
+ }
241
+ }</code></pre>
242
+
243
+ This enables prop hinting for attributes like `value`, `checked`, `disabled`, and others directly in Svelte templates.
244
+
245
+ <auro-header level="3" id="svelteEvents">Event Handling</auro-header>
246
+ Auro components emit native `CustomEvent`s. Use the `oninput` handler directly on the group element:
247
+
248
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
249
+ let values = $state&lt;string[]&gt;([]);
250
+ ​
251
+ function handleInput(e: Event) {
252
+ values = (e.target as HTMLElement &amp; { value: string[] }).value;
253
+ }
254
+ &lt;/script&gt;
255
+ &lt;custom-checkbox-group oninput={handleInput}&gt;
256
+ &lt;span slot="legend"&gt;Select options&lt;/span&gt;
257
+ &lt;custom-checkbox value="option1" name="example"&gt;Option 1&lt;/custom-checkbox&gt;
258
+ &lt;custom-checkbox value="option2" name="example"&gt;Option 2&lt;/custom-checkbox&gt;
259
+ &lt;/custom-checkbox-group&gt;
260
+ &lt;p&gt;Selected: {values}&lt;/p&gt;</code></pre>
261
+
262
+ <auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
263
+ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
264
+
265
+ <pre class="language-js"><code class="language-js">{
266
+ "compilerOptions": {
267
+ "moduleResolution": "bundler"
268
+ }
269
+ }</code></pre>
270
+ <!-- AURO-GENERATED-CONTENT:END -->
271
+ </div>
272
+ </auro-accordion>
273
+ </auro-accordion-group>
274
+ <!-- AURO-GENERATED-CONTENT:END -->
275
+ </section>
276
+ <section>
123
277
  <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
124
278
  <p>Every <code>&lt;auro-checkbox-group&gt;</code> implementation requires:</p>
125
279
  <ol>
package/components/checkbox/demo/index.html CHANGED
@@ -44,7 +44,7 @@
44
44
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
45
45
 
46
46
  <script type="module">
47
- import { renderPage } from './demo-support.js';
47
+ import { renderPage } from './demo-support.min.js';
48
48
  await renderPage('./index.md');
49
49
  </script>
50
50
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/checkbox/demo/index.min.js CHANGED
@@ -230,7 +230,8 @@ class AuroCheckbox extends i$2 {
230
230
  * The id global attribute defines an identifier (ID) which must be unique in the whole document.
231
231
  */
232
232
  id: {
233
- type: String
233
+ type: String,
234
+ reflect: true
234
235
  },
235
236
 
236
237
  /**
@@ -1681,7 +1682,7 @@ class AuroHelpText extends i$2 {
1681
1682
  }
1682
1683
  }
1683
1684
 
1684
- var formkitVersion = '202605042114';
1685
+ var formkitVersion = '202605051928';
1685
1686
 
1686
1687
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1687
1688
  // See LICENSE in the project root for license information.
package/components/checkbox/demo/install.html ADDED
@@ -0,0 +1,49 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/install.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-checkbox | Install</title>
20
+
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-checkbox's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ </head>
36
+ <body class="auro-markdown">
37
+ <main></main>
38
+
39
+ <script type="module">
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./install.md');
42
+ </script>
43
+
44
+ <!-- If additional elements are needed for the demo, add them here. -->
45
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
48
+ </body>
49
+ </html>
package/components/checkbox/demo/keyboard-behavior.html CHANGED
@@ -37,7 +37,7 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./keyboard-behavior.md');
42
42
  </script>
43
43
 
package/components/checkbox/demo/pages.json ADDED
@@ -0,0 +1 @@
1
+ ["accessibility.md","customize.md","design.md","getting-started.md","index.md","install.md","voiceover.md"]
package/components/checkbox/demo/readme.html CHANGED
@@ -37,12 +37,13 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./readme.md');
42
42
  </script>
43
43
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
44
44
 
45
45
  <!-- If additional elements are needed for the demo, add them here. -->
46
46
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
47
48
  </body>
48
49
  </html>
package/components/checkbox/demo/styles.min.css CHANGED
@@ -1 +1 @@
1
- @import'@aurodesignsystem/webcorestylesheets/dist/elementDemoStyles.css';@import'@aurodesignsystem/webcorestylesheets/dist/demoWrapper.css'
1
+ .container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "sidenav" "main"}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display,.auro-markdown h1{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600,.auro-markdown h3{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500,.auro-markdown h4{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink,.baseParagraph .auro-markdown a,.auro-markdown .baseParagraph a{text-decoration:underline}.hyperlink,.auro-markdown a{text-decoration:underline;color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink:visited,.auro-markdown a:visited{color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:not(.is-touching):hover{text-decoration:underline !important}.hyperlink--ondark{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink--ondark:not(.is-touching):hover{color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}.hyperlink--ondark:visited{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink:not(.is-touching):hover,.auro-markdown a:not(.is-touching):hover{text-decoration:none;color:var(--ds-color-text-ui-hover-default, #193d73)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column;height:100vh}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}
package/components/checkbox/demo/voiceover.html CHANGED
@@ -37,7 +37,7 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./voiceover.md');
42
42
  </script>
43
43
 
package/components/checkbox/dist/auro-checkbox.d.ts CHANGED
@@ -46,6 +46,7 @@ export class AuroCheckbox extends LitElement {
46
46
  */
47
47
  id: {
48
48
  type: StringConstructor;
49
+ reflect: boolean;
49
50
  };
50
51
  /**
51
52
  * The id for input node.
package/components/checkbox/dist/index.js CHANGED
@@ -190,7 +190,8 @@ class AuroCheckbox extends LitElement {
190
190
  * The id global attribute defines an identifier (ID) which must be unique in the whole document.
191
191
  */
192
192
  id: {
193
- type: String
193
+ type: String,
194
+ reflect: true
194
195
  },
195
196
 
196
197
  /**
@@ -1634,7 +1635,7 @@ class AuroHelpText extends LitElement {
1634
1635
  }
1635
1636
  }
1636
1637
 
1637
- var formkitVersion = '202605042114';
1638
+ var formkitVersion = '202605051928';
1638
1639
 
1639
1640
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1640
1641
  // See LICENSE in the project root for license information.
package/components/checkbox/dist/registered.js CHANGED
@@ -190,7 +190,8 @@ class AuroCheckbox extends LitElement {
190
190
  * The id global attribute defines an identifier (ID) which must be unique in the whole document.
191
191
  */
192
192
  id: {
193
- type: String
193
+ type: String,
194
+ reflect: true
194
195
  },
195
196
 
196
197
  /**
@@ -1634,7 +1635,7 @@ class AuroHelpText extends LitElement {
1634
1635
  }
1635
1636
  }
1636
1637
 
1637
- var formkitVersion = '202605042114';
1638
+ var formkitVersion = '202605051928';
1638
1639
 
1639
1640
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1640
1641
  // See LICENSE in the project root for license information.
package/components/combobox/demo/accessibility.html CHANGED
@@ -31,15 +31,13 @@
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
32
 
33
33
  <!-- Demo Specific Styles -->
34
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
34
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
35
  </head>
38
36
  <body class="auro-markdown">
39
37
  <main></main>
40
38
 
41
39
  <script type="module">
42
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
43
41
  await renderPage('./accessibility.md');
44
42
  </script>
45
43
 
package/components/combobox/demo/api.html CHANGED
@@ -31,8 +31,6 @@
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
32
 
33
33
  <!-- Demo Specific Styles -->
34
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
34
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
35
  </head>
38
36
  <body class="auro-markdown">
@@ -40,10 +38,11 @@
40
38
 
41
39
  <!-- If additional elements are needed for the demo, add them here. -->
42
40
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
43
42
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
44
43
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
45
44
  <script type="module">
46
- import { renderPage } from './demo-support.js';
45
+ import { renderPage } from './demo-support.min.js';
47
46
  await renderPage('./api.md');
48
47
  import { initExamples } from "./api.min.js";
49
48
  initExamples();
package/components/combobox/demo/customize.html CHANGED
@@ -42,7 +42,7 @@
42
42
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
43
43
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
44
44
  <script type="module">
45
- import { renderPage } from './demo-support.js';
45
+ import { renderPage } from './demo-support.min.js';
46
46
  await renderPage('./customize.md');
47
47
  import { initExamples } from "./customize.min.js";
48
48
  initExamples();
package/components/combobox/demo/demo-support.min.js CHANGED
@@ -55676,7 +55676,67 @@ function rehypeStringify(options) {
55676
55676
  }
55677
55677
  }
55678
55678
 
55679
+ /**
55680
+ * Fetches the docs/pages/ directory listing, builds a nav bar with links to
55681
+ * each .md file, and prepends it to <body>. Clicking a link renders that page
55682
+ * without a full reload. Pass the path to the pages directory relative to the
55683
+ * HTML file, e.g. '../docs/pages/'.
55684
+ *
55685
+ * @param {string} pagesDir - Path to the docs/pages directory.
55686
+ * @param {string} [activeFile] - Filename (no path) of the currently active page.
55687
+ */
55688
+ async function injectPageNav(pagesDir, activeFile) {
55689
+ let files = [];
55690
+ try {
55691
+ const res = await fetch(`${pagesDir}pages.json`);
55692
+ if (!res.ok) {
55693
+ return;
55694
+ }
55695
+ files = await res.json();
55696
+ } catch {
55697
+ return;
55698
+ }
55699
+
55700
+ if (!files.length) {
55701
+ return;
55702
+ }
55703
+
55704
+ const nav = document.createElement('nav');
55705
+ nav.id = 'page-nav';
55706
+
55707
+ files.forEach((file) => {
55708
+ const label = file.replace(/\.md$/, '').replace(/-/g, ' ');
55709
+ const a = document.createElement('auro-hyperlink');
55710
+ a.textContent = label;
55711
+ a.setAttribute('href', `./${file.replace(/\.md$/, '.html')}`);
55712
+ a.setAttribute('type', 'cta');
55713
+ a.setAttribute('variant', 'ghost');
55714
+ a.setAttribute('size', 'sm');
55715
+ a.dataset.page = file;
55716
+
55717
+ if (file === activeFile) {
55718
+ a.setAttribute('variant', 'tertiary');
55719
+ }
55720
+
55721
+ nav.appendChild(a);
55722
+ });
55723
+
55724
+ document.body.prepend(nav);
55725
+ }
55726
+
55679
55727
  async function renderPage(mdPath) {
55728
+ if (!document.getElementById('page-nav')) {
55729
+ let pagesDir;
55730
+ if (mdPath.includes('/docs/pages/')) {
55731
+ pagesDir = mdPath.substring(0, mdPath.lastIndexOf('/') + 1);
55732
+ } else {
55733
+ // mdPath is like './index.md' served from demo/ — pages.json is co-located
55734
+ pagesDir = mdPath.substring(0, mdPath.lastIndexOf('/') + 1);
55735
+ }
55736
+ const activeFile = mdPath.split('/').pop();
55737
+ await injectPageNav(pagesDir, activeFile);
55738
+ }
55739
+
55680
55740
  const response = await fetch(mdPath);
55681
55741
  const text = await response.text();
55682
55742
  const result = await unified()