@aurodesignsystem-dev/auro-formkit 0.0.0-pr1457.0 → 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 (244) hide show
  1. package/components/checkbox/README.md +2 -2
  2. package/components/checkbox/demo/accessibility.html +1 -1
  3. package/components/checkbox/demo/api.html +2 -1
  4. package/components/checkbox/demo/customize.html +1 -1
  5. package/components/checkbox/demo/demo-support.js +1 -60
  6. package/components/checkbox/demo/demo-support.min.js +60 -0
  7. package/components/checkbox/demo/design.html +2 -1
  8. package/components/checkbox/demo/getting-started.html +1 -1
  9. package/components/checkbox/demo/getting-started.md +156 -2
  10. package/components/checkbox/demo/index.html +1 -1
  11. package/components/checkbox/demo/index.min.js +3 -2
  12. package/components/checkbox/demo/install.html +49 -0
  13. package/components/checkbox/demo/install.md +2 -2
  14. package/components/checkbox/demo/keyboard-behavior.html +1 -1
  15. package/components/checkbox/demo/pages.json +1 -0
  16. package/components/checkbox/demo/readme.html +2 -1
  17. package/components/checkbox/demo/readme.md +2 -2
  18. package/components/checkbox/demo/styles.min.css +1 -1
  19. package/components/checkbox/demo/voiceover.html +1 -1
  20. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  21. package/components/checkbox/dist/index.js +3 -2
  22. package/components/checkbox/dist/registered.js +3 -2
  23. package/components/combobox/README.md +2 -2
  24. package/components/combobox/demo/accessibility.html +1 -3
  25. package/components/combobox/demo/api.html +2 -3
  26. package/components/combobox/demo/customize.html +1 -1
  27. package/components/combobox/demo/demo-support.js +1 -60
  28. package/components/combobox/demo/demo-support.min.js +60 -0
  29. package/components/combobox/demo/design.html +2 -3
  30. package/components/combobox/demo/getting-started.html +1 -1
  31. package/components/combobox/demo/getting-started.md +2 -2
  32. package/components/combobox/demo/index.html +1 -1
  33. package/components/combobox/demo/install.html +50 -0
  34. package/components/combobox/demo/install.md +2 -2
  35. package/components/combobox/demo/keyboard-behavior.html +1 -3
  36. package/components/combobox/demo/pages.json +1 -0
  37. package/components/combobox/demo/readme.html +2 -3
  38. package/components/combobox/demo/readme.md +2 -2
  39. package/components/combobox/demo/registered.min.js +5 -4
  40. package/components/combobox/demo/styles.min.css +1 -1
  41. package/components/combobox/demo/voiceover.html +1 -3
  42. package/components/combobox/dist/index.js +5 -4
  43. package/components/combobox/dist/registered.js +5 -4
  44. package/components/counter/README.md +21 -47
  45. package/components/counter/demo/accessibility.html +49 -0
  46. package/components/counter/demo/accessibility.md +34 -0
  47. package/components/counter/demo/api.html +13 -21
  48. package/components/counter/demo/api.md +49 -1299
  49. package/components/counter/demo/api.min.js +1 -8390
  50. package/components/counter/demo/auro-counter-group.min.js +8392 -0
  51. package/components/counter/demo/customize.html +53 -0
  52. package/components/counter/demo/customize.md +650 -0
  53. package/components/counter/demo/demo-support.js +1 -0
  54. package/components/counter/demo/demo-support.min.js +55792 -0
  55. package/components/counter/demo/design.html +52 -0
  56. package/components/counter/demo/design.md +192 -0
  57. package/components/counter/demo/getting-started.html +54 -0
  58. package/components/counter/demo/getting-started.md +482 -0
  59. package/components/counter/demo/index.html +14 -20
  60. package/components/counter/demo/index.md +117 -51
  61. package/components/counter/demo/index.min.js +1 -8390
  62. package/components/{dropdown/demo/keyboardBehavior.html → counter/demo/keyboard-behavior.html} +9 -42
  63. package/components/counter/demo/keyboardBehavior.html +7 -40
  64. package/components/counter/demo/pages.json +1 -0
  65. package/components/counter/demo/readme.html +12 -16
  66. package/components/counter/demo/readme.md +21 -47
  67. package/components/counter/demo/styles.min.css +1 -0
  68. package/components/counter/demo/styles.scss +1 -0
  69. package/components/counter/demo/voiceover.html +51 -0
  70. package/components/counter/demo/voiceover.md +80 -0
  71. package/components/counter/dist/index.js +2 -2
  72. package/components/counter/dist/registered.js +2 -2
  73. package/components/datepicker/README.md +2 -2
  74. package/components/datepicker/demo/accessibility.html +2 -3
  75. package/components/datepicker/demo/api.html +2 -2
  76. package/components/datepicker/demo/auro-datepicker.min.js +5 -4
  77. package/components/datepicker/demo/customize.html +1 -1
  78. package/components/datepicker/demo/demo-support.js +1 -60
  79. package/components/datepicker/demo/demo-support.min.js +60 -0
  80. package/components/datepicker/demo/design.html +3 -4
  81. package/components/datepicker/demo/getting-started.html +1 -1
  82. package/components/datepicker/demo/getting-started.md +2 -2
  83. package/components/datepicker/demo/index.html +1 -1
  84. package/components/datepicker/demo/keyboard-behavior.html +2 -4
  85. package/components/datepicker/demo/pages.json +1 -0
  86. package/components/datepicker/demo/readme.html +2 -2
  87. package/components/datepicker/demo/readme.md +2 -2
  88. package/components/datepicker/demo/styles.min.css +1 -1
  89. package/components/datepicker/demo/voiceover.html +2 -4
  90. package/components/datepicker/dist/index.js +5 -4
  91. package/components/datepicker/dist/registered.js +5 -4
  92. package/components/dropdown/README.md +0 -21
  93. package/components/dropdown/demo/accessibility.html +49 -0
  94. package/components/dropdown/demo/accessibility.md +45 -0
  95. package/components/dropdown/demo/api.html +11 -20
  96. package/components/dropdown/demo/api.md +40 -1364
  97. package/components/dropdown/demo/api.min.js +2 -5098
  98. package/components/dropdown/demo/auro-dropdown.min.js +5099 -0
  99. package/components/dropdown/demo/customize.html +54 -0
  100. package/components/dropdown/demo/customize.md +780 -0
  101. package/components/dropdown/demo/demo-support.js +1 -0
  102. package/components/dropdown/demo/demo-support.min.js +55792 -0
  103. package/components/dropdown/demo/design.html +52 -0
  104. package/components/dropdown/demo/design.md +186 -0
  105. package/components/dropdown/demo/getting-started.html +54 -0
  106. package/components/dropdown/demo/getting-started.md +463 -0
  107. package/components/dropdown/demo/index.html +12 -21
  108. package/components/dropdown/demo/index.md +78 -233
  109. package/components/dropdown/demo/index.min.js +1 -5097
  110. package/components/dropdown/demo/keyboard-behavior.html +48 -0
  111. package/components/dropdown/demo/pages.json +1 -0
  112. package/components/dropdown/demo/readme.html +8 -21
  113. package/components/dropdown/demo/readme.md +0 -21
  114. package/components/dropdown/demo/styles.min.css +1 -0
  115. package/components/dropdown/demo/styles.scss +1 -0
  116. package/components/dropdown/demo/voiceover.html +51 -0
  117. package/components/dropdown/demo/voiceover.md +63 -0
  118. package/components/dropdown/dist/index.js +1 -1
  119. package/components/dropdown/dist/registered.js +1 -1
  120. package/components/form/README.md +9 -9
  121. package/components/form/demo/accessibility.html +51 -0
  122. package/components/form/demo/accessibility.md +23 -0
  123. package/components/form/demo/api.html +12 -15
  124. package/components/form/demo/api.md +14 -290
  125. package/components/form/demo/api.min.js +2 -71921
  126. package/components/form/demo/auro-form.min.js +718 -0
  127. package/components/form/demo/autocomplete.html +2 -2
  128. package/components/form/demo/customize.html +54 -0
  129. package/components/form/demo/customize.md +246 -0
  130. package/components/form/demo/demo-support.js +1 -0
  131. package/components/form/demo/demo-support.min.js +55792 -0
  132. package/components/form/demo/getting-started.html +54 -0
  133. package/components/form/demo/getting-started.md +434 -0
  134. package/components/form/demo/index.html +13 -15
  135. package/components/form/demo/index.md +67 -97
  136. package/components/form/demo/index.min.js +2 -71921
  137. package/components/form/demo/keyboard-behavior.html +51 -0
  138. package/components/form/demo/pages.json +1 -0
  139. package/components/form/demo/readme.html +13 -18
  140. package/components/form/demo/readme.md +9 -9
  141. package/components/form/demo/registerDemoDeps.min.js +71212 -0
  142. package/components/form/demo/styles.min.css +1 -0
  143. package/components/form/demo/styles.scss +1 -0
  144. package/components/form/demo/voiceover.html +51 -0
  145. package/components/form/demo/voiceover.md +36 -0
  146. package/components/form/demo/working.html +3 -2
  147. package/components/input/README.md +2 -2
  148. package/components/input/demo/accessibility.html +1 -1
  149. package/components/input/demo/api.html +1 -1
  150. package/components/input/demo/auro-input.min.js +3 -2
  151. package/components/input/demo/customize.html +1 -1
  152. package/components/input/demo/demo-support.js +1 -60
  153. package/components/input/demo/demo-support.min.js +60 -0
  154. package/components/input/demo/design.html +2 -1
  155. package/components/input/demo/getting-started.html +1 -1
  156. package/components/input/demo/getting-started.md +2 -2
  157. package/components/input/demo/index.html +1 -1
  158. package/components/input/demo/keyboard-behavior.html +2 -1
  159. package/components/input/demo/pages.json +1 -0
  160. package/components/input/demo/readme.html +2 -2
  161. package/components/input/demo/readme.md +2 -2
  162. package/components/input/demo/styles.min.css +1 -1
  163. package/components/input/demo/voiceover.html +1 -1
  164. package/components/input/dist/base-input.d.ts +1 -0
  165. package/components/input/dist/index.js +3 -2
  166. package/components/input/dist/registered.js +3 -2
  167. package/components/menu/README.md +8 -26
  168. package/components/menu/demo/accessibility.html +53 -0
  169. package/components/menu/demo/accessibility.md +34 -0
  170. package/components/menu/demo/api.html +12 -18
  171. package/components/menu/demo/api.md +43 -1102
  172. package/components/menu/demo/api.min.js +2 -2288
  173. package/components/menu/demo/auro-menu.min.js +2289 -0
  174. package/components/menu/demo/customize.html +54 -0
  175. package/components/menu/demo/customize.md +637 -0
  176. package/components/menu/demo/demo-support.js +1 -0
  177. package/components/menu/demo/demo-support.min.js +55792 -0
  178. package/components/menu/demo/design.html +53 -0
  179. package/components/menu/demo/design.md +81 -0
  180. package/components/menu/demo/getting-started.html +54 -0
  181. package/components/menu/demo/getting-started.md +322 -0
  182. package/components/menu/demo/index.html +14 -20
  183. package/components/menu/demo/index.md +26 -63
  184. package/components/menu/demo/index.min.js +1 -2287
  185. package/components/menu/demo/keyboard-behavior.html +53 -0
  186. package/components/menu/demo/pages.json +1 -0
  187. package/components/menu/demo/readme.html +12 -16
  188. package/components/menu/demo/readme.md +8 -26
  189. package/components/menu/demo/styles.min.css +1 -0
  190. package/components/menu/demo/styles.scss +1 -0
  191. package/components/menu/demo/voiceover.html +53 -0
  192. package/components/menu/demo/voiceover.md +33 -0
  193. package/components/radio/demo/accessibility.html +3 -3
  194. package/components/radio/demo/api.html +3 -3
  195. package/components/radio/demo/api.md +44 -44
  196. package/components/radio/demo/api.min.js +2 -2168
  197. package/components/radio/demo/customize.html +3 -3
  198. package/components/radio/demo/demo-support.js +1 -60
  199. package/components/radio/demo/demo-support.min.js +55792 -0
  200. package/components/radio/demo/design.html +3 -3
  201. package/components/radio/demo/getting-started.html +3 -3
  202. package/components/radio/demo/getting-started.md +154 -0
  203. package/components/radio/demo/index.html +2 -3
  204. package/components/radio/demo/index.min.js +16 -2
  205. package/components/radio/demo/keyboard-behavior.html +3 -3
  206. package/components/radio/demo/pages.json +1 -0
  207. package/components/radio/demo/readme.html +3 -3
  208. package/components/radio/demo/styles.min.css +1 -0
  209. package/components/radio/demo/styles.scss +1 -0
  210. package/components/radio/demo/voiceover.html +3 -3
  211. package/components/radio/dist/index.js +1 -1
  212. package/components/radio/dist/registered.js +1 -1
  213. package/components/select/README.md +2 -2
  214. package/components/select/demo/accessibility.html +1 -1
  215. package/components/select/demo/api.html +2 -1
  216. package/components/select/demo/customize.html +1 -1
  217. package/components/select/demo/demo-support.js +1 -60
  218. package/components/select/demo/demo-support.min.js +60 -0
  219. package/components/select/demo/design.html +2 -1
  220. package/components/select/demo/getting-started.html +1 -1
  221. package/components/select/demo/getting-started.md +2 -2
  222. package/components/select/demo/index.html +1 -1
  223. package/components/select/demo/install.html +50 -0
  224. package/components/select/demo/install.md +2 -2
  225. package/components/select/demo/keyboard-behavior.html +1 -1
  226. package/components/select/demo/keyboardBehavior.html +1 -1
  227. package/components/select/demo/layout.html +2 -1
  228. package/components/select/demo/pages.json +1 -0
  229. package/components/select/demo/readme.html +2 -1
  230. package/components/select/demo/readme.md +2 -2
  231. package/components/select/demo/registered.min.js +2 -2
  232. package/components/select/demo/styles.min.css +1 -1
  233. package/components/select/demo/voiceover.html +1 -1
  234. package/components/select/dist/index.js +2 -2
  235. package/components/select/dist/registered.js +2 -2
  236. package/custom-elements.json +5 -2
  237. package/package.json +2 -2
  238. package/components/counter/demo/keyboard-behavior.md +0 -127
  239. package/components/dropdown/demo/keyboard-behavior.md +0 -72
  240. package/components/form/demo/keyboard-behavior.md +0 -38
  241. package/components/menu/demo/keyboard-behavior.md +0 -18
  242. package/components/radio/demo/keyboard-behavior.md +0 -72
  243. package/components/radio/demo/layout.md +0 -30
  244. package/components/radio/demo/styles.css +0 -974
