@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/select/demo/index.md ADDED
@@ -0,0 +1,815 @@
1
+ <!--
2
+ The demo.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ demo.md is created by running `npm run build:markdownDocs`.
5
+
6
+ This file is generated based on a template fetched from `./docs/partials/demo.md`
7
+ -->
8
+
9
+ # Select
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
+ `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
14
+ <!-- AURO-GENERATED-CONTENT:END -->
15
+
16
+ ## Default example
17
+
18
+ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements. Notice a default `Please select option` placeholder in the trigger.
19
+
20
+ <div class="exampleWrapper">
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
22
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
23
+ <auro-select>
24
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
25
+ <span slot="label">Select Example</span>
26
+ <auro-menu>
27
+ <auro-menuoption value="stops">Stops</auro-menuoption>
28
+ <auro-menuoption value="price">Price</auro-menuoption>
29
+ <auro-menuoption value="duration">Duration</auro-menuoption>
30
+ <auro-menuoption value="departure">Departure</auro-menuoption>
31
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
32
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
33
+ </auro-menu>
34
+ </auro-select>
35
+ <!-- AURO-GENERATED-CONTENT:END -->
36
+ </div>
37
+ <div class="exampleWrapper--ondark" aria-hidden>
38
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
39
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
40
+ <auro-select onDark>
41
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
42
+ <span slot="label">Select Example</span>
43
+ <auro-menu>
44
+ <auro-menuoption value="stops">Stops</auro-menuoption>
45
+ <auro-menuoption value="price">Price</auro-menuoption>
46
+ <auro-menuoption value="duration">Duration</auro-menuoption>
47
+ <auro-menuoption value="departure">Departure</auro-menuoption>
48
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
49
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
50
+ </auro-menu>
51
+ </auro-select>
52
+ <!-- AURO-GENERATED-CONTENT:END -->
53
+ </div>
54
+ <auro-accordion alignRight>
55
+ <span slot="trigger">See code</span>
56
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
57
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
58
+
59
+ ```html
60
+ <auro-select>
61
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
62
+ <span slot="label">Select Example</span>
63
+ <auro-menu>
64
+ <auro-menuoption value="stops">Stops</auro-menuoption>
65
+ <auro-menuoption value="price">Price</auro-menuoption>
66
+ <auro-menuoption value="duration">Duration</auro-menuoption>
67
+ <auro-menuoption value="departure">Departure</auro-menuoption>
68
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
69
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
70
+ </auro-menu>
71
+ </auro-select>
72
+ ```
73
+ <!-- AURO-GENERATED-CONTENT:END -->
74
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
75
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
76
+ <auro-select onDark>
77
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
78
+ <span slot="label">Select Example</span>
79
+ <auro-menu>
80
+ <auro-menuoption value="stops">Stops</auro-menuoption>
81
+ <auro-menuoption value="price">Price</auro-menuoption>
82
+ <auro-menuoption value="duration">Duration</auro-menuoption>
83
+ <auro-menuoption value="departure">Departure</auro-menuoption>
84
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
85
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
86
+ </auro-menu>
87
+ </auro-select>
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+ </auro-accordion>
90
+
91
+ ## placeholder
92
+
93
+ Use the `placeholder` slot to inject a custom placeholder option with the select element.
94
+
95
+ <div class="exampleWrapper">
96
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customPlaceholder.html) -->
97
+ <!-- The below content is automatically added from ./../apiExamples/customPlaceholder.html -->
98
+ <auro-select>
99
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
100
+ <label slot="placeholder">Please select your preferred option</label>
101
+ <auro-menu>
102
+ <auro-menuoption value="stops">Stops</auro-menuoption>
103
+ <auro-menuoption value="price">Price</auro-menuoption>
104
+ <auro-menuoption value="duration">Duration</auro-menuoption>
105
+ <auro-menuoption value="departure">Departure</auro-menuoption>
106
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
107
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
108
+ </auro-menu>
109
+ </auro-select>
110
+ <!-- AURO-GENERATED-CONTENT:END -->
111
+ </div>
112
+ <auro-accordion alignRight>
113
+ <span slot="trigger">See code</span>
114
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customPlaceholder.html) -->
115
+ <!-- The below code snippet is automatically added from ./../apiExamples/customPlaceholder.html -->
116
+
117
+ ```html
118
+ <auro-select>
119
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
120
+ <label slot="placeholder">Please select your preferred option</label>
121
+ <auro-menu>
122
+ <auro-menuoption value="stops">Stops</auro-menuoption>
123
+ <auro-menuoption value="price">Price</auro-menuoption>
124
+ <auro-menuoption value="duration">Duration</auro-menuoption>
125
+ <auro-menuoption value="departure">Departure</auro-menuoption>
126
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
127
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
128
+ </auro-menu>
129
+ </auro-select>
130
+ ```
131
+ <!-- AURO-GENERATED-CONTENT:END -->
132
+ </auro-accordion>
133
+
134
+ ## Label, placeholder and help text slots
135
+
136
+ The following example illustrates the use of the `label`, `placeholder` and `helptext` slots for additional placement of content around the select menu.
137
+
138
+ <div class="exampleWrapper">
139
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots.html) -->
140
+ <!-- The below content is automatically added from ./../apiExamples/slots.html -->
141
+ <auro-select>
142
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
143
+ <label slot="placeholder">Placeholder Text</label>
144
+ <span slot="label">Please choose a preference</span>
145
+ <span slot="helpText">Preferences are maintained for future use</span>
146
+ <auro-menu>
147
+ <auro-menuoption value="stops">Stops</auro-menuoption>
148
+ <auro-menuoption value="price">Price</auro-menuoption>
149
+ <auro-menuoption value="duration">Duration</auro-menuoption>
150
+ <auro-menuoption value="departure">Departure</auro-menuoption>
151
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
152
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
153
+ </auro-menu>
154
+ </auro-select>
155
+ <!-- AURO-GENERATED-CONTENT:END -->
156
+ </div>
157
+ <auro-accordion alignRight>
158
+ <span slot="trigger">See code</span>
159
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slots.html) -->
160
+ <!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->
161
+
162
+ ```html
163
+ <auro-select>
164
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
165
+ <label slot="placeholder">Placeholder Text</label>
166
+ <span slot="label">Please choose a preference</span>
167
+ <span slot="helpText">Preferences are maintained for future use</span>
168
+ <auro-menu>
169
+ <auro-menuoption value="stops">Stops</auro-menuoption>
170
+ <auro-menuoption value="price">Price</auro-menuoption>
171
+ <auro-menuoption value="duration">Duration</auro-menuoption>
172
+ <auro-menuoption value="departure">Departure</auro-menuoption>
173
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
174
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
175
+ </auro-menu>
176
+ </auro-select>
177
+ ```
178
+ <!-- AURO-GENERATED-CONTENT:END -->
179
+ </auro-accordion>
180
+
181
+ ## Autofill/Autocomplete Support
182
+
183
+ Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
184
+
185
+ <div class="exampleWrapper">
186
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
187
+ <!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
188
+ <div class="autofill-example-form">
189
+ <div class="input-row">
190
+ <auro-input autocomplete="given-name">
191
+ <span slot="label">First Name</span>
192
+ <span slot="bib.fullscreen.headline">First Name</span>
193
+ </auro-input>
194
+ <auro-input autocomplete="family-name">
195
+ <span slot="label">Last Name</span>
196
+ <span slot="bib.fullscreen.headline">Last Name</span>
197
+ </auro-input>
198
+ </div>
199
+ <div class="input-row">
200
+ <auro-input autocomplete="address-line1">
201
+ <span slot="label">Street Address</span>
202
+ <span slot="bib.fullscreen.headline">Street Address</span>
203
+ </auro-input>
204
+ <auro-input autocomplete="address-level2">
205
+ <span slot="label">City</span>
206
+ <span slot="bib.fullscreen.headline">City</span>
207
+ </auro-input>
208
+ <auro-select autocomplete="address-level1">
209
+ <span slot="bib.fullscreen.headline">Select Your State</span>
210
+ <span slot="label">Select Your State</span>
211
+ <auro-menu>
212
+ <auro-menuoption value="AL">Alabama</auro-menuoption>
213
+ <auro-menuoption value="AK">Alaska</auro-menuoption>
214
+ <auro-menuoption value="AZ">Arizona</auro-menuoption>
215
+ <auro-menuoption value="AR">Arkansas</auro-menuoption>
216
+ <auro-menuoption value="CA">California</auro-menuoption>
217
+ <auro-menuoption value="CO">Colorado</auro-menuoption>
218
+ <auro-menuoption value="CT">Connecticut</auro-menuoption>
219
+ <auro-menuoption value="DE">Delaware</auro-menuoption>
220
+ <auro-menuoption value="DC">District of Columbia</auro-menuoption>
221
+ <auro-menuoption value="FL">Florida</auro-menuoption>
222
+ <auro-menuoption value="GA">Georgia</auro-menuoption>
223
+ <auro-menuoption value="HI">Hawaii</auro-menuoption>
224
+ <auro-menuoption value="ID">Idaho</auro-menuoption>
225
+ <auro-menuoption value="IL">Illinois</auro-menuoption>
226
+ <auro-menuoption value="IN">Indiana</auro-menuoption>
227
+ <auro-menuoption value="IA">Iowa</auro-menuoption>
228
+ <auro-menuoption value="KS">Kansas</auro-menuoption>
229
+ <auro-menuoption value="KY">Kentucky</auro-menuoption>
230
+ <auro-menuoption value="LA">Louisiana</auro-menuoption>
231
+ <auro-menuoption value="ME">Maine</auro-menuoption>
232
+ <auro-menuoption value="MD">Maryland</auro-menuoption>
233
+ <auro-menuoption value="MA">Massachusetts</auro-menuoption>
234
+ <auro-menuoption value="MI">Michigan</auro-menuoption>
235
+ <auro-menuoption value="MN">Minnesota</auro-menuoption>
236
+ <auro-menuoption value="MS">Mississippi</auro-menuoption>
237
+ <auro-menuoption value="MO">Missouri</auro-menuoption>
238
+ <auro-menuoption value="MT">Montana</auro-menuoption>
239
+ <auro-menuoption value="NE">Nebraska</auro-menuoption>
240
+ <auro-menuoption value="NV">Nevada</auro-menuoption>
241
+ <auro-menuoption value="NH">New Hampshire</auro-menuoption>
242
+ <auro-menuoption value="NJ">New Jersey</auro-menuoption>
243
+ <auro-menuoption value="NM">New Mexico</auro-menuoption>
244
+ <auro-menuoption value="NY">New York</auro-menuoption>
245
+ <auro-menuoption value="NC">North Carolina</auro-menuoption>
246
+ <auro-menuoption value="ND">North Dakota</auro-menuoption>
247
+ <auro-menuoption value="OH">Ohio</auro-menuoption>
248
+ <auro-menuoption value="OK">Oklahoma</auro-menuoption>
249
+ <auro-menuoption value="OR">Oregon</auro-menuoption>
250
+ <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
251
+ <auro-menuoption value="RI">Rhode Island</auro-menuoption>
252
+ <auro-menuoption value="SC">South Carolina</auro-menuoption>
253
+ <auro-menuoption value="SD">South Dakota</auro-menuoption>
254
+ <auro-menuoption value="TN">Tennessee</auro-menuoption>
255
+ <auro-menuoption value="TX">Texas</auro-menuoption>
256
+ <auro-menuoption value="UT">Utah</auro-menuoption>
257
+ <auro-menuoption value="VT">Vermont</auro-menuoption>
258
+ <auro-menuoption value="VA">Virginia</auro-menuoption>
259
+ <auro-menuoption value="WA">Washington</auro-menuoption>
260
+ <auro-menuoption value="WV">West Virginia</auro-menuoption>
261
+ <auro-menuoption value="WI">Wisconsin</auro-menuoption>
262
+ <auro-menuoption value="WY">Wyoming</auro-menuoption>
263
+ </auro-menu>
264
+ </auro-select>
265
+ </div>
266
+ </div>
267
+ <!-- AURO-GENERATED-CONTENT:END -->
268
+ </div>
269
+ <auro-accordion alignRight>
270
+ <span slot="trigger">See code</span>
271
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
272
+ <!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
273
+
274
+ ```html
275
+ <div class="autofill-example-form">
276
+ <div class="input-row">
277
+ <auro-input autocomplete="given-name">
278
+ <span slot="label">First Name</span>
279
+ <span slot="bib.fullscreen.headline">First Name</span>
280
+ </auro-input>
281
+ <auro-input autocomplete="family-name">
282
+ <span slot="label">Last Name</span>
283
+ <span slot="bib.fullscreen.headline">Last Name</span>
284
+ </auro-input>
285
+ </div>
286
+ <div class="input-row">
287
+ <auro-input autocomplete="address-line1">
288
+ <span slot="label">Street Address</span>
289
+ <span slot="bib.fullscreen.headline">Street Address</span>
290
+ </auro-input>
291
+ <auro-input autocomplete="address-level2">
292
+ <span slot="label">City</span>
293
+ <span slot="bib.fullscreen.headline">City</span>
294
+ </auro-input>
295
+ <auro-select autocomplete="address-level1">
296
+ <span slot="bib.fullscreen.headline">Select Your State</span>
297
+ <span slot="label">Select Your State</span>
298
+ <auro-menu>
299
+ <auro-menuoption value="AL">Alabama</auro-menuoption>
300
+ <auro-menuoption value="AK">Alaska</auro-menuoption>
301
+ <auro-menuoption value="AZ">Arizona</auro-menuoption>
302
+ <auro-menuoption value="AR">Arkansas</auro-menuoption>
303
+ <auro-menuoption value="CA">California</auro-menuoption>
304
+ <auro-menuoption value="CO">Colorado</auro-menuoption>
305
+ <auro-menuoption value="CT">Connecticut</auro-menuoption>
306
+ <auro-menuoption value="DE">Delaware</auro-menuoption>
307
+ <auro-menuoption value="DC">District of Columbia</auro-menuoption>
308
+ <auro-menuoption value="FL">Florida</auro-menuoption>
309
+ <auro-menuoption value="GA">Georgia</auro-menuoption>
310
+ <auro-menuoption value="HI">Hawaii</auro-menuoption>
311
+ <auro-menuoption value="ID">Idaho</auro-menuoption>
312
+ <auro-menuoption value="IL">Illinois</auro-menuoption>
313
+ <auro-menuoption value="IN">Indiana</auro-menuoption>
314
+ <auro-menuoption value="IA">Iowa</auro-menuoption>
315
+ <auro-menuoption value="KS">Kansas</auro-menuoption>
316
+ <auro-menuoption value="KY">Kentucky</auro-menuoption>
317
+ <auro-menuoption value="LA">Louisiana</auro-menuoption>
318
+ <auro-menuoption value="ME">Maine</auro-menuoption>
319
+ <auro-menuoption value="MD">Maryland</auro-menuoption>
320
+ <auro-menuoption value="MA">Massachusetts</auro-menuoption>
321
+ <auro-menuoption value="MI">Michigan</auro-menuoption>
322
+ <auro-menuoption value="MN">Minnesota</auro-menuoption>
323
+ <auro-menuoption value="MS">Mississippi</auro-menuoption>
324
+ <auro-menuoption value="MO">Missouri</auro-menuoption>
325
+ <auro-menuoption value="MT">Montana</auro-menuoption>
326
+ <auro-menuoption value="NE">Nebraska</auro-menuoption>
327
+ <auro-menuoption value="NV">Nevada</auro-menuoption>
328
+ <auro-menuoption value="NH">New Hampshire</auro-menuoption>
329
+ <auro-menuoption value="NJ">New Jersey</auro-menuoption>
330
+ <auro-menuoption value="NM">New Mexico</auro-menuoption>
331
+ <auro-menuoption value="NY">New York</auro-menuoption>
332
+ <auro-menuoption value="NC">North Carolina</auro-menuoption>
333
+ <auro-menuoption value="ND">North Dakota</auro-menuoption>
334
+ <auro-menuoption value="OH">Ohio</auro-menuoption>
335
+ <auro-menuoption value="OK">Oklahoma</auro-menuoption>
336
+ <auro-menuoption value="OR">Oregon</auro-menuoption>
337
+ <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
338
+ <auro-menuoption value="RI">Rhode Island</auro-menuoption>
339
+ <auro-menuoption value="SC">South Carolina</auro-menuoption>
340
+ <auro-menuoption value="SD">South Dakota</auro-menuoption>
341
+ <auro-menuoption value="TN">Tennessee</auro-menuoption>
342
+ <auro-menuoption value="TX">Texas</auro-menuoption>
343
+ <auro-menuoption value="UT">Utah</auro-menuoption>
344
+ <auro-menuoption value="VT">Vermont</auro-menuoption>
345
+ <auro-menuoption value="VA">Virginia</auro-menuoption>
346
+ <auro-menuoption value="WA">Washington</auro-menuoption>
347
+ <auro-menuoption value="WV">West Virginia</auro-menuoption>
348
+ <auro-menuoption value="WI">Wisconsin</auro-menuoption>
349
+ <auro-menuoption value="WY">Wyoming</auro-menuoption>
350
+ </auro-menu>
351
+ </auro-select>
352
+ </div>
353
+ </div>
354
+ ```
355
+ <!-- AURO-GENERATED-CONTENT:END -->
356
+ </auro-accordion>
357
+
358
+ ## Example with auro-icons in options
359
+
360
+ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
361
+
362
+ <div class="exampleWrapper">
363
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withIcons.html) -->
364
+ <!-- The below content is automatically added from ./../apiExamples/withIcons.html -->
365
+ <auro-select>
366
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
367
+ <label slot="placeholder">Placeholder Text</label>
368
+ <span slot="label">Select Example</span>
369
+ <auro-menu>
370
+ <auro-menuoption value="air">
371
+ <auro-icon label customColor category="health" name="air">Air</auro-icon>
372
+ </auro-menuoption>
373
+ <auro-menuoption value="covidtest">
374
+ <auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
375
+ </auro-menuoption>
376
+ <auro-menuoption value="health">
377
+ <auro-icon label customColor category="health" name="health">Health</auro-icon>
378
+ </auro-menuoption>
379
+ <auro-menuoption value="mask">
380
+ <auro-icon label customColor category="health" name="mask">Mask</auro-icon>
381
+ </auro-menuoption>
382
+ <auro-menuoption value="spraybottle">
383
+ <auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
384
+ </auro-menuoption>
385
+ </auro-menu>
386
+ </auro-select>
387
+ <!-- AURO-GENERATED-CONTENT:END -->
388
+ </div>
389
+ <auro-accordion alignRight>
390
+ <span slot="trigger">See code</span>
391
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withIcons.html) -->
392
+ <!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->
393
+
394
+ ```html
395
+ <auro-select>
396
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
397
+ <label slot="placeholder">Placeholder Text</label>
398
+ <span slot="label">Select Example</span>
399
+ <auro-menu>
400
+ <auro-menuoption value="air">
401
+ <auro-icon label customColor category="health" name="air">Air</auro-icon>
402
+ </auro-menuoption>
403
+ <auro-menuoption value="covidtest">
404
+ <auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
405
+ </auro-menuoption>
406
+ <auro-menuoption value="health">
407
+ <auro-icon label customColor category="health" name="health">Health</auro-icon>
408
+ </auro-menuoption>
409
+ <auro-menuoption value="mask">
410
+ <auro-icon label customColor category="health" name="mask">Mask</auro-icon>
411
+ </auro-menuoption>
412
+ <auro-menuoption value="spraybottle">
413
+ <auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
414
+ </auro-menuoption>
415
+ </auro-menu>
416
+ </auro-select>
417
+ ```
418
+ <!-- AURO-GENERATED-CONTENT:END -->
419
+ </auro-accordion>
420
+
421
+ ## Example with nested menus
422
+
423
+ This example shows nesting `<auro-menu>` elements to create submenus.
424
+
425
+ <div class="exampleWrapper">
426
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withSubmenus.html) -->
427
+ <!-- The below content is automatically added from ./../apiExamples/withSubmenus.html -->
428
+ <auro-select>
429
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
430
+ <label slot="placeholder">Placeholder Text</label>
431
+ <span slot="label">Select Example</span>
432
+ <auro-menu>
433
+ <auro-menuoption value="stops">Stops</auro-menuoption>
434
+ <auro-menuoption value="price">Price</auro-menuoption>
435
+ <auro-menuoption value="duration">Duration</auro-menuoption>
436
+ <hr>
437
+ <auro-menu>
438
+ <auro-menuoption value="apples">Apples</auro-menuoption>
439
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
440
+ <auro-menuoption value="pears">Pears</auro-menuoption>
441
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
442
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
443
+ <hr>
444
+ <auro-menu>
445
+ <auro-menuoption value="person">Person</auro-menuoption>
446
+ <auro-menuoption value="woman">Woman</auro-menuoption>
447
+ <auro-menuoption value="man">Man</auro-menuoption>
448
+ <auro-menuoption value="camera">Camera</auro-menuoption>
449
+ <auro-menuoption value="tv">TV</auro-menuoption>
450
+ </auro-menu>
451
+ </auro-menu>
452
+ <hr>
453
+ <auro-menuoption value="departure">Departure</auro-menuoption>
454
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
455
+ <hr>
456
+ <auro-menu>
457
+ <auro-menuoption value="cars">Cars</auro-menuoption>
458
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
459
+ <auro-menuoption value="boats">Boats</auro-menuoption>
460
+ <auro-menuoption value="planes">Planes</auro-menuoption>
461
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
462
+ </auro-menu>
463
+ </auro-select>
464
+ <!-- AURO-GENERATED-CONTENT:END -->
465
+ </div>
466
+ <auro-accordion alignRight>
467
+ <span slot="trigger">See code</span>
468
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withSubmenus.html) -->
469
+ <!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->
470
+
471
+ ```html
472
+ <auro-select>
473
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
474
+ <label slot="placeholder">Placeholder Text</label>
475
+ <span slot="label">Select Example</span>
476
+ <auro-menu>
477
+ <auro-menuoption value="stops">Stops</auro-menuoption>
478
+ <auro-menuoption value="price">Price</auro-menuoption>
479
+ <auro-menuoption value="duration">Duration</auro-menuoption>
480
+ <hr>
481
+ <auro-menu>
482
+ <auro-menuoption value="apples">Apples</auro-menuoption>
483
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
484
+ <auro-menuoption value="pears">Pears</auro-menuoption>
485
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
486
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
487
+ <hr>
488
+ <auro-menu>
489
+ <auro-menuoption value="person">Person</auro-menuoption>
490
+ <auro-menuoption value="woman">Woman</auro-menuoption>
491
+ <auro-menuoption value="man">Man</auro-menuoption>
492
+ <auro-menuoption value="camera">Camera</auro-menuoption>
493
+ <auro-menuoption value="tv">TV</auro-menuoption>
494
+ </auro-menu>
495
+ </auro-menu>
496
+ <hr>
497
+ <auro-menuoption value="departure">Departure</auro-menuoption>
498
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
499
+ <hr>
500
+ <auro-menu>
501
+ <auro-menuoption value="cars">Cars</auro-menuoption>
502
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
503
+ <auro-menuoption value="boats">Boats</auro-menuoption>
504
+ <auro-menuoption value="planes">Planes</auro-menuoption>
505
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
506
+ </auro-menu>
507
+ </auro-select>
508
+ ```
509
+ <!-- AURO-GENERATED-CONTENT:END -->
510
+ </auro-accordion>
511
+
512
+ ## Example with no checkmark
513
+
514
+ Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
515
+
516
+ <div class="exampleWrapper">
517
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noCheckmark.html) -->
518
+ <!-- The below content is automatically added from ./../apiExamples/noCheckmark.html -->
519
+ <auro-select nocheckmark>
520
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
521
+ <label slot="placeholder">Placeholder Text</label>
522
+ <span slot="label">nocheckmark Select Example</span>
523
+ <auro-menu>
524
+ <auro-menuoption value="stops">Stops</auro-menuoption>
525
+ <auro-menuoption value="price">Price</auro-menuoption>
526
+ <auro-menuoption value="duration">Duration</auro-menuoption>
527
+ <auro-menuoption value="departure">Departure</auro-menuoption>
528
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
529
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
530
+ </auro-menu>
531
+ </auro-select>
532
+ <!-- AURO-GENERATED-CONTENT:END -->
533
+ </div>
534
+ <auro-accordion alignRight>
535
+ <span slot="trigger">See code</span>
536
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noCheckmark.html) -->
537
+ <!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->
538
+
539
+ ```html
540
+ <auro-select nocheckmark>
541
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
542
+ <label slot="placeholder">Placeholder Text</label>
543
+ <span slot="label">nocheckmark Select Example</span>
544
+ <auro-menu>
545
+ <auro-menuoption value="stops">Stops</auro-menuoption>
546
+ <auro-menuoption value="price">Price</auro-menuoption>
547
+ <auro-menuoption value="duration">Duration</auro-menuoption>
548
+ <auro-menuoption value="departure">Departure</auro-menuoption>
549
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
550
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
551
+ </auro-menu>
552
+ </auro-select>
553
+ ```
554
+ <!-- AURO-GENERATED-CONTENT:END -->
555
+ </auro-accordion>
556
+
557
+ ## Example with custom bib height
558
+
559
+ This example shows how to set a custom height for the bib from `<auro-dropdown>`.
560
+
561
+ Custom height dimensions are set by using the `dropdownSize` CSS Part and then applying a `max-height` rule and value.
562
+
563
+ <div class="exampleWrapper">
564
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customBibHeight.html) -->
565
+ <!-- The below content is automatically added from ../apiExamples/customBibHeight.html -->
566
+ <auro-select id="customBibHeightExample">
567
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
568
+ <label slot="placeholder">Placeholder Text</label>
569
+ <span slot="label">Select Example</span>
570
+ <auro-menu>
571
+ <auro-menuoption value="stops">Stops</auro-menuoption>
572
+ <auro-menuoption value="price">Price</auro-menuoption>
573
+ <auro-menuoption value="duration">Duration</auro-menuoption>
574
+ <auro-menuoption value="departure">Departure</auro-menuoption>
575
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
576
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
577
+ </auro-menu>
578
+ </auro-select>
579
+ <style>
580
+ #customBibHeightExample::part(dropdownSize) {
581
+ max-height: 100px;
582
+ }
583
+ </style>
584
+ <!-- AURO-GENERATED-CONTENT:END -->
585
+ </div>
586
+ <auro-accordion alignRight>
587
+ <span slot="trigger">See code</span>
588
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customBibHeight.html) -->
589
+ <!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->
590
+
591
+ ```html
592
+ <auro-select id="customBibHeightExample">
593
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
594
+ <label slot="placeholder">Placeholder Text</label>
595
+ <span slot="label">Select Example</span>
596
+ <auro-menu>
597
+ <auro-menuoption value="stops">Stops</auro-menuoption>
598
+ <auro-menuoption value="price">Price</auro-menuoption>
599
+ <auro-menuoption value="duration">Duration</auro-menuoption>
600
+ <auro-menuoption value="departure">Departure</auro-menuoption>
601
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
602
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
603
+ </auro-menu>
604
+ </auro-select>
605
+ <style>
606
+ #customBibHeightExample::part(dropdownSize) {
607
+ max-height: 100px;
608
+ }
609
+ </style>
610
+ ```
611
+ <!-- AURO-GENERATED-CONTENT:END -->
612
+ </auro-accordion>
613
+
614
+ ## Example with fullscreen dropdown breakpoint override
615
+
616
+ This example overrides the default dropdown behavior to force a non-fullscreen view on any screen size. `disabled`
617
+ ensures that the dropdown will never be fullscreen.
618
+ Please use `xl` if you want the opposite behavior, where a dropdown is always fullscreen.
619
+
620
+ <div class="exampleWrapper">
621
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
622
+ <!-- The below content is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
623
+ <auro-select fullscreenBreakpoint="disabled">
624
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
625
+ <span slot="label">Select Example</span>
626
+ <auro-menu>
627
+ <auro-menuoption value="stops">Stops</auro-menuoption>
628
+ <auro-menuoption value="price">Price</auro-menuoption>
629
+ <auro-menuoption value="duration">Duration</auro-menuoption>
630
+ <auro-menuoption value="departure">Departure</auro-menuoption>
631
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
632
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
633
+ </auro-menu>
634
+ </auro-select>
635
+ <!-- AURO-GENERATED-CONTENT:END -->
636
+ </div>
637
+ <auro-accordion alignRight>
638
+ <span slot="trigger">See code</span>
639
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
640
+ <!-- The below code snippet is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
641
+
642
+ ```html
643
+ <auro-select fullscreenBreakpoint="disabled">
644
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
645
+ <span slot="label">Select Example</span>
646
+ <auro-menu>
647
+ <auro-menuoption value="stops">Stops</auro-menuoption>
648
+ <auro-menuoption value="price">Price</auro-menuoption>
649
+ <auro-menuoption value="duration">Duration</auro-menuoption>
650
+ <auro-menuoption value="departure">Departure</auro-menuoption>
651
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
652
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
653
+ </auro-menu>
654
+ </auro-select>
655
+ ```
656
+ <!-- AURO-GENERATED-CONTENT:END -->
657
+ </auro-accordion>
658
+
659
+ ## Error State
660
+
661
+ Use the `error` boolean attribute to toggle the error UI.
662
+
663
+ <div class="exampleWrapper">
664
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
665
+ <!-- The below content is automatically added from ./../apiExamples/error.html -->
666
+ <auro-select error="Custom error message">
667
+ <span slot="label">error select example</span>
668
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
669
+ <label slot="placeholder">Placeholder Text</label>
670
+ <auro-menu>
671
+ <auro-menuoption value="stops">Stops</auro-menuoption>
672
+ <auro-menuoption value="price">Price</auro-menuoption>
673
+ <auro-menuoption value="duration">Duration</auro-menuoption>
674
+ <auro-menuoption value="departure">Departure</auro-menuoption>
675
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
676
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
677
+ </auro-menu>
678
+ </auro-select>
679
+ <!-- AURO-GENERATED-CONTENT:END -->
680
+ </div>
681
+ <div class="exampleWrapper--ondark" aria-hidden>
682
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
683
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
684
+ <auro-select onDark error="Custom error message">
685
+ <span slot="label">error select example</span>
686
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
687
+ <label slot="placeholder">Placeholder Text</label>
688
+ <auro-menu>
689
+ <auro-menuoption value="stops">Stops</auro-menuoption>
690
+ <auro-menuoption value="price">Price</auro-menuoption>
691
+ <auro-menuoption value="duration">Duration</auro-menuoption>
692
+ <auro-menuoption value="departure">Departure</auro-menuoption>
693
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
694
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
695
+ </auro-menu>
696
+ </auro-select>
697
+ <!-- AURO-GENERATED-CONTENT:END -->
698
+ </div>
699
+ <auro-accordion alignRight>
700
+ <span slot="trigger">See code</span>
701
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
702
+ <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
703
+
704
+ ```html
705
+ <auro-select error="Custom error message">
706
+ <span slot="label">error select example</span>
707
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
708
+ <label slot="placeholder">Placeholder Text</label>
709
+ <auro-menu>
710
+ <auro-menuoption value="stops">Stops</auro-menuoption>
711
+ <auro-menuoption value="price">Price</auro-menuoption>
712
+ <auro-menuoption value="duration">Duration</auro-menuoption>
713
+ <auro-menuoption value="departure">Departure</auro-menuoption>
714
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
715
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
716
+ </auro-menu>
717
+ </auro-select>
718
+ ```
719
+ <!-- AURO-GENERATED-CONTENT:END -->
720
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
721
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
722
+ <auro-select onDark error="Custom error message">
723
+ <span slot="label">error select example</span>
724
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
725
+ <label slot="placeholder">Placeholder Text</label>
726
+ <auro-menu>
727
+ <auro-menuoption value="stops">Stops</auro-menuoption>
728
+ <auro-menuoption value="price">Price</auro-menuoption>
729
+ <auro-menuoption value="duration">Duration</auro-menuoption>
730
+ <auro-menuoption value="departure">Departure</auro-menuoption>
731
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
732
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
733
+ </auro-menu>
734
+ </auro-select>
735
+ <!-- AURO-GENERATED-CONTENT:END -->
736
+ </auro-accordion>
737
+
738
+ ## Disabled state
739
+
740
+ Use the `disabled` boolean attribute to toggle the disabled UI.
741
+
742
+ <div class="exampleWrapper">
743
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
744
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
745
+ <auro-select disabled>
746
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
747
+ <label slot="placeholder">Placeholder Text</label>
748
+ <span slot="label">disabled select example</span>
749
+ <auro-menu>
750
+ <auro-menuoption value="stops">Stops</auro-menuoption>
751
+ <auro-menuoption value="price">Price</auro-menuoption>
752
+ <auro-menuoption value="duration">Duration</auro-menuoption>
753
+ <auro-menuoption value="departure">Departure</auro-menuoption>
754
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
755
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
756
+ </auro-menu>
757
+ </auro-select>
758
+ <!-- AURO-GENERATED-CONTENT:END -->
759
+ </div>
760
+ <div class="exampleWrapper--ondark" aria-hidden>
761
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
762
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
763
+ <auro-select onDark disabled>
764
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
765
+ <label slot="placeholder">Placeholder Text</label>
766
+ <span slot="label">disabled select example</span>
767
+ <auro-menu>
768
+ <auro-menuoption value="stops">Stops</auro-menuoption>
769
+ <auro-menuoption value="price">Price</auro-menuoption>
770
+ <auro-menuoption value="duration">Duration</auro-menuoption>
771
+ <auro-menuoption value="departure">Departure</auro-menuoption>
772
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
773
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
774
+ </auro-menu>
775
+ </auro-select>
776
+ <!-- AURO-GENERATED-CONTENT:END -->
777
+ </div>
778
+ <auro-accordion alignRight>
779
+ <span slot="trigger">See code</span>
780
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
781
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
782
+
783
+ ```html
784
+ <auro-select disabled>
785
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
786
+ <label slot="placeholder">Placeholder Text</label>
787
+ <span slot="label">disabled select example</span>
788
+ <auro-menu>
789
+ <auro-menuoption value="stops">Stops</auro-menuoption>
790
+ <auro-menuoption value="price">Price</auro-menuoption>
791
+ <auro-menuoption value="duration">Duration</auro-menuoption>
792
+ <auro-menuoption value="departure">Departure</auro-menuoption>
793
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
794
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
795
+ </auro-menu>
796
+ </auro-select>
797
+ ```
798
+ <!-- AURO-GENERATED-CONTENT:END -->
799
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
800
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
801
+ <auro-select onDark disabled>
802
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
803
+ <label slot="placeholder">Placeholder Text</label>
804
+ <span slot="label">disabled select example</span>
805
+ <auro-menu>
806
+ <auro-menuoption value="stops">Stops</auro-menuoption>
807
+ <auro-menuoption value="price">Price</auro-menuoption>
808
+ <auro-menuoption value="duration">Duration</auro-menuoption>
809
+ <auro-menuoption value="departure">Departure</auro-menuoption>
810
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
811
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
812
+ </auro-menu>
813
+ </auro-select>
814
+ <!-- AURO-GENERATED-CONTENT:END -->
815
+ </auro-accordion>