@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

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 (254) hide show
  1. package/components/checkbox/README.md +11 -27
  2. package/components/checkbox/demo/accessibility.html +49 -0
  3. package/components/checkbox/demo/accessibility.md +44 -0
  4. package/components/checkbox/demo/api.html +17 -25
  5. package/components/checkbox/demo/api.md +40 -416
  6. package/components/checkbox/demo/api.min.js +5 -4
  7. package/components/checkbox/demo/customize.html +52 -0
  8. package/components/checkbox/demo/customize.md +361 -0
  9. package/components/checkbox/demo/demo-support.js +60 -0
  10. package/components/checkbox/demo/design.html +52 -0
  11. package/components/checkbox/demo/design.md +149 -0
  12. package/components/checkbox/demo/getting-started.html +52 -0
  13. package/components/checkbox/demo/getting-started.md +261 -0
  14. package/components/checkbox/demo/index.html +17 -20
  15. package/components/checkbox/demo/index.md +144 -29
  16. package/components/checkbox/demo/index.min.js +5 -4
  17. package/components/checkbox/demo/keyboard-behavior.html +49 -0
  18. package/components/checkbox/demo/keyboard-behavior.md +0 -3
  19. package/components/checkbox/demo/layout.md +30 -0
  20. package/components/checkbox/demo/readme.html +10 -17
  21. package/components/checkbox/demo/readme.md +11 -27
  22. package/components/checkbox/demo/styles.css +974 -0
  23. package/components/checkbox/demo/voiceover.html +49 -0
  24. package/components/checkbox/demo/voiceover.md +37 -0
  25. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  26. package/components/checkbox/dist/index.js +5 -4
  27. package/components/checkbox/dist/registered.js +5 -4
  28. package/components/combobox/README.md +8 -29
  29. package/components/combobox/demo/accessibility.html +2 -20
  30. package/components/combobox/demo/accessibility.md +1 -1
  31. package/components/combobox/demo/api.html +5 -52
  32. package/components/combobox/demo/api.md +53 -2261
  33. package/components/combobox/demo/api.min.js +15 -12
  34. package/components/combobox/demo/customize.html +53 -0
  35. package/components/combobox/demo/customize.js +24 -0
  36. package/components/combobox/demo/customize.md +1249 -0
  37. package/components/combobox/demo/customize.min.js +18132 -0
  38. package/components/combobox/demo/demo-support.js +60 -0
  39. package/components/combobox/demo/design.html +2 -43
  40. package/components/combobox/demo/design.md +4 -4
  41. package/components/combobox/demo/getting-started.html +53 -0
  42. package/components/combobox/demo/{install.js → getting-started.js} +2 -5
  43. package/components/combobox/demo/getting-started.md +397 -0
  44. package/components/combobox/demo/{install.min.js → getting-started.min.js} +14 -38
  45. package/components/combobox/demo/index.html +4 -47
  46. package/components/combobox/demo/index.md +3 -569
  47. package/components/combobox/demo/index.min.js +15 -12
  48. package/components/combobox/demo/keyboard-behavior.html +2 -20
  49. package/components/combobox/demo/keyboard-behavior.md +2 -2
  50. package/components/combobox/demo/layout.md +2 -2
  51. package/components/combobox/demo/readme.html +2 -43
  52. package/components/combobox/demo/readme.md +8 -29
  53. package/components/combobox/demo/styles.css +98 -105
  54. package/components/combobox/demo/voiceover.html +2 -20
  55. package/components/combobox/demo/voiceover.md +1 -1
  56. package/components/combobox/dist/index.js +12 -10
  57. package/components/combobox/dist/registered.js +12 -10
  58. package/components/counter/README.md +21 -51
  59. package/components/counter/demo/accessibility.html +49 -0
  60. package/components/counter/demo/accessibility.md +34 -0
  61. package/components/counter/demo/api.html +12 -20
  62. package/components/counter/demo/api.md +49 -1299
  63. package/components/counter/demo/api.min.js +6 -6
  64. package/components/counter/demo/customize.html +53 -0
  65. package/components/counter/demo/customize.md +650 -0
  66. package/components/counter/demo/demo-support.js +60 -0
  67. package/components/counter/demo/design.html +52 -0
  68. package/components/counter/demo/design.md +192 -0
  69. package/components/counter/demo/getting-started.html +54 -0
  70. package/components/counter/demo/getting-started.md +332 -0
  71. package/components/counter/demo/index.html +14 -19
  72. package/components/counter/demo/index.md +113 -47
  73. package/components/counter/demo/index.min.js +6 -6
  74. package/components/counter/demo/keyboard-behavior.html +49 -0
  75. package/components/counter/demo/keyboard-behavior.md +1 -1
  76. package/components/counter/demo/keyboardBehavior.html +7 -39
  77. package/components/counter/demo/layout.md +10 -0
  78. package/components/counter/demo/readme.html +11 -15
  79. package/components/counter/demo/readme.md +21 -51
  80. package/components/counter/demo/styles.css +974 -0
  81. package/components/counter/demo/voiceover.html +51 -0
  82. package/components/counter/demo/voiceover.md +80 -0
  83. package/components/counter/dist/index.js +6 -6
  84. package/components/counter/dist/registered.js +6 -6
  85. package/components/datepicker/README.md +10 -24
  86. package/components/datepicker/demo/accessibility.html +50 -0
  87. package/components/datepicker/demo/accessibility.md +64 -0
  88. package/components/datepicker/demo/api.md +69 -1739
  89. package/components/datepicker/demo/api.min.js +14 -14
  90. package/components/datepicker/demo/customize.html +53 -0
  91. package/components/datepicker/demo/customize.md +723 -0
  92. package/components/datepicker/demo/demo-support.js +60 -0
  93. package/components/{select/demo/layout.html → datepicker/demo/design.html} +7 -47
  94. package/components/datepicker/demo/design.md +158 -0
  95. package/components/datepicker/demo/getting-started.html +53 -0
  96. package/components/datepicker/demo/getting-started.md +237 -0
  97. package/components/datepicker/demo/index.html +14 -34
  98. package/components/datepicker/demo/index.md +160 -103
  99. package/components/datepicker/demo/index.min.js +14 -14
  100. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  101. package/components/datepicker/demo/layout.md +92 -0
  102. package/components/datepicker/demo/readme.md +10 -24
  103. package/components/datepicker/demo/styles.css +974 -0
  104. package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} +14 -36
  105. package/components/datepicker/demo/voiceover.md +98 -0
  106. package/components/datepicker/dist/index.js +14 -14
  107. package/components/datepicker/dist/registered.js +14 -14
  108. package/components/dropdown/README.md +0 -25
  109. package/components/dropdown/demo/accessibility.html +49 -0
  110. package/components/dropdown/demo/accessibility.md +45 -0
  111. package/components/dropdown/demo/api.html +10 -19
  112. package/components/dropdown/demo/api.md +40 -1364
  113. package/components/dropdown/demo/api.min.js +2 -2
  114. package/components/dropdown/demo/customize.html +54 -0
  115. package/components/dropdown/demo/customize.md +780 -0
  116. package/components/dropdown/demo/demo-support.js +60 -0
  117. package/components/dropdown/demo/design.html +52 -0
  118. package/components/dropdown/demo/design.md +186 -0
  119. package/components/dropdown/demo/getting-started.html +54 -0
  120. package/components/dropdown/demo/getting-started.md +317 -0
  121. package/components/dropdown/demo/index.html +12 -20
  122. package/components/dropdown/demo/index.md +70 -225
  123. package/components/dropdown/demo/index.min.js +2 -2
  124. package/components/dropdown/demo/keyboard-behavior.html +49 -0
  125. package/components/dropdown/demo/keyboard-behavior.md +4 -8
  126. package/components/dropdown/demo/layout.md +21 -0
  127. package/components/dropdown/demo/readme.html +7 -20
  128. package/components/dropdown/demo/readme.md +0 -25
  129. package/components/dropdown/demo/styles.css +974 -0
  130. package/components/dropdown/demo/voiceover.html +51 -0
  131. package/components/dropdown/demo/voiceover.md +63 -0
  132. package/components/dropdown/dist/index.js +2 -2
  133. package/components/dropdown/dist/registered.js +2 -2
  134. package/components/form/README.md +9 -13
  135. package/components/form/demo/accessibility.html +51 -0
  136. package/components/form/demo/accessibility.md +23 -0
  137. package/components/form/demo/api.html +11 -14
  138. package/components/form/demo/api.md +14 -290
  139. package/components/form/demo/api.min.js +53 -50
  140. package/components/form/demo/customize.html +54 -0
  141. package/components/form/demo/customize.md +246 -0
  142. package/components/form/demo/demo-support.js +60 -0
  143. package/components/form/demo/getting-started.html +54 -0
  144. package/components/form/demo/getting-started.md +291 -0
  145. package/components/form/demo/index.html +12 -14
  146. package/components/form/demo/index.md +66 -96
  147. package/components/form/demo/index.min.js +53 -50
  148. package/components/form/demo/keyboard-behavior.html +51 -0
  149. package/components/form/demo/readme.html +12 -17
  150. package/components/form/demo/readme.md +9 -13
  151. package/components/form/demo/styles.css +974 -0
  152. package/components/form/demo/voiceover.html +51 -0
  153. package/components/form/demo/voiceover.md +36 -0
  154. package/components/helptext/dist/index.js +1 -1
  155. package/components/helptext/dist/registered.js +1 -1
  156. package/components/input/README.md +17 -28
  157. package/components/input/demo/accessibility.html +38 -0
  158. package/components/input/demo/accessibility.md +69 -0
  159. package/components/input/demo/api.html +17 -22
  160. package/components/input/demo/api.js +4 -23
  161. package/components/input/demo/api.md +67 -1267
  162. package/components/input/demo/api.min.js +6 -98
  163. package/components/input/demo/customize.html +54 -0
  164. package/components/input/demo/customize.js +25 -0
  165. package/components/input/demo/customize.md +1372 -0
  166. package/components/input/demo/customize.min.js +7431 -0
  167. package/components/input/demo/demo-support.js +60 -0
  168. package/components/input/demo/design.html +39 -0
  169. package/components/input/demo/design.md +224 -0
  170. package/components/input/demo/getting-started.html +53 -0
  171. package/components/input/demo/getting-started.js +8 -0
  172. package/components/input/demo/getting-started.md +312 -0
  173. package/components/input/demo/getting-started.min.js +7369 -0
  174. package/components/input/demo/index.html +16 -22
  175. package/components/input/demo/index.js +0 -11
  176. package/components/input/demo/index.md +171 -139
  177. package/components/input/demo/index.min.js +6 -18
  178. package/components/input/demo/keyboard-behavior.html +38 -0
  179. package/components/input/demo/layout.md +77 -0
  180. package/components/input/demo/readme.md +17 -28
  181. package/components/input/demo/styles.css +974 -0
  182. package/components/input/demo/voiceover.html +38 -0
  183. package/components/input/demo/voiceover.md +70 -0
  184. package/components/input/dist/base-input.d.ts +1 -0
  185. package/components/input/dist/index.js +6 -6
  186. package/components/input/dist/registered.js +6 -6
  187. package/components/menu/README.md +1 -5
  188. package/components/menu/demo/api.md +43 -43
  189. package/components/menu/demo/api.min.js +2 -2
  190. package/components/menu/demo/index.md +1 -1
  191. package/components/menu/demo/index.min.js +2 -2
  192. package/components/menu/demo/readme.md +1 -5
  193. package/components/menu/dist/index.js +2 -2
  194. package/components/menu/dist/registered.js +2 -2
  195. package/components/radio/README.md +9 -22
  196. package/components/radio/demo/accessibility.html +51 -0
  197. package/components/radio/demo/accessibility.md +44 -0
  198. package/components/radio/demo/api.html +13 -20
  199. package/components/radio/demo/api.md +44 -589
  200. package/components/radio/demo/api.min.js +3 -3
  201. package/components/radio/demo/customize.html +53 -0
  202. package/components/radio/demo/customize.md +368 -0
  203. package/components/radio/demo/demo-support.js +60 -0
  204. package/components/radio/demo/design.html +52 -0
  205. package/components/radio/demo/design.md +143 -0
  206. package/components/radio/demo/getting-started.html +54 -0
  207. package/components/radio/demo/getting-started.md +296 -0
  208. package/components/radio/demo/index.html +16 -19
  209. package/components/radio/demo/index.md +110 -45
  210. package/components/radio/demo/index.min.js +3 -3
  211. package/components/radio/demo/keyboard-behavior.html +51 -0
  212. package/components/radio/demo/layout.md +30 -0
  213. package/components/radio/demo/readme.html +11 -17
  214. package/components/radio/demo/readme.md +9 -22
  215. package/components/radio/demo/styles.css +974 -0
  216. package/components/radio/demo/voiceover.html +51 -0
  217. package/components/radio/demo/voiceover.md +43 -0
  218. package/components/radio/dist/index.js +3 -3
  219. package/components/radio/dist/registered.js +3 -3
  220. package/components/select/README.md +7 -4
  221. package/components/select/demo/accessibility.html +5 -21
  222. package/components/select/demo/accessibility.md +1 -1
  223. package/components/select/demo/api.html +3 -48
  224. package/components/select/demo/api.md +52 -2342
  225. package/components/select/demo/customize.html +54 -0
  226. package/components/select/demo/customize.js +11 -0
  227. package/components/select/demo/customize.md +1049 -0
  228. package/components/select/demo/{api.min.js → customize.min.js} +12 -113
  229. package/components/select/demo/demo-support.js +60 -0
  230. package/components/select/demo/design.html +3 -44
  231. package/components/select/demo/design.md +2 -2
  232. package/components/select/demo/getting-started.html +5 -76
  233. package/components/select/demo/getting-started.js +20 -3
  234. package/components/select/demo/getting-started.md +97 -705
  235. package/components/select/demo/getting-started.min.js +58 -9
  236. package/components/select/demo/index.html +4 -43
  237. package/components/select/demo/index.js +5 -3
  238. package/components/select/demo/index.md +2 -2
  239. package/components/select/demo/index.min.js +14 -9
  240. package/components/select/demo/keyboard-behavior.html +6 -47
  241. package/components/select/demo/keyboard-behavior.md +5 -6
  242. package/components/select/demo/keyboardBehavior.html +4 -46
  243. package/components/select/demo/readme.html +3 -44
  244. package/components/select/demo/readme.md +7 -4
  245. package/components/select/demo/styles.css +57 -109
  246. package/components/select/demo/voiceover.html +3 -30
  247. package/components/select/dist/index.js +5 -5
  248. package/components/select/dist/registered.js +5 -5
  249. package/custom-elements.json +249 -246
  250. package/package.json +3 -3
  251. package/components/combobox/demo/install.html +0 -94
  252. package/components/combobox/demo/install.md +0 -98
  253. package/components/select/demo/api.js +0 -39
  254. package/components/select/demo/install.md +0 -92