package/components/radio/demo/design.html CHANGED
@@ -31,20 +31,20 @@
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="./styles.css" />
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
36
35
  </head>
37
36
  <body class="auro-markdown">
38
37
  <main></main>
39
38
 
40
39
  <script type="module">
41
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
42
41
  await renderPage('./design.md');
43
42
  </script>
44
43
 
45
44
  <!-- If additional elements are needed for the demo, add them here. -->
46
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
47
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
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
49
49
 
50
50
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/radio/demo/getting-started.html CHANGED
@@ -31,14 +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="./styles.css" />
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
36
35
  </head>
37
36
  <body class="auro-markdown">
38
37
  <main></main>
39
38
 
40
39
  <script type="module">
41
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
42
41
  import { initExamples } from './api.min.js';
43
42
  await renderPage('./getting-started.md');
44
43
  initExamples();
@@ -48,6 +47,7 @@
48
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
49
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
50
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
50
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
51
51
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
52
52
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
53
53
  </body>
package/components/radio/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-radio-group</auro-anchorlink>
@@ -121,6 +124,157 @@ Then use the elements in your HTML:
121
124
  <!-- AURO-GENERATED-CONTENT:END -->
122
125
  </section>
123
126
  <section>
127
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
128
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
129
+ <auro-header level="2" id="frameworks">Frameworks</auro-header>
130
+ <auro-accordion-group Emphasis>
131
+ <auro-accordion class="section" id="react">
132
+ <span slot="trigger">React</span>
133
+ <div class="accordion-content">
134
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
135
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
136
+ 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-radio&gt;</code> works directly in JSX without any wrapper library.
137
+
138
+ <auro-header level="3" id="reactImport">Import the Component</auro-header>
139
+ Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
140
+
141
+ <pre class="language-js"><code class="language-js">import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
142
+ ​
143
+ AuroRadio.register('[custom]-radio');
144
+ AuroRadioGroup.register('[custom]-radio-group');</code></pre>
145
+
146
+ <auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
147
+ The component ships with TypeScript type definitions for the `AuroRadio` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `<auro-radio>` in JSX, add the following declaration to a `.d.ts` file in your project:
148
+
149
+ <pre class="language-js"><code class="language-js">import type { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
150
+ ​
151
+ declare global {
152
+ namespace JSX {
153
+ interface IntrinsicElements {
154
+ '[custom]-radio': React.HTMLAttributes&lt;AuroRadio&gt; &amp; Partial&lt;AuroRadio&gt;;
155
+ '[custom]-radio-group': React.HTMLAttributes&lt;AuroRadioGroup&gt; &amp; Partial&lt;AuroRadioGroup&gt;;
156
+ }
157
+ }
158
+ }</code></pre>
159
+
160
+ <auro-header level="3" id="reactEvents">Event Handling</auro-header>
161
+ Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:
162
+
163
+ <pre class="language-js"><code class="language-js">import { useRef, useEffect } from 'react';
164
+ ​
165
+ function MyRadioGroup() {
166
+ const groupRef = useRef&lt;HTMLElement&gt;(null);
167
+ ​
168
+ useEffect(() =&gt; {
169
+ const el = groupRef.current;
170
+ if (!el) return;
171
+ ​
172
+ const handleInput = () =&gt; {
173
+ console.log('Selected value:', (el as any).value);
174
+ };
175
+ ​
176
+ el.addEventListener('input', handleInput);
177
+ return () =&gt; el.removeEventListener('input', handleInput);
178
+ }, []);
179
+ ​
180
+ return (
181
+ &lt;custom-radio-group ref={groupRef}&gt;
182
+ &lt;span slot="legend"&gt;Choose an option&lt;/span&gt;
183
+ &lt;custom-radio value="yes" name="example" label="Yes"&gt;&lt;/custom-radio&gt;
184
+ &lt;custom-radio value="no" name="example" label="No"&gt;&lt;/custom-radio&gt;
185
+ &lt;/custom-radio-group&gt;
186
+ );
187
+ }</code></pre>
188
+
189
+ <auro-header level="3" id="reactModuleResolution">Module Resolution</auro-header>
190
+ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
191
+
192
+ <pre class="language-js"><code class="language-js">{
193
+ "compilerOptions": {
194
+ "moduleResolution": "bundler"
195
+ }
196
+ }</code></pre>
197
+ <!-- AURO-GENERATED-CONTENT:END -->
198
+ </div>
199
+ </auro-accordion>
200
+ <auro-accordion class="section" id="svelte">
201
+ <span slot="trigger">Svelte</span>
202
+ <div class="accordion-content">
203
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
204
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
205
+ Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code>&lt;auro-radio&gt;</code> works directly in Svelte templates without any wrapper or configuration.
206
+
207
+ <auro-header level="3" id="svelteImport">Import the Component</auro-header>
208
+ Import and register the components in the `<script>` block:
209
+
210
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
211
+ import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
212
+ ​
213
+ AuroRadio.register('[custom]-radio');
214
+ AuroRadioGroup.register('[custom]-radio-group');
215
+ &lt;/script&gt;</code></pre>
216
+
217
+ <auro-header level="3" id="svelteUsage">Basic Usage</auro-header>
218
+ Use `<auro-radio-group>` directly in your Svelte template:
219
+
220
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
221
+ import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
222
+ ​
223
+ AuroRadio.register('[custom]-radio');
224
+ AuroRadioGroup.register('[custom]-radio-group');
225
+ &lt;/script&gt;
226
+ &lt;custom-radio-group&gt;
227
+ &lt;span slot="legend"&gt;Choose an option&lt;/span&gt;
228
+ &lt;custom-radio value="yes" name="example" label="Yes"&gt;&lt;/custom-radio&gt;
229
+ &lt;custom-radio value="no" name="example" label="No"&gt;&lt;/custom-radio&gt;
230
+ &lt;/custom-radio-group&gt;</code></pre>
231
+
232
+ <auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
233
+ Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-radio>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
234
+
235
+ <pre class="language-js"><code class="language-js">import type { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
236
+ ​
237
+ declare namespace svelteHTML {
238
+ interface IntrinsicElements {
239
+ '[custom]-radio': Partial&lt;AuroRadio&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroRadio&gt;;
240
+ '[custom]-radio-group': Partial&lt;AuroRadioGroup&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroRadioGroup&gt;;
241
+ }
242
+ }</code></pre>
243
+
244
+ This enables prop hinting for attributes like `value`, `checked`, `disabled`, and others directly in Svelte templates.
245
+
246
+ <auro-header level="3" id="svelteEvents">Event Handling</auro-header>
247
+ Auro components emit native `CustomEvent`s. Use the `oninput` handler directly on the group element:
248
+
249
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
250
+ let selected = $state('');
251
+ ​
252
+ function handleInput(e: Event) {
253
+ selected = (e.target as HTMLElement &amp; { value: string }).value;
254
+ }
255
+ &lt;/script&gt;
256
+ &lt;custom-radio-group oninput={handleInput}&gt;
257
+ &lt;span slot="legend"&gt;Choose an option&lt;/span&gt;
258
+ &lt;custom-radio value="yes" name="example" label="Yes"&gt;&lt;/custom-radio&gt;
259
+ &lt;custom-radio value="no" name="example" label="No"&gt;&lt;/custom-radio&gt;
260
+ &lt;/custom-radio-group&gt;
261
+ &lt;p&gt;Selected: {selected}&lt;/p&gt;</code></pre>
262
+
263
+ <auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
264
+ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
265
+
266
+ <pre class="language-js"><code class="language-js">{
267
+ "compilerOptions": {
268
+ "moduleResolution": "bundler"
269
+ }
270
+ }</code></pre>
271
+ <!-- AURO-GENERATED-CONTENT:END -->
272
+ </div>
273
+ </auro-accordion>
274
+ </auro-accordion-group>
275
+ <!-- AURO-GENERATED-CONTENT:END -->
276
+ </section>
277
+ <section>
124
278
  <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
125
279
  <p>Every <code>&lt;auro-radio-group&gt;</code> implementation requires:</p>
126
280
  <ol>
package/components/radio/demo/index.html CHANGED
@@ -31,8 +31,7 @@
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="./styles.css" />
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
36
35
  </head>
37
36
  <body class="auro-markdown">
38
37
  <main></main>
@@ -45,7 +44,7 @@
45
44
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
46
45
 
47
46
  <script type="module">
48
- import { renderPage } from './demo-support.js';
47
+ import { renderPage } from './demo-support.min.js';
49
48
  await renderPage('./index.md');
50
49
  </script>
51
50
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/radio/demo/index.min.js CHANGED
@@ -43,7 +43,21 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
43
43
  * SPDX-License-Identifier: BSD-3-Clause
44
44
  */const o$1=o=>o??A;
45
45
 
46
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t();}(0,function(){function e(e){var t=true,n=false,o=null,d={text:true,search:true,url:true,tel:true,email:true,password:true,number:true,date:true,month:true,week:true,time:true,datetime:true,"datetime-local":true};function i(e){return !!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""));}function u(e){t=false;}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c);}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=false,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c));}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=true);},true),document.addEventListener("mousedown",u,true),document.addEventListener("pointerdown",u,true),document.addEventListener("touchstart",u,true),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=true),a());},true),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target);},true),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=true,window.clearTimeout(o),o=window.setTimeout(function(){n=false;},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")));},true),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""));}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready");}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",false,false,{});}window.dispatchEvent(t);}"undefined"!=typeof document&&e(document);});
46
+ var focusVisible_min = {exports: {}};
47
+
48
+ var hasRequiredFocusVisible_min;
49
+
50
+ function requireFocusVisible_min () {
51
+ if (hasRequiredFocusVisible_min) return focusVisible_min.exports;
52
+ hasRequiredFocusVisible_min = 1;
53
+ (function (module, exports) {
54
+ !function(e,t){t();}(0,function(){function e(e){var t=true,n=false,o=null,d={text:true,search:true,url:true,tel:true,email:true,password:true,number:true,date:true,month:true,week:true,time:true,datetime:true,"datetime-local":true};function i(e){return !!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""));}function u(e){t=false;}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c);}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=false,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c));}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=true);},true),document.addEventListener("mousedown",u,true),document.addEventListener("pointerdown",u,true),document.addEventListener("touchstart",u,true),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=true),a());},true),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target);},true),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=true,window.clearTimeout(o),o=window.setTimeout(function(){n=false;},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")));},true),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""));}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready");}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",false,false,{});}window.dispatchEvent(t);}"undefined"!=typeof document&&e(document);});
55
+
56
+ } ());
57
+ return focusVisible_min.exports;
58
+ }
59
+
60
+ requireFocusVisible_min();
47
61
 
