@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.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 (281) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +10 -10
  3. package/components/bibtemplate/dist/registered.js +10 -10
  4. package/components/checkbox/README.md +26 -56
  5. package/components/checkbox/demo/accessibility.html +48 -0
  6. package/components/checkbox/demo/accessibility.md +44 -0
  7. package/components/checkbox/demo/api.html +17 -26
  8. package/components/checkbox/demo/api.md +0 -396
  9. package/components/checkbox/demo/api.min.js +2 -2106
  10. package/components/checkbox/demo/customize.html +51 -0
  11. package/components/checkbox/demo/customize.md +361 -0
  12. package/components/checkbox/demo/demo-support.js +60 -0
  13. package/components/checkbox/demo/demo-support.min.js +55732 -0
  14. package/components/checkbox/demo/design.html +51 -0
  15. package/components/checkbox/demo/design.md +149 -0
  16. package/components/checkbox/demo/getting-started.html +51 -0
  17. package/components/checkbox/demo/getting-started.md +261 -0
  18. package/components/checkbox/demo/index.html +17 -21
  19. package/components/checkbox/demo/index.md +158 -45
  20. package/components/checkbox/demo/index.min.js +2 -3
  21. package/components/checkbox/demo/install.md +82 -0
  22. package/components/checkbox/demo/keyboard-behavior.html +48 -0
  23. package/components/checkbox/demo/readme.html +10 -18
  24. package/components/checkbox/demo/readme.md +26 -56
  25. package/components/checkbox/demo/styles.min.css +1 -0
  26. package/components/checkbox/demo/styles.scss +1 -0
  27. package/components/checkbox/demo/voiceover.html +48 -0
  28. package/components/checkbox/demo/voiceover.md +37 -0
  29. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  30. package/components/checkbox/dist/auro-checkbox.d.ts +8 -9
  31. package/components/checkbox/dist/index.js +2 -3
  32. package/components/checkbox/dist/registered.js +2 -3
  33. package/components/combobox/README.md +41 -66
  34. package/components/combobox/demo/accessibility.html +50 -0
  35. package/components/combobox/demo/accessibility.md +77 -0
  36. package/components/combobox/demo/api.html +8 -20
  37. package/components/combobox/demo/api.md +54 -2334
  38. package/components/combobox/demo/api.min.js +3 -17971
  39. package/components/combobox/demo/customize.html +52 -0
  40. package/components/combobox/demo/customize.js +24 -0
  41. package/components/combobox/demo/customize.md +1249 -0
  42. package/components/combobox/demo/customize.min.js +177 -0
  43. package/components/combobox/demo/demo-support.js +60 -0
  44. package/components/combobox/demo/demo-support.min.js +55732 -0
  45. package/components/combobox/demo/design.html +53 -0
  46. package/components/combobox/demo/design.md +283 -0
  47. package/components/combobox/demo/getting-started.html +52 -0
  48. package/components/combobox/demo/getting-started.js +21 -0
  49. package/components/combobox/demo/getting-started.md +397 -0
  50. package/components/combobox/demo/getting-started.min.js +12 -0
  51. package/components/combobox/demo/index.html +16 -22
  52. package/components/combobox/demo/index.js +3 -2
  53. package/components/combobox/demo/index.md +298 -188
  54. package/components/combobox/demo/index.min.js +13 -17956
  55. package/components/combobox/demo/install.md +77 -0
  56. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +5 -11
  57. package/components/combobox/demo/keyboard-behavior.md +276 -0
  58. package/components/combobox/demo/readme.html +5 -11
  59. package/components/combobox/demo/readme.md +41 -66
  60. package/components/combobox/demo/registered.min.js +18095 -0
  61. package/components/combobox/demo/styles.css +974 -0
  62. package/components/combobox/demo/styles.min.css +1 -0
  63. package/components/combobox/demo/styles.scss +1 -0
  64. package/components/combobox/demo/swap-value.min.js +16 -0
  65. package/components/combobox/demo/voiceover.html +59 -0
  66. package/components/combobox/demo/voiceover.md +118 -0
  67. package/components/combobox/dist/auro-combobox.d.ts +35 -35
  68. package/components/combobox/dist/index.js +183 -46
  69. package/components/combobox/dist/registered.js +183 -46
  70. package/components/counter/README.md +37 -55
  71. package/components/counter/demo/api.md +745 -813
  72. package/components/counter/demo/api.min.js +182 -44
  73. package/components/counter/demo/index.md +28 -32
  74. package/components/counter/demo/index.min.js +182 -44
  75. package/components/counter/demo/keyboard-behavior.md +127 -0
  76. package/components/counter/demo/readme.md +37 -55
  77. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  78. package/components/counter/dist/auro-counter.d.ts +10 -10
  79. package/components/counter/dist/index.js +181 -43
  80. package/components/counter/dist/registered.js +181 -43
  81. package/components/datepicker/README.md +23 -51
  82. package/components/datepicker/demo/accessibility.html +50 -0
  83. package/components/datepicker/demo/accessibility.md +64 -0
  84. package/components/datepicker/demo/api.md +0 -1774
  85. package/components/datepicker/demo/api.min.js +2 -24475
  86. package/components/datepicker/demo/auro-datepicker.min.js +24613 -0
  87. package/components/datepicker/demo/customize.html +52 -0
  88. package/components/datepicker/demo/customize.md +723 -0
  89. package/components/datepicker/demo/demo-support.js +60 -0
  90. package/components/datepicker/demo/demo-support.min.js +55732 -0
  91. package/components/datepicker/demo/design.html +54 -0
  92. package/components/datepicker/demo/design.md +158 -0
  93. package/components/datepicker/demo/getting-started.html +52 -0
  94. package/components/datepicker/demo/getting-started.md +237 -0
  95. package/components/datepicker/demo/index.html +14 -35
  96. package/components/datepicker/demo/index.md +201 -152
  97. package/components/datepicker/demo/index.min.js +1 -24474
  98. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  99. package/components/datepicker/demo/readme.md +23 -51
  100. package/components/datepicker/demo/styles.min.css +1 -0
  101. package/components/datepicker/demo/styles.scss +1 -0
  102. package/components/datepicker/demo/voiceover.html +59 -0
  103. package/components/datepicker/demo/voiceover.md +98 -0
  104. package/components/datepicker/dist/index.js +194 -57
  105. package/components/datepicker/dist/registered.js +194 -57
  106. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  107. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  108. package/components/datepicker/dist/src/iconVersion.d.ts +2 -0
  109. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  110. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  111. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  112. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  113. package/components/dropdown/README.md +35 -53
  114. package/components/dropdown/demo/api.md +717 -773
  115. package/components/dropdown/demo/api.min.js +161 -23
  116. package/components/dropdown/demo/index.md +120 -130
  117. package/components/dropdown/demo/index.min.js +161 -23
  118. package/components/dropdown/demo/{keyboardBehavior.md → keyboard-behavior.md} +52 -57
  119. package/components/dropdown/demo/readme.md +35 -53
  120. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  121. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  122. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  123. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  124. package/components/dropdown/dist/index.js +160 -22
  125. package/components/dropdown/dist/registered.js +160 -22
  126. package/components/form/README.md +14 -34
  127. package/components/form/demo/api.md +156 -162
  128. package/components/form/demo/api.min.js +756 -208
  129. package/components/form/demo/index.md +27 -33
  130. package/components/form/demo/index.min.js +756 -208
  131. package/components/form/demo/keyboard-behavior.md +38 -0
  132. package/components/form/demo/readme.md +14 -34
  133. package/components/input/README.md +28 -53
  134. package/components/input/demo/accessibility.html +37 -0
  135. package/components/input/demo/accessibility.md +69 -0
  136. package/components/input/demo/api.html +17 -23
  137. package/components/input/demo/api.js +4 -23
  138. package/components/input/demo/api.md +67 -1359
  139. package/components/input/demo/api.min.js +1 -7453
  140. package/components/input/demo/auro-input.min.js +7362 -0
  141. package/components/input/demo/customize.html +53 -0
  142. package/components/input/demo/customize.js +25 -0
  143. package/components/input/demo/customize.md +1372 -0
  144. package/components/input/demo/customize.min.js +71 -0
  145. package/components/input/demo/demo-support.js +60 -0
  146. package/components/input/demo/demo-support.min.js +55732 -0
  147. package/components/input/demo/design.html +38 -0
  148. package/components/input/demo/design.md +224 -0
  149. package/components/input/demo/getting-started.html +52 -0
  150. package/components/input/demo/getting-started.js +8 -0
  151. package/components/input/demo/getting-started.md +312 -0
  152. package/components/input/demo/getting-started.min.js +9 -0
  153. package/components/input/demo/index.html +16 -23
  154. package/components/input/demo/index.js +0 -11
  155. package/components/input/demo/index.md +180 -154
  156. package/components/input/demo/index.min.js +1 -7373
  157. package/components/input/demo/keyboard-behavior.html +37 -0
  158. package/components/input/demo/readme.md +28 -53
  159. package/components/input/demo/styles.css +974 -0
  160. package/components/input/demo/styles.min.css +1 -0
  161. package/components/input/demo/styles.scss +1 -0
  162. package/components/input/demo/voiceover.html +37 -0
  163. package/components/input/demo/voiceover.md +70 -0
  164. package/components/input/dist/auro-input.d.ts +1 -1
  165. package/components/input/dist/base-input.d.ts +29 -30
  166. package/components/input/dist/iconVersion.d.ts +1 -1
  167. package/components/input/dist/index.js +10 -11
  168. package/components/input/dist/registered.js +10 -11
  169. package/components/menu/README.md +24 -42
  170. package/components/menu/demo/api.md +785 -829
  171. package/components/menu/demo/api.min.js +7 -7
  172. package/components/menu/demo/index.md +33 -35
  173. package/components/menu/demo/index.min.js +7 -7
  174. package/components/menu/demo/keyboard-behavior.md +18 -0
  175. package/components/menu/demo/readme.md +24 -42
  176. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  177. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  178. package/components/menu/dist/auro-menu.d.ts +4 -4
  179. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  180. package/components/menu/dist/index.js +6 -6
  181. package/components/menu/dist/registered.js +6 -6
  182. package/components/radio/README.md +22 -49
  183. package/components/radio/demo/accessibility.html +51 -0
  184. package/components/radio/demo/accessibility.md +44 -0
  185. package/components/radio/demo/api.html +13 -20
  186. package/components/radio/demo/api.md +44 -621
  187. package/components/radio/demo/api.min.js +1 -1
  188. package/components/radio/demo/customize.html +53 -0
  189. package/components/radio/demo/customize.md +368 -0
  190. package/components/radio/demo/demo-support.js +60 -0
  191. package/components/radio/demo/design.html +52 -0
  192. package/components/radio/demo/design.md +143 -0
  193. package/components/radio/demo/getting-started.html +54 -0
  194. package/components/radio/demo/getting-started.md +296 -0
  195. package/components/radio/demo/index.html +16 -19
  196. package/components/radio/demo/index.md +124 -63
  197. package/components/radio/demo/index.min.js +1 -1
  198. package/components/radio/demo/keyboard-behavior.html +51 -0
  199. package/components/radio/demo/keyboard-behavior.md +72 -0
  200. package/components/radio/demo/layout.md +30 -0
  201. package/components/radio/demo/readme.html +11 -17
  202. package/components/radio/demo/readme.md +22 -49
  203. package/components/radio/demo/styles.css +974 -0
  204. package/components/radio/demo/voiceover.html +51 -0
  205. package/components/radio/demo/voiceover.md +43 -0
  206. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  207. package/components/radio/dist/auro-radio.d.ts +8 -8
  208. package/components/radio/dist/index.js +1 -1
  209. package/components/radio/dist/registered.js +1 -1
  210. package/components/select/README.md +50 -68
  211. package/components/select/demo/accessibility.html +50 -0
  212. package/components/select/demo/accessibility.md +76 -0
  213. package/components/select/demo/api.html +5 -17
  214. package/components/select/demo/api.md +52 -2422
  215. package/components/select/demo/customize.html +52 -0
  216. package/components/select/demo/customize.js +11 -0
  217. package/components/select/demo/customize.md +1049 -0
  218. package/components/select/demo/customize.min.js +12 -0
  219. package/components/select/demo/demo-support.js +60 -0
  220. package/components/select/demo/demo-support.min.js +55732 -0
  221. package/components/select/demo/design.html +51 -0
  222. package/components/select/demo/design.md +391 -0
  223. package/components/select/demo/getting-started.html +52 -0
  224. package/components/select/demo/getting-started.js +26 -0
  225. package/components/select/demo/getting-started.md +412 -0
  226. package/components/select/demo/getting-started.min.js +56 -0
  227. package/components/select/demo/index.html +18 -35
  228. package/components/select/demo/index.js +5 -3
  229. package/components/select/demo/index.md +165 -345
  230. package/components/select/demo/index.min.js +6 -10484
  231. package/components/select/demo/install.md +95 -0
  232. package/components/select/demo/keyboard-behavior.html +8 -39
  233. package/components/select/demo/keyboard-behavior.md +249 -0
  234. package/components/select/demo/keyboardBehavior.html +5 -38
  235. package/components/select/demo/layout.html +51 -0
  236. package/components/select/demo/readme.html +5 -13
  237. package/components/select/demo/readme.md +50 -68
  238. package/components/select/demo/{api.min.js → registered.min.js} +179 -151
  239. package/components/select/demo/styles.min.css +1 -0
  240. package/components/select/demo/styles.scss +1 -0
  241. package/components/select/demo/voiceover.html +48 -0
  242. package/components/select/demo/voiceover.md +183 -0
  243. package/components/select/dist/auro-select.d.ts +11 -11
  244. package/components/select/dist/index.js +171 -33
  245. package/components/select/dist/registered.js +171 -33
  246. package/custom-elements.json +1491 -1494
  247. package/package.json +37 -30
  248. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  249. package/components/combobox/demo/keyboardBehavior.md +0 -281
  250. package/components/counter/demo/keyboardBehavior.md +0 -127
  251. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  252. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  253. package/components/form/demo/keyboardBehavior.md +0 -0
  254. package/components/input/demo/keyboardBehavior.md +0 -0
  255. package/components/menu/demo/keyboardBehavior.md +0 -0
  256. package/components/radio/demo/keyboardBehavior.md +0 -0
  257. package/components/select/demo/api.js +0 -39
  258. package/components/select/demo/keyboardBehavior.md +0 -245
  259. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  260. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  261. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  262. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  263. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  264. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  265. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  266. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  267. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  268. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  269. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  270. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  271. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  272. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  273. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  274. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  275. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  276. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  277. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  278. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  279. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  280. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  281. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
