@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/menu/demo/api.md CHANGED
@@ -8,31 +8,31 @@ The `auro-menu` element provides users a way to select from a list of options.
8
8
  ## Properties
9
9
 
10
10
  | Property | Attribute | Modifiers | Type | Default | Description |
11
- |----------------------------|----------------------------|-----------|-----------------------|-------------|--------------------------------------------------|
12
- | [allowDeselect](#allowDeselect) | `allowDeselect` | | `boolean` | false | Allows deselecting an already selected option when clicked again in single-select mode. |
13
- | [currentLabel](#currentLabel) | | readonly | `string` | | |
14
- | [disabled](#disabled) | `disabled` | | `boolean` | | When true, the entire menu and all options are disabled. |
15
- | [hasLoadingPlaceholder](#hasLoadingPlaceholder) | `hasLoadingPlaceholder` | | `boolean` | | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
16
- | [index](#index) | | | `number` | | |
17
- | [items](#items) | | readonly | `HTMLElement[]` | | |
18
- | [loading](#loading) | `loading` | | `boolean` | false | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
19
- | [matchWord](#matchWord) | `matchword` | | `string` | "undefined" | Specifies a string used to highlight matched string parts in options. |
20
- | [multiSelect](#multiSelect) | `multiselect` | | `boolean` | false | When true, the selected option can be multiple options. |
21
- | [noCheckmark](#noCheckmark) | `nocheckmark` | | `boolean` | false | When true, selected option will not show the checkmark. |
22
- | [optionActive](#optionActive) | `optionactive` | | `object` | "undefined" | Specifies the current active menuOption. |
23
- | [optionSelected](#optionSelected) | `optionSelected` | | `object` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
24
- | [options](#options) | | readonly | `array` | | Available menu options. |
25
- | [selectAllMatchingOptions](#selectAllMatchingOptions) | `selectAllMatchingOptions` | | `boolean` | false | When true, selects all options that match the provided value/key when setting value and multiselect is enabled. |
26
- | [selectedOption](#selectedOption) | | readonly | `HTMLElement \| null` | | Gets the first selected option, or null if none. |
27
- | [selectedOptions](#selectedOptions) | | readonly | `HTMLElement[]` | | Gets the currently selected options. |
28
- | [value](#value) | `value` | | `string` | "undefined" | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
11
+ |----------------------------|----------------------------|-----------|-----------------------|-------------|--------------------------------------------------|
12
+ | `allowDeselect` | `allowDeselect` | | `boolean` | false | Allows deselecting an already selected option when clicked again in single-select mode. |
13
+ | `currentLabel` | | readonly | `string` | | |
14
+ | `disabled` | `disabled` | | `boolean` | | When true, the entire menu and all options are disabled. |
15
+ | `hasLoadingPlaceholder` | `hasLoadingPlaceholder` | | `boolean` | | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
16
+ | `index` | | | `number` | | |
17
+ | `items` | | readonly | `HTMLElement[]` | | |
18
+ | `loading` | `loading` | | `boolean` | false | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
19
+ | `matchWord` | `matchword` | | `string` | "undefined" | Specifies a string used to highlight matched string parts in options. |
20
+ | `multiSelect` | `multiselect` | | `boolean` | false | When true, the selected option can be multiple options. |
21
+ | `noCheckmark` | `nocheckmark` | | `boolean` | false | When true, selected option will not show the checkmark. |
22
+ | `optionActive` | `optionactive` | | `object` | "undefined" | Specifies the current active menuOption. |
23
+ | `optionSelected` | `optionSelected` | | `object` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
24
+ | `options` | | readonly | `array` | | Available menu options. |
25
+ | `selectAllMatchingOptions` | `selectAllMatchingOptions` | | `boolean` | false | When true, selects all options that match the provided value/key when setting value and multiselect is enabled. |
26
+ | `selectedOption` | | readonly | `HTMLElement \| null` | | Gets the first selected option, or null if none. |
27
+ | `selectedOptions` | | readonly | `HTMLElement[]` | | Gets the currently selected options. |
28
+ | `value` | `value` | | `string` | "undefined" | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
29
29
 
30
30
  ## Methods
31
31
 
32
32
  | Method | Type | Description |
33
- |----------------------|-------------------------------|--------------------------------------------------|
34
- | [reset](#reset) | `(): void` | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
35
- | [updateActiveOption](#updateActiveOption) | `(option: HTMLElement): void` | Updates the currently active option in the menu.<br /><br />**option**: The option to set as active. |
33
+ |----------------------|-------------------------------|--------------------------------------------------|
34
+ | `reset` | `(): void` | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
35
+ | `updateActiveOption` | `(option: HTMLElement): void` | Updates the currently active option in the menu.<br /><br />**option**: The option to set as active. |
36
36
 
37
37
  ## Events
38
38
 
@@ -51,9 +51,9 @@ The `auro-menu` element provides users a way to select from a list of options.
51
51
 
52
52
  | Name | Description |
53
53
  |---------------|---------------------------------------------|
54
- | | Slot for insertion of menu options. |
55
- | [loadingIcon](#loadingIcon) | Icon to show while loading attribute is set |
56
- | [loadingText](#loadingText) | Text to show while loading attribute is set |
54
+ | | Slot for insertion of menu options. |
55
+ | `loadingIcon` | Icon to show while loading attribute is set |
56
+ | `loadingText` | Text to show while loading attribute is set |
57
57
 
58
58
  # auro-menuoption
59
59
 
@@ -62,27 +62,27 @@ The `auro-menuoption` element provides users a way to define a menu option.
62
62
  ## Properties
63
63
 
64
64
  | Property | Attribute | Modifiers | Type | Default | Description |
65
- |---------------|------------|-----------|-----------|---------|--------------------------------------------------|
66
- | [disabled](#disabled) | `disabled` | | `boolean` | false | When true, disables the menu option. |
67
- | [iconTag](#iconTag) | | | `string` | | |
68
- | [isActive](#isActive) | | readonly | `boolean` | | Returns whether the menu option is currently active and selectable.<br />An option is considered active if it is not hidden, not disabled, and not static. |
69
- | [key](#key) | `key` | | `string` | | Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used. |
70
- | [noMatch](#noMatch) | `nomatch` | | `boolean` | false | When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match. |
71
- | [selected](#selected) | `selected` | | `boolean` | false | Specifies that an option is selected. |
72
- | [tabIndex](#tabIndex) | `tabIndex` | | `number` | | Specifies the tab index of the menu option. |
73
- | [unsubscribe](#unsubscribe) | | | | null | |
74
- | [value](#value) | `value` | | `string` | | Specifies the value to be sent to a server. |
65
+ |---------------|------------|-----------|-----------|---------|--------------------------------------------------|
66
+ | `disabled` | `disabled` | | `boolean` | false | When true, disables the menu option. |
67
+ | `iconTag` | | | | | |
68
+ | `isActive` | | readonly | `boolean` | | Returns whether the menu option is currently active and selectable.<br />An option is considered active if it is not hidden, not disabled, and not static. |
69
+ | `key` | `key` | | `string` | | Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used. |
70
+ | `noMatch` | `nomatch` | | `boolean` | false | When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match. |
71
+ | `selected` | `selected` | | `boolean` | false | Specifies that an option is selected. |
72
+ | `tabIndex` | `tabIndex` | | `number` | | Specifies the tab index of the menu option. |
73
+ | `unsubscribe` | | | `number` | null | |
74
+ | `value` | `value` | | `string` | | Specifies the value to be sent to a server. |
75
75
 
76
76
  ## Methods
77
77
 
78
78
  | Method | Type | Description |
79
- |-----------------------|-------------------------------|--------------------------------------------------|
80
- | [attachTo](#attachTo) | `(service: Object): void` | Attaches this menu option to a menu service and subscribes to its events.<br />This method enables the option to participate in menu selection and highlighting logic.<br /><br />**service**: The menu service instance to attach to. |
81
- | [bindEvents](#bindEvents) | `(): void` | Sets up event listeners for user interaction with the menu option.<br />This function enables click and mouse enter events to trigger selection and highlighting logic. |
82
- | [handleMenuChange](#handleMenuChange) | `(event: Object): void` | Handles changes from the menu service and updates the option's state.<br />This function synchronizes the option's properties and selection/highlight state with menu events.<br /><br />**event**: The event object from the menu service. |
83
- | [setInternalSelected](#setInternalSelected) | `(isSelected: boolean): void` | Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.<br />This function ensures the option's selection state is synchronized with menu logic and notifies listeners.<br /><br />**isSelected**: Whether the option should be marked as selected. |
84
- | [setSelected](#setSelected) | `(isSelected: boolean): void` | Sets the selected state of the menu option.<br />This function updates whether the option is currently selected.<br /><br />**isSelected**: Whether the option should be marked as selected. |
85
- | [updateActive](#updateActive) | `(isActive: boolean): void` | Updates the active state and visual highlighting of the menu option.<br />This function toggles the option's active status and applies or removes the active CSS class.<br /><br />**isActive**: Whether the option should be marked as active. |
79
+ |-----------------------|-------------------------------|--------------------------------------------------|
80
+ | `attachTo` | `(service: Object): void` | Attaches this menu option to a menu service and subscribes to its events.<br />This method enables the option to participate in menu selection and highlighting logic.<br /><br />**service**: The menu service instance to attach to. |
81
+ | `bindEvents` | `(): void` | Sets up event listeners for user interaction with the menu option.<br />This function enables click and mouse enter events to trigger selection and highlighting logic. |
82
+ | `handleMenuChange` | `(event: Object): void` | Handles changes from the menu service and updates the option's state.<br />This function synchronizes the option's properties and selection/highlight state with menu events.<br /><br />**event**: The event object from the menu service. |
83
+ | `setInternalSelected` | `(isSelected: boolean): void` | Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.<br />This function ensures the option's selection state is synchronized with menu logic and notifies listeners.<br /><br />**isSelected**: Whether the option should be marked as selected. |
84
+ | `setSelected` | `(isSelected: boolean): void` | Sets the selected state of the menu option.<br />This function updates whether the option is currently selected.<br /><br />**isSelected**: Whether the option should be marked as selected. |
85
+ | `updateActive` | `(isActive: boolean): void` | Updates the active state and visual highlighting of the menu option.<br />This function toggles the option's active status and applies or removes the active CSS class.<br /><br />**isActive**: Whether the option should be marked as active. |
86
86
 
87
87
  ## Events
88
88
 
@@ -94,38 +94,36 @@ The `auro-menuoption` element provides users a way to define a menu option.
94
94
  ## Slots
95
95
 
96
96
  | Name | Description |
97
- |-----------|--------------------------------------------|
98
- | [default](#default) | The default slot for the menu option text. |
97
+ |-----------|--------------------------------------------|
98
+ | `default` | The default slot for the menu option text. |
99
99
  <!-- AURO-GENERATED-CONTENT:END -->
100
100
 
101
101
  ## Basic
102
102
 
103
103
  <div class="exampleWrapper">
104
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
105
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
106
- <auro-menu>
107
- <auro-menuoption value="stops">Stops</auro-menuoption>
108
- <auro-menuoption value="price">Price</auro-menuoption>
109
- <auro-menuoption value="duration">Duration</auro-menuoption>
110
- <auro-menuoption value="departure">Departure</auro-menuoption>
111
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
112
- </auro-menu>
113
- <!-- AURO-GENERATED-CONTENT:END -->
104
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
105
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
106
+ <auro-menu>
107
+ <auro-menuoption value="stops">Stops</auro-menuoption>
108
+ <auro-menuoption value="price">Price</auro-menuoption>
109
+ <auro-menuoption value="duration">Duration</auro-menuoption>
110
+ <auro-menuoption value="departure">Departure</auro-menuoption>
111
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
112
+ </auro-menu>
113
+ <!-- AURO-GENERATED-CONTENT:END -->
114
114
  </div>
115
115
  <auro-accordion alignRight>
116
- <span slot="trigger">See code</span>
116
+ <span slot="trigger">See code</span>
117
117
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
118
118
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
119
119
 
120
- ```html
121
- <auro-menu>
122
- <auro-menuoption value="stops">Stops</auro-menuoption>
123
- <auro-menuoption value="price">Price</auro-menuoption>
124
- <auro-menuoption value="duration">Duration</auro-menuoption>
125
- <auro-menuoption value="departure">Departure</auro-menuoption>
126
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
127
- </auro-menu>
128
- ```
120
+ <pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
121
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
122
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
123
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
124
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
125
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
126
+ &lt;/auro-menu&gt;</code></pre>
129
127
  <!-- AURO-GENERATED-CONTENT:END -->
130
128
  </auro-accordion>
131
129
 
@@ -138,31 +136,29 @@ When set, the `allowDeselect` attribute allows the user to click on a selected m
138
136
  When the menu is in multi-select mode, this attribute has no effect and the user will be able to deselect the last remaining selected option.
139
137
 
140
138
  <div class="exampleWrapper">
141
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/allow-deselect.html) -->
142
- <!-- The below content is automatically added from ./../apiExamples/allow-deselect.html -->
143
- <auro-menu allowDeselect>
144
- <auro-menuoption value="stops">Stops</auro-menuoption>
145
- <auro-menuoption value="price">Price</auro-menuoption>
146
- <auro-menuoption value="duration">Duration</auro-menuoption>
147
- <auro-menuoption value="departure">Departure</auro-menuoption>
148
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
149
- </auro-menu>
150
- <!-- AURO-GENERATED-CONTENT:END -->
139
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/allow-deselect.html) -->
140
+ <!-- The below content is automatically added from ./../apiExamples/allow-deselect.html -->
141
+ <auro-menu allowDeselect>
142
+ <auro-menuoption value="stops">Stops</auro-menuoption>
143
+ <auro-menuoption value="price">Price</auro-menuoption>
144
+ <auro-menuoption value="duration">Duration</auro-menuoption>
145
+ <auro-menuoption value="departure">Departure</auro-menuoption>
146
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
147
+ </auro-menu>
148
+ <!-- AURO-GENERATED-CONTENT:END -->
151
149
  </div>
152
150
  <auro-accordion alignRight>
153
- <span slot="trigger">See code</span>
151
+ <span slot="trigger">See code</span>
154
152
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/allow-deselect.html) -->
155
153
  <!-- The below code snippet is automatically added from ./../apiExamples/allow-deselect.html -->
156
154
 
157
- ```html
158
- <auro-menu allowDeselect>
159
- <auro-menuoption value="stops">Stops</auro-menuoption>
160
- <auro-menuoption value="price">Price</auro-menuoption>
161
- <auro-menuoption value="duration">Duration</auro-menuoption>
162
- <auro-menuoption value="departure">Departure</auro-menuoption>
163
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
164
- </auro-menu>
165
- ```
155
+ <pre class="language-html"><code class="language-html">&lt;auro-menu allowDeselect&gt;
156
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
157
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
158
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
159
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
160
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
161
+ &lt;/auro-menu&gt;</code></pre>
166
162
  <!-- AURO-GENERATED-CONTENT:END -->
167
163
  </auro-accordion>
168
164
 
@@ -171,45 +167,43 @@ When the menu is in multi-select mode, this attribute has no effect and the user
171
167
  The `auro-menu` element with `disabled` will mark all `auro-menuoption` elements as disabled.
172
168
 
173
169
  <div class="exampleWrapper">
174
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-menu.html) -->
175
- <!-- The below content is automatically added from ./../apiExamples/disabled-menu.html -->
176
- <auro-menu disabled>
177
- <auro-menuoption value="new tab">New tab</auro-menuoption>
178
- <auro-menuoption value="new window">New window</auro-menuoption>
179
- <auro-menuoption value="open file">Open file</auro-menuoption>
180
- <auro-menuoption value="open location">Open location</auro-menuoption>
181
- <hr>
182
- <auro-menuoption value="close window">Close window</auro-menuoption>
183
- <auro-menuoption value="close tab">Close tab</auro-menuoption>
184
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
185
- <hr>
186
- <auro-menuoption value="share">Share</auro-menuoption>
187
- <hr>
188
- <auro-menuoption value="print">Print</auro-menuoption>
189
- </auro-menu>
190
- <!-- AURO-GENERATED-CONTENT:END -->
170
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-menu.html) -->
171
+ <!-- The below content is automatically added from ./../apiExamples/disabled-menu.html -->
172
+ <auro-menu disabled>
173
+ <auro-menuoption value="new tab">New tab</auro-menuoption>
174
+ <auro-menuoption value="new window">New window</auro-menuoption>
175
+ <auro-menuoption value="open file">Open file</auro-menuoption>
176
+ <auro-menuoption value="open location">Open location</auro-menuoption>
177
+ <hr>
178
+ <auro-menuoption value="close window">Close window</auro-menuoption>
179
+ <auro-menuoption value="close tab">Close tab</auro-menuoption>
180
+ <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
181
+ <hr>
182
+ <auro-menuoption value="share">Share</auro-menuoption>
183
+ <hr>
184
+ <auro-menuoption value="print">Print</auro-menuoption>
185
+ </auro-menu>
186
+ <!-- AURO-GENERATED-CONTENT:END -->
191
187
  </div>
192
188
  <auro-accordion alignRight>
193
- <span slot="trigger">See code</span>
189
+ <span slot="trigger">See code</span>
194
190
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-menu.html) -->
195
191
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled-menu.html -->
196
192
 
197
- ```html
198
- <auro-menu disabled>
199
- <auro-menuoption value="new tab">New tab</auro-menuoption>
200
- <auro-menuoption value="new window">New window</auro-menuoption>
201
- <auro-menuoption value="open file">Open file</auro-menuoption>
202
- <auro-menuoption value="open location">Open location</auro-menuoption>
203
- <hr>
204
- <auro-menuoption value="close window">Close window</auro-menuoption>
205
- <auro-menuoption value="close tab">Close tab</auro-menuoption>
206
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
207
- <hr>
208
- <auro-menuoption value="share">Share</auro-menuoption>
209
- <hr>
210
- <auro-menuoption value="print">Print</auro-menuoption>
211
- </auro-menu>
212
- ```
193
+ <pre class="language-html"><code class="language-html">&lt;auro-menu disabled&gt;
194
+ &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
195
+ &lt;auro-menuoption value="new window"&gt;New window&lt;/auro-menuoption&gt;
196
+ &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
197
+ &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
198
+ &lt;hr&gt;
199
+ &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
200
+ &lt;auro-menuoption value="close tab"&gt;Close tab&lt;/auro-menuoption&gt;
201
+ &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
202
+ &lt;hr&gt;
203
+ &lt;auro-menuoption value="share"&gt;Share&lt;/auro-menuoption&gt;
204
+ &lt;hr&gt;
205
+ &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
206
+ &lt;/auro-menu&gt;</code></pre>
213
207
  <!-- AURO-GENERATED-CONTENT:END -->
214
208
  </auro-accordion>
215
209
 
@@ -218,45 +212,43 @@ The `auro-menu` element with `disabled` will mark all `auro-menuoption` elements
218
212
  The `auro-menuoption` element supports the placement of the `disabled` attribute per option. A fully disabled list would be managed in an outer wrapping drop down menu element.
219
213
 
220
214
  <div class="exampleWrapper">
221
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
222
- <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
223
- <auro-menu>
224
- <auro-menuoption value="new tab">New tab</auro-menuoption>
225
- <auro-menuoption value="new window">New window</auro-menuoption>
226
- <auro-menuoption value="open file">Open file</auro-menuoption>
227
- <auro-menuoption value="open location">Open location</auro-menuoption>
228
- <hr>
229
- <auro-menuoption value="close window">Close window</auro-menuoption>
230
- <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
231
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
232
- <hr>
233
- <auro-menuoption value="share" disabled>Share</auro-menuoption>
234
- <hr>
235
- <auro-menuoption value="print">Print</auro-menuoption>
236
- </auro-menu>
237
- <!-- AURO-GENERATED-CONTENT:END -->
215
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
216
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
217
+ <auro-menu>
218
+ <auro-menuoption value="new tab">New tab</auro-menuoption>
219
+ <auro-menuoption value="new window">New window</auro-menuoption>
220
+ <auro-menuoption value="open file">Open file</auro-menuoption>
221
+ <auro-menuoption value="open location">Open location</auro-menuoption>
222
+ <hr>
223
+ <auro-menuoption value="close window">Close window</auro-menuoption>
224
+ <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
225
+ <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
226
+ <hr>
227
+ <auro-menuoption value="share" disabled>Share</auro-menuoption>
228
+ <hr>
229
+ <auro-menuoption value="print">Print</auro-menuoption>
230
+ </auro-menu>
231
+ <!-- AURO-GENERATED-CONTENT:END -->
238
232
  </div>
239
233
  <auro-accordion alignRight>
240
- <span slot="trigger">See code</span>
234
+ <span slot="trigger">See code</span>
241
235
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
242
236
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
243
237
 
244
- ```html
245
- <auro-menu>
246
- <auro-menuoption value="new tab">New tab</auro-menuoption>
247
- <auro-menuoption value="new window">New window</auro-menuoption>
248
- <auro-menuoption value="open file">Open file</auro-menuoption>
249
- <auro-menuoption value="open location">Open location</auro-menuoption>
250
- <hr>
251
- <auro-menuoption value="close window">Close window</auro-menuoption>
252
- <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
253
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
254
- <hr>
255
- <auro-menuoption value="share" disabled>Share</auro-menuoption>
256
- <hr>
257
- <auro-menuoption value="print">Print</auro-menuoption>
258
- </auro-menu>
259
- ```
238
+ <pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
239
+ &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
240
+ &lt;auro-menuoption value="new window"&gt;New window&lt;/auro-menuoption&gt;
241
+ &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
242
+ &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
243
+ &lt;hr&gt;
244
+ &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
245
+ &lt;auro-menuoption value="close tab" disabled&gt;Close tab&lt;/auro-menuoption&gt;
246
+ &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
247
+ &lt;hr&gt;
248
+ &lt;auro-menuoption value="share" disabled&gt;Share&lt;/auro-menuoption&gt;
249
+ &lt;hr&gt;
250
+ &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
251
+ &lt;/auro-menu&gt;</code></pre>
260
252
  <!-- AURO-GENERATED-CONTENT:END -->
261
253
  </auro-accordion>
262
254
 
@@ -273,85 +265,81 @@ Due to a limitation with Lit change detection to the `value` property, if multip
273
265
  _Note: Since the value passed to the `value` property when programmatically setting it is overwritten with the proper derived value once the menu has updated, note that it will take one lifecycle before the `value` property is updated to the value that represents the actual menu state._
274
266
 
275
267
  <div class="exampleWrapper">
276
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/keys.html) -->
277
- <!-- The below content is automatically added from ./../apiExamples/keys.html -->
278
- <auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
279
- <auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
280
- <auro-menu id="keys-menu">
281
- <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
282
- <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
283
- <hr>
284
- <auro-menuoption value="duration">Duration</auro-menuoption>
285
- <auro-menuoption value="departure">Departure</auro-menuoption>
286
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
287
- <auro-menuoption value="stops">Stops</auro-menuoption>
288
- <auro-menuoption value="price">Price</auro-menuoption>
289
- </auro-menu>
290
- <p id="output" class="body-sm"></p>
291
- <!-- AURO-GENERATED-CONTENT:END -->
268
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/keys.html) -->
269
+ <!-- The below content is automatically added from ./../apiExamples/keys.html -->
270
+ <auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
271
+ <auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
272
+ <auro-menu id="keys-menu">
273
+ <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
274
+ <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
275
+ <hr>
276
+ <auro-menuoption value="duration">Duration</auro-menuoption>
277
+ <auro-menuoption value="departure">Departure</auro-menuoption>
278
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
279
+ <auro-menuoption value="stops">Stops</auro-menuoption>
280
+ <auro-menuoption value="price">Price</auro-menuoption>
281
+ </auro-menu>
282
+ <p id="output" class="body-sm"></p>
283
+ <!-- AURO-GENERATED-CONTENT:END -->
292
284
  </div>
293
285
  <auro-accordion alignRight>
294
- <span slot="trigger">See code</span>
286
+ <span slot="trigger">See code</span>
295
287
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/keys.html) -->
296
288
  <!-- The below code snippet is automatically added from ./../apiExamples/keys.html -->
297
289
 
298
- ```html
299
- <auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
300
- <auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
301
- <auro-menu id="keys-menu">
302
- <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
303
- <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
304
- <hr>
305
- <auro-menuoption value="duration">Duration</auro-menuoption>
306
- <auro-menuoption value="departure">Departure</auro-menuoption>
307
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
308
- <auro-menuoption value="stops">Stops</auro-menuoption>
309
- <auro-menuoption value="price">Price</auro-menuoption>
310
- </auro-menu>
311
- <p id="output" class="body-sm"></p>
312
- ```
290
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="stopsTopButton"&gt;Call `menu.value = 'stops-top'`&lt;/auro-button&gt;
291
+ &lt;auro-button id="stopsButton"&gt;Call `menu.value = 'stops'`&lt;/auro-button&gt;
292
+ &lt;auro-menu id="keys-menu"&gt;
293
+ &lt;auro-menuoption value="stops" key="stops-top"&gt;Stops&lt;/auro-menuoption&gt;
294
+ &lt;auro-menuoption value="price" key="price-top"&gt;Price&lt;/auro-menuoption&gt;
295
+ &lt;hr&gt;
296
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
297
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
298
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
299
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
300
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
301
+ &lt;/auro-menu&gt;
302
+ &lt;p id="output" class="body-sm"&gt;&lt;/p&gt;</code></pre>
313
303
  <!-- AURO-GENERATED-CONTENT:END -->
314
304
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/keys.js) -->
315
305
  <!-- The below code snippet is automatically added from ./../apiExamples/keys.js -->
316
306
 
317
- ```js
318
- export function initKeysExample() {
307
+ <pre class="language-js"><code class="language-js">export function initKeysExample() {
319
308
  const menu = document.getElementById('keys-menu');
320
309
  const stopsButton = document.getElementById('stopsButton');
321
310
  const stopsTopButton = document.getElementById('stopsTopButton');
322
311
  const output = document.getElementById('output');
323
-
324
- const createConsoleEntry = (message) => {
312
+ ​
313
+ const createConsoleEntry = (message) =&gt; {
325
314
  const node = document.createElement('span');
326
315
  node.innerHTML = message;
327
316
  output.appendChild(node);
328
317
  output.appendChild(document.createElement('br'));
329
318
  };
330
-
331
- const resetConsole = () => {
319
+ ​
320
+ const resetConsole = () =&gt; {
332
321
  output.innerHTML = '';
333
322
  };
334
-
335
- const updateMenuValue = (value) => {
323
+ ​
324
+ const updateMenuValue = (value) =&gt; {
336
325
  resetConsole();
337
- createConsoleEntry(`Setting menu.value: <em>"${value}"</em>`);
326
+ createConsoleEntry(`Setting menu.value: &lt;em&gt;"${value}"&lt;/em&gt;`);
338
327
  menu.value = '';
339
328
  menu.value = value;
340
- createConsoleEntry(`menu.value before next lifecycle: <em>"${menu.value}"</em>`);
341
- setTimeout(() => {
342
- createConsoleEntry(`menu.value after lifecycle: <em>"${menu.value}"</em>`);
329
+ createConsoleEntry(`menu.value before next lifecycle: &lt;em&gt;"${menu.value}"&lt;/em&gt;`);
330
+ setTimeout(() =&gt; {
331
+ createConsoleEntry(`menu.value after lifecycle: &lt;em&gt;"${menu.value}"&lt;/em&gt;`);
343
332
  });
344
333
  };
345
-
346
- stopsButton.addEventListener('click', () => {
334
+ ​
335
+ stopsButton.addEventListener('click', () =&gt; {
347
336
  updateMenuValue('stops');
348
337
  });
349
-
350
- stopsTopButton.addEventListener('click', () => {
338
+ ​
339
+ stopsTopButton.addEventListener('click', () =&gt; {
351
340
  updateMenuValue('stops-top');
352
341
  });
353
- };
354
- ```
342
+ };</code></pre>
355
343
  <!-- AURO-GENERATED-CONTENT:END -->
356
344
  </auro-accordion>
357
345
 
@@ -360,132 +348,128 @@ export function initKeysExample() {
360
348
  While content is loading, the menu can either remain empty or display a loading placeholder
361
349
 
362
350
  <div class="exampleWrapper">
363
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
364
- <!-- The below content is automatically added from ./../apiExamples/loading.html -->
365
- <auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
366
- <table id="loadingExampleTable">
367
- <thead>
368
- <tr>
369
- <td width="25%">Spinner + Text</td>
370
- <td width="25%">Text Only</td>
371
- <td width="25%">Spinner Only</td>
372
- <td width="25%">None</td>
373
- </tr>
374
- </thead>
375
- <tr>
376
- <td>
377
- <auro-menu>
378
- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
379
- <auro-menuoption value="stops">Stops</auro-menuoption>
380
- <auro-menuoption value="price">Price</auro-menuoption>
381
- <auro-menuoption value="duration">Duration</auro-menuoption>
382
- <auro-menuoption value="departure">Departure</auro-menuoption>
383
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
384
- </auro-menu>
385
- </td>
386
- <td>
387
- <auro-menu>
388
- <span slot="loadingText">Loading...</span>
389
- <auro-menuoption value="stops">Stops</auro-menuoption>
390
- <auro-menuoption value="price">Price</auro-menuoption>
391
- <auro-menuoption value="duration">Duration</auro-menuoption>
392
- <auro-menuoption value="departure">Departure</auro-menuoption>
393
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
394
- </auro-menu>
395
- </td>
396
- <td>
397
- <auro-menu>
398
- <auro-loader slot="loadingIcon" orbit xs></auro-loader>
399
- <auro-menuoption value="stops">Stops</auro-menuoption>
400
- <auro-menuoption value="price">Price</auro-menuoption>
401
- <auro-menuoption value="duration">Duration</auro-menuoption>
402
- <auro-menuoption value="departure">Departure</auro-menuoption>
403
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
404
- </auro-menu>
405
- </td>
406
- <td>
407
- <auro-menu>
408
- <auro-menuoption value="stops">Stops</auro-menuoption>
409
- <auro-menuoption value="price">Price</auro-menuoption>
410
- <auro-menuoption value="duration">Duration</auro-menuoption>
411
- <auro-menuoption value="departure">Departure</auro-menuoption>
412
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
413
- </auro-menu>
414
- </td>
415
- </tr>
416
- </table>
417
- <!-- AURO-GENERATED-CONTENT:END -->
351
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
352
+ <!-- The below content is automatically added from ./../apiExamples/loading.html -->
353
+ <auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
354
+ <table id="loadingExampleTable">
355
+ <thead>
356
+ <tr>
357
+ <td width="25%">Spinner + Text</td>
358
+ <td width="25%">Text Only</td>
359
+ <td width="25%">Spinner Only</td>
360
+ <td width="25%">None</td>
361
+ </tr>
362
+ </thead>
363
+ <tr>
364
+ <td>
365
+ <auro-menu>
366
+ <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
367
+ <auro-menuoption value="stops">Stops</auro-menuoption>
368
+ <auro-menuoption value="price">Price</auro-menuoption>
369
+ <auro-menuoption value="duration">Duration</auro-menuoption>
370
+ <auro-menuoption value="departure">Departure</auro-menuoption>
371
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
372
+ </auro-menu>
373
+ </td>
374
+ <td>
375
+ <auro-menu>
376
+ <span slot="loadingText">Loading...</span>
377
+ <auro-menuoption value="stops">Stops</auro-menuoption>
378
+ <auro-menuoption value="price">Price</auro-menuoption>
379
+ <auro-menuoption value="duration">Duration</auro-menuoption>
380
+ <auro-menuoption value="departure">Departure</auro-menuoption>
381
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
382
+ </auro-menu>
383
+ </td>
384
+ <td>
385
+ <auro-menu>
386
+ <auro-loader slot="loadingIcon" orbit xs></auro-loader>
387
+ <auro-menuoption value="stops">Stops</auro-menuoption>
388
+ <auro-menuoption value="price">Price</auro-menuoption>
389
+ <auro-menuoption value="duration">Duration</auro-menuoption>
390
+ <auro-menuoption value="departure">Departure</auro-menuoption>
391
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
392
+ </auro-menu>
393
+ </td>
394
+ <td>
395
+ <auro-menu>
396
+ <auro-menuoption value="stops">Stops</auro-menuoption>
397
+ <auro-menuoption value="price">Price</auro-menuoption>
398
+ <auro-menuoption value="duration">Duration</auro-menuoption>
399
+ <auro-menuoption value="departure">Departure</auro-menuoption>
400
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
401
+ </auro-menu>
402
+ </td>
403
+ </tr>
404
+ </table>
405
+ <!-- AURO-GENERATED-CONTENT:END -->
418
406
  </div>
419
407
  <auro-accordion alignRight>
420
- <span slot="trigger">See code</span>
408
+ <span slot="trigger">See code</span>
421
409
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
422
410
  <!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
423
411
 
424
- ```html
425
- <auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
426
- <table id="loadingExampleTable">
427
- <thead>
428
- <tr>
429
- <td width="25%">Spinner + Text</td>
430
- <td width="25%">Text Only</td>
431
- <td width="25%">Spinner Only</td>
432
- <td width="25%">None</td>
433
- </tr>
434
- </thead>
435
- <tr>
436
- <td>
437
- <auro-menu>
438
- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
439
- <auro-menuoption value="stops">Stops</auro-menuoption>
440
- <auro-menuoption value="price">Price</auro-menuoption>
441
- <auro-menuoption value="duration">Duration</auro-menuoption>
442
- <auro-menuoption value="departure">Departure</auro-menuoption>
443
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
444
- </auro-menu>
445
- </td>
446
- <td>
447
- <auro-menu>
448
- <span slot="loadingText">Loading...</span>
449
- <auro-menuoption value="stops">Stops</auro-menuoption>
450
- <auro-menuoption value="price">Price</auro-menuoption>
451
- <auro-menuoption value="duration">Duration</auro-menuoption>
452
- <auro-menuoption value="departure">Departure</auro-menuoption>
453
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
454
- </auro-menu>
455
- </td>
456
- <td>
457
- <auro-menu>
458
- <auro-loader slot="loadingIcon" orbit xs></auro-loader>
459
- <auro-menuoption value="stops">Stops</auro-menuoption>
460
- <auro-menuoption value="price">Price</auro-menuoption>
461
- <auro-menuoption value="duration">Duration</auro-menuoption>
462
- <auro-menuoption value="departure">Departure</auro-menuoption>
463
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
464
- </auro-menu>
465
- </td>
466
- <td>
467
- <auro-menu>
468
- <auro-menuoption value="stops">Stops</auro-menuoption>
469
- <auro-menuoption value="price">Price</auro-menuoption>
470
- <auro-menuoption value="duration">Duration</auro-menuoption>
471
- <auro-menuoption value="departure">Departure</auro-menuoption>
472
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
473
- </auro-menu>
474
- </td>
475
- </tr>
476
- </table>
477
- ```
412
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="loadingExampleToggleButton"&gt;Toggle Loading&lt;/auro-button&gt;
413
+ &lt;table id="loadingExampleTable"&gt;
414
+ &lt;thead&gt;
415
+ &lt;tr&gt;
416
+ &lt;td width="25%"&gt;Spinner + Text&lt;/td&gt;
417
+ &lt;td width="25%"&gt;Text Only&lt;/td&gt;
418
+ &lt;td width="25%"&gt;Spinner Only&lt;/td&gt;
419
+ &lt;td width="25%"&gt;None&lt;/td&gt;
420
+ &lt;/tr&gt;
421
+ &lt;/thead&gt;
422
+ &lt;tr&gt;
423
+ &lt;td&gt;
424
+ &lt;auro-menu&gt;
425
+ &lt;auro-loader slot="loadingIcon" orbit xs&gt;&lt;/auro-loader&gt;&lt;span slot="loadingText"&gt;Loading...&lt;/span&gt;
426
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
427
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
428
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
429
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
430
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
431
+ &lt;/auro-menu&gt;
432
+ &lt;/td&gt;
433
+ &lt;td&gt;
434
+ &lt;auro-menu&gt;
435
+ &lt;span slot="loadingText"&gt;Loading...&lt;/span&gt;
436
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
437
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
438
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
439
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
440
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
441
+ &lt;/auro-menu&gt;
442
+ &lt;/td&gt;
443
+ &lt;td&gt;
444
+ &lt;auro-menu&gt;
445
+ &lt;auro-loader slot="loadingIcon" orbit xs&gt;&lt;/auro-loader&gt;
446
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
447
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
448
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
449
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
450
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
451
+ &lt;/auro-menu&gt;
452
+ &lt;/td&gt;
453
+ &lt;td&gt;
454
+ &lt;auro-menu&gt;
455
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
456
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
457
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
458
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
459
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
460
+ &lt;/auro-menu&gt;
461
+ &lt;/td&gt;
462
+ &lt;/tr&gt;
463
+ &lt;/table&gt;</code></pre>
478
464
  <!-- AURO-GENERATED-CONTENT:END -->
479
465
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.js) -->
480
466
  <!-- The below code snippet is automatically added from ./../apiExamples/loading.js -->
481
467
 
482
- ```js
483
- export function auroMenuLoadingExample() {
484
- document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
485
- document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
468
+ <pre class="language-js"><code class="language-js">export function auroMenuLoadingExample() {
469
+ document.querySelector("#loadingExampleToggleButton").addEventListener("click", () =&gt; {
470
+ document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu =&gt; menu.toggleAttribute("loading"));
486
471
  });
487
- }
488
- ```
472
+ }</code></pre>
489
473
  <!-- AURO-GENERATED-CONTENT:END -->
490
474
  </auro-accordion>
491
475
 
@@ -494,66 +478,62 @@ export function auroMenuLoadingExample() {
494
478
  Use the `matchWord` attribute to highlight string parts of each menuoption that are equal to `matchWord`. The matching algorithm is case insensitive (e.g., `n` matches `N`).
495
479
 
496
480
  <div class="exampleWrapper">
497
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/match-word.html) -->
498
- <!-- The below content is automatically added from ./../apiExamples/match-word.html -->
499
- <auro-input id="matchWordInput" required>
500
- <span slot="label">Enter a value to match in the menu</span>
501
- </auro-input>
502
- <br />
503
- <auro-menu id="matchWordMenu">
504
- <auro-menuoption value="stops">Stops</auro-menuoption>
505
- <auro-menuoption value="price">Price</auro-menuoption>
506
- <auro-menuoption value="duration">Duration</auro-menuoption>
507
- <auro-menuoption value="departure">Departure</auro-menuoption>
508
- <auro-menu>
509
- <auro-menuoption value="apples">Apples</auro-menuoption>
510
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
511
- <auro-menuoption value="peaches">Peaches</auro-menuoption>
512
- </auro-menu>
513
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
514
- </auro-menu>
515
- <!-- AURO-GENERATED-CONTENT:END -->
481
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/match-word.html) -->
482
+ <!-- The below content is automatically added from ./../apiExamples/match-word.html -->
483
+ <auro-input id="matchWordInput" required>
484
+ <span slot="label">Enter a value to match in the menu</span>
485
+ </auro-input>
486
+ <br />
487
+ <auro-menu id="matchWordMenu">
488
+ <auro-menuoption value="stops">Stops</auro-menuoption>
489
+ <auro-menuoption value="price">Price</auro-menuoption>
490
+ <auro-menuoption value="duration">Duration</auro-menuoption>
491
+ <auro-menuoption value="departure">Departure</auro-menuoption>
492
+ <auro-menu>
493
+ <auro-menuoption value="apples">Apples</auro-menuoption>
494
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
495
+ <auro-menuoption value="peaches">Peaches</auro-menuoption>
496
+ </auro-menu>
497
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
498
+ </auro-menu>
499
+ <!-- AURO-GENERATED-CONTENT:END -->
516
500
  </div>
517
501
  <auro-accordion alignRight>
518
- <span slot="trigger">See code</span>
502
+ <span slot="trigger">See code</span>
519
503
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/match-word.html) -->
520
504
  <!-- The below code snippet is automatically added from ./../apiExamples/match-word.html -->
521
505
 
522
- ```html
523
- <auro-input id="matchWordInput" required>
524
- <span slot="label">Enter a value to match in the menu</span>
525
- </auro-input>
526
- <br />
527
- <auro-menu id="matchWordMenu">
528
- <auro-menuoption value="stops">Stops</auro-menuoption>
529
- <auro-menuoption value="price">Price</auro-menuoption>
530
- <auro-menuoption value="duration">Duration</auro-menuoption>
531
- <auro-menuoption value="departure">Departure</auro-menuoption>
532
- <auro-menu>
533
- <auro-menuoption value="apples">Apples</auro-menuoption>
534
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
535
- <auro-menuoption value="peaches">Peaches</auro-menuoption>
536
- </auro-menu>
537
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
538
- </auro-menu>
539
- ```
506
+ <pre class="language-html"><code class="language-html">&lt;auro-input id="matchWordInput" required&gt;
507
+ &lt;span slot="label"&gt;Enter a value to match in the menu&lt;/span&gt;
508
+ &lt;/auro-input&gt;
509
+ &lt;br /&gt;
510
+ &lt;auro-menu id="matchWordMenu"&gt;
511
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
512
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
513
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
514
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
515
+ &lt;auro-menu&gt;
516
+ &lt;auro-menuoption value="apples"&gt;Apples&lt;/auro-menuoption&gt;
517
+ &lt;auro-menuoption value="oranges"&gt;Oranges&lt;/auro-menuoption&gt;
518
+ &lt;auro-menuoption value="peaches"&gt;Peaches&lt;/auro-menuoption&gt;
519
+ &lt;/auro-menu&gt;
520
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
521
+ &lt;/auro-menu&gt;</code></pre>
540
522
  <!-- AURO-GENERATED-CONTENT:END -->
541
523
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/match-word.js) -->
542
524
  <!-- The below code snippet is automatically added from ./../apiExamples/match-word.js -->
543
525
 
544
- ```js
545
- function updateMatch() {
526
+ <pre class="language-js"><code class="language-js">function updateMatch() {
546
527
  let matchWordMenu = document.querySelector('#matchWordMenu');
547
-
528
+ ​
548
529
  matchWordMenu.matchWord = matchWordInput.value;
549
530
  }
550
-
531
+ ​
551
532
  export function auroMenuMatchWordExample() {
552
533
  let matchWordInput = document.querySelector('#matchWordInput');
553
-
534
+ ​
554
535
  matchWordInput.addEventListener('keyup', updateMatch);
555
- }
556
- ```
536
+ }</code></pre>
557
537
  <!-- AURO-GENERATED-CONTENT:END -->
558
538
  </auro-accordion>
559
539
 
@@ -571,31 +551,29 @@ The value of the menu may be set via multiple methods when in multi-select mode:
571
551
  _Note: Other methods of setting the value may work but are not officially supported and may stop working unexpectedly._
572
552
 
573
553
  <div class="exampleWrapper">
574
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multi-select.html) -->
575
- <!-- The below content is automatically added from ./../apiExamples/multi-select.html -->
576
- <auro-menu multiselect>
577
- <auro-menuoption value="stops">Stops</auro-menuoption>
578
- <auro-menuoption value="price">Price</auro-menuoption>
579
- <auro-menuoption value="duration">Duration</auro-menuoption>
580
- <auro-menuoption value="departure">Departure</auro-menuoption>
581
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
582
- </auro-menu>
583
- <!-- AURO-GENERATED-CONTENT:END -->
554
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multi-select.html) -->
555
+ <!-- The below content is automatically added from ./../apiExamples/multi-select.html -->
556
+ <auro-menu multiselect>
557
+ <auro-menuoption value="stops">Stops</auro-menuoption>
558
+ <auro-menuoption value="price">Price</auro-menuoption>
559
+ <auro-menuoption value="duration">Duration</auro-menuoption>
560
+ <auro-menuoption value="departure">Departure</auro-menuoption>
561
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
562
+ </auro-menu>
563
+ <!-- AURO-GENERATED-CONTENT:END -->
584
564
  </div>
585
565
  <auro-accordion alignRight>
586
- <span slot="trigger">See code</span>
566
+ <span slot="trigger">See code</span>
587
567
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multi-select.html) -->
588
568
  <!-- The below code snippet is automatically added from ./../apiExamples/multi-select.html -->
589
569
 
590
- ```html
591
- <auro-menu multiselect>
592
- <auro-menuoption value="stops">Stops</auro-menuoption>
593
- <auro-menuoption value="price">Price</auro-menuoption>
594
- <auro-menuoption value="duration">Duration</auro-menuoption>
595
- <auro-menuoption value="departure">Departure</auro-menuoption>
596
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
597
- </auro-menu>
598
- ```
570
+ <pre class="language-html"><code class="language-html">&lt;auro-menu multiselect&gt;
571
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
572
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
573
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
574
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
575
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
576
+ &lt;/auro-menu&gt;</code></pre>
599
577
  <!-- AURO-GENERATED-CONTENT:END -->
600
578
  </auro-accordion>
601
579
 
@@ -604,81 +582,79 @@ _Note: Other methods of setting the value may work but are not officially suppor
604
582
  Applying the `noCheckmark` attribute will prevent the check icon from being shown on the selected option. The left padding to reserve space for the checkmark is also removed.
605
583
 
606
584
  <div class="exampleWrapper">
607
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nocheckmark.html) -->
608
- <!-- The below content is automatically added from ./../apiExamples/nocheckmark.html -->
609
- <auro-menu nocheckmark>
610
- <auro-menuoption value="stops">Stops</auro-menuoption>
611
- <auro-menuoption value="price">Price</auro-menuoption>
612
- <auro-menuoption value="duration">Duration</auro-menuoption>
613
- <hr>
614
- <auro-menu>
615
- <auro-menuoption value="apples">Apples</auro-menuoption>
616
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
617
- <auro-menuoption value="pears">Pears</auro-menuoption>
618
- <auro-menuoption value="grapes">Grapes</auro-menuoption>
619
- <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
620
- <hr>
621
- <auro-menu>
622
- <auro-menuoption value="person">Person</auro-menuoption>
623
- <auro-menuoption value="woman">Woman</auro-menuoption>
624
- <auro-menuoption value="man">Man</auro-menuoption>
625
- <auro-menuoption value="camera">Camera</auro-menuoption>
626
- <auro-menuoption value="tv">TV</auro-menuoption>
627
- </auro-menu>
628
- </auro-menu>
629
- <hr>
630
- <auro-menuoption value="departure">Departure</auro-menuoption>
631
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
632
- <hr>
633
- <auro-menu>
634
- <auro-menuoption value="cars">Cars</auro-menuoption>
635
- <auro-menuoption value="trucks">Trucks</auro-menuoption>
636
- <auro-menuoption value="boats">Boats</auro-menuoption>
637
- <auro-menuoption value="planes">Planes</auro-menuoption>
638
- <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
639
- </auro-menu>
640
- </auro-menu>
641
- <!-- AURO-GENERATED-CONTENT:END -->
585
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nocheckmark.html) -->
586
+ <!-- The below content is automatically added from ./../apiExamples/nocheckmark.html -->
587
+ <auro-menu nocheckmark>
588
+ <auro-menuoption value="stops">Stops</auro-menuoption>
589
+ <auro-menuoption value="price">Price</auro-menuoption>
590
+ <auro-menuoption value="duration">Duration</auro-menuoption>
591
+ <hr>
592
+ <auro-menu>
593
+ <auro-menuoption value="apples">Apples</auro-menuoption>
594
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
595
+ <auro-menuoption value="pears">Pears</auro-menuoption>
596
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
597
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
598
+ <hr>
599
+ <auro-menu>
600
+ <auro-menuoption value="person">Person</auro-menuoption>
601
+ <auro-menuoption value="woman">Woman</auro-menuoption>
602
+ <auro-menuoption value="man">Man</auro-menuoption>
603
+ <auro-menuoption value="camera">Camera</auro-menuoption>
604
+ <auro-menuoption value="tv">TV</auro-menuoption>
605
+ </auro-menu>
606
+ </auro-menu>
607
+ <hr>
608
+ <auro-menuoption value="departure">Departure</auro-menuoption>
609
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
610
+ <hr>
611
+ <auro-menu>
612
+ <auro-menuoption value="cars">Cars</auro-menuoption>
613
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
614
+ <auro-menuoption value="boats">Boats</auro-menuoption>
615
+ <auro-menuoption value="planes">Planes</auro-menuoption>
616
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
617
+ </auro-menu>
618
+ </auro-menu>
619
+ <!-- AURO-GENERATED-CONTENT:END -->
642
620
  </div>
643
621
  <auro-accordion alignRight>
644
- <span slot="trigger">See code</span>
622
+ <span slot="trigger">See code</span>
645
623
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nocheckmark.html) -->
646
624
  <!-- The below code snippet is automatically added from ./../apiExamples/nocheckmark.html -->
647
625
 
648
- ```html
649
- <auro-menu nocheckmark>
650
- <auro-menuoption value="stops">Stops</auro-menuoption>
651
- <auro-menuoption value="price">Price</auro-menuoption>
652
- <auro-menuoption value="duration">Duration</auro-menuoption>
653
- <hr>
654
- <auro-menu>
655
- <auro-menuoption value="apples">Apples</auro-menuoption>
656
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
657
- <auro-menuoption value="pears">Pears</auro-menuoption>
658
- <auro-menuoption value="grapes">Grapes</auro-menuoption>
659
- <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
660
- <hr>
661
- <auro-menu>
662
- <auro-menuoption value="person">Person</auro-menuoption>
663
- <auro-menuoption value="woman">Woman</auro-menuoption>
664
- <auro-menuoption value="man">Man</auro-menuoption>
665
- <auro-menuoption value="camera">Camera</auro-menuoption>
666
- <auro-menuoption value="tv">TV</auro-menuoption>
667
- </auro-menu>
668
- </auro-menu>
669
- <hr>
670
- <auro-menuoption value="departure">Departure</auro-menuoption>
671
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
672
- <hr>
673
- <auro-menu>
674
- <auro-menuoption value="cars">Cars</auro-menuoption>
675
- <auro-menuoption value="trucks">Trucks</auro-menuoption>
676
- <auro-menuoption value="boats">Boats</auro-menuoption>
677
- <auro-menuoption value="planes">Planes</auro-menuoption>
678
- <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
679
- </auro-menu>
680
- </auro-menu>
681
- ```
626
+ <pre class="language-html"><code class="language-html">&lt;auro-menu nocheckmark&gt;
627
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
628
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
629
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
630
+ &lt;hr&gt;
631
+ &lt;auro-menu&gt;
632
+ &lt;auro-menuoption value="apples"&gt;Apples&lt;/auro-menuoption&gt;
633
+ &lt;auro-menuoption value="oranges"&gt;Oranges&lt;/auro-menuoption&gt;
634
+ &lt;auro-menuoption value="pears"&gt;Pears&lt;/auro-menuoption&gt;
635
+ &lt;auro-menuoption value="grapes"&gt;Grapes&lt;/auro-menuoption&gt;
636
+ &lt;auro-menuoption value="kiwi"&gt;Kiwi&lt;/auro-menuoption&gt;
637
+ &lt;hr&gt;
638
+ &lt;auro-menu&gt;
639
+ &lt;auro-menuoption value="person"&gt;Person&lt;/auro-menuoption&gt;
640
+ &lt;auro-menuoption value="woman"&gt;Woman&lt;/auro-menuoption&gt;
641
+ &lt;auro-menuoption value="man"&gt;Man&lt;/auro-menuoption&gt;
642
+ &lt;auro-menuoption value="camera"&gt;Camera&lt;/auro-menuoption&gt;
643
+ &lt;auro-menuoption value="tv"&gt;TV&lt;/auro-menuoption&gt;
644
+ &lt;/auro-menu&gt;
645
+ &lt;/auro-menu&gt;
646
+ &lt;hr&gt;
647
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
648
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
649
+ &lt;hr&gt;
650
+ &lt;auro-menu&gt;
651
+ &lt;auro-menuoption value="cars"&gt;Cars&lt;/auro-menuoption&gt;
652
+ &lt;auro-menuoption value="trucks"&gt;Trucks&lt;/auro-menuoption&gt;
653
+ &lt;auro-menuoption value="boats"&gt;Boats&lt;/auro-menuoption&gt;
654
+ &lt;auro-menuoption value="planes"&gt;Planes&lt;/auro-menuoption&gt;
655
+ &lt;auro-menuoption value="motorcycles"&gt;Motorcycles&lt;/auro-menuoption&gt;
656
+ &lt;/auro-menu&gt;
657
+ &lt;/auro-menu&gt;</code></pre>
682
658
  <!-- AURO-GENERATED-CONTENT:END -->
683
659
  </auro-accordion>
684
660
 
@@ -689,57 +665,20 @@ Use the `selectAllMatchingOptions` attribute to enable selecting all options wit
689
665
  If not set, only the first matching option will be selected.
690
666
 
691
667
  <div class="exampleWrapper">
692
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/select-all-matching-options.html) -->
693
- <!-- The below content is automatically added from ./../apiExamples/select-all-matching-options.html -->
694
- <p>With <code>selectAllMatchingOptions</code> enabled:</p>
695
- <auro-button id="selectAllBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
696
- <auro-button id="resetAllBtn">Reset Menu</auro-button>
697
- <auro-menu multiselect selectAllMatchingOptions id="selectAllMenu">
698
- <auro-menuoption value="stops">Stops</auro-menuoption>
699
- <auro-menuoption value="price">Price</auro-menuoption>
700
- <hr>
701
- <auro-menuoption value="duration">Duration</auro-menuoption>
702
- <auro-menuoption value="departure">Departure</auro-menuoption>
703
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
704
- <auro-menuoption value="stops">Stops</auro-menuoption>
705
- <auro-menuoption value="price">Price</auro-menuoption>
706
- </auro-menu>
707
- <br/>
708
- <br/>
709
- <br/>
710
- <p>Without <code>selectAllMatchingOptions</code> enabled:</p>
711
- <auro-button id="selectFirstBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
712
- <auro-button id="resetFirstBtn">Reset Menu</auro-button>
713
- <auro-menu multiselect id="selectFirstMenu">
714
- <auro-menuoption value="stops">Stops</auro-menuoption>
715
- <auro-menuoption value="price">Price</auro-menuoption>
716
- <hr>
717
- <auro-menuoption value="duration">Duration</auro-menuoption>
718
- <auro-menuoption value="departure">Departure</auro-menuoption>
719
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
720
- <auro-menuoption value="stops">Stops</auro-menuoption>
721
- <auro-menuoption value="price">Price</auro-menuoption>
722
- </auro-menu>
723
- <!-- AURO-GENERATED-CONTENT:END -->
724
- </div>
725
- <auro-accordion alignRight>
726
- <span slot="trigger">See code</span>
727
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/select-all-matching-options.html) -->
728
- <!-- The below code snippet is automatically added from ./../apiExamples/select-all-matching-options.html -->
729
-
730
- ```html
668
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/select-all-matching-options.html) -->
669
+ <!-- The below content is automatically added from ./../apiExamples/select-all-matching-options.html -->
731
670
  <p>With <code>selectAllMatchingOptions</code> enabled:</p>
732
671
  <auro-button id="selectAllBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
733
672
  <auro-button id="resetAllBtn">Reset Menu</auro-button>
734
673
  <auro-menu multiselect selectAllMatchingOptions id="selectAllMenu">
735
- <auro-menuoption value="stops">Stops</auro-menuoption>
736
- <auro-menuoption value="price">Price</auro-menuoption>
737
- <hr>
738
- <auro-menuoption value="duration">Duration</auro-menuoption>
739
- <auro-menuoption value="departure">Departure</auro-menuoption>
740
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
741
- <auro-menuoption value="stops">Stops</auro-menuoption>
742
- <auro-menuoption value="price">Price</auro-menuoption>
674
+ <auro-menuoption value="stops">Stops</auro-menuoption>
675
+ <auro-menuoption value="price">Price</auro-menuoption>
676
+ <hr>
677
+ <auro-menuoption value="duration">Duration</auro-menuoption>
678
+ <auro-menuoption value="departure">Departure</auro-menuoption>
679
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
680
+ <auro-menuoption value="stops">Stops</auro-menuoption>
681
+ <auro-menuoption value="price">Price</auro-menuoption>
743
682
  </auro-menu>
744
683
  <br/>
745
684
  <br/>
@@ -748,47 +687,80 @@ If not set, only the first matching option will be selected.
748
687
  <auro-button id="selectFirstBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
749
688
  <auro-button id="resetFirstBtn">Reset Menu</auro-button>
750
689
  <auro-menu multiselect id="selectFirstMenu">
751
- <auro-menuoption value="stops">Stops</auro-menuoption>
752
- <auro-menuoption value="price">Price</auro-menuoption>
753
- <hr>
754
- <auro-menuoption value="duration">Duration</auro-menuoption>
755
- <auro-menuoption value="departure">Departure</auro-menuoption>
756
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
757
- <auro-menuoption value="stops">Stops</auro-menuoption>
758
- <auro-menuoption value="price">Price</auro-menuoption>
759
- </auro-menu>
760
- ```
690
+ <auro-menuoption value="stops">Stops</auro-menuoption>
691
+ <auro-menuoption value="price">Price</auro-menuoption>
692
+ <hr>
693
+ <auro-menuoption value="duration">Duration</auro-menuoption>
694
+ <auro-menuoption value="departure">Departure</auro-menuoption>
695
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
696
+ <auro-menuoption value="stops">Stops</auro-menuoption>
697
+ <auro-menuoption value="price">Price</auro-menuoption>
698
+ </auro-menu>
699
+ <!-- AURO-GENERATED-CONTENT:END -->
700
+ </div>
701
+ <auro-accordion alignRight>
702
+ <span slot="trigger">See code</span>
703
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/select-all-matching-options.html) -->
704
+ <!-- The below code snippet is automatically added from ./../apiExamples/select-all-matching-options.html -->
705
+
706
+ <pre class="language-html"><code class="language-html">&lt;p&gt;With &lt;code&gt;selectAllMatchingOptions&lt;/code&gt; enabled:&lt;/p&gt;
707
+ &lt;auro-button id="selectAllBtn"&gt;Set &lt;code&gt;menu.value&lt;/code&gt; to &lt;code&gt;'stops'&lt;/code&gt;&lt;/auro-button&gt;
708
+ &lt;auro-button id="resetAllBtn"&gt;Reset Menu&lt;/auro-button&gt;
709
+ &lt;auro-menu multiselect selectAllMatchingOptions id="selectAllMenu"&gt;
710
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
711
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
712
+ &lt;hr&gt;
713
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
714
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
715
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
716
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
717
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
718
+ &lt;/auro-menu&gt;
719
+ &lt;br/&gt;
720
+ &lt;br/&gt;
721
+ &lt;br/&gt;
722
+ &lt;p&gt;Without &lt;code&gt;selectAllMatchingOptions&lt;/code&gt; enabled:&lt;/p&gt;
723
+ &lt;auro-button id="selectFirstBtn"&gt;Set &lt;code&gt;menu.value&lt;/code&gt; to &lt;code&gt;'stops'&lt;/code&gt;&lt;/auro-button&gt;
724
+ &lt;auro-button id="resetFirstBtn"&gt;Reset Menu&lt;/auro-button&gt;
725
+ &lt;auro-menu multiselect id="selectFirstMenu"&gt;
726
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
727
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
728
+ &lt;hr&gt;
729
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
730
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
731
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
732
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
733
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
734
+ &lt;/auro-menu&gt;</code></pre>
761
735
  <!-- AURO-GENERATED-CONTENT:END -->
762
736
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/select-all-matching-options.js) -->
763
737
  <!-- The below code snippet is automatically added from ./../apiExamples/select-all-matching-options.js -->
764
738
 
765
- ```js
766
- export const initSelectAllMatchingOptionsExample = () => {
767
-
739
+ <pre class="language-js"><code class="language-js">export const initSelectAllMatchingOptionsExample = () =&gt; {
740
+ ​
768
741
  const selectAllBtn = document.getElementById('selectAllBtn');
769
742
  const selectAllMenu = document.getElementById('selectAllMenu');
770
743
  const selectFirstBtn = document.getElementById('selectFirstBtn');
771
744
  const selectFirstMenu = document.getElementById('selectFirstMenu');
772
745
  const resetAllBtn = document.getElementById('resetAllBtn');
773
746
  const resetFirstBtn = document.getElementById('resetFirstBtn');
774
-
775
- selectAllBtn.addEventListener('click', () => {
747
+ ​
748
+ selectAllBtn.addEventListener('click', () =&gt; {
776
749
  selectAllMenu.value = 'stops';
777
750
  });
778
-
779
- resetAllBtn.addEventListener('click', () => {
751
+ ​
752
+ resetAllBtn.addEventListener('click', () =&gt; {
780
753
  selectAllMenu.reset();
781
754
  });
782
-
783
- selectFirstBtn.addEventListener('click', () => {
755
+ ​
756
+ selectFirstBtn.addEventListener('click', () =&gt; {
784
757
  selectFirstMenu.value = 'stops';
785
758
  });
786
-
787
- resetFirstBtn.addEventListener('click', () => {
759
+ ​
760
+ resetFirstBtn.addEventListener('click', () =&gt; {
788
761
  selectFirstMenu.reset();
789
762
  });
790
- };
791
- ```
763
+ };</code></pre>
792
764
  <!-- AURO-GENERATED-CONTENT:END -->
793
765
  </auro-accordion>
794
766
 
@@ -797,45 +769,43 @@ export const initSelectAllMatchingOptionsExample = () => {
797
769
  The `auro-menu` element supports a pre-selected option via the `selected` attribute on the `auro-menuoption` element.
798
770
 
799
771
  <div class="exampleWrapper">
800
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preselect.html) -->
801
- <!-- The below content is automatically added from ./../apiExamples/preselect.html -->
802
- <auro-menu>
803
- <auro-menuoption value="new tab">New tab</auro-menuoption>
804
- <auro-menuoption value="new window" selected>New window</auro-menuoption>
805
- <auro-menuoption value="open file">Open file</auro-menuoption>
806
- <auro-menuoption value="open location">Open location</auro-menuoption>
807
- <hr>
808
- <auro-menuoption value="close window">Close window</auro-menuoption>
809
- <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
810
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
811
- <hr>
812
- <auro-menuoption value="share" disabled>Share</auro-menuoption>
813
- <hr>
814
- <auro-menuoption value="print">Print</auro-menuoption>
815
- </auro-menu>
816
- <!-- AURO-GENERATED-CONTENT:END -->
772
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preselect.html) -->
773
+ <!-- The below content is automatically added from ./../apiExamples/preselect.html -->
774
+ <auro-menu>
775
+ <auro-menuoption value="new tab">New tab</auro-menuoption>
776
+ <auro-menuoption value="new window" selected>New window</auro-menuoption>
777
+ <auro-menuoption value="open file">Open file</auro-menuoption>
778
+ <auro-menuoption value="open location">Open location</auro-menuoption>
779
+ <hr>
780
+ <auro-menuoption value="close window">Close window</auro-menuoption>
781
+ <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
782
+ <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
783
+ <hr>
784
+ <auro-menuoption value="share" disabled>Share</auro-menuoption>
785
+ <hr>
786
+ <auro-menuoption value="print">Print</auro-menuoption>
787
+ </auro-menu>
788
+ <!-- AURO-GENERATED-CONTENT:END -->
817
789
  </div>
818
790
  <auro-accordion alignRight>
819
- <span slot="trigger">See code</span>
791
+ <span slot="trigger">See code</span>
820
792
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/preselect.html) -->
821
793
  <!-- The below code snippet is automatically added from ./../apiExamples/preselect.html -->
822
794
 
823
- ```html
824
- <auro-menu>
825
- <auro-menuoption value="new tab">New tab</auro-menuoption>
826
- <auro-menuoption value="new window" selected>New window</auro-menuoption>
827
- <auro-menuoption value="open file">Open file</auro-menuoption>
828
- <auro-menuoption value="open location">Open location</auro-menuoption>
829
- <hr>
830
- <auro-menuoption value="close window">Close window</auro-menuoption>
831
- <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
832
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
833
- <hr>
834
- <auro-menuoption value="share" disabled>Share</auro-menuoption>
835
- <hr>
836
- <auro-menuoption value="print">Print</auro-menuoption>
837
- </auro-menu>
838
- ```
795
+ <pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
796
+ &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
797
+ &lt;auro-menuoption value="new window" selected&gt;New window&lt;/auro-menuoption&gt;
798
+ &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
799
+ &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
800
+ &lt;hr&gt;
801
+ &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
802
+ &lt;auro-menuoption value="close tab" disabled&gt;Close tab&lt;/auro-menuoption&gt;
803
+ &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
804
+ &lt;hr&gt;
805
+ &lt;auro-menuoption value="share" disabled&gt;Share&lt;/auro-menuoption&gt;
806
+ &lt;hr&gt;
807
+ &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
808
+ &lt;/auro-menu&gt;</code></pre>
839
809
  <!-- AURO-GENERATED-CONTENT:END -->
840
810
  </auro-accordion>
841
811
 
@@ -846,81 +816,79 @@ The `auro-menu` element supports a pre-selected option via the `selected` attrib
846
816
  When setting the `max-height` of `auro-menu`, all of the overflowing content can be accessed via a scrollbar.
847
817
 
848
818
  <div class="exampleWrapper">
849
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scroll.html) -->
850
- <!-- The below content is automatically added from ./../apiExamples/scroll.html -->
851
- <auro-menu id="alpha" style="max-height: 200px">
852
- <auro-menuoption value="stops">Stops</auro-menuoption>
853
- <auro-menuoption value="price">Price</auro-menuoption>
854
- <auro-menuoption value="duration">Duration</auro-menuoption>
855
- <hr>
856
- <auro-menu id="beta">
857
- <auro-menuoption value="apples">Apples</auro-menuoption>
858
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
859
- <auro-menuoption value="pears">Pears</auro-menuoption>
860
- <auro-menuoption value="grapes">Grapes</auro-menuoption>
861
- <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
862
- <hr>
863
- <auro-menu id="charlie">
864
- <auro-menuoption value="person">Person</auro-menuoption>
865
- <auro-menuoption value="woman">Woman</auro-menuoption>
866
- <auro-menuoption value="man">Man</auro-menuoption>
867
- <auro-menuoption value="camera">Camera</auro-menuoption>
868
- <auro-menuoption value="tv">TV</auro-menuoption>
869
- </auro-menu>
870
- </auro-menu>
871
- <hr>
872
- <auro-menuoption value="departure">Departure</auro-menuoption>
873
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
874
- <hr>
875
- <auro-menu id="delta">
876
- <auro-menuoption value="cars">Cars</auro-menuoption>
877
- <auro-menuoption value="trucks">Trucks</auro-menuoption>
878
- <auro-menuoption value="boats">Boats</auro-menuoption>
879
- <auro-menuoption value="planes">Planes</auro-menuoption>
880
- <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
881
- </auro-menu>
882
- </auro-menu>
883
- <!-- AURO-GENERATED-CONTENT:END -->
819
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scroll.html) -->
820
+ <!-- The below content is automatically added from ./../apiExamples/scroll.html -->
821
+ <auro-menu id="alpha" style="max-height: 200px">
822
+ <auro-menuoption value="stops">Stops</auro-menuoption>
823
+ <auro-menuoption value="price">Price</auro-menuoption>
824
+ <auro-menuoption value="duration">Duration</auro-menuoption>
825
+ <hr>
826
+ <auro-menu id="beta">
827
+ <auro-menuoption value="apples">Apples</auro-menuoption>
828
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
829
+ <auro-menuoption value="pears">Pears</auro-menuoption>
830
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
831
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
832
+ <hr>
833
+ <auro-menu id="charlie">
834
+ <auro-menuoption value="person">Person</auro-menuoption>
835
+ <auro-menuoption value="woman">Woman</auro-menuoption>
836
+ <auro-menuoption value="man">Man</auro-menuoption>
837
+ <auro-menuoption value="camera">Camera</auro-menuoption>
838
+ <auro-menuoption value="tv">TV</auro-menuoption>
839
+ </auro-menu>
840
+ </auro-menu>
841
+ <hr>
842
+ <auro-menuoption value="departure">Departure</auro-menuoption>
843
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
844
+ <hr>
845
+ <auro-menu id="delta">
846
+ <auro-menuoption value="cars">Cars</auro-menuoption>
847
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
848
+ <auro-menuoption value="boats">Boats</auro-menuoption>
849
+ <auro-menuoption value="planes">Planes</auro-menuoption>
850
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
851
+ </auro-menu>
852
+ </auro-menu>
853
+ <!-- AURO-GENERATED-CONTENT:END -->
884
854
  </div>
885
855
  <auro-accordion alignRight>
886
- <span slot="trigger">See code</span>
856
+ <span slot="trigger">See code</span>
887
857
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scroll.html) -->
888
858
  <!-- The below code snippet is automatically added from ./../apiExamples/scroll.html -->
889
859
 
890
- ```html
891
- <auro-menu id="alpha" style="max-height: 200px">
892
- <auro-menuoption value="stops">Stops</auro-menuoption>
893
- <auro-menuoption value="price">Price</auro-menuoption>
894
- <auro-menuoption value="duration">Duration</auro-menuoption>
895
- <hr>
896
- <auro-menu id="beta">
897
- <auro-menuoption value="apples">Apples</auro-menuoption>
898
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
899
- <auro-menuoption value="pears">Pears</auro-menuoption>
900
- <auro-menuoption value="grapes">Grapes</auro-menuoption>
901
- <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
902
- <hr>
903
- <auro-menu id="charlie">
904
- <auro-menuoption value="person">Person</auro-menuoption>
905
- <auro-menuoption value="woman">Woman</auro-menuoption>
906
- <auro-menuoption value="man">Man</auro-menuoption>
907
- <auro-menuoption value="camera">Camera</auro-menuoption>
908
- <auro-menuoption value="tv">TV</auro-menuoption>
909
- </auro-menu>
910
- </auro-menu>
911
- <hr>
912
- <auro-menuoption value="departure">Departure</auro-menuoption>
913
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
914
- <hr>
915
- <auro-menu id="delta">
916
- <auro-menuoption value="cars">Cars</auro-menuoption>
917
- <auro-menuoption value="trucks">Trucks</auro-menuoption>
918
- <auro-menuoption value="boats">Boats</auro-menuoption>
919
- <auro-menuoption value="planes">Planes</auro-menuoption>
920
- <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
921
- </auro-menu>
922
- </auro-menu>
923
- ```
860
+ <pre class="language-html"><code class="language-html">&lt;auro-menu id="alpha" style="max-height: 200px"&gt;
861
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
862
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
863
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
864
+ &lt;hr&gt;
865
+ &lt;auro-menu id="beta"&gt;
866
+ &lt;auro-menuoption value="apples"&gt;Apples&lt;/auro-menuoption&gt;
867
+ &lt;auro-menuoption value="oranges"&gt;Oranges&lt;/auro-menuoption&gt;
868
+ &lt;auro-menuoption value="pears"&gt;Pears&lt;/auro-menuoption&gt;
869
+ &lt;auro-menuoption value="grapes"&gt;Grapes&lt;/auro-menuoption&gt;
870
+ &lt;auro-menuoption value="kiwi"&gt;Kiwi&lt;/auro-menuoption&gt;
871
+ &lt;hr&gt;
872
+ &lt;auro-menu id="charlie"&gt;
873
+ &lt;auro-menuoption value="person"&gt;Person&lt;/auro-menuoption&gt;
874
+ &lt;auro-menuoption value="woman"&gt;Woman&lt;/auro-menuoption&gt;
875
+ &lt;auro-menuoption value="man"&gt;Man&lt;/auro-menuoption&gt;
876
+ &lt;auro-menuoption value="camera"&gt;Camera&lt;/auro-menuoption&gt;
877
+ &lt;auro-menuoption value="tv"&gt;TV&lt;/auro-menuoption&gt;
878
+ &lt;/auro-menu&gt;
879
+ &lt;/auro-menu&gt;
880
+ &lt;hr&gt;
881
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
882
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
883
+ &lt;hr&gt;
884
+ &lt;auro-menu id="delta"&gt;
885
+ &lt;auro-menuoption value="cars"&gt;Cars&lt;/auro-menuoption&gt;
886
+ &lt;auro-menuoption value="trucks"&gt;Trucks&lt;/auro-menuoption&gt;
887
+ &lt;auro-menuoption value="boats"&gt;Boats&lt;/auro-menuoption&gt;
888
+ &lt;auro-menuoption value="planes"&gt;Planes&lt;/auro-menuoption&gt;
889
+ &lt;auro-menuoption value="motorcycles"&gt;Motorcycles&lt;/auro-menuoption&gt;
890
+ &lt;/auro-menu&gt;
891
+ &lt;/auro-menu&gt;</code></pre>
924
892
  <!-- AURO-GENERATED-CONTENT:END -->
925
893
  </auro-accordion>
926
894
 
@@ -929,45 +897,43 @@ When setting the `max-height` of `auro-menu`, all of the overflowing content can
929
897
  To create a natural separation between options, simply use a `<hr>` element.
930
898
 
931
899
  <div class="exampleWrapper">
932
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hr.html) -->
933
- <!-- The below content is automatically added from ./../apiExamples/hr.html -->
934
- <auro-menu>
935
- <auro-menuoption value="new tab">New tab</auro-menuoption>
936
- <auro-menuoption value="new window">New window</auro-menuoption>
937
- <auro-menuoption value="open file">Open file</auro-menuoption>
938
- <auro-menuoption value="open location">Open location</auro-menuoption>
939
- <hr>
940
- <auro-menuoption value="close window">Close window</auro-menuoption>
941
- <auro-menuoption value="close tab">Close tab</auro-menuoption>
942
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
943
- <hr>
944
- <auro-menuoption value="share">Share</auro-menuoption>
945
- <hr>
946
- <auro-menuoption value="print">Print</auro-menuoption>
947
- </auro-menu>
948
- <!-- AURO-GENERATED-CONTENT:END -->
900
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hr.html) -->
901
+ <!-- The below content is automatically added from ./../apiExamples/hr.html -->
902
+ <auro-menu>
903
+ <auro-menuoption value="new tab">New tab</auro-menuoption>
904
+ <auro-menuoption value="new window">New window</auro-menuoption>
905
+ <auro-menuoption value="open file">Open file</auro-menuoption>
906
+ <auro-menuoption value="open location">Open location</auro-menuoption>
907
+ <hr>
908
+ <auro-menuoption value="close window">Close window</auro-menuoption>
909
+ <auro-menuoption value="close tab">Close tab</auro-menuoption>
910
+ <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
911
+ <hr>
912
+ <auro-menuoption value="share">Share</auro-menuoption>
913
+ <hr>
914
+ <auro-menuoption value="print">Print</auro-menuoption>
915
+ </auro-menu>
916
+ <!-- AURO-GENERATED-CONTENT:END -->
949
917
  </div>
950
918
  <auro-accordion alignRight>
951
- <span slot="trigger">See code</span>
919
+ <span slot="trigger">See code</span>
952
920
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hr.html) -->
953
921
  <!-- The below code snippet is automatically added from ./../apiExamples/hr.html -->
954
922
 
955
- ```html
956
- <auro-menu>
957
- <auro-menuoption value="new tab">New tab</auro-menuoption>
958
- <auro-menuoption value="new window">New window</auro-menuoption>
959
- <auro-menuoption value="open file">Open file</auro-menuoption>
960
- <auro-menuoption value="open location">Open location</auro-menuoption>
961
- <hr>
962
- <auro-menuoption value="close window">Close window</auro-menuoption>
963
- <auro-menuoption value="close tab">Close tab</auro-menuoption>
964
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
965
- <hr>
966
- <auro-menuoption value="share">Share</auro-menuoption>
967
- <hr>
968
- <auro-menuoption value="print">Print</auro-menuoption>
969
- </auro-menu>
970
- ```
923
+ <pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
924
+ &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
925
+ &lt;auro-menuoption value="new window"&gt;New window&lt;/auro-menuoption&gt;
926
+ &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
927
+ &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
928
+ &lt;hr&gt;
929
+ &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
930
+ &lt;auro-menuoption value="close tab"&gt;Close tab&lt;/auro-menuoption&gt;
931
+ &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
932
+ &lt;hr&gt;
933
+ &lt;auro-menuoption value="share"&gt;Share&lt;/auro-menuoption&gt;
934
+ &lt;hr&gt;
935
+ &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
936
+ &lt;/auro-menu&gt;</code></pre>
971
937
  <!-- AURO-GENERATED-CONTENT:END -->
972
938
  </auro-accordion>
973
939
 
@@ -976,81 +942,79 @@ To create a natural separation between options, simply use a `<hr>` element.
976
942
  The `auro-menu` element supports the placement of an `auro-menu` inside of another `auro-menu`. There is no technical limit to the level of nesting.
977
943
 
978
944
  <div class="exampleWrapper">
979
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nested-menu.html) -->
980
- <!-- The below content is automatically added from ./../apiExamples/nested-menu.html -->
981
- <auro-menu id="alpha">
982
- <auro-menuoption value="stops">Stops</auro-menuoption>
983
- <auro-menuoption value="price">Price</auro-menuoption>
984
- <auro-menuoption value="duration">Duration</auro-menuoption>
985
- <hr>
986
- <auro-menu id="beta">
987
- <auro-menuoption value="apples">Apples</auro-menuoption>
988
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
989
- <auro-menuoption value="pears">Pears</auro-menuoption>
990
- <auro-menuoption value="grapes">Grapes</auro-menuoption>
991
- <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
992
- <hr>
993
- <auro-menu id="charlie">
994
- <auro-menuoption value="person">Person</auro-menuoption>
995
- <auro-menuoption value="woman">Woman</auro-menuoption>
996
- <auro-menuoption value="man">Man</auro-menuoption>
997
- <auro-menuoption value="camera">Camera</auro-menuoption>
998
- <auro-menuoption value="tv">TV</auro-menuoption>
999
- </auro-menu>
1000
- </auro-menu>
1001
- <hr>
1002
- <auro-menuoption value="departure">Departure</auro-menuoption>
1003
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
1004
- <hr>
1005
- <auro-menu id="delta">
1006
- <auro-menuoption value="cars">Cars</auro-menuoption>
1007
- <auro-menuoption value="trucks">Trucks</auro-menuoption>
1008
- <auro-menuoption value="boats">Boats</auro-menuoption>
1009
- <auro-menuoption value="planes">Planes</auro-menuoption>
1010
- <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
1011
- </auro-menu>
1012
- </auro-menu>
1013
- <!-- AURO-GENERATED-CONTENT:END -->
945
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nested-menu.html) -->
946
+ <!-- The below content is automatically added from ./../apiExamples/nested-menu.html -->
947
+ <auro-menu id="alpha">
948
+ <auro-menuoption value="stops">Stops</auro-menuoption>
949
+ <auro-menuoption value="price">Price</auro-menuoption>
950
+ <auro-menuoption value="duration">Duration</auro-menuoption>
951
+ <hr>
952
+ <auro-menu id="beta">
953
+ <auro-menuoption value="apples">Apples</auro-menuoption>
954
+ <auro-menuoption value="oranges">Oranges</auro-menuoption>
955
+ <auro-menuoption value="pears">Pears</auro-menuoption>
956
+ <auro-menuoption value="grapes">Grapes</auro-menuoption>
957
+ <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
958
+ <hr>
959
+ <auro-menu id="charlie">
960
+ <auro-menuoption value="person">Person</auro-menuoption>
961
+ <auro-menuoption value="woman">Woman</auro-menuoption>
962
+ <auro-menuoption value="man">Man</auro-menuoption>
963
+ <auro-menuoption value="camera">Camera</auro-menuoption>
964
+ <auro-menuoption value="tv">TV</auro-menuoption>
965
+ </auro-menu>
966
+ </auro-menu>
967
+ <hr>
968
+ <auro-menuoption value="departure">Departure</auro-menuoption>
969
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
970
+ <hr>
971
+ <auro-menu id="delta">
972
+ <auro-menuoption value="cars">Cars</auro-menuoption>
973
+ <auro-menuoption value="trucks">Trucks</auro-menuoption>
974
+ <auro-menuoption value="boats">Boats</auro-menuoption>
975
+ <auro-menuoption value="planes">Planes</auro-menuoption>
976
+ <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
977
+ </auro-menu>
978
+ </auro-menu>
979
+ <!-- AURO-GENERATED-CONTENT:END -->
1014
980
  </div>