48
62
  var styleCss$2 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-75, 0.375rem)}.rdoGroup:has(:enabled) .label:hover{cursor:pointer}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:after{position:absolute;z-index:1;top:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
49
63
 
@@ -1620,7 +1634,7 @@ class AuroHelpText extends i$2 {
1620
1634
  }
1621
1635
  }
1622
1636
 
1623
- var formkitVersion = '202605041857';
1637
+ var formkitVersion = '202605051928';
1624
1638
 
1625
1639
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1626
1640
  // See LICENSE in the project root for license information.
package/components/radio/demo/keyboard-behavior.html CHANGED
@@ -31,19 +31,19 @@
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="./styles.css" />
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
36
35
  </head>
37
36
  <body class="auro-markdown">
38
37
  <main></main>
39
38
 
40
39
  <script type="module">
41
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
42
41
  await renderPage('./keyboard-behavior.md');
43
42
  </script>
44
43
 
45
44
  <!-- If additional elements are needed for the demo, add them here. -->
46
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
47
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
48
48
 
49
49
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/radio/demo/pages.json ADDED
@@ -0,0 +1 @@
1
+ ["accessibility.md","customize.md","design.md","getting-started.md","index.md","voiceover.md"]
package/components/radio/demo/readme.html CHANGED
@@ -31,14 +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="./styles.css" />
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
36
35
  </head>