package/components/dropdown/demo/index.md CHANGED
@@ -53,29 +53,27 @@ The dropdown can be closed with the following actions:
53
53
  ### Basic
54
54
 
55
55
  <div class="exampleWrapper">
56
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
57
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
58
- <auro-dropdown aria-label="custom label">
56
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
57
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
58
+ <auro-dropdown aria-label="custom label">
59
59
  Lorem ipsum solar
60
- <div slot="trigger">
60
+ <div slot="trigger">
61
61
  Trigger
62
- </div>
63
- </auro-dropdown>
64
- <!-- AURO-GENERATED-CONTENT:END -->
62
+ </div>
63
+ </auro-dropdown>
64
+ <!-- AURO-GENERATED-CONTENT:END -->
65
65
  </div>
66
66
  <auro-accordion alignRight>
67
- <span slot="trigger">See code</span>
67
+ <span slot="trigger">See code</span>
68
68
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
69
69
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
70
70
 
71
- ```html
72
- <auro-dropdown aria-label="custom label">
71
+ <pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label"&gt;
73
72
  Lorem ipsum solar
74
- <div slot="trigger">
73
+ &lt;div slot="trigger"&gt;
75
74
  Trigger
76
- </div>
77
- </auro-dropdown>
78
- ```
75
+ &lt;/div&gt;
76
+ &lt;/auro-dropdown&gt;</code></pre>
79
77
  <!-- AURO-GENERATED-CONTENT:END -->
