@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/readme.html ADDED
@@ -0,0 +1,50 @@
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
+ </head>
30
+ <body class="auro-markdown">
31
+ <main></main>
32
+
33
+ <script type="module">
34
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
35
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
36
+ fetch('./readme.md')
37
+ .then((response) => response.text())
38
+ .then((text) => {
39
+ const rawHtml = marked.parse(text);
40
+ document.querySelector('main').innerHTML = rawHtml;
41
+ Prism.highlightAll();
42
+ })
43
+ </script>
44
+ <script type="module">
45
+ import { initExamples } from "./index.min.js";
46
+
47
+ initExamples();
48
+ </script>
49
+ </body>
50
+ </html>
package/components/dropdown/demo/readme.md ADDED
@@ -0,0 +1,144 @@
1
+ <!--
2
+ The README.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ README.md is created by running `npm run build:docs`.
5
+
6
+ This file is generated based on a template fetched from
7
+ `../../docs/templates/componentReadmeTemplate.md`
8
+ and copied to `./componentDocs/README.md` each time the docs are compiled.
9
+
10
+ The following sections are editable by making changes to the following files:
11
+
12
+ | SECTION | DESCRIPTION | FILE LOCATION |
13
+ |------------------------|---------------------------------------------------|-------------------------------------|
14
+ | Description | Description of the component | `./docs/partials/description.md` |
15
+ | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
16
+ | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
17
+ | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18
+ -->
19
+
20
+ # Dropdown
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
23
+ 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.
24
+
25
+ _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._
26
+ <!-- AURO-GENERATED-CONTENT:END -->
27
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
28
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
29
+ <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
30
+ <!-- AURO-GENERATED-CONTENT:END -->
31
+
32
+ ## Getting Started
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
34
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
35
+
36
+ #### NPM Installation
37
+
38
+ ```shell
39
+ $ npm i @aurodesignsystem/auro-formkit
40
+ ```
41
+ <!-- AURO-GENERATED-CONTENT:END -->
42
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
43
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
44
+
45
+ ### Import Options
46
+
47
+ #### Automatic Registration
48
+
49
+ For automatic registration, simply import the component:
50
+
51
+ ```javascript
52
+ // Registers <auro-dropdown> automatically
53
+ import '@aurodesignsystem/auro-formkit/auro-dropdown';
54
+ ```
55
+
56
+ #### Custom Registration
57
+
58
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroDropdown.register('custom-dropdown')` method on the component class and pass in a unique name.
59
+
60
+ ```javascript
61
+ // Import the class only
62
+ import { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
63
+
64
+ // Register with a custom name if desired
65
+ AuroDropdown.register('custom-dropdown');
66
+ ```
67
+
68
+ #### TypeScript Module Resolution
69
+
70
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
71
+
72
+ ```json
73
+ {
74
+ "compilerOptions": {
75
+ "moduleResolution": "bundler"
76
+ }
77
+ }
78
+ ```
79
+
80
+ This configuration enables proper module resolution for the component's TypeScript files.
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+ **Reference component in HTML**
83
+
84
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
85
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
86
+
87
+ ```html
88
+ <auro-dropdown aria-label="custom label">
89
+ Lorem ipsum solar
90
+ <div slot="trigger">
91
+ Trigger
92
+ </div>
93
+ </auro-dropdown>
94
+ ```
95
+ <!-- AURO-GENERATED-CONTENT:END -->
96
+
97
+ ### Design Token CSS Custom Property dependency
98
+
99
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
100
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
101
+
102
+ <!-- AURO-GENERATED-CONTENT:END -->
103
+
104
+ ## Install from CDN
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
106
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
107
+ In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
108
+
109
+ ```html
110
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-dropdown/+esm"></script>
111
+ ```
112
+ <!-- AURO-GENERATED-CONTENT:END -->
113
+
114
+ ## UI development browser support
115
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
116
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
117
+
118
+ <!-- AURO-GENERATED-CONTENT:END -->
119
+
120
+ ## auro-dropdown use cases
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
122
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
123
+ The `auro-dropdown` element should be used in situations where users may:
124
+
125
+ * interact with an element to get clarification on content offering
126
+ * provide definition to iconic imagery
127
+ * when interactive help is required
128
+ <!-- AURO-GENERATED-CONTENT:END -->
129
+
130
+ ## Formkit development
131
+
132
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
133
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
134
+
135
+ ### Filtering
136
+
137
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
138
+
139
+ To only develop a single component, use the `--filter` flag:
140
+
141
+ ```shell
142
+ npx turbo dev --filter=@aurodesignsystem/auro-input
143
+ ```
144
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/dropdown/dist/auro-dropdown.d.ts ADDED
@@ -0,0 +1,406 @@
1
+ /**
2
+ * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
3
+ * @slot - Default slot for the popover content.
4
+ * @slot label - Defines the content of the label.
5
+ * @slot helpText - Defines the content of the helpText.
6
+ * @slot trigger - Defines the content of the trigger.
7
+ * @csspart trigger - The trigger content container.
8
+ * @csspart chevron - The collapsed/expanded state icon container.
9
+ * @csspart helpText - The helpText content container.
10
+ * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
11
+ * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
12
+ * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
13
+ */
14
+ export class AuroDropdown extends LitElement {
15
+ static get properties(): {
16
+ /**
17
+ * If declared, bib's position will be automatically calculated where to appear.
18
+ * @default false
19
+ */
20
+ autoPlacement: {
21
+ type: BooleanConstructor;
22
+ reflect: boolean;
23
+ };
24
+ /**
25
+ * If declared, applies a border around the trigger slot.
26
+ */
27
+ bordered: {
28
+ type: BooleanConstructor;
29
+ reflect: boolean;
30
+ };
31
+ /**
32
+ * If declared, the dropdown displays a chevron on the right.
33
+ * @attr {Boolean} chevron
34
+ */
35
+ chevron: {
36
+ type: BooleanConstructor;
37
+ reflect: boolean;
38
+ };
39
+ /**
40
+ * If declared, the dropdown will be styled with the common theme.
41
+ */
42
+ common: {
43
+ type: BooleanConstructor;
44
+ reflect: boolean;
45
+ };
46
+ /**
47
+ * If declared, the dropdown is not interactive.
48
+ */
49
+ disabled: {
50
+ type: BooleanConstructor;
51
+ reflect: boolean;
52
+ };
53
+ /**
54
+ * @private
55
+ */
56
+ dropdownWidth: {
57
+ type: NumberConstructor;
58
+ };
59
+ /**
60
+ * The unique ID for the dropdown bib element.
61
+ * @private
62
+ */
63
+ dropdownId: {
64
+ type: StringConstructor;
65
+ reflect: boolean;
66
+ attribute: boolean;
67
+ };
68
+ /**
69
+ * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
70
+ */
71
+ error: {
72
+ type: BooleanConstructor;
73
+ reflect: boolean;
74
+ };
75
+ /**
76
+ * If declared, the bib will display when focus is applied to the trigger.
77
+ */
78
+ focusShow: {
79
+ type: BooleanConstructor;
80
+ reflect: boolean;
81
+ };
82
+ /**
83
+ * Makes the trigger to be full width of its parent container.
84
+ */
85
+ fluid: {
86
+ type: BooleanConstructor;
87
+ reflect: boolean;
88
+ };
89
+ /**
90
+ * If declared, will apply padding around trigger slot content.
91
+ */
92
+ inset: {
93
+ type: BooleanConstructor;
94
+ reflect: boolean;
95
+ };
96
+ /**
97
+ * If true, the dropdown bib is displayed.
98
+ */
99
+ isPopoverVisible: {
100
+ type: BooleanConstructor;
101
+ };
102
+ /**
103
+ * If true, the dropdown bib is taking the fullscreen when it's open.
104
+ */
105
+ isBibFullscreen: {
106
+ type: BooleanConstructor;
107
+ reflect: boolean;
108
+ };
109
+ /**
110
+ * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
111
+ */
112
+ hoverToggle: {
113
+ type: BooleanConstructor;
114
+ reflect: boolean;
115
+ };
116
+ /**
117
+ * @private
118
+ */
119
+ hasTriggerContent: {
120
+ type: BooleanConstructor;
121
+ };
122
+ /**
123
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
124
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
125
+ *
126
+ * When expanded, the dropdown will automatically display in fullscreen mode
127
+ * if the screen size is equal to or smaller than the selected breakpoint.
128
+ * @default sm
129
+ */
130
+ fullscreenBreakpoint: {
131
+ type: StringConstructor;
132
+ reflect: boolean;
133
+ };
134
+ /**
135
+ * Defines if there is a label preset.
136
+ * @private
137
+ */
138
+ labeled: {
139
+ type: BooleanConstructor;
140
+ reflect: boolean;
141
+ };
142
+ /**
143
+ * If declared, the popover and trigger will be set to the same width.
144
+ */
145
+ matchWidth: {
146
+ type: BooleanConstructor;
147
+ reflect: boolean;
148
+ };
149
+ /**
150
+ * If declared, the bib will NOT flip to an alternate position
151
+ * when there isn't enough space in the specified `placement`.
152
+ * @default false
153
+ */
154
+ noFlip: {
155
+ type: BooleanConstructor;
156
+ reflect: boolean;
157
+ };
158
+ /**
159
+ * If declared, the dropdown will not hide when moving focus outside the element.
160
+ */
161
+ noHideOnThisFocusLoss: {
162
+ type: BooleanConstructor;
163
+ reflect: boolean;
164
+ };
165
+ /**
166
+ * If declared, the trigger will only show the dropdown bib.
167
+ */
168
+ noToggle: {
169
+ type: BooleanConstructor;
170
+ reflect: boolean;
171
+ };
172
+ /**
173
+ * Gap between the trigger element and bib.
174
+ * @default 0
175
+ */
176
+ offset: {
177
+ type: NumberConstructor;
178
+ reflect: boolean;
179
+ };
180
+ /**
181
+ * If declared, onDark styles will be applied.
182
+ */
183
+ onDark: {
184
+ type: BooleanConstructor;
185
+ reflect: boolean;
186
+ };
187
+ onSlotChange: {
188
+ type: FunctionConstructor;
189
+ reflect: boolean;
190
+ };
191
+ /**
192
+ * Position where the bib should appear relative to the trigger.
193
+ * Accepted values:
194
+ * "top" | "right" | "bottom" | "left" |
195
+ * "bottom-start" | "top-start" | "top-end" |
196
+ * "right-start" | "right-end" | "bottom-end" |
197
+ * "left-start" | "left-end"
198
+ * @default bottom-start
199
+ */
200
+ placement: {
201
+ type: StringConstructor;
202
+ reflect: boolean;
203
+ };
204
+ /**
205
+ * If declared, will apply border-radius to trigger and default slots.
206
+ */
207
+ rounded: {
208
+ type: BooleanConstructor;
209
+ reflect: boolean;
210
+ };
211
+ /**
212
+ * @private
213
+ */
214
+ tabIndex: {
215
+ type: NumberConstructor;
216
+ };
217
+ /**
218
+ * The value for the role attribute of the trigger element.
219
+ */
220
+ a11yRole: {
221
+ type: StringConstructor;
222
+ attribute: boolean;
223
+ reflect: boolean;
224
+ };
225
+ /**
226
+ * The value for the aria-autocomplete attribute of the trigger element.
227
+ */
228
+ a11yAutocomplete: {
229
+ type: StringConstructor;
230
+ attribute: boolean;
231
+ };
232
+ };
233
+ static get styles(): import("lit").CSSResult[];
234
+ /**
235
+ * This will register this element with the browser.
236
+ * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
237
+ *
238
+ * @example
239
+ * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
240
+ *
241
+ */
242
+ static register(name?: string): void;
243
+ isPopoverVisible: boolean;
244
+ isBibFullscreen: boolean;
245
+ matchWidth: boolean;
246
+ noHideOnThisFocusLoss: boolean;
247
+ /**
248
+ * @private
249
+ */
250
+ private triggerContentFocusable;
251
+ /**
252
+ * @private
253
+ */
254
+ private showTriggerBorders;
255
+ /**
256
+ * @private
257
+ * @returns {void} Internal defaults.
258
+ */
259
+ private privateDefaults;
260
+ bordered: boolean;
261
+ chevron: boolean;
262
+ disabled: boolean;
263
+ error: boolean;
264
+ inset: boolean;
265
+ rounded: boolean;
266
+ noToggle: boolean;
267
+ a11yAutocomplete: string;
268
+ labeled: boolean;
269
+ a11yRole: string;
270
+ onDark: boolean;
271
+ placement: string;
272
+ offset: number;
273
+ noFlip: boolean;
274
+ autoPlacement: boolean;
275
+ /**
276
+ * @private
277
+ */
278
+ private hasTriggerContent;
279
+ /**
280
+ * @private
281
+ */
282
+ private triggerContentSlot;
283
+ /**
284
+ * @private
285
+ */
286
+ private runtimeUtils;
287
+ /**
288
+ * @private
289
+ */
290
+ private floater;
291
+ /**
292
+ * @private
293
+ */
294
+ private iconTag;
295
+ /**
296
+ * @private
297
+ */
298
+ private dropdownBibTag;
299
+ /**
300
+ * @private
301
+ */
302
+ private helpTextTag;
303
+ /**
304
+ * @private
305
+ * Creates and dispatches a duplicate focus event on the trigger element.
306
+ * @param {Event} event - The original focus event.
307
+ */
308
+ private bindFocusEventToTrigger;
309
+ /**
310
+ * @ignore
311
+ */
312
+ get floaterConfig(): {
313
+ placement: string;
314
+ flip: boolean;
315
+ autoPlacement: boolean;
316
+ offset: number;
317
+ };
318
+ /**
319
+ * Public method to hide the dropdown.
320
+ * @returns {void}
321
+ */
322
+ hide(): void;
323
+ /**
324
+ * Public method to show the dropdown.
325
+ * @returns {void}
326
+ */
327
+ show(): void;
328
+ /**
329
+ * Accessor for reusing the focusable entity query string.
330
+ * @private
331
+ * @returns {string}
332
+ */
333
+ private get focusableEntityQuery();
334
+ updated(changedProperties: any): void;
335
+ firstUpdated(): void;
336
+ dropdownId: any;
337
+ bibContent: any;
338
+ /**
339
+ * Exposes CSS parts for styling from parent components.
340
+ * @returns {void}
341
+ */
342
+ exposeCssParts(): void;
343
+ /**
344
+ * Determines if content is within a custom slot.
345
+ * @private
346
+ * @param {HTMLElement} element - The element to check.
347
+ * @returns {Boolean}
348
+ */
349
+ private isCustomSlotContent;
350
+ /**
351
+ * Determines if the element or any children are focusable.
352
+ * @private
353
+ * @param {HTMLElement} element - Element to check.
354
+ * @returns {Boolean} - True if the element or any children are focusable.
355
+ */
356
+ private containsFocusableElement;
357
+ /**
358
+ * @private
359
+ * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
360
+ * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
361
+ */
362
+ private setupTriggerFocusEventBinding;
363
+ /**
364
+ * Clears focus and blur event listeners from nested Auro components within the trigger slot.
365
+ * @private
366
+ * @returns {void}
367
+ */
368
+ private clearTriggerFocusEventBinding;
369
+ clearTriggerA11yAttributes(triggerElement: any): void;
370
+ /**
371
+ * Handles changes to the trigger content slot and updates related properties.
372
+ *
373
+ * It first updates the floater settings
374
+ * Then, it retrieves the assigned nodes from the event target and checks if any of
375
+ * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
376
+ *
377
+ * @private
378
+ * @method handleTriggerContentSlotChange
379
+ * @param {Event} event - Native slotchange event.
380
+ * @returns {void}
381
+ */
382
+ private handleTriggerContentSlotChange;
383
+ triggerNode: EventTarget;
384
+ /**
385
+ * Handles the default slot change event and updates the content.
386
+ *
387
+ * This method retrieves all nodes assigned to the default slot of the event target and appends them
388
+ * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
389
+ * notify about the slot change.
390
+ *
391
+ * @private
392
+ * @method handleDefaultSlot
393
+ * @param {Event} event - The event object representing the slot change.
394
+ * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
395
+ */
396
+ private handleDefaultSlot;
397
+ /**
398
+ * @private
399
+ * @method handleLabelSlotChange
400
+ * @param {event} event - The event object representing the slot change.
401
+ * @description Handles the slot change event for the label slot.
402
+ */
403
+ private handleLabelSlotChange;
404
+ render(): import("lit-html").TemplateResult;
405
+ }
406
+ import { LitElement } from "lit";
package/components/dropdown/dist/auro-dropdownBib.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ /**
2
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
3
+ * @csspart bibContainer - Apply css to the bib container.
4
+ */
5
+ export class AuroDropdownBib extends LitElement {
6
+ static get styles(): import("lit").CSSResult[];
7
+ static get properties(): {
8
+ /**
9
+ * If declared, will take the fullscreen when the bib is displayed.
10
+ */
11
+ isFullscreen: {
12
+ type: BooleanConstructor;
13
+ reflect: boolean;
14
+ };
15
+ /**
16
+ * If declared, will apply all styles for the common theme.
17
+ */
18
+ common: {
19
+ type: BooleanConstructor;
20
+ reflect: boolean;
21
+ };
22
+ /**
23
+ * If declared, will apply extra padding to bib content.
24
+ */
25
+ inset: {
26
+ type: BooleanConstructor;
27
+ reflect: boolean;
28
+ };
29
+ /**
30
+ * If declared, will apply border-radius to the bib.
31
+ */
32
+ rounded: {
33
+ type: BooleanConstructor;
34
+ reflect: boolean;
35
+ };
36
+ };
37
+ /**
38
+ * @private
39
+ */
40
+ private _mobileBreakpointValue;
41
+ set mobileFullscreenBreakpoint(value: string);
42
+ get mobileFullscreenBreakpoint(): string;
43
+ updated(changedProperties: any): void;
44
+ render(): import("lit-html").TemplateResult;
45
+ }
46
+ import { LitElement } from "lit";
package/components/dropdown/dist/dropdownVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "3.0.0";
2
+ export default _default;
package/components/dropdown/dist/helptextVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;
package/components/dropdown/dist/iconVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "6.1.2";
2
+ export default _default;
package/components/dropdown/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { AuroDropdown };
2
+ import { AuroDropdown } from './auro-dropdown.js';