@aurodesignsystem-dev/auro-formkit 0.0.0-pr1457.1 → 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 (215) hide show
  1. package/components/checkbox/demo/accessibility.html +1 -1
  2. package/components/checkbox/demo/api.html +2 -1
  3. package/components/checkbox/demo/customize.html +1 -1
  4. package/components/checkbox/demo/demo-support.min.js +60 -0
  5. package/components/checkbox/demo/design.html +2 -1
  6. package/components/checkbox/demo/getting-started.html +1 -1
  7. package/components/checkbox/demo/getting-started.md +154 -0
  8. package/components/checkbox/demo/index.html +1 -1
  9. package/components/checkbox/demo/index.min.js +3 -2
  10. package/components/checkbox/demo/install.html +49 -0
  11. package/components/checkbox/demo/keyboard-behavior.html +1 -1
  12. package/components/checkbox/demo/pages.json +1 -0
  13. package/components/checkbox/demo/readme.html +2 -1
  14. package/components/checkbox/demo/styles.min.css +1 -1
  15. package/components/checkbox/demo/voiceover.html +1 -1
  16. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  17. package/components/checkbox/dist/index.js +3 -2
  18. package/components/checkbox/dist/registered.js +3 -2
  19. package/components/combobox/demo/accessibility.html +1 -3
  20. package/components/combobox/demo/api.html +2 -3
  21. package/components/combobox/demo/customize.html +1 -1
  22. package/components/combobox/demo/demo-support.min.js +60 -0
  23. package/components/combobox/demo/design.html +2 -3
  24. package/components/combobox/demo/getting-started.html +1 -1
  25. package/components/combobox/demo/index.html +1 -1
  26. package/components/combobox/demo/install.html +50 -0
  27. package/components/combobox/demo/keyboard-behavior.html +1 -3
  28. package/components/combobox/demo/pages.json +1 -0
  29. package/components/combobox/demo/readme.html +2 -3
  30. package/components/combobox/demo/registered.min.js +5 -4
  31. package/components/combobox/demo/styles.min.css +1 -1
  32. package/components/combobox/demo/voiceover.html +1 -3
  33. package/components/combobox/dist/index.js +5 -4
  34. package/components/combobox/dist/registered.js +5 -4
  35. package/components/counter/README.md +21 -47
  36. package/components/counter/demo/accessibility.html +49 -0
  37. package/components/counter/demo/accessibility.md +34 -0
  38. package/components/counter/demo/api.html +13 -21
  39. package/components/counter/demo/api.md +49 -1299
  40. package/components/counter/demo/api.min.js +1 -8390
  41. package/components/counter/demo/auro-counter-group.min.js +8392 -0
  42. package/components/counter/demo/customize.html +53 -0
  43. package/components/counter/demo/customize.md +650 -0
  44. package/components/counter/demo/demo-support.js +1 -0
  45. package/components/counter/demo/demo-support.min.js +55792 -0
  46. package/components/counter/demo/design.html +52 -0
  47. package/components/counter/demo/design.md +192 -0
  48. package/components/counter/demo/getting-started.html +54 -0
  49. package/components/counter/demo/getting-started.md +482 -0
  50. package/components/counter/demo/index.html +14 -20
  51. package/components/counter/demo/index.md +117 -51
  52. package/components/counter/demo/index.min.js +1 -8390
  53. package/components/{dropdown/demo/keyboardBehavior.html → counter/demo/keyboard-behavior.html} +9 -42
  54. package/components/counter/demo/keyboardBehavior.html +7 -40
  55. package/components/counter/demo/pages.json +1 -0
  56. package/components/counter/demo/readme.html +12 -16
  57. package/components/counter/demo/readme.md +21 -47
  58. package/components/counter/demo/styles.min.css +1 -0
  59. package/components/counter/demo/styles.scss +1 -0
  60. package/components/counter/demo/voiceover.html +51 -0
  61. package/components/counter/demo/voiceover.md +80 -0
  62. package/components/counter/dist/index.js +2 -2
  63. package/components/counter/dist/registered.js +2 -2
  64. package/components/datepicker/demo/accessibility.html +2 -3
  65. package/components/datepicker/demo/api.html +2 -2
  66. package/components/datepicker/demo/auro-datepicker.min.js +5 -4
  67. package/components/datepicker/demo/customize.html +1 -1
  68. package/components/datepicker/demo/demo-support.min.js +60 -0
  69. package/components/datepicker/demo/design.html +3 -4
  70. package/components/datepicker/demo/getting-started.html +1 -1
  71. package/components/datepicker/demo/index.html +1 -1
  72. package/components/datepicker/demo/keyboard-behavior.html +2 -4
  73. package/components/datepicker/demo/pages.json +1 -0
  74. package/components/datepicker/demo/readme.html +2 -2
  75. package/components/datepicker/demo/styles.min.css +1 -1
  76. package/components/datepicker/demo/voiceover.html +2 -4
  77. package/components/datepicker/dist/index.js +5 -4
  78. package/components/datepicker/dist/registered.js +5 -4
  79. package/components/dropdown/README.md +0 -21
  80. package/components/dropdown/demo/accessibility.html +49 -0
  81. package/components/dropdown/demo/accessibility.md +45 -0
  82. package/components/dropdown/demo/api.html +11 -20
  83. package/components/dropdown/demo/api.md +40 -1364
  84. package/components/dropdown/demo/api.min.js +2 -5098
  85. package/components/dropdown/demo/auro-dropdown.min.js +5099 -0
  86. package/components/dropdown/demo/customize.html +54 -0
  87. package/components/dropdown/demo/customize.md +780 -0
  88. package/components/dropdown/demo/demo-support.js +1 -0
  89. package/components/dropdown/demo/demo-support.min.js +55792 -0
  90. package/components/dropdown/demo/design.html +52 -0
  91. package/components/dropdown/demo/design.md +186 -0
  92. package/components/dropdown/demo/getting-started.html +54 -0
  93. package/components/dropdown/demo/getting-started.md +463 -0
  94. package/components/dropdown/demo/index.html +12 -21
  95. package/components/dropdown/demo/index.md +78 -233
  96. package/components/dropdown/demo/index.min.js +1 -5097
  97. package/components/dropdown/demo/keyboard-behavior.html +48 -0
  98. package/components/dropdown/demo/pages.json +1 -0
  99. package/components/dropdown/demo/readme.html +8 -21
  100. package/components/dropdown/demo/readme.md +0 -21
  101. package/components/dropdown/demo/styles.min.css +1 -0
  102. package/components/dropdown/demo/styles.scss +1 -0
  103. package/components/dropdown/demo/voiceover.html +51 -0
  104. package/components/dropdown/demo/voiceover.md +63 -0
  105. package/components/dropdown/dist/index.js +1 -1
  106. package/components/dropdown/dist/registered.js +1 -1
  107. package/components/form/README.md +9 -9
  108. package/components/form/demo/accessibility.html +51 -0
  109. package/components/form/demo/accessibility.md +23 -0
  110. package/components/form/demo/api.html +12 -15
  111. package/components/form/demo/api.md +14 -290
  112. package/components/form/demo/api.min.js +2 -71921
  113. package/components/form/demo/auro-form.min.js +718 -0
  114. package/components/form/demo/autocomplete.html +2 -2
  115. package/components/form/demo/customize.html +54 -0
  116. package/components/form/demo/customize.md +246 -0
  117. package/components/form/demo/demo-support.js +1 -0
  118. package/components/form/demo/demo-support.min.js +55792 -0
  119. package/components/form/demo/getting-started.html +54 -0
  120. package/components/form/demo/getting-started.md +434 -0
  121. package/components/form/demo/index.html +13 -15
  122. package/components/form/demo/index.md +67 -97
  123. package/components/form/demo/index.min.js +2 -71921
  124. package/components/form/demo/keyboard-behavior.html +51 -0
  125. package/components/form/demo/pages.json +1 -0
  126. package/components/form/demo/readme.html +13 -18
  127. package/components/form/demo/readme.md +9 -9
  128. package/components/form/demo/registerDemoDeps.min.js +71212 -0
  129. package/components/form/demo/styles.min.css +1 -0
  130. package/components/form/demo/styles.scss +1 -0
  131. package/components/form/demo/voiceover.html +51 -0
  132. package/components/form/demo/voiceover.md +36 -0
  133. package/components/form/demo/working.html +3 -2
  134. package/components/input/demo/accessibility.html +1 -1
  135. package/components/input/demo/api.html +1 -1
  136. package/components/input/demo/auro-input.min.js +3 -2
  137. package/components/input/demo/customize.html +1 -1
  138. package/components/input/demo/demo-support.min.js +60 -0
  139. package/components/input/demo/design.html +2 -1
  140. package/components/input/demo/getting-started.html +1 -1
  141. package/components/input/demo/index.html +1 -1
  142. package/components/input/demo/keyboard-behavior.html +2 -1
  143. package/components/input/demo/pages.json +1 -0
  144. package/components/input/demo/readme.html +2 -2
  145. package/components/input/demo/styles.min.css +1 -1
  146. package/components/input/demo/voiceover.html +1 -1
  147. package/components/input/dist/base-input.d.ts +1 -0
  148. package/components/input/dist/index.js +3 -2
  149. package/components/input/dist/registered.js +3 -2
  150. package/components/menu/README.md +8 -26
  151. package/components/menu/demo/accessibility.html +53 -0
  152. package/components/menu/demo/accessibility.md +34 -0
  153. package/components/menu/demo/api.html +12 -18
  154. package/components/menu/demo/api.md +43 -1102
  155. package/components/menu/demo/api.min.js +2 -2288
  156. package/components/menu/demo/auro-menu.min.js +2289 -0
  157. package/components/menu/demo/customize.html +54 -0
  158. package/components/menu/demo/customize.md +637 -0
  159. package/components/menu/demo/demo-support.js +1 -0
  160. package/components/menu/demo/demo-support.min.js +55792 -0
  161. package/components/menu/demo/design.html +53 -0
  162. package/components/menu/demo/design.md +81 -0
  163. package/components/menu/demo/getting-started.html +54 -0
  164. package/components/menu/demo/getting-started.md +322 -0
  165. package/components/menu/demo/index.html +14 -20
  166. package/components/menu/demo/index.md +26 -63
  167. package/components/menu/demo/index.min.js +1 -2287
  168. package/components/menu/demo/keyboard-behavior.html +53 -0
  169. package/components/menu/demo/pages.json +1 -0
  170. package/components/menu/demo/readme.html +12 -16
  171. package/components/menu/demo/readme.md +8 -26
  172. package/components/menu/demo/styles.min.css +1 -0
  173. package/components/menu/demo/styles.scss +1 -0
  174. package/components/menu/demo/voiceover.html +53 -0
  175. package/components/menu/demo/voiceover.md +33 -0
  176. package/components/radio/demo/accessibility.html +2 -1
  177. package/components/radio/demo/api.html +2 -1
  178. package/components/radio/demo/customize.html +2 -1
  179. package/components/radio/demo/demo-support.min.js +60 -0
  180. package/components/radio/demo/design.html +2 -1
  181. package/components/radio/demo/getting-started.html +2 -1
  182. package/components/radio/demo/getting-started.md +154 -0
  183. package/components/radio/demo/index.html +1 -1
  184. package/components/radio/demo/index.min.js +1 -1
  185. package/components/radio/demo/keyboard-behavior.html +2 -1
  186. package/components/radio/demo/pages.json +1 -0
  187. package/components/radio/demo/readme.html +3 -3
  188. package/components/radio/demo/styles.min.css +1 -1
  189. package/components/radio/demo/voiceover.html +2 -1
  190. package/components/radio/dist/index.js +1 -1
  191. package/components/radio/dist/registered.js +1 -1
  192. package/components/select/demo/accessibility.html +1 -1
  193. package/components/select/demo/api.html +2 -1
  194. package/components/select/demo/customize.html +1 -1
  195. package/components/select/demo/demo-support.min.js +60 -0
  196. package/components/select/demo/design.html +2 -1
  197. package/components/select/demo/getting-started.html +1 -1
  198. package/components/select/demo/index.html +1 -1
  199. package/components/select/demo/install.html +50 -0
  200. package/components/select/demo/keyboard-behavior.html +1 -1
  201. package/components/select/demo/keyboardBehavior.html +1 -1
  202. package/components/select/demo/layout.html +2 -1
  203. package/components/select/demo/pages.json +1 -0
  204. package/components/select/demo/readme.html +2 -1
  205. package/components/select/demo/registered.min.js +2 -2
  206. package/components/select/demo/styles.min.css +1 -1
  207. package/components/select/demo/voiceover.html +1 -1
  208. package/components/select/dist/index.js +2 -2
  209. package/components/select/dist/registered.js +2 -2
  210. package/custom-elements.json +249 -246
  211. package/package.json +1 -1
  212. package/components/counter/demo/keyboard-behavior.md +0 -127
  213. package/components/dropdown/demo/keyboard-behavior.md +0 -72
  214. package/components/form/demo/keyboard-behavior.md +0 -38
  215. package/components/menu/demo/keyboard-behavior.md +0 -18
