@aurodesignsystem-dev/auro-formkit 0.0.0-pr1001.0

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 (297) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +314 -0
  5. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +50 -0
  6. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.d.ts +2 -0
  10. package/components/bibtemplate/dist/index.js +1940 -0
  11. package/components/bibtemplate/dist/registered.js +1940 -0
  12. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  14. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  15. package/components/checkbox/README.md +142 -0
  16. package/components/checkbox/demo/api.html +61 -0
  17. package/components/checkbox/demo/api.js +17 -0
  18. package/components/checkbox/demo/api.md +436 -0
  19. package/components/checkbox/demo/api.min.js +1870 -0
  20. package/components/checkbox/demo/index.html +57 -0
  21. package/components/checkbox/demo/index.js +8 -0
  22. package/components/checkbox/demo/index.md +327 -0
  23. package/components/checkbox/demo/index.min.js +1845 -0
  24. package/components/checkbox/demo/readme.html +57 -0
  25. package/components/checkbox/demo/readme.md +142 -0
  26. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  27. package/components/checkbox/dist/auro-checkbox.d.ts +136 -0
  28. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  29. package/components/checkbox/dist/index.d.ts +3 -0
  30. package/components/checkbox/dist/index.js +1794 -0
  31. package/components/checkbox/dist/registered.js +1795 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  36. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  37. package/components/combobox/README.md +154 -0
  38. package/components/combobox/demo/api.html +63 -0
  39. package/components/combobox/demo/api.js +36 -0
  40. package/components/combobox/demo/api.md +1326 -0
  41. package/components/combobox/demo/api.min.js +18691 -0
  42. package/components/combobox/demo/index.html +63 -0
  43. package/components/combobox/demo/index.js +26 -0
  44. package/components/combobox/demo/index.md +725 -0
  45. package/components/combobox/demo/index.min.js +18545 -0
  46. package/components/combobox/demo/readme.html +57 -0
  47. package/components/combobox/demo/readme.md +154 -0
  48. package/components/combobox/dist/auro-combobox.d.ts +434 -0
  49. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  50. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  51. package/components/combobox/dist/index.d.ts +2 -0
  52. package/components/combobox/dist/index.js +16999 -0
  53. package/components/combobox/dist/inputVersion.d.ts +2 -0
  54. package/components/combobox/dist/registered.js +17001 -0
  55. package/components/combobox/dist/styles/emphasized/style-css.d.ts +2 -0
  56. package/components/combobox/dist/styles/snowflake/style-css.d.ts +2 -0
  57. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  58. package/components/counter/README.md +146 -0
  59. package/components/counter/demo/api.html +61 -0
  60. package/components/counter/demo/api.js +20 -0
  61. package/components/counter/demo/api.md +730 -0
  62. package/components/counter/demo/api.min.js +10406 -0
  63. package/components/counter/demo/index.html +61 -0
  64. package/components/counter/demo/index.js +21 -0
  65. package/components/counter/demo/index.md +401 -0
  66. package/components/counter/demo/index.min.js +10370 -0
  67. package/components/counter/demo/readme.html +57 -0
  68. package/components/counter/demo/readme.md +146 -0
  69. package/components/counter/dist/auro-counter-button.d.ts +14 -0
  70. package/components/counter/dist/auro-counter-group.d.ts +386 -0
  71. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  72. package/components/counter/dist/auro-counter.d.ts +113 -0
  73. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  74. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  75. package/components/counter/dist/helptextVersion.d.ts +2 -0
  76. package/components/counter/dist/iconVersion.d.ts +2 -0
  77. package/components/counter/dist/index.d.ts +3 -0
  78. package/components/counter/dist/index.js +10313 -0
  79. package/components/counter/dist/registered.js +10314 -0
  80. package/components/counter/dist/styles/color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  82. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  83. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  84. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  85. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  86. package/components/counter/dist/styles/shapeSize-css.d.ts +2 -0
  87. package/components/counter/dist/styles/style-css.d.ts +2 -0
  88. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  89. package/components/datepicker/README.md +141 -0
  90. package/components/datepicker/demo/api.html +63 -0
  91. package/components/datepicker/demo/api.js +35 -0
  92. package/components/datepicker/demo/api.md +1529 -0
  93. package/components/datepicker/demo/api.min.js +29755 -0
  94. package/components/datepicker/demo/index.html +62 -0
  95. package/components/datepicker/demo/index.js +19 -0
  96. package/components/datepicker/demo/index.md +204 -0
  97. package/components/datepicker/demo/index.min.js +29476 -0
  98. package/components/datepicker/demo/readme.html +57 -0
  99. package/components/datepicker/demo/readme.md +141 -0
  100. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  101. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  102. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  103. package/components/datepicker/dist/auro-datepicker.d.ts +625 -0
  104. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  105. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  106. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  107. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  108. package/components/datepicker/dist/index.d.ts +2 -0
  109. package/components/datepicker/dist/index.js +29406 -0
  110. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  111. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  112. package/components/datepicker/dist/registered.js +29406 -0
  113. package/components/datepicker/dist/styles/classic/color-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  116. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  117. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  118. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  119. package/components/datepicker/dist/styles/shapeSize-css.d.ts +2 -0
  120. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +2 -0
  121. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +2 -0
  122. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  123. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  124. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  125. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  126. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  127. package/components/datepicker/dist/utilities.d.ts +78 -0
  128. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  129. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  130. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  131. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  132. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  133. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  134. package/components/dropdown/README.md +144 -0
  135. package/components/dropdown/demo/api.html +63 -0
  136. package/components/dropdown/demo/api.js +21 -0
  137. package/components/dropdown/demo/api.md +1266 -0
  138. package/components/dropdown/demo/api.min.js +4442 -0
  139. package/components/dropdown/demo/index.html +61 -0
  140. package/components/dropdown/demo/index.js +19 -0
  141. package/components/dropdown/demo/index.md +337 -0
  142. package/components/dropdown/demo/index.min.js +4405 -0
  143. package/components/dropdown/demo/readme.html +57 -0
  144. package/components/dropdown/demo/readme.md +144 -0
  145. package/components/dropdown/dist/auro-dropdown.d.ts +425 -0
  146. package/components/dropdown/dist/auro-dropdownBib.d.ts +68 -0
  147. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  148. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  149. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  150. package/components/dropdown/dist/index.d.ts +2 -0
  151. package/components/dropdown/dist/index.js +4350 -0
  152. package/components/dropdown/dist/registered.js +4350 -0
  153. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +2 -0
  154. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +2 -0
  155. package/components/dropdown/dist/styles/classic/color-css.d.ts +2 -0
  156. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  157. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  158. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  159. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  160. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  161. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  162. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  163. package/components/form/README.md +142 -0
  164. package/components/form/demo/api.html +56 -0
  165. package/components/form/demo/api.js +3 -0
  166. package/components/form/demo/api.md +51 -0
  167. package/components/form/demo/api.min.js +638 -0
  168. package/components/form/demo/autocomplete.html +31 -0
  169. package/components/form/demo/index.html +57 -0
  170. package/components/form/demo/index.js +4 -0
  171. package/components/form/demo/index.md +403 -0
  172. package/components/form/demo/index.min.js +639 -0
  173. package/components/form/demo/readme.html +57 -0
  174. package/components/form/demo/readme.md +142 -0
  175. package/components/form/demo/registerDemoDeps.js +23 -0
  176. package/components/form/demo/working.html +124 -0
  177. package/components/form/dist/auro-form.d.ts +223 -0
  178. package/components/form/dist/index.d.ts +2 -0
  179. package/components/form/dist/index.js +614 -0
  180. package/components/form/dist/registered.d.ts +1 -0
  181. package/components/form/dist/registered.js +614 -0
  182. package/components/form/dist/styles/style-css.d.ts +2 -0
  183. package/components/helptext/dist/auro-helptext.d.ts +59 -0
  184. package/components/helptext/dist/index.d.ts +2 -0
  185. package/components/helptext/dist/index.js +207 -0
  186. package/components/helptext/dist/registered.js +207 -0
  187. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  188. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  189. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  190. package/components/input/README.md +139 -0
  191. package/components/input/demo/api.html +48 -0
  192. package/components/input/demo/api.js +29 -0
  193. package/components/input/demo/api.md +1366 -0
  194. package/components/input/demo/api.min.js +8542 -0
  195. package/components/input/demo/index.html +49 -0
  196. package/components/input/demo/index.js +20 -0
  197. package/components/input/demo/index.md +270 -0
  198. package/components/input/demo/index.min.js +8461 -0
  199. package/components/input/demo/readme.html +57 -0
  200. package/components/input/demo/readme.md +139 -0
  201. package/components/input/dist/auro-input.d.ts +167 -0
  202. package/components/input/dist/base-input.d.ts +566 -0
  203. package/components/input/dist/buttonVersion.d.ts +2 -0
  204. package/components/input/dist/helptextVersion.d.ts +2 -0
  205. package/components/input/dist/i18n.d.ts +18 -0
  206. package/components/input/dist/iconVersion.d.ts +2 -0
  207. package/components/input/dist/index.d.ts +2 -0
  208. package/components/input/dist/index.js +8367 -0
  209. package/components/input/dist/registered.js +8367 -0
  210. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  211. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  212. package/components/input/dist/styles/color-css.d.ts +2 -0
  213. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  214. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  215. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  216. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  217. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  218. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  219. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  220. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  221. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  222. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  223. package/components/input/dist/styles/style-css.d.ts +2 -0
  224. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  225. package/components/input/dist/utilities.d.ts +25 -0
  226. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  227. package/components/layoutElement/dist/index.d.ts +2 -0
  228. package/components/layoutElement/dist/index.js +98 -0
  229. package/components/layoutElement/dist/registered.js +98 -0
  230. package/components/menu/README.md +145 -0
  231. package/components/menu/demo/api.html +62 -0
  232. package/components/menu/demo/api.js +27 -0
  233. package/components/menu/demo/api.md +1011 -0
  234. package/components/menu/demo/api.min.js +1762 -0
  235. package/components/menu/demo/index.html +58 -0
  236. package/components/menu/demo/index.js +28 -0
  237. package/components/menu/demo/index.md +61 -0
  238. package/components/menu/demo/index.min.js +1708 -0
  239. package/components/menu/demo/readme.html +57 -0
  240. package/components/menu/demo/readme.md +145 -0
  241. package/components/menu/dist/auro-menu-utils.d.ts +34 -0
  242. package/components/menu/dist/auro-menu.d.ts +246 -0
  243. package/components/menu/dist/auro-menuoption.d.ts +81 -0
  244. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  245. package/components/menu/dist/iconVersion.d.ts +2 -0
  246. package/components/menu/dist/index.d.ts +4 -0
  247. package/components/menu/dist/index.js +1691 -0
  248. package/components/menu/dist/registered.js +1651 -0
  249. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  250. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  251. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  252. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  253. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  254. package/components/radio/README.md +137 -0
  255. package/components/radio/demo/api.html +59 -0
  256. package/components/radio/demo/api.js +19 -0
  257. package/components/radio/demo/api.md +602 -0
  258. package/components/radio/demo/api.min.js +1951 -0
  259. package/components/radio/demo/index.html +56 -0
  260. package/components/radio/demo/index.js +8 -0
  261. package/components/radio/demo/index.md +150 -0
  262. package/components/radio/demo/index.min.js +1908 -0
  263. package/components/radio/demo/readme.html +57 -0
  264. package/components/radio/demo/readme.md +137 -0
  265. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  266. package/components/radio/dist/auro-radio.d.ts +147 -0
  267. package/components/radio/dist/helptextVersion.d.ts +2 -0
  268. package/components/radio/dist/index.d.ts +3 -0
  269. package/components/radio/dist/index.js +1857 -0
  270. package/components/radio/dist/registered.js +1858 -0
  271. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  272. package/components/radio/dist/styles/color-css.d.ts +2 -0
  273. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  274. package/components/radio/dist/styles/style-css.d.ts +2 -0
  275. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  276. package/components/select/README.md +145 -0
  277. package/components/select/demo/api.html +77 -0
  278. package/components/select/demo/api.js +35 -0
  279. package/components/select/demo/api.md +1413 -0
  280. package/components/select/demo/api.min.js +10502 -0
  281. package/components/select/demo/index.html +73 -0
  282. package/components/select/demo/index.js +9 -0
  283. package/components/select/demo/index.md +1151 -0
  284. package/components/select/demo/index.min.js +10390 -0
  285. package/components/select/demo/readme.html +57 -0
  286. package/components/select/demo/readme.md +145 -0
  287. package/components/select/dist/auro-select.d.ts +512 -0
  288. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  289. package/components/select/dist/dropdownVersion.d.ts +2 -0
  290. package/components/select/dist/helptextVersion.d.ts +2 -0
  291. package/components/select/dist/index.d.ts +2 -0
  292. package/components/select/dist/index.js +8898 -0
  293. package/components/select/dist/registered.js +8898 -0
  294. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  295. package/components/select/dist/styles/style-css.d.ts +2 -0
  296. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  297. package/package.json +218 -0
