@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

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 (231) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +66 -0
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  5. package/components/bibtemplate/dist/index.d.ts +2 -0
  6. package/components/bibtemplate/dist/index.js +395 -0
  7. package/components/bibtemplate/dist/registered.js +395 -0
  8. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  9. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  10. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  11. package/components/checkbox/demo/api.md +489 -0
  12. package/components/checkbox/demo/api.min.js +2133 -0
  13. package/components/checkbox/demo/index.md +55 -0
  14. package/components/checkbox/demo/index.min.js +2108 -0
  15. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  16. package/components/checkbox/demo/readme.md +142 -0
  17. package/components/checkbox/dist/auro-checkbox-group.d.ts +176 -0
  18. package/components/checkbox/dist/auro-checkbox.d.ts +209 -0
  19. package/components/checkbox/dist/index.d.ts +3 -0
  20. package/components/checkbox/dist/index.js +2057 -0
  21. package/components/checkbox/dist/registered.js +2058 -0
  22. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  23. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  24. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  25. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  26. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  27. package/components/combobox/demo/api.md +2287 -0
  28. package/components/combobox/demo/api.min.js +18025 -0
  29. package/components/combobox/demo/index.md +196 -0
  30. package/components/combobox/demo/index.min.js +17930 -0
  31. package/components/combobox/demo/keyboardBehavior.md +281 -0
  32. package/components/combobox/demo/readme.md +158 -0
  33. package/components/combobox/dist/auro-combobox.d.ts +578 -0
  34. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +9 -0
  35. package/components/combobox/dist/index.d.ts +2 -0
  36. package/components/combobox/dist/index.js +15845 -0
  37. package/components/combobox/dist/registered.js +15847 -0
  38. package/components/combobox/dist/styles/emphasized/style-css.d.ts +2 -0
  39. package/components/combobox/dist/styles/snowflake/style-css.d.ts +2 -0
  40. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  41. package/components/counter/demo/api.md +1285 -0
  42. package/components/counter/demo/api.min.js +8237 -0
  43. package/components/counter/demo/index.md +92 -0
  44. package/components/counter/demo/index.min.js +8218 -0
  45. package/components/counter/demo/keyboardBehavior.md +127 -0
  46. package/components/counter/demo/readme.md +161 -0
  47. package/components/counter/dist/auro-counter-button.d.ts +14 -0
  48. package/components/counter/dist/auro-counter-group.d.ts +390 -0
  49. package/components/counter/dist/auro-counter-wrapper.d.ts +17 -0
  50. package/components/counter/dist/auro-counter.d.ts +136 -0
  51. package/components/counter/dist/buttonVersion.d.ts +2 -0
  52. package/components/counter/dist/iconVersion.d.ts +2 -0
  53. package/components/counter/dist/index.d.ts +3 -0
  54. package/components/counter/dist/index.js +8140 -0
  55. package/components/counter/dist/keyboardStrategy.d.ts +4 -0
  56. package/components/counter/dist/registered.js +8141 -0
  57. package/components/counter/dist/styles/color-css.d.ts +2 -0
  58. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  59. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  60. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  61. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  62. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  63. package/components/counter/dist/styles/shapeSize-css.d.ts +2 -0
  64. package/components/counter/dist/styles/style-css.d.ts +2 -0
  65. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  66. package/components/datepicker/demo/api.md +1824 -0
  67. package/components/datepicker/demo/api.min.js +24654 -0
  68. package/components/datepicker/demo/index.md +158 -0
  69. package/components/datepicker/demo/index.min.js +24375 -0
  70. package/components/datepicker/demo/keyboardBehavior.md +19 -0
  71. package/components/datepicker/demo/readme.md +137 -0
  72. package/components/datepicker/dist/auro-calendar-cell.d.ts +169 -0
  73. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  74. package/components/datepicker/dist/auro-calendar.d.ts +173 -0
  75. package/components/datepicker/dist/auro-datepicker.d.ts +716 -0
  76. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  77. package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +1 -0
  78. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  79. package/components/datepicker/dist/index.d.ts +2 -0
  80. package/components/datepicker/dist/index.js +24290 -0
  81. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  82. package/components/datepicker/dist/registered.js +24290 -0
  83. package/components/datepicker/dist/styles/classic/color-css.d.ts +2 -0
  84. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  85. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  86. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  87. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  88. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  89. package/components/datepicker/dist/styles/shapeSize-css.d.ts +2 -0
  90. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +2 -0
  91. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +2 -0
  92. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  93. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  94. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  95. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  96. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  97. package/components/datepicker/dist/utilities.d.ts +78 -0
  98. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  99. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  100. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  101. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  102. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  103. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  104. package/components/dropdown/demo/api.md +1358 -0
  105. package/components/dropdown/demo/api.min.js +5019 -0
  106. package/components/dropdown/demo/index.md +283 -0
  107. package/components/dropdown/demo/index.min.js +4954 -0
  108. package/components/dropdown/demo/keyboardBehavior.md +77 -0
  109. package/components/dropdown/demo/readme.md +160 -0
  110. package/components/dropdown/dist/auro-dropdown.d.ts +482 -0
  111. package/components/dropdown/dist/auro-dropdownBib.d.ts +128 -0
  112. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
  113. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  114. package/components/dropdown/dist/index.d.ts +2 -0
  115. package/components/dropdown/dist/index.js +4847 -0
  116. package/components/dropdown/dist/registered.js +4847 -0
  117. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +2 -0
  118. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +2 -0
  119. package/components/dropdown/dist/styles/classic/color-css.d.ts +2 -0
  120. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  121. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  122. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  123. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  124. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  125. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  126. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  127. package/components/form/demo/api.md +319 -0
  128. package/components/form/demo/api.min.js +71170 -0
  129. package/components/form/demo/index.md +128 -0
  130. package/components/form/demo/index.min.js +71170 -0
  131. package/components/form/demo/keyboardBehavior.md +0 -0
  132. package/components/form/demo/readme.md +145 -0
  133. package/components/form/dist/auro-form.d.ts +280 -0
  134. package/components/form/dist/index.d.ts +2 -0
  135. package/components/form/dist/index.js +718 -0
  136. package/components/form/dist/registered.d.ts +1 -0
  137. package/components/form/dist/registered.js +718 -0
  138. package/components/form/dist/styles/style-css.d.ts +2 -0
  139. package/components/helptext/dist/auro-helptext.d.ts +69 -0
  140. package/components/helptext/dist/index.d.ts +2 -0
  141. package/components/helptext/dist/index.js +231 -0
  142. package/components/helptext/dist/registered.js +231 -0
  143. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  144. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  145. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  146. package/components/input/demo/api.md +1397 -0
  147. package/components/input/demo/api.min.js +7473 -0
  148. package/components/input/demo/index.md +161 -0
  149. package/components/input/demo/index.min.js +7393 -0
  150. package/components/input/demo/keyboardBehavior.md +0 -0
  151. package/components/input/demo/readme.md +134 -0
  152. package/components/input/dist/auro-input.d.ts +207 -0
  153. package/components/input/dist/base-input.d.ts +628 -0
  154. package/components/input/dist/buttonVersion.d.ts +2 -0
  155. package/components/input/dist/i18n.d.ts +18 -0
  156. package/components/input/dist/iconVersion.d.ts +2 -0
  157. package/components/input/dist/index.d.ts +2 -0
  158. package/components/input/dist/index.js +7305 -0
  159. package/components/input/dist/registered.js +7305 -0
  160. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  161. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  162. package/components/input/dist/styles/color-css.d.ts +2 -0
  163. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  164. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  165. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  166. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  167. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  168. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  169. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  170. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  171. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  172. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  173. package/components/input/dist/styles/style-css.d.ts +2 -0
  174. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  175. package/components/input/dist/utilities.d.ts +25 -0
  176. package/components/layoutElement/dist/auroElement.d.ts +40 -0
  177. package/components/layoutElement/dist/index.d.ts +2 -0
  178. package/components/layoutElement/dist/index.js +107 -0
  179. package/components/layoutElement/dist/registered.js +107 -0
  180. package/components/menu/demo/api.md +1201 -0
  181. package/components/menu/demo/api.min.js +2397 -0
  182. package/components/menu/demo/index.md +72 -0
  183. package/components/menu/demo/index.min.js +2290 -0
  184. package/components/menu/demo/keyboardBehavior.md +0 -0
  185. package/components/menu/demo/readme.md +145 -0
  186. package/components/menu/dist/auro-menu-utils.d.ts +34 -0
  187. package/components/menu/dist/auro-menu.context.d.ts +239 -0
  188. package/components/menu/dist/auro-menu.d.ts +317 -0
  189. package/components/menu/dist/auro-menuoption.d.ts +210 -0
  190. package/components/menu/dist/iconVersion.d.ts +2 -0
  191. package/components/menu/dist/index.d.ts +4 -0
  192. package/components/menu/dist/index.js +2253 -0
  193. package/components/menu/dist/registered.js +2201 -0
  194. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  195. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  196. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  197. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  198. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  199. package/components/radio/demo/api.md +675 -0
  200. package/components/radio/demo/api.min.js +2210 -0
  201. package/components/radio/demo/index.md +73 -0
  202. package/components/radio/demo/index.min.js +2167 -0
  203. package/components/radio/demo/keyboardBehavior.md +0 -0
  204. package/components/radio/demo/readme.md +141 -0
  205. package/components/radio/dist/auro-radio-group.d.ts +250 -0
  206. package/components/radio/dist/auro-radio.d.ts +180 -0
  207. package/components/radio/dist/index.d.ts +3 -0
  208. package/components/radio/dist/index.js +2116 -0
  209. package/components/radio/dist/registered.js +2117 -0
  210. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  211. package/components/radio/dist/styles/color-css.d.ts +2 -0
  212. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  213. package/components/radio/dist/styles/style-css.d.ts +2 -0
  214. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  215. package/components/select/demo/api.md +2378 -0
  216. package/components/select/demo/api.min.js +10542 -0
  217. package/components/select/demo/index.md +355 -0
  218. package/components/select/demo/index.min.js +10449 -0
  219. package/components/select/demo/keyboardBehavior.md +245 -0
  220. package/components/select/demo/readme.md +148 -0
  221. package/components/select/dist/auro-select.d.ts +553 -0
  222. package/components/select/dist/index.d.ts +2 -0
  223. package/components/select/dist/index.js +8376 -0
  224. package/components/select/dist/registered.js +8376 -0
  225. package/components/select/dist/selectKeyboardStrategy.d.ts +11 -0
  226. package/components/select/dist/styles/emphasized/color-css.d.ts +2 -0
  227. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  228. package/components/select/dist/styles/style-css.d.ts +2 -0
  229. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  230. package/custom-elements.json +18806 -0
  231. package/package.json +2 -2