package/components/menu/demo/keyboard-behavior.html ADDED
@@ -0,0 +1,53 @@
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/keyboardBehavior.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-menu | Keyboard Behavior</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-menu'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-accordion@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
50
+
51
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
52
+ </body>
53
+ </html>
package/components/menu/demo/pages.json ADDED
@@ -0,0 +1 @@
1
+ ["accessibility.md","customize.md","design.md","getting-started.md","index.md","voiceover.md"]
package/components/menu/demo/readme.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/readme.md
7
7
 
8
8
  With the exception of adding custom elements if needed for the demo.
9
9
 
@@ -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-menu</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-menu'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,22 @@
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
- })
40
+ import { renderPage } from './demo-support.min.js';
41
+ await renderPage('./readme.md');
50
42
  </script>
51
- <script src="./index.min.js" data-demo-script="true" type="module"></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-icon@latest/+esm" type="module"></script>
49
+
50
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
55
51
  </body>
56
52
  </html>
package/components/menu/demo/readme.md CHANGED
@@ -21,11 +21,11 @@ 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-menu>` element provides a list of options for a user to select from.
24
+ The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
25
25
 
26
- A list of options is created within the `<slot>` of the `<auro-menu>` element by using the `<auro-menuoption>` element to define options. Use a standard `<hr>` element to create dividers within the list of options.
26
+ A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
27
27
 
28
- The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `<auro-menu>` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
28
+ The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
30
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
31
31
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -36,9 +36,7 @@ The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menu
36
36
 
37
37
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
38
38
  <!-- The below content is automatically added from ./docs/partials/useCases.md -->
39
- The <code>&lt;auro-menu&gt;</code> element should be used in situations where users may:
40
-
41
- * A user needs to select one option from a list of options.
39
+ The <code>&lt;auro-menu&gt;</code> element is not intended for stand-alone use. It serves as the options list within <auro-hyperlink href="https://auro.alaskaair.com/components/auro/select" target="_blank">auro-select</auro-hyperlink> and <auro-hyperlink href="https://auro.alaskaair.com/components/auro/combobox" target="_blank">auro-combobox</auro-hyperlink>. Refer to those components for use cases and implementation guidance.
42
40
  <!-- AURO-GENERATED-CONTENT:END -->
43
41
 
44
42
  ## Getting Started
@@ -87,11 +85,8 @@ To only develop a single component, use the `--filter` flag:
87
85
  <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
88
86
  <!-- AURO-GENERATED-CONTENT:END -->
89
87
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
90
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
91
-
92
- ## Custom Component Registration for Version Management
93
-
94
- 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.
88
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
89
+ 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.
95
90
 
96
91
  You can do this by importing only the component class and using the `register(name)` method with a unique name:
97
92
 
@@ -99,23 +94,11 @@ You can do this by importing only the component class and using the `register(na
99
94
  import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
100
95
  ​
101
96
  // Register with a custom name if desired
102
- AuroMenu.register('custom-menu');
103
- AuroMenuOption.register('custom-menu-option');</code></pre>
97
+ AuroMenu.register('[custom]-menu');
98
+ AuroMenuOption.register('[custom]-menu-option');</code></pre>
104
99
 
105
100
  This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
106
101
 
107
- <div class="exampleWrapper exampleWrapper--flex">
108
- <custom-menu>
109
- <custom-menuoption value="stops">Stops</custom-menuoption>
110
- <custom-menuoption value="price">Price</custom-menuoption>
111
- <custom-menuoption value="duration">Duration</custom-menuoption>
112
- <custom-menuoption value="departure">Departure</custom-menuoption>
113
- <custom-menuoption value="arrival">Arrival</custom-menuoption>
114
- </custom-menu>
115
- </div>
116
- <auro-accordion alignRight>
117
- <span slot="trigger">See code</span>
118
-
119
102
  <pre class="language-html"><code class="language-html">&lt;custom-menu&gt;
120
103
  &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
121
104
  &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
@@ -123,5 +106,4 @@ This will create a new custom element `<custom-menu>` and `<custom-menu-option>`
123
106
  &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
124
107
  &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
125
108
  &lt;/custom-menu&gt;</code></pre>
126
- </auro-accordion>
127
109
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/menu/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/menu/demo/styles.scss ADDED
@@ -0,0 +1 @@
1
+ @import '@aurodesignsystem/config/demo-styles';
package/components/menu/demo/voiceover.html ADDED
@@ -0,0 +1,53 @@
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-menu | 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-menu'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-accordion@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
50
+
51
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
52
+ </body>
53
+ </html>
package/components/menu/demo/voiceover.md ADDED
@@ -0,0 +1,33 @@
1
+ <auro-header level="1" id="overview">Menu - VoiceOver Behavior</auro-header>
2
+ <p>This page documents the VoiceOver experience when using the <code>&lt;auro-menu&gt;</code> component. It covers announcements and interactions for menu navigation and option selection.</p>
3
+ <auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive Announcements</auro-header>
4
+ <auro-header level="3" id="voiceOverMenuContainer">Menu Container</auro-header>
5
+ <p>When focus enters the menu, VoiceOver announces:</p>
6
+ <ol>
7
+ <li><strong>Role:</strong> <em>"list box"</em></li>
8
+ <li><strong>Item count:</strong> The number of visible options (e.g., <em>"5 items"</em>)</li>
9
+ </ol>
10
+ <auro-header level="3" id="voiceOverMenuOptions">Menu Options</auro-header>
11
+ <p>Each <code>auro-menuoption</code> announces the following when focused:</p>
12
+ <ol>
13
+ <li><strong>Label:</strong> The option's text content</li>
14
+ <li><strong>Role:</strong> <em>"option"</em></li>
15
+ <li><strong>Position:</strong> Position in the list (e.g., <em>"3 of 5"</em>)</li>
16
+ <li><strong>Selected state:</strong> <em>"selected"</em> if the option is currently selected</li>
17
+ <li><strong>Disabled state:</strong> <em>"dimmed"</em> if the option is disabled</li>
18
+ </ol>
19
+ <auro-header level="3" id="voiceOverSelection">Selection</auro-header>
20
+ <p>When an option is selected via Enter or Space:</p>
21
+ <ul>
22
+ <li>VoiceOver announces the option label followed by <em>"selected"</em></li>
23
+ <li>In multi-select mode, previously selected options remain selected and their state is preserved</li>
24
+ </ul>
25
+ <auro-header level="2" id="voiceOverWorkflow">Navigation Workflow</auro-header>
26
+ <ol>
27
+ <li><strong>Enter the menu:</strong> Focus moves into the listbox; VoiceOver announces role and item count</li>
28
+ <li><strong>Navigate options:</strong> Use Arrow Down/Up keys; VoiceOver announces each option's label, role, and position</li>
29
+ <li><strong>Select an option:</strong> Press Enter or Space; VoiceOver confirms the selection</li>
30
+ <li><strong>Exit:</strong> Tab out of the menu or press Escape (when used within a dropdown context)</li>
31
+ </ol>
32
+ <auro-header level="2" id="voiceOverNestedMenus">Nested Menus</auro-header>
33
+ <p>When a nested <code>auro-menu</code> is encountered, VoiceOver announces a new listbox context. Each nested menu maintains its own option count and position tracking.</p>
package/components/radio/demo/accessibility.html CHANGED
@@ -37,12 +37,13 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./accessibility.md');
42
42
  </script>
43
43
 
44
44
  <!-- If additional elements are needed for the demo, add them here. -->
45
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
46
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
47
48
 
48
49
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/radio/demo/api.html CHANGED
@@ -36,13 +36,14 @@
36
36
  <main></main>
37
37
 
38
38
  <script type="module">
39
- import { renderPage } from './demo-support.js';
39
+ import { renderPage } from './demo-support.min.js';
40
40
  await renderPage('./api.md');
41
41
  </script>
42
42
 
43
43
  <!-- If additional elements are needed for the demo, add them here. -->
44
44
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
45
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>
46
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
47
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
48
49
 
package/components/radio/demo/customize.html CHANGED
@@ -37,7 +37,7 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./customize.md');
42
42
  </script>
43
43
 
@@ -45,6 +45,7 @@
45
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
46
46
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
47
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
48
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
49
50
 
50
51
  <script src="./api.min.js" data-demo-script="true" type="module"></script>
package/components/radio/demo/demo-support.min.js CHANGED
@@ -55676,7 +55676,67 @@ function rehypeStringify(options) {
55676
55676
  }
55677
55677
  }