37
36
  <body class="auro-markdown">
38
37
  <main></main>
39
38
 
40
39
  <script type="module">
41
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
42
41
  await renderPage('./readme.md');
43
42
  </script>
44
43
 
@@ -46,5 +45,6 @@
46
45
 
47
46
  <!-- If additional elements are needed for the demo, add them here. -->
48
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
49
49
  </body>
50
50
  </html>
package/components/radio/demo/styles.min.css ADDED
@@ -0,0 +1 @@
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/radio/demo/styles.scss ADDED
@@ -0,0 +1 @@
1
+ @import '@aurodesignsystem/config/demo-styles';
package/components/radio/demo/voiceover.html CHANGED
@@ -31,19 +31,19 @@
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="./styles.css" />
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
36
35
  </head>
37
36
  <body class="auro-markdown">
38
37
  <main></main>
39
38
 
40
39
  <script type="module">
41
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
42
41
  await renderPage('./voiceover.md');
43
42
  </script>
44
43
 
45
44
  <!-- If additional elements are needed for the demo, add them here. -->
46
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
47
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
48
48
 
49
49
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/radio/dist/index.js CHANGED
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202605041857';
1576
+ var formkitVersion = '202605051928';
1577
1577
 
1578
1578
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1579
1579
  // See LICENSE in the project root for license information.
