@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.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 (268) 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 +39 -0
  6. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/index.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.js +709 -0
  10. package/components/bibtemplate/dist/registered.js +709 -0
  11. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  12. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  14. package/components/checkbox/README.md +142 -0
  15. package/components/checkbox/demo/api.html +55 -0
  16. package/components/checkbox/demo/api.js +17 -0
  17. package/components/checkbox/demo/api.md +401 -0
  18. package/components/checkbox/demo/api.min.js +1833 -0
  19. package/components/checkbox/demo/index.html +51 -0
  20. package/components/checkbox/demo/index.js +8 -0
  21. package/components/checkbox/demo/index.md +327 -0
  22. package/components/checkbox/demo/index.min.js +1808 -0
  23. package/components/checkbox/demo/readme.html +50 -0
  24. package/components/checkbox/demo/readme.md +142 -0
  25. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  26. package/components/checkbox/dist/auro-checkbox.d.ts +129 -0
  27. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  28. package/components/checkbox/dist/index.d.ts +3 -0
  29. package/components/checkbox/dist/index.js +1757 -0
  30. package/components/checkbox/dist/registered.js +1758 -0
  31. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  36. package/components/combobox/README.md +152 -0
  37. package/components/combobox/demo/api.html +57 -0
  38. package/components/combobox/demo/api.js +36 -0
  39. package/components/combobox/demo/api.md +1209 -0
  40. package/components/combobox/demo/api.min.js +15117 -0
  41. package/components/combobox/demo/index.html +56 -0
  42. package/components/combobox/demo/index.js +26 -0
  43. package/components/combobox/demo/index.md +621 -0
  44. package/components/combobox/demo/index.min.js +14971 -0
  45. package/components/combobox/demo/readme.html +50 -0
  46. package/components/combobox/demo/readme.md +152 -0
  47. package/components/combobox/dist/auro-combobox.d.ts +384 -0
  48. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  49. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  50. package/components/combobox/dist/index.d.ts +2 -0
  51. package/components/combobox/dist/index.js +13554 -0
  52. package/components/combobox/dist/inputVersion.d.ts +2 -0
  53. package/components/combobox/dist/registered.js +13556 -0
  54. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  55. package/components/counter/README.md +146 -0
  56. package/components/counter/demo/api.html +54 -0
  57. package/components/counter/demo/api.js +20 -0
  58. package/components/counter/demo/api.md +584 -0
  59. package/components/counter/demo/api.min.js +7111 -0
  60. package/components/counter/demo/index.html +54 -0
  61. package/components/counter/demo/index.js +21 -0
  62. package/components/counter/demo/index.md +244 -0
  63. package/components/counter/demo/index.min.js +7075 -0
  64. package/components/counter/demo/readme.html +50 -0
  65. package/components/counter/demo/readme.md +146 -0
  66. package/components/counter/dist/auro-counter-button.d.ts +12 -0
  67. package/components/counter/dist/auro-counter-group.d.ts +235 -0
  68. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  69. package/components/counter/dist/auro-counter.d.ts +97 -0
  70. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  71. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  72. package/components/counter/dist/iconVersion.d.ts +2 -0
  73. package/components/counter/dist/index.d.ts +3 -0
  74. package/components/counter/dist/index.js +7018 -0
  75. package/components/counter/dist/registered.js +7019 -0
  76. package/components/counter/dist/styles/color-css.d.ts +2 -0
  77. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  78. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  79. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  80. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  82. package/components/counter/dist/styles/style-css.d.ts +2 -0
  83. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  84. package/components/datepicker/README.md +140 -0
  85. package/components/datepicker/demo/api.html +57 -0
  86. package/components/datepicker/demo/api.js +35 -0
  87. package/components/datepicker/demo/api.md +1479 -0
  88. package/components/datepicker/demo/api.min.js +24534 -0
  89. package/components/datepicker/demo/index.html +56 -0
  90. package/components/datepicker/demo/index.js +19 -0
  91. package/components/datepicker/demo/index.md +112 -0
  92. package/components/datepicker/demo/index.min.js +24255 -0
  93. package/components/datepicker/demo/readme.html +50 -0
  94. package/components/datepicker/demo/readme.md +140 -0
  95. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  96. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  97. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  98. package/components/datepicker/dist/auro-datepicker.d.ts +466 -0
  99. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  100. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  101. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  102. package/components/datepicker/dist/index.d.ts +2 -0
  103. package/components/datepicker/dist/index.js +24185 -0
  104. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  105. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  106. package/components/datepicker/dist/registered.js +24185 -0
  107. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  108. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  109. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  110. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  111. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  112. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  113. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  116. package/components/datepicker/dist/utilities.d.ts +78 -0
  117. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  118. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  119. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  120. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  121. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  122. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  123. package/components/dropdown/README.md +144 -0
  124. package/components/dropdown/demo/api.html +57 -0
  125. package/components/dropdown/demo/api.js +21 -0
  126. package/components/dropdown/demo/api.md +1434 -0
  127. package/components/dropdown/demo/api.min.js +3826 -0
  128. package/components/dropdown/demo/index.html +55 -0
  129. package/components/dropdown/demo/index.js +19 -0
  130. package/components/dropdown/demo/index.md +510 -0
  131. package/components/dropdown/demo/index.min.js +3789 -0
  132. package/components/dropdown/demo/readme.html +50 -0
  133. package/components/dropdown/demo/readme.md +144 -0
  134. package/components/dropdown/dist/auro-dropdown.d.ts +406 -0
  135. package/components/dropdown/dist/auro-dropdownBib.d.ts +46 -0
  136. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  137. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  138. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  139. package/components/dropdown/dist/index.d.ts +2 -0
  140. package/components/dropdown/dist/index.js +3734 -0
  141. package/components/dropdown/dist/registered.js +3734 -0
  142. package/components/dropdown/dist/styles/bibColors-css.d.ts +2 -0
  143. package/components/dropdown/dist/styles/bibStyles-css.d.ts +2 -0
  144. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  145. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  146. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  147. package/components/form/README.md +142 -0
  148. package/components/form/demo/api.html +49 -0
  149. package/components/form/demo/api.js +3 -0
  150. package/components/form/demo/api.md +51 -0
  151. package/components/form/demo/api.min.js +638 -0
  152. package/components/form/demo/autocomplete.html +15 -0
  153. package/components/form/demo/index.html +50 -0
  154. package/components/form/demo/index.js +4 -0
  155. package/components/form/demo/index.md +403 -0
  156. package/components/form/demo/index.min.js +639 -0
  157. package/components/form/demo/readme.html +50 -0
  158. package/components/form/demo/readme.md +142 -0
  159. package/components/form/demo/registerDemoDeps.js +23 -0
  160. package/components/form/demo/working.html +118 -0
  161. package/components/form/dist/auro-form.d.ts +223 -0
  162. package/components/form/dist/index.d.ts +2 -0
  163. package/components/form/dist/index.js +614 -0
  164. package/components/form/dist/registered.d.ts +1 -0
  165. package/components/form/dist/registered.js +614 -0
  166. package/components/form/dist/styles/style-css.d.ts +2 -0
  167. package/components/helptext/dist/auro-helptext.d.ts +61 -0
  168. package/components/helptext/dist/index.d.ts +2 -0
  169. package/components/helptext/dist/index.js +209 -0
  170. package/components/helptext/dist/registered.js +209 -0
  171. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  172. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  173. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  174. package/components/input/README.md +135 -0
  175. package/components/input/demo/api.html +42 -0
  176. package/components/input/demo/api.js +29 -0
  177. package/components/input/demo/api.md +1252 -0
  178. package/components/input/demo/api.min.js +7238 -0
  179. package/components/input/demo/index.html +43 -0
  180. package/components/input/demo/index.js +20 -0
  181. package/components/input/demo/index.md +202 -0
  182. package/components/input/demo/index.min.js +7157 -0
  183. package/components/input/demo/readme.html +50 -0
  184. package/components/input/demo/readme.md +135 -0
  185. package/components/input/dist/auro-input.d.ts +31 -0
  186. package/components/input/dist/base-input.d.ts +512 -0
  187. package/components/input/dist/buttonVersion.d.ts +2 -0
  188. package/components/input/dist/helptextVersion.d.ts +2 -0
  189. package/components/input/dist/i18n.d.ts +18 -0
  190. package/components/input/dist/iconVersion.d.ts +2 -0
  191. package/components/input/dist/index.d.ts +2 -0
  192. package/components/input/dist/index.js +7063 -0
  193. package/components/input/dist/registered.js +7063 -0
  194. package/components/input/dist/styles/borders-css.d.ts +2 -0
  195. package/components/input/dist/styles/color-css.d.ts +2 -0
  196. package/components/input/dist/styles/input-css.d.ts +2 -0
  197. package/components/input/dist/styles/label-css.d.ts +2 -0
  198. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  199. package/components/input/dist/styles/notificationIcons-css.d.ts +2 -0
  200. package/components/input/dist/styles/style-css.d.ts +2 -0
  201. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  202. package/components/input/dist/utilities.d.ts +25 -0
  203. package/components/menu/README.md +145 -0
  204. package/components/menu/demo/api.html +55 -0
  205. package/components/menu/demo/api.js +27 -0
  206. package/components/menu/demo/api.md +954 -0
  207. package/components/menu/demo/api.min.js +1538 -0
  208. package/components/menu/demo/index.html +52 -0
  209. package/components/menu/demo/index.js +28 -0
  210. package/components/menu/demo/index.md +61 -0
  211. package/components/menu/demo/index.min.js +1484 -0
  212. package/components/menu/demo/readme.html +50 -0
  213. package/components/menu/demo/readme.md +145 -0
  214. package/components/menu/dist/auro-menu-utils.d.ts +42 -0
  215. package/components/menu/dist/auro-menu.d.ts +205 -0
  216. package/components/menu/dist/auro-menuoption.d.ts +63 -0
  217. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  218. package/components/menu/dist/iconVersion.d.ts +2 -0
  219. package/components/menu/dist/index.d.ts +4 -0
  220. package/components/menu/dist/index.js +1426 -0
  221. package/components/menu/dist/registered.js +1427 -0
  222. package/components/menu/dist/styles/color-menu-css.d.ts +2 -0
  223. package/components/menu/dist/styles/color-menuoption-css.d.ts +2 -0
  224. package/components/menu/dist/styles/style-menu-css.d.ts +2 -0
  225. package/components/menu/dist/styles/style-menuoption-css.d.ts +2 -0
  226. package/components/menu/dist/styles/tokens-css.d.ts +2 -0
  227. package/components/radio/README.md +137 -0
  228. package/components/radio/demo/api.html +53 -0
  229. package/components/radio/demo/api.js +19 -0
  230. package/components/radio/demo/api.md +562 -0
  231. package/components/radio/demo/api.min.js +1944 -0
  232. package/components/radio/demo/index.html +50 -0
  233. package/components/radio/demo/index.js +8 -0
  234. package/components/radio/demo/index.md +150 -0
  235. package/components/radio/demo/index.min.js +1901 -0
  236. package/components/radio/demo/readme.html +50 -0
  237. package/components/radio/demo/readme.md +137 -0
  238. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  239. package/components/radio/dist/auro-radio.d.ts +144 -0
  240. package/components/radio/dist/helptextVersion.d.ts +2 -0
  241. package/components/radio/dist/index.d.ts +3 -0
  242. package/components/radio/dist/index.js +1850 -0
  243. package/components/radio/dist/registered.js +1851 -0
  244. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  245. package/components/radio/dist/styles/color-css.d.ts +2 -0
  246. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  247. package/components/radio/dist/styles/style-css.d.ts +2 -0
  248. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  249. package/components/select/README.md +144 -0
  250. package/components/select/demo/api.html +71 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1313 -0
  253. package/components/select/demo/api.min.js +7763 -0
  254. package/components/select/demo/index.html +66 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +815 -0
  257. package/components/select/demo/index.min.js +7651 -0
  258. package/components/select/demo/readme.html +50 -0
  259. package/components/select/demo/readme.md +144 -0
  260. package/components/select/dist/auro-select.d.ts +359 -0
  261. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  262. package/components/select/dist/dropdownVersion.d.ts +2 -0
  263. package/components/select/dist/index.d.ts +2 -0
  264. package/components/select/dist/index.js +6300 -0
  265. package/components/select/dist/registered.js +6300 -0
  266. package/components/select/dist/styles/style-css.d.ts +2 -0
  267. package/package.json +217 -0
  268. package/packages/build-tools/src/postinstall.mjs +12 -0