80
78
  </auro-accordion>
81
79
 
@@ -88,196 +86,188 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
88
86
  #### Classic
89
87
 
90
88
  <div class="exampleWrapper">
91
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
92
- <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
93
- <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
94
- <div style="padding: var(--ds-size-150);">
89
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
90
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
91
+ <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
92
+ <div style="padding: var(--ds-size-150);">
95
93
  Lorem ipsum solar
96
- <br />
97
- <auro-button id="classicButton">
94
+ <br />
95
+ <auro-button id="classicButton">
98
96
  Dismiss Dropdown
99
- </auro-button>
100
- </div>
101
- <span slot="helpText">
97
+ </auro-button>
98
+ </div>
99
+ <span slot="helpText">
102
100
  Help text
103
- </span>
104
- <div slot="trigger">
101
+ </span>
102
+ <div slot="trigger">
105
103
  Trigger
106
- </div>
107
- </auro-dropdown>
108
- <!-- AURO-GENERATED-CONTENT:END -->
104
+ </div>
105
+ </auro-dropdown>
106
+ <!-- AURO-GENERATED-CONTENT:END -->
109
107
  </div>
110
108
  <auro-accordion alignRight>
111
- <span slot="trigger">See code</span>
109
+ <span slot="trigger">See code</span>
112
110
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic.html) -->
113
111
  <!-- The below code snippet is automatically added from ./../apiExamples/classic/basic.html -->
