@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

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 (254) hide show
  1. package/components/checkbox/README.md +11 -27
  2. package/components/checkbox/demo/accessibility.html +49 -0
  3. package/components/checkbox/demo/accessibility.md +44 -0
  4. package/components/checkbox/demo/api.html +17 -25
  5. package/components/checkbox/demo/api.md +40 -416
  6. package/components/checkbox/demo/api.min.js +5 -4
  7. package/components/checkbox/demo/customize.html +52 -0
  8. package/components/checkbox/demo/customize.md +361 -0
  9. package/components/checkbox/demo/demo-support.js +60 -0
  10. package/components/checkbox/demo/design.html +52 -0
  11. package/components/checkbox/demo/design.md +149 -0
  12. package/components/checkbox/demo/getting-started.html +52 -0
  13. package/components/checkbox/demo/getting-started.md +261 -0
  14. package/components/checkbox/demo/index.html +17 -20
  15. package/components/checkbox/demo/index.md +144 -29
  16. package/components/checkbox/demo/index.min.js +5 -4
  17. package/components/checkbox/demo/keyboard-behavior.html +49 -0
  18. package/components/checkbox/demo/keyboard-behavior.md +0 -3
  19. package/components/checkbox/demo/layout.md +30 -0
  20. package/components/checkbox/demo/readme.html +10 -17
  21. package/components/checkbox/demo/readme.md +11 -27
  22. package/components/checkbox/demo/styles.css +974 -0
  23. package/components/checkbox/demo/voiceover.html +49 -0
  24. package/components/checkbox/demo/voiceover.md +37 -0
  25. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  26. package/components/checkbox/dist/index.js +5 -4
  27. package/components/checkbox/dist/registered.js +5 -4
  28. package/components/combobox/README.md +8 -29
  29. package/components/combobox/demo/accessibility.html +2 -20
  30. package/components/combobox/demo/accessibility.md +1 -1
  31. package/components/combobox/demo/api.html +5 -52
  32. package/components/combobox/demo/api.md +53 -2261
  33. package/components/combobox/demo/api.min.js +15 -12
  34. package/components/combobox/demo/customize.html +53 -0
  35. package/components/combobox/demo/customize.js +24 -0
  36. package/components/combobox/demo/customize.md +1249 -0
  37. package/components/combobox/demo/customize.min.js +18132 -0
  38. package/components/combobox/demo/demo-support.js +60 -0
  39. package/components/combobox/demo/design.html +2 -43
  40. package/components/combobox/demo/design.md +4 -4
  41. package/components/combobox/demo/getting-started.html +53 -0
  42. package/components/combobox/demo/{install.js → getting-started.js} +2 -5
  43. package/components/combobox/demo/getting-started.md +397 -0
  44. package/components/combobox/demo/{install.min.js → getting-started.min.js} +14 -38
  45. package/components/combobox/demo/index.html +4 -47
  46. package/components/combobox/demo/index.md +3 -569
  47. package/components/combobox/demo/index.min.js +15 -12
  48. package/components/combobox/demo/keyboard-behavior.html +2 -20
  49. package/components/combobox/demo/keyboard-behavior.md +2 -2
  50. package/components/combobox/demo/layout.md +2 -2
  51. package/components/combobox/demo/readme.html +2 -43
  52. package/components/combobox/demo/readme.md +8 -29
  53. package/components/combobox/demo/styles.css +98 -105
  54. package/components/combobox/demo/voiceover.html +2 -20
  55. package/components/combobox/demo/voiceover.md +1 -1
  56. package/components/combobox/dist/index.js +12 -10
  57. package/components/combobox/dist/registered.js +12 -10
  58. package/components/counter/README.md +21 -51
  59. package/components/counter/demo/accessibility.html +49 -0
  60. package/components/counter/demo/accessibility.md +34 -0
  61. package/components/counter/demo/api.html +12 -20
  62. package/components/counter/demo/api.md +49 -1299
  63. package/components/counter/demo/api.min.js +6 -6
  64. package/components/counter/demo/customize.html +53 -0
  65. package/components/counter/demo/customize.md +650 -0
  66. package/components/counter/demo/demo-support.js +60 -0
  67. package/components/counter/demo/design.html +52 -0
  68. package/components/counter/demo/design.md +192 -0
  69. package/components/counter/demo/getting-started.html +54 -0
  70. package/components/counter/demo/getting-started.md +332 -0
  71. package/components/counter/demo/index.html +14 -19
  72. package/components/counter/demo/index.md +113 -47
  73. package/components/counter/demo/index.min.js +6 -6
  74. package/components/counter/demo/keyboard-behavior.html +49 -0
  75. package/components/counter/demo/keyboard-behavior.md +1 -1
  76. package/components/counter/demo/keyboardBehavior.html +7 -39
  77. package/components/counter/demo/layout.md +10 -0
  78. package/components/counter/demo/readme.html +11 -15
  79. package/components/counter/demo/readme.md +21 -51
  80. package/components/counter/demo/styles.css +974 -0
  81. package/components/counter/demo/voiceover.html +51 -0
  82. package/components/counter/demo/voiceover.md +80 -0
  83. package/components/counter/dist/index.js +6 -6
  84. package/components/counter/dist/registered.js +6 -6
  85. package/components/datepicker/README.md +10 -24
  86. package/components/datepicker/demo/accessibility.html +50 -0
  87. package/components/datepicker/demo/accessibility.md +64 -0
  88. package/components/datepicker/demo/api.md +69 -1739
  89. package/components/datepicker/demo/api.min.js +14 -14
  90. package/components/datepicker/demo/customize.html +53 -0
  91. package/components/datepicker/demo/customize.md +723 -0
  92. package/components/datepicker/demo/demo-support.js +60 -0
  93. package/components/{select/demo/layout.html → datepicker/demo/design.html} +7 -47
  94. package/components/datepicker/demo/design.md +158 -0
  95. package/components/datepicker/demo/getting-started.html +53 -0
  96. package/components/datepicker/demo/getting-started.md +237 -0
  97. package/components/datepicker/demo/index.html +14 -34
  98. package/components/datepicker/demo/index.md +160 -103
  99. package/components/datepicker/demo/index.min.js +14 -14
  100. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  101. package/components/datepicker/demo/layout.md +92 -0
  102. package/components/datepicker/demo/readme.md +10 -24
  103. package/components/datepicker/demo/styles.css +974 -0
  104. package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} +14 -36
  105. package/components/datepicker/demo/voiceover.md +98 -0
  106. package/components/datepicker/dist/index.js +14 -14
  107. package/components/datepicker/dist/registered.js +14 -14
  108. package/components/dropdown/README.md +0 -25
  109. package/components/dropdown/demo/accessibility.html +49 -0
  110. package/components/dropdown/demo/accessibility.md +45 -0
  111. package/components/dropdown/demo/api.html +10 -19
  112. package/components/dropdown/demo/api.md +40 -1364
  113. package/components/dropdown/demo/api.min.js +2 -2
  114. package/components/dropdown/demo/customize.html +54 -0
  115. package/components/dropdown/demo/customize.md +780 -0
  116. package/components/dropdown/demo/demo-support.js +60 -0
  117. package/components/dropdown/demo/design.html +52 -0
  118. package/components/dropdown/demo/design.md +186 -0
  119. package/components/dropdown/demo/getting-started.html +54 -0
  120. package/components/dropdown/demo/getting-started.md +317 -0
  121. package/components/dropdown/demo/index.html +12 -20
  122. package/components/dropdown/demo/index.md +70 -225
  123. package/components/dropdown/demo/index.min.js +2 -2
  124. package/components/dropdown/demo/keyboard-behavior.html +49 -0
  125. package/components/dropdown/demo/keyboard-behavior.md +4 -8
  126. package/components/dropdown/demo/layout.md +21 -0
  127. package/components/dropdown/demo/readme.html +7 -20
  128. package/components/dropdown/demo/readme.md +0 -25
  129. package/components/dropdown/demo/styles.css +974 -0
  130. package/components/dropdown/demo/voiceover.html +51 -0
  131. package/components/dropdown/demo/voiceover.md +63 -0
  132. package/components/dropdown/dist/index.js +2 -2
  133. package/components/dropdown/dist/registered.js +2 -2
  134. package/components/form/README.md +9 -13
  135. package/components/form/demo/accessibility.html +51 -0
  136. package/components/form/demo/accessibility.md +23 -0
  137. package/components/form/demo/api.html +11 -14
  138. package/components/form/demo/api.md +14 -290
  139. package/components/form/demo/api.min.js +53 -50
  140. package/components/form/demo/customize.html +54 -0
  141. package/components/form/demo/customize.md +246 -0
  142. package/components/form/demo/demo-support.js +60 -0
  143. package/components/form/demo/getting-started.html +54 -0
  144. package/components/form/demo/getting-started.md +291 -0
  145. package/components/form/demo/index.html +12 -14
  146. package/components/form/demo/index.md +66 -96
  147. package/components/form/demo/index.min.js +53 -50
  148. package/components/form/demo/keyboard-behavior.html +51 -0
  149. package/components/form/demo/readme.html +12 -17
  150. package/components/form/demo/readme.md +9 -13
  151. package/components/form/demo/styles.css +974 -0
  152. package/components/form/demo/voiceover.html +51 -0
  153. package/components/form/demo/voiceover.md +36 -0
  154. package/components/helptext/dist/index.js +1 -1
  155. package/components/helptext/dist/registered.js +1 -1
  156. package/components/input/README.md +17 -28
  157. package/components/input/demo/accessibility.html +38 -0
  158. package/components/input/demo/accessibility.md +69 -0
  159. package/components/input/demo/api.html +17 -22
  160. package/components/input/demo/api.js +4 -23
  161. package/components/input/demo/api.md +67 -1267
  162. package/components/input/demo/api.min.js +6 -98
  163. package/components/input/demo/customize.html +54 -0
  164. package/components/input/demo/customize.js +25 -0
  165. package/components/input/demo/customize.md +1372 -0
  166. package/components/input/demo/customize.min.js +7431 -0
  167. package/components/input/demo/demo-support.js +60 -0
  168. package/components/input/demo/design.html +39 -0
  169. package/components/input/demo/design.md +224 -0
  170. package/components/input/demo/getting-started.html +53 -0
  171. package/components/input/demo/getting-started.js +8 -0
  172. package/components/input/demo/getting-started.md +312 -0
  173. package/components/input/demo/getting-started.min.js +7369 -0
  174. package/components/input/demo/index.html +16 -22
  175. package/components/input/demo/index.js +0 -11
  176. package/components/input/demo/index.md +171 -139
  177. package/components/input/demo/index.min.js +6 -18
  178. package/components/input/demo/keyboard-behavior.html +38 -0
  179. package/components/input/demo/layout.md +77 -0
  180. package/components/input/demo/readme.md +17 -28
  181. package/components/input/demo/styles.css +974 -0
  182. package/components/input/demo/voiceover.html +38 -0
  183. package/components/input/demo/voiceover.md +70 -0
  184. package/components/input/dist/base-input.d.ts +1 -0
  185. package/components/input/dist/index.js +6 -6
  186. package/components/input/dist/registered.js +6 -6
  187. package/components/menu/README.md +1 -5
  188. package/components/menu/demo/api.md +43 -43
  189. package/components/menu/demo/api.min.js +2 -2
  190. package/components/menu/demo/index.md +1 -1
  191. package/components/menu/demo/index.min.js +2 -2
  192. package/components/menu/demo/readme.md +1 -5
  193. package/components/menu/dist/index.js +2 -2
  194. package/components/menu/dist/registered.js +2 -2
  195. package/components/radio/README.md +9 -22
  196. package/components/radio/demo/accessibility.html +51 -0
  197. package/components/radio/demo/accessibility.md +44 -0
  198. package/components/radio/demo/api.html +13 -20
  199. package/components/radio/demo/api.md +44 -589
  200. package/components/radio/demo/api.min.js +3 -3
  201. package/components/radio/demo/customize.html +53 -0
  202. package/components/radio/demo/customize.md +368 -0
  203. package/components/radio/demo/demo-support.js +60 -0
  204. package/components/radio/demo/design.html +52 -0
  205. package/components/radio/demo/design.md +143 -0
  206. package/components/radio/demo/getting-started.html +54 -0
  207. package/components/radio/demo/getting-started.md +296 -0
  208. package/components/radio/demo/index.html +16 -19
  209. package/components/radio/demo/index.md +110 -45
  210. package/components/radio/demo/index.min.js +3 -3
  211. package/components/radio/demo/keyboard-behavior.html +51 -0
  212. package/components/radio/demo/layout.md +30 -0
  213. package/components/radio/demo/readme.html +11 -17
  214. package/components/radio/demo/readme.md +9 -22
  215. package/components/radio/demo/styles.css +974 -0
  216. package/components/radio/demo/voiceover.html +51 -0
  217. package/components/radio/demo/voiceover.md +43 -0
  218. package/components/radio/dist/index.js +3 -3
  219. package/components/radio/dist/registered.js +3 -3
  220. package/components/select/README.md +7 -4
  221. package/components/select/demo/accessibility.html +5 -21
  222. package/components/select/demo/accessibility.md +1 -1
  223. package/components/select/demo/api.html +3 -48
  224. package/components/select/demo/api.md +52 -2342
  225. package/components/select/demo/customize.html +54 -0
  226. package/components/select/demo/customize.js +11 -0
  227. package/components/select/demo/customize.md +1049 -0
  228. package/components/select/demo/{api.min.js → customize.min.js} +12 -113
  229. package/components/select/demo/demo-support.js +60 -0
  230. package/components/select/demo/design.html +3 -44
  231. package/components/select/demo/design.md +2 -2
  232. package/components/select/demo/getting-started.html +5 -76
  233. package/components/select/demo/getting-started.js +20 -3
  234. package/components/select/demo/getting-started.md +97 -705
  235. package/components/select/demo/getting-started.min.js +58 -9
  236. package/components/select/demo/index.html +4 -43
  237. package/components/select/demo/index.js +5 -3
  238. package/components/select/demo/index.md +2 -2
  239. package/components/select/demo/index.min.js +14 -9
  240. package/components/select/demo/keyboard-behavior.html +6 -47
  241. package/components/select/demo/keyboard-behavior.md +5 -6
  242. package/components/select/demo/keyboardBehavior.html +4 -46
  243. package/components/select/demo/readme.html +3 -44
  244. package/components/select/demo/readme.md +7 -4
  245. package/components/select/demo/styles.css +57 -109
  246. package/components/select/demo/voiceover.html +3 -30
  247. package/components/select/dist/index.js +5 -5
  248. package/components/select/dist/registered.js +5 -5
  249. package/custom-elements.json +249 -246
  250. package/package.json +3 -3
  251. package/components/combobox/demo/install.html +0 -94
  252. package/components/combobox/demo/install.md +0 -98
  253. package/components/select/demo/api.js +0 -39
  254. package/components/select/demo/install.md +0 -92
