@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.2 → 0.0.0-pr624.21

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 (108) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +13 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +1292 -79
  5. package/components/bibtemplate/dist/registered.js +1292 -79
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.md +8 -9
  8. package/components/checkbox/demo/api.min.js +30 -24
  9. package/components/checkbox/demo/index.md +2 -2
  10. package/components/checkbox/demo/index.min.js +30 -24
  11. package/components/checkbox/demo/readme.md +1 -1
  12. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  13. package/components/checkbox/dist/index.js +30 -24
  14. package/components/checkbox/dist/registered.js +30 -24
  15. package/components/combobox/demo/api.md +53 -0
  16. package/components/combobox/demo/api.min.js +2898 -753
  17. package/components/combobox/demo/index.md +6 -0
  18. package/components/combobox/demo/index.min.js +2898 -753
  19. package/components/combobox/dist/auro-combobox.d.ts +12 -12
  20. package/components/combobox/dist/index.js +2646 -642
  21. package/components/combobox/dist/registered.js +2646 -642
  22. package/components/counter/demo/api.md +21 -19
  23. package/components/counter/demo/api.min.js +3648 -929
  24. package/components/counter/demo/index.md +99 -34
  25. package/components/counter/demo/index.min.js +3648 -929
  26. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  27. package/components/counter/dist/auro-counter-group.d.ts +105 -6
  28. package/components/counter/dist/auro-counter.d.ts +6 -0
  29. package/components/counter/dist/helptextVersion.d.ts +2 -0
  30. package/components/counter/dist/iconVersion.d.ts +1 -1
  31. package/components/counter/dist/index.js +3648 -929
  32. package/components/counter/dist/registered.js +3648 -929
  33. package/components/datepicker/demo/api.md +36 -19
  34. package/components/datepicker/demo/api.min.js +11437 -7744
  35. package/components/datepicker/demo/index.md +80 -0
  36. package/components/datepicker/demo/index.min.js +11437 -7744
  37. package/components/datepicker/dist/auro-datepicker.d.ts +71 -3
  38. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  39. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  40. package/components/datepicker/dist/index.js +13847 -10154
  41. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  42. package/components/datepicker/dist/registered.js +13847 -10154
  43. package/components/dropdown/demo/api.md +6 -7
  44. package/components/dropdown/demo/api.min.js +238 -144
  45. package/components/dropdown/demo/index.md +57 -9
  46. package/components/dropdown/demo/index.min.js +238 -144
  47. package/components/dropdown/dist/auro-dropdown.d.ts +10 -9
  48. package/components/dropdown/dist/auro-dropdownBib.d.ts +22 -0
  49. package/components/dropdown/dist/index.js +238 -144
  50. package/components/dropdown/dist/registered.js +238 -144
  51. package/components/form/demo/api.min.js +1 -1
  52. package/components/form/demo/index.min.js +1 -1
  53. package/components/form/dist/index.js +1 -1
  54. package/components/form/dist/registered.js +1 -1
  55. package/components/helptext/dist/index.js +2 -2
  56. package/components/helptext/dist/registered.js +2 -2
  57. package/components/input/demo/api.md +63 -56
  58. package/components/input/demo/api.min.js +983 -269
  59. package/components/input/demo/index.min.js +982 -268
  60. package/components/input/dist/auro-input.d.ts +202 -14
  61. package/components/input/dist/base-input.d.ts +30 -7
  62. package/components/input/dist/buttonVersion.d.ts +1 -1
  63. package/components/input/dist/iconVersion.d.ts +1 -1
  64. package/components/input/dist/index.js +982 -268
  65. package/components/input/dist/registered.js +982 -268
  66. package/components/layoutElement/dist/index.js +13 -10
  67. package/components/menu/demo/api.html +38 -0
  68. package/components/menu/demo/api.md +68 -7
  69. package/components/menu/demo/api.min.js +278 -42
  70. package/components/menu/demo/index.min.js +278 -42
  71. package/components/menu/dist/auro-menu.d.ts +28 -5
  72. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  73. package/components/menu/dist/iconVersion.d.ts +1 -1
  74. package/components/menu/dist/index.js +278 -42
  75. package/components/menu/dist/registered.js +278 -42
  76. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  77. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  78. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  79. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  80. package/components/radio/demo/api.md +2 -2
  81. package/components/radio/demo/api.min.js +10 -7
  82. package/components/radio/demo/index.min.js +10 -7
  83. package/components/radio/dist/auro-radio.d.ts +1 -1
  84. package/components/radio/dist/index.js +10 -7
  85. package/components/radio/dist/registered.js +10 -7
  86. package/components/select/demo/api.js +2 -0
  87. package/components/select/demo/api.md +78 -12
  88. package/components/select/demo/api.min.js +2797 -538
  89. package/components/select/demo/index.html +1 -0
  90. package/components/select/demo/index.md +325 -763
  91. package/components/select/demo/index.min.js +2790 -543
  92. package/components/select/dist/auro-select.d.ts +111 -11
  93. package/components/select/dist/helptextVersion.d.ts +2 -0
  94. package/components/select/dist/index.js +2533 -427
  95. package/components/select/dist/registered.js +2533 -427
  96. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  97. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  98. package/package.json +6 -4
  99. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  100. /package/components/{dropdown → datepicker}/dist/styles/default/color-css.d.ts +0 -0
  101. /package/components/{dropdown/dist/styles/default/bibStyles-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  102. /package/components/{dropdown/dist/styles/default/style-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  103. /package/components/{dropdown/dist/styles → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  104. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  105. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  106. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  107. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  108. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0
package/components/select/demo/index.md CHANGED
@@ -18,798 +18,360 @@ 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/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>
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</span>
26
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>
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>
32
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
33
33
  </auro-menu>
34
+ <span slot="helpText">
35
+ Help text - Lorem ipsum solar lorem ipsum solar
36
+ </span>
34
37
  </auro-select>
35
38
  <!-- AURO-GENERATED-CONTENT:END -->
36
39
  </div>
37
40
  <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>
41
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic-ondark.html) -->
42
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic-ondark.html -->
43
+ <auro-select onDark placeholder="Placeholder content">
44
+ <span slot="bib.fullscreen.headline">Bib Header</span>
45
+ <span slot="label">Name</span>
43
46
  <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>
47
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
48
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
49
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
50
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
51
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
52
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
50
53
  </auro-menu>
54
+ <span slot="helpText">
55
+ Help text - Lorem ipsum solar lorem ipsum solar
56
+ </span>
51
57
  </auro-select>
52
58
  <!-- AURO-GENERATED-CONTENT:END -->
53
59
  </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
60
 
59
- ```html
60
- <auro-select>
61
- <span slot="bib.fullscreen.headline">Bib Headline</span>
62
- <span slot="label">Select Example</span>
63
- <auro-menu>
64
- <auro-menuoption value="stops">Stops</auro-menuoption>
65
- <auro-menuoption value="price">Price</auro-menuoption>
66
- <auro-menuoption value="duration">Duration</auro-menuoption>
67
- <auro-menuoption value="departure">Departure</auro-menuoption>
68
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
69
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
70
- </auro-menu>
71
- </auro-select>
72
- ```
73
- <!-- AURO-GENERATED-CONTENT:END -->
74
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
75
- <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
76
- <auro-select onDark>
77
- <span slot="bib.fullscreen.headline">Bib Headline</span>
78
- <span slot="label">Select Example</span>
79
- <auro-menu>
80
- <auro-menuoption value="stops">Stops</auro-menuoption>
81
- <auro-menuoption value="price">Price</auro-menuoption>
82
- <auro-menuoption value="duration">Duration</auro-menuoption>
83
- <auro-menuoption value="departure">Departure</auro-menuoption>
84
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
85
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
86
- </auro-menu>
87
- </auro-select>
88
- <!-- AURO-GENERATED-CONTENT:END -->
89
- </auro-accordion>
90
-
91
- ## placeholder
92
-
93
- Use the `placeholder` slot to inject a custom placeholder option with the select element.
94
-
95
- <div class="exampleWrapper">
96
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customPlaceholder.html) -->
97
- <!-- The below content is automatically added from ./../apiExamples/customPlaceholder.html -->
98
- <auro-select>
99
- <span slot="bib.fullscreen.headline">Bib Headline</span>
100
- <label slot="placeholder">Please select your preferred option</label>
101
- <auro-menu>
102
- <auro-menuoption value="stops">Stops</auro-menuoption>
103
- <auro-menuoption value="price">Price</auro-menuoption>
104
- <auro-menuoption value="duration">Duration</auro-menuoption>
105
- <auro-menuoption value="departure">Departure</auro-menuoption>
106
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
107
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
108
- </auro-menu>
109
- </auro-select>
110
- <!-- AURO-GENERATED-CONTENT:END -->
111
- </div>
112
- <auro-accordion alignRight>
113
- <span slot="trigger">See code</span>
114
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customPlaceholder.html) -->
115
- <!-- The below code snippet is automatically added from ./../apiExamples/customPlaceholder.html -->
116
-
117
- ```html
118
- <auro-select>
119
- <span slot="bib.fullscreen.headline">Bib Headline</span>
120
- <label slot="placeholder">Please select your preferred option</label>
121
- <auro-menu>
122
- <auro-menuoption value="stops">Stops</auro-menuoption>
123
- <auro-menuoption value="price">Price</auro-menuoption>
124
- <auro-menuoption value="duration">Duration</auro-menuoption>
125
- <auro-menuoption value="departure">Departure</auro-menuoption>
126
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
127
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
128
- </auro-menu>
129
- </auro-select>
130
- ```
131
- <!-- AURO-GENERATED-CONTENT:END -->
132
- </auro-accordion>
133
-
134
- ## Label, placeholder and help text slots
135
-
136
- The following example illustrates the use of the `label`, `placeholder` and `helptext` slots for additional placement of content around the select menu.
137
-
138
- <div class="exampleWrapper">
139
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots.html) -->
140
- <!-- The below content is automatically added from ./../apiExamples/slots.html -->
141
- <auro-select>
142
- <span slot="bib.fullscreen.headline">Bib Headline</span>
143
- <label slot="placeholder">Placeholder Text</label>
144
- <span slot="label">Please choose a preference</span>
145
- <span slot="helpText">Preferences are maintained for future use</span>
146
- <auro-menu>
147
- <auro-menuoption value="stops">Stops</auro-menuoption>
148
- <auro-menuoption value="price">Price</auro-menuoption>
149
- <auro-menuoption value="duration">Duration</auro-menuoption>
150
- <auro-menuoption value="departure">Departure</auro-menuoption>
151
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
152
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
153
- </auro-menu>
154
- </auro-select>
155
- <!-- AURO-GENERATED-CONTENT:END -->
156
- </div>
157
- <auro-accordion alignRight>
158
- <span slot="trigger">See code</span>
159
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slots.html) -->
160
- <!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->
161
-
162
- ```html
163
- <auro-select>
164
- <span slot="bib.fullscreen.headline">Bib Headline</span>
165
- <label slot="placeholder">Placeholder Text</label>
166
- <span slot="label">Please choose a preference</span>
167
- <span slot="helpText">Preferences are maintained for future use</span>
168
- <auro-menu>
169
- <auro-menuoption value="stops">Stops</auro-menuoption>
170
- <auro-menuoption value="price">Price</auro-menuoption>
171
- <auro-menuoption value="duration">Duration</auro-menuoption>
172
- <auro-menuoption value="departure">Departure</auro-menuoption>
173
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
174
- <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
175
- </auro-menu>
176
- </auro-select>
177
- ```
178
- <!-- AURO-GENERATED-CONTENT:END -->
179
- </auro-accordion>
180
-
181
- ## Autofill/Autocomplete Support
182
-
183
- Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
61
+ ### Emphasized
184
62
 
