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

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 (281) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +10 -10
  3. package/components/bibtemplate/dist/registered.js +10 -10
  4. package/components/checkbox/README.md +26 -56
  5. package/components/checkbox/demo/accessibility.html +48 -0
  6. package/components/checkbox/demo/accessibility.md +44 -0
  7. package/components/checkbox/demo/api.html +17 -26
  8. package/components/checkbox/demo/api.md +0 -396
  9. package/components/checkbox/demo/api.min.js +2 -2106
  10. package/components/checkbox/demo/customize.html +51 -0
  11. package/components/checkbox/demo/customize.md +361 -0
  12. package/components/checkbox/demo/demo-support.js +60 -0
  13. package/components/checkbox/demo/demo-support.min.js +55732 -0
  14. package/components/checkbox/demo/design.html +51 -0
  15. package/components/checkbox/demo/design.md +149 -0
  16. package/components/checkbox/demo/getting-started.html +51 -0
  17. package/components/checkbox/demo/getting-started.md +261 -0
  18. package/components/checkbox/demo/index.html +17 -21
  19. package/components/checkbox/demo/index.md +158 -45
  20. package/components/checkbox/demo/index.min.js +2 -3
  21. package/components/checkbox/demo/install.md +82 -0
  22. package/components/checkbox/demo/keyboard-behavior.html +48 -0
  23. package/components/checkbox/demo/readme.html +10 -18
  24. package/components/checkbox/demo/readme.md +26 -56
  25. package/components/checkbox/demo/styles.min.css +1 -0
  26. package/components/checkbox/demo/styles.scss +1 -0
  27. package/components/checkbox/demo/voiceover.html +48 -0
  28. package/components/checkbox/demo/voiceover.md +37 -0
  29. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  30. package/components/checkbox/dist/auro-checkbox.d.ts +8 -9
  31. package/components/checkbox/dist/index.js +2 -3
  32. package/components/checkbox/dist/registered.js +2 -3
  33. package/components/combobox/README.md +41 -66
  34. package/components/combobox/demo/accessibility.html +50 -0
  35. package/components/combobox/demo/accessibility.md +77 -0
  36. package/components/combobox/demo/api.html +8 -20
  37. package/components/combobox/demo/api.md +54 -2334
  38. package/components/combobox/demo/api.min.js +3 -17971
  39. package/components/combobox/demo/customize.html +52 -0
  40. package/components/combobox/demo/customize.js +24 -0
  41. package/components/combobox/demo/customize.md +1249 -0
  42. package/components/combobox/demo/customize.min.js +177 -0
  43. package/components/combobox/demo/demo-support.js +60 -0
  44. package/components/combobox/demo/demo-support.min.js +55732 -0
  45. package/components/combobox/demo/design.html +53 -0
  46. package/components/combobox/demo/design.md +283 -0
  47. package/components/combobox/demo/getting-started.html +52 -0
  48. package/components/combobox/demo/getting-started.js +21 -0
  49. package/components/combobox/demo/getting-started.md +397 -0
  50. package/components/combobox/demo/getting-started.min.js +12 -0
  51. package/components/combobox/demo/index.html +16 -22
  52. package/components/combobox/demo/index.js +3 -2
  53. package/components/combobox/demo/index.md +298 -188
  54. package/components/combobox/demo/index.min.js +13 -17956
  55. package/components/combobox/demo/install.md +77 -0
  56. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +5 -11
  57. package/components/combobox/demo/keyboard-behavior.md +276 -0
  58. package/components/combobox/demo/readme.html +5 -11
  59. package/components/combobox/demo/readme.md +41 -66
  60. package/components/combobox/demo/registered.min.js +18095 -0
  61. package/components/combobox/demo/styles.css +974 -0
  62. package/components/combobox/demo/styles.min.css +1 -0
  63. package/components/combobox/demo/styles.scss +1 -0
  64. package/components/combobox/demo/swap-value.min.js +16 -0
  65. package/components/combobox/demo/voiceover.html +59 -0
  66. package/components/combobox/demo/voiceover.md +118 -0
  67. package/components/combobox/dist/auro-combobox.d.ts +35 -35
  68. package/components/combobox/dist/index.js +183 -46
  69. package/components/combobox/dist/registered.js +183 -46
  70. package/components/counter/README.md +37 -55
  71. package/components/counter/demo/api.md +745 -813
  72. package/components/counter/demo/api.min.js +182 -44
  73. package/components/counter/demo/index.md +28 -32
  74. package/components/counter/demo/index.min.js +182 -44
  75. package/components/counter/demo/keyboard-behavior.md +127 -0
  76. package/components/counter/demo/readme.md +37 -55
  77. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  78. package/components/counter/dist/auro-counter.d.ts +10 -10
  79. package/components/counter/dist/index.js +181 -43
  80. package/components/counter/dist/registered.js +181 -43
  81. package/components/datepicker/README.md +23 -51
  82. package/components/datepicker/demo/accessibility.html +50 -0
  83. package/components/datepicker/demo/accessibility.md +64 -0
  84. package/components/datepicker/demo/api.md +0 -1774
  85. package/components/datepicker/demo/api.min.js +2 -24475
  86. package/components/datepicker/demo/auro-datepicker.min.js +24613 -0
  87. package/components/datepicker/demo/customize.html +52 -0
  88. package/components/datepicker/demo/customize.md +723 -0
  89. package/components/datepicker/demo/demo-support.js +60 -0
  90. package/components/datepicker/demo/demo-support.min.js +55732 -0
  91. package/components/datepicker/demo/design.html +54 -0
  92. package/components/datepicker/demo/design.md +158 -0
  93. package/components/datepicker/demo/getting-started.html +52 -0
  94. package/components/datepicker/demo/getting-started.md +237 -0
  95. package/components/datepicker/demo/index.html +14 -35
  96. package/components/datepicker/demo/index.md +201 -152
  97. package/components/datepicker/demo/index.min.js +1 -24474
  98. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  99. package/components/datepicker/demo/readme.md +23 -51
  100. package/components/datepicker/demo/styles.min.css +1 -0
  101. package/components/datepicker/demo/styles.scss +1 -0
  102. package/components/datepicker/demo/voiceover.html +59 -0
  103. package/components/datepicker/demo/voiceover.md +98 -0
  104. package/components/datepicker/dist/index.js +194 -57
  105. package/components/datepicker/dist/registered.js +194 -57
  106. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  107. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  108. package/components/datepicker/dist/src/iconVersion.d.ts +2 -0
  109. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  110. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  111. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  112. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  113. package/components/dropdown/README.md +35 -53
  114. package/components/dropdown/demo/api.md +717 -773
  115. package/components/dropdown/demo/api.min.js +161 -23
  116. package/components/dropdown/demo/index.md +120 -130
  117. package/components/dropdown/demo/index.min.js +161 -23
  118. package/components/dropdown/demo/{keyboardBehavior.md → keyboard-behavior.md} +52 -57
  119. package/components/dropdown/demo/readme.md +35 -53
  120. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  121. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  122. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  123. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  124. package/components/dropdown/dist/index.js +160 -22
  125. package/components/dropdown/dist/registered.js +160 -22
  126. package/components/form/README.md +14 -34
  127. package/components/form/demo/api.md +156 -162
  128. package/components/form/demo/api.min.js +756 -208
  129. package/components/form/demo/index.md +27 -33
  130. package/components/form/demo/index.min.js +756 -208
  131. package/components/form/demo/keyboard-behavior.md +38 -0
  132. package/components/form/demo/readme.md +14 -34
  133. package/components/input/README.md +28 -53
  134. package/components/input/demo/accessibility.html +37 -0
  135. package/components/input/demo/accessibility.md +69 -0
  136. package/components/input/demo/api.html +17 -23
  137. package/components/input/demo/api.js +4 -23
  138. package/components/input/demo/api.md +67 -1359
  139. package/components/input/demo/api.min.js +1 -7453
  140. package/components/input/demo/auro-input.min.js +7362 -0
  141. package/components/input/demo/customize.html +53 -0
  142. package/components/input/demo/customize.js +25 -0
  143. package/components/input/demo/customize.md +1372 -0
  144. package/components/input/demo/customize.min.js +71 -0
  145. package/components/input/demo/demo-support.js +60 -0
  146. package/components/input/demo/demo-support.min.js +55732 -0
  147. package/components/input/demo/design.html +38 -0
  148. package/components/input/demo/design.md +224 -0
  149. package/components/input/demo/getting-started.html +52 -0
  150. package/components/input/demo/getting-started.js +8 -0
  151. package/components/input/demo/getting-started.md +312 -0
  152. package/components/input/demo/getting-started.min.js +9 -0
  153. package/components/input/demo/index.html +16 -23
  154. package/components/input/demo/index.js +0 -11
  155. package/components/input/demo/index.md +180 -154
  156. package/components/input/demo/index.min.js +1 -7373
  157. package/components/input/demo/keyboard-behavior.html +37 -0
  158. package/components/input/demo/readme.md +28 -53
  159. package/components/input/demo/styles.css +974 -0
  160. package/components/input/demo/styles.min.css +1 -0
  161. package/components/input/demo/styles.scss +1 -0
  162. package/components/input/demo/voiceover.html +37 -0
  163. package/components/input/demo/voiceover.md +70 -0
  164. package/components/input/dist/auro-input.d.ts +1 -1
  165. package/components/input/dist/base-input.d.ts +29 -30
  166. package/components/input/dist/iconVersion.d.ts +1 -1
  167. package/components/input/dist/index.js +10 -11
  168. package/components/input/dist/registered.js +10 -11
  169. package/components/menu/README.md +24 -42
  170. package/components/menu/demo/api.md +785 -829
  171. package/components/menu/demo/api.min.js +7 -7
  172. package/components/menu/demo/index.md +33 -35
  173. package/components/menu/demo/index.min.js +7 -7
  174. package/components/menu/demo/keyboard-behavior.md +18 -0
  175. package/components/menu/demo/readme.md +24 -42
  176. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  177. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  178. package/components/menu/dist/auro-menu.d.ts +4 -4
  179. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  180. package/components/menu/dist/index.js +6 -6
  181. package/components/menu/dist/registered.js +6 -6
  182. package/components/radio/README.md +22 -49
  183. package/components/radio/demo/accessibility.html +51 -0
  184. package/components/radio/demo/accessibility.md +44 -0
  185. package/components/radio/demo/api.html +13 -20
  186. package/components/radio/demo/api.md +44 -621
  187. package/components/radio/demo/api.min.js +1 -1
  188. package/components/radio/demo/customize.html +53 -0
  189. package/components/radio/demo/customize.md +368 -0
  190. package/components/radio/demo/demo-support.js +60 -0
  191. package/components/radio/demo/design.html +52 -0
  192. package/components/radio/demo/design.md +143 -0
  193. package/components/radio/demo/getting-started.html +54 -0
  194. package/components/radio/demo/getting-started.md +296 -0
  195. package/components/radio/demo/index.html +16 -19
  196. package/components/radio/demo/index.md +124 -63
  197. package/components/radio/demo/index.min.js +1 -1
  198. package/components/radio/demo/keyboard-behavior.html +51 -0
  199. package/components/radio/demo/keyboard-behavior.md +72 -0
  200. package/components/radio/demo/layout.md +30 -0
  201. package/components/radio/demo/readme.html +11 -17
  202. package/components/radio/demo/readme.md +22 -49
  203. package/components/radio/demo/styles.css +974 -0
  204. package/components/radio/demo/voiceover.html +51 -0
  205. package/components/radio/demo/voiceover.md +43 -0
  206. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  207. package/components/radio/dist/auro-radio.d.ts +8 -8
  208. package/components/radio/dist/index.js +1 -1
  209. package/components/radio/dist/registered.js +1 -1
  210. package/components/select/README.md +50 -68
  211. package/components/select/demo/accessibility.html +50 -0
  212. package/components/select/demo/accessibility.md +76 -0
  213. package/components/select/demo/api.html +5 -17
  214. package/components/select/demo/api.md +52 -2422
  215. package/components/select/demo/customize.html +52 -0
  216. package/components/select/demo/customize.js +11 -0
  217. package/components/select/demo/customize.md +1049 -0
  218. package/components/select/demo/customize.min.js +12 -0
  219. package/components/select/demo/demo-support.js +60 -0
  220. package/components/select/demo/demo-support.min.js +55732 -0
  221. package/components/select/demo/design.html +51 -0
  222. package/components/select/demo/design.md +391 -0
  223. package/components/select/demo/getting-started.html +52 -0
  224. package/components/select/demo/getting-started.js +26 -0
  225. package/components/select/demo/getting-started.md +412 -0
  226. package/components/select/demo/getting-started.min.js +56 -0
  227. package/components/select/demo/index.html +18 -35
  228. package/components/select/demo/index.js +5 -3
  229. package/components/select/demo/index.md +165 -345
  230. package/components/select/demo/index.min.js +6 -10484
  231. package/components/select/demo/install.md +95 -0
  232. package/components/select/demo/keyboard-behavior.html +8 -39
  233. package/components/select/demo/keyboard-behavior.md +249 -0
  234. package/components/select/demo/keyboardBehavior.html +5 -38
  235. package/components/select/demo/layout.html +51 -0
  236. package/components/select/demo/readme.html +5 -13
  237. package/components/select/demo/readme.md +50 -68
  238. package/components/select/demo/{api.min.js → registered.min.js} +179 -151
  239. package/components/select/demo/styles.min.css +1 -0
  240. package/components/select/demo/styles.scss +1 -0
  241. package/components/select/demo/voiceover.html +48 -0
  242. package/components/select/demo/voiceover.md +183 -0
  243. package/components/select/dist/auro-select.d.ts +11 -11
  244. package/components/select/dist/index.js +171 -33
  245. package/components/select/dist/registered.js +171 -33
  246. package/custom-elements.json +1491 -1494
  247. package/package.json +37 -30
  248. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  249. package/components/combobox/demo/keyboardBehavior.md +0 -281
  250. package/components/counter/demo/keyboardBehavior.md +0 -127
  251. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  252. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  253. package/components/form/demo/keyboardBehavior.md +0 -0
  254. package/components/input/demo/keyboardBehavior.md +0 -0
  255. package/components/menu/demo/keyboardBehavior.md +0 -0
  256. package/components/radio/demo/keyboardBehavior.md +0 -0
  257. package/components/select/demo/api.js +0 -39
  258. package/components/select/demo/keyboardBehavior.md +0 -245
  259. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  260. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  261. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  262. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  263. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  264. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  265. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  266. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  267. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  268. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  269. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  270. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  271. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  272. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  273. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  274. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  275. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  276. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  277. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  278. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  279. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  280. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  281. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