package/components/datepicker/demo/index.html ADDED
@@ -0,0 +1,62 @@
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
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-datepicker</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="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>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
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
+ <!-- If additional elements are needed for the demo, add them here. -->
53
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
55
+
56
+ <script type="module" data-demo-script="true">
57
+ import { initExamples } from "./index.min.js";
58
+
59
+ initExamples();
60
+ </script>
61
+ </body>
62
+ </html>
package/components/datepicker/demo/index.js ADDED
@@ -0,0 +1,19 @@
1
+ import { AuroDatePicker } from '../src/auro-datepicker.js';
2
+
3
+ AuroDatePicker.register(); // registering to auro-datepicker
4
+ AuroDatePicker.register('custom-datepicker');
5
+
6
+ export function initExamples(initCount) {
7
+ initCount = initCount || 0;
8
+
9
+ try {
10
+ // example();
11
+ } catch {
12
+ if (initCount <= 20) {
13
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
14
+ setTimeout(() => {
15
+ initExamples(initCount + 1);
16
+ }, 100);
17
+ }
18
+ }
19
+ }
package/components/datepicker/demo/index.md ADDED
@@ -0,0 +1,204 @@
1
+ # Datepicker
2
+
3
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
4
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
5
+ 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).
6
+ <!-- AURO-GENERATED-CONTENT:END -->
7
+
8
+ ## auro-datepicker use cases
9
+
10
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
11
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
12
+ The `<auro-datepicker>` element should be used in situations where users may:
13
+
14
+ * select a single date
15
+ * select a pair of dates which identify a calendar range
16
+ <!-- AURO-GENERATED-CONTENT:END -->
17
+
18
+ ## Examples
19
+
20
+ ### Snowflake layout
21
+
22
+ #### Single date
23
+ <div class="exampleWrapper--ondark" style="width: 306px">
24
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark.html) -->
25
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark.html -->
26
+ <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
27
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
28
+ <span slot="label">Date</span>
29
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
30
+ <span slot="fromLabel">Choose a date</span>
31
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
32
+ </auro-datepicker>
33
+ <!-- AURO-GENERATED-CONTENT:END -->
34
+ </div>
35
+ <div class="exampleWrapper--ondark">
36
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark.html) -->
37
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark.html -->
38
+ <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
39
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
40
+ <span slot="label">Date</span>
41
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
42
+ <span slot="fromLabel">Choose a date</span>
43
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
44
+ </auro-datepicker>
45
+ <!-- AURO-GENERATED-CONTENT:END -->
46
+ </div>
47
+ <auro-accordion alignRight>
48
+ <span slot="trigger">See code</span>
49
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/ondark.html) -->
50
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/ondark.html -->
51
+
52
+ ```html
53
+ <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
54
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
55
+ <span slot="label">Date</span>
56
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
57
+ <span slot="fromLabel">Choose a date</span>
58
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
59
+ </auro-datepicker>
60
+ ```
61
+ <!-- AURO-GENERATED-CONTENT:END -->
62
+ </auro-accordion>
63
+
64
+ #### Range
65
+ <div class="exampleWrapper--ondark" style="width: 306px">
66
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
67
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
68
+ <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
69
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
70
+ <span slot="label">Dates</span>
71
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
72
+ <span slot="fromLabel">Choose a date</span>
73
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
74
+ </auro-datepicker>
75
+ <!-- AURO-GENERATED-CONTENT:END -->
76
+ </div>
77
+ <div class="exampleWrapper--ondark">
78
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
79
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
80
+ <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
81
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
82
+ <span slot="label">Dates</span>
83
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
84
+ <span slot="fromLabel">Choose a date</span>
85
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
86
+ </auro-datepicker>
87
+ <!-- AURO-GENERATED-CONTENT:END -->
88
+ </div>
89
+ <auro-accordion alignRight>
90
+ <span slot="trigger">See code</span>
91
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/ondark-range.html) -->
92
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
93
+
94
+ ```html
95
+ <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
96
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
97
+ <span slot="label">Dates</span>
98
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
99
+ <span slot="fromLabel">Choose a date</span>
100
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
101
+ </auro-datepicker>
102
+ ```
103
+ <!-- AURO-GENERATED-CONTENT:END -->
104
+ </auro-accordion>
105
+
106
+ ### Basic
107
+
108
+ <div class="exampleWrapper">
109
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
110
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
111
+ <auro-datepicker required="">
112
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
113
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
114
+ <span slot="fromLabel">Choose a date</span>
115
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
116
+ </auro-datepicker>
117
+ <!-- AURO-GENERATED-CONTENT:END -->
118
+ </div>
119
+ <div class="exampleWrapper--ondark" aria-hidden>
120
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
121
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
122
+ <auro-datepicker onDark>
123
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
124
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
125
+ <span slot="fromLabel">Choose a date</span>
126
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
127
+ </auro-datepicker>
128
+ <!-- AURO-GENERATED-CONTENT:END -->
129
+ </div>
130
+ <auro-accordion alignRight>
131
+ <span slot="trigger">See code</span>
132
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
133
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
134
+
135
+ ```html
136
+ <auro-datepicker required="">
137
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
138
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
139
+ <span slot="fromLabel">Choose a date</span>
140
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
141
+ </auro-datepicker>
142
+ ```
143
+ <!-- AURO-GENERATED-CONTENT:END -->
144
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
145
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
146
+ <auro-datepicker onDark>
147
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
148
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
149
+ <span slot="fromLabel">Choose a date</span>
150
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
151
+ </auro-datepicker>
152
+ <!-- AURO-GENERATED-CONTENT:END -->
153
+ </auro-accordion>
154
+
155
+ ### Range
156
+
157
+ <div class="exampleWrapper">
158
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
159
+ <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
160
+ <auro-datepicker range minDate="07/08/2025">
161
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
162
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
163
+ <span slot="fromLabel">Departure</span>
164
+ <span slot="toLabel">Return</span>
165
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
166
+ </auro-datepicker>
167
+ <!-- AURO-GENERATED-CONTENT:END -->
168
+ </div>
169
+ <div class="exampleWrapper--ondark" aria-hidden>
170
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkRange.html) -->
171
+ <!-- The below content is automatically added from ./../apiExamples/onDarkRange.html -->
172
+ <auro-datepicker onDark range>
173
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
174
+ <span slot="fromLabel">Departure</span>
175
+ <span slot="toLabel">Return</span>
176
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
177
+ </auro-datepicker>
178
+ <!-- AURO-GENERATED-CONTENT:END -->
179
+ </div>
180
+ <auro-accordion alignRight>
181
+ <span slot="trigger">See code</span>
182
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
183
+ <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
184
+
185
+ ```html
186
+ <auro-datepicker range minDate="07/08/2025">
187
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
188
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
189
+ <span slot="fromLabel">Departure</span>
190
+ <span slot="toLabel">Return</span>
191
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
192
+ </auro-datepicker>
193
+ ```
194
+ <!-- AURO-GENERATED-CONTENT:END -->
195
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkRange.html) -->
196
+ <!-- The below content is automatically added from ./../apiExamples/onDarkRange.html -->
197
+ <auro-datepicker onDark range>
198
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
199
+ <span slot="fromLabel">Departure</span>
200
+ <span slot="toLabel">Return</span>
201
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
202
+ </auro-datepicker>
203
+ <!-- AURO-GENERATED-CONTENT:END -->
204
+ </auro-accordion>