package/components/radio/demo/demo-support.js ADDED
@@ -0,0 +1,60 @@
1
+ import {unified} from 'https://esm.sh/unified';
2
+ import remarkParse from 'https://esm.sh/remark-parse';
3
+ import remarkGfm from 'https://esm.sh/remark-gfm';
4
+ import remarkRehype from 'https://esm.sh/remark-rehype';
5
+ import rehypeRaw from 'https://esm.sh/rehype-raw';
6
+ import rehypeHighlight from 'https://esm.sh/rehype-highlight';
7
+ import rehypeStringify from 'https://esm.sh/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;
package/components/radio/demo/design.html ADDED
@@ -0,0 +1,52 @@
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/design.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-radio | Design</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-radio'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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import { renderPage } from './demo-support.js';
42
+ await renderPage('./design.md');
43
+ </script>
44
+
45
+ <!-- If additional elements are needed for the demo, add them here. -->
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-header@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
49
+
50
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
51
+ </body>
52
+ </html>
package/components/radio/demo/design.md ADDED
@@ -0,0 +1,143 @@
1
+ <auro-header level="1" id="overview">Radio - Design</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <auro-header level="3" id="anatomy">Component Anatomy</auro-header>
6
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/layout/layout.md) -->
7
+ <!-- The below content is automatically added from ./../docs/partials/layout/layout.md -->
8
+ <p>The component consists of the following elements:</p>
9
+ <ul>
10
+ <li>
11
+ <strong>radio group:</strong> a container element (<code>&lt;auro-radio-group&gt;</code>) that manages a collection of radio buttons, handles validation, and provides a shared legend and help text.
12
+ </li>
13
+ <li>
14
+ <strong>radio button:</strong> an individual selectable element (<code>&lt;auro-radio&gt;</code>) that can be toggled between selected and unselected states. Only one radio button in a group can be selected at a time.
15
+ </li>
16
+ <li>
17
+ <strong>legend:</strong> descriptive label rendered above the group of radio buttons, set via the <code>legend</code> slot on the group.
18
+ </li>
19
+ <li>
20
+ <strong>help text:</strong> descriptive text rendered below the group intended to help clarify the intended use of the component and any current validation error with instructions to resolve those errors.
21
+ </li>
22
+ </ul>
23
+ <auro-header level="4" id="radioGroup">Radio Group</auro-header>
24
+ <p>The group element coordinates shared behavior across all child radio buttons, including validation (e.g. <code>required</code>), error state display, and the <code>disabled</code> attribute which disables all options at once.</p>
25
+ <auro-header level="4" id="radioButton">Radio Button</auro-header>
26
+ <p>Each radio button renders a visual indicator (filled circle) and a label. A radio button may be in one of the following states:</p>
27
+ <ul>
28
+ <li>
29
+ <code>checked</code> - The radio button is selected and its value becomes the group's value.
30
+ </li>
31
+ <li>
32
+ <code>disabled</code> - The radio button is not interactive and cannot be selected.
33
+ </li>
34
+ <li>
35
+ <code>error</code> - Inherited from the parent group when validation fails.
36
+ </li>
37
+ </ul>
38
+ <!-- AURO-GENERATED-CONTENT:END -->
39
+ <auro-header level="3" id="defaultLayout">Default Layout</auro-header>
40
+ <p>The <code>auro-radio-group</code> renders radio buttons in a vertical list by default.</p>
41
+ <div class="exampleWrapper">
42
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
43
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
44
+ <auro-radio-group>
45
+ <span slot="legend">Form label goes here</span>
46
+ <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
47
+ <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
48
+ <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
49
+ </auro-radio-group>
50
+ <!-- AURO-GENERATED-CONTENT:END -->
51
+ </div>
52
+ <auro-accordion alignRight>
53
+ <span slot="trigger">See code</span>
54
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
55
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
56
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
57
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
58
+ &lt;auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
59
+ &lt;auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
60
+ &lt;auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
61
+ &lt;/auro-radio-group&gt;</code></pre>
62
+ <!-- AURO-GENERATED-CONTENT:END -->
63
+ </auro-accordion>
64
+ <auro-header level="3" id="horizontalLayout">Horizontal Layout</auro-header>
65
+ <p>Use the <code>horizontal</code> attribute to render options on a single horizontal line.</p>
66
+ <p><strong>Note:</strong> The <code>horizontal</code> attribute has a limit of 3 options. Beyond three, options will be listed vertically.</p>
67
+ <div class="exampleWrapper">
68
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
69
+ <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
70
+ <auro-radio-group horizontal>
71
+ <span slot="legend">Form label goes here</span>
72
+ <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
73
+ <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
74
+ <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
75
+ </auro-radio-group>
76
+ <!-- AURO-GENERATED-CONTENT:END -->
77
+ </div>
78
+ <auro-accordion alignRight>
79
+ <span slot="trigger">See code</span>
80
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
81
+ <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
82
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group horizontal&gt;
83
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
84
+ &lt;auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
85
+ &lt;auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
86
+ &lt;auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
87
+ &lt;/auro-radio-group&gt;</code></pre>
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+ </auro-accordion>
90
+ <auro-header level="3" id="colors">Colors</auro-header>
91
+ <auro-header level="4" id="defaultColor">Default Color</auro-header>
92
+ <p>When the component is used on a light background.</p>
93
+ <div class="exampleWrapper">
94
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
95
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
96
+ <auro-radio-group>
97
+ <span slot="legend">Form label goes here</span>
98
+ <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
99
+ <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
100
+ <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
101
+ </auro-radio-group>
102
+ <!-- AURO-GENERATED-CONTENT:END -->
103
+ </div>
104
+ <auro-accordion alignRight>
105
+ <span slot="trigger">See code</span>
106
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
107
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
108
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
109
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
110
+ &lt;auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
111
+ &lt;auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
112
+ &lt;auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
113
+ &lt;/auro-radio-group&gt;</code></pre>
114
+ <!-- AURO-GENERATED-CONTENT:END -->
115
+ </auro-accordion>
116
+ <auro-header level="4" id="inverseColor">Inverse Color</auro-header>
117
+ <p>When the component is used on a darker background, set <code>appearance="inverse"</code> to invert the component colors for proper contrast and visibility.</p>
118
+ <div class="exampleWrapper--ondark">
119
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
120
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
121
+ <auro-radio-group appearance="inverse">
122
+ <span slot="legend">Form label goes here</span>
123
+ <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
124
+ <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
125
+ <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
126
+ </auro-radio-group>
127
+ <!-- AURO-GENERATED-CONTENT:END -->
128
+ </div>
129
+ <auro-accordion alignRight>
130
+ <span slot="trigger">See code</span>
131
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-group.html) -->
132
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-group.html -->
133
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group appearance="inverse"&gt;
134
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
135
+ &lt;auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
136
+ &lt;auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
137
+ &lt;auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
138
+ &lt;/auro-radio-group&gt;</code></pre>
139
+ <!-- AURO-GENERATED-CONTENT:END -->
140
+ </auro-accordion>
141
+ </div>
142
+ </div>
143
+ </div>
package/components/radio/demo/getting-started.html ADDED
@@ -0,0 +1,54 @@
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/getting-started.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-radio | Getting Started</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-radio'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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import { renderPage } from './demo-support.js';
42
+ import { initExamples } from './api.min.js';
43
+ await renderPage('./getting-started.md');
44
+ initExamples();
45
+ </script>
46
+
47
+ <!-- If additional elements are needed for the demo, add them here. -->
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
50
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
51
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
52
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
53
+ </body>
54
+ </html>
package/components/radio/demo/getting-started.md ADDED
@@ -0,0 +1,296 @@
1
+ <auro-header level="1" id="overview">Radio - Getting Started</auro-header>
2
+ <div class="contentWrapper">
3
+ <nav>
4
+ <auro-nav anchorNavContent=".scrollWrapper">
5
+ <span slot="mobileToggleCollapsed">View More</span>
6
+ <span slot="mobileToggleExpanded">View Less</span>
7
+ <auro-anchorlink fluid href="#setup">Setup</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
10
+ <auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
11
+ <auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
12
+ <auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
13
+ <auro-anchorlink fluid href="#slotsGroup" class="level2 body-xs">auro-radio-group</auro-anchorlink>
14
+ <auro-anchorlink fluid href="#slot-legend" class="level2 body-xs">- legend</auro-anchorlink>
15
+ <auro-anchorlink fluid href="#slot-helpText" class="level2 body-xs">- helpText</auro-anchorlink>
16
+ <auro-anchorlink fluid href="#slot-optionalLabel" class="level2 body-xs">- optionalLabel</auro-anchorlink>
17
+ <auro-anchorlink fluid href="#slotsRadio" class="level2 body-xs">auro-radio</auro-anchorlink>
18
+ <auro-anchorlink fluid href="#slot-default-radio" class="level2 body-xs">- (default)</auro-anchorlink>
19
+ <auro-anchorlink fluid href="#slot-content" class="level2 body-xs">- content</auro-anchorlink>
20
+ <auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
21
+ <auro-anchorlink fluid href="#validity" class="level2 body-xs">Validity</auro-anchorlink>
22
+ <auro-anchorlink fluid href="#publicFunctions">Functions</auro-anchorlink>
23
+ <auro-anchorlink fluid href="#reset" class="level2 body-xs">reset()</auro-anchorlink>
24
+ <auro-anchorlink fluid href="#validate" class="level2 body-xs">validate()</auro-anchorlink>
25
+ </auro-nav>
26
+ </nav>
27
+ <div class="mainContent">
28
+ <div class="scrollWrapper">
29
+ <section>
30
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
31
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
32
+ <auro-header level="2" id="setup">Setup</auro-header>
33
+ <auro-accordion-group Emphasis>
34
+ <auro-accordion expanded class="section" id="recommendedAccordion">
35
+ <span slot="trigger">Recommended Installation and Implementation</span>
36
+ <div class="accordion-content">
37
+ <auro-header level="3">Install</auro-header>
38
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
39
+ <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
40
+
41
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
42
+ <!-- AURO-GENERATED-CONTENT:END -->
43
+ <auro-header level="3">Implementation</auro-header>
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
45
+ <!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
46
+ <auro-header level="4" id="customRegistration">Custom Component Registration for Version Management</auro-header>
47
+ There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
48
+
49
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
50
+
51
+ <pre class="language-js"><code class="language-js">// Import the class only
52
+ import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
53
+ ​
54
+ // Register with a custom name if desired
55
+ AuroRadio.register('custom-radio');
56
+ AuroRadioGroup.register('custom-radio-group');</code></pre>
57
+
58
+ This will create a new custom element `<custom-radio>` and `<custom-radio-group>` that behaves exactly like `<auro-radio>` and `<auro-radio-group>`, allowing both to coexist on the same page without interfering with each other.
59
+
60
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
61
+ <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
62
+ <pre class="language-html"><code class="language-html">&lt;custom-radio-group&gt;
63
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
64
+ &lt;custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/custom-radio&gt;
65
+ &lt;custom-radio id="customRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/custom-radio&gt;
66
+ &lt;custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/custom-radio&gt;
67
+ &lt;/custom-radio-group&gt;</code></pre>
68
+ <!-- AURO-GENERATED-CONTENT:END -->
69
+ <!-- AURO-GENERATED-CONTENT:END -->
70
+ </div>
71
+ </auro-accordion>
72
+ <auro-accordion class="section" id="autoAccordion">
73
+ <span slot="trigger">Auto Installation and Implementation</span>
74
+ <div class="accordion-content">
75
+ <p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
76
+ <auro-header level="3">Install</auro-header>
77
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
78
+ <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
79
+
80
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+ <auro-header level="3">Implementation</auro-header>
83
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
84
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
85
+ Import the component and its dependencies, then register the custom elements:
86
+
87
+ <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-radio';</code></pre>
88
+
89
+ Then use the elements in your HTML:
90
+
91
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
92
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
93
+ &lt;auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
94
+ &lt;auro-radio id="radio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
95
+ &lt;auro-radio id="radio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
96
+ &lt;/auro-radio-group&gt;</code></pre>
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </div>
99
+ </auro-accordion>
100
+ <auro-accordion class="section" id="cdnAccordion">
101
+ <span slot="trigger">CDN Installation</span>
102
+ <div class="accordion-content">
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
104
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
105
+ The radio components can be loaded via CDN without a build step:
106
+
107
+ <pre class="language-html"><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm" type="module"&gt;&lt;/script&gt;</code></pre>
108
+
109
+ Then use the elements in your HTML:
110
+
111
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
112
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
113
+ &lt;auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
114
+ &lt;auro-radio id="radio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
115
+ &lt;auro-radio id="radio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
116
+ &lt;/auro-radio-group&gt;</code></pre>
117
+ <!-- AURO-GENERATED-CONTENT:END -->
118
+ </div>
119
+ </auro-accordion>
120
+ </auro-accordion-group>
121
+ <!-- AURO-GENERATED-CONTENT:END -->
122
+ </section>
123
+ <section>
124
+ <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
125
+ <p>Every <code>&lt;auro-radio-group&gt;</code> implementation requires:</p>
126
+ <ol>
127
+ <li><strong>A legend in the <code>legend</code> slot</strong> — Provides an accessible label for the radio group.</li>
128
+ <li><strong>Two or more <code>&lt;auro-radio&gt;</code> elements</strong> — Each with a unique <code>value</code>, <code>name</code>, and <code>label</code> attribute.</li>
129
+ </ol>
130
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
131
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
132
+ &lt;auro-radio value="yes" name="example" id="radio-ex1" label="Yes"&gt;&lt;/auro-radio&gt;
133
+ &lt;auro-radio value="no" name="example" id="radio-ex2" label="No"&gt;&lt;/auro-radio&gt;
134
+ &lt;/auro-radio-group&gt;</code></pre>
135
+ </section>
136
+ <section>
137
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/slots.md) -->
138
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/slots.md -->
139
+ <auro-header level="2" id="slots">Slots</auro-header>
140
+ <auro-header level="3" id="slotsGroup">auro-radio-group Slots</auro-header>
141
+ <auro-header level="4" id="slot-legend">legend</auro-header>
142
+ <p>The <code>legend</code> slot provides an accessible label for the radio group. This is rendered inside a native <code>&lt;legend&gt;</code> element within the component's <code>&lt;fieldset&gt;</code>.</p>
143
+ <auro-header level="4" id="slot-helpText">helpText</auro-header>
144
+ <p>The <code>helpText</code> slot allows custom help text to be displayed below the radio group.</p>
145
+ <auro-header level="4" id="slot-optionalLabel">optionalLabel</auro-header>
146
+ <p>The <code>optionalLabel</code> slot allows overriding the default <em>"(optional)"</em> text that appears next to the legend when the group is not required.</p>
147
+ <div class="exampleWrapper">
148
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
149
+ <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
150
+ <auro-radio-group>
151
+ <span slot="legend">Form label goes here</span>
152
+ <span slot="optionalLabel"> - custom optional flag</span>
153
+ <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
154
+ <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
155
+ <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
156
+ </auro-radio-group>
157
+ <!-- AURO-GENERATED-CONTENT:END -->
158
+ </div>
159
+ <auro-accordion alignRight>
160
+ <span slot="trigger">See code</span>
161
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
162
+ <!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
163
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
164
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
165
+ &lt;span slot="optionalLabel"&gt; - custom optional flag&lt;/span&gt;
166
+ &lt;auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
167
+ &lt;auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
168
+ &lt;auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
169
+ &lt;/auro-radio-group&gt;</code></pre>
170
+ <!-- AURO-GENERATED-CONTENT:END -->
171
+ </auro-accordion>
172
+ <auro-header level="3" id="slotsRadio">auro-radio Slots</auro-header>
173
+ <auro-header level="4" id="slot-default-radio">(default)</auro-header>
174
+ <p>Default slot for the radio button label text. If content is placed inside the <code>&lt;auro-radio&gt;</code> element, it overrides the <code>label</code> attribute. This is useful for rich label content such as multiline text.</p>
175
+ <div class="exampleWrapper">
176
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiline-group.html) -->
177
+ <!-- The below content is automatically added from ./../apiExamples/multiline-group.html -->
178
+ <auro-radio-group>
179
+ <span slot="legend">Form label goes here</span>
180
+ <auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
181
+ <auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"></auro-radio>
182
+ <auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"></auro-radio>
183
+ </auro-radio-group>
184
+ <!-- AURO-GENERATED-CONTENT:END -->
185
+ </div>
186
+ <auro-accordion alignRight>
187
+ <span slot="trigger">See code</span>
188
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiline-group.html) -->
189
+ <!-- The below code snippet is automatically added from ./../apiExamples/multiline-group.html -->
190
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
191
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
192
+ &lt;auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"&gt;&lt;/auro-radio&gt;
193
+ &lt;auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"&gt;&lt;/auro-radio&gt;
194
+ &lt;auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"&gt;&lt;/auro-radio&gt;
195
+ &lt;/auro-radio-group&gt;</code></pre>
196
+ <!-- AURO-GENERATED-CONTENT:END -->
197
+ </auro-accordion>
198
+ <auro-header level="4" id="slot-content">content</auro-header>
199
+ <p>Named slot for additional content rendered below the radio button label. Use this for supplementary information or descriptions associated with a radio option.</p>
200
+ <div class="exampleWrapper">
201
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/content-slot.html) -->
202
+ <!-- The below content is automatically added from ./../apiExamples/content-slot.html -->
203
+ <auro-radio-group>
204
+ <span slot="legend">Choose your seat preference</span>
205
+ <auro-radio id="contentSlotRadio1" label="Window" name="seatPref" value="window">
206
+ Window Seat
207
+ <span slot="content">Best for views and resting against the wall</span>
208
+ </auro-radio>
209
+ <auro-radio id="contentSlotRadio2" label="Middle" name="seatPref" value="middle">
210
+ Middle Seat
211
+ <span slot="content">Sit between two fellow travelers</span>
212
+ </auro-radio>
213
+ <auro-radio id="contentSlotRadio3" label="Aisle" name="seatPref" value="aisle">
214
+ Aisle Seat
215
+ <span slot="content">Easy access to the aisle for stretching</span>
216
+ </auro-radio>
217
+ </auro-radio-group>
218
+ <!-- AURO-GENERATED-CONTENT:END -->
219
+ </div>
220
+ <auro-accordion alignRight>
221
+ <span slot="trigger">See code</span>
222
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/content-slot.html) -->
223
+ <!-- The below code snippet is automatically added from ./../apiExamples/content-slot.html -->
224
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
225
+ &lt;span slot="legend"&gt;Choose your seat preference&lt;/span&gt;
226
+ &lt;auro-radio id="contentSlotRadio1" label="Window" name="seatPref" value="window"&gt;
227
+ Window Seat
228
+ &lt;span slot="content"&gt;Best for views and resting against the wall&lt;/span&gt;
229
+ &lt;/auro-radio&gt;
230
+ &lt;auro-radio id="contentSlotRadio2" label="Middle" name="seatPref" value="middle"&gt;
231
+ Middle Seat
232
+ &lt;span slot="content"&gt;Sit between two fellow travelers&lt;/span&gt;
233
+ &lt;/auro-radio&gt;
234
+ &lt;auro-radio id="contentSlotRadio3" label="Aisle" name="seatPref" value="aisle"&gt;
235
+ Aisle Seat
236
+ &lt;span slot="content"&gt;Easy access to the aisle for stretching&lt;/span&gt;
237
+ &lt;/auro-radio&gt;
238
+ &lt;/auro-radio-group&gt;</code></pre>
239
+ <!-- AURO-GENERATED-CONTENT:END -->
240
+ </auro-accordion>
241
+ <!-- AURO-GENERATED-CONTENT:END -->
242
+ </section>
243
+ <section>
244
+ <auro-header level="2" id="stateManagement">State Management</auro-header>
245
+ <p>The following properties reflect the current state of the component and can be accessed via JavaScript.</p>
246
+ <auro-header level="3" id="validity">validity</auro-header>
247
+ <p>Returns the current <code>validityState</code> of the radio group as a string. Possible values include <code>"valid"</code>, <code>"valueMissing"</code>, and <code>"customError"</code>.</p>
248
+ </section>
249
+ <section>
250
+ <auro-header level="2" id="publicFunctions">Functions</auro-header>
251
+ <p>The following public methods are available on the <code>&lt;auro-radio-group&gt;</code> element.</p>
252
+ <auro-header level="3" id="reset">reset()</auro-header>
253
+ <p>Resets the radio group to its initial state, clearing the selected value and validation state.</p>
254
+ <div class="exampleWrapper">
255
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
256
+ <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
257
+ <auro-button id="resetStateBtn">Reset</auro-button>
258
+ <br/><br/>
259
+ <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
260
+ <span slot="legend">Form label goes here</span>
261
+ <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
262
+ <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
263
+ <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
264
+ </auro-radio-group>
265
+ <!-- AURO-GENERATED-CONTENT:END -->
266
+ </div>
267
+ <auro-accordion alignRight>
268
+ <span slot="trigger">See code</span>
269
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
270
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
271
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
272
+ &lt;br/&gt;&lt;br/&gt;
273
+ &lt;auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option"&gt;
274
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
275
+ &lt;auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
276
+ &lt;auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
277
+ &lt;auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
278
+ &lt;/auro-radio-group&gt;</code></pre>
279
+ <!-- AURO-GENERATED-CONTENT:END -->
280
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
281
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
282
+ <pre class="language-js"><code class="language-js">export function resetStateExample() {
283
+ const elem = document.querySelector('#resetStateExample');
284
+ ​
285
+ document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
286
+ elem.reset();
287
+ });
288
+ }</code></pre>
289
+ <!-- AURO-GENERATED-CONTENT:END -->
290
+ </auro-accordion>
291
+ <auro-header level="3" id="validate">validate()</auro-header>
292
+ <p>Triggers validation on the radio group. Pass <code>true</code> to force validation even when <code>noValidate</code> is set.</p>
293
+ </section>
294
+ </div>
295
+ </div>
296
+ </div>