package/components/datepicker/demo/index.html CHANGED
@@ -1,16 +1,3 @@
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 ./docs/partials/index.md
7
-
8
- With the exception of adding custom elements if needed for the demo.
9
-
10
- ----------------------- DO NOT EDIT -----------------------------
11
-
12
- -->
13
-
14
1
  <!DOCTYPE html>
15
2
  <html lang="en">
16
3
  <head>
@@ -18,45 +5,38 @@
18
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
6
  <title>Auro Web Component Demo | auro-datepicker</title>
20
7
 
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
8
+ <!-- highlight.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
10
 
24
11
  <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
12
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
13
 
27
14
  <!-- Design Token Alaska Theme -->
28
15
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
16
+
30
17
  <!-- Webcore Stylesheet Alaska Theme -->
31
18
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
19
+
33
20
  <!-- Demo Specific Styles -->
34
21
  <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>
22
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
23
+ </head>
37
24
  <body class="auro-markdown">
38
25
  <main></main>
39
26
 
40
- <script type="module">
41
- import 'https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js';
42
- import 'https://cdn.jsdelivr.net/npm/prismjs@1.24.1/prism.js';
43
- fetch('./index.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
-
52
27
  <!-- If additional elements are needed for the demo, add them here. -->
53
28
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
29
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
30
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
31
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
32
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
54
33
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
55
-
56
- <script type="module" data-demo-script="true">
34
+ <script type="module">
35
+ import { renderPage } from './demo-support.js';
36
+ await renderPage('./index.md');
57
37
  import { initExamples } from "./index.min.js";
58
-
59
38
  initExamples();
60
39
  </script>
40
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
61
41
  </body>
62
42
  </html>
package/components/datepicker/demo/index.md CHANGED
@@ -1,31 +1,72 @@
1
- <!--
2
- THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
- ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
- ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
- -->
6
-
7
- # Datepicker
8
-
1
+ <auro-header level="1" id="overview">Datepicker - Overview and UX Guide</auro-header>
2
+ <div class="contentWrapper">
3
+ <nav>
4
+ <auro-nav anchorNavContent=".scrollWrapper">
5
+ <span slot="mobileToggleCollapsed">View More</span>
6
+ <span slot="mobileToggleExpanded">View Less</span>
7
+ <auro-anchorlink fluid href="#description">Description</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#userStories">User Stories</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#selectDate" class="level2 body-xs">Select a Date</auro-anchorlink>
10
+ <auro-anchorlink fluid href="#selectRange" class="level2 body-xs">Select a Range</auro-anchorlink>
11
+ <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
12
+ <auro-anchorlink fluid href="#skipSelection" class="level2 body-xs">Skip Selection</auro-anchorlink>
13
+ <auro-anchorlink fluid href="#viewportSize" class="level2 body-xs">Viewport Size</auro-anchorlink>
14
+ </auro-nav>
15
+ </nav>
16
+ <div class="mainContent">
17
+ <div class="scrollWrapper">
18
+ <auro-header level="2" id="description">Description</auro-header>
9
19
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
20
  <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
- The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
12
- <!-- AURO-GENERATED-CONTENT:END -->
13
-
14
- ## Use Cases
15
-
21
+ The <code>&lt;auro-datepicker&gt;</code> element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The <code>&lt;auro-datepicker&gt;</code> element is the combination of <auro-hyperlink href="http://auro.alaskaair.com/components/auro/dropdown">auro-dropdown</auro-hyperlink>, <auro-hyperlink href="http://auro.alaskaair.com/components/auro/input">auro-input</auro-hyperlink>, and Auro's extension of <auro-hyperlink href="https://www.npmjs.com/package/wc-range-datepicker" target="_blank">wc-range-datepicker</auro-hyperlink>.
22
+ <!-- AURO-GENERATED-CONTENT:END -->
23
+ <section>
24
+ <auro-header level="2" id="userStories">User Stories</auro-header>
16
25
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
26
  <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
- The `<auro-datepicker>` element should be used in situations where users may:
19
-
27
+ The <code>&lt;auro-datepicker&gt;</code> element should be used in situations where users may:
28
+
20
29
  * select a single date
21
30
  * select a pair of dates which identify a calendar range
22
- <!-- AURO-GENERATED-CONTENT:END -->
23
-
24
- ## Example(s)
25
-
26
- ### Basic
27
-
28
- <div class="exampleWrapper">
31
+ <!-- AURO-GENERATED-CONTENT:END -->
32
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/index/userStories.md) -->
33
+ <!-- The below content is automatically added from ./../docs/partials/index/userStories.md -->
34
+ <auro-header level="3" id="selectDate">Select a date</auro-header>
35
+ <ol>
36
+ <li>
37
+ Move focus to the datepicker input
38
+ <div class="note">
39
+ <p>
40
+ The label moves from the placeholder position to the active position above the input area. The input is ready to accept a typed date value.
41
+ </p>
42
+ </div>
43
+ </li>
44
+ <li>
45
+ Click the input or press <kbd>Enter</kbd> / <kbd>Space</kbd> to open the calendar
46
+ <div class="note">
47
+ <p>
48
+ The calendar bib opens and displays the current month. Focus moves into the calendar on the current date or, if a <code>calendarFocusDate</code> is set, on that date.
49
+ </p>
50
+ </div>
51
+ </li>
52
+ <li>
53
+ Select a date by clicking a calendar cell or by typing a date directly into the input
54
+ <div class="note">
55
+ <p>
56
+ When a valid date is selected, the <code>value</code> property is updated and the calendar closes (on desktop). If the user types a date, it must match the configured <code>format</code> (default <code>mm/dd/yyyy</code>).
57
+ </p>
58
+ </div>
59
+ </li>
60
+ <li>
61
+ Move focus away from the datepicker
62
+ <div class="note">
63
+ <p>
64
+ Validation is triggered on blur by default. If the value does not meet the configured constraints (e.g. <code>required</code>, <code>minDate</code>, <code>maxDate</code>), the component renders an error state with a help text message.
65
+ </p>
66
+ </div>
67
+ </li>
68
+ </ol>
69
+ <div class="exampleWrapper">
29
70
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
30
71
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
31
72
  <auro-datepicker>
