@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.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 +56 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1135 -0
  253. package/components/select/demo/api.min.js +7695 -0
  254. package/components/select/demo/index.html +51 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +638 -0
  257. package/components/select/demo/index.min.js +7583 -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 +332 -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 +6219 -0
  265. package/components/select/dist/registered.js +6219 -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,638 @@
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
+ ## Example with auro-icons in options
182
+
183
+ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
184
+
185
+ <div class="exampleWrapper">
186
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withIcons.html) -->
187
+ <!-- The below content is automatically added from ./../apiExamples/withIcons.html -->
188
+ <auro-select>
189
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
190
+ <label slot="placeholder">Placeholder Text</label>
191
+ <span slot="label">Select Example</span>
192
+ <auro-menu>
193
+ <auro-menuoption value="air">
194
+ <auro-icon label customColor category="health" name="air">Air</auro-icon>
195
+ </auro-menuoption>
196
+ <auro-menuoption value="covidtest">
197
+ <auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
198
+ </auro-menuoption>
199
+ <auro-menuoption value="health">
200
+ <auro-icon label customColor category="health" name="health">Health</auro-icon>
201
+ </auro-menuoption>
202
+ <auro-menuoption value="mask">
203
+ <auro-icon label customColor category="health" name="mask">Mask</auro-icon>
204
+ </auro-menuoption>
205
+ <auro-menuoption value="spraybottle">
206
+ <auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
207
+ </auro-menuoption>
208
+ </auro-menu>
209
+ </auro-select>
210
+ <!-- AURO-GENERATED-CONTENT:END -->
211
+ </div>
212
+ <auro-accordion alignRight>
213
+ <span slot="trigger">See code</span>
214
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withIcons.html) -->
215
+ <!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->
216
+
217
+ ```html
218
+ <auro-select>
219
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
220
+ <label slot="placeholder">Placeholder Text</label>
221
+ <span slot="label">Select Example</span>
222
+ <auro-menu>
223
+ <auro-menuoption value="air">
224
+ <auro-icon label customColor category="health" name="air">Air</auro-icon>
225
+ </auro-menuoption>
226
+ <auro-menuoption value="covidtest">
227
+ <auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
228
+ </auro-menuoption>
229
+ <auro-menuoption value="health">
230
+ <auro-icon label customColor category="health" name="health">Health</auro-icon>
231
+ </auro-menuoption>
232
+ <auro-menuoption value="mask">
233
+ <auro-icon label customColor category="health" name="mask">Mask</auro-icon>
234
+ </auro-menuoption>
235
+ <auro-menuoption value="spraybottle">
236
+ <auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
237
+ </auro-menuoption>
238
+ </auro-menu>
239
+ </auro-select>
240
+ ```
241
+ <!-- AURO-GENERATED-CONTENT:END -->
242
+ </auro-accordion>
243
+
244
+ ## Example with nested menus
245
+
246
+ This example shows nesting `<auro-menu>` elements to create submenus.
247
+
248
+ <div class="exampleWrapper">
249
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withSubmenus.html) -->
250
+ <!-- The below content is automatically added from ./../apiExamples/withSubmenus.html -->
251
+ <auro-select>
252
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
253
+ <label slot="placeholder">Placeholder Text</label>
254
+ <span slot="label">Select Example</span>
255
+ <auro-menu>
256
+ <auro-menuoption value="stops">Stops</auro-menuoption>
257
+ <auro-menuoption value="price">Price</auro-menuoption>
258
+ <auro-menuoption value="duration">Duration</auro-menuoption>
259
+ <hr>
260
+ <auro-menu>
261
+ <auro-menuoption value="apples">Apples</auro-menuoption>
262
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
263
+ <auro-menuoption value="pears">Pears</auro-menuoption>
264
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
265
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
266
+ <hr>
267
+ <auro-menu>
268
+ <auro-menuoption value="person">Person</auro-menuoption>
269
+ <auro-menuoption value="woman">Woman</auro-menuoption>
270
+ <auro-menuoption value="man">Man</auro-menuoption>
271
+ <auro-menuoption value="camera">Camera</auro-menuoption>
272
+ <auro-menuoption value="tv">TV</auro-menuoption>
273
+ </auro-menu>
274
+ </auro-menu>
275
+ <hr>
276
+ <auro-menuoption value="departure">Departure</auro-menuoption>
277
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
278
+ <hr>
279
+ <auro-menu>
280
+ <auro-menuoption value="cars">Cars</auro-menuoption>
281
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
282
+ <auro-menuoption value="boats">Boats</auro-menuoption>
283
+ <auro-menuoption value="planes">Planes</auro-menuoption>
284
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
285
+ </auro-menu>
286
+ </auro-select>
287
+ <!-- AURO-GENERATED-CONTENT:END -->
288
+ </div>
289
+ <auro-accordion alignRight>
290
+ <span slot="trigger">See code</span>
291
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withSubmenus.html) -->
292
+ <!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->
293
+
294
+ ```html
295
+ <auro-select>
296
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
297
+ <label slot="placeholder">Placeholder Text</label>
298
+ <span slot="label">Select Example</span>
299
+ <auro-menu>
300
+ <auro-menuoption value="stops">Stops</auro-menuoption>
301
+ <auro-menuoption value="price">Price</auro-menuoption>
302
+ <auro-menuoption value="duration">Duration</auro-menuoption>
303
+ <hr>
304
+ <auro-menu>
305
+ <auro-menuoption value="apples">Apples</auro-menuoption>
306
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
307
+ <auro-menuoption value="pears">Pears</auro-menuoption>
308
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
309
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
310
+ <hr>
311
+ <auro-menu>
312
+ <auro-menuoption value="person">Person</auro-menuoption>
313
+ <auro-menuoption value="woman">Woman</auro-menuoption>
314
+ <auro-menuoption value="man">Man</auro-menuoption>
315
+ <auro-menuoption value="camera">Camera</auro-menuoption>
316
+ <auro-menuoption value="tv">TV</auro-menuoption>
317
+ </auro-menu>
318
+ </auro-menu>
319
+ <hr>
320
+ <auro-menuoption value="departure">Departure</auro-menuoption>
321
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
322
+ <hr>
323
+ <auro-menu>
324
+ <auro-menuoption value="cars">Cars</auro-menuoption>
325
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
326
+ <auro-menuoption value="boats">Boats</auro-menuoption>
327
+ <auro-menuoption value="planes">Planes</auro-menuoption>
328
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
329
+ </auro-menu>
330
+ </auro-select>
331
+ ```
332
+ <!-- AURO-GENERATED-CONTENT:END -->
333
+ </auro-accordion>
334
+
335
+ ## Example with no checkmark
336
+
337
+ 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.
338
+
339
+ <div class="exampleWrapper">
340
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noCheckmark.html) -->
341
+ <!-- The below content is automatically added from ./../apiExamples/noCheckmark.html -->
342
+ <auro-select nocheckmark>
343
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
344
+ <label slot="placeholder">Placeholder Text</label>
345
+ <span slot="label">nocheckmark Select Example</span>
346
+ <auro-menu>
347
+ <auro-menuoption value="stops">Stops</auro-menuoption>
348
+ <auro-menuoption value="price">Price</auro-menuoption>
349
+ <auro-menuoption value="duration">Duration</auro-menuoption>
350
+ <auro-menuoption value="departure">Departure</auro-menuoption>
351
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
352
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
353
+ </auro-menu>
354
+ </auro-select>
355
+ <!-- AURO-GENERATED-CONTENT:END -->
356
+ </div>
357
+ <auro-accordion alignRight>
358
+ <span slot="trigger">See code</span>
359
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noCheckmark.html) -->
360
+ <!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->
361
+
362
+ ```html
363
+ <auro-select nocheckmark>
364
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
365
+ <label slot="placeholder">Placeholder Text</label>
366
+ <span slot="label">nocheckmark Select Example</span>
367
+ <auro-menu>
368
+ <auro-menuoption value="stops">Stops</auro-menuoption>
369
+ <auro-menuoption value="price">Price</auro-menuoption>
370
+ <auro-menuoption value="duration">Duration</auro-menuoption>
371
+ <auro-menuoption value="departure">Departure</auro-menuoption>
372
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
373
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
374
+ </auro-menu>
375
+ </auro-select>
376
+ ```
377
+ <!-- AURO-GENERATED-CONTENT:END -->
378
+ </auro-accordion>
379
+
380
+ ## Example with custom bib height
381
+
382
+ This example shows how to set a custom height for the bib from `<auro-dropdown>`.
383
+
384
+ Custom height dimensions are set by using the `dropdownSize` CSS Part and then applying a `max-height` rule and value.
385
+
386
+ <div class="exampleWrapper">
387
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customBibHeight.html) -->
388
+ <!-- The below content is automatically added from ../apiExamples/customBibHeight.html -->
389
+ <auro-select id="customBibHeightExample">
390
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
391
+ <label slot="placeholder">Placeholder Text</label>
392
+ <span slot="label">Select Example</span>
393
+ <auro-menu>
394
+ <auro-menuoption value="stops">Stops</auro-menuoption>
395
+ <auro-menuoption value="price">Price</auro-menuoption>
396
+ <auro-menuoption value="duration">Duration</auro-menuoption>
397
+ <auro-menuoption value="departure">Departure</auro-menuoption>
398
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
399
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
400
+ </auro-menu>
401
+ </auro-select>
402
+ <style>
403
+ #customBibHeightExample::part(dropdownSize) {
404
+ max-height: 100px;
405
+ }
406
+ </style>
407
+ <!-- AURO-GENERATED-CONTENT:END -->
408
+ </div>
409
+ <auro-accordion alignRight>
410
+ <span slot="trigger">See code</span>
411
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customBibHeight.html) -->
412
+ <!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->
413
+
414
+ ```html
415
+ <auro-select id="customBibHeightExample">
416
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
417
+ <label slot="placeholder">Placeholder Text</label>
418
+ <span slot="label">Select Example</span>
419
+ <auro-menu>
420
+ <auro-menuoption value="stops">Stops</auro-menuoption>
421
+ <auro-menuoption value="price">Price</auro-menuoption>
422
+ <auro-menuoption value="duration">Duration</auro-menuoption>
423
+ <auro-menuoption value="departure">Departure</auro-menuoption>
424
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
425
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
426
+ </auro-menu>
427
+ </auro-select>
428
+ <style>
429
+ #customBibHeightExample::part(dropdownSize) {
430
+ max-height: 100px;
431
+ }
432
+ </style>
433
+ ```
434
+ <!-- AURO-GENERATED-CONTENT:END -->
435
+ </auro-accordion>
436
+
437
+ ## Example with fullscreen dropdown breakpoint override
438
+
439
+ This example overrides the default dropdown behavior to force a non-fullscreen view on any screen size. `disabled`
440
+ ensures that the dropdown will never be fullscreen.
441
+ Please use `xl` if you want the opposite behavior, where a dropdown is always fullscreen.
442
+
443
+ <div class="exampleWrapper">
444
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
445
+ <!-- The below content is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
446
+ <auro-select fullscreenBreakpoint="disabled">
447
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
448
+ <span slot="label">Select Example</span>
449
+ <auro-menu>
450
+ <auro-menuoption value="stops">Stops</auro-menuoption>
451
+ <auro-menuoption value="price">Price</auro-menuoption>
452
+ <auro-menuoption value="duration">Duration</auro-menuoption>
453
+ <auro-menuoption value="departure">Departure</auro-menuoption>
454
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
455
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
456
+ </auro-menu>
457
+ </auro-select>
458
+ <!-- AURO-GENERATED-CONTENT:END -->
459
+ </div>
460
+ <auro-accordion alignRight>
461
+ <span slot="trigger">See code</span>
462
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
463
+ <!-- The below code snippet is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
464
+
465
+ ```html
466
+ <auro-select fullscreenBreakpoint="disabled">
467
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
468
+ <span slot="label">Select Example</span>
469
+ <auro-menu>
470
+ <auro-menuoption value="stops">Stops</auro-menuoption>
471
+ <auro-menuoption value="price">Price</auro-menuoption>
472
+ <auro-menuoption value="duration">Duration</auro-menuoption>
473
+ <auro-menuoption value="departure">Departure</auro-menuoption>
474
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
475
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
476
+ </auro-menu>
477
+ </auro-select>
478
+ ```
479
+ <!-- AURO-GENERATED-CONTENT:END -->
480
+ </auro-accordion>
481
+
482
+ ## Error State
483
+
484
+ Use the `error` boolean attribute to toggle the error UI.
485
+
486
+ <div class="exampleWrapper">
487
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
488
+ <!-- The below content is automatically added from ./../apiExamples/error.html -->
489
+ <auro-select error="Custom error message">
490
+ <span slot="label">error select example</span>
491
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
492
+ <label slot="placeholder">Placeholder Text</label>
493
+ <auro-menu>
494
+ <auro-menuoption value="stops">Stops</auro-menuoption>
495
+ <auro-menuoption value="price">Price</auro-menuoption>
496
+ <auro-menuoption value="duration">Duration</auro-menuoption>
497
+ <auro-menuoption value="departure">Departure</auro-menuoption>
498
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
499
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
500
+ </auro-menu>
501
+ </auro-select>
502
+ <!-- AURO-GENERATED-CONTENT:END -->
503
+ </div>
504
+ <div class="exampleWrapper--ondark" aria-hidden>
505
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
506
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
507
+ <auro-select onDark error="Custom error message">
508
+ <span slot="label">error select example</span>
509
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
510
+ <label slot="placeholder">Placeholder Text</label>
511
+ <auro-menu>
512
+ <auro-menuoption value="stops">Stops</auro-menuoption>
513
+ <auro-menuoption value="price">Price</auro-menuoption>
514
+ <auro-menuoption value="duration">Duration</auro-menuoption>
515
+ <auro-menuoption value="departure">Departure</auro-menuoption>
516
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
517
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
518
+ </auro-menu>
519
+ </auro-select>
520
+ <!-- AURO-GENERATED-CONTENT:END -->
521
+ </div>
522
+ <auro-accordion alignRight>
523
+ <span slot="trigger">See code</span>
524
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
525
+ <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
526
+
527
+ ```html
528
+ <auro-select error="Custom error message">
529
+ <span slot="label">error select example</span>
530
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
531
+ <label slot="placeholder">Placeholder Text</label>
532
+ <auro-menu>
533
+ <auro-menuoption value="stops">Stops</auro-menuoption>
534
+ <auro-menuoption value="price">Price</auro-menuoption>
535
+ <auro-menuoption value="duration">Duration</auro-menuoption>
536
+ <auro-menuoption value="departure">Departure</auro-menuoption>
537
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
538
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
539
+ </auro-menu>
540
+ </auro-select>
541
+ ```
542
+ <!-- AURO-GENERATED-CONTENT:END -->
543
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
544
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
545
+ <auro-select onDark error="Custom error message">
546
+ <span slot="label">error select example</span>
547
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
548
+ <label slot="placeholder">Placeholder Text</label>
549
+ <auro-menu>
550
+ <auro-menuoption value="stops">Stops</auro-menuoption>
551
+ <auro-menuoption value="price">Price</auro-menuoption>
552
+ <auro-menuoption value="duration">Duration</auro-menuoption>
553
+ <auro-menuoption value="departure">Departure</auro-menuoption>
554
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
555
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
556
+ </auro-menu>
557
+ </auro-select>
558
+ <!-- AURO-GENERATED-CONTENT:END -->
559
+ </auro-accordion>
560
+
561
+ ## Disabled state
562
+
563
+ Use the `disabled` boolean attribute to toggle the disabled UI.
564
+
565
+ <div class="exampleWrapper">
566
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
567
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
568
+ <auro-select disabled>
569
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
570
+ <label slot="placeholder">Placeholder Text</label>
571
+ <span slot="label">disabled select example</span>
572
+ <auro-menu>
573
+ <auro-menuoption value="stops">Stops</auro-menuoption>
574
+ <auro-menuoption value="price">Price</auro-menuoption>
575
+ <auro-menuoption value="duration">Duration</auro-menuoption>
576
+ <auro-menuoption value="departure">Departure</auro-menuoption>
577
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
578
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
579
+ </auro-menu>
580
+ </auro-select>
581
+ <!-- AURO-GENERATED-CONTENT:END -->
582
+ </div>
583
+ <div class="exampleWrapper--ondark" aria-hidden>
584
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
585
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
586
+ <auro-select onDark disabled>
587
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
588
+ <label slot="placeholder">Placeholder Text</label>
589
+ <span slot="label">disabled select example</span>
590
+ <auro-menu>
591
+ <auro-menuoption value="stops">Stops</auro-menuoption>
592
+ <auro-menuoption value="price">Price</auro-menuoption>
593
+ <auro-menuoption value="duration">Duration</auro-menuoption>
594
+ <auro-menuoption value="departure">Departure</auro-menuoption>
595
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
596
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
597
+ </auro-menu>
598
+ </auro-select>
599
+ <!-- AURO-GENERATED-CONTENT:END -->
600
+ </div>
601
+ <auro-accordion alignRight>
602
+ <span slot="trigger">See code</span>
603
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
604
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
605
+
606
+ ```html
607
+ <auro-select disabled>
608
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
609
+ <label slot="placeholder">Placeholder Text</label>
610
+ <span slot="label">disabled select example</span>
611
+ <auro-menu>
612
+ <auro-menuoption value="stops">Stops</auro-menuoption>
613
+ <auro-menuoption value="price">Price</auro-menuoption>
614
+ <auro-menuoption value="duration">Duration</auro-menuoption>
615
+ <auro-menuoption value="departure">Departure</auro-menuoption>
616
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
617
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
618
+ </auro-menu>
619
+ </auro-select>
620
+ ```
621
+ <!-- AURO-GENERATED-CONTENT:END -->
622
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
623
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
624
+ <auro-select onDark disabled>
625
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
626
+ <label slot="placeholder">Placeholder Text</label>
627
+ <span slot="label">disabled select example</span>
628
+ <auro-menu>
629
+ <auro-menuoption value="stops">Stops</auro-menuoption>
630
+ <auro-menuoption value="price">Price</auro-menuoption>
631
+ <auro-menuoption value="duration">Duration</auro-menuoption>
632
+ <auro-menuoption value="departure">Departure</auro-menuoption>
633
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
634
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
635
+ </auro-menu>
636
+ </auro-select>
637
+ <!-- AURO-GENERATED-CONTENT:END -->
638
+ </auro-accordion>