@aurodesignsystem-dev/auro-formkit 0.0.0-pr1379.0 → 0.0.0-pr1379.10

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 (226) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/README.md +87 -113
  3. package/components/combobox/demo/keyboardBehavior.html +81 -0
  4. package/components/counter/demo/keyboardBehavior.html +81 -0
  5. package/components/datepicker/demo/keyboard-behavior.html +81 -0
  6. package/components/dropdown/demo/keyboardBehavior.html +81 -0
  7. package/components/select/demo/keyboardBehavior.html +81 -0
  8. package/package.json +64 -53
  9. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -66
  10. package/components/bibtemplate/dist/buttonVersion.d.ts +0 -2
  11. package/components/bibtemplate/dist/headerVersion.d.ts +0 -2
  12. package/components/bibtemplate/dist/iconVersion.d.ts +0 -2
  13. package/components/bibtemplate/dist/index.d.ts +0 -2
  14. package/components/bibtemplate/dist/index.js +0 -395
  15. package/components/bibtemplate/dist/registered.js +0 -395
  16. package/components/bibtemplate/dist/styles/color-css.d.ts +0 -2
  17. package/components/bibtemplate/dist/styles/style-css.d.ts +0 -2
  18. package/components/bibtemplate/dist/styles/tokens-css.d.ts +0 -2
  19. package/components/checkbox/demo/api.md +0 -489
  20. package/components/checkbox/demo/api.min.js +0 -2133
  21. package/components/checkbox/demo/index.md +0 -55
  22. package/components/checkbox/demo/index.min.js +0 -2108
  23. package/components/checkbox/demo/readme.md +0 -142
  24. package/components/checkbox/dist/auro-checkbox-group.d.ts +0 -176
  25. package/components/checkbox/dist/auro-checkbox.d.ts +0 -209
  26. package/components/checkbox/dist/index.d.ts +0 -3
  27. package/components/checkbox/dist/index.js +0 -2057
  28. package/components/checkbox/dist/registered.js +0 -2058
  29. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +0 -2
  30. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +0 -2
  31. package/components/checkbox/dist/styles/color-css.d.ts +0 -2
  32. package/components/checkbox/dist/styles/colorGroup-css.d.ts +0 -2
  33. package/components/checkbox/dist/styles/tokens-css.d.ts +0 -2
  34. package/components/combobox/demo/api.md +0 -2287
  35. package/components/combobox/demo/api.min.js +0 -17549
  36. package/components/combobox/demo/index.md +0 -196
  37. package/components/combobox/demo/index.min.js +0 -17454
  38. package/components/combobox/demo/readme.md +0 -158
  39. package/components/combobox/dist/auro-combobox.d.ts +0 -552
  40. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +0 -6
  41. package/components/combobox/dist/index.d.ts +0 -2
  42. package/components/combobox/dist/index.js +0 -15474
  43. package/components/combobox/dist/registered.js +0 -15476
  44. package/components/combobox/dist/styles/emphasized/style-css.d.ts +0 -2
  45. package/components/combobox/dist/styles/snowflake/style-css.d.ts +0 -2
  46. package/components/combobox/dist/styles/style-css.d.ts +0 -2
  47. package/components/counter/demo/api.md +0 -1285
  48. package/components/counter/demo/api.min.js +0 -7993
  49. package/components/counter/demo/index.md +0 -92
  50. package/components/counter/demo/index.min.js +0 -7974
  51. package/components/counter/demo/readme.md +0 -161
  52. package/components/counter/dist/auro-counter-button.d.ts +0 -14
  53. package/components/counter/dist/auro-counter-group.d.ts +0 -390
  54. package/components/counter/dist/auro-counter-wrapper.d.ts +0 -17
  55. package/components/counter/dist/auro-counter.d.ts +0 -126
  56. package/components/counter/dist/buttonVersion.d.ts +0 -2
  57. package/components/counter/dist/iconVersion.d.ts +0 -2
  58. package/components/counter/dist/index.d.ts +0 -3
  59. package/components/counter/dist/index.js +0 -7896
  60. package/components/counter/dist/registered.js +0 -7897
  61. package/components/counter/dist/styles/color-css.d.ts +0 -2
  62. package/components/counter/dist/styles/counter-button-color-css.d.ts +0 -2
  63. package/components/counter/dist/styles/counter-button-css.d.ts +0 -2
  64. package/components/counter/dist/styles/counter-group-css.d.ts +0 -2
  65. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +0 -2
  66. package/components/counter/dist/styles/counter-wrapper-css.d.ts +0 -2
  67. package/components/counter/dist/styles/shapeSize-css.d.ts +0 -2
  68. package/components/counter/dist/styles/style-css.d.ts +0 -2
  69. package/components/counter/dist/styles/tokens-css.d.ts +0 -2
  70. package/components/datepicker/demo/api.md +0 -1824
  71. package/components/datepicker/demo/api.min.js +0 -24530
  72. package/components/datepicker/demo/index.md +0 -158
  73. package/components/datepicker/demo/index.min.js +0 -24251
  74. package/components/datepicker/demo/readme.md +0 -137
  75. package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -169
  76. package/components/datepicker/dist/auro-calendar-month.d.ts +0 -20
  77. package/components/datepicker/dist/auro-calendar.d.ts +0 -173
  78. package/components/datepicker/dist/auro-datepicker.d.ts +0 -722
  79. package/components/datepicker/dist/buttonVersion.d.ts +0 -2
  80. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  81. package/components/datepicker/dist/index.d.ts +0 -2
  82. package/components/datepicker/dist/index.js +0 -24166
  83. package/components/datepicker/dist/popoverVersion.d.ts +0 -2
  84. package/components/datepicker/dist/registered.js +0 -24166
  85. package/components/datepicker/dist/styles/classic/color-css.d.ts +0 -2
  86. package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
  87. package/components/datepicker/dist/styles/color-calendar-css.d.ts +0 -2
  88. package/components/datepicker/dist/styles/color-cell-css.d.ts +0 -2
  89. package/components/datepicker/dist/styles/color-css.d.ts +0 -2
  90. package/components/datepicker/dist/styles/color-month-css.d.ts +0 -2
  91. package/components/datepicker/dist/styles/shapeSize-css.d.ts +0 -2
  92. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +0 -2
  93. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +0 -2
  94. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +0 -2
  95. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +0 -2
  96. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +0 -2
  97. package/components/datepicker/dist/styles/style-css.d.ts +0 -2
  98. package/components/datepicker/dist/styles/tokens-css.d.ts +0 -2
  99. package/components/datepicker/dist/utilities.d.ts +0 -78
  100. package/components/datepicker/dist/utilitiesCalendar.d.ts +0 -38
  101. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +0 -50
  102. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +0 -5
  103. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -60
  104. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +0 -1
  105. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +0 -57
  106. package/components/dropdown/demo/api.md +0 -1358
  107. package/components/dropdown/demo/api.min.js +0 -4853
  108. package/components/dropdown/demo/index.md +0 -283
  109. package/components/dropdown/demo/index.min.js +0 -4788
  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 -155
  113. package/components/dropdown/dist/iconVersion.d.ts +0 -2
  114. package/components/dropdown/dist/index.d.ts +0 -2
  115. package/components/dropdown/dist/index.js +0 -4685
  116. package/components/dropdown/dist/keyboardUtils.d.ts +0 -18
  117. package/components/dropdown/dist/registered.js +0 -4685
  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 -69996
  130. package/components/form/demo/index.md +0 -128
  131. package/components/form/demo/index.min.js +0 -69996
  132. package/components/form/demo/readme.md +0 -145
  133. package/components/form/dist/auro-form.d.ts +0 -280
  134. package/components/form/dist/index.d.ts +0 -2
  135. package/components/form/dist/index.js +0 -718
  136. package/components/form/dist/registered.d.ts +0 -1
  137. package/components/form/dist/registered.js +0 -718
  138. package/components/form/dist/styles/style-css.d.ts +0 -2
  139. package/components/helptext/dist/auro-helptext.d.ts +0 -69
  140. package/components/helptext/dist/index.d.ts +0 -2
  141. package/components/helptext/dist/index.js +0 -231
  142. package/components/helptext/dist/registered.js +0 -231
  143. package/components/helptext/dist/styles/color-css.d.ts +0 -2
  144. package/components/helptext/dist/styles/style-css.d.ts +0 -2
  145. package/components/helptext/dist/styles/tokens-css.d.ts +0 -2
  146. package/components/input/demo/api.md +0 -1397
  147. package/components/input/demo/api.min.js +0 -7435
  148. package/components/input/demo/index.md +0 -161
  149. package/components/input/demo/index.min.js +0 -7355
  150. package/components/input/demo/readme.md +0 -134
  151. package/components/input/dist/auro-input.d.ts +0 -195
  152. package/components/input/dist/base-input.d.ts +0 -628
  153. package/components/input/dist/buttonVersion.d.ts +0 -2
  154. package/components/input/dist/i18n.d.ts +0 -18
  155. package/components/input/dist/iconVersion.d.ts +0 -2
  156. package/components/input/dist/index.d.ts +0 -2
  157. package/components/input/dist/index.js +0 -7278
  158. package/components/input/dist/registered.js +0 -7278
  159. package/components/input/dist/styles/classic/color-css.d.ts +0 -2
  160. package/components/input/dist/styles/classic/style-css.d.ts +0 -2
  161. package/components/input/dist/styles/color-css.d.ts +0 -2
  162. package/components/input/dist/styles/default/borders-css.d.ts +0 -2
  163. package/components/input/dist/styles/default/color-css.d.ts +0 -2
  164. package/components/input/dist/styles/default/mixins-css.d.ts +0 -2
  165. package/components/input/dist/styles/default/notificationIcons-css.d.ts +0 -2
  166. package/components/input/dist/styles/default/style-css.d.ts +0 -2
  167. package/components/input/dist/styles/emphasized/color-css.d.ts +0 -2
  168. package/components/input/dist/styles/emphasized/style-css.d.ts +0 -2
  169. package/components/input/dist/styles/mixins-css.d.ts +0 -2
  170. package/components/input/dist/styles/shapeSize-css.d.ts +0 -2
  171. package/components/input/dist/styles/snowflake/style-css.d.ts +0 -2
  172. package/components/input/dist/styles/style-css.d.ts +0 -2
  173. package/components/input/dist/styles/tokens-css.d.ts +0 -2
  174. package/components/input/dist/utilities.d.ts +0 -25
  175. package/components/layoutElement/dist/auroElement.d.ts +0 -40
  176. package/components/layoutElement/dist/index.d.ts +0 -2
  177. package/components/layoutElement/dist/index.js +0 -107
  178. package/components/layoutElement/dist/registered.js +0 -107
  179. package/components/menu/demo/api.md +0 -1200
  180. package/components/menu/demo/api.min.js +0 -2292
  181. package/components/menu/demo/index.md +0 -72
  182. package/components/menu/demo/index.min.js +0 -2185
  183. package/components/menu/demo/readme.md +0 -145
  184. package/components/menu/dist/auro-menu-utils.d.ts +0 -34
  185. package/components/menu/dist/auro-menu.context.d.ts +0 -227
  186. package/components/menu/dist/auro-menu.d.ts +0 -324
  187. package/components/menu/dist/auro-menuoption.d.ts +0 -210
  188. package/components/menu/dist/iconVersion.d.ts +0 -2
  189. package/components/menu/dist/index.d.ts +0 -4
  190. package/components/menu/dist/index.js +0 -2148
  191. package/components/menu/dist/registered.js +0 -2096
  192. package/components/menu/dist/styles/default/color-menu-css.d.ts +0 -2
  193. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +0 -2
  194. package/components/menu/dist/styles/default/style-menu-css.d.ts +0 -2
  195. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +0 -2
  196. package/components/menu/dist/styles/default/tokens-css.d.ts +0 -2
  197. package/components/radio/demo/api.md +0 -675
  198. package/components/radio/demo/api.min.js +0 -2210
  199. package/components/radio/demo/index.md +0 -73
  200. package/components/radio/demo/index.min.js +0 -2167
  201. package/components/radio/demo/readme.md +0 -141
  202. package/components/radio/dist/auro-radio-group.d.ts +0 -250
  203. package/components/radio/dist/auro-radio.d.ts +0 -180
  204. package/components/radio/dist/index.d.ts +0 -3
  205. package/components/radio/dist/index.js +0 -2116
  206. package/components/radio/dist/registered.js +0 -2117
  207. package/components/radio/dist/styles/auro-radio-group-css.d.ts +0 -2
  208. package/components/radio/dist/styles/color-css.d.ts +0 -2
  209. package/components/radio/dist/styles/groupColor-css.d.ts +0 -2
  210. package/components/radio/dist/styles/style-css.d.ts +0 -2
  211. package/components/radio/dist/styles/tokens-css.d.ts +0 -2
  212. package/components/select/demo/api.md +0 -2378
  213. package/components/select/demo/api.min.js +0 -10133
  214. package/components/select/demo/index.md +0 -355
  215. package/components/select/demo/index.min.js +0 -10040
  216. package/components/select/demo/readme.md +0 -148
  217. package/components/select/dist/auro-select.d.ts +0 -545
  218. package/components/select/dist/index.d.ts +0 -2
  219. package/components/select/dist/index.js +0 -8072
  220. package/components/select/dist/registered.js +0 -8072
  221. package/components/select/dist/selectKeyboardStrategy.d.ts +0 -8
  222. package/components/select/dist/styles/emphasized/color-css.d.ts +0 -2
  223. package/components/select/dist/styles/shapeSize-css.d.ts +0 -2
  224. package/components/select/dist/styles/style-css.d.ts +0 -2
  225. package/components/select/dist/styles/tokens-css.d.ts +0 -2
  226. package/custom-elements.json +0 -18656
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>