185
63
  <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>
64
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
65
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
66
+ <div style="display: flex; flex-direction: row; gap: 10px;">
67
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
68
+ <span slot="label">Select Example</span>
69
+ <auro-menu nocheckmark>
70
+ <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>
73
+ </auro-menuoption>
74
+ <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>
77
+ </auro-menuoption>
78
+ <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>
81
+ </auro-menuoption>
82
+ <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>
85
+ </auro-menuoption>
86
+ <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>
89
+ </auro-menuoption>
90
+ </auro-menu>
91
+ </auro-select>
92
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
93
+ <span slot="label">Select Example</span>
94
+ <auro-menu nocheckmark>
95
+ <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>
98
+ </auro-menuoption>
99
+ <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>
102
+ </auro-menuoption>
103
+ <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>
106
+ </auro-menuoption>
107
+ <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>
110
+ </auro-menuoption>
111
+ <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>
114
+ </auro-menuoption>
115
+ </auro-menu>
116
+ </auro-select>
117
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
118
+ <span slot="label">Select Example</span>
119
+ <span slot="helptext">no displayValue in menuoptions</span>
120
+ <auro-menu nocheckmark>
121
+ <auro-menuoption value="flights">
122
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
123
+ </auro-menuoption>
124
+ <auro-menuoption value="cars">
125
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
126
+ </auro-menuoption>
127
+ <auro-menuoption value="hotels">
128
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
129
+ </auro-menuoption>
130
+ <auro-menuoption value="packages">
131
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
132
+ </auro-menuoption>
133
+ <auro-menuoption value="cruises">
134
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
135
+ </auro-menuoption>
350
136
  </auro-menu>