114
112
 
115
- ```html
116
- <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
117
- <div style="padding: var(--ds-size-150);">
113
+ <pre class="language-html"><code class="language-html">&lt;auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader"&gt;
114
+ &lt;div style="padding: var(--ds-size-150);"&gt;
118
115
  Lorem ipsum solar
119
- <br />
120
- <auro-button id="classicButton">
116
+ &lt;br /&gt;
117
+ &lt;auro-button id="classicButton"&gt;
121
118
  Dismiss Dropdown
122
- </auro-button>
123
- </div>
124
- <span slot="helpText">
119
+ &lt;/auro-button&gt;
120
+ &lt;/div&gt;
121
+ &lt;span slot="helpText"&gt;
125
122
  Help text
126
- </span>
127
- <div slot="trigger">
123
+ &lt;/span&gt;
124
+ &lt;div slot="trigger"&gt;
128
125
  Trigger
129
- </div>
130
- </auro-dropdown>
131
- ```
126
+ &lt;/div&gt;
127
+ &lt;/auro-dropdown&gt;</code></pre>
132
128
  <!-- AURO-GENERATED-CONTENT:END -->
133
129
  </auro-accordion>
134
130
  <div class="exampleWrapper--ondark">
135
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
136
- <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
137
- <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
138
- <div style="padding: var(--ds-size-150);">
131
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
132
+ <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
133
+ <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
134
+ <div style="padding: var(--ds-size-150);">
139
135
  Lorem ipsum solar