package/components/dropdown/demo/index.html ADDED
@@ -0,0 +1,55 @@
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 Generator | auro-dropdown custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
31
+ <body class="auro-markdown">
32
+ <main></main>
33
+
34
+ <script type="module">
35
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
36
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
37
+ fetch('./index.md')
38
+ .then((response) => response.text())
39
+ .then((text) => {
40
+ const rawHtml = marked.parse(text);
41
+ document.querySelector('main').innerHTML = rawHtml;
42
+ Prism.highlightAll();
43
+ })
44
+ </script>
45
+ <script type="module">
46
+ import { initExamples } from "./index.min.js";
47
+
48
+ initExamples();
49
+ </script>
50
+ <!-- If additional elements are needed for the demo, add them here. -->
51
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
52
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
53
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
54
+ </body>
55
+ </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,510 @@
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
+ ## Common use with auro-label
40
+
41
+ This first common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-label` attribute is used to define a string value that labels an interactive element.
42
+
43
+ <div class="exampleWrapper">
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/common.html) -->
45
+ <!-- The below content is automatically added from ./../apiExamples/common.html -->
46
+ <auro-dropdown id="common" common 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('#common').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
+ <div class="exampleWrapper--ondark" aria-hidden>
64
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommon.html) -->
65
+ <!-- The below content is automatically added from ./../apiExamples/onDarkCommon.html -->
66
+ <auro-dropdown onDark common id="commonOnDark" aria-label="Label content for screen reader">
67
+ <div style="padding: var(--ds-size-150);">
68
+ Lorem ipsum solar
69
+ <br />
70
+ <auro-button onclick="document.querySelector('#commonOnDark').hide()">
71
+ Dismiss Dropdown
72
+ </auro-button>
73
+ </div>
74
+ <span slot="helpText">
75
+ Help text
76
+ </span>
77
+ <div slot="trigger">
78
+ Trigger
79
+ </div>
80
+ </auro-dropdown>
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+ </div>
83
+ <auro-accordion alignRight>
84
+ <span slot="trigger">See code</span>
85
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/common.html) -->
86
+ <!-- The below code snippet is automatically added from ./../apiExamples/common.html -->
87
+
88
+ ```html
89
+ <auro-dropdown id="common" common aria-label="Label content for screen reader">
90
+ <div style="padding: var(--ds-size-150);">
91
+ Lorem ipsum solar
92
+ <br />
93
+ <auro-button onclick="document.querySelector('#common').hide()">
94
+ Dismiss Dropdown
95
+ </auro-button>
96
+ </div>
97
+ <span slot="helpText">
98
+ Help text
99
+ </span>
100
+ <div slot="trigger">
101
+ Trigger
102
+ </div>
103
+ </auro-dropdown>
104
+ ```
105
+ <!-- AURO-GENERATED-CONTENT:END -->
106
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommon.html) -->
107
+ <!-- The below content is automatically added from ./../apiExamples/onDarkCommon.html -->
108
+ <auro-dropdown onDark common id="commonOnDark" aria-label="Label content for screen reader">
109
+ <div style="padding: var(--ds-size-150);">
110
+ Lorem ipsum solar
111
+ <br />
112
+ <auro-button onclick="document.querySelector('#commonOnDark').hide()">
113
+ Dismiss Dropdown
114
+ </auro-button>
115
+ </div>
116
+ <span slot="helpText">
117
+ Help text
118
+ </span>
119
+ <div slot="trigger">
120
+ Trigger
121
+ </div>
122
+ </auro-dropdown>
123
+ <!-- AURO-GENERATED-CONTENT:END -->
124
+ </auro-accordion>
125
+
126
+ ## Common use using the label content slot
127
+
128
+ This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `slot` content container to define a string value that labels the interactive element.
129
+
130
+ <div class="exampleWrapper">
131
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonSlot.html) -->
132
+ <!-- The below content is automatically added from ./../apiExamples/commonSlot.html -->
133
+ <auro-dropdown id="commonSlot" common>
134
+ <div style="padding: var(--ds-size-150);">
135
+ Lorem ipsum solar
136
+ <br />
137
+ <auro-button onclick="document.querySelector('#commonSlot').hide()">
138
+ Dismiss Dropdown
139
+ </auro-button>
140
+ </div>
141
+ <span slot="helpText">
142
+ Help text
143
+ </span>
144
+ <span slot="label">
145
+ Element label (default text will be read by screen reader)
146
+ </span>
147
+ <div slot="trigger">
148
+ Trigger
149
+ </div>
150
+ </auro-dropdown>
151
+ <!-- AURO-GENERATED-CONTENT:END -->
152
+ </div>
153
+ <div class="exampleWrapper--ondark" aria-hidden>
154
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommonSlot.html) -->
155
+ <!-- The below content is automatically added from ./../apiExamples/onDarkCommonSlot.html -->
156
+ <auro-dropdown onDark common id="commonSlotOnDark">
157
+ <div style="padding: var(--ds-size-150);">
158
+ Lorem ipsum solar
159
+ <br />
160
+ <auro-button onclick="document.querySelector('#commonSlotOnDark').hide()">
161
+ Dismiss Dropdown
162
+ </auro-button>
163
+ </div>
164
+ <span slot="helpText">
165
+ Help text
166
+ </span>
167
+ <span slot="label">
168
+ Element label (default text will be read by screen reader)
169
+ </span>
170
+ <div slot="trigger">
171
+ Trigger
172
+ </div>
173
+ </auro-dropdown>
174
+ <!-- AURO-GENERATED-CONTENT:END -->
175
+ </div>
176
+ <auro-accordion alignRight>
177
+ <span slot="trigger">See code</span>
178
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonSlot.html) -->
179
+ <!-- The below code snippet is automatically added from ./../apiExamples/commonSlot.html -->
180
+
181
+ ```html
182
+ <auro-dropdown id="commonSlot" common>
183
+ <div style="padding: var(--ds-size-150);">
184
+ Lorem ipsum solar
185
+ <br />
186
+ <auro-button onclick="document.querySelector('#commonSlot').hide()">
187
+ Dismiss Dropdown
188
+ </auro-button>
189
+ </div>
190
+ <span slot="helpText">
191
+ Help text
192
+ </span>
193
+ <span slot="label">
194
+ Element label (default text will be read by screen reader)
195
+ </span>
196
+ <div slot="trigger">
197
+ Trigger
198
+ </div>
199
+ </auro-dropdown>
200
+ ```
201
+ <!-- AURO-GENERATED-CONTENT:END -->
202
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommonSlot.html) -->
203
+ <!-- The below content is automatically added from ./../apiExamples/onDarkCommonSlot.html -->
204
+ <auro-dropdown onDark common id="commonSlotOnDark">
205
+ <div style="padding: var(--ds-size-150);">
206
+ Lorem ipsum solar
207
+ <br />
208
+ <auro-button onclick="document.querySelector('#commonSlotOnDark').hide()">
209
+ Dismiss Dropdown
210
+ </auro-button>
211
+ </div>
212
+ <span slot="helpText">
213
+ Help text
214
+ </span>
215
+ <span slot="label">
216
+ Element label (default text will be read by screen reader)
217
+ </span>
218
+ <div slot="trigger">
219
+ Trigger
220
+ </div>
221
+ </auro-dropdown>
222
+ <!-- AURO-GENERATED-CONTENT:END -->
223
+ </auro-accordion>
224
+
225
+ ## Common use with popover content wider than the trigger
226
+
227
+ This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the trigger is full width of the containing element and the popover content is set to a width wider than the trigger.
228
+
229
+ <div class="exampleWrapper">
230
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/widerPopover.html) -->
231
+ <!-- The below content is automatically added from ./../apiExamples/widerPopover.html -->
232
+ <div style="width: 250px;">
233
+ <auro-dropdown common aria-label="Label content for screen reader">
234
+ <div style="padding: var(--ds-size-150); width: 500px;">
235
+ This is special content.
236
+ </div>
237
+ <span slot="helpText">
238
+ Help text
239
+ </span>
240
+ <div slot="trigger">
241
+ Trigger
242
+ </div>
243
+ </auro-dropdown>
244
+ </div>
245
+ <!-- AURO-GENERATED-CONTENT:END -->
246
+ </div>
247
+ <auro-accordion alignRight>
248
+ <span slot="trigger">See code</span>
249
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/widerPopover.html) -->
250
+ <!-- The below code snippet is automatically added from ./../apiExamples/widerPopover.html -->
251
+
252
+ ```html
253
+ <div style="width: 250px;">
254
+ <auro-dropdown common aria-label="Label content for screen reader">
255
+ <div style="padding: var(--ds-size-150); width: 500px;">
256
+ This is special content.
257
+ </div>
258
+ <span slot="helpText">
259
+ Help text
260
+ </span>
261
+ <div slot="trigger">
262
+ Trigger
263
+ </div>
264
+ </auro-dropdown>
265
+ </div>
266
+ ```
267
+ <!-- AURO-GENERATED-CONTENT:END -->
268
+ </auro-accordion>
269
+
270
+ ## Common use with popover width matching the trigger
271
+
272
+ This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally `matchWidth` attribute is used to make the popover match the width of the trigger.
273
+
274
+ <div class="exampleWrapper">
275
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonMatchWidth.html) -->
276
+ <!-- The below content is automatically added from ./../apiExamples/commonMatchWidth.html -->
277
+ <auro-dropdown id="common" common fluid matchWidth aria-label="Label content for screen reader">
278
+ <div style="padding: var(--ds-size-150);">
279
+ Lorem ipsum solar
280
+ <br />
281
+ <auro-button onclick="document.querySelector('#common').hide()">
282
+ Dismiss Dropdown
283
+ </auro-button>
284
+ </div>
285
+ <span slot="helpText">
286
+ Help text
287
+ </span>
288
+ <div slot="trigger">
289
+ Trigger
290
+ </div>
291
+ </auro-dropdown>
292
+ <!-- AURO-GENERATED-CONTENT:END -->
293
+ </div>
294
+ <auro-accordion alignRight>
295
+ <span slot="trigger">See code</span>
296
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonMatchWidth.html) -->
297
+ <!-- The below code snippet is automatically added from ./../apiExamples/commonMatchWidth.html -->
298
+
299
+ ```html
300
+ <auro-dropdown id="common" common fluid matchWidth aria-label="Label content for screen reader">
301
+ <div style="padding: var(--ds-size-150);">
302
+ Lorem ipsum solar
303
+ <br />
304
+ <auro-button onclick="document.querySelector('#common').hide()">
305
+ Dismiss Dropdown
306
+ </auro-button>
307
+ </div>
308
+ <span slot="helpText">
309
+ Help text
310
+ </span>
311
+ <div slot="trigger">
312
+ Trigger
313
+ </div>
314
+ </auro-dropdown>
315
+ ```
316
+ <!-- AURO-GENERATED-CONTENT:END -->
317
+ </auro-accordion>
318
+
319
+ ## Common use with its width matching the trigger
320
+
321
+ To make the dropdown to be just big as the trigger's content, style the `auro-dropdown` width `display: inline-block`.
322
+
323
+ <div class="exampleWrapper">
324
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inline.html) -->
325
+ <!-- The below content is automatically added from ./../apiExamples/inline.html -->
326
+ <table style="text-align: center;">
327
+ <thead>
328
+ <tr>
329
+ <td>Icon Only</td>
330
+ <td>Text Only</td>
331
+ <td>Text with Icon</td>
332
+ </tr>
333
+ </thead>
334
+ <tr>
335
+ <td>
336
+ <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
337
+ Icon Only Dropdown
338
+ <div slot="trigger">
339
+ <auro-icon category="interface" name="arrow-down"></auro-icon>
340
+ </div>
341
+ </auro-dropdown>
342
+ </td>
343
+ <td>
344
+ <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
345
+ Text Only Dropdown
346
+ <div slot="trigger">
347
+ Trigger Text
348
+ </div>
349
+ </auro-dropdown>
350
+ </td>
351
+ <td>
352
+ <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
353
+ Icon and Text Dropdown
354
+ <div slot="trigger">
355
+ <div style="white-space:nowrap">
356
+ Trigger Text
357
+ <auro-icon category="interface" name="arrow-down"></auro-icon>
358
+ </div>
359
+ </div>
360
+ </auro-dropdown>
361
+ </td>
362
+ </tr>
363
+ </table>
364
+ <!-- AURO-GENERATED-CONTENT:END -->
365
+ </div>
366
+ <auro-accordion alignRight>
367
+ <span slot="trigger">See code</span>
368
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inline.html) -->
369
+ <!-- The below code snippet is automatically added from ./../apiExamples/inline.html -->
370
+
371
+ ```html
372
+ <table style="text-align: center;">
373
+ <thead>
374
+ <tr>
375
+ <td>Icon Only</td>
376
+ <td>Text Only</td>
377
+ <td>Text with Icon</td>
378
+ </tr>
379
+ </thead>
380
+ <tr>
381
+ <td>
382
+ <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
383
+ Icon Only Dropdown
384
+ <div slot="trigger">
385
+ <auro-icon category="interface" name="arrow-down"></auro-icon>
386
+ </div>
387
+ </auro-dropdown>
388
+ </td>
389
+ <td>
390
+ <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
391
+ Text Only Dropdown
392
+ <div slot="trigger">
393
+ Trigger Text
394
+ </div>
395
+ </auro-dropdown>
396
+ </td>
397
+ <td>
398
+ <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
399
+ Icon and Text Dropdown
400
+ <div slot="trigger">
401
+ <div style="white-space:nowrap">
402
+ Trigger Text
403
+ <auro-icon category="interface" name="arrow-down"></auro-icon>
404
+ </div>
405
+ </div>
406
+ </auro-dropdown>
407
+ </td>
408
+ </tr>
409
+ </table>
410
+ ```
411
+ <!-- AURO-GENERATED-CONTENT:END -->
412
+ </auro-accordion>
413
+
414
+ ## Triggering a fullscreen dropdown
415
+ This example shows how to set a dropdown fullscreen breakpoint attribute. Most consuming components use `sm` by default, but
416
+ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` ensuring that the dropdown will never be fullscreen.
417
+
418
+ <div class="exampleWrapper">
419
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
420
+ <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
421
+ <h3>Never fullscreen</h3>
422
+ <auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
423
+ <div style="padding: var(--ds-size-150);">
424
+ Lorem ipsum solar
425
+ <br />
426
+ <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
427
+ Dismiss Dropdown
428
+ </auro-button>
429
+ </div>
430
+ <span slot="helpText">
431
+ Help text
432
+ </span>
433
+ <div slot="trigger">
434
+ Trigger
435
+ </div>
436
+ </auro-dropdown>
437
+ <h3>Always fullscreen</h3>
438
+ <auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
439
+ <div style="padding: var(--ds-size-150);">
440
+ Lorem ipsum solar
441
+ <br />
442
+ <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
443
+ Dismiss Dropdown
444
+ </auro-button>
445
+ </div>
446
+ <span slot="helpText">
447
+ Help text
448
+ </span>
449
+ <div slot="trigger">
450
+ Trigger
451
+ </div>
452
+ </auro-dropdown>
453
+ <!-- AURO-GENERATED-CONTENT:END -->
454
+ </div>
455
+ <auro-accordion alignRight>
456
+ <span slot="trigger">See code</span>
457
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen.html) -->
458
+ <!-- The below code snippet is automatically added from ./../apiExamples/fullscreen.html -->
459
+
460
+ ```html
461
+ <h3>Never fullscreen</h3>
462
+ <auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
463
+ <div style="padding: var(--ds-size-150);">
464
+ Lorem ipsum solar
465
+ <br />
466
+ <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
467
+ Dismiss Dropdown
468
+ </auro-button>
469
+ </div>
470
+ <span slot="helpText">
471
+ Help text
472
+ </span>
473
+ <div slot="trigger">
474
+ Trigger
475
+ </div>
476
+ </auro-dropdown>
477
+ <h3>Always fullscreen</h3>
478
+ <auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
479
+ <div style="padding: var(--ds-size-150);">
480
+ Lorem ipsum solar
481
+ <br />
482
+ <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
483
+ Dismiss Dropdown
484
+ </auro-button>
485
+ </div>
486
+ <span slot="helpText">
487
+ Help text
488
+ </span>
489
+ <div slot="trigger">
490
+ Trigger
491
+ </div>
492
+ </auro-dropdown>
493
+ ```
494
+ <!-- AURO-GENERATED-CONTENT:END -->
495
+ </auro-accordion>
496
+
497
+ ## Supported standard and accessible interactions
498
+
499
+ The dropdown can be opened with the following actions:
500
+
501
+ 1. Clicking/tapping on the trigger.
502
+ 1. Tabbing to the trigger and using the `enter` or `spacebar` keys.
503
+ 1. Programmatically via another control in the UI calling the `show()` method (see api).
504
+
505
+ The dropdown can be closed with the following actions:
506
+
507
+ 1. Clicking anywhere in the view outside of the dropdown.
508
+ 1. Clicking on the trigger when the `toggle` attribute is used.
509
+ 1. Using the `esc` key.
510
+ 1. Programmatically via another control in the UI calling the `hide()` method (see api).