@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/datepicker/demo/keyboard-behavior.html CHANGED
@@ -3,7 +3,7 @@
3
3
  See LICENSE in the project root for license information.
4
4
 
5
5
  HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/index.md
6
+ All demo code should be added/edited in ./demo/keyboard-behavior.md
7
7
 
8
8
  With the exception of adding custom elements if needed for the demo.
9
9
 
@@ -16,39 +16,25 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-datepicker</title>
19
+ <title>Auro Web Component Demo | auro-datepicker | Keyboard Behavior</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-datepicker'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"/>
26
26
 
27
27
  <!-- Design Token Alaska Theme -->
28
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
-
29
+
30
30
  <!-- Webcore Stylesheet Alaska Theme -->
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
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
37
  <style>
37
- table {
38
- --ds-color-container-secondary-default: transparent;
39
- }
40
-
41
- tr:not(:last-of-type) {
42
- border-bottom: 1px solid var(--ds-color-border-tertiary-default);
43
- }
44
-
45
- sup {
46
- font-size: 60%;
47
- font-style: italic;
48
- opacity: 0.6;
49
- top: -.5rem;
50
- }
51
-
52
38
  .note {
53
39
  margin: 10px 0;
54
40
  padding: 10px;
@@ -58,24 +44,17 @@
58
44
  background-color: var(--ds-basic-color-surface-neutral-subtle);
59
45
  }
60
46
  </style>
61
- </head>
47
+ </head>
62
48
  <body class="auro-markdown">
63
49
  <main></main>
64
50
 
65
51
  <script type="module">
66
- import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
67
- import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
68
- fetch('./keyboardBehavior.md')
69
- .then((response) => response.text())
70
- .then((text) => {
71
- const rawHtml = marked.parse(text);
72
- document.querySelector('main').innerHTML = rawHtml;
73
- Prism.highlightAll();
74
- })
52
+ import { renderPage } from './demo-support.js';
53
+ await renderPage('./keyboard-behavior.md');
75
54
  </script>
76
55
 
77
56
  <!-- If additional elements are needed for the demo, add them here. -->
78
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
80
59
  </body>
81
60
  </html>
package/components/datepicker/demo/readme.md CHANGED
@@ -21,7 +21,7 @@ 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
- The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
24
+ The <code>&lt;auro-datepicker&gt;</code> element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The <code>&lt;auro-datepicker&gt;</code> element is the combination of <auro-hyperlink href="http://auro.alaskaair.com/components/auro/dropdown">auro-dropdown</auro-hyperlink>, <auro-hyperlink href="http://auro.alaskaair.com/components/auro/input">auro-input</auro-hyperlink>, and Auro's extension of <auro-hyperlink href="https://www.npmjs.com/package/wc-range-datepicker" target="_blank">wc-range-datepicker</auro-hyperlink>.
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -32,7 +32,7 @@ The `<auro-datepicker>` element allows users to select a date, or a pair of date
32
32
 
33
33
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
34
  <!-- The below content is automatically added from ./docs/partials/useCases.md -->
35
- The `<auro-datepicker>` element should be used in situations where users may:
35
+ The <code>&lt;auro-datepicker&gt;</code> element should be used in situations where users may:
36
36
 
37
37
  * select a single date
38
38
  * select a pair of dates which identify a calendar range
@@ -43,11 +43,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
43
43
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
44
44
  <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
45
45
 
46
- #### NPM Installation
47
-
48
- ```shell
49
- $ npm i @aurodesignsystem/auro-formkit
50
- ```
46
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
51
47
  <!-- AURO-GENERATED-CONTENT:END -->
52
48
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
53
49
  <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -56,13 +52,11 @@ $ npm i @aurodesignsystem/auro-formkit
56
52
 
57
53
  When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
58
54
 
59
- ```json
60
- {
55
+ <pre class="language-json"><code class="language-json">{
61
56
  "compilerOptions": {
62
57
  "moduleResolution": "bundler"
63
58
  }
64
- }
65
- ```
59
+ }</code></pre>
66
60
 
67
61
  This configuration enables proper module resolution for the component's TypeScript files.
68
62
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -73,9 +67,7 @@ This configuration enables proper module resolution for the component's TypeScri
73
67
  <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
74
68
  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.
75
69
 
76
- ```html
77
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"></script>
78
- ```
70
+ <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/@latest/auro-datepicker/+esm"&gt;&lt;/script&gt;</code></pre>
79
71
  <!-- AURO-GENERATED-CONTENT:END -->
80
72
 
81
73
  ## Formkit Development
@@ -89,49 +81,29 @@ Running the `dev` command will open a `localhost` development server for all com
89
81
 
90
82
  To only develop a single component, use the `--filter` flag:
91
83
 
92
- ```shell
93
- npx turbo dev --filter=@aurodesignsystem/auro-input
94
- ```
84
+ <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
95
85
  <!-- AURO-GENERATED-CONTENT:END -->
