@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.0 → 0.0.0-pr624.10

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