55678
55678
 
55679
+ /**
55680
+ * Fetches the docs/pages/ directory listing, builds a nav bar with links to
55681
+ * each .md file, and prepends it to <body>. Clicking a link renders that page
55682
+ * without a full reload. Pass the path to the pages directory relative to the
55683
+ * HTML file, e.g. '../docs/pages/'.
55684
+ *
55685
+ * @param {string} pagesDir - Path to the docs/pages directory.
55686
+ * @param {string} [activeFile] - Filename (no path) of the currently active page.
55687
+ */
55688
+ async function injectPageNav(pagesDir, activeFile) {
55689
+ let files = [];
55690
+ try {
55691
+ const res = await fetch(`${pagesDir}pages.json`);
55692
+ if (!res.ok) {
55693
+ return;
55694
+ }
55695
+ files = await res.json();
55696
+ } catch {
55697
+ return;
55698
+ }
55699
+
55700
+ if (!files.length) {
55701
+ return;
55702
+ }
55703
+
55704
+ const nav = document.createElement('nav');
55705
+ nav.id = 'page-nav';
55706
+
55707
+ files.forEach((file) => {
55708
+ const label = file.replace(/\.md$/, '').replace(/-/g, ' ');
55709
+ const a = document.createElement('auro-hyperlink');
55710
+ a.textContent = label;
55711
+ a.setAttribute('href', `./${file.replace(/\.md$/, '.html')}`);
55712
+ a.setAttribute('type', 'cta');
55713
+ a.setAttribute('variant', 'ghost');
55714
+ a.setAttribute('size', 'sm');
55715
+ a.dataset.page = file;
55716
+
55717
+ if (file === activeFile) {
55718
+ a.setAttribute('variant', 'tertiary');
55719
+ }
55720
+
55721
+ nav.appendChild(a);
55722
+ });
55723
+
55724
+ document.body.prepend(nav);
55725
+ }
55726
+
55679
55727
  async function renderPage(mdPath) {
55728
+ if (!document.getElementById('page-nav')) {
55729
+ let pagesDir;
55730
+ if (mdPath.includes('/docs/pages/')) {
55731
+ pagesDir = mdPath.substring(0, mdPath.lastIndexOf('/') + 1);
55732
+ } else {
55733
+ // mdPath is like './index.md' served from demo/ — pages.json is co-located
55734
+ pagesDir = mdPath.substring(0, mdPath.lastIndexOf('/') + 1);
55735
+ }
55736
+ const activeFile = mdPath.split('/').pop();
55737
+ await injectPageNav(pagesDir, activeFile);
55738
+ }
55739
+
55680
55740
  const response = await fetch(mdPath);
55681
55741
  const text = await response.text();
55682
55742
  const result = await unified()
package/components/radio/demo/design.html CHANGED
@@ -37,13 +37,14 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  await renderPage('./design.md');
42
42
  </script>
43
43
 
44
44
  <!-- If additional elements are needed for the demo, add them here. -->
45
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
46
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>
47
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
48
49
 
49
50
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
package/components/radio/demo/getting-started.html CHANGED
@@ -37,7 +37,7 @@
37
37
  <main></main>
38
38
 
39
39
  <script type="module">
40
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
41
41
  import { initExamples } from './api.min.js';
42
42
  await renderPage('./getting-started.md');
43
43
  initExamples();
@@ -47,6 +47,7 @@
47
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
48
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
49
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
50
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
50
51
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
51
52
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
52
53
  </body>