96
86
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
97
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
87
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
88
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
89
+ <!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
90
+ <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>
91
+ <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
92
+ <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>
93
+ <p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
94
+ <!-- AURO-GENERATED-CONTENT:END -->
98
95
 
99
- ## Custom Component Registration for Version Management
100
-
101
- 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.
102
-
103
- When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
104
-
105
- 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.
106
-
107
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
108
-
109
- ```js
110
- // Import the class only
96
+ <pre class="language-js"><code class="language-js">// Import the class only
111
97
  import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
112
-
98
+ ​
113
99
  // Register with a custom name if desired
114
- AuroDatepicker.register('custom-datepicker');
115
- ```
100
+ AuroDatepicker.register('custom-datepicker');</code></pre>
116
101
 
117
102
  This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
118
103
 
119
- <div class="exampleWrapper exampleWrapper--flex">
120
- <custom-datepicker>
121
- <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
122
- <span slot="fromLabel">Choose a date</span>
123
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
124
- </custom-datepicker>
125
- </div>
126
- <auro-accordion alignRight>
127
- <span slot="trigger">See code</span>
128
-
129
- ```html
130
- <custom-datepicker>
131
- <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
132
- <span slot="fromLabel">Choose a date</span>
133
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
134
- </custom-datepicker>
135
- ```
136
- </auro-accordion>
104
+ <pre class="language-html"><code class="language-html">&lt;custom-datepicker&gt;
105
+ &lt;span slot="bib.fullscreen.headline"&gt;custom-datepicker Example&lt;/span&gt;
106
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
107
+ &lt;span slot="bib.fullscreen.dateLabel"&gt;Choose a date&lt;/span&gt;
108
+ &lt;/custom-datepicker&gt;</code></pre>
137
109
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/datepicker/demo/styles.min.css ADDED
@@ -0,0 +1 @@
1
+ @import'@aurodesignsystem/webcorestylesheets/dist/elementDemoStyles.css';@import'@aurodesignsystem/webcorestylesheets/dist/demoWrapper.css'
package/components/datepicker/demo/styles.scss ADDED
@@ -0,0 +1 @@
1
+ @import '@aurodesignsystem/config/demo-styles';
package/components/datepicker/demo/voiceover.html ADDED
@@ -0,0 +1,59 @@
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-datepicker | 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-datepicker'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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
37
+ <style>
38
+ table {
39
+ --ds-color-container-secondary-default: transparent;
40
+ }
41
+
42
+ tr:not(:last-of-type) {
43
+ border-bottom: 1px solid var(--ds-color-border-tertiary-default);
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="auro-markdown">
48
+ <main></main>
49
+
50
+ <script type="module">
51
+ import { renderPage } from './demo-support.js';
52
+ await renderPage('./voiceover.md');
53
+ </script>
54
+
55
+ <!-- If additional elements are needed for the demo, add them here. -->
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
58
+ </body>
59
+ </html>
package/components/datepicker/demo/voiceover.md ADDED
@@ -0,0 +1,98 @@
1
+ <auro-header level="1" id="overview">Datepicker - VoiceOver Behavior</auro-header>
2
+ <p>This page documents the VoiceOver experience when using the <code>&lt;auro-datepicker&gt;</code> component. It covers announcements, gestures, and workflows for both large and small viewports.</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 is given to the datepicker trigger input the following is announced:</p>
6
+ <ol>
7
+ <li><strong>Label:</strong> <code>fromLabel</code> slot content (e.g. <em>"Choose a date"</em>)</li>
8
+ <li><strong>Current value:</strong> [current date value or empty]</li>
9
+ <li><strong>Role:</strong> <em>"text field"</em></li>
10
+ <li>
11
+ <strong>State hints:</strong>
12
+ <table class="compressed body-xs">
13
+ <thead>
14
+ <tr>
15
+ <th>State</th>
16
+ <th>What gets announced</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ <tr>
21
+ <td>Required</td>
22
+ <td><em>"required"</em></td>
23
+ </tr>
24
+ <tr>
25
+ <td>Invalid</td>
26
+ <td><em>"invalid data"</em></td>
27
+ </tr>
28
+ <tr>
29
+ <td>Disabled</td>
30
+ <td><em>"dimmed"</em></td>
31
+ </tr>
32
+ </tbody>
33
+ </table>
34
+ </li>
35
+ <li><strong>Additional description:</strong> <code>helptext</code> slot content if present (after a brief pause)</li>
36
+ </ol>
37
+ <auro-header level="3" id="voiceOverClearButton">Clear Button</auro-header>
38
+ <p>When the clear button is focused, VoiceOver announces the <code>aria-label</code> from the <code>ariaLabel.input.clear</code> slot (or the default i18n text), followed by <em>"button"</em>.</p>
39
+ <auro-header level="3" id="voiceOverCalendarNavigation">Calendar Navigation</auro-header>
40
+ <p>When the calendar bib is open, users can navigate calendar cells using VoiceOver gestures (swipe left/right). Each cell announces:</p>
41
+ <ul>
42
+ <li>The date (e.g. <em>"January 15, 2026"</em>)</li>
43
+ <li>Whether the date is selected or within the selected range</li>
44
+ <li>Whether the date is disabled (outside min/max bounds)</li>
45
+ </ul>
46
+ <auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
47
+ <p>The calendar bib may be <strong>closed</strong> using a gesture.</p>
48
+ <ul>
49
+ <li><strong>iOS VoiceOver:</strong> The two-finger <em>"scrub"</em> (zigzag / a <em>"Z"</em> shape) gesture acts as the <em>'Escape'</em> key, commonly used to dismiss modal views.</li>
50
+ <li>
51
+ <strong>Android TalkBack:</strong> users typically swipe down then left (an <em>"L"</em> gesture) or use the back gesture to go back/close.<br />
52
+ <div class="note">
53
+ <strong>How to Perform Android back/close gesture:</strong> Swipe inwards from either the left or right edge of the screen, typically from the middle-edge, to go to the previous screen.
54
+ </div>
55
+ </li>
56
+ </ul>
57
+ <auro-header level="3" id="voiceOverValidationAnnouncement">Validation Error</auro-header>
58
+ <p>When the component is invalid, the error message is rendered with <code>role="alert"</code> and <code>aria-live="assertive"</code>. VoiceOver will immediately announce the error message when it appears.</p>
59
+ <auro-header level="2" id="voiceOverLargeVPAnnouncements">Large Viewport Workflow</auro-header>
60
+ <p>Examples: large tablet, typical size or larger desktop browser window</p>
61
+ <ol>
62
+ <li><strong>Focus</strong> — Tab to the datepicker input.</li>
63
+ <li><strong>Type a date</strong> — Enter a date value directly or click/tap to open the calendar.</li>
64
+ <li><strong>Calendar opens</strong> — The dropdown bib opens with the calendar. Navigate dates with VoiceOver gestures.</li>
65
+ <li><strong>Select a date</strong> — Activate a calendar cell to select the date. The calendar closes and the selected date populates the input.</li>
66
+ </ol>
67
+ <auro-header level="2" id="voiceOverSmallVPAnnouncements">Small Viewport Workflow</auro-header>
68
+ <p>Examples: mobile phone, very small desktop browser window</p>
69
+ <ol>
70
+ <li><strong>Focus</strong> — Tab or swipe to the datepicker input.</li>
71
+ <li>
72
+ <strong>Open:</strong> Focus is moved to the fullscreen modal dialog <strong>Close</strong> button.
73
+ </li>
74
+ <li><strong>Navigate dates</strong> — Swipe through calendar cells.</li>
75
+ <li>
76
+ <strong>Select a date:</strong> Closes the fullscreen modal dialog, the selected date populates the input.
77
+ <p>~OR~</p>
78
+ <strong>Close without selecting:</strong> Closes the fullscreen modal dialog.
79
+ </li>
80
+ </ol>
81
+ <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
82
+ <auro-header level="3" id="voiceOverStateDisabled">Disabled</auro-header>
83
+ <p>What VoiceOver does:</p>
84
+ <ul>
85
+ <li>Focuses the element and announces it (e.g., <em>"[label], dimmed, text field"</em> on macOS / <em>"[label], dimmed"</em> on iOS).</li>
86
+ <li>The word <strong>"dimmed"</strong> is VoiceOver's way of indicating disabled.</li>
87
+ <li>The element remains in the focus order (Tab still reaches it).</li>
88
+ <li>The user cannot interact with it — the calendar can not be opened, and no date can be entered.</li>
89
+ </ul>
90
+ <p>Key distinction from <code>aria-hidden</code>: A disabled element is <em>reachable but not operable</em>. If you want VoiceOver to skip it entirely, you would need <code>aria-hidden="true"</code> or <code>tabindex="-1"</code>, but that is generally not recommended for disabled controls — users benefit from knowing the field exists and why it may be unavailable.</p>
91
+ <p>This is consistent across NVDA and JAWS as well, though the announcement wording differs (e.g., NVDA says <em>"unavailable"</em>).</p>
92
+ <auro-header level="3" id="voiceOverStateInvalid">Invalid</auro-header>
93
+ <p>When an <code>&lt;auro-datepicker&gt;</code> is invalid the following occurs:</p>
94
+ <ul>
95
+ <li><code>Focus</code> — VoiceOver announces <em>"invalid data"</em> (macOS) or <em>"invalid entry"</em> (iOS) after the element's label.</li>
96
+ <li>The Help Text will render the error message and it will be included in the VoiceOver focus announcement.</li>
97
+ </ul>
98
+ <p>Example: when focusing on an invalid <code>&lt;auro-datepicker&gt;</code> the VoiceOver announces something like <em>"Choose a date, invalid data, text field, Please select a valid date"</em>.</p>