package/components/radio/dist/registered.js CHANGED
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202605041857';
1576
+ var formkitVersion = '202605051928';
1577
1577
 
1578
1578
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1579
1579
  // See LICENSE in the project root for license information.
package/components/select/README.md CHANGED
@@ -51,7 +51,7 @@ See description.
51
51
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
52
52
  <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
53
53
 
54
- <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
54
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
55
55
  <!-- AURO-GENERATED-CONTENT:END -->
56
56
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
57
57
  <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -75,7 +75,7 @@ This configuration enables proper module resolution for the component's TypeScri
75
75
  <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
76
76
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
77
77
 
78
- <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/@latest/auro-select/+esm"&gt;&lt;/script&gt;</code></pre>
78
+ <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"&gt;&lt;/script&gt;</code></pre>
79
79
  <!-- AURO-GENERATED-CONTENT:END -->
80
80
 
81
81
  ## Formkit Development
package/components/select/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/select/demo/api.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('./api.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
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
46
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
47
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
48
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
package/components/select/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/select/demo/demo-support.js CHANGED
@@ -1,60 +1 @@
1
- import {unified} from 'unified';
2
- import remarkParse from 'remark-parse';
3
- import remarkGfm from 'remark-gfm';
4
- import remarkRehype from 'remark-rehype';
5
- import rehypeRaw from 'rehype-raw';
6
- import rehypeHighlight from 'rehype-highlight';
7
- import rehypeStringify from 'rehype-stringify';
8
-
9
- export async function renderPage(mdPath) {
10
- const response = await fetch(mdPath);
11
- const text = await response.text();
12
- const result = await unified()
13
- .use(remarkParse)
14
- .use(remarkGfm)
15
- .use(remarkRehype, { allowDangerousHtml: true })
16
- .use(rehypeRaw)
17
- .use(rehypeHighlight)
18
- .use(rehypeStringify)
19
- .process(text);
20
-
21
- document.querySelector('main').innerHTML = String(result);
22
- addCopyButtons();
23
- }
24
-
25
- function addCopyButtons() {
26
- document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
27
- const pre = code.parentElement;
28
- const wrapper = document.createElement('div');
29
- wrapper.className = 'pre-wrapper';
30
- pre.parentNode.insertBefore(wrapper, pre);
31
- wrapper.appendChild(pre);
32
- const btn = document.createElement('button');
33
- btn.className = 'copy-btn';
34
- btn.textContent = 'Copy';
35
- btn.addEventListener('click', () => {
36
- const raw = code.textContent;
37
- const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
38
- navigator.clipboard.writeText(text).then(() => {
39
- btn.textContent = 'Copied!';
40
- setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
41
- });
42
- });
43
- wrapper.appendChild(btn);
44
- });
45
- }
46
-
47
- export function openAccordion(id) {
48
- document.querySelectorAll('auro-accordion').forEach((accordion) => {
49
- accordion.removeAttribute('expanded');
50
- });
51
- const target = document.getElementById(id);
52
- if (target) {
53
- target.setAttribute('expanded', '');
54
- setTimeout(() => {
55
- target.scrollIntoView({ behavior: 'smooth', block: 'start' });
56
- }, 550);
57
- }
58
- }
59
-
60
- window.openAccordion = openAccordion;
1
+ export { renderPage, openAccordion } from '@aurodesignsystem/utils/demo-support';