1015
981
  <auro-accordion alignRight>
1016
- <span slot="trigger">See code</span>
982
+ <span slot="trigger">See code</span>
1017
983
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nested-menu.html) -->
1018
984
  <!-- The below code snippet is automatically added from ./../apiExamples/nested-menu.html -->
1019
985
 
1020
- ```html
1021
- <auro-menu id="alpha">
1022
- <auro-menuoption value="stops">Stops</auro-menuoption>
1023
- <auro-menuoption value="price">Price</auro-menuoption>
1024
- <auro-menuoption value="duration">Duration</auro-menuoption>
1025
- <hr>
1026
- <auro-menu id="beta">
1027
- <auro-menuoption value="apples">Apples</auro-menuoption>
1028
- <auro-menuoption value="oranges">Oranges</auro-menuoption>
1029
- <auro-menuoption value="pears">Pears</auro-menuoption>
1030
- <auro-menuoption value="grapes">Grapes</auro-menuoption>
1031
- <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
1032
- <hr>
1033
- <auro-menu id="charlie">
1034
- <auro-menuoption value="person">Person</auro-menuoption>
1035
- <auro-menuoption value="woman">Woman</auro-menuoption>
1036
- <auro-menuoption value="man">Man</auro-menuoption>
1037
- <auro-menuoption value="camera">Camera</auro-menuoption>
1038
- <auro-menuoption value="tv">TV</auro-menuoption>
1039
- </auro-menu>
1040
- </auro-menu>
1041
- <hr>
1042
- <auro-menuoption value="departure">Departure</auro-menuoption>
1043
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
1044
- <hr>
1045
- <auro-menu id="delta">
1046
- <auro-menuoption value="cars">Cars</auro-menuoption>
1047
- <auro-menuoption value="trucks">Trucks</auro-menuoption>
1048
- <auro-menuoption value="boats">Boats</auro-menuoption>
1049
- <auro-menuoption value="planes">Planes</auro-menuoption>
1050
- <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
1051
- </auro-menu>
1052
- </auro-menu>
1053
- ```
986
+ <pre class="language-html"><code class="language-html">&lt;auro-menu id="alpha"&gt;
987
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
988
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
989
+ &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
990
+ &lt;hr&gt;
991
+ &lt;auro-menu id="beta"&gt;
992
+ &lt;auro-menuoption value="apples"&gt;Apples&lt;/auro-menuoption&gt;
993
+ &lt;auro-menuoption value="oranges"&gt;Oranges&lt;/auro-menuoption&gt;
994
+ &lt;auro-menuoption value="pears"&gt;Pears&lt;/auro-menuoption&gt;
995
+ &lt;auro-menuoption value="grapes"&gt;Grapes&lt;/auro-menuoption&gt;
996
+ &lt;auro-menuoption value="kiwi"&gt;Kiwi&lt;/auro-menuoption&gt;
997
+ &lt;hr&gt;
998
+ &lt;auro-menu id="charlie"&gt;
999
+ &lt;auro-menuoption value="person"&gt;Person&lt;/auro-menuoption&gt;
1000
+ &lt;auro-menuoption value="woman"&gt;Woman&lt;/auro-menuoption&gt;
1001
+ &lt;auro-menuoption value="man"&gt;Man&lt;/auro-menuoption&gt;
1002
+ &lt;auro-menuoption value="camera"&gt;Camera&lt;/auro-menuoption&gt;
1003
+ &lt;auro-menuoption value="tv"&gt;TV&lt;/auro-menuoption&gt;
1004
+ &lt;/auro-menu&gt;
1005
+ &lt;/auro-menu&gt;
1006
+ &lt;hr&gt;
1007
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
1008
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
1009
+ &lt;hr&gt;
1010
+ &lt;auro-menu id="delta"&gt;
1011
+ &lt;auro-menuoption value="cars"&gt;Cars&lt;/auro-menuoption&gt;
1012
+ &lt;auro-menuoption value="trucks"&gt;Trucks&lt;/auro-menuoption&gt;
1013
+ &lt;auro-menuoption value="boats"&gt;Boats&lt;/auro-menuoption&gt;
1014
+ &lt;auro-menuoption value="planes"&gt;Planes&lt;/auro-menuoption&gt;
1015
+ &lt;auro-menuoption value="motorcycles"&gt;Motorcycles&lt;/auro-menuoption&gt;
1016
+ &lt;/auro-menu&gt;
1017
+ &lt;/auro-menu&gt;</code></pre>
1054
1018
  <!-- AURO-GENERATED-CONTENT:END -->
