@lion/ui 0.16.1 → 0.17.0-menu-system.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 (247) hide show
  1. package/collapsible.js +1 -0
  2. package/components/button/src/LionButton.js +5 -0
  3. package/components/button/test-suites/LionButton.suite.js +1 -0
  4. package/components/calendar/src/LionCalendar.js +2 -0
  5. package/components/collapsible/src/DisclosureMixin.js +313 -0
  6. package/components/collapsible/types/DisclosureMixinTypes.ts +48 -0
  7. package/components/combobox/src/utils/makeMatchingTextBold.js +3 -1
  8. package/components/combobox/test/lion-combobox.test.js +105 -0
  9. package/components/form-core/src/form-group/FormGroupMixin.js +7 -0
  10. package/components/form-core/src/registration/FormRegistrarMixin.js +11 -0
  11. package/components/form-core/test/FormControlMixin.test.js +1 -0
  12. package/components/form-core/test/validate/Validator.test.js +2 -0
  13. package/components/form-core/test-suites/ValidateMixin.suite.js +2 -0
  14. package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js +1 -0
  15. package/components/input-datepicker/src/LionInputDatepicker.js +6 -2
  16. package/components/input-datepicker/src/localizeNamespaceLoader.js +1 -0
  17. package/components/input-datepicker/test/lion-input-datepicker.test.js +17 -2
  18. package/components/input-datepicker/translations/bg.js +1 -1
  19. package/components/input-datepicker/translations/cs.js +1 -1
  20. package/components/input-datepicker/translations/de.js +1 -1
  21. package/components/input-datepicker/translations/en.js +1 -1
  22. package/components/input-datepicker/translations/es.js +1 -1
  23. package/components/input-datepicker/translations/fr.js +1 -1
  24. package/components/input-datepicker/translations/hu.js +1 -1
  25. package/components/input-datepicker/translations/it.js +1 -1
  26. package/components/input-datepicker/translations/nl.js +1 -1
  27. package/components/input-datepicker/translations/pl.js +1 -1
  28. package/components/input-datepicker/translations/ro.js +1 -1
  29. package/components/input-datepicker/translations/ru.js +1 -1
  30. package/components/input-datepicker/translations/sk.js +1 -1
  31. package/components/input-datepicker/translations/tr.js +1 -1
  32. package/components/input-datepicker/translations/uk.js +1 -1
  33. package/components/input-datepicker/translations/zh.js +1 -1
  34. package/components/input-stepper/src/LionInputStepper.js +15 -7
  35. package/components/input-stepper/test-suites/lion-input-stepper.suite.js +28 -4
  36. package/components/localize/test/date/formatDate.test.js +1 -0
  37. package/components/menu/CHANGELOG.md +37 -0
  38. package/components/menu/README.md +335 -0
  39. package/components/menu/index.js +2 -0
  40. package/components/menu/lion-menu-overlay.js +3 -0
  41. package/components/menu/lion-menu.js +3 -0
  42. package/components/menu/lion-spinbutton.js +3 -0
  43. package/components/menu/lion-toolbar.js +3 -0
  44. package/components/menu/lion-tree.js +3 -0
  45. package/components/menu/package.json +46 -0
  46. package/components/menu/requirements.temp.md +12 -0
  47. package/components/menu/src/InteractiveListMixin.js +796 -0
  48. package/components/menu/src/LionMenu.js +250 -0
  49. package/components/menu/src/LionMenuHybrid.js +46 -0
  50. package/components/menu/src/LionMenuOverlay.js +155 -0
  51. package/components/menu/src/LionSpinbutton.js +213 -0
  52. package/components/menu/src/LionToolbar.js +94 -0
  53. package/components/menu/src/LionTree.js +52 -0
  54. package/components/menu/src/MultiLevelListMixin.js +275 -0
  55. package/components/menu/src/utils/isInView.js +26 -0
  56. package/components/menu/src/utils/listItemInteractions.js +104 -0
  57. package/components/menu/src/utils/uuid.js +3 -0
  58. package/components/menu/test/lion-menu.test.js +3 -0
  59. package/components/menu/test-suites/InteractiveListMixin.suite.js +142 -0
  60. package/components/menu/types/InteractiveListMixinTypes.d.ts +82 -0
  61. package/components/navigation-bar/README.md +1 -0
  62. package/components/navigation-bar/src/LionNavigationBar.js +449 -0
  63. package/components/navigation-bar/src/types.js +41 -0
  64. package/components/overlays/NEXT.md +49 -0
  65. package/components/overlays/src/OverlayController.js +165 -115
  66. package/components/overlays/src/OverlayMixin.js +75 -12
  67. package/components/overlays/src/OverlaysManager.js +98 -0
  68. package/components/overlays/src/overlayShadowDomStyle.js +2 -2
  69. package/components/overlays/src/utils/adopt-styles.js +2 -1
  70. package/components/overlays/src/utils/get-focusable-elements.js +4 -0
  71. package/components/overlays/src/utils/is-equal-config.js +4 -1
  72. package/components/overlays/test/OverlayController.test.js +117 -6
  73. package/components/overlays/types/OverlayConfig.ts +19 -4
  74. package/components/select-rich/test/lion-select-rich.test.js +3 -0
  75. package/custom-elements.json +15785 -5337
  76. package/dist-types/components/button/src/LionButton.d.ts +1 -0
  77. package/dist-types/components/button/src/LionButton.d.ts.map +1 -1
  78. package/dist-types/components/button/test-suites/LionButton.suite.d.ts.map +1 -1
  79. package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
  80. package/dist-types/components/collapsible/src/DisclosureMixin.d.ts +3 -0
  81. package/dist-types/components/collapsible/src/DisclosureMixin.d.ts.map +1 -0
  82. package/dist-types/components/collapsible/types/DisclosureMixinTypes.d.ts +24 -0
  83. package/dist-types/components/collapsible/types/DisclosureMixinTypes.d.ts.map +1 -0
  84. package/dist-types/components/combobox/src/utils/makeMatchingTextBold.d.ts.map +1 -1
  85. package/dist-types/components/dialog/src/LionDialog.d.ts +2 -1
  86. package/dist-types/components/dialog/src/LionDialog.d.ts.map +1 -1
  87. package/dist-types/components/form-core/src/form-group/FormGroupMixin.d.ts.map +1 -1
  88. package/dist-types/components/form-core/src/registration/FormRegistrarMixin.d.ts.map +1 -1
  89. package/dist-types/components/form-core/test-suites/ValidateMixin.suite.d.ts.map +1 -1
  90. package/dist-types/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.d.ts.map +1 -1
  91. package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts.map +1 -1
  92. package/dist-types/components/input-datepicker/src/localizeNamespaceLoader.d.ts.map +1 -1
  93. package/dist-types/components/input-stepper/src/LionInputStepper.d.ts +4 -2
  94. package/dist-types/components/input-stepper/src/LionInputStepper.d.ts.map +1 -1
  95. package/dist-types/components/input-stepper/test-suites/lion-input-stepper.suite.d.ts.map +1 -1
  96. package/dist-types/components/menu/index.d.ts +3 -0
  97. package/dist-types/components/menu/index.d.ts.map +1 -0
  98. package/dist-types/components/menu/lion-menu-overlay.d.ts +2 -0
  99. package/dist-types/components/menu/lion-menu-overlay.d.ts.map +1 -0
  100. package/dist-types/components/menu/lion-menu.d.ts +2 -0
  101. package/dist-types/components/menu/lion-menu.d.ts.map +1 -0
  102. package/dist-types/components/menu/lion-spinbutton.d.ts +2 -0
  103. package/dist-types/components/menu/lion-spinbutton.d.ts.map +1 -0
  104. package/dist-types/components/menu/lion-toolbar.d.ts +2 -0
  105. package/dist-types/components/menu/lion-toolbar.d.ts.map +1 -0
  106. package/dist-types/components/menu/lion-tree.d.ts +2 -0
  107. package/dist-types/components/menu/lion-tree.d.ts.map +1 -0
  108. package/dist-types/components/menu/src/InteractiveListMixin.d.ts +611 -0
  109. package/dist-types/components/menu/src/InteractiveListMixin.d.ts.map +1 -0
  110. package/dist-types/components/menu/src/LionMenu.d.ts +563 -0
  111. package/dist-types/components/menu/src/LionMenu.d.ts.map +1 -0
  112. package/dist-types/components/menu/src/LionMenuHybrid.d.ts +19 -0
  113. package/dist-types/components/menu/src/LionMenuHybrid.d.ts.map +1 -0
  114. package/dist-types/components/menu/src/LionMenuOverlay.d.ts +1006 -0
  115. package/dist-types/components/menu/src/LionMenuOverlay.d.ts.map +1 -0
  116. package/dist-types/components/menu/src/LionSpinbutton.d.ts +58 -0
  117. package/dist-types/components/menu/src/LionSpinbutton.d.ts.map +1 -0
  118. package/dist-types/components/menu/src/LionToolbar.d.ts +8 -0
  119. package/dist-types/components/menu/src/LionToolbar.d.ts.map +1 -0
  120. package/dist-types/components/menu/src/LionTree.d.ts +445 -0
  121. package/dist-types/components/menu/src/LionTree.d.ts.map +1 -0
  122. package/dist-types/components/menu/src/MultiLevelListMixin.d.ts +493 -0
  123. package/dist-types/components/menu/src/MultiLevelListMixin.d.ts.map +1 -0
  124. package/dist-types/components/menu/src/utils/isInView.d.ts +9 -0
  125. package/dist-types/components/menu/src/utils/isInView.d.ts.map +1 -0
  126. package/dist-types/components/menu/src/utils/listItemInteractions.d.ts +42 -0
  127. package/dist-types/components/menu/src/utils/listItemInteractions.d.ts.map +1 -0
  128. package/dist-types/components/menu/src/utils/uuid.d.ts +2 -0
  129. package/dist-types/components/menu/src/utils/uuid.d.ts.map +1 -0
  130. package/dist-types/components/menu/test/lion-menu.test.d.ts +2 -0
  131. package/dist-types/components/menu/test/lion-menu.test.d.ts.map +1 -0
  132. package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts +13 -0
  133. package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts.map +1 -0
  134. package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts +226 -0
  135. package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts.map +1 -0
  136. package/dist-types/components/navigation-bar/src/types.d.ts +85 -0
  137. package/dist-types/components/navigation-bar/src/types.d.ts.map +1 -0
  138. package/dist-types/components/overlays/src/OverlayController.d.ts +7 -13
  139. package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
  140. package/dist-types/components/overlays/src/OverlayMixin.d.ts +3 -0
  141. package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
  142. package/dist-types/components/overlays/src/OverlaysManager.d.ts +31 -0
  143. package/dist-types/components/overlays/src/OverlaysManager.d.ts.map +1 -1
  144. package/dist-types/components/overlays/src/utils/get-focusable-elements.d.ts.map +1 -1
  145. package/dist-types/components/overlays/src/utils/is-equal-config.d.ts.map +1 -1
  146. package/dist-types/components/overlays/types/OverlayConfig.d.ts +6 -2
  147. package/dist-types/components/overlays/types/OverlayConfig.d.ts.map +1 -1
  148. package/dist-types/components/select-rich/src/LionSelectRich.d.ts +11 -2
  149. package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map +1 -1
  150. package/dist-types/exports/define/lion-item.d.ts +2 -0
  151. package/dist-types/exports/define/lion-item.d.ts.map +1 -0
  152. package/dist-types/exports/define/lion-menu-overlay.d.ts +2 -0
  153. package/dist-types/exports/define/lion-menu-overlay.d.ts.map +1 -0
  154. package/dist-types/exports/define/lion-menu.d.ts +2 -0
  155. package/dist-types/exports/define/lion-menu.d.ts.map +1 -0
  156. package/dist-types/exports/define/lion-navigation-bar.d.ts +2 -0
  157. package/dist-types/exports/define/lion-navigation-bar.d.ts.map +1 -0
  158. package/dist-types/exports/define/lion-toolbar.d.ts +2 -0
  159. package/dist-types/exports/define/lion-toolbar.d.ts.map +1 -0
  160. package/dist-types/exports/define/lion-tree.d.ts +2 -0
  161. package/dist-types/exports/define/lion-tree.d.ts.map +1 -0
  162. package/dist-types/exports/menu.d.ts +7 -0
  163. package/dist-types/exports/menu.d.ts.map +1 -0
  164. package/dist-types/exports/navigation-bar.d.ts +2 -0
  165. package/dist-types/exports/navigation-bar.d.ts.map +1 -0
  166. package/dist-types/exports/overlays.d.ts +2 -0
  167. package/dist-types/exports/types/overlays.d.ts +1 -0
  168. package/dist-types/exports/types/overlays.d.ts.map +1 -1
  169. package/dist-types/tsconfig.tsbuildinfo +1 -1
  170. package/docs/components/checkbox-group/overview.md +2 -2
  171. package/docs/components/collapsible/overview.md +1 -1
  172. package/docs/components/combobox/overview.md +1 -1
  173. package/docs/components/combobox/use-cases.md +1 -1
  174. package/docs/components/dialog/overview.md +1 -1
  175. package/docs/components/fieldset/overview.md +5 -5
  176. package/docs/components/form/overview.md +3 -3
  177. package/docs/components/form/use-cases.md +2 -2
  178. package/docs/components/icon/use-cases.md +1 -1
  179. package/docs/components/index.md +1 -1
  180. package/docs/components/input/overview.md +1 -1
  181. package/docs/components/input-amount/overview.md +3 -3
  182. package/docs/components/input-date/overview.md +3 -3
  183. package/docs/components/input-datepicker/overview.md +5 -5
  184. package/docs/components/input-datepicker/use-cases.md +16 -1
  185. package/docs/components/input-email/overview.md +2 -2
  186. package/docs/components/input-file/overview.md +1 -1
  187. package/docs/components/input-iban/overview.md +2 -2
  188. package/docs/components/input-range/api-table.md +1 -1
  189. package/docs/components/input-range/overview.md +2 -2
  190. package/docs/components/input-stepper/api-table.md +2 -2
  191. package/docs/components/input-stepper/overview.md +1 -1
  192. package/docs/components/input-stepper/use-cases.md +26 -0
  193. package/docs/components/input-tel/overview.md +1 -1
  194. package/docs/components/input-tel/use-cases.md +6 -6
  195. package/docs/components/input-tel-dropdown/overview.md +1 -1
  196. package/docs/components/listbox/use-cases.md +1 -1
  197. package/docs/components/menu/api-table.md +450 -0
  198. package/docs/components/menu/applyMenuDemoStyles.js +173 -0
  199. package/docs/components/menu/extensions.md +216 -0
  200. package/docs/components/menu/index.md +13 -0
  201. package/docs/components/menu/overview.md +422 -0
  202. package/docs/components/radio-group/overview.md +3 -3
  203. package/docs/components/select/use-cases.md +1 -1
  204. package/docs/components/select-rich/api-table.md +1 -1
  205. package/docs/components/select-rich/use-cases.md +2 -2
  206. package/docs/components/tabs/examples.md +1 -1
  207. package/docs/fundamentals/index.md +4 -4
  208. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  209. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  210. package/docs/fundamentals/rationales/accessibility.md +1 -1
  211. package/docs/fundamentals/systems/core/SlotMixin.md +18 -18
  212. package/docs/fundamentals/systems/core/overview.md +1 -1
  213. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  214. package/docs/fundamentals/systems/form/interaction-states.md +0 -1
  215. package/docs/fundamentals/systems/form/model-value.md +1 -1
  216. package/docs/fundamentals/systems/form/overview.md +28 -28
  217. package/docs/fundamentals/systems/form/validate.md +2 -2
  218. package/docs/fundamentals/systems/localize/overview.md +4 -4
  219. package/docs/fundamentals/systems/localize/text.md +1 -1
  220. package/docs/fundamentals/systems/overlays/api-table.md +92 -45
  221. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  222. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  223. package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
  224. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  225. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  226. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  227. package/docs/guides/how-to/create-a-form.md +4 -4
  228. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  229. package/docs/guides/how-to/index.md +14 -0
  230. package/docs/guides/index.md +8 -8
  231. package/docs/guides/principles/index.md +5 -5
  232. package/docs/guides/principles/styling.md +1 -2
  233. package/exports/collapsible.js +1 -0
  234. package/exports/define/lion-item.js +3 -0
  235. package/exports/define/lion-menu-overlay.js +3 -0
  236. package/exports/define/lion-menu.js +3 -0
  237. package/exports/define/lion-navigation-bar.js +3 -0
  238. package/exports/define/lion-toolbar.js +3 -0
  239. package/exports/define/lion-tree.js +3 -0
  240. package/exports/menu.js +6 -0
  241. package/exports/navigation-bar.js +1 -0
  242. package/exports/overlays.js +2 -0
  243. package/exports/types/overlays.ts +1 -0
  244. package/menu.js +6 -0
  245. package/navigation-bar.js +1 -0
  246. package/overlays.js +2 -0
  247. package/package.json +1 -1
