@aurodesignsystem-dev/auro-formkit 0.0.0-pr794.0 → 0.0.0-pr794.2

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 (68) hide show
  1. package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  3. package/components/bibtemplate/dist/index.js +73 -23
  4. package/components/bibtemplate/dist/registered.js +73 -23
  5. package/components/checkbox/demo/api.md +2 -1
  6. package/components/checkbox/demo/api.min.js +9 -2
  7. package/components/checkbox/demo/index.min.js +9 -2
  8. package/components/checkbox/dist/index.js +9 -2
  9. package/components/checkbox/dist/registered.js +9 -2
  10. package/components/combobox/demo/api.md +2 -0
  11. package/components/combobox/demo/api.min.js +216 -86
  12. package/components/combobox/demo/index.min.js +216 -86
  13. package/components/combobox/dist/auro-combobox.d.ts +2 -4
  14. package/components/combobox/dist/index.js +175 -70
  15. package/components/combobox/dist/registered.js +175 -70
  16. package/components/counter/demo/api.md +2 -0
  17. package/components/counter/demo/api.min.js +185 -58
  18. package/components/counter/demo/index.min.js +185 -58
  19. package/components/counter/dist/auro-counter-group.d.ts +10 -0
  20. package/components/counter/dist/iconVersion.d.ts +1 -1
  21. package/components/counter/dist/index.js +185 -58
  22. package/components/counter/dist/registered.js +185 -58
  23. package/components/datepicker/README.md +1 -1
  24. package/components/datepicker/demo/api.md +41 -19
  25. package/components/datepicker/demo/api.min.js +478 -175
  26. package/components/datepicker/demo/index.md +4 -4
  27. package/components/datepicker/demo/index.min.js +478 -175
  28. package/components/datepicker/demo/readme.md +1 -1
  29. package/components/datepicker/dist/auro-datepicker.d.ts +60 -12
  30. package/components/datepicker/dist/index.js +478 -175
  31. package/components/datepicker/dist/registered.js +478 -175
  32. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  33. package/components/dropdown/demo/api.md +1 -1
  34. package/components/dropdown/demo/api.min.js +14 -7
  35. package/components/dropdown/demo/index.min.js +14 -7
  36. package/components/dropdown/dist/index.js +14 -7
  37. package/components/dropdown/dist/registered.js +14 -7
  38. package/components/helptext/dist/index.js +1 -1
  39. package/components/helptext/dist/registered.js +1 -1
  40. package/components/input/demo/api.min.js +81 -31
  41. package/components/input/demo/index.min.js +81 -31
  42. package/components/input/dist/index.js +81 -31
  43. package/components/input/dist/registered.js +81 -31
  44. package/components/layoutElement/dist/index.js +5 -5
  45. package/components/layoutElement/dist/registered.js +97 -0
  46. package/components/menu/demo/api.md +21 -24
  47. package/components/menu/demo/api.min.js +59 -34
  48. package/components/menu/demo/index.min.js +59 -34
  49. package/components/menu/dist/auro-menu.d.ts +9 -2
  50. package/components/menu/dist/auro-menuoption.d.ts +8 -2
  51. package/components/menu/dist/iconVersion.d.ts +1 -1
  52. package/components/menu/dist/index.js +45 -20
  53. package/components/menu/dist/registered.js +45 -20
  54. package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
  55. package/components/radio/demo/api.md +32 -1
  56. package/components/radio/demo/api.min.js +3 -3
  57. package/components/radio/demo/index.min.js +3 -3
  58. package/components/radio/dist/index.js +3 -3
  59. package/components/radio/dist/registered.js +3 -3
  60. package/components/select/demo/api.md +46 -64
  61. package/components/select/demo/api.min.js +156 -64
  62. package/components/select/demo/index.md +1057 -137
  63. package/components/select/demo/index.min.js +156 -64
  64. package/components/select/dist/auro-select.d.ts +10 -5
  65. package/components/select/dist/index.js +115 -48
  66. package/components/select/dist/registered.js +115 -48
  67. package/package.json +2 -2
  68. /package/components/datepicker/dist/styles/{default → classic}/color-css.d.ts +0 -0