package/components/radio/demo/voiceover.html ADDED
@@ -0,0 +1,51 @@
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/voiceover.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 | VoiceOver</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('./voiceover.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-header@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
48
+
49
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
50
+ </body>
51
+ </html>
package/components/radio/demo/voiceover.md ADDED
@@ -0,0 +1,43 @@
1
+ <auro-header level="1" id="overview">Radio - VoiceOver Behavior</auro-header>
2
+ <p>This page documents the VoiceOver experience when using the <code>&lt;auro-radio&gt;</code> component. It covers announcements and gestures for interacting with radio groups.</p>
3
+ <auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive Announcements</auro-header>
4
+ <auro-header level="3" id="voiceOverFocusAnnouncement">Focus</auro-header>
5
+ <p>When focus moves to a radio button the following is announced:</p>
6
+ <ol>
7
+ <li><strong>Label:</strong> The radio button label text</li>
8
+ <li><strong>State:</strong> <em>"selected"</em> or <em>"unselected"</em></li>
9
+ <li><strong>Role:</strong> <em>"radio button"</em></li>
10
+ <li><strong>Position:</strong> e.g. <em>"1 of 3"</em></li>
11
+ <li>
12
+ <strong>State hints:</strong>
13
+ <table class="compressed body-xs">
14
+ <thead>
15
+ <tr>
16
+ <th>State</th>
17
+ <th>What gets announced</th>
18
+ </tr>
19
+ </thead>
20
+ <tbody>
21
+ <tr>
22
+ <td>Disabled</td>
23
+ <td><em>"dimmed"</em></td>
24
+ </tr>
25
+ <tr>
26
+ <td>Invalid</td>
27
+ <td><em>"invalid data"</em></td>
28
+ </tr>
29
+ </tbody>
30
+ </table>
31
+ </li>
32
+ </ol>
33
+ <auro-header level="3" id="voiceOverGroupContext">Group Context</auro-header>
34
+ <p>When navigating into a radio group, VoiceOver announces the legend text, providing group context. The group is identified as a <em>"group"</em> via the native <code>&lt;fieldset&gt;</code> element.</p>
35
+ <auro-header level="3" id="voiceOverSelection">Selection</auro-header>
36
+ <p>When a radio button is selected (via Space or arrow keys), VoiceOver announces:</p>
37
+ <ol>
38
+ <li><strong>Label</strong> of the newly selected radio</li>
39
+ <li><em>"selected, radio button"</em></li>
40
+ <li><strong>Position:</strong> e.g. <em>"2 of 3"</em></li>
41
+ </ol>
42
+ <auro-header level="3" id="voiceOverNavigation">Navigation</auro-header>
43
+ <p>Within a radio group, arrow keys move focus and selection simultaneously. VoiceOver announces each radio button as it becomes focused and selected.</p>
package/components/radio/dist/auro-radio-group.d.ts CHANGED
@@ -125,16 +125,16 @@ export class AuroRadioGroup extends LitElement {
125
125
  */
126
126
  static register(name?: string): void;
127
127
  _initializeDefaults(): void;
128
- appearance: string;
129
- disabled: boolean;
130
- horizontal: boolean;
131
- required: boolean;
128
+ appearance: string | undefined;
129
+ disabled: boolean | undefined;
130
+ horizontal: boolean | undefined;
131
+ required: boolean | undefined;
132
132
  validity: any;
133
133
  value: any;
134
- optionSelected: EventTarget;
135
- onDark: boolean;
136
- touched: boolean;
137
- hasLegend: boolean;
134
+ optionSelected: EventTarget | null | undefined;
135
+ onDark: boolean | undefined;
136
+ touched: boolean | undefined;
137
+ hasLegend: boolean | undefined;
138
138
  /**
139
139
  * @private
140
140
  */
@@ -197,7 +197,7 @@ export class AuroRadioGroup extends LitElement {
197
197
  * @returns {void}
198
198
  */
199
199
  private handleItems;
200
- items: Element[];
200
+ items: Element[] | undefined;
201
201
  /**
202
202
  * Method for handling slot content changes.
203
203
  * @private
package/components/radio/dist/auro-radio.d.ts CHANGED
@@ -120,13 +120,13 @@ export class AuroRadio extends LitElement {
120
120
  */
121
121
  static register(name?: string): void;
122
122
  _initializeDefaults(): void;
123
- appearance: string;
123
+ appearance: string | undefined;
124
124
  checked: any;
125
- disabled: boolean;
126
- required: boolean;
127
- error: boolean;
128
- onDark: boolean;
129
- touched: boolean;
125
+ disabled: boolean | undefined;
126
+ required: boolean | undefined;
127
+ error: boolean | undefined;
128
+ onDark: boolean | undefined;
129
+ touched: boolean | undefined;
130
130
  /**
131
131
  * @private
132
132
  */
@@ -173,8 +173,8 @@ export class AuroRadio extends LitElement {
173
173
  */
174
174
  private isRequired;
175
175
  firstUpdated(): void;
176
- input: HTMLInputElement;
177
- inputId: string;
176
+ input: HTMLInputElement | null | undefined;
177
+ inputId: string | undefined;
178
178
  render(): import("lit-html").TemplateResult<1>;
179
179
  }
180
180
  import { LitElement } from "lit";
package/components/radio/dist/index.js CHANGED
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202605011845';
1576
+ var formkitVersion = '202605041857';
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 = '202605011845';
1576
+ var formkitVersion = '202605041857';
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
@@ -21,7 +21,18 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
24
+ <p>The component is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom elements</auro-hyperlink> that consists of a pre-defined trigger element, <code>&lt;auro-menu&gt;</code> for the panel content. The <code>&lt;auro-select&gt;</code> element presents a menu of options. The options within the menu are represented by <code>&lt;auro-menu&gt;</code> and <code>&lt;auro-menuoption&gt;</code> elements. You can pre-select options for the user with the `selected` attribute as part of the <code>&lt;auro-menuoption&gt;</code> API.</p>
25
+ <p>The component is used to create a drop-down list for user input within a form. It acts as a container for options.</p>
26
+ <p>Key features:</p>
27
+ <ul>
28
+ <li>Preset values</li>
29
+ <li>Mark as required when in a form</li>
30
+ <li>Disable individual options or the entire component</li>
31
+ <li>Enable multi-select</li>
32
+ <li>Separate options into groups with dividers</li>
33
+ <li>Group options into nested levels</li>
34
+ <li>Autocomplete</li>
35
+ </ul>
25
36
  <!-- AURO-GENERATED-CONTENT:END -->
26
37
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
38
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -40,11 +51,7 @@ See description.
40
51
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
41
52
  <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
42
53
 
43
- #### NPM Installation
44
-
45
- ```shell
46
- $ npm i @aurodesignsystem/auro-formkit
47
- ```
54
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
48
55
  <!-- AURO-GENERATED-CONTENT:END -->
49
56
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
50
57
  <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -53,13 +60,11 @@ $ npm i @aurodesignsystem/auro-formkit
53
60
 
54
61
  When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
55
62
 
56
- ```json
57
- {
63
+ <pre class="language-json"><code class="language-json">{
58
64
  "compilerOptions": {
59
65
  "moduleResolution": "bundler"
60
66
  }
61
- }
62
- ```
67
+ }</code></pre>
63
68
 
64
69
  This configuration enables proper module resolution for the component's TypeScript files.
65
70
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -70,9 +75,7 @@ This configuration enables proper module resolution for the component's TypeScri
70
75
  <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
71
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.
72
77
 
73
- ```html
74
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
75
- ```
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>
76
79
  <!-- AURO-GENERATED-CONTENT:END -->
77
80
 
78
81
  ## Formkit Development
@@ -86,63 +89,42 @@ Running the `dev` command will open a `localhost` development server for all com
86
89
 
87
90
  To only develop a single component, use the `--filter` flag:
88
91
 
89
- ```shell
90
- npx turbo dev --filter=@aurodesignsystem/auro-input
91
- ```
92
+ <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
92
93
  <!-- AURO-GENERATED-CONTENT:END -->
93
94
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
94
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
95
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
96
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
97
+ <!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
98
+ <p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
99
+ <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
100
+ <p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
101
+ <p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
102
+ <!-- AURO-GENERATED-CONTENT:END -->
95
103
 
96
- ## Custom Component Registration for Version Management
97
-
98
- 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.
99
-
100
- When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
101
-
102
- However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
103
-
104
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
105
-
106
- ```js
107
- // Import the class only
104
+ <pre class="language-js"><code class="language-js">// Import the classes
108
105
  import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
109
-
110
- // Register with a custom name if desired
111
- AuroSelect.register('custom-select');
112
- ```
113
-
114
- This will create a new custom element `<custom-select>` that behaves exactly like `<auro-select>`, allowing both to coexist on the same page without interfering with each other.
115
-
116
- <div class="exampleWrapper exampleWrapper--flex">
117
- <custom-select placeholder="Placeholder Text">
118
- <span slot="bib.fullscreen.headline">Bib Headline</span>
119
- <span slot="label">Label</span>
120
- <auro-menu>
121
- <auro-menuoption value="stops">Stops</auro-menuoption>
122
- <auro-menuoption value="price">Price</auro-menuoption>
123
- <auro-menuoption value="duration">Duration</auro-menuoption>
124
- <auro-menuoption value="departure">Departure</auro-menuoption>
125
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
126
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
127
- </auro-menu>
128
- </custom-select>
129
- </div>
130
- <auro-accordion alignRight>
131
- <span slot="trigger">See code</span>
132
-
133
- ```html
134
- <custom-select placeholder="Placeholder Text">
135
- <span slot="bib.fullscreen.headline">Bib Headline</span>
136
- <span slot="label">Label</span>
137
- <auro-menu>
138
- <auro-menuoption value="stops">Stops</auro-menuoption>
139
- <auro-menuoption value="price">Price</auro-menuoption>
140
- <auro-menuoption value="duration">Duration</auro-menuoption>
141
- <auro-menuoption value="departure">Departure</auro-menuoption>
142
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
143
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
144
- </auro-menu>
145
- </custom-select>
146
- ```
147
- </auro-accordion>
106
+ import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
107
+ import { AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menuoption/class';
108
+ ​
109
+ // Register each component with a custom name
110
+ AuroSelect.register('[custom]-select');
111
+ AuroMenu.register('[custom]-menu');
112
+ AuroMenuOption.register('[custom]-menuoption');</code></pre>
113
+
114
+ The `<auro-menu>` and `<auro-menuoption>` components must also be custom registered when using a custom `<auro-select>` registration. All three components work together and need to be registered under the same custom naming convention.
115
+
116
+ This will create new custom elements that behave exactly like their standard counterparts, allowing both to coexist on the same page without interfering with each other.
117
+
118
+ <pre class="language-html"><code class="language-html">&lt;custom-select placeholder="Placeholder Text" id="custom-select"&gt;
119
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
120
+ &lt;span slot="label"&gt;Label&lt;/span&gt;
121
+ &lt;custom-menu&gt;
122
+ &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
123
+ &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
124
+ &lt;custom-menuoption value="duration"&gt;Duration&lt;/custom-menuoption&gt;
125
+ &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
126
+ &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
127
+ &lt;custom-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/custom-menuoption&gt;
128
+ &lt;/custom-menu&gt;
129
+ &lt;/custom-select&gt;</code></pre>
148
130
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/select/demo/accessibility.html ADDED
@@ -0,0 +1,50 @@
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/accessibility.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-select | Accessibility</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-select's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ </head>
36
+ <body class="auro-markdown">
37
+ <main></main>
38
+
39
+ <script type="module">
40
+ import { renderPage } from './demo-support.js';
41
+ await renderPage('./accessibility.md');
42
+ </script>
43
+
44
+ <!-- If additional elements are needed for the demo, add them here. -->
45
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@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-hyperlink@latest/+esm" type="module"></script>
49
+ </body>
50
+ </html>
package/components/select/demo/accessibility.md ADDED
@@ -0,0 +1,76 @@
1
+ <auro-header level="1" id="overview">Select - Accessibility</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ The `auro-select` component follows the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/" target="_blank">W3C APG Select-Only Combobox</a> pattern. This page documents the ARIA semantics, screen reader announcements, and other accessibility behaviors built into the component.
6
+
7
+ For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
8
+
9
+ <auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
10
+ <auro-header level="3" id="trigger">Trigger</auro-header>
11
+ The trigger element exposes the following ARIA attributes:
12
+
13
+ | Attribute | Value | Description |
14
+ |---|---|---|
15
+ | `role` | `combobox` | Identifies the trigger as a combobox control. |
16
+ | `aria-expanded` | `true` / `false` | Reflects whether the bib (listbox) is currently open. |
17
+ | `aria-controls` | `{bib-id}` | References the bib element that the trigger controls. |
18
+ | `aria-labelledby` | `{label-id}` | Associates the trigger with its visible label text. |
19
+ | `aria-activedescendant` | `{option-id}` | Points to the currently highlighted option when the bib is open. Cleared when the bib closes. |
20
+
21
+ <auro-header level="3" id="menuOptions">Menu Options</auro-header>
22
+ Each menu option exposes the following ARIA attributes:
23
+
24
+ | Attribute | Value | Description |
25
+ |---|---|---|
26
+ | `role` | `option` | Identifies each item as a selectable option. |
27
+ | `aria-selected` | `true` / `false` | Indicates whether the option is currently selected. |
28
+ | `aria-setsize` | `{count}` | Total number of options available, so screen readers can announce "option X of Y." |
29
+ | `aria-posinset` | `{index}` | The 1-based position of the option within the set. |
30
+
31
+ <auro-header level="3" id="helpTextAndErrors">Help Text and Errors</auro-header>
32
+ - Help text is associated with the component so screen readers can announce contextual guidance.
33
+ - When validation fails, the error message is rendered with `role="alert"` and `aria-live="assertive"` to ensure it is announced immediately.
34
+
35
+ <auro-header level="2" id="activeDescendant">Active Descendant</auro-header>
36
+ Focus management in `auro-select` follows the **active descendant** pattern rather than moving DOM focus between options:
37
+
38
+ 1. When the bib opens, focus remains on the **trigger** element.
39
+ 2. Arrow keys update `aria-activedescendant` on the trigger to reference the currently highlighted option.
40
+ 3. This allows screen readers to announce each option as the user navigates without moving focus away from the trigger.
41
+
42
+ When the bib closes, `aria-activedescendant` is cleared so stale references are not announced.
43
+
44
+ <auro-header level="2" id="screenReaderAnnouncements">Screen Reader Announcements</auro-header>
45
+ The component uses a visually hidden live region (`aria-live="polite"`) to announce state changes:
46
+
47
+ - **Option highlighted** — When an option becomes active (via arrow keys or type-ahead), the live region announces the option text along with its selected state (e.g. "Apples, not selected").
48
+ - **Option selected** — After an option is selected, the live region announces the selected value (e.g. "Apples, selected"). This announcement is slightly delayed to avoid being overridden by the bib's collapse announcement.
49
+
50
+ <auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
51
+ - The `label` slot content is used as the accessible name for both the trigger (via `aria-labelledby`) and the menu (via `aria-label`).
52
+ - A label is required. Without it, assistive technology users will not have context for what the select controls.
53
+ - The `(optional)` label is automatically appended when the `required` attribute is not set.
54
+
55
+ <auro-header level="2" id="fullscreenBehavior">Fullscreen (Modal) Behavior</auro-header>
56
+ On smaller viewports, the bib opens as a fullscreen modal dialog:
57
+
58
+ - The dialog is opened with `showModal()`, which provides **native focus trapping** — only elements inside the dialog are reachable via Tab.
59
+ - Content outside the dialog is automatically made **inert** by the browser, preventing interaction with the page behind it.
60
+ - The dialog receives an accessible label derived from the component's `label` slot text via `aria-labelledby`.
61
+ - A close button inside the dialog is focused when the modal opens, giving screen reader users an immediate action to dismiss it.
62
+ - Touch scrolling on the page behind the dialog is blocked to prevent the background from scrolling into view.
63
+
64
+ <auro-header level="2" id="reducedMotion">Reduced Motion</auro-header>
65
+ The component respects the `prefers-reduced-motion` media query. When the user has requested reduced motion, scroll animations (e.g. scrolling the selected or active option into view) use instant scrolling instead of smooth scrolling.
66
+
67
+ <auro-header level="2" id="formParticipation">Form Participation</auro-header>
68
+ A hidden native `<select>` element is rendered alongside the custom component with `aria-hidden="true"`. This element:
69
+
70
+ - Participates in HTML form submissions, ensuring the selected value is included in form data.
71
+ - Supports the `required` and `disabled` attributes.
72
+ - Is invisible and unreachable by assistive technology — all user interaction goes through the custom component.
73
+
74
+ </div>
75
+ </div>
76
+ </div>
package/components/select/demo/api.html CHANGED
@@ -18,8 +18,8 @@
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
19
  <title>Auro Web Component Demo | auro-select</title>
20
20
 
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
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
23
 
24
24
  <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
25
25
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
@@ -31,26 +31,14 @@
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
32
 
33
33
  <!-- Demo Specific Styles -->
34
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
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 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
- import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
- fetch('./api.md')
44
- .then((response) => response.text())
45
- .then((text) => {
46
- const rawHtml = marked.parse(text);
47
- document.querySelector('main').innerHTML = rawHtml;
48
- Prism.highlightAll();
49
- });
50
- </script>
51
- <script type="module">
52
- import { initExamples } from "./api.min.js"
53
- initExamples();
40
+ import { renderPage } from './demo-support.js';
41
+ await renderPage('./api.md');
54
42
  </script>
55
43
 
56
44
  <!-- If additional elements are needed for the demo, add them here. -->