@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
@@ -31,15 +31,13 @@
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
34
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
35
  </head>
38
36
  <body class="auro-markdown">
39
37
  <main></main>
40
38
 
41
39
  <script type="module">
42
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
43
41
  await renderPage('./design.md');
44
42
  </script>
45
43
 
@@ -47,6 +45,7 @@
47
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
48
46
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
49
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>
50
49
 
51
50
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
52
51
  </body>
@@ -42,7 +42,7 @@
42
42
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
43
43
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
44
44
  <script type="module">
45
- import { renderPage } from './demo-support.js';
45
+ import { renderPage } from './demo-support.min.js';
46
46
  await renderPage('./getting-started.md');
47
47
  import { initExamples } from "./getting-started.min.js";
48
48
  initExamples();
@@ -45,7 +45,7 @@
45
45
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
46
46
 
47
47
  <script type="module">
48
- import { renderPage } from './demo-support.js';
48
+ import { renderPage } from './demo-support.min.js';
49
49
  await renderPage('./index.md');
50
50
  import { initExamples } from "./index.min.js";
51
51
  initExamples();
@@ -0,0 +1,50 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/install.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-combobox | Install</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-combobox'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('./install.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-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
+ </body>
50
+ </html>
@@ -31,8 +31,6 @@
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
34
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
35
  <style>
38
36
  table {
@@ -64,7 +62,7 @@
64
62
  <main></main>
65
63
 
66
64
  <script type="module">
67
- import { renderPage } from './demo-support.js';
65
+ import { renderPage } from './demo-support.min.js';
68
66
  await renderPage('./keyboard-behavior.md');
69
67
  </script>
70
68
 
@@ -0,0 +1 @@
1
+ ["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","install.md","keyboard-behavior.md","voiceover.md"]
@@ -31,20 +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
34
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
35
  </head>
38
36
  <body class="auro-markdown">
39
37
  <main></main>
40
38
 
41
39
  <script type="module">
42
- import { renderPage } from './demo-support.js';
40
+ import { renderPage } from './demo-support.min.js';
43
41
  await renderPage('./readme.md');
44
42
  </script>
45
43
  <script src="./index.min.js" data-demo-script="true" type="module"></script>
46
44
 
47
45
  <!-- If additional elements are needed for the demo, add them here. -->
48
46
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
49
48
  </body>
50
49
  </html>
@@ -5278,7 +5278,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
5278
5278
  }
5279
5279
  };
5280
5280
 
5281
- var formkitVersion$2 = '202605042114';
5281
+ var formkitVersion$2 = '202605051928';
5282
5282
 