@@ -34,27 +75,27 @@ The `<auro-datepicker>` element should be used in situations where users may:
34
75
  <span slot="fromLabel">Choose a date</span>
35
76
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
36
77
  </auro-datepicker>
37
- <!-- AURO-GENERATED-CONTENT:END -->
38
- </div>
39
- <auro-accordion alignRight>
40
- <span slot="trigger">See code</span>
78
+ <!-- AURO-GENERATED-CONTENT:END -->
79
+ </div>
80
+ <auro-accordion alignRight>
81
+ <span slot="trigger">See code</span>
41
82
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
42
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
43
-
83
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
44
84
  <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
45
85
  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
46
86
  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
47
87
  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
48
88
  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
49
- &lt;/auro-datepicker&gt;</code></pre>
50
- <!-- AURO-GENERATED-CONTENT:END -->
51
- </auro-accordion>
52
-
53
- ### Range
54
-
55
- The datepicker can also be used to select a range between two dates by adding the `range` attribute.
56
-
57
- <div class="exampleWrapper">
89
+ &lt;/auro-datepicker&gt;</code></pre>
90
+ <!-- AURO-GENERATED-CONTENT:END -->
91
+ </auro-accordion>
92
+ <auro-header level="3" id="selectRange">Select a date range</auro-header>
93
+ <p>When the <code>range</code> attribute is set, the datepicker renders two inputs — one for the start date and one for the end date.</p>
94
+ <ol>
95
+ <li>Select a departure date — the start date is set and focus moves to the return input</li>
96
+ <li>Select a return date — the end date is set and the date range is highlighted in the calendar</li>
97
+ </ol>
98
+ <div class="exampleWrapper">
58
99
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
59
100
  <!-- The below content is automatically added from ./../apiExamples/range.html -->