140
- <br />
141
- <auro-button id="classicInverseButton">
136
+ <br />
137
+ <auro-button id="classicInverseButton">
142
138
  Dismiss Dropdown
143
- </auro-button>
144
- </div>
145
- <span slot="helpText">
139
+ </auro-button>
140
+ </div>
141
+ <span slot="helpText">
146
142
  Help text
147
- </span>
148
- <div slot="trigger">
143
+ </span>
144
+ <div slot="trigger">
149
145
  Trigger
150
- </div>
151
- </auro-dropdown>
152
- <!-- AURO-GENERATED-CONTENT:END -->
146
+ </div>
147
+ </auro-dropdown>
148
+ <!-- AURO-GENERATED-CONTENT:END -->
153
149
  </div>
154
150
  <auro-accordion alignRight>
155
- <span slot="trigger">See code</span>
151
+ <span slot="trigger">See code</span>
156
152
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/appearance-inverse.html) -->
157
153
  <!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
158
154
 
159
- ```html
160
- <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
161
- <div style="padding: var(--ds-size-150);">
155
+ <pre class="language-html"><code class="language-html">&lt;auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader"&gt;
156
+ &lt;div style="padding: var(--ds-size-150);"&gt;
162
157
  Lorem ipsum solar
163
- <br />
164
- <auro-button id="classicInverseButton">
158
+ &lt;br /&gt;
159
+ &lt;auro-button id="classicInverseButton"&gt;
165
160
  Dismiss Dropdown
166
- </auro-button>
167
- </div>
168
- <span slot="helpText">
161
+ &lt;/auro-button&gt;
162
+ &lt;/div&gt;
163
+ &lt;span slot="helpText"&gt;
169
164
  Help text
170
- </span>
171
- <div slot="trigger">
165
+ &lt;/span&gt;
166
+ &lt;div slot="trigger"&gt;
172
167
  Trigger
173
- </div>
174
- </auro-dropdown>
175
- ```
168
+ &lt;/div&gt;
169
+ &lt;/auro-dropdown&gt;</code></pre>
176
170
  <!-- AURO-GENERATED-CONTENT:END -->
177
171
  </auro-accordion>
178
172
 
179
173
  #### Emphasized
180
174
 
181
175
  <div class="exampleWrapper--ondark">
182
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
183
- <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
184
- <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
176
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
177
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
178
+ <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
185
179
  Lorem ipsum solar
186
- <div slot="trigger">
180
+ <div slot="trigger">
187
181
  Trigger
188
- </div>
189
- <span slot="helpText">
182
+ </div>
183
+ <span slot="helpText">
190
184
  Help text - Lorem ipsum solar lorem ipsum solar
191
- </span>
192
- </auro-dropdown>
193
- <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
185
+ </span>
186
+ </auro-dropdown>
187
+ <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
194
188
  Lorem ipsum solar
195
- <div slot="trigger">
189
+ <div slot="trigger">
196
190
  Trigger
197
- </div>
198
- <span slot="helpText">
191
+ </div>
192
+ <span slot="helpText">
199
193
  Help text - Lorem ipsum solar lorem ipsum solar