package/components/select/demo/index.md CHANGED
@@ -18,206 +18,1126 @@ This file is generated based on a template fetched from `./docs/partials/demo.md
18
18
  A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements. Notice a default `Please select option` placeholder in the trigger.
19
19
 
20
20
  <div class="exampleWrapper">
21
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
22
- <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
23
- <auro-select placeholder="Placeholder content">
24
- <span slot="bib.fullscreen.headline">Bib Header</span>
25
- <span slot="label">Name with placeholder</span>
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
26
  <auro-menu>
27
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
28
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
29
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
30
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
31
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
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>
32
33
  </auro-menu>
33
- <span slot="helpText">
34
- Help text - Lorem ipsum solar lorem ipsum solar
35
- </span>
36
34
  </auro-select>
37
35
  <!-- AURO-GENERATED-CONTENT:END -->
38
36
  </div>
39
37
  <div class="exampleWrapper--ondark" aria-hidden>
40
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic-ondark.html) -->
41
- <!-- The below content is automatically added from ./../apiExamples/classic/basic-ondark.html -->
42
- <auro-select onDark placeholder="Placeholder content">
43
- <span slot="bib.fullscreen.headline">Bib Header</span>
44
- <span slot="label">Name</span>
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>
45
43
  <auro-menu>
46
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
47
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
48
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
49
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
50
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
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>
51
50
  </auro-menu>
52
- <span slot="helpText">
53
- Help text - Lorem ipsum solar lorem ipsum solar
54
- </span>
55
51
  </auro-select>
56
52
  <!-- AURO-GENERATED-CONTENT:END -->
57
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
58
 
59
- ### Emphasized
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
+ ## Shape | Size | Layout Support
60
92
 
61
- Only supported for onDark usage.
93
+ The `auro-select` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `classic` shape and layout.
94
+
95
+ ### Supported Combinations
96
+
97
+ #### Classic Layout (Legacy)
62
98
 
63
- <div class="exampleWrapper--ondark" aria-hidden>
99
+ The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
100
+
101
+ <div class="exampleWrapper">
102
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
103
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
104
+ <auro-select>
105
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
106
+ <span slot="label">Select Example</span>
107
+ <auro-menu>
108
+ <auro-menuoption value="stops">Stops</auro-menuoption>
109
+ <auro-menuoption value="price">Price</auro-menuoption>
110
+ <auro-menuoption value="duration">Duration</auro-menuoption>
111
+ <auro-menuoption value="departure">Departure</auro-menuoption>
112
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
113
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
114
+ </auro-menu>
115
+ </auro-select>
116
+ <!-- AURO-GENERATED-CONTENT:END -->
117
+ </div>
118
+ <auro-accordion alignRight>
119
+ <span slot="trigger">See code</span>
120
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
121
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
122
+
123
+ ```html
124
+ <auro-select>
125
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
126
+ <span slot="label">Select Example</span>
127
+ <auro-menu>
128
+ <auro-menuoption value="stops">Stops</auro-menuoption>
129
+ <auro-menuoption value="price">Price</auro-menuoption>
130
+ <auro-menuoption value="duration">Duration</auro-menuoption>
131
+ <auro-menuoption value="departure">Departure</auro-menuoption>
132
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
133
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
134
+ </auro-menu>
135
+ </auro-select>
136
+ ```
137
+ <!-- AURO-GENERATED-CONTENT:END -->
138
+ </auro-accordion>
139
+
140
+ #### Emphasized Layout
141
+
142
+ The `emphasized` layout only supports `ondark` use.
143
+
144
+ The `emphasized` layout supports the following shapes:
145
+ - `pill`
146
+ - `pill-left`
147
+ - `pill-right`
148
+
149
+ The `emphasized` layout supports the following sizes:
150
+ - `xl`
151
+
152
+ <div class="exampleWrapper--ondark">
64
153
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
65
154
  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
66
- <div style="display: flex; flex-direction: row; gap: 10px;">
67
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
68
- <span slot="label">Select Example</span>
155
+ <div>
156
+ <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
157
+ <span slot="label">Label</span>
158
+ <span slot="helpText">Help Text</span>
69
159
  <auro-menu nocheckmark>
70
160
  <auro-menuoption value="flights">
71
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
72
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
161
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
73
162
  </auro-menuoption>
74
163
  <auro-menuoption value="cars">
75
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
76
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
164
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
77
165
  </auro-menuoption>
78
166
  <auro-menuoption value="hotels">
79
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
80
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
167
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
81
168
  </auro-menuoption>
82
169
  <auro-menuoption value="packages">
83
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
84
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
170
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
85
171
  </auro-menuoption>
86
172
  <auro-menuoption value="cruises">
87
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
88
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
173
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
89
174
  </auro-menuoption>
90
175
  </auro-menu>
91
- </auro-select>
92
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark style="display:inline-block;">
93
- <span slot="label">Select Example</span>
176
+ </auro-select>
177
+ </div>
178
+ <div style="display: flex; gap: 4px;">
179
+ <auro-select layout="emphasized" shape="pill-left" size="xl" ondark required style="width:300px;">
180
+ <span slot="label">Label</span>
181
+ <span slot="helpText">Help Text</span>
94
182
  <auro-menu nocheckmark>
95
183
  <auro-menuoption value="flights">
96
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
97
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
184
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
98
185
  </auro-menuoption>
99
186
  <auro-menuoption value="cars">
100
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
101
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
187
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
102
188
  </auro-menuoption>
103
189
  <auro-menuoption value="hotels">
104
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
105
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
190
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
106
191
  </auro-menuoption>
107
192
  <auro-menuoption value="packages">
108
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
109
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
193
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
110
194
  </auro-menuoption>
111
195
  <auro-menuoption value="cruises">
112
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
113
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
196
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
114
197
  </auro-menuoption>
115
198
  </auro-menu>
116
- </auro-select>
117
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark required style="display:inline-block;">
118
- <span slot="label">Select Example</span>
119
- <span slot="helpText">no displayValue in menuoptions</span>
199
+ </auro-select>
200
+ <auro-select layout="emphasized" shape="pill-right" size="xl" ondark required style="width:300px;">
201
+ <span slot="label">Label</span>
202
+ <span slot="helpText">Help Text</span>
120
203
  <auro-menu nocheckmark>
121
204
  <auro-menuoption value="flights">
122
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
205
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
123
206
  </auro-menuoption>
124
207
  <auro-menuoption value="cars">
125
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
208
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
126
209
  </auro-menuoption>
127
210
  <auro-menuoption value="hotels">
128
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
211
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
129
212
  </auro-menuoption>
130
213
  <auro-menuoption value="packages">
131
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
214
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
132
215
  </auro-menuoption>
133
216
  <auro-menuoption value="cruises">
134
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
217
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
135
218
  </auro-menuoption>
136
219
  </auro-menu>
137
220
  </auro-select>
138
221
  </div>
139
222
  <!-- AURO-GENERATED-CONTENT:END -->
223
+ </div>
224
+ <auro-accordion alignRight>
225
+ <span slot="trigger">See code</span>
226
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic-ondark.html) -->
227
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
228
+
229
+ ```html
230
+ <div>
231
+ <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
232
+ <span slot="label">Label</span>
233
+ <span slot="helpText">Help Text</span>
234
+ <auro-menu nocheckmark>
235
+ <auro-menuoption value="flights">
236
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
237
+ </auro-menuoption>
238
+ <auro-menuoption value="cars">
239
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
240
+ </auro-menuoption>
241
+ <auro-menuoption value="hotels">
242
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
243
+ </auro-menuoption>
244
+ <auro-menuoption value="packages">
245
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
246
+ </auro-menuoption>
247
+ <auro-menuoption value="cruises">
248
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
249
+ </auro-menuoption>
250
+ </auro-menu>
251
+ </auro-select>
140
252
  </div>