1055
1019
  </auro-accordion>
1056
1020
 
@@ -1059,45 +1023,43 @@ The `auro-menu` element supports the placement of an `auro-menu` inside of anoth
1059
1023
  The `auro-menu` element supports scenarios where the outer parent element of the menu constrains its width and there are options with text longer than the pull down menu will support. Truncated content will be illustrated with an ellipsis.
1060
1024
 
1061
1025
  <div class="exampleWrapper">
1062
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/restricted-width.html) -->
1063
- <!-- The below content is automatically added from ./../apiExamples/restricted-width.html -->
1064
- <auro-menu style="width: 300px">
1065
- <auro-menuoption value="new tab">New tab</auro-menuoption>
1066
- <auro-menuoption value="new window">New window</auro-menuoption>
1067
- <auro-menuoption value="open file">Open file</auro-menuoption>
1068
- <auro-menuoption value="open location">Open location</auro-menuoption>
1069
- <hr>
1070
- <auro-menuoption value="close window">Close window</auro-menuoption>
1071
- <auro-menuoption value="close tab">Close tab</auro-menuoption>
1072
- <auro-menuoption value="save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
1073
- <hr>
1074
- <auro-menuoption value="share">Share</auro-menuoption>
1075
- <hr>
1076
- <auro-menuoption value="print">Print</auro-menuoption>
1077
- </auro-menu>
1078
- <!-- AURO-GENERATED-CONTENT:END -->
1026
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/restricted-width.html) -->
1027
+ <!-- The below content is automatically added from ./../apiExamples/restricted-width.html -->
1028
+ <auro-menu style="width: 300px">
1029
+ <auro-menuoption value="new tab">New tab</auro-menuoption>
1030
+ <auro-menuoption value="new window">New window</auro-menuoption>
1031
+ <auro-menuoption value="open file">Open file</auro-menuoption>
1032
+ <auro-menuoption value="open location">Open location</auro-menuoption>
1033
+ <hr>
1034
+ <auro-menuoption value="close window">Close window</auro-menuoption>
1035
+ <auro-menuoption value="close tab">Close tab</auro-menuoption>
1036
+ <auro-menuoption value="save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
1037
+ <hr>
1038
+ <auro-menuoption value="share">Share</auro-menuoption>
1039
+ <hr>
1040
+ <auro-menuoption value="print">Print</auro-menuoption>
1041
+ </auro-menu>
1042
+ <!-- AURO-GENERATED-CONTENT:END -->
1079
1043
  </div>