200
- </span>
201
- </auro-dropdown>
202
- <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
194
+ </span>
195
+ </auro-dropdown>
196
+ <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
203
197
  Lorem ipsum solar
204
- <div slot="trigger">
198
+ <div slot="trigger">
205
199
  Trigger
206
- </div>
207
- <span slot="helpText">
200
+ </div>
201
+ <span slot="helpText">
208
202
  Help text - Lorem ipsum solar lorem ipsum solar
209
- </span>
210
- </auro-dropdown>
211
- <!-- AURO-GENERATED-CONTENT:END -->
203
+ </span>
204
+ </auro-dropdown>
205
+ <!-- AURO-GENERATED-CONTENT:END -->
212
206
  </div>
213
207
  <auro-accordion alignRight>
214
- <span slot="trigger">See code</span>
208
+ <span slot="trigger">See code</span>
215
209
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
216
210
  <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
217
211
 
218
- ```html
219
- <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
212
+ <pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse"&gt;
220
213
  Lorem ipsum solar
221
- <div slot="trigger">
214
+ &lt;div slot="trigger"&gt;
222
215
  Trigger
223
- </div>
224
- <span slot="helpText">
216
+ &lt;/div&gt;
217
+ &lt;span slot="helpText"&gt;
225
218
  Help text - Lorem ipsum solar lorem ipsum solar
226
- </span>
227
- </auro-dropdown>
228
- <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
219
+ &lt;/span&gt;
220
+ &lt;/auro-dropdown&gt;
221
+ &lt;auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse"&gt;
229
222
  Lorem ipsum solar
230
- <div slot="trigger">
223
+ &lt;div slot="trigger"&gt;
231
224
  Trigger
232
- </div>
233
- <span slot="helpText">
225
+ &lt;/div&gt;
226
+ &lt;span slot="helpText"&gt;
234
227
  Help text - Lorem ipsum solar lorem ipsum solar
235
- </span>
236
- </auro-dropdown>
237
- <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
228
+ &lt;/span&gt;
229
+ &lt;/auro-dropdown&gt;
230
+ &lt;auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse"&gt;
238
231
  Lorem ipsum solar
239
- <div slot="trigger">
232
+ &lt;div slot="trigger"&gt;
240
233
  Trigger
241
- </div>
242
- <span slot="helpText">
234
+ &lt;/div&gt;
235
+ &lt;span slot="helpText"&gt;
243
236
  Help text - Lorem ipsum solar lorem ipsum solar
244
- </span>
245
- </auro-dropdown>
246
- ```
237
+ &lt;/span&gt;
238
+ &lt;/auro-dropdown&gt;</code></pre>
247
239
  <!-- AURO-GENERATED-CONTENT:END -->
248
240
  </auro-accordion>
249
241
 
250
242
  #### Snowflake
251
243
 
252
244
  <div class="exampleWrapper--ondark">
253
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
254
- <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
255
- <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
245
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
246
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
247
+ <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
256
248
  Lorem ipsum solar
257
- <div slot="trigger">
249
+ <div slot="trigger">
258
250
  Trigger
259
- </div>
260
- <span slot="helpText">
251
+ </div>
252
+ <span slot="helpText">
261
253
  Help text - Lorem ipsum solar lorem ipsum solar
262
- </span>
263
- </auro-dropdown>
264
- <!-- AURO-GENERATED-CONTENT:END -->
254
+ </span>
255
+ </auro-dropdown>
256
+ <!-- AURO-GENERATED-CONTENT:END -->
265
257
  </div>
266
258
  <auro-accordion alignRight>
267
- <span slot="trigger">See code</span>
259
+ <span slot="trigger">See code</span>
268
260
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
269
261
  <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
270
262
 
271
- ```html
272
- <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
263
+ <pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse"&gt;
273
264
  Lorem ipsum solar
274
- <div slot="trigger">
265
+ &lt;div slot="trigger"&gt;
275
266
  Trigger
276
- </div>
277
- <span slot="helpText">
267
+ &lt;/div&gt;
268
+ &lt;span slot="helpText"&gt;
278
269
  Help text - Lorem ipsum solar lorem ipsum solar
279
- </span>
280
- </auro-dropdown>
281
- ```
270
+ &lt;/span&gt;
271
+ &lt;/auro-dropdown&gt;</code></pre>
282
272
  <!-- AURO-GENERATED-CONTENT:END -->
283
273
  </auro-accordion>