253
+ <div style="display: flex; gap: 4px;">
254
+ <auro-select layout="emphasized" shape="pill-left" size="xl" ondark required style="width:300px;">
255
+ <span slot="label">Label</span>
256
+ <span slot="helpText">Help Text</span>
257
+ <auro-menu nocheckmark>
258
+ <auro-menuoption value="flights">
259
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
260
+ </auro-menuoption>
261
+ <auro-menuoption value="cars">
262
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
263
+ </auro-menuoption>
264
+ <auro-menuoption value="hotels">
265
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
266
+ </auro-menuoption>
267
+ <auro-menuoption value="packages">
268
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
269
+ </auro-menuoption>
270
+ <auro-menuoption value="cruises">
271
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
272
+ </auro-menuoption>
273
+ </auro-menu>
274
+ </auro-select>
275
+ <auro-select layout="emphasized" shape="pill-right" size="xl" ondark required style="width:300px;">
276
+ <span slot="label">Label</span>
277
+ <span slot="helpText">Help Text</span>
278
+ <auro-menu nocheckmark>
279
+ <auro-menuoption value="flights">
280
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
281
+ </auro-menuoption>
282
+ <auro-menuoption value="cars">
283
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
284
+ </auro-menuoption>
285
+ <auro-menuoption value="hotels">
286
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
287
+ </auro-menuoption>
288
+ <auro-menuoption value="packages">
289
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
290
+ </auro-menuoption>
291
+ <auro-menuoption value="cruises">
292
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
293
+ </auro-menuoption>
294
+ </auro-menu>
295
+ </auro-select>
296
+ </div>
297
+ ```
298
+ <!-- AURO-GENERATED-CONTENT:END -->
299
+ </auro-accordion>
141
300
 
142
- ### Snowflake
301
+ #### Snowflake Layout
143
302
 
144
- Only supported for onDark usage.
303
+ The `snowflake` layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.
145
304
 
146
- <div class="exampleWrapper--ondark" aria-hidden>
305
+ <div class="exampleWrapper--ondark">
147
306
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
148
307
  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
149
- <div style="display: flex; flex-direction: row; gap: 10px;">
150
- <auro-select layout="snowflake" shape="snowflake" value="flights" forceDisplayValue ondark style="display:inline-block;">
151
- <span slot="label">Select Example</span>
152
- <auro-menu nocheckmark>
153
- <auro-menuoption value="flights">
154
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
155
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
156
- </auro-menuoption>
157
- <auro-menuoption value="cars">
158
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
159
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
160
- </auro-menuoption>
161
- <auro-menuoption value="hotels">
162
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
163
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
164
- </auro-menuoption>
165
- <auro-menuoption value="packages">
166
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
167
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
168
- </auro-menuoption>
169
- <auro-menuoption value="cruises">
170
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
171
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
172
- </auro-menuoption>
173
- </auro-menu>
174
- </auro-select>
175
- <auro-select layout="snowflake" shape="snowflake" value="flights" ondark style="display:inline-block;">
176
- <span slot="label">Select Example</span>
177
- <auro-menu nocheckmark>
178
- <auro-menuoption value="flights">
179
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
180
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
181
- </auro-menuoption>
182
- <auro-menuoption value="cars">
183
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
184
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
185
- </auro-menuoption>
186
- <auro-menuoption value="hotels">
187
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
188
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
189
- </auro-menuoption>
190
- <auro-menuoption value="packages">
191
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
192
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
193
- </auro-menuoption>
194
- <auro-menuoption value="cruises">
195
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
196
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
197
- </auro-menuoption>
198
- </auro-menu>
199
- </auro-select>
200
- <auro-select layout="snowflake" shape="snowflake" value="flights" required ondark style="display:inline-block;">
201
- <span slot="label">Select Example</span>
202
- <span slot="helpText">no displayValue in menuoptions</span>
203
- <auro-menu nocheckmark>
204
- <auro-menuoption value="flights">
205
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
206
- </auro-menuoption>
207
- <auro-menuoption value="cars">
208
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
209
- </auro-menuoption>
210
- <auro-menuoption value="hotels">
211
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
212
- </auro-menuoption>
213
- <auro-menuoption value="packages">
214
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
215
- </auro-menuoption>
216
- <auro-menuoption value="cruises">
217
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
218
- </auro-menuoption>
308
+ <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
309
+ <span slot="label">Label</span>
310
+ <span slot="helpText">Help Text</span>
311
+ <auro-menu nocheckmark>
312
+ <auro-menuoption value="flights">
313
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
314
+ </auro-menuoption>
315
+ <auro-menuoption value="cars">
316
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
317
+ </auro-menuoption>
318
+ <auro-menuoption value="hotels">
319
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
320
+ </auro-menuoption>
321
+ <auro-menuoption value="packages">
322
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
323
+ </auro-menuoption>
324
+ <auro-menuoption value="cruises">
325
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
326
+ </auro-menuoption>
327
+ </auro-menu>
328
+ </auro-select>
329
+ <!-- AURO-GENERATED-CONTENT:END -->
330
+ </div>
331
+ <auro-accordion alignRight>
332
+ <span slot="trigger">See code</span>
333
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic-ondark.html) -->
334
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
335
+
336
+ ```html
337
+ <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
338
+ <span slot="label">Label</span>
339
+ <span slot="helpText">Help Text</span>
340
+ <auro-menu nocheckmark>
341
+ <auro-menuoption value="flights">
342
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
343
+ </auro-menuoption>
344
+ <auro-menuoption value="cars">
345
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
346
+ </auro-menuoption>
347
+ <auro-menuoption value="hotels">
348
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
349
+ </auro-menuoption>
350
+ <auro-menuoption value="packages">
351
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
352
+ </auro-menuoption>
353
+ <auro-menuoption value="cruises">
354
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
355
+ </auro-menuoption>
356
+ </auro-menu>
357
+ </auro-select>
358
+ ```
359
+ <!-- AURO-GENERATED-CONTENT:END -->
360
+ </auro-accordion>
361
+
362
+ ## Custom Value Display
363
+
364
+ The `auro-select` supports the new formkit feature set enabling customized content displayed when a value is selected.
365
+
366
+ e.g. You may have a menu option that reads "SeaTac International Airport". However, when that option is selected, you would like the value displayed in the auro-select to just be the airport code "SEA".
367
+
368
+ The custom display value content is inserted using `slot="displayValue"` on each menu option. The `auro-select` component does not style or restrict the slotted content. It is the responsibility of the implementor to insure the content fits within the auro-select container and is styled appropriately.
369
+
370
+ The following example demonstrates menu options with an icon and text. When selected, the auro-select renders an icon with no text.
371
+
372
+ <div class="exampleWrapper--ondark">
373
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/constantDisplayValue.html) -->
374
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
375
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
376
+ <span slot="label">Select Example</span>
377
+ <auro-menu nocheckmark>
378
+ <auro-menuoption value="flights">
379
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
380
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
381
+ </auro-menuoption>
382
+ <auro-menuoption value="cars">
383
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
384
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
385
+ </auro-menuoption>
386
+ <auro-menuoption value="hotels">
387
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
388
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
389
+ </auro-menuoption>
390
+ <auro-menuoption value="packages">
391
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
392
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
393
+ </auro-menuoption>
394
+ <auro-menuoption value="cruises">
395
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
396
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
397
+ </auro-menuoption>
398
+ </auro-menu>
399
+ </auro-select>
400
+ <!-- AURO-GENERATED-CONTENT:END -->
401
+ </div>
402
+ <auro-accordion alignRight>
403
+ <span slot="trigger">See code</span>
404
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/constantDisplayValue.html) -->
405
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
406
+
407
+ ```html
408
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
409
+ <span slot="label">Select Example</span>
410
+ <auro-menu nocheckmark>
411
+ <auro-menuoption value="flights">
412
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
413
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
414
+ </auro-menuoption>
415
+ <auro-menuoption value="cars">
416
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
417
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
418
+ </auro-menuoption>
419
+ <auro-menuoption value="hotels">
420
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
421
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
422
+ </auro-menuoption>
423
+ <auro-menuoption value="packages">
424
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
425
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
426
+ </auro-menuoption>
427
+ <auro-menuoption value="cruises">
428
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
429
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
430
+ </auro-menuoption>
431
+ </auro-menu>
432
+ </auro-select>
433
+ ```
434
+ <!-- AURO-GENERATED-CONTENT:END -->
435
+ </auro-accordion>
436
+
437
+ ## placeholder
438
+
439
+ Use the `placeholder` slot to inject a custom placeholder option with the select element.
440
+
441
+ <div class="exampleWrapper">
442
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customPlaceholder.html) -->
443
+ <!-- The below content is automatically added from ./../apiExamples/customPlaceholder.html -->
444
+ <auro-select placeholder="Please select your preferred option">
445
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
446
+ <span slot="label">Label</span>
447
+ <auro-menu>
448
+ <auro-menuoption value="stops">Stops</auro-menuoption>
449
+ <auro-menuoption value="price">Price</auro-menuoption>
450
+ <auro-menuoption value="duration">Duration</auro-menuoption>
451
+ <auro-menuoption value="departure">Departure</auro-menuoption>
452
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
453
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
454
+ </auro-menu>
455
+ </auro-select>
456
+ <!-- AURO-GENERATED-CONTENT:END -->
457
+ </div>
458
+ <auro-accordion alignRight>
459
+ <span slot="trigger">See code</span>
460
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customPlaceholder.html) -->
461
+ <!-- The below code snippet is automatically added from ./../apiExamples/customPlaceholder.html -->
462
+
463
+ ```html
464
+ <auro-select placeholder="Please select your preferred option">
465
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
466
+ <span slot="label">Label</span>
467
+ <auro-menu>
468
+ <auro-menuoption value="stops">Stops</auro-menuoption>
469
+ <auro-menuoption value="price">Price</auro-menuoption>
470
+ <auro-menuoption value="duration">Duration</auro-menuoption>
471
+ <auro-menuoption value="departure">Departure</auro-menuoption>
472
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
473
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
474
+ </auro-menu>
475
+ </auro-select>
476
+ ```
477
+ <!-- AURO-GENERATED-CONTENT:END -->
478
+ </auro-accordion>
479
+
480
+ ## Label, placeholder and help text slots
481
+
482
+ The following example illustrates the use of the `label`, `placeholder` and `helptext` slots for additional placement of content around the select menu.
483
+
484
+ <div class="exampleWrapper">
485
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots.html) -->
486
+ <!-- The below content is automatically added from ./../apiExamples/slots.html -->
487
+ <auro-select placeholder="Placeholder Text">
488
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
489
+ <span slot="label">Label</span>
490
+ <span slot="helpText">Help Text</span>
491
+ <auro-menu>
492
+ <auro-menuoption value="stops">Stops</auro-menuoption>
493
+ <auro-menuoption value="price">Price</auro-menuoption>
494
+ <auro-menuoption value="duration">Duration</auro-menuoption>
495
+ <auro-menuoption value="departure">Departure</auro-menuoption>
496
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
497
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
498
+ </auro-menu>
499
+ </auro-select>
500
+ <!-- AURO-GENERATED-CONTENT:END -->
501
+ </div>
502
+ <auro-accordion alignRight>
503
+ <span slot="trigger">See code</span>
504
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slots.html) -->
505
+ <!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->
506
+
507
+ ```html
508
+ <auro-select placeholder="Placeholder Text">
509
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
510
+ <span slot="label">Label</span>
511
+ <span slot="helpText">Help Text</span>
512
+ <auro-menu>
513
+ <auro-menuoption value="stops">Stops</auro-menuoption>
514
+ <auro-menuoption value="price">Price</auro-menuoption>
515
+ <auro-menuoption value="duration">Duration</auro-menuoption>
516
+ <auro-menuoption value="departure">Departure</auro-menuoption>
517
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
518
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
519
+ </auro-menu>
520
+ </auro-select>
521
+ ```
522
+ <!-- AURO-GENERATED-CONTENT:END -->
523
+ </auro-accordion>
524
+
525
+ ## Autofill/Autocomplete Support
526
+
527
+ Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
528
+
529
+ <div class="exampleWrapper">
530
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
531
+ <!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
532
+ <div class="autofill-example-form">
533
+ <div class="input-row">
534
+ <auro-input autocomplete="given-name">
535
+ <span slot="label">First Name</span>
536
+ <span slot="bib.fullscreen.headline">First Name</span>
537
+ </auro-input>
538
+ <auro-input autocomplete="family-name">
539
+ <span slot="label">Last Name</span>
540
+ <span slot="bib.fullscreen.headline">Last Name</span>
541
+ </auro-input>
542
+ </div>
543
+ <div class="input-row">
544
+ <auro-input autocomplete="address-line1">
545
+ <span slot="label">Street Address</span>
546
+ <span slot="bib.fullscreen.headline">Street Address</span>
547
+ </auro-input>
548
+ <auro-input autocomplete="address-level2">
549
+ <span slot="label">City</span>
550
+ <span slot="bib.fullscreen.headline">City</span>
551
+ </auro-input>
552
+ <auro-select autocomplete="address-level1">
553
+ <span slot="bib.fullscreen.headline">Select Your State</span>
554
+ <span slot="label">Select Your State</span>
555
+ <auro-menu>
556
+ <auro-menuoption value="AL">Alabama</auro-menuoption>
557
+ <auro-menuoption value="AK">Alaska</auro-menuoption>
558
+ <auro-menuoption value="AZ">Arizona</auro-menuoption>
559
+ <auro-menuoption value="AR">Arkansas</auro-menuoption>
560
+ <auro-menuoption value="CA">California</auro-menuoption>
561
+ <auro-menuoption value="CO">Colorado</auro-menuoption>
562
+ <auro-menuoption value="CT">Connecticut</auro-menuoption>
563
+ <auro-menuoption value="DE">Delaware</auro-menuoption>
564
+ <auro-menuoption value="DC">District of Columbia</auro-menuoption>
565
+ <auro-menuoption value="FL">Florida</auro-menuoption>
566
+ <auro-menuoption value="GA">Georgia</auro-menuoption>
567
+ <auro-menuoption value="HI">Hawaii</auro-menuoption>
568
+ <auro-menuoption value="ID">Idaho</auro-menuoption>
569
+ <auro-menuoption value="IL">Illinois</auro-menuoption>
570
+ <auro-menuoption value="IN">Indiana</auro-menuoption>
571
+ <auro-menuoption value="IA">Iowa</auro-menuoption>
572
+ <auro-menuoption value="KS">Kansas</auro-menuoption>
573
+ <auro-menuoption value="KY">Kentucky</auro-menuoption>
574
+ <auro-menuoption value="LA">Louisiana</auro-menuoption>
575
+ <auro-menuoption value="ME">Maine</auro-menuoption>
576
+ <auro-menuoption value="MD">Maryland</auro-menuoption>
577
+ <auro-menuoption value="MA">Massachusetts</auro-menuoption>
578
+ <auro-menuoption value="MI">Michigan</auro-menuoption>
579
+ <auro-menuoption value="MN">Minnesota</auro-menuoption>
580
+ <auro-menuoption value="MS">Mississippi</auro-menuoption>
581
+ <auro-menuoption value="MO">Missouri</auro-menuoption>
582
+ <auro-menuoption value="MT">Montana</auro-menuoption>
583
+ <auro-menuoption value="NE">Nebraska</auro-menuoption>
584
+ <auro-menuoption value="NV">Nevada</auro-menuoption>
585
+ <auro-menuoption value="NH">New Hampshire</auro-menuoption>
586
+ <auro-menuoption value="NJ">New Jersey</auro-menuoption>
587
+ <auro-menuoption value="NM">New Mexico</auro-menuoption>
588
+ <auro-menuoption value="NY">New York</auro-menuoption>
589
+ <auro-menuoption value="NC">North Carolina</auro-menuoption>
590
+ <auro-menuoption value="ND">North Dakota</auro-menuoption>
591
+ <auro-menuoption value="OH">Ohio</auro-menuoption>
592
+ <auro-menuoption value="OK">Oklahoma</auro-menuoption>
593
+ <auro-menuoption value="OR">Oregon</auro-menuoption>
594
+ <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
595
+ <auro-menuoption value="RI">Rhode Island</auro-menuoption>
596
+ <auro-menuoption value="SC">South Carolina</auro-menuoption>
597
+ <auro-menuoption value="SD">South Dakota</auro-menuoption>
598
+ <auro-menuoption value="TN">Tennessee</auro-menuoption>
599
+ <auro-menuoption value="TX">Texas</auro-menuoption>
600
+ <auro-menuoption value="UT">Utah</auro-menuoption>
601
+ <auro-menuoption value="VT">Vermont</auro-menuoption>
602
+ <auro-menuoption value="VA">Virginia</auro-menuoption>
603
+ <auro-menuoption value="WA">Washington</auro-menuoption>
604
+ <auro-menuoption value="WV">West Virginia</auro-menuoption>
605
+ <auro-menuoption value="WI">Wisconsin</auro-menuoption>
606
+ <auro-menuoption value="WY">Wyoming</auro-menuoption>
607
+ </auro-menu>
608
+ </auro-select>
609
+ </div>
610
+ </div>
611
+ <!-- AURO-GENERATED-CONTENT:END -->
612
+ </div>
613
+ <auro-accordion alignRight>
614
+ <span slot="trigger">See code</span>
615
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
616
+ <!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
617
+
618
+ ```html
619
+ <div class="autofill-example-form">
620
+ <div class="input-row">
621
+ <auro-input autocomplete="given-name">
622
+ <span slot="label">First Name</span>
623
+ <span slot="bib.fullscreen.headline">First Name</span>
624
+ </auro-input>
625
+ <auro-input autocomplete="family-name">
626
+ <span slot="label">Last Name</span>
627
+ <span slot="bib.fullscreen.headline">Last Name</span>
628
+ </auro-input>
629
+ </div>
630
+ <div class="input-row">
631
+ <auro-input autocomplete="address-line1">
632
+ <span slot="label">Street Address</span>
633
+ <span slot="bib.fullscreen.headline">Street Address</span>
634
+ </auro-input>
635
+ <auro-input autocomplete="address-level2">
636
+ <span slot="label">City</span>
637
+ <span slot="bib.fullscreen.headline">City</span>
638
+ </auro-input>
639
+ <auro-select autocomplete="address-level1">
640
+ <span slot="bib.fullscreen.headline">Select Your State</span>
641
+ <span slot="label">Select Your State</span>
642
+ <auro-menu>
643
+ <auro-menuoption value="AL">Alabama</auro-menuoption>
644
+ <auro-menuoption value="AK">Alaska</auro-menuoption>
645
+ <auro-menuoption value="AZ">Arizona</auro-menuoption>
646
+ <auro-menuoption value="AR">Arkansas</auro-menuoption>
647
+ <auro-menuoption value="CA">California</auro-menuoption>
648
+ <auro-menuoption value="CO">Colorado</auro-menuoption>
649
+ <auro-menuoption value="CT">Connecticut</auro-menuoption>
650
+ <auro-menuoption value="DE">Delaware</auro-menuoption>
651
+ <auro-menuoption value="DC">District of Columbia</auro-menuoption>
652
+ <auro-menuoption value="FL">Florida</auro-menuoption>
653
+ <auro-menuoption value="GA">Georgia</auro-menuoption>
654
+ <auro-menuoption value="HI">Hawaii</auro-menuoption>
655
+ <auro-menuoption value="ID">Idaho</auro-menuoption>
656
+ <auro-menuoption value="IL">Illinois</auro-menuoption>
657
+ <auro-menuoption value="IN">Indiana</auro-menuoption>
658
+ <auro-menuoption value="IA">Iowa</auro-menuoption>
659
+ <auro-menuoption value="KS">Kansas</auro-menuoption>
660
+ <auro-menuoption value="KY">Kentucky</auro-menuoption>
661
+ <auro-menuoption value="LA">Louisiana</auro-menuoption>
662
+ <auro-menuoption value="ME">Maine</auro-menuoption>
663
+ <auro-menuoption value="MD">Maryland</auro-menuoption>
664
+ <auro-menuoption value="MA">Massachusetts</auro-menuoption>
665
+ <auro-menuoption value="MI">Michigan</auro-menuoption>
666
+ <auro-menuoption value="MN">Minnesota</auro-menuoption>
667
+ <auro-menuoption value="MS">Mississippi</auro-menuoption>
668
+ <auro-menuoption value="MO">Missouri</auro-menuoption>
669
+ <auro-menuoption value="MT">Montana</auro-menuoption>
670
+ <auro-menuoption value="NE">Nebraska</auro-menuoption>
671
+ <auro-menuoption value="NV">Nevada</auro-menuoption>
672
+ <auro-menuoption value="NH">New Hampshire</auro-menuoption>
673
+ <auro-menuoption value="NJ">New Jersey</auro-menuoption>
674
+ <auro-menuoption value="NM">New Mexico</auro-menuoption>
675
+ <auro-menuoption value="NY">New York</auro-menuoption>
676
+ <auro-menuoption value="NC">North Carolina</auro-menuoption>
677
+ <auro-menuoption value="ND">North Dakota</auro-menuoption>
678
+ <auro-menuoption value="OH">Ohio</auro-menuoption>
679
+ <auro-menuoption value="OK">Oklahoma</auro-menuoption>
680
+ <auro-menuoption value="OR">Oregon</auro-menuoption>
681
+ <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
682
+ <auro-menuoption value="RI">Rhode Island</auro-menuoption>
683
+ <auro-menuoption value="SC">South Carolina</auro-menuoption>
684
+ <auro-menuoption value="SD">South Dakota</auro-menuoption>
685
+ <auro-menuoption value="TN">Tennessee</auro-menuoption>
686
+ <auro-menuoption value="TX">Texas</auro-menuoption>
687
+ <auro-menuoption value="UT">Utah</auro-menuoption>
688
+ <auro-menuoption value="VT">Vermont</auro-menuoption>
689
+ <auro-menuoption value="VA">Virginia</auro-menuoption>
690
+ <auro-menuoption value="WA">Washington</auro-menuoption>
691
+ <auro-menuoption value="WV">West Virginia</auro-menuoption>
692
+ <auro-menuoption value="WI">Wisconsin</auro-menuoption>
693
+ <auro-menuoption value="WY">Wyoming</auro-menuoption>
219
694
  </auro-menu>