1080
1044
  <auro-accordion alignRight>
1081
- <span slot="trigger">See code</span>
1045
+ <span slot="trigger">See code</span>
1082
1046
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/restricted-width.html) -->
1083
1047
  <!-- The below code snippet is automatically added from ./../apiExamples/restricted-width.html -->
1084
1048
 
1085
- ```html
1086
- <auro-menu style="width: 300px">
1087
- <auro-menuoption value="new tab">New tab</auro-menuoption>
1088
- <auro-menuoption value="new window">New window</auro-menuoption>
1089
- <auro-menuoption value="open file">Open file</auro-menuoption>
1090
- <auro-menuoption value="open location">Open location</auro-menuoption>
1091
- <hr>
1092
- <auro-menuoption value="close window">Close window</auro-menuoption>
1093
- <auro-menuoption value="close tab">Close tab</auro-menuoption>
1094
- <auro-menuoption value="save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
1095
- <hr>
1096
- <auro-menuoption value="share">Share</auro-menuoption>
1097
- <hr>
1098
- <auro-menuoption value="print">Print</auro-menuoption>
1099
- </auro-menu>
1100
- ```
1049
+ <pre class="language-html"><code class="language-html">&lt;auro-menu style="width: 300px"&gt;
1050
+ &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
1051
+ &lt;auro-menuoption value="new window"&gt;New window&lt;/auro-menuoption&gt;
1052
+ &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
1053
+ &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
1054
+ &lt;hr&gt;
1055
+ &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
1056
+ &lt;auro-menuoption value="close tab"&gt;Close tab&lt;/auro-menuoption&gt;
1057
+ &lt;auro-menuoption value="save page as..."&gt;Save page as 'option_10_redevelopment_hover_scenario.png'&lt;/auro-menuoption&gt;
1058
+ &lt;hr&gt;
1059
+ &lt;auro-menuoption value="share"&gt;Share&lt;/auro-menuoption&gt;
1060
+ &lt;hr&gt;
1061
+ &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
1062
+ &lt;/auro-menu&gt;</code></pre>
1101
1063
  <!-- AURO-GENERATED-CONTENT:END -->