package/docs/components/menu/api-table.md ADDED
@@ -0,0 +1,450 @@
1
+ ---
2
+ parts:
3
+ - API Table
4
+ - Menu
5
+ title: 'Menu: API Table'
6
+ eleventyNavigation:
7
+ key: API Table >> Menu
8
+ title: API Table
9
+ order: 90
10
+ parent: Menu
11
+ ---
12
+ # Menu: API Table
13
+
14
+
15
+ ## class: `LionMenu`, `lion-menu`
16
+
17
+ ### Fields
18
+
19
+ | Name | Privacy | Type | Default | Description | Inherited From |
20
+ | --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
21
+ | `activeIndex` | public | | | | InteractiveListMixin |
22
+ | `activeItem` | public | | | | InteractiveListMixin |
23
+ | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | |
24
+ | `behaveAsAccordion` | public | `boolean` | `true` | When true, will have a maximum of one submenu open at a time | MultiLevelListMixin |
25
+ | `checkedIndex` | public | `number \| number[]` | | | InteractiveListMixin |
26
+ | `handleFocus` | public | `boolean` | `true` | | MultiLevelListMixin |
27
+ | `invokerInteraction` | public | `string` | `'click'` | | |
28
+ | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | MultiLevelListMixin |
29
+ | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | InteractiveListMixin |
30
+ | `itemWrap` | public | `boolean` | | | InteractiveListMixin |
31
+ | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | MultiLevelListMixin |
32
+ | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | InteractiveListMixin |
33
+ | `multipleChoice` | public | `boolean` | `false` | | InteractiveListMixin |
34
+ | `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | InteractiveListMixin |
35
+ | `orientation` | public | `string` | `'vertical'` | | InteractiveListMixin |
36
+ | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | MultiLevelListMixin |
37
+ | `rotateKeyboardNavigation` | public | `boolean` | `false` | | InteractiveListMixin |
38
+ | `selectionFollowsFocus` | public | `boolean` | `false` | | InteractiveListMixin |
39
+ | `slots` | public | | | | InteractiveListMixin |
40
+ | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | InteractiveListMixin |
41
+ | `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | InteractiveListMixin |
42
+ | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. Also we apply aria-current | InteractiveListMixin |
43
+ | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | InteractiveListMixin |
44
+ | `_contentNode` | protected | | | | MultiLevelListMixin |
45
+ | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | InteractiveListMixin |
46
+ | `_hasSmartListItems` | public | | | | InteractiveListMixin |
47
+ | `_interactiveChildrenRoles` | protected | | | | InteractiveListMixin |
48
+ | `_invokerNode` | protected | | | | MultiLevelListMixin |
49
+ | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | InteractiveListMixin |
50
+ | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | InteractiveListMixin |
51
+ | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | InteractiveListMixin |
52
+ | `_scrollTargetNode` | protected | | | | InteractiveListMixin |
53
+ | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | MultiLevelListMixin |
54
+
55
+ ### Methods
56
+
57
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
58
+ | --------------------------- | --------- | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ | -------------------- |
59
+ | `setCheckedIndex` | public | Allows groups within one level. In case we deal with menuitemcheckbox,&#xA;we treat it as multiple choice group | `index: number` | | InteractiveListMixin |
60
+ | `toggle` | public | | `ev: Event` | | MultiLevelListMixin |
61
+ | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
62
+ | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
63
+ | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: *` | | InteractiveListMixin |
64
+ | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | InteractiveListMixin |
65
+ | `_onListClick` | protected | | `ev: MouseEvent` | | InteractiveListMixin |
66
+ | `_onListFocusIn` | protected | | `ev: FocusEvent` | | InteractiveListMixin |
67
+ | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: *` | | InteractiveListMixin |
68
+ | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | InteractiveListMixin |
69
+ | `_setupList` | protected | | | | InteractiveListMixin |
70
+
71
+ ### Attributes
72
+
73
+ | Name | Field | Inherited From |
74
+ | ---------------------------- | ------------------------ | -------------------- |
75
+ | `bar` | bar | |
76
+ | `invokerNode` | invokerNode | MultiLevelListMixin |
77
+ | `behave-as-accordion` | behaveAsAccordion | MultiLevelListMixin |
78
+ | `level` | level | MultiLevelListMixin |
79
+ | `orientation` | orientation | InteractiveListMixin |
80
+ | `multiple-choice` | multipleChoice | InteractiveListMixin |
81
+ | `selection-follows-focus` | selectionFollowsFocus | InteractiveListMixin |
82
+ | `rotate-keyboard-navigation` | rotateKeyboardNavigation | InteractiveListMixin |
83
+ | `no-preselect` | noPreselect | InteractiveListMixin |
84
+ | `item-wrap` | itemWrap | InteractiveListMixin |
85
+ | `_activateOnTypedChars` | \_activateOnTypedChars | InteractiveListMixin |
86
+ | `_hasSmartListItems` | \_hasSmartListItems | InteractiveListMixin |
87
+ | `_activeMode` | \_activeMode | InteractiveListMixin |
88
+
89
+ <hr/>
90
+
91
+
92
+ ## class: `LionMenuHybrid`
93
+
94
+ ### Fields
95
+
96
+ | Name | Privacy | Type | Default | Description | Inherited From |
97
+ | ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
98
+ | `activeIndex` | public | | | | LionMenu |
99
+ | `activeItem` | public | | | | LionMenu |
100
+ | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
101
+ | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
102
+ | `checkedIndex` | public | `number \| number[]` | | | LionMenu |
103
+ | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
104
+ | `handleFocus` | public | `boolean` | `true` | | LionMenu |
105
+ | `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
106
+ | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
107
+ | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | LionMenu |
108
+ | `itemWrap` | public | `boolean` | | | LionMenu |
109
+ | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
110
+ | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenu |
111
+ | `multipleChoice` | public | `boolean` | `false` | | LionMenu |
112
+ | `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenu |
113
+ | `openableMode` | public | `'disclosure'\|'overlay'` | `'disclosure'` | Terminology aligned with https\://open-ui.org/components/openable.explainer/ | |
114
+ | `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog. | OverlayMixin |
115
+ | `orientation` | public | `string` | `'vertical'` | | LionMenu |
116
+ | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
117
+ | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
118
+ | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
119
+ | `slots` | public | | | | LionMenu |
120
+ | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
121
+ | `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | LionMenu |
122
+ | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. Also we apply aria-current | LionMenu |
123
+ | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
124
+ | `_contentNode` | protected | | | | LionMenu |
125
+ | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
126
+ | `_hasSmartListItems` | public | | | | LionMenu |
127
+ | `_interactiveChildrenRoles` | protected | | | | LionMenu |
128
+ | `_invokerNode` | protected | | | | LionMenu |
129
+ | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
130
+ | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
131
+ | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenu |
132
+ | `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
133
+ | `_overlayBackdropNode` | protected | | | | OverlayMixin |
134
+ | `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
135
+ | `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
136
+ | `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
137
+ | `_overlayReferenceNode` | protected | | | | OverlayMixin |
138
+ | `_scrollTargetNode` | protected | | | | LionMenu |
139
+ | `_shouldSetupOverlay` | protected | `boolean` | `false` | | |
140
+ | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
141
+
142
+ ### Methods
143
+
144
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
145
+ | ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
146
+ | `close` | public | Hides the overlay | | | OverlayMixin |
147
+ | `open` | public | Shows the overlay | | | OverlayMixin |
148
+ | `repositionOverlay` | public | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically) | | | OverlayMixin |
149
+ | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | LionMenu |
150
+ | `toggle` | public | Toggles the overlay | `ev: Event` | | LionMenu |
151
+ | `_defineOverlay` | protected | | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin |
152
+ | `_defineOverlayConfig` | protected | | | `OverlayConfig` | OverlayMixin |
153
+ | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
154
+ | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
155
+ | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: LionItem[]\|HTMLElement[]` | | LionMenu |
156
+ | `_isPermanentlyDisconnected` | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around. | | `Promise<boolean>` | OverlayMixin |
157
+ | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenu |
158
+ | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenu |
159
+ | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenu |
160
+ | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: KeyboardEvent` | | LionMenu |
161
+ | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | LionMenu |
162
+ | `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean` | | OverlayMixin |
163
+ | `_setupList` | protected | | | | LionMenu |
164
+ | `_setupOpenCloseListeners` | protected | | | | OverlayMixin |
165
+ | `_setupOverlayCtrl` | protected | | | | OverlayMixin |
166
+ | `_teardownOpenCloseListeners` | protected | | | | OverlayMixin |
167
+ | `_teardownOverlayCtrl` | protected | | | | OverlayMixin |
168
+
169
+ ### Events
170
+
171
+ | Name | Type | Description | Inherited From |
172
+ | ---------------- | ------------- | ----------- | -------------- |
173
+ | `opened-changed` | `CustomEvent` | | OverlayMixin |
174
+
175
+ ### Attributes
176
+
177
+ | Name | Field | Inherited From |
178
+ | ---------------------------- | ------------------------ | -------------- |
179
+ | `openable-mode` | openableMode | |
180
+ | `opened` | opened | OverlayMixin |
181
+ | `orientation` | orientation | LionMenu |
182
+ | `multiple-choice` | multipleChoice | LionMenu |
183
+ | `selection-follows-focus` | selectionFollowsFocus | LionMenu |
184
+ | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenu |
185
+ | `no-preselect` | noPreselect | LionMenu |
186
+ | `item-wrap` | itemWrap | LionMenu |
187
+ | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenu |
188
+ | `_hasSmartListItems` | \_hasSmartListItems | LionMenu |
189
+ | `_activeMode` | \_activeMode | LionMenu |
190
+ | `invokerNode` | invokerNode | LionMenu |
191
+ | `behave-as-accordion` | behaveAsAccordion | LionMenu |
192
+ | `level` | level | LionMenu |
193
+ | `bar` | bar | LionMenu |
194
+
195
+ <hr/>
196
+
197
+
198
+ ## class: `LionMenuOverlay`, `lion-menu-overlay`
199
+
200
+ ### Fields
201
+
202
+ | Name | Privacy | Type | Default | Description | Inherited From |
203
+ | ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
204
+ | `activeIndex` | public | | | | LionMenu |
205
+ | `activeItem` | public | | | | LionMenu |
206
+ | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
207
+ | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
208
+ | `checkedIndex` | public | `number \| number[]` | | | LionMenu |
209
+ | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
210
+ | `handleFocus` | public | `boolean` | `true` | | LionMenu |
211
+ | `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
212
+ | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
213
+ | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | LionMenu |
214
+ | `itemWrap` | public | `boolean` | | | LionMenu |
215
+ | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
216
+ | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenu |
217
+ | `multipleChoice` | public | `boolean` | `false` | | LionMenu |
218
+ | `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenu |
219
+ | `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog. | OverlayMixin |
220
+ | `orientation` | public | `string` | `'vertical'` | | LionMenu |
221
+ | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
222
+ | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
223
+ | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
224
+ | `slots` | public | | | | LionMenu |
225
+ | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
226
+ | `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | LionMenu |
227
+ | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. Also we apply aria-current | LionMenu |
228
+ | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
229
+ | `_contentNode` | protected | | | | LionMenu |
230
+ | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
231
+ | `_hasSmartListItems` | public | | | | LionMenu |
232
+ | `_interactiveChildrenRoles` | protected | | | | LionMenu |
233
+ | `_invokerNode` | protected | | | | LionMenu |
234
+ | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
235
+ | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
236
+ | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenu |
237
+ | `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
238
+ | `_overlayBackdropNode` | protected | | | | OverlayMixin |
239
+ | `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
240
+ | `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
241
+ | `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
242
+ | `_overlayReferenceNode` | protected | | | | OverlayMixin |
243
+ | `_scrollTargetNode` | protected | | | | LionMenu |
244
+ | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
245
+
246
+ ### Methods
247
+
248
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
249
+ | ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
250
+ | `close` | public | Hides the overlay | | | OverlayMixin |
251
+ | `open` | public | Shows the overlay | | | OverlayMixin |
252
+ | `repositionOverlay` | public | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically) | | | OverlayMixin |
253
+ | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | LionMenu |
254
+ | `toggle` | public | Toggles the overlay | `ev: Event` | | LionMenu |
255
+ | `_defineOverlay` | protected | | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin |
256
+ | `_defineOverlayConfig` | protected | | | `OverlayConfig` | OverlayMixin |
257
+ | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
258
+ | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
259
+ | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: LionItem[]\|HTMLElement[]` | | LionMenu |
260
+ | `_isPermanentlyDisconnected` | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around. | | `Promise<boolean>` | OverlayMixin |
261
+ | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenu |
262
+ | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenu |
263
+ | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenu |
264
+ | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: KeyboardEvent` | | LionMenu |
265
+ | `_onListKeyUp` | protected | | `ev: *` | | LionMenu |
266
+ | `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean` | | OverlayMixin |
267
+ | `_setupList` | protected | | | | LionMenu |
268
+ | `_setupOpenCloseListeners` | protected | | | | OverlayMixin |
269
+ | `_setupOverlayCtrl` | protected | | | | OverlayMixin |
270
+ | `_teardownOpenCloseListeners` | protected | | | | OverlayMixin |
271
+ | `_teardownOverlayCtrl` | protected | | | | OverlayMixin |
272
+
273
+ ### Events
274
+
275
+ | Name | Type | Description | Inherited From |
276
+ | ---------------- | ------------- | ----------- | -------------- |
277
+ | `opened-changed` | `CustomEvent` | | OverlayMixin |
278
+
279
+ ### Attributes
280
+
281
+ | Name | Field | Inherited From |
282
+ | ---------------------------- | ------------------------ | -------------- |
283
+ | `opened` | opened | OverlayMixin |
284
+ | `orientation` | orientation | LionMenu |
285
+ | `multiple-choice` | multipleChoice | LionMenu |
286
+ | `selection-follows-focus` | selectionFollowsFocus | LionMenu |
287
+ | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenu |
288
+ | `no-preselect` | noPreselect | LionMenu |
289
+ | `item-wrap` | itemWrap | LionMenu |
290
+ | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenu |
291
+ | `_hasSmartListItems` | \_hasSmartListItems | LionMenu |
292
+ | `_activeMode` | \_activeMode | LionMenu |
293
+ | `invokerNode` | invokerNode | LionMenu |
294
+ | `behave-as-accordion` | behaveAsAccordion | LionMenu |
295
+ | `level` | level | LionMenu |
296
+ | `bar` | bar | LionMenu |
297
+
298
+ <hr/>
299
+
300
+
301
+ ## class: `LionToolbar`, `lion-toolbar`
302
+
303
+ ### Fields
304
+
305
+ | Name | Privacy | Type | Default | Description | Inherited From |
306
+ | --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
307
+ | `activeIndex` | public | | | | LionMenu |
308
+ | `activeItem` | public | | | | LionMenu |
309
+ | `bar` | public | `boolean` | `true` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
310
+ | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
311
+ | `checkedIndex` | public | `number \| number[]` | | | LionMenu |
312
+ | `handleFocus` | public | `boolean` | `true` | | LionMenu |
313
+ | `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
314
+ | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
315
+ | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | LionMenu |
316
+ | `itemWrap` | public | `boolean` | | | LionMenu |
317
+ | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
318
+ | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenu |
319
+ | `multipleChoice` | public | `boolean` | `false` | | LionMenu |
320
+ | `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenu |
321
+ | `orientation` | public | `string` | `'vertical'` | | LionMenu |
322
+ | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
323
+ | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
324
+ | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
325
+ | `slots` | public | | | | LionMenu |
326
+ | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
327
+ | `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | LionMenu |
328
+ | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. Also we apply aria-current | LionMenu |
329
+ | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
330
+ | `_contentNode` | protected | | | | LionMenu |
331
+ | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
332
+ | `_hasSmartListItems` | public | | | | LionMenu |
333
+ | `_interactiveChildrenRoles` | protected | | | | LionMenu |
334
+ | `_invokerNode` | protected | | | | LionMenu |
335
+ | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
336
+ | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
337
+ | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'toolbar'` | The role that will be put on \_listNode | LionMenu |
338
+ | `_scrollTargetNode` | protected | | | | LionMenu |
339
+ | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
340
+
341
+ ### Methods
342
+
343
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
344
+ | --------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ | -------------- |
345
+ | `setCheckedIndex` | public | Allows groups (\[role=radiogroup\|checkboxgroup]) within one level.&#xA;In case we deal with \[role=checkbox], we treat it as multiple choice group | `index: number` | | LionMenu |
346
+ | `toggle` | public | | `ev: Event` | | LionMenu |
347
+ | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
348
+ | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
349
+ | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: *` | | LionMenu |
350
+ | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenu |
351
+ | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenu |
352
+ | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenu |
353
+ | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: *` | | LionMenu |
354
+ | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | LionMenu |
355
+ | `_setupList` | protected | | | | LionMenu |
356
+
357
+ ### Attributes
358
+
359
+ | Name | Field | Inherited From |
360
+ | ---------------------------- | ------------------------ | -------------- |
361
+ | `invokerNode` | invokerNode | LionMenu |
362
+ | `behave-as-accordion` | behaveAsAccordion | LionMenu |
363
+ | `level` | level | LionMenu |
364
+ | `orientation` | orientation | LionMenu |
365
+ | `multiple-choice` | multipleChoice | LionMenu |
366
+ | `selection-follows-focus` | selectionFollowsFocus | LionMenu |
367
+ | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenu |
368
+ | `no-preselect` | noPreselect | LionMenu |
369
+ | `item-wrap` | itemWrap | LionMenu |
370
+ | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenu |
371
+ | `_hasSmartListItems` | \_hasSmartListItems | LionMenu |
372
+ | `_activeMode` | \_activeMode | LionMenu |
373
+ | `bar` | bar | LionMenu |
374
+
375
+ <hr/>
376
+
377
+
378
+ ## class: `LionTree`, `lion-tree`
379
+
380
+ ### Fields
381
+
382
+ | Name | Privacy | Type | Default | Description | Inherited From |
383
+ | --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
384
+ | `activeIndex` | public | | | | InteractiveListMixin |
385
+ | `activeItem` | public | | | | InteractiveListMixin |
386
+ | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | MultiLevelListMixin |
387
+ | `checkedIndex` | public | `number \| number[]` | | | InteractiveListMixin |
388
+ | `handleFocus` | public | `boolean` | `true` | | MultiLevelListMixin |
389
+ | `invokerInteraction` | public | `string` | `'click'` | | |
390
+ | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | MultiLevelListMixin |
391
+ | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | InteractiveListMixin |
392
+ | `itemWrap` | public | `boolean` | | | InteractiveListMixin |
393
+ | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | MultiLevelListMixin |
394
+ | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | InteractiveListMixin |
395
+ | `multipleChoice` | public | `boolean` | `false` | | InteractiveListMixin |
396
+ | `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | InteractiveListMixin |
397
+ | `orientation` | public | `string` | `'vertical'` | | InteractiveListMixin |
398
+ | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | MultiLevelListMixin |
399
+ | `rotateKeyboardNavigation` | public | `boolean` | `false` | | InteractiveListMixin |
400
+ | `selectionFollowsFocus` | public | `boolean` | `false` | | InteractiveListMixin |
401
+ | `slots` | public | | | | InteractiveListMixin |
402
+ | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | InteractiveListMixin |
403
+ | `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | InteractiveListMixin |
404
+ | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. Also we apply aria-current | InteractiveListMixin |
405
+ | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | InteractiveListMixin |
406
+ | `_contentNode` | protected | | | | MultiLevelListMixin |
407
+ | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | InteractiveListMixin |
408
+ | `_hasSmartListItems` | public | | | | InteractiveListMixin |
409
+ | `_interactiveChildrenRoles` | protected | | | | InteractiveListMixin |
410
+ | `_invokerNode` | protected | | | | MultiLevelListMixin |
411
+ | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | InteractiveListMixin |
412
+ | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | InteractiveListMixin |
413
+ | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'tree'` | The role that will be put on \_listNode | InteractiveListMixin |
414
+ | `_scrollTargetNode` | protected | | | | InteractiveListMixin |
415
+ | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | MultiLevelListMixin |
416
+
417
+ ### Methods
418
+
419
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
420
+ | --------------------------- | --------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ | -------------------- |
421
+ | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | InteractiveListMixin |
422
+ | `toggle` | public | | `ev: Event` | | MultiLevelListMixin |
423
+ | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
424
+ | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
425
+ | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: *` | | InteractiveListMixin |
426
+ | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | InteractiveListMixin |
427
+ | `_onListClick` | protected | | `ev: MouseEvent` | | InteractiveListMixin |
428
+ | `_onListFocusIn` | protected | | `ev: FocusEvent` | | InteractiveListMixin |
429
+ | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: *` | | InteractiveListMixin |
430
+ | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | InteractiveListMixin |
431
+ | `_setupList` | protected | | | | InteractiveListMixin |
432
+
433
+ ### Attributes
434
+
435
+ | Name | Field | Inherited From |
436
+ | ---------------------------- | ------------------------ | -------------------- |
437
+ | `invokerNode` | invokerNode | MultiLevelListMixin |
438
+ | `behave-as-accordion` | behaveAsAccordion | MultiLevelListMixin |
439
+ | `level` | level | MultiLevelListMixin |
440
+ | `orientation` | orientation | InteractiveListMixin |
441
+ | `multiple-choice` | multipleChoice | InteractiveListMixin |
442
+ | `selection-follows-focus` | selectionFollowsFocus | InteractiveListMixin |
443
+ | `rotate-keyboard-navigation` | rotateKeyboardNavigation | InteractiveListMixin |
444
+ | `no-preselect` | noPreselect | InteractiveListMixin |
445
+ | `item-wrap` | itemWrap | InteractiveListMixin |
446
+ | `_activateOnTypedChars` | \_activateOnTypedChars | InteractiveListMixin |
447
+ | `_hasSmartListItems` | \_hasSmartListItems | InteractiveListMixin |
448
+ | `_activeMode` | \_activeMode | InteractiveListMixin |
449
+
450
+ <hr/>