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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (244) hide show
  1. package/components/checkbox/README.md +2 -2
  2. package/components/checkbox/demo/accessibility.html +1 -1
  3. package/components/checkbox/demo/api.html +2 -1
  4. package/components/checkbox/demo/customize.html +1 -1
  5. package/components/checkbox/demo/demo-support.js +1 -60
  6. package/components/checkbox/demo/demo-support.min.js +60 -0
  7. package/components/checkbox/demo/design.html +2 -1
  8. package/components/checkbox/demo/getting-started.html +1 -1
  9. package/components/checkbox/demo/getting-started.md +156 -2
  10. package/components/checkbox/demo/index.html +1 -1
  11. package/components/checkbox/demo/index.min.js +3 -2
  12. package/components/checkbox/demo/install.html +49 -0
  13. package/components/checkbox/demo/install.md +2 -2
  14. package/components/checkbox/demo/keyboard-behavior.html +1 -1
  15. package/components/checkbox/demo/pages.json +1 -0
  16. package/components/checkbox/demo/readme.html +2 -1
  17. package/components/checkbox/demo/readme.md +2 -2
  18. package/components/checkbox/demo/styles.min.css +1 -1
  19. package/components/checkbox/demo/voiceover.html +1 -1
  20. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  21. package/components/checkbox/dist/index.js +3 -2
  22. package/components/checkbox/dist/registered.js +3 -2
  23. package/components/combobox/README.md +2 -2
  24. package/components/combobox/demo/accessibility.html +1 -3
  25. package/components/combobox/demo/api.html +2 -3
  26. package/components/combobox/demo/customize.html +1 -1
  27. package/components/combobox/demo/demo-support.js +1 -60
  28. package/components/combobox/demo/demo-support.min.js +60 -0
  29. package/components/combobox/demo/design.html +2 -3
  30. package/components/combobox/demo/getting-started.html +1 -1
  31. package/components/combobox/demo/getting-started.md +2 -2
  32. package/components/combobox/demo/index.html +1 -1
  33. package/components/combobox/demo/install.html +50 -0
  34. package/components/combobox/demo/install.md +2 -2
  35. package/components/combobox/demo/keyboard-behavior.html +1 -3
  36. package/components/combobox/demo/pages.json +1 -0
  37. package/components/combobox/demo/readme.html +2 -3
  38. package/components/combobox/demo/readme.md +2 -2
  39. package/components/combobox/demo/registered.min.js +5 -4
  40. package/components/combobox/demo/styles.min.css +1 -1
  41. package/components/combobox/demo/voiceover.html +1 -3
  42. package/components/combobox/dist/index.js +5 -4
  43. package/components/combobox/dist/registered.js +5 -4
  44. package/components/counter/README.md +21 -47
  45. package/components/counter/demo/accessibility.html +49 -0
  46. package/components/counter/demo/accessibility.md +34 -0
  47. package/components/counter/demo/api.html +13 -21
  48. package/components/counter/demo/api.md +49 -1299
  49. package/components/counter/demo/api.min.js +1 -8390
  50. package/components/counter/demo/auro-counter-group.min.js +8392 -0
  51. package/components/counter/demo/customize.html +53 -0
  52. package/components/counter/demo/customize.md +650 -0
  53. package/components/counter/demo/demo-support.js +1 -0
  54. package/components/counter/demo/demo-support.min.js +55792 -0
  55. package/components/counter/demo/design.html +52 -0
  56. package/components/counter/demo/design.md +192 -0
  57. package/components/counter/demo/getting-started.html +54 -0
  58. package/components/counter/demo/getting-started.md +482 -0
  59. package/components/counter/demo/index.html +14 -20
  60. package/components/counter/demo/index.md +117 -51
  61. package/components/counter/demo/index.min.js +1 -8390
  62. package/components/{dropdown/demo/keyboardBehavior.html → counter/demo/keyboard-behavior.html} +9 -42
  63. package/components/counter/demo/keyboardBehavior.html +7 -40
  64. package/components/counter/demo/pages.json +1 -0
  65. package/components/counter/demo/readme.html +12 -16
  66. package/components/counter/demo/readme.md +21 -47
  67. package/components/counter/demo/styles.min.css +1 -0
  68. package/components/counter/demo/styles.scss +1 -0
  69. package/components/counter/demo/voiceover.html +51 -0
  70. package/components/counter/demo/voiceover.md +80 -0
  71. package/components/counter/dist/index.js +2 -2
  72. package/components/counter/dist/registered.js +2 -2
  73. package/components/datepicker/README.md +2 -2
  74. package/components/datepicker/demo/accessibility.html +2 -3
  75. package/components/datepicker/demo/api.html +2 -2
  76. package/components/datepicker/demo/auro-datepicker.min.js +5 -4
  77. package/components/datepicker/demo/customize.html +1 -1
  78. package/components/datepicker/demo/demo-support.js +1 -60
  79. package/components/datepicker/demo/demo-support.min.js +60 -0
  80. package/components/datepicker/demo/design.html +3 -4
  81. package/components/datepicker/demo/getting-started.html +1 -1
  82. package/components/datepicker/demo/getting-started.md +2 -2
  83. package/components/datepicker/demo/index.html +1 -1
  84. package/components/datepicker/demo/keyboard-behavior.html +2 -4
  85. package/components/datepicker/demo/pages.json +1 -0
  86. package/components/datepicker/demo/readme.html +2 -2
  87. package/components/datepicker/demo/readme.md +2 -2
  88. package/components/datepicker/demo/styles.min.css +1 -1
  89. package/components/datepicker/demo/voiceover.html +2 -4
  90. package/components/datepicker/dist/index.js +5 -4
  91. package/components/datepicker/dist/registered.js +5 -4
  92. package/components/dropdown/README.md +0 -21
  93. package/components/dropdown/demo/accessibility.html +49 -0
  94. package/components/dropdown/demo/accessibility.md +45 -0
  95. package/components/dropdown/demo/api.html +11 -20
  96. package/components/dropdown/demo/api.md +40 -1364
  97. package/components/dropdown/demo/api.min.js +2 -5098
  98. package/components/dropdown/demo/auro-dropdown.min.js +5099 -0
  99. package/components/dropdown/demo/customize.html +54 -0
  100. package/components/dropdown/demo/customize.md +780 -0
  101. package/components/dropdown/demo/demo-support.js +1 -0
  102. package/components/dropdown/demo/demo-support.min.js +55792 -0
  103. package/components/dropdown/demo/design.html +52 -0
  104. package/components/dropdown/demo/design.md +186 -0
  105. package/components/dropdown/demo/getting-started.html +54 -0
  106. package/components/dropdown/demo/getting-started.md +463 -0
  107. package/components/dropdown/demo/index.html +12 -21
  108. package/components/dropdown/demo/index.md +78 -233
  109. package/components/dropdown/demo/index.min.js +1 -5097
  110. package/components/dropdown/demo/keyboard-behavior.html +48 -0
  111. package/components/dropdown/demo/pages.json +1 -0
  112. package/components/dropdown/demo/readme.html +8 -21
  113. package/components/dropdown/demo/readme.md +0 -21
  114. package/components/dropdown/demo/styles.min.css +1 -0
  115. package/components/dropdown/demo/styles.scss +1 -0
  116. package/components/dropdown/demo/voiceover.html +51 -0
  117. package/components/dropdown/demo/voiceover.md +63 -0
  118. package/components/dropdown/dist/index.js +1 -1
  119. package/components/dropdown/dist/registered.js +1 -1
  120. package/components/form/README.md +9 -9
  121. package/components/form/demo/accessibility.html +51 -0
  122. package/components/form/demo/accessibility.md +23 -0
  123. package/components/form/demo/api.html +12 -15
  124. package/components/form/demo/api.md +14 -290
  125. package/components/form/demo/api.min.js +2 -71921
  126. package/components/form/demo/auro-form.min.js +718 -0
  127. package/components/form/demo/autocomplete.html +2 -2
  128. package/components/form/demo/customize.html +54 -0
  129. package/components/form/demo/customize.md +246 -0
  130. package/components/form/demo/demo-support.js +1 -0
  131. package/components/form/demo/demo-support.min.js +55792 -0
  132. package/components/form/demo/getting-started.html +54 -0
  133. package/components/form/demo/getting-started.md +434 -0
  134. package/components/form/demo/index.html +13 -15
  135. package/components/form/demo/index.md +67 -97
  136. package/components/form/demo/index.min.js +2 -71921
  137. package/components/form/demo/keyboard-behavior.html +51 -0
  138. package/components/form/demo/pages.json +1 -0
  139. package/components/form/demo/readme.html +13 -18
  140. package/components/form/demo/readme.md +9 -9
  141. package/components/form/demo/registerDemoDeps.min.js +71212 -0
  142. package/components/form/demo/styles.min.css +1 -0
  143. package/components/form/demo/styles.scss +1 -0
  144. package/components/form/demo/voiceover.html +51 -0
  145. package/components/form/demo/voiceover.md +36 -0
  146. package/components/form/demo/working.html +3 -2
  147. package/components/input/README.md +2 -2
  148. package/components/input/demo/accessibility.html +1 -1
  149. package/components/input/demo/api.html +1 -1
  150. package/components/input/demo/auro-input.min.js +3 -2
  151. package/components/input/demo/customize.html +1 -1
  152. package/components/input/demo/demo-support.js +1 -60
  153. package/components/input/demo/demo-support.min.js +60 -0
  154. package/components/input/demo/design.html +2 -1
  155. package/components/input/demo/getting-started.html +1 -1
  156. package/components/input/demo/getting-started.md +2 -2
  157. package/components/input/demo/index.html +1 -1
  158. package/components/input/demo/keyboard-behavior.html +2 -1
  159. package/components/input/demo/pages.json +1 -0
  160. package/components/input/demo/readme.html +2 -2
  161. package/components/input/demo/readme.md +2 -2
  162. package/components/input/demo/styles.min.css +1 -1
  163. package/components/input/demo/voiceover.html +1 -1
  164. package/components/input/dist/base-input.d.ts +1 -0
  165. package/components/input/dist/index.js +3 -2
  166. package/components/input/dist/registered.js +3 -2
  167. package/components/menu/README.md +8 -26
  168. package/components/menu/demo/accessibility.html +53 -0
  169. package/components/menu/demo/accessibility.md +34 -0
  170. package/components/menu/demo/api.html +12 -18
  171. package/components/menu/demo/api.md +43 -1102
  172. package/components/menu/demo/api.min.js +2 -2288
  173. package/components/menu/demo/auro-menu.min.js +2289 -0
  174. package/components/menu/demo/customize.html +54 -0
  175. package/components/menu/demo/customize.md +637 -0
  176. package/components/menu/demo/demo-support.js +1 -0
  177. package/components/menu/demo/demo-support.min.js +55792 -0
  178. package/components/menu/demo/design.html +53 -0
  179. package/components/menu/demo/design.md +81 -0
  180. package/components/menu/demo/getting-started.html +54 -0
  181. package/components/menu/demo/getting-started.md +322 -0
  182. package/components/menu/demo/index.html +14 -20
  183. package/components/menu/demo/index.md +26 -63
  184. package/components/menu/demo/index.min.js +1 -2287
  185. package/components/menu/demo/keyboard-behavior.html +53 -0
  186. package/components/menu/demo/pages.json +1 -0
  187. package/components/menu/demo/readme.html +12 -16
  188. package/components/menu/demo/readme.md +8 -26
  189. package/components/menu/demo/styles.min.css +1 -0
  190. package/components/menu/demo/styles.scss +1 -0
  191. package/components/menu/demo/voiceover.html +53 -0
  192. package/components/menu/demo/voiceover.md +33 -0
  193. package/components/radio/demo/accessibility.html +3 -3
  194. package/components/radio/demo/api.html +3 -3
  195. package/components/radio/demo/api.md +44 -44
  196. package/components/radio/demo/api.min.js +2 -2168
  197. package/components/radio/demo/customize.html +3 -3
  198. package/components/radio/demo/demo-support.js +1 -60
  199. package/components/radio/demo/demo-support.min.js +55792 -0
  200. package/components/radio/demo/design.html +3 -3
  201. package/components/radio/demo/getting-started.html +3 -3
  202. package/components/radio/demo/getting-started.md +154 -0
  203. package/components/radio/demo/index.html +2 -3
  204. package/components/radio/demo/index.min.js +16 -2
  205. package/components/radio/demo/keyboard-behavior.html +3 -3
  206. package/components/radio/demo/pages.json +1 -0
  207. package/components/radio/demo/readme.html +3 -3
  208. package/components/radio/demo/styles.min.css +1 -0
  209. package/components/radio/demo/styles.scss +1 -0
  210. package/components/radio/demo/voiceover.html +3 -3
  211. package/components/radio/dist/index.js +1 -1
  212. package/components/radio/dist/registered.js +1 -1
  213. package/components/select/README.md +2 -2
  214. package/components/select/demo/accessibility.html +1 -1
  215. package/components/select/demo/api.html +2 -1
  216. package/components/select/demo/customize.html +1 -1
  217. package/components/select/demo/demo-support.js +1 -60
  218. package/components/select/demo/demo-support.min.js +60 -0
  219. package/components/select/demo/design.html +2 -1
  220. package/components/select/demo/getting-started.html +1 -1
  221. package/components/select/demo/getting-started.md +2 -2
  222. package/components/select/demo/index.html +1 -1
  223. package/components/select/demo/install.html +50 -0
  224. package/components/select/demo/install.md +2 -2
  225. package/components/select/demo/keyboard-behavior.html +1 -1
  226. package/components/select/demo/keyboardBehavior.html +1 -1
  227. package/components/select/demo/layout.html +2 -1
  228. package/components/select/demo/pages.json +1 -0
  229. package/components/select/demo/readme.html +2 -1
  230. package/components/select/demo/readme.md +2 -2
  231. package/components/select/demo/registered.min.js +2 -2
  232. package/components/select/demo/styles.min.css +1 -1
  233. package/components/select/demo/voiceover.html +1 -1
  234. package/components/select/dist/index.js +2 -2
  235. package/components/select/dist/registered.js +2 -2
  236. package/custom-elements.json +5 -2
  237. package/package.json +2 -2
  238. package/components/counter/demo/keyboard-behavior.md +0 -127
  239. package/components/dropdown/demo/keyboard-behavior.md +0 -72
  240. package/components/form/demo/keyboard-behavior.md +0 -38
  241. package/components/menu/demo/keyboard-behavior.md +0 -18
  242. package/components/radio/demo/keyboard-behavior.md +0 -72
  243. package/components/radio/demo/layout.md +0 -30
  244. package/components/radio/demo/styles.css +0 -974