351
137
  </auro-select>
352
138
  </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
139
  <!-- AURO-GENERATED-CONTENT:END -->
388
140
  </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>
141
+ <div class="exampleWrapper--ondark" aria-hidden>
142
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
143
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
144
+ <div style="display: flex; flex-direction: row; gap: 10px;">
145
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
146
+ <span slot="label">Select Example</span>
147
+ <auro-menu nocheckmark>
148
+ <auro-menuoption value="flights">
149
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
150
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
151
+ </auro-menuoption>
152
+ <auro-menuoption value="cars">
153
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
154
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
155
+ </auro-menuoption>
156
+ <auro-menuoption value="hotels">
157
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
158
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
159
+ </auro-menuoption>
160
+ <auro-menuoption value="packages">
161
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
162
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
163
+ </auro-menuoption>
164
+ <auro-menuoption value="cruises">
165
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
166
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
167
+ </auro-menuoption>
451
168
  </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>
169
+ </auro-select>
170
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark style="display:inline-block;">
171
+ <span slot="label">Select Example</span>
172
+ <auro-menu nocheckmark>
173
+ <auro-menuoption value="flights">
174
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
175
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
176
+ </auro-menuoption>
177
+ <auro-menuoption value="cars">
178
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
179
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
180
+ </auro-menuoption>
181
+ <auro-menuoption value="hotels">
182
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
183
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
184
+ </auro-menuoption>
185
+ <auro-menuoption value="packages">
186
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
187
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
188
+ </auro-menuoption>
189
+ <auro-menuoption value="cruises">
190
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
191
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
192
+ </auro-menuoption>
494
193
  </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>