60
101
  <auro-datepicker range>
@@ -65,13 +106,12 @@ The datepicker can also be used to select a range between two dates by adding th
65
106
  <span slot="bib.fullscreen.fromLabel">Departure</span>
66
107
  <span slot="bib.fullscreen.toLabel">Return</span>
67
108
  </auro-datepicker>
68
- <!-- AURO-GENERATED-CONTENT:END -->
69
- </div>
70
- <auro-accordion alignRight>
71
- <span slot="trigger">See code</span>
109
+ <!-- AURO-GENERATED-CONTENT:END -->
110
+ </div>
111
+ <auro-accordion alignRight>
112
+ <span slot="trigger">See code</span>
72
113
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
73
- <!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
74
-
114
+ <!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
75
115
  <pre class="language-html"><code class="language-html">&lt;auro-datepicker range&gt;
76
116
  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
77
117
  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Range Headline&lt;/span&gt;
@@ -79,72 +119,89 @@ The datepicker can also be used to select a range between two dates by adding th
79
119
  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
80
120
  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
81
121
  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
82
- &lt;/auro-datepicker&gt;</code></pre>
83
- <!-- AURO-GENERATED-CONTENT:END -->
84
- </auro-accordion>
85
-
86
- ### Snowflake Layout
87
-
88
- Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to apply the snowflake layout to the datepicker. This layout is designed for use on dark backgrounds.
89
-
90
- <div class="exampleWrapper--ondark">
91
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
92
- <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
93
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
122
+ &lt;/auro-datepicker&gt;</code></pre>
123
+ <!-- AURO-GENERATED-CONTENT:END -->
124
+ </auro-accordion>
125
+ <auro-header level="3" id="presetValue">Preset a value</auro-header>
126
+ <p>Use the <code>value</code> attribute to set an initial date. For range datepickers, use both <code>value</code> and <code>valueEnd</code> to preset the full range.</p>
127
+ <p>Values may also be set programmatically at any time by updating the <code>value</code> and <code>valueEnd</code> properties via JavaScript.</p>
128
+ <div class="exampleWrapper">
129
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preset-value.html) -->
130
+ <!-- The below content is automatically added from ./../apiExamples/preset-value.html -->
131
+ <auro-datepicker value="06/15/2026">
132
+ <span slot="bib.fullscreen.headline">Preset Date</span>
133
+ <span slot="fromLabel">Departure</span>
134
+ <span slot="bib.fullscreen.fromLabel">Departure</span>
135
+ </auro-datepicker>
136
+ <!-- AURO-GENERATED-CONTENT:END -->
137
+ </div>
138
+ <auro-accordion alignRight>
139
+ <span slot="trigger">See code</span>
140
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/preset-value.html) -->
141
+ <!-- The below code snippet is automatically added from ./../apiExamples/preset-value.html -->
142
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker value="06/15/2026"&gt;
143
+ &lt;span slot="bib.fullscreen.headline"&gt;Preset Date&lt;/span&gt;
144
+ &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
145
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
146
+ &lt;/auro-datepicker&gt;</code></pre>
147
+ <!-- AURO-GENERATED-CONTENT:END -->
148
+ </auro-accordion>
149
+ <div class="exampleWrapper">
150
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preset-value-range.html) -->
151
+ <!-- The below content is automatically added from ./../apiExamples/preset-value-range.html -->
152
+ <auro-datepicker range value="06/15/2026" valueEnd="06/22/2026">
153
+ <span slot="bib.fullscreen.headline">Preset Range</span>
154
+ <span slot="fromLabel">Departure</span>
155
+ <span slot="toLabel">Return</span>
156
+ <span slot="bib.fullscreen.fromLabel">Departure</span>
157
+ <span slot="bib.fullscreen.toLabel">Return</span>
158
+ </auro-datepicker>
159
+ <!-- AURO-GENERATED-CONTENT:END -->
160
+ </div>
161
+ <auro-accordion alignRight>
162
+ <span slot="trigger">See code</span>
163
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/preset-value-range.html) -->
164
+ <!-- The below code snippet is automatically added from ./../apiExamples/preset-value-range.html -->
165
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker range value="06/15/2026" valueEnd="06/22/2026"&gt;
166
+ &lt;span slot="bib.fullscreen.headline"&gt;Preset Range&lt;/span&gt;
167
+ &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
168
+ &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
169
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
170
+ &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
171
+ &lt;/auro-datepicker&gt;</code></pre>
172
+ <!-- AURO-GENERATED-CONTENT:END -->
173
+ </auro-accordion>
174
+ <auro-header level="3" id="skipSelection">Skip selection</auro-header>
175
+ <p>The datepicker does not force the user to select a date. If no selection is made and the field is not <code>required</code>, the user can move past the datepicker without entering a value.</p>
176
+ <p>If the field is <code>required</code>, moving focus away without selecting a date triggers validation and renders the <code>valueMissing</code> error state.</p>
177
+ <auro-header level="3" id="viewportSize">Viewport size</auro-header>
178
+ <p>The datepicker automatically adapts its presentation based on viewport size. On larger screens, the calendar opens in a floating popover anchored to the trigger. On smaller screens, the calendar opens in a fullscreen dialog.</p>
179
+ <p>The breakpoint at which the fullscreen behavior activates is controlled by the <code>fullscreenBreakpoint</code> attribute. The default value is <code>sm</code>. Supported values are <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>disabled</code>.</p>
180
+ <div class="exampleWrapper">
181
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
182
+ <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
183
+ <auro-datepicker fullscreenBreakpoint="lg">
94
184
  <span slot="ariaLabel.bib.close">Close Calendar</span>
