@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/dropdown/demo/index.html ADDED
@@ -0,0 +1,61 @@
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/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-dropdown</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-dropdown'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@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/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
+ <script type="module">
52
+ import { initExamples } from "./index.min.js";
53
+
54
+ initExamples();
55
+ </script>
56
+ <!-- If additional elements are needed for the demo, add them here. -->
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
59
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
60
+ </body>
61
+ </html>
package/components/dropdown/demo/index.js ADDED
@@ -0,0 +1,19 @@
1
+ /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
2
+ // import { AuroDropdownBib } from '../src/auro-dropdownBib.js';
3
+ import { AuroDropdown } from '../src/auro-dropdown.js';
4
+ AuroDropdown.register();
5
+ AuroDropdown.register('custom-dropdown');
6
+
7
+ export function initExamples(initialCount = 0) {
8
+ try {
9
+ // javascript example function calls to be added here upon creation to test examples
10
+ // auroMenuResetExample();
11
+ } catch (err) {
12
+ if (initialCount <= 20) {
13
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
14
+ setTimeout(() => {
15
+ initExamples(initialCount + 1);
16
+ }, 100);
17
+ }
18
+ }
19
+ }
package/components/dropdown/demo/index.md ADDED
@@ -0,0 +1,337 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ index.md is created by running `npm run build:markdownDocs`.
5
+
6
+ This file is generated based on a template fetched from `./docs/partials/index.md`
7
+ -->
8
+
9
+ # Dropdown
10
+
11
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
12
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
13
+ The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
14
+
15
+ _Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
16
+ <!-- AURO-GENERATED-CONTENT:END -->
17
+
18
+ ## Dropdown use cases
19
+
20
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
21
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
22
+ The `auro-dropdown` element should be used in situations where users may:
23
+
24
+ * interact with an element to get clarification on content offering
25
+ * provide definition to iconic imagery
26
+ * when interactive help is required
27
+ <!-- AURO-GENERATED-CONTENT:END -->
28
+
29
+ ## Accessibility support
30
+
31
+ To meet our accessibility requirement, all uses of `auro-dropdown` should have a valid label. See the following options.
32
+
33
+ 1. Use the `label` content slot
34
+ 1. Use `aria-label` to insert label content that will only be read by screen readers
35
+ 1. Use `aria-labeledby` to append a description from another element on the page
36
+
37
+ Not including one of the above options will result in your UI being non-compliant with Alaska's accessibility policies.
38
+
39
+ ## Layouts
40
+
41
+ ### Classic
42
+
43
+ <div class="exampleWrapper">
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
45
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
46
+ <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
47
+ <div style="padding: var(--ds-size-150);">
48
+ Lorem ipsum solar
49
+ <br />
50
+ <auro-button onclick="document.querySelector('#classic').hide()">
51
+ Dismiss Dropdown
52
+ </auro-button>
53
+ </div>
54
+ <span slot="helpText">
55
+ Help text
56
+ </span>
57
+ <div slot="trigger">
58
+ Trigger
59
+ </div>
60
+ </auro-dropdown>
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/classic/basic.html) -->
66
+ <!-- The below code snippet is automatically added from ./../apiExamples/classic/basic.html -->
67
+
68
+ ```html
69
+ <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
70
+ <div style="padding: var(--ds-size-150);">
71
+ Lorem ipsum solar
72
+ <br />
73
+ <auro-button onclick="document.querySelector('#classic').hide()">
74
+ Dismiss Dropdown
75
+ </auro-button>
76
+ </div>
77
+ <span slot="helpText">
78
+ Help text
79
+ </span>
80
+ <div slot="trigger">
81
+ Trigger
82
+ </div>
83
+ </auro-dropdown>
84
+ ```
85
+ <!-- AURO-GENERATED-CONTENT:END -->
86
+ </auro-accordion>
87
+ <div class="exampleWrapper--ondark">
88
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic-ondark.html) -->
89
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic-ondark.html -->
90
+ <auro-dropdown onDark layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
91
+ <div style="padding: var(--ds-size-150);">
92
+ Lorem ipsum solar
93
+ <br />
94
+ <auro-button onclick="document.querySelector('#classicOnDark').hide()">
95
+ Dismiss Dropdown
96
+ </auro-button>
97
+ </div>
98
+ <span slot="helpText">
99
+ Help text
100
+ </span>
101
+ <div slot="trigger">
102
+ Trigger
103
+ </div>
104
+ </auro-dropdown>
105
+ <!-- AURO-GENERATED-CONTENT:END -->
106
+ </div>
107
+ <auro-accordion alignRight>
108
+ <span slot="trigger">See code</span>
109
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic-ondark.html) -->
110
+ <!-- The below code snippet is automatically added from ./../apiExamples/classic/basic-ondark.html -->
111
+
112
+ ```html
113
+ <auro-dropdown onDark layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
114
+ <div style="padding: var(--ds-size-150);">
115
+ Lorem ipsum solar
116
+ <br />
117
+ <auro-button onclick="document.querySelector('#classicOnDark').hide()">
118
+ Dismiss Dropdown
119
+ </auro-button>
120
+ </div>
121
+ <span slot="helpText">
122
+ Help text
123
+ </span>
124
+ <div slot="trigger">
125
+ Trigger
126
+ </div>
127
+ </auro-dropdown>
128
+ ```
129
+ <!-- AURO-GENERATED-CONTENT:END -->
130
+ </auro-accordion>
131
+
132
+ ### Emphasized
133
+
134
+ Only supports `ondark`.
135
+
136
+ <div class="exampleWrapper--ondark">
137
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
138
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
139
+ <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" ondark>
140
+ Lorem ipsum solar
141
+ <div slot="trigger">
142
+ Trigger
143
+ </div>
144
+ <span slot="helpText">
145
+ Help text - Lorem ipsum solar lorem ipsum solar
146
+ </span>
147
+ </auro-dropdown>
148
+ <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" ondark>
149
+ Lorem ipsum solar
150
+ <div slot="trigger">
151
+ Trigger
152
+ </div>
153
+ <span slot="helpText">
154
+ Help text - Lorem ipsum solar lorem ipsum solar
155
+ </span>
156
+ </auro-dropdown>
157
+ <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" ondark>
158
+ Lorem ipsum solar
159
+ <div slot="trigger">
160
+ Trigger
161
+ </div>
162
+ <span slot="helpText">
163
+ Help text - Lorem ipsum solar lorem ipsum solar
164
+ </span>
165
+ </auro-dropdown>
166
+ <!-- AURO-GENERATED-CONTENT:END -->
167
+ </div>
168
+ <auro-accordion alignRight>
169
+ <span slot="trigger">See code</span>
170
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
171
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
172
+
173
+ ```html
174
+ <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" ondark>
175
+ Lorem ipsum solar
176
+ <div slot="trigger">
177
+ Trigger
178
+ </div>
179
+ <span slot="helpText">
180
+ Help text - Lorem ipsum solar lorem ipsum solar
181
+ </span>
182
+ </auro-dropdown>
183
+ <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" ondark>
184
+ Lorem ipsum solar
185
+ <div slot="trigger">
186
+ Trigger
187
+ </div>
188
+ <span slot="helpText">
189
+ Help text - Lorem ipsum solar lorem ipsum solar
190
+ </span>
191
+ </auro-dropdown>
192
+ <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" ondark>
193
+ Lorem ipsum solar
194
+ <div slot="trigger">
195
+ Trigger
196
+ </div>
197
+ <span slot="helpText">
198
+ Help text - Lorem ipsum solar lorem ipsum solar
199
+ </span>
200
+ </auro-dropdown>
201
+ ```
202
+ <!-- AURO-GENERATED-CONTENT:END -->
203
+ </auro-accordion>
204
+
205
+ ### Snowflake
206
+
207
+ Only supports `ondark`.
208
+
209
+ <div class="exampleWrapper--ondark">
210
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
211
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
212
+ <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" ondark>
213
+ Lorem ipsum solar
214
+ <div slot="trigger">
215
+ Trigger
216
+ </div>
217
+ <span slot="helpText">
218
+ Help text - Lorem ipsum solar lorem ipsum solar
219
+ </span>
220
+ </auro-dropdown>
221
+ <!-- AURO-GENERATED-CONTENT:END -->
222
+ </div>
223
+ <auro-accordion alignRight>
224
+ <span slot="trigger">See code</span>
225
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
226
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
227
+
228
+ ```html
229
+ <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" ondark>
230
+ Lorem ipsum solar
231
+ <div slot="trigger">
232
+ Trigger
233
+ </div>
234
+ <span slot="helpText">
235
+ Help text - Lorem ipsum solar lorem ipsum solar
236
+ </span>
237
+ </auro-dropdown>
238
+ ```
239
+ <!-- AURO-GENERATED-CONTENT:END -->
240
+ </auro-accordion>
241
+
242
+ ## Triggering a fullscreen dropdown
243
+ This example shows how to set a dropdown fullscreen breakpoint attribute. Most consuming components use `sm` by default, but
244
+ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` ensuring that the dropdown will never be fullscreen.
245
+
246
+ <div class="exampleWrapper">
247
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
248
+ <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
249
+ <h3>Never fullscreen</h3>
250
+ <auro-dropdown id="common-never-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
251
+ <div style="padding: var(--ds-size-150);">
252
+ Lorem ipsum solar
253
+ <br />
254
+ <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
255
+ Dismiss Dropdown
256
+ </auro-button>
257
+ </div>
258
+ <span slot="helpText">
259
+ Help text
260
+ </span>
261
+ <div slot="trigger">
262
+ Trigger
263
+ </div>
264
+ </auro-dropdown>
265
+ <h3>Always fullscreen</h3>
266
+ <auro-dropdown id="common-always-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
267
+ <div style="padding: var(--ds-size-150);">
268
+ Lorem ipsum solar
269
+ <br />
270
+ <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
271
+ Dismiss Dropdown
272
+ </auro-button>
273
+ </div>
274
+ <span slot="helpText">
275
+ Help text
276
+ </span>
277
+ <div slot="trigger">
278
+ Trigger
279
+ </div>
280
+ </auro-dropdown>
281
+ <!-- AURO-GENERATED-CONTENT:END -->
282
+ </div>
283
+ <auro-accordion alignRight>
284
+ <span slot="trigger">See code</span>
285
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen.html) -->
286
+ <!-- The below code snippet is automatically added from ./../apiExamples/fullscreen.html -->
287
+
288
+ ```html
289
+ <h3>Never fullscreen</h3>
290
+ <auro-dropdown id="common-never-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
291
+ <div style="padding: var(--ds-size-150);">
292
+ Lorem ipsum solar
293
+ <br />
294
+ <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
295
+ Dismiss Dropdown
296
+ </auro-button>
297
+ </div>
298
+ <span slot="helpText">
299
+ Help text
300
+ </span>
301
+ <div slot="trigger">
302
+ Trigger
303
+ </div>
304
+ </auro-dropdown>
305
+ <h3>Always fullscreen</h3>
306
+ <auro-dropdown id="common-always-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
307
+ <div style="padding: var(--ds-size-150);">
308
+ Lorem ipsum solar
309
+ <br />
310
+ <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
311
+ Dismiss Dropdown
312
+ </auro-button>
313
+ </div>
314
+ <span slot="helpText">
315
+ Help text
316
+ </span>
317
+ <div slot="trigger">
318
+ Trigger
319
+ </div>
320
+ </auro-dropdown>
321
+ ```
322
+ <!-- AURO-GENERATED-CONTENT:END -->
323
+ </auro-accordion>
324
+
325
+ ## Supported standard and accessible interactions
326
+
327
+ The dropdown can be opened with the following actions:
328
+
329
+ 1. Clicking/tapping on the trigger.
330
+ 1. Tabbing to the trigger and using the `enter` or `spacebar` keys.
331
+ 1. Programmatically via another control in the UI calling the `show()` method (see api).
332
+
333
+ The dropdown can be closed with the following actions:
334
+
335
+ 1. Clicking anywhere in the view outside of the dropdown.
336
+ 1. Using the `esc` key.
337
+ 1. Programmatically via another control in the UI calling the `hide()` method (see api).