@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/demo-support.js ADDED
@@ -0,0 +1,60 @@
1
+ import {unified} from 'https://esm.sh/unified';
2
+ import remarkParse from 'https://esm.sh/remark-parse';
3
+ import remarkGfm from 'https://esm.sh/remark-gfm';
4
+ import remarkRehype from 'https://esm.sh/remark-rehype';
5
+ import rehypeRaw from 'https://esm.sh/rehype-raw';
6
+ import rehypeHighlight from 'https://esm.sh/rehype-highlight';
7
+ import rehypeStringify from 'https://esm.sh/rehype-stringify';
8
+
9
+ export async function renderPage(mdPath) {
10
+ const response = await fetch(mdPath);
11
+ const text = await response.text();
12
+ const result = await unified()
13
+ .use(remarkParse)
14
+ .use(remarkGfm)
15
+ .use(remarkRehype, { allowDangerousHtml: true })
16
+ .use(rehypeRaw)
17
+ .use(rehypeHighlight)
18
+ .use(rehypeStringify)
19
+ .process(text);
20
+
21
+ document.querySelector('main').innerHTML = String(result);
22
+ addCopyButtons();
23
+ }
24
+
25
+ function addCopyButtons() {
26
+ document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
27
+ const pre = code.parentElement;
28
+ const wrapper = document.createElement('div');
29
+ wrapper.className = 'pre-wrapper';
30
+ pre.parentNode.insertBefore(wrapper, pre);
31
+ wrapper.appendChild(pre);
32
+ const btn = document.createElement('button');
33
+ btn.className = 'copy-btn';
34
+ btn.textContent = 'Copy';
35
+ btn.addEventListener('click', () => {
36
+ const raw = code.textContent;
37
+ const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
38
+ navigator.clipboard.writeText(text).then(() => {
39
+ btn.textContent = 'Copied!';
40
+ setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
41
+ });
42
+ });
43
+ wrapper.appendChild(btn);
44
+ });
45
+ }
46
+
47
+ export function openAccordion(id) {
48
+ document.querySelectorAll('auro-accordion').forEach((accordion) => {
49
+ accordion.removeAttribute('expanded');
50
+ });
51
+ const target = document.getElementById(id);
52
+ if (target) {
53
+ target.setAttribute('expanded', '');
54
+ setTimeout(() => {
55
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
56
+ }, 550);
57
+ }
58
+ }
59
+
60
+ window.openAccordion = openAccordion;
package/components/{select/demo/layout.html → datepicker/demo/design.html} RENAMED
@@ -3,7 +3,7 @@
3
3
  See LICENSE in the project root for license information.
4
4
 
5
5
  HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/layout.md
6
+ All demo code should be added/edited in ./demo/design.md
7
7
 
8
8
  With the exception of adding custom elements if needed for the demo.
9
9
 
@@ -16,12 +16,12 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-select | Layout</title>
19
+ <title>Auro Web Component Demo | auro-datepicker | Design</title>
20
20
 
21
21
  <!-- highlight.js Stylesheet -->
22
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
- <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
25
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
26
 
27
27
  <!-- Design Token Alaska Theme -->
@@ -39,49 +39,8 @@
39
39
  <main></main>
40
40
 
41
41
  <script type="module">