package/components/dropdown/demo/keyboard-behavior.html ADDED
@@ -0,0 +1,48 @@
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/index.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-dropdown</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-dropdown's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ </head>
36
+ <body class="auro-markdown">
37
+ <main></main>
38
+
39
+ <script type="module">
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./keyboard-behavior.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-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
47
+ </body>
48
+ </html>
package/components/dropdown/demo/pages.json ADDED
@@ -0,0 +1 @@
1
+ ["accessibility.md","customize.md","design.md","getting-started.md","index.md","voiceover.md"]
package/components/dropdown/demo/readme.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-dropdown</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-dropdown'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,32 +31,19 @@
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
32
 
33
33
  <!-- Demo Specific Styles -->
34
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
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('./readme.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 "./index.min.js";
53
-
54
- window.addEventListener('load', () => {
55
- initExamples();
56
- });
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./readme.md');
57
42
  </script>
58
43
 
59
44
  <!-- If additional elements are needed for the demo, add them here. -->
45
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
60
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
61
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
62
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
package/components/dropdown/demo/readme.md CHANGED
@@ -103,26 +103,6 @@ AuroDropdown.register('custom-dropdown');</code></pre>
103
103
 
104
104
  This will create a new custom element `<custom-dropdown>` that behaves exactly like `<auro-dropdown>`, allowing both to coexist on the same page without interfering with each other.
105
105
 
106
- <div class="exampleWrapper exampleWrapper--flex">
107
- <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
108
- <div style="padding: var(--ds-size-150);">
109
- Lorem ipsum solar
110
- <br />
111
- <auro-button id="customCommonButton">
112
- Dismiss Dropdown
113
- </auro-button>
114
- </div>
115
- <span slot="helpText">
116
- Help text
117
- </span>
118
- <div slot="trigger">
119
- Trigger
120
- </div>
121
- </custom-dropdown>
122
- </div>
123
- <auro-accordion alignRight>
124
- <span slot="trigger">See code</span>
125
-
126
106
  <pre class="language-html"><code class="language-html">&lt;custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader"&gt;
127
107
  &lt;div style="padding: var(--ds-size-150);"&gt;
128
108
  Lorem ipsum solar
@@ -138,5 +118,4 @@ This will create a new custom element `<custom-dropdown>` that behaves exactly l
138
118
  Trigger
139
119
  &lt;/div&gt;
140
120
  &lt;/custom-dropdown&gt;</code></pre>
141
- </auro-accordion>
142
121
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/dropdown/demo/styles.min.css ADDED
@@ -0,0 +1 @@
1
+ .container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "sidenav" "main"}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display,.auro-markdown h1{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600,.auro-markdown h3{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500,.auro-markdown h4{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink,.baseParagraph .auro-markdown a,.auro-markdown .baseParagraph a{text-decoration:underline}.hyperlink,.auro-markdown a{text-decoration:underline;color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink:visited,.auro-markdown a:visited{color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:not(.is-touching):hover{text-decoration:underline !important}.hyperlink--ondark{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink--ondark:not(.is-touching):hover{color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}.hyperlink--ondark:visited{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink:not(.is-touching):hover,.auro-markdown a:not(.is-touching):hover{text-decoration:none;color:var(--ds-color-text-ui-hover-default, #193d73)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column;height:100vh}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}
package/components/dropdown/demo/styles.scss ADDED
@@ -0,0 +1 @@
1
+ @import '@aurodesignsystem/config/demo-styles';
package/components/dropdown/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-dropdown | 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-dropdown's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ </head>
36
+ <body class="auro-markdown">
37
+ <main></main>
38
+
39
+ <script type="module">
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./voiceover.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-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@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/dropdown/demo/voiceover.md ADDED
@@ -0,0 +1,63 @@
1
+ <auro-header level="1" id="overview">Dropdown - VoiceOver Behavior</auro-header>
2
+ <p>This page documents the VoiceOver experience when using the <code>&lt;auro-dropdown&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 moves to the trigger the following is announced:</p>
6
+ <ol>
7
+ <li><strong>Label:</strong> The trigger content or <code>aria-label</code> value</li>
8
+ <li><strong>Role:</strong> <em>"button"</em> or <em>"pop-up button"</em></li>
9
+ <li>
10
+ <strong>State hints:</strong>
11
+ <table class="compressed body-xs">
12
+ <thead>
13
+ <tr>
14
+ <th>State</th>
15
+ <th>What gets announced</th>
16
+ </tr>
17
+ </thead>
18
+ <tbody>
19
+ <tr>
20
+ <td>Expanded</td>
21
+ <td><em>"collapsed"</em> or <em>"expanded"</em></td>
22
+ </tr>
23
+ <tr>
24
+ <td>Disabled</td>
25
+ <td><em>"dimmed"</em></td>
26
+ </tr>
27
+ </tbody>
28
+ </table>
29
+ </li>
30
+ <li><strong>Additional description:</strong> <code>helpText</code> slot content if present</li>
31
+ </ol>
32
+ <auro-header level="3" id="voiceOverExpandAnnouncement">Expand / Collapse</auro-header>
33
+ <p>When the dropdown is expanded or collapsed, VoiceOver announces the state change.</p>
34
+ <auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
35
+ <p>The dropdown may be <strong>closed</strong> | <strong>collapsed</strong> using a gesture.</p>
36
+ <ul>
37
+ <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.</li>
38
+ <li><strong>Android TalkBack:</strong> Swipe down then left (an <em>"L"</em> gesture) or use the back gesture.</li>
39
+ </ul>
40
+ <auro-header level="2" id="voiceOverLargeVPWorkflow">Large Viewport Workflow</auro-header>
41
+ <p>Examples: large tablet, typical size or larger desktop browser window</p>
42
+ <ol>
43
+ <li><strong>Focus trigger:</strong> Announces the trigger label and state</li>
44
+ <li><strong>Open | Expand:</strong> Activating the trigger opens the dropdown bib; focus moves to the first focusable element within the bib</li>
45
+ <li><strong>Navigate bib content:</strong> Tab through focusable elements within the bib</li>
46
+ <li><strong>Close | Collapse:</strong> Pressing Escape or clicking outside collapses the dropdown</li>
47
+ </ol>
48
+ <auro-header level="2" id="voiceOverSmallVPWorkflow">Small Viewport Workflow</auro-header>
49
+ <p>Examples: mobile phone, very small desktop browser window</p>
50
+ <ol>
51
+ <li><strong>Focus trigger:</strong> Announces the trigger label and state</li>
52
+ <li><strong>Open | Expand:</strong> Opens a fullscreen modal; focus is trapped within the bib content</li>
53
+ <li><strong>Navigate bib content:</strong> Swipe or Tab through focusable elements</li>
54
+ <li><strong>Close:</strong> Activate the close button or use the scrub gesture (two-finger zigzag) to dismiss</li>
55
+ </ol>
56
+ <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
57
+ <auro-header level="3" id="voiceOverStateDisabled">Disabled</auro-header>
58
+ <p><strong>What VoiceOver does:</strong></p>
59
+ <ul>
60
+ <li>Focuses the element and announces it with <strong>"dimmed"</strong>, indicating the control is disabled.</li>
61
+ <li>The element remains in the focus order but cannot be operated.</li>
62
+ <li>The dropdown cannot be opened.</li>
63
+ </ul>
package/components/dropdown/dist/index.js CHANGED
@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
3874
3874
  }
3875
3875
  }
3876
3876
 
3877
- var formkitVersion = '202605041857';
3877
+ var formkitVersion = '202605051928';
3878
3878
 
3879
3879
  class AuroElement extends LitElement {
3880
3880
  static get properties() {
package/components/dropdown/dist/registered.js CHANGED
@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
3874
3874
  }
3875
3875
  }
3876
3876
 
3877
- var formkitVersion = '202605041857';
3877
+ var formkitVersion = '202605051928';
3878
3878
 
3879
3879
  class AuroElement extends LitElement {
3880
3880
  static get properties() {
package/components/form/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
- `<auro-form>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) designed to
24
+ <code>&lt;auro-form&gt;</code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> designed to
25
25
  serve as the base logic for all auro-constructed forms.
26
26
 
27
27
  It automatically "scrapes" its inner content for any auro form elements, and surfaces
@@ -89,21 +89,21 @@ To only develop a single component, use the `--filter` flag:
89
89
 
90
90
  ## Custom Component Registration for Version Management
91
91
 
92
- 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.
92
+ There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" target="_blank">class</auro-hyperlink> 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.
93
93
 
94
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
94
+ You can do this by importing only the component class and using the <code>register(name)</code> method with a unique name:
95
95
 
96
96
  <pre class="language-js"><code class="language-js">// Import the class only
97
97
  import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
98
98
  ​
99
99
  // Register with a custom name if desired
100
- AuroForm.register('custom-form');</code></pre>
100
+ AuroForm.register('[custom]-form');</code></pre>
101
101
 
102
102
  This will create a new custom element `<custom-form>` that behaves exactly like `<auro-form>`, allowing both to coexist on the same page without interfering with each other.
103
103
 
104
104
  ### Using Custom-Named Child Form Elements
105
105
 
106
- When consuming custom-named Auro form elements (like `auro-input` registered as `my-custom-input`),
106
+ When consuming custom-named Auro form elements (like `auro-input` registered as `custom-input`),
107
107
  these elements _must_ be registered BEFORE auro-form due to rendering order limitations.
108
108
  Auro form elements are automatically recognized based on their tag name (e.g. `auro-input`) or special auro attributes which are only assigned during the initial render.
109
109
 
@@ -112,14 +112,14 @@ For example, the following is correct:
112
112
  <pre class="language-javascript"><code class="language-javascript">import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
113
113
  import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
114
114
  ​
115
- AuroInput.register('my-custom-input'); // adds an internal identifier auro-form uses to recognize the custom element
116
- AuroForm.register(); // render looks for said identifier</code></pre>
115
+ AuroInput.register('[custom]-input'); // adds an internal identifier auro-form uses to recognize the custom element
116
+ AuroForm.register('[custom]-form'); // render looks for said identifier</code></pre>
117
117
 
118
118
  The following is NOT correct and will result in forms not working as expected:
119
119
 
120
120
  <pre class="language-javascript"><code class="language-javascript">import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
121
121
  import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
122
122
  ​
123
- AuroForm.register(); // forms start rendering, looking for auro inputs, or custom-named inputs
124
- AuroInput.register('my-custom-input'); // too late, form has already rendered and did not find the custom element</code></pre>
123
+ AuroForm.register('[custom]-form'); // forms start rendering, looking for auro inputs, or custom-named inputs
124
+ AuroInput.register('[custom]-input'); // too late, form has already rendered and did not find the custom element</code></pre>
125
125
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/form/demo/accessibility.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/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-form | 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-form's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
+ </head>
36
+ <body class="auro-markdown">
37
+ <main></main>
38
+
39
+ <script type="module">
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./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-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@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/form/demo/accessibility.md ADDED
@@ -0,0 +1,23 @@
1
+ <auro-header level="1" id="overview">Form - Accessibility</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <section>
6
+ <auro-header level="2" id="formRole">Form Role</auro-header>
7
+ <p>The <code>auro-form</code> component renders as a container element that wraps Auro form elements. It does not add an explicit ARIA role — the semantic meaning comes from the form elements within it.</p>
8
+ </section>
9
+ <section>
10
+ <auro-header level="2" id="labelRequirements">Label Requirements</auro-header>
11
+ <p>Each Auro form element inside <code>auro-form</code> is individually responsible for providing accessible labels. Ensure every <code>auro-input</code>, <code>auro-select</code>, <code>auro-datepicker</code>, and other form elements include proper label content via their <code>label</code> slot or <code>aria-label</code> attribute.</p>
12
+ </section>
13
+ <section>
14
+ <auro-header level="2" id="validation">Validation and Error Announcement</auro-header>
15
+ <p>When <code>submit()</code> is called and a form element is invalid, the error state is surfaced on each element. Error messages are announced to assistive technology users via the individual form element's help text region.</p>
16
+ </section>
17
+ <section>
18
+ <auro-header level="2" id="keyboardInteraction">Keyboard Interaction</auro-header>
19
+ <p>The <code>auro-form</code> component does not participate in the tab sequence itself. Each child form element is independently focusable. Pressing <code>Enter</code> while focused on a form element (not a textarea) will trigger form submission.</p>
20
+ </section>
21
+ </div>
22
+ </div>
23
+ </div>
package/components/form/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-form</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-form'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,23 @@
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
32
 
33
33
  <!-- Demo Specific Styles -->
34
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
34
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
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
- });
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./api.md');
50
42
  </script>
51
- <script type="module" data-demo-script="true" src="./api.min.js"></script>
52
43
 
53
44
  <!-- If additional elements are needed for the demo, add them here. -->
54
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
50
+
51
+ <script src="./api.min.js" data-demo-script="true" type="module"></script>
55
52
  </body>
56
53
  </html>