194
+ </auro-select>
195
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark required style="display:inline-block;">
196
+ <span slot="label">Select Example</span>
197
+ <span slot="helptext">no displayValue in menuoptions</span>
198
+ <auro-menu nocheckmark>
199
+ <auro-menuoption value="flights">
200
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
201
+ </auro-menuoption>
202
+ <auro-menuoption value="cars">
203
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
204
+ </auro-menuoption>
205
+ <auro-menuoption value="hotels">
206
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
207
+ </auro-menuoption>
208
+ <auro-menuoption value="packages">
209
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
210
+ </auro-menuoption>
211
+ <auro-menuoption value="cruises">
212
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
213
+ </auro-menuoption>
530
214
  </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>
215
+ </auro-select>
216
+ </div>
697
217
  <!-- AURO-GENERATED-CONTENT:END -->
698
218
  </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
219
 
738
- ## Disabled state
739
-
740
- Use the `disabled` boolean attribute to toggle the disabled UI.
220
+ ### Snowflake
741
221
 
742
222
  <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>
223
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
224
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
225
+ <div style="display: flex; flex-direction: row; gap: 10px;">
226
+ <auro-select placeholder="placeholder text" layout="snowflake" shape="snowflake" forceDisplayValue style="display:inline-block;">
227
+ <span slot="label">Select Example</span>
228
+ <auro-menu nocheckmark>
229
+ <auro-menuoption value="flights">
230
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
231
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
232
+ </auro-menuoption>
233
+ <auro-menuoption value="cars">
234
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
235
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
236
+ </auro-menuoption>
237
+ <auro-menuoption value="hotels">
238
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
239
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
240
+ </auro-menuoption>
241
+ <auro-menuoption value="packages">
242
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
243
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
244
+ </auro-menuoption>
245
+ <auro-menuoption value="cruises">
246
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
247
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
248
+ </auro-menuoption>
249
+ </auro-menu>
250
+ </auro-select>
251
+ <auro-select layout="snowflake" shape="snowflake" value="flights" style="display:inline-block;">
252
+ <span slot="label">Select Example</span>
253
+ <auro-menu nocheckmark>
254
+ <auro-menuoption value="flights">
255
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
256
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
257
+ </auro-menuoption>
258
+ <auro-menuoption value="cars">
259
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
260
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
261
+ </auro-menuoption>
262
+ <auro-menuoption value="hotels">
263
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
264
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
265
+ </auro-menuoption>
266
+ <auro-menuoption value="packages">
267
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
268
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
269
+ </auro-menuoption>
270
+ <auro-menuoption value="cruises">
271
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
272
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
273
+ </auro-menuoption>
274
+ </auro-menu>
275
+ </auro-select>
276
+ <auro-select layout="snowflake" shape="snowflake" placeholder="placeholder text" required style="display:inline-block;">
277
+ <span slot="label">Select Example Placeholder</span>
278
+ <span slot="helptext">no displayValue in menuoptions</span>
279
+ <auro-menu nocheckmark>
280
+ <auro-menuoption value="flights">
281
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
282
+ </auro-menuoption>
283
+ <auro-menuoption value="cars">
284
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
285
+ </auro-menuoption>
286
+ <auro-menuoption value="hotels">
287
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
288
+ </auro-menuoption>
289
+ <auro-menuoption value="packages">
290
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
291
+ </auro-menuoption>
292
+ <auro-menuoption value="cruises">
293
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
294
+ </auro-menuoption>
295
+ </auro-menu>
296
+ </auro-select>
297
+ </div>
758
298
  <!-- AURO-GENERATED-CONTENT:END -->