1102
1064
  </auro-accordion>
1103
1065
 
@@ -1106,45 +1068,43 @@ The `auro-menu` element supports scenarios where the outer parent element of the
1106
1068
  The `auro-menuoption` element supports scenarios where the menu option needs to be hidden. e.g. the only visible menu options contain the `matchWord`.
1107
1069
 
1108
1070
  <div class="exampleWrapper">
1109
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden.html) -->
1110
- <!-- The below content is automatically added from ./../apiExamples/hidden.html -->
1111
- <auro-menu>
1112
- <auro-menuoption value="new tab">New tab</auro-menuoption>
1113
- <auro-menuoption value="new window">New window</auro-menuoption>
1114
- <auro-menuoption value="open file">Open file</auro-menuoption>
1115
- <auro-menuoption value="open location">Open location</auro-menuoption>
1116
- <hr>
1117
- <auro-menuoption value="close window">Close window</auro-menuoption>
1118
- <auro-menuoption value="close tab" hidden>Close tab</auro-menuoption>
1119
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
1120
- <hr>
1121
- <auro-menuoption value="share" disabled>Share</auro-menuoption>
1122
- <hr>
1123
- <auro-menuoption value="print">Print</auro-menuoption>
1124
- </auro-menu>
1125
- <!-- AURO-GENERATED-CONTENT:END -->
1071
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden.html) -->
1072
+ <!-- The below content is automatically added from ./../apiExamples/hidden.html -->
1073
+ <auro-menu>
1074
+ <auro-menuoption value="new tab">New tab</auro-menuoption>
1075
+ <auro-menuoption value="new window">New window</auro-menuoption>
1076
+ <auro-menuoption value="open file">Open file</auro-menuoption>
1077
+ <auro-menuoption value="open location">Open location</auro-menuoption>
1078
+ <hr>
1079
+ <auro-menuoption value="close window">Close window</auro-menuoption>
1080
+ <auro-menuoption value="close tab" hidden>Close tab</auro-menuoption>
1081
+ <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
1082
+ <hr>
1083
+ <auro-menuoption value="share" disabled>Share</auro-menuoption>
1084
+ <hr>
1085
+ <auro-menuoption value="print">Print</auro-menuoption>
1086
+ </auro-menu>
1087
+ <!-- AURO-GENERATED-CONTENT:END -->
1126
1088
  </div>