42
- import {unified} from 'https://esm.sh/unified';
43
- import remarkParse from 'https://esm.sh/remark-parse';
44
- import remarkGfm from 'https://esm.sh/remark-gfm';
45
- import remarkRehype from 'https://esm.sh/remark-rehype';
46
- import rehypeRaw from 'https://esm.sh/rehype-raw';
47
- import rehypeHighlight from 'https://esm.sh/rehype-highlight';
48
- import rehypeStringify from 'https://esm.sh/rehype-stringify';
49
-
50
- const response = await fetch('./layout.md');
51
- const text = await response.text();
52
- const result = await unified()
53
- .use(remarkParse)
54
- .use(remarkGfm)
55
- .use(remarkRehype, { allowDangerousHtml: true })
56
- .use(rehypeRaw)
57
- .use(rehypeHighlight)
58
- .use(rehypeStringify)
59
- .process(text);
60
-
61
- document.querySelector('main').innerHTML = String(result);
62
- addCopyButtons();
63
-
64
- function addCopyButtons() {
65
- document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
66
- const pre = code.parentElement;
67
- const wrapper = document.createElement('div');
68
- wrapper.className = 'pre-wrapper';
69
- pre.parentNode.insertBefore(wrapper, pre);
70
- wrapper.appendChild(pre);
71
- const btn = document.createElement('button');
72
- btn.className = 'copy-btn';
73
- btn.textContent = 'Copy';
74
- btn.addEventListener('click', () => {
75
- const raw = code.textContent;
76
- const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
77
- navigator.clipboard.writeText(text).then(() => {
78
- btn.textContent = 'Copied!';
79
- setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
80
- });
81
- });
82
- wrapper.appendChild(btn);
83
- });
84
- }
42
+ import { renderPage } from './demo-support.js';
43
+ await renderPage('./design.md');
85
44
  </script>
86
45
 
87
46
  <!-- If additional elements are needed for the demo, add them here. -->
@@ -89,6 +48,7 @@
89
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
90
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
91
50
 
92
- <script src="./index.min.js" data-demo-script="true" type="module"></script>
51
+ <!-- Component scripts -->
52
+ <script type="module" src="./index.min.js"></script>
93
53
  </body>
94
54
  </html>