5283
5283
  let AuroElement$2 = class AuroElement extends i$4 {
5284
5284
  static get properties() {
@@ -11750,7 +11750,8 @@ class BaseInput extends AuroElement$1 {
11750
11750
  * The id global attribute defines an identifier (ID) which must be unique in the whole document.
11751
11751
  */
11752
11752
  id: {
11753
- type: String
11753
+ type: String,
11754
+ reflect: true
11754
11755
  },
11755
11756
 
11756
11757
  /**
@@ -13029,7 +13030,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
13029
13030
  }
13030
13031
  };
13031
13032
 
13032
- var formkitVersion$1 = '202605042114';
13033
+ var formkitVersion$1 = '202605051928';
13033
13034
 
13034
13035
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
13035
13036
  // See LICENSE in the project root for license information.
@@ -14094,7 +14095,7 @@ class AuroBibtemplate extends i$4 {
14094
14095
  }
14095
14096
  }
14096
14097
 
14097
- var formkitVersion = '202605042114';
14098
+ var formkitVersion = '202605051928';
14098
14099
 
14099
14100
  var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
14100
14101
 
@@ -1 +1 @@
1
- @import'@aurodesignsystem/webcorestylesheets/dist/elementDemoStyles.css';@import'@aurodesignsystem/webcorestylesheets/dist/demoWrapper.css'
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}
@@ -31,8 +31,6 @@
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
34
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
35
  <style>
38
36
  table {
@@ -48,7 +46,7 @@
48
46
  <main></main>
49
47
 
50
48
  <script type="module">
51
- import { renderPage } from './demo-support.js';
49
+ import { renderPage } from './demo-support.min.js';
52
50
  await renderPage('./voiceover.md');
53
51
  </script>
54
52
 
@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
5211
5211
  }
5212
5212
  };
5213
5213
 
5214
- var formkitVersion$2 = '202605042114';
5214
+ var formkitVersion$2 = '202605051928';
5215
5215
 
5216
5216
  let AuroElement$2 = class AuroElement extends LitElement {
5217
5217
  static get properties() {
@@ -11676,7 +11676,8 @@ class BaseInput extends AuroElement$1 {
11676
11676
  * The id global attribute defines an identifier (ID) which must be unique in the whole document.
11677
11677
  */
11678
11678
  id: {
11679
- type: String
11679
+ type: String,
11680
+ reflect: true
11680
11681
  },
11681
11682
 
11682
11683
  /**
@@ -12955,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
12955
12956
  }
12956
12957
  };
12957
12958
 
12958
- var formkitVersion$1 = '202605042114';
12959
+ var formkitVersion$1 = '202605051928';
12959
12960
 
12960
12961
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12961
12962
  // See LICENSE in the project root for license information.
@@ -14020,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
14020
14021
  }
14021
14022
  }
14022
14023
 
14023
- var formkitVersion = '202605042114';
14024
+ var formkitVersion = '202605051928';
14024
14025
 
14025
14026
  var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
14026
14027
 
@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
5211
5211
  }
5212
5212
  };
5213
5213
 
5214
- var formkitVersion$2 = '202605042114';
5214
+ var formkitVersion$2 = '202605051928';
5215
5215
 
5216
5216
  let AuroElement$2 = class AuroElement extends LitElement {
5217
5217
  static get properties() {
@@ -11676,7 +11676,8 @@ class BaseInput extends AuroElement$1 {
11676
11676
  * The id global attribute defines an identifier (ID) which must be unique in the whole document.
11677
11677
  */
11678
11678
  id: {
11679
- type: String
11679
+ type: String,
11680
+ reflect: true
11680
11681
  },
11681
11682
 
11682
11683
  /**
@@ -12955,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
12955
12956
  }
12956
12957
  };
12957
12958
 
12958
- var formkitVersion$1 = '202605042114';
12959
+ var formkitVersion$1 = '202605051928';
12959
12960
 
12960
12961
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12961
12962
  // See LICENSE in the project root for license information.
@@ -14020,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
14020
14021
  }
14021
14022
  }
14022
14023
 
14023
- var formkitVersion = '202605042114';
14024
+ var formkitVersion = '202605051928';
14024
14025
 
14025
14026
  var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
14026
14027
 
@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
24
+ The <code>auro-counter</code> component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the <code>auro-counter-group</code> to facilitate a collection of counters to add passenger types to a flight.
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -84,11 +84,9 @@ To only develop a single component, use the `--filter` flag:
84
84
  <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
85
85
  <!-- AURO-GENERATED-CONTENT:END -->
86
86
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
87
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
88
-
89
- ## Custom Component Registration for Version Management
90
-
91
- 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.
87
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
88
+ <auro-header level="4">Custom Component Registration for Version Management</auro-header>
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">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.
92
90
 
93
91
  You can do this by importing only the component class and using the `register(name)` method with a unique name:
94
92
 
@@ -99,45 +97,21 @@ import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/au
99
97
  AuroCounter.register('custom-counter');
100
98
  AuroCounterGroup.register('custom-counter-group');</code></pre>
101
99
 
102
- This will create a new custom element `<custom-counter>` and `<custom-counter-group>` that behaves exactly like `<auro-counter>` and `<auro-counter-group>`, allowing both to coexist on the same page without interfering with each other.
103
-
104
- <div class="exampleWrapper exampleWrapper--flex">
105
- <custom-counter-group>
106
- <div slot="bib.fullscreen.headline">Passengers</div>
107
- <div slot="label">Passengers</div>
108
- <custom-counter>
109
- Adults
110
- <span slot="description">18 years or older</span>
111
- </custom-counter>
112
- <custom-counter>
113
- Children
114
- <span slot="description">2-17 years</span>
115
- </custom-counter>
116
- </custom-counter-group>
117
- </div>
118
- <auro-accordion alignRight>
119
- <span slot="trigger">See code</span>
120
-
121
- <pre class="language-html"><code class="language-html"> &lt;custom-counter-group&gt;
122
- &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
123
- &lt;div slot="label"&gt;Passengers&lt;/div&gt;
124
- &lt;custom-counter&gt;
125
- Adults
126
- &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
127
- &lt;/custom-counter&gt;
128
- &lt;custom-counter&gt;
129
- Children
130
- &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
131
- &lt;/custom-counter&gt;
132
- &lt;/custom-counter-group&gt;
133
-
134
- ```html
135
- &lt;custom-checkbox-group&gt;
136
- &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
137
- &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
138
- &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
139
- &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
140
- &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
141
- &lt;/custom-checkbox-group&gt;</code></pre>
142
- </auro-accordion>
100
+ This will create a new custom element <code>&lt;custom-counter&gt;</code> and <code>&lt;custom-counter-group&gt;</code> that behaves exactly like <code>&lt;auro-counter&gt;</code> and <code>&lt;auro-counter-group&gt;</code>, allowing both to coexist on the same page without interfering with each other.
101
+
102
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
103
+ <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
104
+ <pre class="language-html"><code class="language-html">&lt;custom-counter-group&gt;
105
+ &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
106
+ &lt;div slot="label"&gt;Passengers&lt;/div&gt;
107
+ &lt;custom-counter&gt;
108
+ Adults
109
+ &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
110
+ &lt;/custom-counter&gt;
111
+ &lt;custom-counter&gt;
112
+ Children
113
+ &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
114
+ &lt;/custom-counter&gt;
115
+ &lt;/custom-counter-group&gt;</code></pre>
116
+ <!-- AURO-GENERATED-CONTENT:END -->
143
117
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -0,0 +1,49 @@
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-counter | 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-counter'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
+ </body>
49
+ </html>
@@ -0,0 +1,34 @@
1
+ <auro-header level="1" id="overview">Counter - Accessibility</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <section>
6
+ <auro-header level="2" id="ariaRoles">ARIA Roles and Attributes</auro-header>
7
+ <p>The <code>auro-counter</code> component uses the <code>spinbutton</code> role to convey its purpose to assistive technologies. Key ARIA attributes include:</p>
8
+ <ul>
9
+ <li><code>role="spinbutton"</code> — Identifies the element as a numeric spinner control.</li>
10
+ <li><code>aria-valuenow</code> — Reflects the current counter value.</li>
11
+ <li><code>aria-valuemin</code> — Reflects the minimum allowed value.</li>
12
+ <li><code>aria-valuemax</code> — Reflects the maximum allowed value.</li>
13
+ <li><code>aria-label</code> — Derived from the default slot content (counter label).</li>
14
+ </ul>
15
+ </section>
16
+ <section>
17
+ <auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
18
+ <p>The increment and decrement buttons include accessible labels. Custom labels can be provided using the <code>ariaLabel.minus</code> and <code>ariaLabel.plus</code> slots to override the default button descriptions.</p>
19
+ </section>
20
+ <section>
21
+ <auro-header level="2" id="screenReader">Screen Reader Announcements</auro-header>
22
+ <p>When a user interacts with the counter, the updated value is announced via the <code>aria-valuenow</code> attribute. Screen readers will announce the counter label and current value when the element receives focus.</p>
23
+ </section>
24
+ <section>
25
+ <auro-header level="2" id="disabledState">Disabled State</auro-header>
26
+ <p>When a counter is disabled, the <code>aria-disabled</code> attribute is set, and the increment/decrement buttons become inoperable. Screen readers will announce the disabled state to the user.</p>
27
+ </section>
28
+ <section>
29
+ <auro-header level="2" id="dropdownA11y">Dropdown Accessibility</auro-header>
30
+ <p>When used as a dropdown (<code>isDropdown</code>), the counter group inherits dropdown accessibility patterns. The <code>ariaLabel.bib.close</code> slot provides an accessible label for the close button in fullscreen mode.</p>
31
+ </section>
32
+ </div>
33
+ </div>
34
+ </div>
@@ -18,45 +18,37 @@
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
19
  <title>Auro Web Component Demo | auro-counter</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-counter's use of legacy token values at this time -->
25
25
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
26
 
27
27
  <!-- Design Token Alaska Theme -->
28
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
29
+
30
30
  <!-- Webcore Stylesheet Alaska Theme -->
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
32
+
33
33
  <!-- Demo Specific Styles -->
34
- <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
- })
50
- </script>
51
- <script type="module">
52
- import { initExamples } from "./api.min.js";
53
-
40
+ import { renderPage } from './demo-support.min.js';
41
+ import { initExamples } from './api.min.js';
42
+ await renderPage('./api.md');
54
43
  initExamples();
55
44
  </script>
56
-
45
+
57
46
  <!-- If additional elements are needed for the demo, add them here. -->
58
47
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
59
50
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
51
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
60
52
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
61
53
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
62
54
  </body>