1127
1089
  <auro-accordion alignRight>
1128
- <span slot="trigger">See code</span>
1090
+ <span slot="trigger">See code</span>
1129
1091
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
1130
1092
  <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
1131
1093
 
1132
- ```html
1133
- <auro-menu>
1134
- <auro-menuoption value="new tab">New tab</auro-menuoption>
1135
- <auro-menuoption value="new window">New window</auro-menuoption>
1136
- <auro-menuoption value="open file">Open file</auro-menuoption>
1137
- <auro-menuoption value="open location">Open location</auro-menuoption>
1138
- <hr>
1139
- <auro-menuoption value="close window">Close window</auro-menuoption>
1140
- <auro-menuoption value="close tab" hidden>Close tab</auro-menuoption>
1141
- <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
1142
- <hr>
1143
- <auro-menuoption value="share" disabled>Share</auro-menuoption>
1144
- <hr>
1145
- <auro-menuoption value="print">Print</auro-menuoption>
1146
- </auro-menu>
1147
- ```
1094
+ <pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
1095
+ &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
1096
+ &lt;auro-menuoption value="new window"&gt;New window&lt;/auro-menuoption&gt;
1097
+ &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
1098
+ &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
1099
+ &lt;hr&gt;
1100
+ &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
1101
+ &lt;auro-menuoption value="close tab" hidden&gt;Close tab&lt;/auro-menuoption&gt;
1102
+ &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
1103
+ &lt;hr&gt;
1104
+ &lt;auro-menuoption value="share" disabled&gt;Share&lt;/auro-menuoption&gt;
1105
+ &lt;hr&gt;
1106
+ &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
1107
+ &lt;/auro-menu&gt;</code></pre>
1148
1108
  <!-- AURO-GENERATED-CONTENT:END -->