759
299
  </div>
760
300
  <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>
301
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
302
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
303
+ <div style="display: flex; flex-direction: row; gap: 10px;">
304
+ <auro-select layout="snowflake" shape="snowflake" value="flights" forceDisplayValue ondark style="display:inline-block;">
305
+ <span slot="label">Select Example</span>
306
+ <auro-menu nocheckmark>
307
+ <auro-menuoption value="flights">
308
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
309
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
310
+ </auro-menuoption>
311
+ <auro-menuoption value="cars">
312
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
313
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
314
+ </auro-menuoption>
315
+ <auro-menuoption value="hotels">
316
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
317
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
318
+ </auro-menuoption>
319
+ <auro-menuoption value="packages">
320
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
321
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
322
+ </auro-menuoption>
323
+ <auro-menuoption value="cruises">
324
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
325
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
326
+ </auro-menuoption>
327
+ </auro-menu>
328
+ </auro-select>
329
+ <auro-select layout="snowflake" shape="snowflake" value="flights" ondark style="display:inline-block;">
330
+ <span slot="label">Select Example</span>
331
+ <auro-menu nocheckmark>
332
+ <auro-menuoption value="flights">
333
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
334
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
335
+ </auro-menuoption>
336
+ <auro-menuoption value="cars">
337
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
338
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
339
+ </auro-menuoption>
340
+ <auro-menuoption value="hotels">
341
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
342
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
343
+ </auro-menuoption>
344
+ <auro-menuoption value="packages">
345
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
346
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
347
+ </auro-menuoption>
348
+ <auro-menuoption value="cruises">
349
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
350
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
351
+ </auro-menuoption>
352
+ </auro-menu>
353
+ </auro-select>
354
+ <auro-select layout="snowflake" shape="snowflake" value="flights" required ondark style="display:inline-block;">
355
+ <span slot="label">Select Example</span>
356
+ <span slot="helptext">no displayValue in menuoptions</span>
357
+ <auro-menu nocheckmark>
358
+ <auro-menuoption value="flights">
359
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
360
+ </auro-menuoption>
361
+ <auro-menuoption value="cars">
362
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
363
+ </auro-menuoption>
364
+ <auro-menuoption value="hotels">
365
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
366
+ </auro-menuoption>
367
+ <auro-menuoption value="packages">
368
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
369
+ </auro-menuoption>
370
+ <auro-menuoption value="cruises">
371
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
372
+ </auro-menuoption>
373
+ </auro-menu>
374
+ </auro-select>
375
+ </div>
776
376
  <!-- AURO-GENERATED-CONTENT:END -->
777
377
  </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>