package/components/select/demo/index.md ADDED
@@ -0,0 +1,355 @@
1
+ <!--
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
+ -->
6
+
7
+ # Select
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
+ `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
12
+ <!-- AURO-GENERATED-CONTENT:END -->
13
+
14
+ ## Use Cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
+ See description.
19
+ <!-- AURO-GENERATED-CONTENT:END -->
20
+
21
+ ## Example(s)
22
+
23
+ ### Basic
24
+
25
+ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
26
+
27
+ <div class="exampleWrapper">
28
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
29
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
30
+ <auro-select>
31
+ <span slot="ariaLabel.bib.close">Close Popup</span>
32
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
33
+ <span slot="label">Select Example</span>
34
+ <auro-menu>
35
+ <auro-menuoption value="stops">Stops</auro-menuoption>
36
+ <auro-menuoption value="price">Price</auro-menuoption>
37
+ <auro-menuoption value="duration">Duration</auro-menuoption>
38
+ <auro-menuoption value="departure">Departure</auro-menuoption>
39
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
40
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
41
+ </auro-menu>
42
+ </auro-select>
43
+ <!-- AURO-GENERATED-CONTENT:END -->
44
+ </div>
45
+ <auro-accordion alignRight>
46
+ <span slot="trigger">See code</span>
47
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
48
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
49
+
50
+ ```html
51
+ <auro-select>
52
+ <span slot="ariaLabel.bib.close">Close Popup</span>
53
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
54
+ <span slot="label">Select Example</span>
55
+ <auro-menu>
56
+ <auro-menuoption value="stops">Stops</auro-menuoption>
57
+ <auro-menuoption value="price">Price</auro-menuoption>
58
+ <auro-menuoption value="duration">Duration</auro-menuoption>
59
+ <auro-menuoption value="departure">Departure</auro-menuoption>
60
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
61
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
62
+ </auro-menu>
63
+ </auro-select>
64
+ ```
65
+ <!-- AURO-GENERATED-CONTENT:END -->
66
+ </auro-accordion>
67
+
68
+ ### Shape | Size | Layout Support
69
+
70
+ The `auro-select` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `layout="classic"`, `shape="classic"` and `size="lg"`.
71
+
72
+ #### Classic Layout (Legacy)
73
+
74
+ The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
75
+
76
+ <div class="exampleWrapper">
77
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
78
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
79
+ <auro-select>
80
+ <span slot="ariaLabel.bib.close">Close Popup</span>
81
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
82
+ <span slot="label">Select Example</span>
83
+ <auro-menu>
84
+ <auro-menuoption value="stops">Stops</auro-menuoption>
85
+ <auro-menuoption value="price">Price</auro-menuoption>
86
+ <auro-menuoption value="duration">Duration</auro-menuoption>
87
+ <auro-menuoption value="departure">Departure</auro-menuoption>
88
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
89
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
90
+ </auro-menu>
91
+ </auro-select>
92
+ <!-- AURO-GENERATED-CONTENT:END -->
93
+ </div>
94
+ <auro-accordion alignRight>
95
+ <span slot="trigger">See code</span>
96
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
97
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
98
+
99
+ ```html
100
+ <auro-select>
101
+ <span slot="ariaLabel.bib.close">Close Popup</span>
102
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
103
+ <span slot="label">Select Example</span>
104
+ <auro-menu>
105
+ <auro-menuoption value="stops">Stops</auro-menuoption>
106
+ <auro-menuoption value="price">Price</auro-menuoption>
107
+ <auro-menuoption value="duration">Duration</auro-menuoption>
108
+ <auro-menuoption value="departure">Departure</auro-menuoption>
109
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
110
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
111
+ </auro-menu>
112
+ </auro-select>
113
+ ```
114
+ <!-- AURO-GENERATED-CONTENT:END -->
115
+ </auro-accordion>
116
+
117
+ #### Emphasized Layout
118
+
119
+ The `emphasized` layout is only supported on light backgrounds.
120
+
121
+ The `emphasized` layout supports the following shapes:
122
+ - `pill`
123
+ - `pill-left`
124
+ - `pill-right`
125
+
126
+ The `emphasized` layout supports the following sizes:
127
+ - `xl`
128
+
129
+ <div class="exampleWrapper">
130
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
131
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
132
+ <div style="display: flex; flex-direction: row; gap: 10px;">
133
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
134
+ <span slot="ariaLabel.bib.close">Close Popup</span>
135
+ <span slot="label">Select Example</span>
136
+ <auro-menu nocheckmark>
137
+ <auro-menuoption value="flights">
138
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
139
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
140
+ </auro-menuoption>
141
+ <auro-menuoption value="cars">
142
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
143
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
144
+ </auro-menuoption>
145
+ <auro-menuoption value="hotels">
146
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
147
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
148
+ </auro-menuoption>
149
+ <auro-menuoption value="packages">
150
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
151
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
152
+ </auro-menuoption>
153
+ <auro-menuoption value="cruises">
154
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
155
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
156
+ </auro-menuoption>
157
+ </auro-menu>
158
+ </auro-select>
159
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
160
+ <span slot="label">Select Example</span>
161
+ <auro-menu nocheckmark>
162
+ <auro-menuoption value="flights">
163
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
164
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
165
+ </auro-menuoption>
166
+ <auro-menuoption value="cars">
167
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
168
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
169
+ </auro-menuoption>
170
+ <auro-menuoption value="hotels">
171
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
172
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
173
+ </auro-menuoption>
174
+ <auro-menuoption value="packages">
175
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
176
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
177
+ </auro-menuoption>
178
+ <auro-menuoption value="cruises">
179
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
180
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
181
+ </auro-menuoption>
182
+ </auro-menu>
183
+ </auro-select>
184
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
185
+ <span slot="label">Select Example</span>
186
+ <span slot="helpText">no displayValue in menuoptions</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-menuoption>
191
+ <auro-menuoption value="cars">
192
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
193
+ </auro-menuoption>
194
+ <auro-menuoption value="hotels">
195
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
196
+ </auro-menuoption>
197
+ <auro-menuoption value="packages">
198
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
199
+ </auro-menuoption>
200
+ <auro-menuoption value="cruises">
201
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
202
+ </auro-menuoption>
203
+ </auro-menu>
204
+ </auro-select>
205
+ </div>
206
+ <!-- AURO-GENERATED-CONTENT:END -->
207
+ </div>
208
+ <auro-accordion alignRight>
209
+ <span slot="trigger">See code</span>
210
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
211
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
212
+
213
+ ```html
214
+ <div style="display: flex; flex-direction: row; gap: 10px;">
215
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
216
+ <span slot="ariaLabel.bib.close">Close Popup</span>
217
+ <span slot="label">Select Example</span>
218
+ <auro-menu nocheckmark>
219
+ <auro-menuoption value="flights">
220
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
221
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
222
+ </auro-menuoption>
223
+ <auro-menuoption value="cars">
224
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
225
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
226
+ </auro-menuoption>
227
+ <auro-menuoption value="hotels">
228
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
229
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
230
+ </auro-menuoption>
231
+ <auro-menuoption value="packages">
232
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
233
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
234
+ </auro-menuoption>
235
+ <auro-menuoption value="cruises">
236
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
237
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
238
+ </auro-menuoption>
239
+ </auro-menu>
240
+ </auro-select>
241
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
242
+ <span slot="label">Select Example</span>
243
+ <auro-menu nocheckmark>
244
+ <auro-menuoption value="flights">
245
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
246
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
247
+ </auro-menuoption>
248
+ <auro-menuoption value="cars">
249
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
250
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
251
+ </auro-menuoption>
252
+ <auro-menuoption value="hotels">
253
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
254
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
255
+ </auro-menuoption>
256
+ <auro-menuoption value="packages">
257
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
258
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
259
+ </auro-menuoption>
260
+ <auro-menuoption value="cruises">
261
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
262
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
263
+ </auro-menuoption>
264
+ </auro-menu>
265
+ </auro-select>
266
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
267
+ <span slot="label">Select Example</span>
268
+ <span slot="helpText">no displayValue in menuoptions</span>
269
+ <auro-menu nocheckmark>
270
+ <auro-menuoption value="flights">
271
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
272
+ </auro-menuoption>
273
+ <auro-menuoption value="cars">
274
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
275
+ </auro-menuoption>
276
+ <auro-menuoption value="hotels">
277
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
278
+ </auro-menuoption>
279
+ <auro-menuoption value="packages">
280
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
281
+ </auro-menuoption>
282
+ <auro-menuoption value="cruises">
283
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
284
+ </auro-menuoption>
285
+ </auro-menu>
286
+ </auro-select>
287
+ </div>
288
+ ```
289
+ <!-- AURO-GENERATED-CONTENT:END -->
290
+ </auro-accordion>
291
+
292
+ #### Snowflake Layout
293
+
294
+ 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.
295
+
296
+ The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.
297
+
298
+ <div class="exampleWrapper--ondark">
299
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
300
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
301
+ <auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
302
+ <span slot="ariaLabel.bib.close">Close Popup</span>
303
+ <span slot="label">Label</span>
304
+ <span slot="helpText">Help Text</span>
305
+ <auro-menu nocheckmark>
306
+ <auro-menuoption value="flights">
307
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
308
+ </auro-menuoption>
309
+ <auro-menuoption value="cars">
310
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
311
+ </auro-menuoption>
312
+ <auro-menuoption value="hotels">
313
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
314
+ </auro-menuoption>
315
+ <auro-menuoption value="packages">
316
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
317
+ </auro-menuoption>
318
+ <auro-menuoption value="cruises">
319
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
320
+ </auro-menuoption>
321
+ </auro-menu>
322
+ </auro-select>
323
+ <!-- AURO-GENERATED-CONTENT:END -->
324
+ </div>
325
+ <auro-accordion alignRight>
326
+ <span slot="trigger">See code</span>
327
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
328
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
329
+
330
+ ```html
331
+ <auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
332
+ <span slot="ariaLabel.bib.close">Close Popup</span>
333
+ <span slot="label">Label</span>
334
+ <span slot="helpText">Help Text</span>
335
+ <auro-menu nocheckmark>
336
+ <auro-menuoption value="flights">
337
+ <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
338
+ </auro-menuoption>
339
+ <auro-menuoption value="cars">
340
+ <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
341
+ </auro-menuoption>
342
+ <auro-menuoption value="hotels">
343
+ <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
344
+ </auro-menuoption>
345
+ <auro-menuoption value="packages">
346
+ <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
347
+ </auro-menuoption>
348
+ <auro-menuoption value="cruises">
349
+ <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
350
+ </auro-menuoption>
351
+ </auro-menu>
352
+ </auro-select>
353
+ ```
354
+ <!-- AURO-GENERATED-CONTENT:END -->
355
+ </auro-accordion>