1149
1109
  </auro-accordion>
1150
1110
 
@@ -1153,50 +1113,46 @@ The `auro-menuoption` element supports scenarios where the menu option needs to
1153
1113
  The `auro-menu` may be reset to a state with no menuoption selected by setting the `value` to `undefined`.
1154
1114
 
1155
1115
  <div class="exampleWrapper">
1156
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset.html) -->
1157
- <!-- The below content is automatically added from ./../apiExamples/reset.html -->
1158
- <auro-menu id="resetExample">
1159
- <auro-menuoption value="stops">Stops</auro-menuoption>
1160
- <auro-menuoption value="price">Price</auro-menuoption>
1161
- <auro-menuoption value="duration" selected>Duration</auro-menuoption>
1162
- <auro-menuoption value="departure">Departure</auro-menuoption>
1163
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
1164
- </auro-menu>
1165
- <br/><br/>
1166
- <auro-button id="resetExampleBtn">RESET</auro-button>
1167
- <!-- AURO-GENERATED-CONTENT:END -->
1116
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset.html) -->
1117
+ <!-- The below content is automatically added from ./../apiExamples/reset.html -->
1118
+ <auro-menu id="resetExample">
1119
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1120
+ <auro-menuoption value="price">Price</auro-menuoption>
1121
+ <auro-menuoption value="duration" selected>Duration</auro-menuoption>
1122
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1123
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1124
+ </auro-menu>
1125
+ <br/><br/>
1126
+ <auro-button id="resetExampleBtn">RESET</auro-button>
1127
+ <!-- AURO-GENERATED-CONTENT:END -->
1168
1128
  </div>
