@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.5 → 0.0.0-pr624.50

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 (115) 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 +47 -34
  9. package/components/checkbox/demo/index.md +2 -2
  10. package/components/checkbox/demo/index.min.js +47 -34
  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 +47 -34
  15. package/components/checkbox/dist/registered.js +47 -34
  16. package/components/combobox/demo/api.md +112 -8
  17. package/components/combobox/demo/api.min.js +3203 -760
  18. package/components/combobox/demo/index.md +6 -30
  19. package/components/combobox/demo/index.min.js +3203 -760
  20. package/components/combobox/dist/auro-combobox.d.ts +37 -16
  21. package/components/combobox/dist/index.js +3093 -791
  22. package/components/combobox/dist/registered.js +3093 -791
  23. package/components/counter/demo/api.html +1 -0
  24. package/components/counter/demo/api.md +29 -21
  25. package/components/counter/demo/api.min.js +3332 -615
  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 +3332 -615
  29. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  30. package/components/counter/dist/auro-counter-group.d.ts +90 -7
  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 +3332 -615
  35. package/components/counter/dist/registered.js +3332 -615
  36. package/components/datepicker/demo/api.md +36 -19
  37. package/components/datepicker/demo/api.min.js +14940 -10964
  38. package/components/datepicker/demo/index.md +80 -0
  39. package/components/datepicker/demo/index.min.js +14940 -10964
  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 +11817 -7841
  44. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  45. package/components/datepicker/dist/registered.js +11817 -7841
  46. package/components/dropdown/demo/api.md +25 -12
  47. package/components/dropdown/demo/api.min.js +552 -148
  48. package/components/dropdown/demo/index.md +57 -9
  49. package/components/dropdown/demo/index.min.js +552 -148
  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 +552 -148
  53. package/components/dropdown/dist/registered.js +552 -148
  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 +958 -272
  63. package/components/input/demo/index.md +48 -32
  64. package/components/input/demo/index.min.js +957 -271
  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 +33 -9
  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 +957 -271
  71. package/components/input/dist/registered.js +957 -271
  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 +71 -83
  88. package/components/radio/demo/index.min.js +71 -83
  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 +71 -83
  92. package/components/radio/dist/registered.js +71 -83
  93. package/components/select/demo/api.js +0 -2
  94. package/components/select/demo/api.md +100 -45
  95. package/components/select/demo/api.min.js +3009 -526
  96. package/components/select/demo/index.html +1 -0
  97. package/components/select/demo/index.md +176 -768
  98. package/components/select/demo/index.min.js +3013 -518
  99. package/components/select/dist/auro-select.d.ts +126 -11
  100. package/components/select/dist/helptextVersion.d.ts +2 -0
  101. package/components/select/dist/index.js +2892 -538
  102. package/components/select/dist/registered.js +2892 -538
  103. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  104. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  105. package/package.json +28 -26
  106. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  107. /package/components/{dropdown → datepicker}/dist/styles/default/color-css.d.ts +0 -0
  108. /package/components/{dropdown/dist/styles/default/bibStyles-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  109. /package/components/{dropdown/dist/styles/default/style-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  110. /package/components/{dropdown/dist/styles → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  111. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  112. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  113. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  114. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  115. /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,206 @@ 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 with placeholder</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
59
+ ### Emphasized
135
60
 
136
- The following example illustrates the use of the `label`, `placeholder` and `helptext` slots for additional placement of content around the select menu.
61
+ Only supported for onDark usage.
137
62
 
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.
184
-
185
- <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>
63
+ <div class="exampleWrapper--ondark" aria-hidden>
64
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
65
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
66
+ <div style="display: flex; flex-direction: row; gap: 10px;">
67
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
68
+ <span slot="label">Select Example</span>
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" ondark 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" ondark 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
141
 
421
- ## Example with nested menus
142
+ ### Snowflake
422
143
 
423
- This example shows nesting `<auro-menu>` elements to create submenus.
144
+ Only supported for onDark usage.
424
145
 
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>
146
+ <div class="exampleWrapper--ondark" aria-hidden>
147
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
148
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
149
+ <div style="display: flex; flex-direction: row; gap: 10px;">
150
+ <auro-select layout="snowflake" shape="snowflake" value="flights" forceDisplayValue ondark style="display:inline-block;">
151
+ <span slot="label">Select Example</span>
152
+ <auro-menu nocheckmark>
153
+ <auro-menuoption value="flights">
154
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
155
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
156
+ </auro-menuoption>
157
+ <auro-menuoption value="cars">
158
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
159
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
160
+ </auro-menuoption>
161
+ <auro-menuoption value="hotels">
162
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
163
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
164
+ </auro-menuoption>
165
+ <auro-menuoption value="packages">
166
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
167
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
168
+ </auro-menuoption>
169
+ <auro-menuoption value="cruises">
170
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
171
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
172
+ </auro-menuoption>
451
173
  </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>
174
+ </auro-select>
175
+ <auro-select layout="snowflake" shape="snowflake" value="flights" ondark style="display:inline-block;">
176
+ <span slot="label">Select Example</span>
177
+ <auro-menu nocheckmark>
178
+ <auro-menuoption value="flights">
179
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
180
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
181
+ </auro-menuoption>
182
+ <auro-menuoption value="cars">
183
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
184
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
185
+ </auro-menuoption>
186
+ <auro-menuoption value="hotels">
187
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
188
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
189
+ </auro-menuoption>
190
+ <auro-menuoption value="packages">
191
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
192
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
193
+ </auro-menuoption>
194
+ <auro-menuoption value="cruises">
195
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
196
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
197
+ </auro-menuoption>
494
198
  </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>
199
+ </auro-select>
200
+ <auro-select layout="snowflake" shape="snowflake" value="flights" required ondark style="display:inline-block;">
201
+ <span slot="label">Select Example</span>
202
+ <span slot="helpText">no displayValue in menuoptions</span>
203
+ <auro-menu nocheckmark>
204
+ <auro-menuoption value="flights">
205
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
206
+ </auro-menuoption>
207
+ <auro-menuoption value="cars">
208
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
209
+ </auro-menuoption>
210
+ <auro-menuoption value="hotels">
211
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
212
+ </auro-menuoption>
213
+ <auro-menuoption value="packages">
214
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
215
+ </auro-menuoption>
216
+ <auro-menuoption value="cruises">
217
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
218
+ </auro-menuoption>
530
219
  </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>
697
- <!-- AURO-GENERATED-CONTENT:END -->
698
- </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
-
738
- ## Disabled state
739
-
740
- Use the `disabled` boolean attribute to toggle the disabled UI.
741
-
742
- <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>
758
- <!-- AURO-GENERATED-CONTENT:END -->
759
- </div>
760
- <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>
220
+ </auro-select>
221
+ </div>
776
222
  <!-- AURO-GENERATED-CONTENT:END -->
777
223
  </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>