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

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