1169
1129
  <auro-accordion alignRight>
1170
- <span slot="trigger">See code</span>
1130
+ <span slot="trigger">See code</span>
1171
1131
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset.html) -->
1172
1132
  <!-- The below code snippet is automatically added from ./../apiExamples/reset.html -->
1173
1133
 
1174
- ```html
1175
- <auro-menu id="resetExample">
1176
- <auro-menuoption value="stops">Stops</auro-menuoption>
1177
- <auro-menuoption value="price">Price</auro-menuoption>
1178
- <auro-menuoption value="duration" selected>Duration</auro-menuoption>
1179
- <auro-menuoption value="departure">Departure</auro-menuoption>
1180
- <auro-menuoption value="arrival">Arrival</auro-menuoption>
1181
- </auro-menu>
1182
- <br/><br/>
1183
- <auro-button id="resetExampleBtn">RESET</auro-button>
1184
- ```
1134
+ <pre class="language-html"><code class="language-html">&lt;auro-menu id="resetExample"&gt;
1135
+ &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
1136
+ &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
1137
+ &lt;auro-menuoption value="duration" selected&gt;Duration&lt;/auro-menuoption&gt;
1138
+ &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
1139
+ &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
1140
+ &lt;/auro-menu&gt;
1141
+ &lt;br/&gt;&lt;br/&gt;
1142
+ &lt;auro-button id="resetExampleBtn"&gt;RESET&lt;/auro-button&gt;</code></pre>
1185
1143
  <!-- AURO-GENERATED-CONTENT:END -->
1186
1144
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset.js) -->
1187
1145
  <!-- The below code snippet is automatically added from ./../apiExamples/reset.js -->
1188
1146
 
1189
- ```js
1190
- export function auroMenuResetExample() {
1147
+ <pre class="language-js"><code class="language-js">export function auroMenuResetExample() {
1191
1148
  const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
1192
1149
  const resetExampleElem = document.querySelector('#resetExample');
1193
-
1194
- if (resetExampleElem && resetExampleBtnElem) {
1195
- resetExampleBtnElem.addEventListener('click', () => {
1150
+ ​
1151
+ if (resetExampleElem &amp;&amp; resetExampleBtnElem) {
1152
+ resetExampleBtnElem.addEventListener('click', () =&gt; {
1196
1153
  resetExampleElem.reset();
1197
1154
  });
1198
1155
  }
1199
- }
1200
- ```
1156
+ }</code></pre>
1201
1157
  <!-- AURO-GENERATED-CONTENT:END -->
1202
1158
  </auro-accordion>