package/components/datepicker/demo/design.md ADDED
@@ -0,0 +1,158 @@
1
+ <auro-header level="1" id="overview">Datepicker - Design</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <auro-header level="3" id="anatomy">Component Anatomy</auro-header>
6
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/layout/layout.md) -->
7
+ <!-- The below content is automatically added from ./../docs/partials/layout/layout.md -->
8
+ <p>The component consists of the following elements:</p>
9
+ <ul>
10
+ <li>
11
+ <strong>trigger:</strong> shows the component label(s), current date value(s), and will render to reflect the state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>). The trigger includes one or two text inputs (depending on whether <code>range</code> is set) that allow the user to type a date directly.
12
+ </li>
13
+ <li>
14
+ <strong>calendar:</strong> a monthly calendar grid rendered in a dropdown bib. Users can navigate between months and select dates by clicking or tapping calendar cells. On smaller viewports the calendar opens in a fullscreen modal dialog.
15
+ </li>
16
+ <li>
17
+ <strong>help text:</strong> descriptive text rendered below the trigger intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
18
+ </li>
19
+ </ul>
20
+ <auro-header level="4" id="trigger">Trigger</auro-header>
21
+ <p>The trigger includes the component label(s) and the current date value(s). The label is required to ensure correct behavior with accessibility tools such as screen readers.</p>
22
+ <p>When <code>range</code> is set, two inputs are shown — one for the departure date and one for the return date — separated by a visual divider.</p>
23
+ <p>The trigger is a focusable element and will visually respond to common UI states — <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
24
+ <auro-header level="4" id="triggerConditional">Conditional Elements</auro-header>
25
+ <p>The trigger contains the following elements that render conditionally:</p>
26
+ <ul>
27
+ <li>
28
+ <strong>Calendar icon:</strong> a decorative calendar icon rendered to the left of the input field(s). Provides a visual cue that the component opens a calendar.
29
+ </li>
30
+ <li>
31
+ <strong>Clear button:</strong> rendered when the input has a value, allowing the user to clear the current date selection.
32
+ </li>
33
+ <li>
34
+ <strong>Validation error icon:</strong> rendered when the component is in an invalid state, visually indicating a validation problem.
35
+ </li>
36
+ </ul>
37
+ <auro-header level="4" id="calendar">Calendar</auro-header>
38
+ <p>The calendar displays one or more months in a grid layout. Users interact with the calendar by clicking on individual date cells. The calendar supports:</p>
39
+ <ul>
40
+ <li>Navigating between months using previous/next arrows.</li>
41
+ <li>Date range highlighting when <code>range</code> is set.</li>
42
+ <li>Disabled dates outside the <code>minDate</code>/<code>maxDate</code> bounds.</li>
43
+ <li>Custom cell content via the <code>date_MM_DD_YYYY</code> slot.</li>
44
+ <li>Cell popovers via the <code>popover_MM_DD_YYYY</code> slot.</li>
45
+ </ul>
46
+ <auro-header level="4" id="helpText">Help Text</auro-header>
47
+ <p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers.</p>
48
+ <p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
49
+ <auro-header level="3" id="colors">Colors</auro-header>
50
+ <auro-header level="4" id="defaultColor">Default Color</auro-header>
51
+ <p>When the component is used on a light background.</p>
52
+ <div class="exampleWrapper">
53
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
54
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
55
+ <auro-datepicker>
56
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
57
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
58
+ <span slot="fromLabel">Choose a date</span>
59
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
60
+ </auro-datepicker>
61
+ <!-- AURO-GENERATED-CONTENT:END -->
62
+ </div>
63
+ <auro-accordion alignRight>
64
+ <span slot="trigger">See code</span>
65
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
66
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
67
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
68
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
69
+ &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
70
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
71
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
72
+ &lt;/auro-datepicker&gt;</code></pre>
73
+ <!-- AURO-GENERATED-CONTENT:END -->
74
+ </auro-accordion>
75
+ <auro-header level="4" id="inverseColor">Inverse Color</auro-header>
76
+ <p>When the component is used on a darker background, set <code>appearance="inverse"</code> to invert the component colors for proper contrast and visibility.</p>
77
+ <div class="exampleWrapper--ondark">
78
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
79
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
80
+ <auro-datepicker appearance="inverse">
81
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
82
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
83
+ <span slot="fromLabel">Choose a date</span>
84
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
85
+ </auro-datepicker>
86
+ <!-- AURO-GENERATED-CONTENT:END -->
87
+ </div>
88
+ <auro-accordion alignRight>
89
+ <span slot="trigger">See code</span>
90
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
91
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
92
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker appearance="inverse"&gt;
93
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
94
+ &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
95
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
96
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
97
+ &lt;/auro-datepicker&gt;</code></pre>
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+ </auro-accordion>
100
+ <!-- AURO-GENERATED-CONTENT:END -->
101
+ <auro-header level="3" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
102
+ <p>The <code>auro-datepicker</code> component supports the <code>shape</code>, <code>size</code> and <code>layout</code> feature set. The component defaults to <code>layout="classic"</code>, <code>shape="classic"</code> and <code>size="lg"</code>.</p>
103
+ <auro-header level="4" id="classicLayout">Classic Layout</auro-header>
104
+ <p>The <code>classic</code> layout is default for <code>auro-datepicker</code>. No customization is needed to achieve this look.</p>
105
+ <div class="exampleWrapper">
106
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
107
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
108
+ <auro-datepicker>
109
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
110
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
111
+ <span slot="fromLabel">Choose a date</span>
112
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
113
+ </auro-datepicker>
114
+ <!-- AURO-GENERATED-CONTENT:END -->
115
+ </div>
116
+ <auro-accordion alignRight>
117
+ <span slot="trigger">See code</span>
118
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
119
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
120
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
121
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
122
+ &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
123
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
124
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
125
+ &lt;/auro-datepicker&gt;</code></pre>
126
+ <!-- AURO-GENERATED-CONTENT:END -->
127
+ </auro-accordion>
128
+ <auro-header level="4" id="snowflakeLayout">Snowflake Layout</auro-header>
129
+ <p>The <code>snowflake</code> layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.</p>
130
+ <p>The <code>snowflake</code> layout is only expected to be used on dark backgrounds, in conjunction with <code>appearance="inverse"</code>.</p>
131
+ <div class="exampleWrapper--ondark">
132
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
133
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
134
+ <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
135
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
136
+ <span slot="label">Date</span>
137
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
138
+ <span slot="fromLabel">Choose a date</span>
139
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
140
+ </auro-datepicker>
141
+ <!-- AURO-GENERATED-CONTENT:END -->
142
+ </div>
143
+ <auro-accordion alignRight>
144
+ <span slot="trigger">See code</span>
145
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
146
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
147
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY"&gt;
148
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
149
+ &lt;span slot="label"&gt;Date&lt;/span&gt;
150
+ &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
151
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
152
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
153
+ &lt;/auro-datepicker&gt;</code></pre>
154
+ <!-- AURO-GENERATED-CONTENT:END -->
155
+ </auro-accordion>
156
+ </div>
157
+ </div>
158
+ </div>
package/components/datepicker/demo/getting-started.html ADDED
@@ -0,0 +1,53 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/getting-started.md
7
+
8
+ ----------------------- DO NOT EDIT -----------------------------
9
+
10
+ -->
11
+
12
+ <!DOCTYPE html>
13
+ <html lang="en">
14
+ <head>
15
+ <meta charset="UTF-8" />
16
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
+ <title>Auro Web Component Demo | auro-datepicker | Getting Started</title>
18
+
19
+ <!-- highlight.js Stylesheet -->
20
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
21
+
22
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
23
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
24
+
25
+ <!-- Design Token Alaska Theme -->
26
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
27
+
28
+ <!-- Webcore Stylesheet Alaska Theme -->
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
30
+
31
+ <!-- Demo Specific Styles -->
32
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
33
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
34
+ </head>
35
+ <body class="auro-markdown">
36
+ <main></main>
37
+
38
+ <!-- If additional elements are needed for the demo, add them here. -->
39
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
40
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
42
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
43
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
44
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
45
+ <script type="module">
46
+ import { renderPage } from './demo-support.js';
47
+ await renderPage('./getting-started.md');
48
+ </script>
49
+
50
+ <!-- Component scripts -->
51
+ <script type="module" src="./index.min.js"></script>
52
+ </body>
53
+ </html>
package/components/datepicker/demo/getting-started.md ADDED
@@ -0,0 +1,237 @@
1
+ <auro-header level="1" id="overview">Datepicker - Getting Started</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="#setup">Setup</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
10
+ <auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
11
+ <auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
12
+ <auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
13
+ <auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
14
+ <auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
15
+ <auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
16
+ <auro-anchorlink fluid href="#slot-fromLabel" class="level2 body-xs">fromLabel</auro-anchorlink>
17
+ <auro-anchorlink fluid href="#slot-toLabel" class="level2 body-xs">toLabel</auro-anchorlink>
18
+ <auro-anchorlink fluid href="#slot-label" class="level2 body-xs">label</auro-anchorlink>
19
+ <auro-anchorlink fluid href="#slot-helpText" class="level2 body-xs">helpText</auro-anchorlink>
20
+ <auro-anchorlink fluid href="#slot-ariaLabel-input-clear" class="level2 body-xs">ariaLabel.input.clear</auro-anchorlink>
21
+ <auro-anchorlink fluid href="#slot-ariaLabel-bib-close" class="level2 body-xs">ariaLabel.bib.close</auro-anchorlink>
22
+ <auro-anchorlink fluid href="#slot-bib-fullscreen-headline" class="level2 body-xs">bib.fullscreen.headline</auro-anchorlink>
23
+ <auro-anchorlink fluid href="#slot-bib-fullscreen-fromLabel" class="level2 body-xs">bib.fullscreen.fromLabel</auro-anchorlink>
24
+ <auro-anchorlink fluid href="#slot-bib-fullscreen-toLabel" class="level2 body-xs">bib.fullscreen.toLabel</auro-anchorlink>
25
+ <auro-anchorlink fluid href="#slot-date" class="level2 body-xs">date_MM_DD_YYYY</auro-anchorlink>
26
+ <auro-anchorlink fluid href="#slot-popover" class="level2 body-xs">popover_MM_DD_YYYY</auro-anchorlink>
27
+ <auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
28
+ <auro-anchorlink fluid href="#validity" class="level2 body-xs">Validity</auro-anchorlink>
29
+ <auro-anchorlink fluid href="#value" class="level2 body-xs">Value</auro-anchorlink>
30
+ <auro-anchorlink fluid href="#valueEnd" class="level2 body-xs">ValueEnd</auro-anchorlink>
31
+ <auro-anchorlink fluid href="#values" class="level2 body-xs">Values</auro-anchorlink>
32
+ <auro-anchorlink fluid href="#publicFunctions">Functions</auro-anchorlink>
33
+ <auro-anchorlink fluid href="#focus" class="level2 body-xs">focus()</auro-anchorlink>
34
+ <auro-anchorlink fluid href="#hideBib" class="level2 body-xs">hideBib()</auro-anchorlink>
35
+ <auro-anchorlink fluid href="#reset" class="level2 body-xs">reset()</auro-anchorlink>
36
+ <auro-anchorlink fluid href="#showBib" class="level2 body-xs">showBib()</auro-anchorlink>
37
+ <auro-anchorlink fluid href="#validate" class="level2 body-xs">validate()</auro-anchorlink>
38
+ </auro-nav>
39
+ </nav>
40
+ <div class="mainContent">
41
+ <div class="scrollWrapper">
42
+ <section>
43
+ <auro-header level="2" id="setup">Setup</auro-header>
44
+ <auro-accordion-group Emphasis>
45
+ <auro-accordion expanded class="section" id="recommendedAccordion">
46
+ <span slot="trigger">Recommended Installation and Implementation</span>
47
+ <div class="accordion-content">
48
+ <auro-header level="3">Install</auro-header>
49
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
50
+ <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
51
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
52
+ <!-- AURO-GENERATED-CONTENT:END -->
53
+ <auro-header level="3">Implementation</auro-header>
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
55
+ <!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
56
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
57
+ <!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
58
+ <p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
59
+ <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
60
+ <p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
61
+ <p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
62
+ <!-- AURO-GENERATED-CONTENT:END -->
63
+ <pre class="language-js"><code class="language-js">// Import the class only
64
+ import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
65
+ ​
66
+ // Register with a custom name if desired
67
+ AuroDatepicker.register('custom-datepicker');</code></pre>
68
+
69
+ This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
70
+
71
+ <pre class="language-html"><code class="language-html">&lt;custom-datepicker&gt;
72
+ &lt;span slot="bib.fullscreen.headline"&gt;custom-datepicker Example&lt;/span&gt;
73
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
74
+ &lt;span slot="bib.fullscreen.dateLabel"&gt;Choose a date&lt;/span&gt;
75
+ &lt;/custom-datepicker&gt;</code></pre>
76
+ <!-- AURO-GENERATED-CONTENT:END -->
77
+ </div>
78
+ </auro-accordion>
79
+ <auro-accordion class="section" id="autoAccordion">
80
+ <span slot="trigger">Auto Installation and Implementation</span>
81
+ <div class="accordion-content">
82
+ <p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
83
+ <auro-header level="3">Install</auro-header>
84
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
85
+ <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
86
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
87
+ <!-- AURO-GENERATED-CONTENT:END -->
88
+ <auro-header level="3">Implementation</auro-header>
89
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
90
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
91
+ <p>Once installed, the component can be used in your project by importing the component's registered module:</p>
92
+ <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-datepicker';</code></pre>
93
+ <p>This import registers the <code>&lt;auro-datepicker&gt;</code> custom element globally. You can then use it in your HTML:</p>
94
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
95
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
96
+ &lt;span slot="bib.fullscreen.headline"&gt;Select Date&lt;/span&gt;
97
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
98
+ &lt;/auro-datepicker&gt;</code></pre>
99
+ <!-- AURO-GENERATED-CONTENT:END -->
100
+ </div>
101
+ </auro-accordion>
102
+ <auro-accordion class="section" id="cdnAccordion">
103
+ <span slot="trigger">CDN Installation and Implementation</span>
104
+ <div class="accordion-content">
105
+ <p class="warning"><strong>Warning:</strong> CDN install & registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
106
+ <auro-header level="3">Install & Implementation</auro-header>
107
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
108
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
109
+ <p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
110
+ <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"&gt;&lt;/script&gt;</code></pre>
111
+ <p>This script registers the <code>&lt;auro-datepicker&gt;</code> custom element globally. You can then use it in your HTML:</p>
112
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
113
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
114
+ &lt;span slot="bib.fullscreen.headline"&gt;Select Date&lt;/span&gt;
115
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
116
+ &lt;/auro-datepicker&gt;</code></pre>
117
+ <!-- AURO-GENERATED-CONTENT:END -->
118
+ </div>
119
+ </auro-accordion>
120
+ </auro-accordion-group>
121
+ </section>
122
+ <section>
123
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
124
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
125
+ <auro-header level="2" id="frameworks">Frameworks</auro-header>
126
+ <auro-accordion-group Emphasis>
127
+ <auro-accordion class="section" id="react">
128
+ <span slot="trigger">React</span>
129
+ <div class="accordion-content">
130
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
131
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
132
+ The `<auro-datepicker>` custom element is compatible with React. See the auro-formkit README for general [React integration guidance](https://github.com/AuroDesignSystem/auro-formkit#react).
133
+ <!-- AURO-GENERATED-CONTENT:END -->
134
+ </div>
135
+ </auro-accordion>
136
+ <auro-accordion class="section" id="svelte">
137
+ <span slot="trigger">Svelte</span>
138
+ <div class="accordion-content">
139
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
140
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
141
+ The `<auro-datepicker>` custom element is compatible with Svelte. See the auro-formkit README for general [Svelte integration guidance](https://github.com/AuroDesignSystem/auro-formkit#svelte).
142
+ <!-- AURO-GENERATED-CONTENT:END -->
143
+ </div>
144
+ </auro-accordion>
145
+ </auro-accordion-group>
146
+ <!-- AURO-GENERATED-CONTENT:END -->
147
+ </section>
148
+ <section>
149
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/minimal-config.md) -->
150
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/minimal-config.md -->
151
+ <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
152
+ Every <code>&lt;auro-datepicker&gt;</code> implementation requires the following:
153
+
154
+ 1. **A label in the `fromLabel` slot** — Provides an accessible label for the date input.
155
+ 2. **A `bib.fullscreen.headline` slot** — Provides a headline for the fullscreen (mobile) calendar view.
156
+ 3. **A `bib.fullscreen.fromLabel` slot** — Provides a label for the date input in the fullscreen view.
157
+
158
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
159
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
160
+ &lt;span slot="bib.fullscreen.headline"&gt;Select Date&lt;/span&gt;
161
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
162
+ &lt;/auro-datepicker&gt;</code></pre>
163
+
164
+ When using the `range` attribute, also provide `toLabel` and `bib.fullscreen.toLabel`:
165
+
166
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker range&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.headline"&gt;Select Dates&lt;/span&gt;
170
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
171
+ &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
172
+ &lt;/auro-datepicker&gt;</code></pre>
173
+ <!-- AURO-GENERATED-CONTENT:END -->
174
+ </section>
175
+ <section>
176
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/slots.md) -->
177
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/slots.md -->
178
+ <auro-header level="2" id="slots">Slots</auro-header>
179
+ <p>The following slots are available on the <code>&lt;auro-datepicker&gt;</code> element.</p>
180
+ <auro-header level="3" id="slot-fromLabel">fromLabel</auro-header>
181
+ <p>Defines the label content for the first (or only) date input.</p>
182
+ <auro-header level="3" id="slot-toLabel">toLabel</auro-header>
183
+ <p>Defines the label content for the second date input when the <code>range</code> attribute is used.</p>
184
+ <auro-header level="3" id="slot-label">label</auro-header>
185
+ <p>Defines the label content for the entire datepicker when <code>layout="snowflake"</code>.</p>
186
+ <auro-header level="3" id="slot-helpText">helpText</auro-header>
187
+ <p>Defines the content of the help text displayed below the datepicker.</p>
188
+ <auro-header level="3" id="slot-ariaLabel-input-clear">ariaLabel.input.clear</auro-header>
189
+ <p>Sets <code>aria-label</code> on the clear button.</p>
190
+ <auro-header level="3" id="slot-ariaLabel-bib-close">ariaLabel.bib.close</auro-header>
191
+ <p>Sets <code>aria-label</code> on the close button in the fullscreen bib.</p>
192
+ <auro-header level="3" id="slot-bib-fullscreen-headline">bib.fullscreen.headline</auro-header>
193
+ <p>Defines the headline to display above the date labels in the fullscreen (mobile) layout.</p>
194
+ <auro-header level="3" id="slot-bib-fullscreen-fromLabel">bib.fullscreen.fromLabel</auro-header>
195
+ <p>Defines the content to display above the first date input in the fullscreen (mobile) layout.</p>
196
+ <auro-header level="3" id="slot-bib-fullscreen-toLabel">bib.fullscreen.toLabel</auro-header>
197
+ <p>Defines the content to display above the second date input in the fullscreen (mobile) layout when <code>range</code> is true.</p>
198
+ <auro-header level="3" id="slot-date">date_MM_DD_YYYY</auro-header>
199
+ <p>Defines the content to display in the <code>auro-calendar-cell</code> for the specified date. The date format in the slot name should match <code>MM_DD_YYYY</code> (e.g. <code>slot="date_01_15_2026"</code>). Colored using the success state token when the <code>highlight</code> attribute is applied.</p>
200
+ <auro-header level="3" id="slot-popover">popover_MM_DD_YYYY</auro-header>
201
+ <p>Defines the content to display in the <code>auro-calendar-cell</code> popover for the specified date. The date format in the slot name should match <code>MM_DD_YYYY</code> (e.g. <code>slot="popover_01_15_2026"</code>).</p>
202
+ <!-- AURO-GENERATED-CONTENT:END -->
203
+ </section>
204
+ <section>
205
+ <auro-header level="2" id="stateManagement">State Management</auro-header>
206
+ <p>The following read-only properties reflect the current state of the component and can be accessed via JavaScript.</p>
207
+ <auro-header level="3" id="validity">validity</auro-header>
208
+ <p>Returns the current <code>validityState</code> of the component as a string. Possible values include <code>"valid"</code>, <code>"valueMissing"</code>, <code>"badInput"</code>, <code>"rangeOverflow"</code>, <code>"rangeUnderflow"</code>, and <code>"customError"</code>.</p>
209
+ <auro-header level="3" id="value">value</auro-header>
210
+ <p>Gets or sets the selected date value as a string in <code>MM/DD/YYYY</code> format. When <code>range</code> is set, this represents the start date.</p>
211
+ <auro-header level="3" id="valueEnd">valueEnd</auro-header>
212
+ <p>Gets or sets the end date value when <code>range</code> is set. Uses the same <code>MM/DD/YYYY</code> format.</p>
213
+ <auro-header level="3" id="values">values</auro-header>
214
+ <p>A convenience read-only property for use when <code>range</code> is implemented that returns both <code>value</code> and <code>valueEnd</code> as an array.</p>
215
+ <ul>
216
+ <li>When <code>range</code> is set and both dates are selected, returns <code>[value, valueEnd]</code>.</li>
217
+ <li>When only <code>value</code> is set (range not complete or not enabled), returns <code>[value]</code>.</li>
218
+ <li>When no value is set, returns an empty array <code>[]</code>.</li>
219
+ </ul>
220
+ </section>
221
+ <section>
222
+ <auro-header level="2" id="publicFunctions">Functions</auro-header>
223
+ <p>The following public methods are available on the <code>&lt;auro-datepicker&gt;</code> element.</p>
224
+ <auro-header level="3" id="focus">focus()</auro-header>
225
+ <p>Programmatically moves focus to the datepicker trigger input.</p>
226
+ <auro-header level="3" id="hideBib">hideBib()</auro-header>
227
+ <p>Programmatically hides the dropdown bib (calendar) if it is currently open.</p>
228
+ <auro-header level="3" id="reset">reset()</auro-header>
229
+ <p>Resets the component to its initial state, clearing the selected date(s) and validation state.</p>
230
+ <auro-header level="3" id="showBib">showBib()</auro-header>
231
+ <p>Programmatically shows the dropdown bib (calendar) if it is not already open.</p>
232
+ <auro-header level="3" id="validate">validate()</auro-header>
233
+ <p>Triggers validation on the component. Pass <code>true</code> to force validation even when <code>noValidate</code> is set.</p>
234
+ </section>
235
+ </div>
236
+ </div>
237
+ </div>