220
695
  </auro-select>
221
696
  </div>
697
+ </div>
698
+ ```
699
+ <!-- AURO-GENERATED-CONTENT:END -->
700
+ </auro-accordion>
701
+
702
+ ## Example with auro-icons in options
703
+
704
+ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
705
+
706
+ <div class="exampleWrapper">
707
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withIcons.html) -->
708
+ <!-- The below content is automatically added from ./../apiExamples/withIcons.html -->
709
+ <auro-select placeholder="Placeholder Text">
710
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
711
+ <span slot="label">Label</span>
712
+ <auro-menu>
713
+ <auro-menuoption value="air">
714
+ <auro-icon label customColor category="health" name="air">Air</auro-icon>
715
+ </auro-menuoption>
716
+ <auro-menuoption value="covidtest">
717
+ <auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
718
+ </auro-menuoption>
719
+ <auro-menuoption value="health">
720
+ <auro-icon label customColor category="health" name="health">Health</auro-icon>
721
+ </auro-menuoption>
722
+ <auro-menuoption value="mask">
723
+ <auro-icon label customColor category="health" name="mask">Mask</auro-icon>
724
+ </auro-menuoption>
725
+ <auro-menuoption value="spraybottle">
726
+ <auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
727
+ </auro-menuoption>
728
+ </auro-menu>
729
+ </auro-select>
730
+ <!-- AURO-GENERATED-CONTENT:END -->
731
+ </div>
732
+ <auro-accordion alignRight>
733
+ <span slot="trigger">See code</span>
734
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withIcons.html) -->
735
+ <!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->
736
+
737
+ ```html
738
+ <auro-select placeholder="Placeholder Text">
739
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
740
+ <span slot="label">Label</span>
741
+ <auro-menu>
742
+ <auro-menuoption value="air">
743
+ <auro-icon label customColor category="health" name="air">Air</auro-icon>
744
+ </auro-menuoption>
745
+ <auro-menuoption value="covidtest">
746
+ <auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
747
+ </auro-menuoption>
748
+ <auro-menuoption value="health">
749
+ <auro-icon label customColor category="health" name="health">Health</auro-icon>
750
+ </auro-menuoption>
751
+ <auro-menuoption value="mask">
752
+ <auro-icon label customColor category="health" name="mask">Mask</auro-icon>
753
+ </auro-menuoption>
754
+ <auro-menuoption value="spraybottle">
755
+ <auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
756
+ </auro-menuoption>
757
+ </auro-menu>
758
+ </auro-select>
759
+ ```
760
+ <!-- AURO-GENERATED-CONTENT:END -->
761
+ </auro-accordion>
762
+
763
+ ## Example with nested menus
764
+
765
+ This example shows nesting `<auro-menu>` elements to create submenus.
766
+
767
+ <div class="exampleWrapper">
768
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withSubmenus.html) -->
769
+ <!-- The below content is automatically added from ./../apiExamples/withSubmenus.html -->
770
+ <auro-select placeholder="Placeholder Text">
771
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
772
+ <span slot="label">Label</span>
773
+ <auro-menu>
774
+ <auro-menuoption value="stops">Stops</auro-menuoption>
775
+ <auro-menuoption value="price">Price</auro-menuoption>
776
+ <auro-menuoption value="duration">Duration</auro-menuoption>
777
+ <hr>
778
+ <auro-menu>
779
+ <auro-menuoption value="apples">Apples</auro-menuoption>
780
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
781
+ <auro-menuoption value="pears">Pears</auro-menuoption>
782
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
783
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
784
+ <hr>
785
+ <auro-menu>
786
+ <auro-menuoption value="person">Person</auro-menuoption>
787
+ <auro-menuoption value="woman">Woman</auro-menuoption>
788
+ <auro-menuoption value="man">Man</auro-menuoption>
789
+ <auro-menuoption value="camera">Camera</auro-menuoption>
790
+ <auro-menuoption value="tv">TV</auro-menuoption>
791
+ </auro-menu>
792
+ </auro-menu>
793
+ <hr>
794
+ <auro-menuoption value="departure">Departure</auro-menuoption>
795
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
796
+ <hr>
797
+ <auro-menu>
798
+ <auro-menuoption value="cars">Cars</auro-menuoption>
799
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
800
+ <auro-menuoption value="boats">Boats</auro-menuoption>
801
+ <auro-menuoption value="planes">Planes</auro-menuoption>
802
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
803
+ </auro-menu>
804
+ </auro-select>
805
+ <!-- AURO-GENERATED-CONTENT:END -->
806
+ </div>
807
+ <auro-accordion alignRight>
808
+ <span slot="trigger">See code</span>
809
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withSubmenus.html) -->
810
+ <!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->
811
+
812
+ ```html
813
+ <auro-select placeholder="Placeholder Text">
814
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
815
+ <span slot="label">Label</span>
816
+ <auro-menu>
817
+ <auro-menuoption value="stops">Stops</auro-menuoption>
818
+ <auro-menuoption value="price">Price</auro-menuoption>
819
+ <auro-menuoption value="duration">Duration</auro-menuoption>
820
+ <hr>
821
+ <auro-menu>
822
+ <auro-menuoption value="apples">Apples</auro-menuoption>
823
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
824
+ <auro-menuoption value="pears">Pears</auro-menuoption>
825
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
826
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
827
+ <hr>
828
+ <auro-menu>
829
+ <auro-menuoption value="person">Person</auro-menuoption>
830
+ <auro-menuoption value="woman">Woman</auro-menuoption>
831
+ <auro-menuoption value="man">Man</auro-menuoption>
832
+ <auro-menuoption value="camera">Camera</auro-menuoption>
833
+ <auro-menuoption value="tv">TV</auro-menuoption>
834
+ </auro-menu>
835
+ </auro-menu>
836
+ <hr>
837
+ <auro-menuoption value="departure">Departure</auro-menuoption>
838
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
839
+ <hr>
840
+ <auro-menu>
841
+ <auro-menuoption value="cars">Cars</auro-menuoption>
842
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
843
+ <auro-menuoption value="boats">Boats</auro-menuoption>
844
+ <auro-menuoption value="planes">Planes</auro-menuoption>
845
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
846
+ </auro-menu>
847
+ </auro-select>
848
+ ```
849
+ <!-- AURO-GENERATED-CONTENT:END -->
850
+ </auro-accordion>
851
+
852
+ ## Example with no checkmark
853
+
854
+ 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.
855
+
856
+ <div class="exampleWrapper">
857
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noCheckmark.html) -->
858
+ <!-- The below content is automatically added from ./../apiExamples/noCheckmark.html -->
859
+ <auro-select nocheckmark placeholder="Placeholder Text">
860
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
861
+ <span slot="label">Label</span>
862
+ <auro-menu>
863
+ <auro-menuoption value="stops">Stops</auro-menuoption>
864
+ <auro-menuoption value="price">Price</auro-menuoption>
865
+ <auro-menuoption value="duration">Duration</auro-menuoption>
866
+ <auro-menuoption value="departure">Departure</auro-menuoption>
867
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
868
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
869
+ </auro-menu>
870
+ </auro-select>
871
+ <!-- AURO-GENERATED-CONTENT:END -->
872
+ </div>
873
+ <auro-accordion alignRight>
874
+ <span slot="trigger">See code</span>
875
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noCheckmark.html) -->
876
+ <!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->
877
+
878
+ ```html
879
+ <auro-select nocheckmark placeholder="Placeholder Text">
880
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
881
+ <span slot="label">Label</span>
882
+ <auro-menu>
883
+ <auro-menuoption value="stops">Stops</auro-menuoption>
884
+ <auro-menuoption value="price">Price</auro-menuoption>
885
+ <auro-menuoption value="duration">Duration</auro-menuoption>
886
+ <auro-menuoption value="departure">Departure</auro-menuoption>
887
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
888
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
889
+ </auro-menu>
890
+ </auro-select>
891
+ ```
892
+ <!-- AURO-GENERATED-CONTENT:END -->
893
+ </auro-accordion>
894
+
895
+ ## Example with custom bib height
896
+
897
+ This example shows how to set a custom height for the bib from `<auro-dropdown>`.
898
+
899
+ Custom height dimensions are set by using the `dropdownSize` CSS Part and then applying a `max-height` rule and value.
900
+
901
+ <div class="exampleWrapper">
902
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customBibHeight.html) -->
903
+ <!-- The below content is automatically added from ../apiExamples/customBibHeight.html -->
904
+ <auro-select id="customBibHeightExample" placeholder="Placeholder Text">
905
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
906
+ <span slot="label">Label</span>
907
+ <auro-menu>
908
+ <auro-menuoption value="stops">Stops</auro-menuoption>
909
+ <auro-menuoption value="price">Price</auro-menuoption>
910
+ <auro-menuoption value="duration">Duration</auro-menuoption>
911
+ <auro-menuoption value="departure">Departure</auro-menuoption>
912
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
913
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
914
+ </auro-menu>
915
+ </auro-select>
916
+ <style>
917
+ #customBibHeightExample::part(dropdownSize) {
918
+ max-height: 100px;
919
+ }
920
+ </style>
921
+ <!-- AURO-GENERATED-CONTENT:END -->
922
+ </div>
923
+ <auro-accordion alignRight>
924
+ <span slot="trigger">See code</span>
925
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customBibHeight.html) -->
926
+ <!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->
927
+
928
+ ```html
929
+ <auro-select id="customBibHeightExample" placeholder="Placeholder Text">
930
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
931
+ <span slot="label">Label</span>
932
+ <auro-menu>
933
+ <auro-menuoption value="stops">Stops</auro-menuoption>
934
+ <auro-menuoption value="price">Price</auro-menuoption>
935
+ <auro-menuoption value="duration">Duration</auro-menuoption>
936
+ <auro-menuoption value="departure">Departure</auro-menuoption>
937
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
938
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
939
+ </auro-menu>
940
+ </auro-select>
941
+ <style>
942
+ #customBibHeightExample::part(dropdownSize) {
943
+ max-height: 100px;
944
+ }
945
+ </style>
946
+ ```
947
+ <!-- AURO-GENERATED-CONTENT:END -->
948
+ </auro-accordion>
949
+
950
+ ## Example with fullscreen dropdown breakpoint override
951
+
952
+ This example overrides the default dropdown behavior to force a non-fullscreen view on any screen size. `disabled`
953
+ ensures that the dropdown will never be fullscreen.
954
+ Please use `xl` if you want the opposite behavior, where a dropdown is always fullscreen.
955
+
956
+ <div class="exampleWrapper">
957
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
958
+ <!-- The below content is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
959
+ <auro-select fullscreenBreakpoint="disabled">
960
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
961
+ <span slot="label">Select Example</span>
962
+ <auro-menu>
963
+ <auro-menuoption value="stops">Stops</auro-menuoption>
964
+ <auro-menuoption value="price">Price</auro-menuoption>
965
+ <auro-menuoption value="duration">Duration</auro-menuoption>
966
+ <auro-menuoption value="departure">Departure</auro-menuoption>
967
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
968
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
969
+ </auro-menu>
970
+ </auro-select>
971
+ <!-- AURO-GENERATED-CONTENT:END -->
972
+ </div>
973
+ <auro-accordion alignRight>
974
+ <span slot="trigger">See code</span>
975
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
976
+ <!-- The below code snippet is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
977
+
978
+ ```html
979
+ <auro-select fullscreenBreakpoint="disabled">
980
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
981
+ <span slot="label">Select Example</span>
982
+ <auro-menu>
983
+ <auro-menuoption value="stops">Stops</auro-menuoption>
984
+ <auro-menuoption value="price">Price</auro-menuoption>
985
+ <auro-menuoption value="duration">Duration</auro-menuoption>
986
+ <auro-menuoption value="departure">Departure</auro-menuoption>
987
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
988
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
989
+ </auro-menu>
990
+ </auro-select>
991
+ ```
992
+ <!-- AURO-GENERATED-CONTENT:END -->
993
+ </auro-accordion>
994
+
995
+ ## Error State
996
+
997
+ Use the `error` boolean attribute to toggle the error UI.
998
+
999
+ <div class="exampleWrapper">
1000
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
1001
+ <!-- The below content is automatically added from ./../apiExamples/error.html -->
1002
+ <auro-select error="Custom error message" placeholder="Placeholder Text">
1003
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1004
+ <span slot="label">Label</span>
1005
+ <auro-menu>
1006
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1007
+ <auro-menuoption value="price">Price</auro-menuoption>
1008
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1009
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1010
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1011
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1012
+ </auro-menu>
1013
+ </auro-select>
1014
+ <!-- AURO-GENERATED-CONTENT:END -->
1015
+ </div>
1016
+ <div class="exampleWrapper--ondark" aria-hidden>
1017
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
1018
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
1019
+ <auro-select onDark error="Custom error message" placeholder="Placeholder Text">
1020
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1021
+ <span slot="label">Label</span>
1022
+ <auro-menu>
1023
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1024
+ <auro-menuoption value="price">Price</auro-menuoption>
1025
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1026
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1027
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1028
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1029
+ </auro-menu>
1030
+ </auro-select>
1031
+ <!-- AURO-GENERATED-CONTENT:END -->
1032
+ </div>
1033
+ <auro-accordion alignRight>
1034
+ <span slot="trigger">See code</span>
1035
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
1036
+ <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
1037
+
1038
+ ```html
1039
+ <auro-select error="Custom error message" placeholder="Placeholder Text">
1040
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1041
+ <span slot="label">Label</span>
1042
+ <auro-menu>
1043
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1044
+ <auro-menuoption value="price">Price</auro-menuoption>
1045
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1046
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1047
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1048
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1049
+ </auro-menu>
1050
+ </auro-select>
1051
+ ```
1052
+ <!-- AURO-GENERATED-CONTENT:END -->
1053
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
1054
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
1055
+ <auro-select onDark error="Custom error message" placeholder="Placeholder Text">
1056
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1057
+ <span slot="label">Label</span>
1058
+ <auro-menu>
1059
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1060
+ <auro-menuoption value="price">Price</auro-menuoption>
1061
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1062
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1063
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1064
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1065
+ </auro-menu>
1066
+ </auro-select>
1067
+ <!-- AURO-GENERATED-CONTENT:END -->
1068
+ </auro-accordion>
1069
+
1070
+ ## Disabled state
1071
+
1072
+ Use the `disabled` boolean attribute to toggle the disabled UI.
1073
+
1074
+ <div class="exampleWrapper">
1075
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
1076
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
1077
+ <auro-select disabled placeholder="Placeholder Text">
1078
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1079
+ <span slot="label">Label</span>
1080
+ <auro-menu>
1081
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1082
+ <auro-menuoption value="price">Price</auro-menuoption>
1083
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1084
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1085
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1086
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1087
+ </auro-menu>
1088
+ </auro-select>
222
1089
  <!-- AURO-GENERATED-CONTENT:END -->
223
1090
  </div>
1091
+ <div class="exampleWrapper--ondark" aria-hidden>
1092
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
1093
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
1094
+ <auro-select onDark disabled placeholder="Placeholder Text">
1095
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1096
+ <span slot="label">Label</span>
1097
+ <auro-menu>
1098
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1099
+ <auro-menuoption value="price">Price</auro-menuoption>
1100
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1101
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1102
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1103
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1104
+ </auro-menu>
1105
+ </auro-select>
1106
+ <!-- AURO-GENERATED-CONTENT:END -->
1107
+ </div>
1108
+ <auro-accordion alignRight>
1109
+ <span slot="trigger">See code</span>
1110
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
1111
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
1112
+
1113
+ ```html
1114
+ <auro-select disabled placeholder="Placeholder Text">
1115
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1116
+ <span slot="label">Label</span>
1117
+ <auro-menu>
1118
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1119
+ <auro-menuoption value="price">Price</auro-menuoption>
1120
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1121
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1122
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1123
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1124
+ </auro-menu>
1125
+ </auro-select>
1126
+ ```
1127
+ <!-- AURO-GENERATED-CONTENT:END -->
1128
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
1129
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
1130
+ <auro-select onDark disabled placeholder="Placeholder Text">
1131
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
1132
+ <span slot="label">Label</span>
1133
+ <auro-menu>
1134
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1135
+ <auro-menuoption value="price">Price</auro-menuoption>
1136
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1137
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1138
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1139
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
1140
+ </auro-menu>
1141
+ </auro-select>
1142
+ <!-- AURO-GENERATED-CONTENT:END -->
1143
+ </auro-accordion>