@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.4 → 0.0.0-pr624.40

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