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

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/package.json +32 -31
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -66
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +0 -2
  4. package/components/bibtemplate/dist/headerVersion.d.ts +0 -2
  5. package/components/bibtemplate/dist/iconVersion.d.ts +0 -2
  6. package/components/bibtemplate/dist/index.d.ts +0 -2
  7. package/components/bibtemplate/dist/index.js +0 -395
  8. package/components/bibtemplate/dist/registered.js +0 -395
  9. package/components/bibtemplate/dist/styles/color-css.d.ts +0 -2
  10. package/components/bibtemplate/dist/styles/style-css.d.ts +0 -2
  11. package/components/bibtemplate/dist/styles/tokens-css.d.ts +0 -2
  12. package/components/checkbox/demo/api.md +0 -489
  13. package/components/checkbox/demo/api.min.js +0 -2133
  14. package/components/checkbox/demo/index.md +0 -55
  15. package/components/checkbox/demo/index.min.js +0 -2108
  16. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  17. package/components/checkbox/demo/readme.md +0 -142
  18. package/components/checkbox/dist/auro-checkbox-group.d.ts +0 -176
  19. package/components/checkbox/dist/auro-checkbox.d.ts +0 -209
  20. package/components/checkbox/dist/index.d.ts +0 -3
  21. package/components/checkbox/dist/index.js +0 -2057
  22. package/components/checkbox/dist/registered.js +0 -2058
  23. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +0 -2
  24. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +0 -2
  25. package/components/checkbox/dist/styles/color-css.d.ts +0 -2
  26. package/components/checkbox/dist/styles/colorGroup-css.d.ts +0 -2
  27. package/components/checkbox/dist/styles/tokens-css.d.ts +0 -2
  28. package/components/combobox/demo/api.md +0 -2287
  29. package/components/combobox/demo/api.min.js +0 -17800
  30. package/components/combobox/demo/index.md +0 -196
  31. package/components/combobox/demo/index.min.js +0 -17705
  32. package/components/combobox/demo/keyboardBehavior.md +0 -281
  33. package/components/combobox/demo/readme.md +0 -158
  34. package/components/combobox/dist/auro-combobox.d.ts +0 -566
  35. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +0 -8
  36. package/components/combobox/dist/index.d.ts +0 -2
  37. package/components/combobox/dist/index.js +0 -15604
  38. package/components/combobox/dist/registered.js +0 -15606
  39. package/components/combobox/dist/styles/emphasized/style-css.d.ts +0 -2
  40. package/components/combobox/dist/styles/snowflake/style-css.d.ts +0 -2
  41. package/components/combobox/dist/styles/style-css.d.ts +0 -2
  42. package/components/counter/demo/api.md +0 -1285
  43. package/components/counter/demo/api.min.js +0 -8112
  44. package/components/counter/demo/index.md +0 -92
  45. package/components/counter/demo/index.min.js +0 -8093
  46. package/components/counter/demo/keyboardBehavior.md +0 -127
  47. package/components/counter/demo/readme.md +0 -161
  48. package/components/counter/dist/auro-counter-button.d.ts +0 -14
  49. package/components/counter/dist/auro-counter-group.d.ts +0 -390
  50. package/components/counter/dist/auro-counter-wrapper.d.ts +0 -17
  51. package/components/counter/dist/auro-counter.d.ts +0 -136
  52. package/components/counter/dist/buttonVersion.d.ts +0 -2
  53. package/components/counter/dist/iconVersion.d.ts +0 -2
  54. package/components/counter/dist/index.d.ts +0 -3
  55. package/components/counter/dist/index.js +0 -8015
  56. package/components/counter/dist/keyboardStrategy.d.ts +0 -4
  57. package/components/counter/dist/registered.js +0 -8016
  58. package/components/counter/dist/styles/color-css.d.ts +0 -2
  59. package/components/counter/dist/styles/counter-button-color-css.d.ts +0 -2
  60. package/components/counter/dist/styles/counter-button-css.d.ts +0 -2
  61. package/components/counter/dist/styles/counter-group-css.d.ts +0 -2
  62. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +0 -2
  63. package/components/counter/dist/styles/counter-wrapper-css.d.ts +0 -2
  64. package/components/counter/dist/styles/shapeSize-css.d.ts +0 -2
  65. package/components/counter/dist/styles/style-css.d.ts +0 -2
  66. package/components/counter/dist/styles/tokens-css.d.ts +0 -2
  67. package/components/datepicker/demo/api.md +0 -1824
  68. package/components/datepicker/demo/api.min.js +0 -24510
  69. package/components/datepicker/demo/index.md +0 -158
  70. package/components/datepicker/demo/index.min.js +0 -24231
  71. package/components/datepicker/demo/keyboardBehavior.md +0 -24
  72. package/components/datepicker/demo/readme.md +0 -137
  73. package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -169
  74. package/components/datepicker/dist/auro-calendar-month.d.ts +0 -20
  75. package/components/datepicker/dist/auro-calendar.d.ts +0 -173
  76. package/components/datepicker/dist/auro-datepicker.d.ts +0 -715
  77. package/components/datepicker/dist/buttonVersion.d.ts +0 -2
  78. package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +0 -1
  79. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  80. package/components/datepicker/dist/index.d.ts +0 -2
  81. package/components/datepicker/dist/index.js +0 -24146
  82. package/components/datepicker/dist/popoverVersion.d.ts +0 -2
  83. package/components/datepicker/dist/registered.js +0 -24146
  84. package/components/datepicker/dist/styles/classic/color-css.d.ts +0 -2
  85. package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
  86. package/components/datepicker/dist/styles/color-calendar-css.d.ts +0 -2
  87. package/components/datepicker/dist/styles/color-cell-css.d.ts +0 -2
  88. package/components/datepicker/dist/styles/color-css.d.ts +0 -2
  89. package/components/datepicker/dist/styles/color-month-css.d.ts +0 -2
  90. package/components/datepicker/dist/styles/shapeSize-css.d.ts +0 -2
  91. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +0 -2
  92. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +0 -2
  93. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +0 -2
  94. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +0 -2
  95. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +0 -2
  96. package/components/datepicker/dist/styles/style-css.d.ts +0 -2
  97. package/components/datepicker/dist/styles/tokens-css.d.ts +0 -2
  98. package/components/datepicker/dist/utilities.d.ts +0 -78
  99. package/components/datepicker/dist/utilitiesCalendar.d.ts +0 -38
  100. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +0 -50
  101. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +0 -5
  102. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -60
  103. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +0 -1
  104. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +0 -57
  105. package/components/dropdown/demo/api.md +0 -1358
  106. package/components/dropdown/demo/api.min.js +0 -4894
  107. package/components/dropdown/demo/index.md +0 -283
  108. package/components/dropdown/demo/index.min.js +0 -4829
  109. package/components/dropdown/demo/keyboardBehavior.md +0 -77
  110. package/components/dropdown/demo/readme.md +0 -160
  111. package/components/dropdown/dist/auro-dropdown.d.ts +0 -482
  112. package/components/dropdown/dist/auro-dropdownBib.d.ts +0 -128
  113. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +0 -7
  114. package/components/dropdown/dist/iconVersion.d.ts +0 -2
  115. package/components/dropdown/dist/index.d.ts +0 -2
  116. package/components/dropdown/dist/index.js +0 -4722
  117. package/components/dropdown/dist/registered.js +0 -4722
  118. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +0 -2
  119. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +0 -2
  120. package/components/dropdown/dist/styles/classic/color-css.d.ts +0 -2
  121. package/components/dropdown/dist/styles/classic/style-css.d.ts +0 -2
  122. package/components/dropdown/dist/styles/color-css.d.ts +0 -2
  123. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +0 -2
  124. package/components/dropdown/dist/styles/shapeSize-css.d.ts +0 -2
  125. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +0 -2
  126. package/components/dropdown/dist/styles/style-css.d.ts +0 -2
  127. package/components/dropdown/dist/styles/tokens-css.d.ts +0 -2
  128. package/components/form/demo/api.md +0 -319
  129. package/components/form/demo/api.min.js +0 -70505
  130. package/components/form/demo/index.md +0 -128
  131. package/components/form/demo/index.min.js +0 -70505
  132. package/components/form/demo/keyboardBehavior.md +0 -0
  133. package/components/form/demo/readme.md +0 -145
  134. package/components/form/dist/auro-form.d.ts +0 -280
  135. package/components/form/dist/index.d.ts +0 -2
  136. package/components/form/dist/index.js +0 -718
  137. package/components/form/dist/registered.d.ts +0 -1
  138. package/components/form/dist/registered.js +0 -718
  139. package/components/form/dist/styles/style-css.d.ts +0 -2
  140. package/components/helptext/dist/auro-helptext.d.ts +0 -69
  141. package/components/helptext/dist/index.d.ts +0 -2
  142. package/components/helptext/dist/index.js +0 -231
  143. package/components/helptext/dist/registered.js +0 -231
  144. package/components/helptext/dist/styles/color-css.d.ts +0 -2
  145. package/components/helptext/dist/styles/style-css.d.ts +0 -2
  146. package/components/helptext/dist/styles/tokens-css.d.ts +0 -2
  147. package/components/input/demo/api.md +0 -1397
  148. package/components/input/demo/api.min.js +0 -7460
  149. package/components/input/demo/index.md +0 -161
  150. package/components/input/demo/index.min.js +0 -7380
  151. package/components/input/demo/keyboardBehavior.md +0 -0
  152. package/components/input/demo/readme.md +0 -134
  153. package/components/input/dist/auro-input.d.ts +0 -206
  154. package/components/input/dist/base-input.d.ts +0 -629
  155. package/components/input/dist/buttonVersion.d.ts +0 -2
  156. package/components/input/dist/i18n.d.ts +0 -18
  157. package/components/input/dist/iconVersion.d.ts +0 -2
  158. package/components/input/dist/index.d.ts +0 -2
  159. package/components/input/dist/index.js +0 -7292
  160. package/components/input/dist/registered.js +0 -7292
  161. package/components/input/dist/styles/classic/color-css.d.ts +0 -2
  162. package/components/input/dist/styles/classic/style-css.d.ts +0 -2
  163. package/components/input/dist/styles/color-css.d.ts +0 -2
  164. package/components/input/dist/styles/default/borders-css.d.ts +0 -2
  165. package/components/input/dist/styles/default/color-css.d.ts +0 -2
  166. package/components/input/dist/styles/default/mixins-css.d.ts +0 -2
  167. package/components/input/dist/styles/default/notificationIcons-css.d.ts +0 -2
  168. package/components/input/dist/styles/default/style-css.d.ts +0 -2
  169. package/components/input/dist/styles/emphasized/color-css.d.ts +0 -2
  170. package/components/input/dist/styles/emphasized/style-css.d.ts +0 -2
  171. package/components/input/dist/styles/mixins-css.d.ts +0 -2
  172. package/components/input/dist/styles/shapeSize-css.d.ts +0 -2
  173. package/components/input/dist/styles/snowflake/style-css.d.ts +0 -2
  174. package/components/input/dist/styles/style-css.d.ts +0 -2
  175. package/components/input/dist/styles/tokens-css.d.ts +0 -2
  176. package/components/input/dist/utilities.d.ts +0 -25
  177. package/components/layoutElement/dist/auroElement.d.ts +0 -40
  178. package/components/layoutElement/dist/index.d.ts +0 -2
  179. package/components/layoutElement/dist/index.js +0 -107
  180. package/components/layoutElement/dist/registered.js +0 -107
  181. package/components/menu/demo/api.md +0 -1200
  182. package/components/menu/demo/api.min.js +0 -2413
  183. package/components/menu/demo/index.md +0 -72
  184. package/components/menu/demo/index.min.js +0 -2306
  185. package/components/menu/demo/keyboardBehavior.md +0 -0
  186. package/components/menu/demo/readme.md +0 -145
  187. package/components/menu/dist/auro-menu-utils.d.ts +0 -34
  188. package/components/menu/dist/auro-menu.context.d.ts +0 -239
  189. package/components/menu/dist/auro-menu.d.ts +0 -316
  190. package/components/menu/dist/auro-menuoption.d.ts +0 -210
  191. package/components/menu/dist/iconVersion.d.ts +0 -2
  192. package/components/menu/dist/index.d.ts +0 -4
  193. package/components/menu/dist/index.js +0 -2269
  194. package/components/menu/dist/registered.js +0 -2217
  195. package/components/menu/dist/styles/default/color-menu-css.d.ts +0 -2
  196. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +0 -2
  197. package/components/menu/dist/styles/default/style-menu-css.d.ts +0 -2
  198. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +0 -2
  199. package/components/menu/dist/styles/default/tokens-css.d.ts +0 -2
  200. package/components/radio/demo/api.md +0 -675
  201. package/components/radio/demo/api.min.js +0 -2210
  202. package/components/radio/demo/index.md +0 -73
  203. package/components/radio/demo/index.min.js +0 -2167
  204. package/components/radio/demo/keyboardBehavior.md +0 -0
  205. package/components/radio/demo/readme.md +0 -141
  206. package/components/radio/dist/auro-radio-group.d.ts +0 -250
  207. package/components/radio/dist/auro-radio.d.ts +0 -180
  208. package/components/radio/dist/index.d.ts +0 -3
  209. package/components/radio/dist/index.js +0 -2116
  210. package/components/radio/dist/registered.js +0 -2117
  211. package/components/radio/dist/styles/auro-radio-group-css.d.ts +0 -2
  212. package/components/radio/dist/styles/color-css.d.ts +0 -2
  213. package/components/radio/dist/styles/groupColor-css.d.ts +0 -2
  214. package/components/radio/dist/styles/style-css.d.ts +0 -2
  215. package/components/radio/dist/styles/tokens-css.d.ts +0 -2
  216. package/components/select/demo/api.md +0 -2378
  217. package/components/select/demo/api.min.js +0 -10400
  218. package/components/select/demo/index.md +0 -355
  219. package/components/select/demo/index.min.js +0 -10307
  220. package/components/select/demo/keyboardBehavior.md +0 -246
  221. package/components/select/demo/readme.md +0 -148
  222. package/components/select/dist/auro-select.d.ts +0 -545
  223. package/components/select/dist/index.d.ts +0 -2
  224. package/components/select/dist/index.js +0 -8218
  225. package/components/select/dist/registered.js +0 -8218
  226. package/components/select/dist/selectKeyboardStrategy.d.ts +0 -11
  227. package/components/select/dist/styles/emphasized/color-css.d.ts +0 -2
  228. package/components/select/dist/styles/shapeSize-css.d.ts +0 -2
  229. package/components/select/dist/styles/style-css.d.ts +0 -2
  230. package/components/select/dist/styles/tokens-css.d.ts +0 -2
  231. package/custom-elements.json +0 -18768
package/components/select/demo/index.md DELETED
@@ -1,355 +0,0 @@
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>