95
- <span slot="label">Date</span>
96
185
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
97
186
  <span slot="fromLabel">Choose a date</span>
98
187
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
99
188
  </auro-datepicker>
100
- <!-- AURO-GENERATED-CONTENT:END -->
101
- </div>
102
- <auro-accordion alignRight>
103
- <span slot="trigger">See code</span>
104
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
105
- <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
106
-
107
- <pre class="language-html"><code class="language-html">&lt;auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY"&gt;
189
+ <!-- AURO-GENERATED-CONTENT:END -->
190
+ </div>
191
+ <auro-accordion alignRight>
192
+ <span slot="trigger">See code</span>
193
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
194
+ <!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
195
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker fullscreenBreakpoint="lg"&gt;
108
196
  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
109
- &lt;span slot="label"&gt;Date&lt;/span&gt;
110
197
  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
111
198
  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
112
199
  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
113
- &lt;/auro-datepicker&gt;</code></pre>
114
- <!-- AURO-GENERATED-CONTENT:END -->
115
- </auro-accordion>
116
-
117
- #### Range
118
-
119
- Ranged variation of the snowflake layout.
120
-
121
- <div class="exampleWrapper--ondark">
122
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/range.html) -->
123
- <!-- The below content is automatically added from ./../apiExamples/snowflake/range.html -->
124
- <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
125
- <span slot="ariaLabel.bib.close">Close Calendar</span>
126
- <span slot="fromLabel">From Date Test</span>
127
- <span slot="toLabel">To Date Test</span>
128
- <span slot="label">Testing Date Label</span>
129
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
130
- <span slot="bib.fullscreen.fromLabel">Choose a departing date</span>
131
- <span slot="bib.fullscreen.toLabel">Choose a returning date</span>
132
- </auro-datepicker>
133
- <!-- AURO-GENERATED-CONTENT:END -->
134
- </div>
135
- <auro-accordion alignRight>
136
- <span slot="trigger">See code</span>
137
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/range.html) -->
138
- <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/range.html -->
139
-
140
- <pre class="language-html"><code class="language-html">&lt;auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY"&gt;
141
- &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
142
- &lt;span slot="fromLabel"&gt;From Date Test&lt;/span&gt;
143
- &lt;span slot="toLabel"&gt;To Date Test&lt;/span&gt;
144
- &lt;span slot="label"&gt;Testing Date Label&lt;/span&gt;
145
- &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
146
- &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a departing date&lt;/span&gt;
147
- &lt;span slot="bib.fullscreen.toLabel"&gt;Choose a returning date&lt;/span&gt;
148
- &lt;/auro-datepicker&gt;</code></pre>
149
- <!-- AURO-GENERATED-CONTENT:END -->
150
- </auro-accordion>
200
+ &lt;/auro-datepicker&gt;</code></pre>
201
+ <!-- AURO-GENERATED-CONTENT:END -->
202
+ </auro-accordion>
203
+ <!-- AURO-GENERATED-CONTENT:END -->
204
+ </section>
205
+ </div>
206
+ </div>
207
+ </div>