@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

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 (275) hide show
  1. package/components/NumberFormatter-DewVDY5w.cjs +18 -0
  2. package/components/NumberFormatter-DgOUVrge.js +136 -0
  3. package/components/NumberParser-Dik4a0h-.cjs +18 -0
  4. package/components/NumberParser-ci9J5EKv.js +173 -0
  5. package/components/accordion/index.cjs +6 -183
  6. package/components/accordion/index.js +88 -136
  7. package/components/action-bar/index.cjs +4 -85
  8. package/components/action-bar/index.js +50 -72
  9. package/components/action-button/index.cjs +3 -205
  10. package/components/action-button/index.js +93 -167
  11. package/components/action-group/index.cjs +1 -7
  12. package/components/action-group/index.js +8 -12
  13. package/components/action-group-C54IxNZk.cjs +20 -0
  14. package/components/action-group-C9dsPJg-.js +258 -0
  15. package/components/action-menu/index.cjs +11 -91
  16. package/components/action-menu/index.js +47 -66
  17. package/components/async-directive-BwIAw5tB.js +82 -0
  18. package/components/async-directive-DLz6JB0v.cjs +22 -0
  19. package/components/avatar/index.cjs +3 -63
  20. package/components/avatar/index.js +42 -54
  21. package/components/{focusable-selectors-D0t_5P7C.cjs → base-BjTwmyRF.cjs} +5 -16
  22. package/components/base-CFWO09N1.js +684 -0
  23. package/components/base-Cy0MQrPT.cjs +40 -0
  24. package/components/base-D76d76ww.js +26 -0
  25. package/components/button/index.cjs +2 -134
  26. package/components/button/index.js +72 -106
  27. package/components/button-base-B8bWcklV.js +144 -0
  28. package/components/button-base-tf95Lyl4.cjs +25 -0
  29. package/components/button-group/index.cjs +1 -45
  30. package/components/button-group/index.js +25 -37
  31. package/components/calendar/index.cjs +1 -632
  32. package/components/calendar/index.js +7 -637
  33. package/components/checkbox/index.cjs +4 -111
  34. package/components/checkbox/index.js +53 -98
  35. package/components/checkbox-mixin-BOTvuPEu.js +70 -0
  36. package/components/checkbox-mixin-BVPpXtsq.cjs +27 -0
  37. package/components/class-map-CGfNk3Ee.js +51 -0
  38. package/components/class-map-D-Y-hsN5.cjs +22 -0
  39. package/components/clear-button-CuPbWwZY.cjs +18 -0
  40. package/components/clear-button-DzZ5ulBW.js +53 -0
  41. package/components/close-button-BTo4yrFR.cjs +18 -0
  42. package/components/close-button-CuQdsez5.js +51 -0
  43. package/components/color-area/index.cjs +13 -440
  44. package/components/color-area/index.js +187 -322
  45. package/components/color-controller-B0uX6Zso.js +3230 -0
  46. package/components/color-controller-CoUL5f9K.cjs +18 -0
  47. package/components/color-field/index.cjs +2 -95
  48. package/components/color-field/index.js +41 -77
  49. package/components/color-handle/index.cjs +3 -64
  50. package/components/color-handle/index.js +37 -58
  51. package/components/color-loupe/index.cjs +1 -7
  52. package/components/color-loupe/index.js +8 -12
  53. package/components/color-loupe-CrM2DVY3.cjs +56 -0
  54. package/components/color-loupe-DmQe3SpP.js +81 -0
  55. package/components/color-menu/index.cjs +12 -217
  56. package/components/color-menu/index.js +93 -187
  57. package/components/color-palette/index.cjs +1 -89
  58. package/components/color-palette/index.js +51 -78
  59. package/components/color-palette-group/index.cjs +3 -259
  60. package/components/color-palette-group/index.js +105 -193
  61. package/components/color-picker/index.cjs +6 -114
  62. package/components/color-picker/index.js +72 -92
  63. package/components/color-slider/index.cjs +1 -585
  64. package/components/color-slider/index.js +7 -590
  65. package/components/condition-attribute-with-id-DrQYZzFS.cjs +18 -0
  66. package/components/condition-attribute-with-id-Dv4lSRbe.js +31 -0
  67. package/components/date-time-picker/index.cjs +31 -1357
  68. package/components/date-time-picker/index.js +637 -951
  69. package/components/{dependency-manger-XHpQjFgK.js → dependency-manger-CO-VPlqq.js} +14 -24
  70. package/components/dependency-manger-uthev62E.cjs +18 -0
  71. package/components/directive-C7oCP5Bh.cjs +22 -0
  72. package/components/directive-helpers-D4KMv2dC.js +62 -0
  73. package/components/directive-helpers-t-TVum7J.cjs +22 -0
  74. package/components/{slottable-request-event-CANixJnR.cjs → directive-oAbCiebi.js} +25 -14
  75. package/components/divider/index.cjs +1 -54
  76. package/components/divider/index.js +30 -49
  77. package/components/divider.module-DDvBo9zo.cjs +18 -0
  78. package/components/divider.module-DoQWQEIJ.js +21 -0
  79. package/components/element-resolution-BvRLGqIU.cjs +18 -0
  80. package/components/element-resolution-FCUT-wql.js +91 -0
  81. package/components/field-group/index.cjs +1 -7
  82. package/components/field-group/index.js +8 -12
  83. package/components/field-group-5WQMBOk4.cjs +23 -0
  84. package/components/field-group-D4B0IOdA.js +66 -0
  85. package/components/field-label/index.cjs +1 -7
  86. package/components/field-label/index.js +8 -12
  87. package/components/field-label-DxmPiC5p.js +106 -0
  88. package/components/field-label-Dz9kisdW.cjs +25 -0
  89. package/components/flow-D-0MTYCm.js +527 -0
  90. package/components/flow-DM3dNAKs.cjs +30 -0
  91. package/components/focus-group-DHeTq18L.js +218 -0
  92. package/components/focus-group-DnxZUBhQ.cjs +18 -0
  93. package/components/focus-visible-BvScGDCE.js +74 -0
  94. package/components/focus-visible-D4BXb5RB.cjs +18 -0
  95. package/components/focusable-B_KwfEec.cjs +18 -0
  96. package/components/focusable-C5JjRZmT.js +153 -0
  97. package/components/{focusable-selectors-IltOAOd9.js → focusable-selectors-B4YgbghQ.js} +4 -7
  98. package/components/focusable-selectors-BgFlyFcY.cjs +18 -0
  99. package/components/icon/index.cjs +1 -90
  100. package/components/icon/index.js +46 -74
  101. package/components/if-defined-DULpqYwi.js +27 -0
  102. package/components/if-defined-DaXWqfzc.cjs +22 -0
  103. package/components/index-CNK8wHXu.cjs +57 -0
  104. package/components/index-Cf6G4q52.js +1490 -0
  105. package/components/index-D3ICqC7S.js +1174 -0
  106. package/components/index-hqVbNKYy.cjs +113 -0
  107. package/components/index.cjs +1 -174
  108. package/components/index.js +172 -174
  109. package/components/infield-button/index.cjs +2 -46
  110. package/components/infield-button/index.js +30 -41
  111. package/components/label/index.cjs +1 -37
  112. package/components/label/index.js +24 -36
  113. package/components/{language-resolution-BSGJAWiQ.js → language-resolution-B-wjV5bb.js} +17 -21
  114. package/components/language-resolution-EUER43cg.cjs +18 -0
  115. package/components/like-anchor-Bu3pXbjT.cjs +32 -0
  116. package/components/like-anchor-DCFJN0LV.js +69 -0
  117. package/components/luzmo-icons-CiSek5iM.js +229 -0
  118. package/components/luzmo-icons-CtA-TJPd.cjs +29 -0
  119. package/components/manage-help-text-CHfMLzSa.js +92 -0
  120. package/components/manage-help-text-DNqdEkTA.cjs +30 -0
  121. package/components/menu/index.cjs +29 -1297
  122. package/components/menu/index.js +499 -954
  123. package/components/multi-language-field/index.cjs +2 -132
  124. package/components/multi-language-field/index.js +88 -118
  125. package/components/mutation-controller-DH7YOCyj.js +52 -0
  126. package/components/mutation-controller-DkOMCW-c.cjs +22 -0
  127. package/components/number-field/index.cjs +10 -613
  128. package/components/number-field/index.js +243 -442
  129. package/components/observe-slot-presence-CmVi0zTc.js +68 -0
  130. package/components/observe-slot-presence-bc9chhsi.cjs +18 -0
  131. package/components/observe-slot-text-C3moTjwy.js +87 -0
  132. package/components/observe-slot-text-D2VAEFSd.cjs +18 -0
  133. package/components/options/index.cjs +60 -693
  134. package/components/options/index.js +953 -519
  135. package/components/overlay/index.cjs +21 -367
  136. package/components/overlay/index.js +189 -273
  137. package/components/overlay-B3ajDLLq.cjs +47 -0
  138. package/components/overlay-CUKs69yr.js +2745 -0
  139. package/components/{pending-state-CXbe-Xul.js → pending-state-B2wWssTo.js} +13 -28
  140. package/components/pending-state-bJr-nEJl.cjs +26 -0
  141. package/components/picker/index.cjs +1 -9
  142. package/components/picker/index.js +11 -15
  143. package/components/picker-C0LvseZe.cjs +123 -0
  144. package/components/picker-W1qNmtsh.js +461 -0
  145. package/components/picker-button/index.cjs +4 -56
  146. package/components/picker-button/index.js +34 -45
  147. package/components/{condition-attribute-with-id-Cn815e9W.js → platform-BM-uMWpX.js} +49 -24
  148. package/components/platform-BiXhwqk3.cjs +18 -0
  149. package/components/popover/index.cjs +1 -7
  150. package/components/popover/index.js +8 -12
  151. package/components/popover-fwJeZHMQ.cjs +30 -0
  152. package/components/popover-iD8f5Jkp.js +67 -0
  153. package/components/progress-circle/index.cjs +1 -7
  154. package/components/progress-circle/index.js +8 -12
  155. package/components/progress-circle-DZxaMe8L.cjs +33 -0
  156. package/components/progress-circle-USIIU1up.js +97 -0
  157. package/components/query-BL-TJj7K.cjs +22 -0
  158. package/components/query-D_KR_GUc.js +51 -0
  159. package/components/query-assigned-elements-DjfhL1cl.js +36 -0
  160. package/components/query-assigned-elements-DsKsfk7G.cjs +22 -0
  161. package/components/query-assigned-nodes-BcKWmGzy.cjs +22 -0
  162. package/components/query-assigned-nodes-C76XVPWY.js +36 -0
  163. package/components/radio/index.cjs +2 -244
  164. package/components/radio/index.js +110 -192
  165. package/components/{random-id-BEc6QIUL.js → random-id-ByCz1xaq.js} +3 -3
  166. package/components/random-id-CqvckpWe.cjs +18 -0
  167. package/components/roving-tabindex-By_fCy_e.cjs +18 -0
  168. package/components/roving-tabindex-DOg4z6ZU.js +66 -0
  169. package/components/search/index.cjs +8 -115
  170. package/components/search/index.js +66 -96
  171. package/components/select/index.cjs +51 -720
  172. package/components/select/index.js +347 -563
  173. package/components/sized-mixin-CJbBHWRQ.js +63 -0
  174. package/components/sized-mixin-WPHH0a_D.cjs +18 -0
  175. package/components/slider/index.cjs +1 -119
  176. package/components/slider/index.js +1113 -100
  177. package/components/slottable-request-event-BfUUt1Mh.cjs +18 -0
  178. package/components/{slottable-request-event-D9WzrdWv.js → slottable-request-event-DggLA4Rx.js} +9 -12
  179. package/components/state-DwIwYPvt.js +29 -0
  180. package/components/state-vf0PJN3_.cjs +22 -0
  181. package/components/strategies-C6HsQpU2.cjs +18 -0
  182. package/components/strategies-CUMLHtQI.js +195 -0
  183. package/components/streaming-listener-BQ68fKMa.js +91 -0
  184. package/components/streaming-listener-DeGQYM-9.cjs +18 -0
  185. package/components/style-map-Bnhf_mVZ.js +53 -0
  186. package/components/style-map-DuMd5xlY.cjs +22 -0
  187. package/components/swatch/index.cjs +7 -436
  188. package/components/swatch/index.js +205 -350
  189. package/components/switch/index.cjs +2 -61
  190. package/components/switch/index.js +34 -51
  191. package/components/tabs/index.cjs +26 -693
  192. package/components/tabs/index.js +388 -521
  193. package/components/tags/index.cjs +4 -201
  194. package/components/tags/index.js +87 -152
  195. package/components/text-field/index.cjs +3 -49
  196. package/components/text-field/index.js +30 -44
  197. package/components/text-field-BkFPYo7S.cjs +85 -0
  198. package/components/text-field-C2n3rzCK.js +314 -0
  199. package/components/text-field.module-C2KVUJcX.js +21 -0
  200. package/components/text-field.module-DXhFA9G-.cjs +18 -0
  201. package/components/toast/index.cjs +12 -177
  202. package/components/toast/index.js +73 -145
  203. package/components/tooltip/index.cjs +6 -250
  204. package/components/tooltip/index.js +124 -177
  205. package/components/unit-input/index.cjs +8 -232
  206. package/components/unit-input/index.js +108 -201
  207. package/components/utils.cjs +1 -25
  208. package/components/utils.js +22 -22
  209. package/components/{random-id-BE6HA503.cjs → when-CDK1Tt5Y.js} +10 -7
  210. package/components/when-CDZyJPvd.cjs +22 -0
  211. package/package.json +1 -1
  212. package/components/action-group-DHp8RHDf.js +0 -392
  213. package/components/action-group-MPf19RPV.cjs +0 -391
  214. package/components/base-COw9n7UR.cjs +0 -119
  215. package/components/base-DmeVy0cq.js +0 -120
  216. package/components/button-base-7Ak55xFd.cjs +0 -206
  217. package/components/button-base-C3kf6BTK.js +0 -207
  218. package/components/checkbox-mixin-8cL-vfDy.js +0 -84
  219. package/components/checkbox-mixin-CE7dJj3J.cjs +0 -83
  220. package/components/clear-button-Co6oKSgl.js +0 -59
  221. package/components/clear-button-X_HDY2eH.cjs +0 -58
  222. package/components/close-button-DPBK6Kpu.cjs +0 -59
  223. package/components/close-button-Miw9ZjoJ.js +0 -60
  224. package/components/color-controller-BjDZaxhX.js +0 -491
  225. package/components/color-controller-C3c_vb2P.cjs +0 -490
  226. package/components/color-loupe-BQqNR8YD.cjs +0 -88
  227. package/components/color-loupe-B_DDFv8l.js +0 -89
  228. package/components/condition-attribute-with-id-DEc2Yjne.cjs +0 -43
  229. package/components/dependency-manger-CcIE1uvQ.cjs +0 -63
  230. package/components/divider.module-Cm5LcDRV.cjs +0 -20
  231. package/components/divider.module-DauH6k2_.js +0 -21
  232. package/components/element-resolution-DCsrhGZO.cjs +0 -112
  233. package/components/element-resolution-nMlmW4Jy.js +0 -113
  234. package/components/field-group-DNmY8W9v.cjs +0 -86
  235. package/components/field-group-DVdAWCQF.js +0 -87
  236. package/components/field-label-CKH9EXpR.cjs +0 -156
  237. package/components/field-label-Dpsecoc6.js +0 -157
  238. package/components/focus-group-BqDAk9Is.js +0 -337
  239. package/components/focus-group-DFzOlalL.cjs +0 -336
  240. package/components/focus-visible-B-B8-P9R.cjs +0 -104
  241. package/components/focus-visible-BUPRWlsh.js +0 -105
  242. package/components/focusable-BPrTcZPd.cjs +0 -262
  243. package/components/focusable-ChCLg1k4.js +0 -263
  244. package/components/language-resolution-iN9EImbb.cjs +0 -57
  245. package/components/like-anchor-D62faRNG.cjs +0 -79
  246. package/components/like-anchor-v3cJ9RWM.js +0 -80
  247. package/components/manage-help-text-BYx84zZR.cjs +0 -125
  248. package/components/manage-help-text-DOuMTGht.js +0 -126
  249. package/components/observe-slot-presence-9AwLGUQ_.cjs +0 -78
  250. package/components/observe-slot-presence-DcMdoumP.js +0 -79
  251. package/components/observe-slot-text-CSofZeeF.cjs +0 -104
  252. package/components/observe-slot-text-CjnkkBPn.js +0 -105
  253. package/components/overlay-CN8ISP1F.js +0 -2485
  254. package/components/overlay-LViy9VWM.cjs +0 -2484
  255. package/components/pending-state-e4RbXe9u.cjs +0 -75
  256. package/components/picker-DNde3awt.cjs +0 -672
  257. package/components/picker-PfUAF05y.js +0 -673
  258. package/components/platform-CxDar3Dn.cjs +0 -68
  259. package/components/platform-Cxn0WbyT.js +0 -69
  260. package/components/popover-BkbYhl3i.js +0 -74
  261. package/components/popover-BkgUf0kL.cjs +0 -74
  262. package/components/progress-circle-Hu_ivPHf.js +0 -133
  263. package/components/progress-circle-_Etqsj9f.cjs +0 -132
  264. package/components/roving-tabindex-AsmAh2In.cjs +0 -95
  265. package/components/roving-tabindex-DPF9NmrH.js +0 -96
  266. package/components/sized-mixin-DmkrNdWB.js +0 -80
  267. package/components/sized-mixin-UaTVa-AE.cjs +0 -79
  268. package/components/strategies-DlMlaSJR.cjs +0 -317
  269. package/components/strategies-DlPQoTFE.js +0 -318
  270. package/components/streaming-listener-D4sHaMub.cjs +0 -145
  271. package/components/streaming-listener-cAz5zJyk.js +0 -146
  272. package/components/text-field-11tcnftU.cjs +0 -338
  273. package/components/text-field-Chi9J2Cz.js +0 -339
  274. package/components/text-field.module-CMBS0jSL.js +0 -21
  275. package/components/text-field.module-DIJdV_sA.cjs +0 -20
@@ -15,778 +15,13 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";
19
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
20
- const lit = require("lit");
21
- const decorators_js = require("lit/decorators.js");
22
- const base = require("../base-COw9n7UR.cjs");
23
- const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
24
- const divider_module = require("../divider.module-Cm5LcDRV.cjs");
25
- const randomId = require("../random-id-BE6HA503.cjs");
26
- const mutationController_js = require("@lit-labs/observers/mutation-controller.js");
27
- const focusable = require("../focusable-BPrTcZPd.cjs");
28
- const likeAnchor = require("../like-anchor-D62faRNG.cjs");
29
- const observeSlotPresence = require("../observe-slot-presence-9AwLGUQ_.cjs");
30
- const observeSlotText = require("../observe-slot-text-CSofZeeF.cjs");
31
- const dependencyManger = require("../dependency-manger-CcIE1uvQ.cjs");
32
- const icons = require("@luzmo/icons");
33
- const slottableRequestEvent = require("../slottable-request-event-CANixJnR.cjs");
34
- const menuStyles = ":host{--menu-item-top-to-action: var(--luzmo-spacing-1);--menu-item-top-to-checkbox: var(--luzmo-spacing-1);--menu-item-label-line-height: var(--luzmo-line-height);--menu-item-label-line-height-cjk: 1.5;--menu-item-label-to-description-spacing: 1px;--menu-item-focus-indicator-width: var(--luzmo-indicator-width);--menu-item-focus-indicator-color: var(--luzmo-indicator-color);--menu-item-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--menu-item-label-content-color-default: var(--luzmo-font-color);--menu-item-label-content-color-hover: var(--luzmo-font-color-hover);--menu-item-label-content-color-down: var(--luzmo-font-color-down);--menu-item-label-content-color-focus: var(--luzmo-font-color-focus);--menu-item-highlight-label-background-color: var(--luzmo-primary);--menu-item-highlight-label-content-color: var(--luzmo-font-color);--menu-item-highlight-label-content-color-hover: var( --luzmo-font-color-hover );--menu-item-highlight-label-content-color-down: var(--luzmo-font-color-down);--menu-item-highlight-label-content-color-focus: var( --luzmo-font-color-focus );--menu-item-label-icon-color-default: var(--luzmo-font-color);--menu-item-label-icon-color-hover: var(--luzmo-font-color-hover);--menu-item-label-icon-color-down: var(--luzmo-font-color-down);--menu-item-label-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-label-content-color-disabled: var(--luzmo-font-color-disabled);--menu-item-label-icon-color-disabled: var(--luzmo-font-color-disabled);--menu-item-description-line-height: var(--luzmo-line-height);--menu-item-description-line-height-cjk: 1.5;--menu-item-description-color-default: var(--luzmo-font-color);--menu-item-description-color-hover: var(--luzmo-font-color-hover);--menu-item-description-color-down: var(--luzmo-font-color-down);--menu-item-description-color-focus: var(--luzmo-font-color-focus);--menu-item-description-color-disabled: var(--luzmo-disabled-color);--menu-section-header-line-height: var(--luzmo-line-height);--menu-section-header-line-height-cjk: 1.5;--menu-section-header-font-weight: bold;--menu-section-header-color: var(--luzmo-font-color-hard);--menu-collapsible-icon-color: var(--luzmo-font-color-hard);--menu-checkmark-icon-color-default: var(--luzmo-primary);--menu-checkmark-icon-color-hover: var(--luzmo-primary-hover);--menu-checkmark-icon-color-down: var(--luzmo-primary-down);--menu-checkmark-icon-color-focus: var(--luzmo-primary-focus);--menu-drillin-icon-color-default: var(--luzmo-font-color);--menu-drillin-icon-color-hover: var(--luzmo-font-color-hover);--menu-drillin-icon-color-down: var(--luzmo-font-color-down);--menu-drillin-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-value-color-default: var(--luzmo-font-color);--menu-item-value-color-hover: var(--luzmo-font-color-hover);--menu-item-value-color-down: var(--luzmo-font-color-down);--menu-item-value-color-focus: var(--luzmo-font-color-focus);--menu-checkmark-display-hidden: none;--menu-checkmark-display-shown: block;--menu-checkmark-display: block;--menu-item-collapsible-no-icon-submenu-item-padding-x-start: 28px;--menu-item-background-color-selected: var(--luzmo-background-color);--menu-item-background-color-default: var(--luzmo-background-color);--menu-item-background-color-hover: var(--luzmo-background-color-hover);--menu-item-background-color-down: var(--luzmo-background-color-down);--menu-item-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--menu-item-min-height: var(--luzmo-component-height);--menu-item-icon-height: var(--luzmo-font-size);--menu-item-icon-width: var(--luzmo-font-size);--menu-item-label-font-size: var(--luzmo-font-size);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size);--menu-section-header-min-width: var(--luzmo-component-height);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--menu-item-min-height: var(--luzmo-component-height-s);--menu-item-icon-height: var(--luzmo-font-size-s);--menu-item-icon-width: var(--luzmo-font-size-s);--menu-item-label-font-size: var(--luzmo-font-size-s);--menu-item-label-text-to-visual: var(--luzmo-spacing-3);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-3);--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: var(--luzmo-spacing-2);--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size-s);--menu-section-header-min-width: var(--luzmo-component-height-s);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size-s);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-3);--menu-back-icon-margin: var(--luzmo-spacing-3)}:host([size=l]){--menu-item-min-height: var(--luzmo-component-height-l);--menu-item-icon-height: var(--luzmo-font-size-l);--menu-item-icon-width: var(--luzmo-font-size-l);--menu-item-label-font-size: var(--luzmo-font-size-l);--menu-item-label-text-to-visual: var(--luzmo-spacing-4);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-4);--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-3);--menu-item-description-font-size: var(--luzmo-font-size-s);--menu-section-header-font-size: var(--luzmo-font-size-l);--menu-section-header-min-width: var(--luzmo-component-height-l);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--menu-item-checkmark-size: var(--luzmo-font-size-s);--menu-item-angle-size: var(--luzmo-font-size-l);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-4);--menu-back-icon-margin: var(--luzmo-spacing-4)}:host([size=xl]){--menu-item-min-height: var(--luzmo-component-height-xl);--menu-item-icon-height: var(--luzmo-font-size-xl);--menu-item-icon-width: var(--luzmo-font-size-xl);--menu-item-label-font-size: var(--luzmo-font-size-xl);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-4);--menu-item-description-font-size: var(--luzmo-font-size);--menu-section-header-font-size: var(--luzmo-font-size-xl);--menu-section-header-min-width: var(--luzmo-component-height-xl);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size);--menu-item-angle-size: var(--luzmo-font-size-xl);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([variant=highlight]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);--menu-item-highlight-label-content-color-hover: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-down: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-focus: var( --luzmo-primary-inverse-color )}:host([variant=highlight]) ::slotted(luzmo-menu-item[selected]){padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));background-color:var(--luzmo-menu-item-highlight-label-background-color, var(--menu-item-highlight-label-background-color, var(--luzmo-border-color)))}@media (forced-colors: active){:host{--highcontrast-menu-item-background-color-default: ButtonFace;--highcontrast-menu-item-color-default: ButtonText;--highcontrast-menu-item-background-color-focus: Highlight;--highcontrast-menu-item-color-focus: HighlightText;--highcontrast-menu-checkmark-icon-color-default: Highlight;--highcontrast-menu-item-color-disabled: GrayText;--highcontrast-menu-item-focus-indicator-color: Highlight;--highcontrast-menu-item-selected-background-color: Highlight;--highcontrast-menu-item-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-menu-item-selected-background-color: SelectedItem;--highcontrast-menu-item-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-menu-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--menu-item-label-line-height: var( --luzmo-menu-item-label-line-height-cjk, var(--menu-item-label-line-height-cjk) );--menu-item-description-line-height: var( --luzmo-menu-item-description-line-height-cjk, var(--menu-item-description-line-height-cjk) );--menu-section-header-line-height: var( --luzmo-menu-section-header-line-height-cjk, var(--menu-section-header-line-height-cjk) )}:host([selects]) ::slotted(luzmo-menu-item){--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-selectable-edge-to-text-not-selected, var(--menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(luzmo-menu-item[selected]){--menu-checkmark-display: var(--menu-checkmark-display-shown);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content))}.luzmo-Menu-backIcon{margin-block:var(--luzmo-menu-back-icon-margin-block, var(--menu-back-icon-margin));margin-inline:var(--luzmo-menu-back-icon-margin-inline, var(--menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .luzmo-Menu-sectionHeading{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:calc((var(--luzmo-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
35
- var __defProp$2 = Object.defineProperty;
36
- var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
37
- var __decorateClass$2 = (decorators, target, key, kind) => {
38
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
39
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
40
- if (decorator = decorators[i])
41
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
42
- if (kind && result) __defProp$2(target, key, result);
43
- return result;
44
- };
45
- function elementIsOrContains(el, isOrContains) {
46
- return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
47
- }
48
- class LuzmoMenu extends sizedMixin.SizedMixin(base.LuzmoElement, {
49
- noDefaultSize: true
50
- }) {
51
- constructor() {
52
- super();
53
- this.label = "";
54
- this.ignore = false;
55
- this.value = "";
56
- this.valueSeparator = ",";
57
- this.selectedItems = [];
58
- this.focusedItemIndex = 0;
59
- this.focusInItemIndex = 0;
60
- this._selected = [];
61
- this.cacheUpdated = Promise.resolve();
62
- this.childItemSet = /* @__PURE__ */ new Set();
63
- this.selectedItemsMap = /* @__PURE__ */ new Map();
64
- this._hasUpdatedSelectedItemIndex = false;
65
- this._willUpdateItems = false;
66
- this.pointerUpTarget = null;
67
- this.descendentOverlays = /* @__PURE__ */ new Map();
68
- this.handleSubmenuClosed = (event) => {
69
- event.stopPropagation();
70
- const target = event.composedPath()[0];
71
- target.dispatchEvent(
72
- new Event("luzmo-menu-submenu-closed", {
73
- bubbles: true,
74
- composed: true
75
- })
76
- );
77
- };
78
- this.handleSubmenuOpened = (event) => {
79
- event.stopPropagation();
80
- const target = event.composedPath()[0];
81
- target.dispatchEvent(
82
- new Event("luzmo-menu-submenu-opened", {
83
- bubbles: true,
84
- composed: true
85
- })
86
- );
87
- const focusedItem = this.childItems[this.focusedItemIndex];
88
- if (focusedItem) {
89
- focusedItem.focused = false;
90
- }
91
- const openedItem = event.composedPath().find((el) => this.childItemSet.has(el));
92
- if (!openedItem) {
93
- return;
94
- }
95
- const openedItemIndex = this.childItems.indexOf(
96
- openedItem
97
- );
98
- this.focusedItemIndex = openedItemIndex;
99
- this.focusInItemIndex = openedItemIndex;
100
- };
101
- this.resolveCacheUpdated = () => {
102
- };
103
- this.addEventListener(
104
- "luzmo-menu-item-added-or-updated",
105
- this.onSelectableItemAddedOrUpdated
106
- );
107
- this.addEventListener(
108
- "luzmo-menu-item-added-or-updated",
109
- this.onFocusableItemAddedOrUpdated,
110
- {
111
- capture: true
112
- }
113
- );
114
- this.addEventListener("click", this.handleClick);
115
- this.addEventListener("pointerup", this.handlePointerup);
116
- this.addEventListener("focusin", this.handleFocusin);
117
- this.addEventListener("blur", this.handleBlur);
118
- this.addEventListener("luzmo-opened", this.handleSubmenuOpened);
119
- this.addEventListener("luzmo-closed", this.handleSubmenuClosed);
120
- }
121
- static get styles() {
122
- return [lit.unsafeCSS(menuStyles)];
123
- }
124
- get isSubmenu() {
125
- return this.slot === "submenu";
126
- }
127
- get selected() {
128
- return this._selected;
129
- }
130
- set selected(selected) {
131
- if (selected === this.selected) {
132
- return;
133
- }
134
- const old = this.selected;
135
- this._selected = selected;
136
- this.selectedItems = [];
137
- this.selectedItemsMap.clear();
138
- this.childItems.forEach((item) => {
139
- if (this !== item.menuData.selectionRoot) {
140
- return;
141
- }
142
- item.selected = this.selected.includes(item.value);
143
- if (item.selected) {
144
- this.selectedItems.push(item);
145
- this.selectedItemsMap.set(item, true);
146
- }
147
- });
148
- this.requestUpdate("selected", old);
149
- }
150
- get childItems() {
151
- if (!this.cachedChildItems) {
152
- this.cachedChildItems = this.updateCachedMenuItems();
153
- }
154
- return this.cachedChildItems;
155
- }
156
- /**
157
- * Hide this getter from web-component-analyzer until
158
- * https://github.com/runem/web-component-analyzer/issues/131
159
- * has been addressed.
160
- *
161
- * @private
162
- */
163
- get childRole() {
164
- if (this.resolvedRole === "listbox") {
165
- return "option";
166
- }
167
- switch (this.resolvedSelects) {
168
- case "single": {
169
- return "menuitemradio";
170
- }
171
- case "multiple": {
172
- return "menuitemcheckbox";
173
- }
174
- default: {
175
- return "menuitem";
176
- }
177
- }
178
- }
179
- get ownRole() {
180
- return "menu";
181
- }
182
- focus({ preventScroll } = {}) {
183
- if (this.childItems.every((childItem) => childItem.disabled)) {
184
- return;
185
- }
186
- if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
187
- super.focus({ preventScroll });
188
- return;
189
- }
190
- this.focusMenuItemByOffset(0);
191
- super.focus({ preventScroll });
192
- const selectedItem = this.selectedItems[0];
193
- if (selectedItem && !preventScroll) {
194
- selectedItem.scrollIntoView({ block: "nearest" });
195
- }
196
- }
197
- handleFocusin(event) {
198
- var _a;
199
- if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
200
- return;
201
- }
202
- const activeElement = this.getRootNode().activeElement;
203
- const selectionRoot = ((_a = this.childItems[this.focusedItemIndex]) == null ? void 0 : _a.menuData.selectionRoot) || this;
204
- if (activeElement !== selectionRoot || event.target !== this) {
205
- selectionRoot.focus({ preventScroll: true });
206
- if (activeElement && this.focusedItemIndex === 0) {
207
- const offset = this.childItems.indexOf(activeElement);
208
- this.focusMenuItemByOffset(Math.max(offset, 0));
209
- }
210
- }
211
- this.startListeningToKeyboard();
212
- }
213
- startListeningToKeyboard() {
214
- this.addEventListener("keydown", this.handleKeydown);
215
- }
216
- handleBlur(event) {
217
- if (elementIsOrContains(this, event.relatedTarget)) {
218
- return;
219
- }
220
- this.stopListeningToKeyboard();
221
- this.childItems.forEach((child) => child.focused = false);
222
- this.removeAttribute("aria-activedescendant");
223
- }
224
- stopListeningToKeyboard() {
225
- this.removeEventListener("keydown", this.handleKeydown);
226
- }
227
- selectOrToggleItem(targetItem) {
228
- const resolvedSelects = this.resolvedSelects;
229
- const oldSelectedItemsMap = new Map(this.selectedItemsMap);
230
- const oldSelected = [...this.selected];
231
- const oldSelectedItems = [...this.selectedItems];
232
- const oldValue = this.value;
233
- const focusedChild = this.childItems[this.focusedItemIndex];
234
- if (focusedChild) {
235
- focusedChild.focused = false;
236
- focusedChild.active = false;
237
- }
238
- this.focusedItemIndex = this.childItems.indexOf(targetItem);
239
- this.forwardFocusVisibleToItem(targetItem);
240
- if (resolvedSelects === "multiple") {
241
- if (this.selectedItemsMap.has(targetItem)) {
242
- this.selectedItemsMap.delete(targetItem);
243
- } else {
244
- this.selectedItemsMap.set(targetItem, true);
245
- }
246
- const selected = [];
247
- const selectedItems = [];
248
- this.childItemSet.forEach((childItem) => {
249
- if (childItem.menuData.selectionRoot !== this) {
250
- return;
251
- }
252
- if (this.selectedItemsMap.has(childItem)) {
253
- selected.push(childItem.value);
254
- selectedItems.push(childItem);
255
- }
256
- });
257
- this._selected = selected;
258
- this.selectedItems = selectedItems;
259
- this.value = this.selected.join(this.valueSeparator);
260
- } else {
261
- this.selectedItemsMap.clear();
262
- this.selectedItemsMap.set(targetItem, true);
263
- this.value = targetItem.value;
264
- this._selected = [targetItem.value];
265
- this.selectedItems = [targetItem];
266
- }
267
- const applyDefault = this.dispatchEvent(
268
- new Event("change", {
269
- cancelable: true,
270
- bubbles: true,
271
- composed: true
272
- })
273
- );
274
- if (!applyDefault) {
275
- this._selected = oldSelected;
276
- this.selectedItems = oldSelectedItems;
277
- this.selectedItemsMap = oldSelectedItemsMap;
278
- this.value = oldValue;
279
- return;
280
- }
281
- if (resolvedSelects === "single") {
282
- for (const oldItem of oldSelectedItemsMap.keys()) {
283
- if (oldItem !== targetItem) {
284
- oldItem.selected = false;
285
- }
286
- }
287
- targetItem.selected = true;
288
- } else if (resolvedSelects === "multiple") {
289
- targetItem.selected = !targetItem.selected;
290
- }
291
- }
292
- handleKeydown(event) {
293
- if (event.defaultPrevented) {
294
- return;
295
- }
296
- const lastFocusedItem = this.childItems[this.focusedItemIndex];
297
- if (lastFocusedItem) {
298
- lastFocusedItem.focused = true;
299
- }
300
- const { key } = event;
301
- if (event.shiftKey && event.target !== this && this.hasAttribute("tabindex")) {
302
- this.removeAttribute("tabindex");
303
- const replaceTabindex = (eventForTab) => {
304
- if (!eventForTab.shiftKey && !this.hasAttribute("tabindex")) {
305
- this.tabIndex = 0;
306
- document.removeEventListener("keyup", replaceTabindex);
307
- this.removeEventListener("focusout", replaceTabindex);
308
- }
309
- };
310
- document.addEventListener("keyup", replaceTabindex);
311
- this.addEventListener("focusout", replaceTabindex);
312
- }
313
- if (key === "Tab") {
314
- this.prepareToCleanUp();
315
- return;
316
- }
317
- if (key === " " && (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu)) {
318
- lastFocusedItem.openOverlay();
319
- return;
320
- }
321
- if (key === " " || key === "Enter") {
322
- const childItem = this.childItems[this.focusedItemIndex];
323
- if (childItem && childItem.menuData.selectionRoot === event.target) {
324
- event.preventDefault();
325
- childItem.click();
326
- }
327
- return;
328
- }
329
- if (key === "ArrowDown" || key === "ArrowUp") {
330
- const childItem = this.childItems[this.focusedItemIndex];
331
- if (childItem && childItem.menuData.selectionRoot === event.target) {
332
- this.navigateWithinMenu(event);
333
- }
334
- return;
335
- }
336
- this.navigateBetweenRelatedMenus(event);
337
- }
338
- focusMenuItemByOffset(offset) {
339
- const step = offset || 1;
340
- const focusedItem = this.childItems[this.focusedItemIndex];
341
- if (focusedItem) {
342
- focusedItem.focused = false;
343
- focusedItem.active = focusedItem.open;
344
- }
345
- this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + offset) % this.childItems.length;
346
- let itemToFocus = this.childItems[this.focusedItemIndex];
347
- let availableItems = this.childItems.length;
348
- while ((itemToFocus == null ? void 0 : itemToFocus.disabled) && availableItems) {
349
- availableItems -= 1;
350
- this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + step) % this.childItems.length;
351
- itemToFocus = this.childItems[this.focusedItemIndex];
352
- }
353
- if (!(itemToFocus == null ? void 0 : itemToFocus.disabled)) {
354
- this.forwardFocusVisibleToItem(itemToFocus);
355
- }
356
- return itemToFocus;
357
- }
358
- updateSelectedItemIndex() {
359
- let firstOrFirstSelectedIndex = 0;
360
- const selectedItemsMap = /* @__PURE__ */ new Map();
361
- const selected = [];
362
- const selectedItems = [];
363
- let itemIndex = this.childItems.length;
364
- while (itemIndex) {
365
- itemIndex -= 1;
366
- const childItem = this.childItems[itemIndex];
367
- if (childItem.menuData.selectionRoot === this) {
368
- if (childItem.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(childItem.value)) {
369
- firstOrFirstSelectedIndex = itemIndex;
370
- selectedItemsMap.set(childItem, true);
371
- selected.unshift(childItem.value);
372
- selectedItems.unshift(childItem);
373
- }
374
- if (itemIndex !== firstOrFirstSelectedIndex) {
375
- childItem.focused = false;
376
- }
377
- }
378
- }
379
- selectedItems.map((item, i) => {
380
- if (i > 0) {
381
- item.focused = false;
382
- }
383
- });
384
- this.selectedItemsMap = selectedItemsMap;
385
- this._selected = selected;
386
- this.selectedItems = selectedItems;
387
- this.value = this.selected.join(this.valueSeparator);
388
- this.focusedItemIndex = firstOrFirstSelectedIndex;
389
- this.focusInItemIndex = firstOrFirstSelectedIndex;
390
- }
391
- closeDescendentOverlays() {
392
- this.descendentOverlays.forEach((overlay) => {
393
- overlay.open = false;
394
- });
395
- this.descendentOverlays = /* @__PURE__ */ new Map();
396
- }
397
- render() {
398
- return this.renderMenuItemSlot();
399
- }
400
- connectedCallback() {
401
- super.connectedCallback();
402
- if (!this.hasAttribute("role") && !this.ignore) {
403
- this.setAttribute("role", this.ownRole);
404
- }
405
- this.updateComplete.then(() => this.updateItemFocus());
406
- }
407
- disconnectedCallback() {
408
- this.cachedChildItems = void 0;
409
- this.selectedItems = [];
410
- this.selectedItemsMap.clear();
411
- this.childItemSet.clear();
412
- this.descendentOverlays = /* @__PURE__ */ new Map();
413
- super.disconnectedCallback();
414
- }
415
- handleDescendentOverlayOpened(event) {
416
- const target = event.composedPath()[0];
417
- if (!target.overlayElement) {
418
- return;
419
- }
420
- this.descendentOverlays.set(target.overlayElement, target.overlayElement);
421
- }
422
- handleDescendentOverlayClosed(event) {
423
- const target = event.composedPath()[0];
424
- if (!target.overlayElement) {
425
- return;
426
- }
427
- this.descendentOverlays.delete(target.overlayElement);
428
- }
429
- navigateWithinMenu(event) {
430
- const { key } = event;
431
- const lastFocusedItem = this.childItems[this.focusedItemIndex];
432
- const direction = key === "ArrowDown" ? 1 : -1;
433
- const itemToFocus = this.focusMenuItemByOffset(direction);
434
- if (itemToFocus === lastFocusedItem) {
435
- return;
436
- }
437
- event.preventDefault();
438
- event.stopPropagation();
439
- itemToFocus.scrollIntoView({ block: "nearest" });
440
- }
441
- navigateBetweenRelatedMenus(event) {
442
- const { key } = event;
443
- event.stopPropagation();
444
- const shouldOpenSubmenu = this.isLTR && key === "ArrowRight" || !this.isLTR && key === "ArrowLeft";
445
- const shouldCloseSelfAsSubmenu = this.isLTR && key === "ArrowLeft" || !this.isLTR && key === "ArrowRight";
446
- if (shouldOpenSubmenu) {
447
- const lastFocusedItem = this.childItems[this.focusedItemIndex];
448
- if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
449
- lastFocusedItem.openOverlay();
450
- }
451
- } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
452
- this.dispatchEvent(new Event("close", { bubbles: true }));
453
- this.updateSelectedItemIndex();
454
- }
455
- }
456
- renderMenuItemSlot() {
457
- return lit.html`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../base-Cy0MQrPT.cjs"),f=require("../query-BL-TJj7K.cjs"),z=require("../sized-mixin-WPHH0a_D.cjs"),y=require("../divider.module-DDvBo9zo.cjs"),S=require("../state-vf0PJN3_.cjs"),E=require("../query-assigned-nodes-BcKWmGzy.cjs"),k=require("../random-id-CqvckpWe.cjs"),M=require("../mutation-controller-DkOMCW-c.cjs"),A=require("../focusable-B_KwfEec.cjs"),C=require("../like-anchor-Bu3pXbjT.cjs"),P=require("../observe-slot-presence-bc9chhsi.cjs"),D=require("../observe-slot-text-D2VAEFSd.cjs"),R=require("../dependency-manger-uthev62E.cjs"),d=require("../luzmo-icons-CtA-TJPd.cjs"),O=require("../slottable-request-event-BfUUt1Mh.cjs"),L=":host{--menu-item-top-to-action: var(--luzmo-spacing-1);--menu-item-top-to-checkbox: var(--luzmo-spacing-1);--menu-item-label-line-height: var(--luzmo-line-height);--menu-item-label-line-height-cjk: 1.5;--menu-item-label-to-description-spacing: 1px;--menu-item-focus-indicator-width: var(--luzmo-indicator-width);--menu-item-focus-indicator-color: var(--luzmo-indicator-color);--menu-item-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--menu-item-label-content-color-default: var(--luzmo-font-color);--menu-item-label-content-color-hover: var(--luzmo-font-color-hover);--menu-item-label-content-color-down: var(--luzmo-font-color-down);--menu-item-label-content-color-focus: var(--luzmo-font-color-focus);--menu-item-highlight-label-background-color: var(--luzmo-primary);--menu-item-highlight-label-content-color: var(--luzmo-font-color);--menu-item-highlight-label-content-color-hover: var( --luzmo-font-color-hover );--menu-item-highlight-label-content-color-down: var(--luzmo-font-color-down);--menu-item-highlight-label-content-color-focus: var( --luzmo-font-color-focus );--menu-item-label-icon-color-default: var(--luzmo-font-color);--menu-item-label-icon-color-hover: var(--luzmo-font-color-hover);--menu-item-label-icon-color-down: var(--luzmo-font-color-down);--menu-item-label-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-label-content-color-disabled: var(--luzmo-font-color-disabled);--menu-item-label-icon-color-disabled: var(--luzmo-font-color-disabled);--menu-item-description-line-height: var(--luzmo-line-height);--menu-item-description-line-height-cjk: 1.5;--menu-item-description-color-default: var(--luzmo-font-color);--menu-item-description-color-hover: var(--luzmo-font-color-hover);--menu-item-description-color-down: var(--luzmo-font-color-down);--menu-item-description-color-focus: var(--luzmo-font-color-focus);--menu-item-description-color-disabled: var(--luzmo-disabled-color);--menu-section-header-line-height: var(--luzmo-line-height);--menu-section-header-line-height-cjk: 1.5;--menu-section-header-font-weight: bold;--menu-section-header-color: var(--luzmo-font-color-hard);--menu-collapsible-icon-color: var(--luzmo-font-color-hard);--menu-checkmark-icon-color-default: var(--luzmo-primary);--menu-checkmark-icon-color-hover: var(--luzmo-primary-hover);--menu-checkmark-icon-color-down: var(--luzmo-primary-down);--menu-checkmark-icon-color-focus: var(--luzmo-primary-focus);--menu-drillin-icon-color-default: var(--luzmo-font-color);--menu-drillin-icon-color-hover: var(--luzmo-font-color-hover);--menu-drillin-icon-color-down: var(--luzmo-font-color-down);--menu-drillin-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-value-color-default: var(--luzmo-font-color);--menu-item-value-color-hover: var(--luzmo-font-color-hover);--menu-item-value-color-down: var(--luzmo-font-color-down);--menu-item-value-color-focus: var(--luzmo-font-color-focus);--menu-checkmark-display-hidden: none;--menu-checkmark-display-shown: block;--menu-checkmark-display: block;--menu-item-collapsible-no-icon-submenu-item-padding-x-start: 28px;--menu-item-background-color-selected: var(--luzmo-background-color);--menu-item-background-color-default: var(--luzmo-background-color);--menu-item-background-color-hover: var(--luzmo-background-color-hover);--menu-item-background-color-down: var(--luzmo-background-color-down);--menu-item-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--menu-item-min-height: var(--luzmo-component-height);--menu-item-icon-height: var(--luzmo-font-size);--menu-item-icon-width: var(--luzmo-font-size);--menu-item-label-font-size: var(--luzmo-font-size);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size);--menu-section-header-min-width: var(--luzmo-component-height);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--menu-item-min-height: var(--luzmo-component-height-s);--menu-item-icon-height: var(--luzmo-font-size-s);--menu-item-icon-width: var(--luzmo-font-size-s);--menu-item-label-font-size: var(--luzmo-font-size-s);--menu-item-label-text-to-visual: var(--luzmo-spacing-3);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-3);--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: var(--luzmo-spacing-2);--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size-s);--menu-section-header-min-width: var(--luzmo-component-height-s);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size-s);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-3);--menu-back-icon-margin: var(--luzmo-spacing-3)}:host([size=l]){--menu-item-min-height: var(--luzmo-component-height-l);--menu-item-icon-height: var(--luzmo-font-size-l);--menu-item-icon-width: var(--luzmo-font-size-l);--menu-item-label-font-size: var(--luzmo-font-size-l);--menu-item-label-text-to-visual: var(--luzmo-spacing-4);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-4);--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-3);--menu-item-description-font-size: var(--luzmo-font-size-s);--menu-section-header-font-size: var(--luzmo-font-size-l);--menu-section-header-min-width: var(--luzmo-component-height-l);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--menu-item-checkmark-size: var(--luzmo-font-size-s);--menu-item-angle-size: var(--luzmo-font-size-l);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-4);--menu-back-icon-margin: var(--luzmo-spacing-4)}:host([size=xl]){--menu-item-min-height: var(--luzmo-component-height-xl);--menu-item-icon-height: var(--luzmo-font-size-xl);--menu-item-icon-width: var(--luzmo-font-size-xl);--menu-item-label-font-size: var(--luzmo-font-size-xl);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-4);--menu-item-description-font-size: var(--luzmo-font-size);--menu-section-header-font-size: var(--luzmo-font-size-xl);--menu-section-header-min-width: var(--luzmo-component-height-xl);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size);--menu-item-angle-size: var(--luzmo-font-size-xl);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([variant=highlight]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);--menu-item-highlight-label-content-color-hover: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-down: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-focus: var( --luzmo-primary-inverse-color )}:host([variant=highlight]) ::slotted(luzmo-menu-item[selected]){padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));background-color:var(--luzmo-menu-item-highlight-label-background-color, var(--menu-item-highlight-label-background-color, var(--luzmo-border-color)))}@media (forced-colors: active){:host{--highcontrast-menu-item-background-color-default: ButtonFace;--highcontrast-menu-item-color-default: ButtonText;--highcontrast-menu-item-background-color-focus: Highlight;--highcontrast-menu-item-color-focus: HighlightText;--highcontrast-menu-checkmark-icon-color-default: Highlight;--highcontrast-menu-item-color-disabled: GrayText;--highcontrast-menu-item-focus-indicator-color: Highlight;--highcontrast-menu-item-selected-background-color: Highlight;--highcontrast-menu-item-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-menu-item-selected-background-color: SelectedItem;--highcontrast-menu-item-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-menu-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--menu-item-label-line-height: var( --luzmo-menu-item-label-line-height-cjk, var(--menu-item-label-line-height-cjk) );--menu-item-description-line-height: var( --luzmo-menu-item-description-line-height-cjk, var(--menu-item-description-line-height-cjk) );--menu-section-header-line-height: var( --luzmo-menu-section-header-line-height-cjk, var(--menu-section-header-line-height-cjk) )}:host([selects]) ::slotted(luzmo-menu-item){--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-selectable-edge-to-text-not-selected, var(--menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(luzmo-menu-item[selected]){--menu-checkmark-display: var(--menu-checkmark-display-shown);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content))}.luzmo-Menu-backIcon{margin-block:var(--luzmo-menu-back-icon-margin-block, var(--menu-back-icon-margin));margin-inline:var(--luzmo-menu-back-icon-margin-inline, var(--menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .luzmo-Menu-sectionHeading{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:calc((var(--luzmo-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";var T=Object.defineProperty,U=Object.getOwnPropertyDescriptor,m=(r,e,t,o)=>{for(var i=o>1?void 0:o?U(e,t):e,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=(o?a(e,t,i):a(i))||i);return o&&i&&T(e,t,i),i};function $(r,e){return!!e&&(r===e||r.contains(e))}class u extends z.SizedMixin(l.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.ignore=!1,this.value="",this.valueSeparator=",",this.selectedItems=[],this.focusedItemIndex=0,this.focusInItemIndex=0,this._selected=[],this.cacheUpdated=Promise.resolve(),this.childItemSet=new Set,this.selectedItemsMap=new Map,this._hasUpdatedSelectedItemIndex=!1,this._willUpdateItems=!1,this.pointerUpTarget=null,this.descendentOverlays=new Map,this.handleSubmenuClosed=e=>{e.stopPropagation(),e.composedPath()[0].dispatchEvent(new Event("luzmo-menu-submenu-closed",{bubbles:!0,composed:!0}))},this.handleSubmenuOpened=e=>{e.stopPropagation(),e.composedPath()[0].dispatchEvent(new Event("luzmo-menu-submenu-opened",{bubbles:!0,composed:!0}));const o=this.childItems[this.focusedItemIndex];o&&(o.focused=!1);const i=e.composedPath().find(a=>this.childItemSet.has(a));if(!i)return;const n=this.childItems.indexOf(i);this.focusedItemIndex=n,this.focusInItemIndex=n},this.resolveCacheUpdated=()=>{},this.addEventListener("luzmo-menu-item-added-or-updated",this.onSelectableItemAddedOrUpdated),this.addEventListener("luzmo-menu-item-added-or-updated",this.onFocusableItemAddedOrUpdated,{capture:!0}),this.addEventListener("click",this.handleClick),this.addEventListener("pointerup",this.handlePointerup),this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur),this.addEventListener("luzmo-opened",this.handleSubmenuOpened),this.addEventListener("luzmo-closed",this.handleSubmenuClosed)}static get styles(){return[l.r(L)]}get isSubmenu(){return this.slot==="submenu"}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.selectedItems=[],this.selectedItemsMap.clear(),this.childItems.forEach(o=>{this===o.menuData.selectionRoot&&(o.selected=this.selected.includes(o.value),o.selected&&(this.selectedItems.push(o),this.selectedItemsMap.set(o,!0)))}),this.requestUpdate("selected",t)}get childItems(){return this.cachedChildItems||(this.cachedChildItems=this.updateCachedMenuItems()),this.cachedChildItems}get childRole(){if(this.resolvedRole==="listbox")return"option";switch(this.resolvedSelects){case"single":return"menuitemradio";case"multiple":return"menuitemcheckbox";default:return"menuitem"}}get ownRole(){return"menu"}focus({preventScroll:e}={}){if(this.childItems.every(o=>o.disabled))return;if(this.childItems.some(o=>o.menuData.focusRoot!==this)){super.focus({preventScroll:e});return}this.focusMenuItemByOffset(0),super.focus({preventScroll:e});const t=this.selectedItems[0];t&&!e&&t.scrollIntoView({block:"nearest"})}handleFocusin(e){var i;if(this.childItems.some(n=>n.menuData.focusRoot!==this))return;const t=this.getRootNode().activeElement,o=((i=this.childItems[this.focusedItemIndex])==null?void 0:i.menuData.selectionRoot)||this;if((t!==o||e.target!==this)&&(o.focus({preventScroll:!0}),t&&this.focusedItemIndex===0)){const n=this.childItems.indexOf(t);this.focusMenuItemByOffset(Math.max(n,0))}this.startListeningToKeyboard()}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}handleBlur(e){$(this,e.relatedTarget)||(this.stopListeningToKeyboard(),this.childItems.forEach(t=>t.focused=!1),this.removeAttribute("aria-activedescendant"))}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}selectOrToggleItem(e){const t=this.resolvedSelects,o=new Map(this.selectedItemsMap),i=[...this.selected],n=[...this.selectedItems],a=this.value,h=this.childItems[this.focusedItemIndex];if(h&&(h.focused=!1,h.active=!1),this.focusedItemIndex=this.childItems.indexOf(e),this.forwardFocusVisibleToItem(e),t==="multiple"){this.selectedItemsMap.has(e)?this.selectedItemsMap.delete(e):this.selectedItemsMap.set(e,!0);const v=[],b=[];this.childItemSet.forEach(p=>{p.menuData.selectionRoot===this&&this.selectedItemsMap.has(p)&&(v.push(p.value),b.push(p))}),this._selected=v,this.selectedItems=b,this.value=this.selected.join(this.valueSeparator)}else this.selectedItemsMap.clear(),this.selectedItemsMap.set(e,!0),this.value=e.value,this._selected=[e.value],this.selectedItems=[e];if(!this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))){this._selected=i,this.selectedItems=n,this.selectedItemsMap=o,this.value=a;return}if(t==="single"){for(const v of o.keys())v!==e&&(v.selected=!1);e.selected=!0}else t==="multiple"&&(e.selected=!e.selected)}handleKeydown(e){if(e.defaultPrevented)return;const t=this.childItems[this.focusedItemIndex];t&&(t.focused=!0);const{key:o}=e;if(e.shiftKey&&e.target!==this&&this.hasAttribute("tabindex")){this.removeAttribute("tabindex");const i=n=>{!n.shiftKey&&!this.hasAttribute("tabindex")&&(this.tabIndex=0,document.removeEventListener("keyup",i),this.removeEventListener("focusout",i))};document.addEventListener("keyup",i),this.addEventListener("focusout",i)}if(o==="Tab"){this.prepareToCleanUp();return}if(o===" "&&(t!=null&&t.hasSubmenu)){t.openOverlay();return}if(o===" "||o==="Enter"){const i=this.childItems[this.focusedItemIndex];i&&i.menuData.selectionRoot===e.target&&(e.preventDefault(),i.click());return}if(o==="ArrowDown"||o==="ArrowUp"){const i=this.childItems[this.focusedItemIndex];i&&i.menuData.selectionRoot===e.target&&this.navigateWithinMenu(e);return}this.navigateBetweenRelatedMenus(e)}focusMenuItemByOffset(e){const t=e||1,o=this.childItems[this.focusedItemIndex];o&&(o.focused=!1,o.active=o.open),this.focusedItemIndex=(this.childItems.length+this.focusedItemIndex+e)%this.childItems.length;let i=this.childItems[this.focusedItemIndex],n=this.childItems.length;for(;i!=null&&i.disabled&&n;)n-=1,this.focusedItemIndex=(this.childItems.length+this.focusedItemIndex+t)%this.childItems.length,i=this.childItems[this.focusedItemIndex];return i!=null&&i.disabled||this.forwardFocusVisibleToItem(i),i}updateSelectedItemIndex(){let e=0;const t=new Map,o=[],i=[];let n=this.childItems.length;for(;n;){n-=1;const a=this.childItems[n];a.menuData.selectionRoot===this&&((a.selected||!this._hasUpdatedSelectedItemIndex&&this.selected.includes(a.value))&&(e=n,t.set(a,!0),o.unshift(a.value),i.unshift(a)),n!==e&&(a.focused=!1))}i.map((a,h)=>{h>0&&(a.focused=!1)}),this.selectedItemsMap=t,this._selected=o,this.selectedItems=i,this.value=this.selected.join(this.valueSeparator),this.focusedItemIndex=e,this.focusInItemIndex=e}closeDescendentOverlays(){this.descendentOverlays.forEach(e=>{e.open=!1}),this.descendentOverlays=new Map}render(){return this.renderMenuItemSlot()}connectedCallback(){super.connectedCallback(),!this.hasAttribute("role")&&!this.ignore&&this.setAttribute("role",this.ownRole),this.updateComplete.then(()=>this.updateItemFocus())}disconnectedCallback(){this.cachedChildItems=void 0,this.selectedItems=[],this.selectedItemsMap.clear(),this.childItemSet.clear(),this.descendentOverlays=new Map,super.disconnectedCallback()}handleDescendentOverlayOpened(e){const t=e.composedPath()[0];t.overlayElement&&this.descendentOverlays.set(t.overlayElement,t.overlayElement)}handleDescendentOverlayClosed(e){const t=e.composedPath()[0];t.overlayElement&&this.descendentOverlays.delete(t.overlayElement)}navigateWithinMenu(e){const{key:t}=e,o=this.childItems[this.focusedItemIndex],i=t==="ArrowDown"?1:-1,n=this.focusMenuItemByOffset(i);n!==o&&(e.preventDefault(),e.stopPropagation(),n.scrollIntoView({block:"nearest"}))}navigateBetweenRelatedMenus(e){const{key:t}=e;e.stopPropagation();const o=this.isLTR&&t==="ArrowRight"||!this.isLTR&&t==="ArrowLeft",i=this.isLTR&&t==="ArrowLeft"||!this.isLTR&&t==="ArrowRight";if(o){const n=this.childItems[this.focusedItemIndex];n!=null&&n.hasSubmenu&&n.openOverlay()}else i&&this.isSubmenu&&(this.dispatchEvent(new Event("close",{bubbles:!0})),this.updateSelectedItemIndex())}renderMenuItemSlot(){return l.x`
458
19
  <slot
459
20
  @luzmo-menu-submenu-opened=${this.handleDescendentOverlayOpened}
460
21
  @luzmo-menu-submenu-closed=${this.handleDescendentOverlayClosed}
461
22
  @slotchange=${this.handleSlotchange}
462
23
  ></slot>
463
- `;
464
- }
465
- firstUpdated(changed) {
466
- super.firstUpdated(changed);
467
- if (!this.hasAttribute("tabindex") && !this.ignore) {
468
- const role = this.getAttribute("role");
469
- this.tabIndex = role === "group" ? -1 : 0;
470
- }
471
- const updates = [
472
- new Promise((res) => requestAnimationFrame(() => res(true)))
473
- ];
474
- [...this.children].forEach((item) => {
475
- if (item.localName === "luzmo-menu-item") {
476
- updates.push(item.updateComplete);
477
- }
478
- });
479
- this.childItemsUpdated = Promise.all(updates);
480
- }
481
- updated(changes) {
482
- super.updated(changes);
483
- if (changes.has("selects") && this.hasUpdated) {
484
- this.selectsChanged();
485
- }
486
- if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
487
- if (this.label) {
488
- this.setAttribute("aria-label", this.label);
489
- } else {
490
- this.removeAttribute("aria-label");
491
- }
492
- }
493
- }
494
- selectsChanged() {
495
- const updates = [
496
- new Promise((res) => requestAnimationFrame(() => res(true)))
497
- ];
498
- this.childItemSet.forEach((childItem) => {
499
- updates.push(childItem.triggerUpdate());
500
- });
501
- this.childItemsUpdated = Promise.all(updates);
502
- }
503
- async getUpdateComplete() {
504
- const complete = await super.getUpdateComplete();
505
- await this.childItemsUpdated;
506
- await this.cacheUpdated;
507
- return complete;
508
- }
509
- updateCachedMenuItems() {
510
- this.cachedChildItems = [];
511
- if (!this.menuSlot) {
512
- return [];
513
- }
514
- const slottedElements = this.menuSlot.assignedElements({
515
- flatten: true
516
- });
517
- for (const [i, slottedElement] of slottedElements.entries()) {
518
- if (this.childItemSet.has(slottedElement)) {
519
- this.cachedChildItems.push(slottedElement);
520
- continue;
521
- }
522
- const isHTMLSlotElement = slottedElement.localName === "slot";
523
- const flattenedChildren = isHTMLSlotElement ? slottedElement.assignedElements({
524
- flatten: true
525
- }) : [...slottedElement.querySelectorAll(":scope > *")];
526
- slottedElements.splice(
527
- i,
528
- 1,
529
- slottedElement,
530
- ...flattenedChildren
531
- );
532
- }
533
- return this.cachedChildItems;
534
- }
535
- /**
536
- * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
537
- * this event to announce its presence in the DOM. During the CAPTURE phase the first
538
- * Menu based element that the event encounters will manage the focus state of the
539
- * dispatching `<luzmo-menu-item>` element.
540
- * @param event
541
- */
542
- onFocusableItemAddedOrUpdated(event) {
543
- event.menuCascade.set(this, {
544
- hadFocusRoot: !!event.item.menuData.focusRoot,
545
- ancestorWithSelects: event.currentAncestorWithSelects
546
- });
547
- if (this.selects) {
548
- event.currentAncestorWithSelects = this;
549
- }
550
- event.item.menuData.focusRoot = event.item.menuData.focusRoot || this;
551
- }
552
- /**
553
- * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
554
- * this event to announce its presence in the DOM. During the BUBBLE phase the first
555
- * Menu based element that the event encounters that does not inherit selection will
556
- * manage the selection state of the dispatching `<luzmo-menu-item>` element.
557
- * @param event
558
- */
559
- onSelectableItemAddedOrUpdated(event) {
560
- var _a, _b;
561
- const cascadeData = event.menuCascade.get(this);
562
- if (!cascadeData) {
563
- return;
564
- }
565
- event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
566
- if (cascadeData.hadFocusRoot && !this.ignore) {
567
- this.tabIndex = -1;
568
- }
569
- this.addChildItem(event.item);
570
- if (this.selects === "inherit") {
571
- this.resolvedSelects = "inherit";
572
- const ignoreMenu = (_a = event.currentAncestorWithSelects) == null ? void 0 : _a.ignore;
573
- this.resolvedRole = ignoreMenu ? "none" : ((_b = event.currentAncestorWithSelects) == null ? void 0 : _b.getAttribute("role")) || this.getAttribute("role") || void 0;
574
- } else if (this.selects) {
575
- this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
576
- this.resolvedSelects = this.selects;
577
- } else {
578
- this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
579
- this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
580
- }
581
- const selects = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
582
- event.item.menuData.cleanupSteps.push(
583
- (item) => this.removeChildItem(item)
584
- );
585
- if ((selects || !this.selects && this.resolvedSelects !== "ignore") && !event.item.menuData.selectionRoot) {
586
- event.item.setRole(this.childRole);
587
- event.item.menuData.selectionRoot = event.item.menuData.selectionRoot || this;
588
- if (event.item.selected) {
589
- this.selectedItemsMap.set(event.item, true);
590
- this.selectedItems = [...this.selectedItems, event.item];
591
- this._selected = [...this.selected, event.item.value];
592
- this.value = this.selected.join(this.valueSeparator);
593
- }
594
- }
595
- }
596
- addChildItem(item) {
597
- this.childItemSet.add(item);
598
- this.handleItemsChanged();
599
- }
600
- async removeChildItem(item) {
601
- this.childItemSet.delete(item);
602
- this.cachedChildItems = void 0;
603
- if (item.focused) {
604
- this.handleItemsChanged();
605
- await this.updateComplete;
606
- this.focus();
607
- }
608
- }
609
- handleClick(event) {
610
- if (this.pointerUpTarget === event.target) {
611
- this.pointerUpTarget = null;
612
- return;
613
- }
614
- this.handlePointerBasedSelection(event);
615
- }
616
- handlePointerup(event) {
617
- this.pointerUpTarget = event.target;
618
- this.handlePointerBasedSelection(event);
619
- }
620
- handlePointerBasedSelection(event) {
621
- var _a, _b;
622
- if (event instanceof MouseEvent && event.button !== 0) {
623
- return;
624
- }
625
- const path = event.composedPath();
626
- const target = path.find((el) => {
627
- if (!(el instanceof Element)) {
628
- return false;
629
- }
630
- return el.getAttribute("role") === this.childRole;
631
- });
632
- if (event.defaultPrevented) {
633
- const index = this.childItems.indexOf(target);
634
- if (((_a = target == null ? void 0 : target.menuData) == null ? void 0 : _a.focusRoot) === this && index !== -1) {
635
- this.focusedItemIndex = index;
636
- }
637
- return;
638
- }
639
- if ((target == null ? void 0 : target.href) && target.href.length > 0) {
640
- this.dispatchEvent(
641
- new Event("change", {
642
- bubbles: true,
643
- composed: true
644
- })
645
- );
646
- return;
647
- } else if (((_b = target == null ? void 0 : target.menuData) == null ? void 0 : _b.selectionRoot) === this && this.childItems.length > 0) {
648
- event.preventDefault();
649
- if (target.hasSubmenu || target.open) {
650
- return;
651
- }
652
- this.selectOrToggleItem(target);
653
- } else {
654
- return;
655
- }
656
- this.prepareToCleanUp();
657
- }
658
- prepareToCleanUp() {
659
- document.addEventListener(
660
- "focusout",
661
- () => {
662
- requestAnimationFrame(() => {
663
- const focusedItem = this.childItems[this.focusedItemIndex];
664
- if (focusedItem) {
665
- focusedItem.focused = false;
666
- this.updateSelectedItemIndex();
667
- }
668
- });
669
- },
670
- { once: true }
671
- );
672
- }
673
- handleItemsChanged() {
674
- this.cachedChildItems = void 0;
675
- if (!this._willUpdateItems) {
676
- this._willUpdateItems = true;
677
- this.cacheUpdated = this.updateCache();
678
- }
679
- }
680
- async updateCache() {
681
- await (this.hasUpdated ? new Promise((res) => requestAnimationFrame(() => res(true))) : Promise.all([
682
- new Promise((res) => requestAnimationFrame(() => res(true))),
683
- this.updateComplete
684
- ]));
685
- if (this.cachedChildItems === void 0) {
686
- this.updateSelectedItemIndex();
687
- this.updateItemFocus();
688
- }
689
- this._willUpdateItems = false;
690
- }
691
- updateItemFocus() {
692
- if (this.childItems.length === 0) {
693
- return;
694
- }
695
- const focusInItem = this.childItems[this.focusInItemIndex];
696
- if (this.getRootNode().activeElement === focusInItem.menuData.focusRoot) {
697
- this.forwardFocusVisibleToItem(focusInItem);
698
- }
699
- }
700
- forwardFocusVisibleToItem(item) {
701
- if (!item || item.menuData.focusRoot !== this) {
702
- return;
703
- }
704
- this.closeDescendentOverlays();
705
- const focused = this.hasVisibleFocusInTree() || !!this.childItems.some((child) => child.hasVisibleFocusInTree());
706
- item.focused = focused;
707
- this.setAttribute("aria-activedescendant", item.id);
708
- if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
709
- item.menuData.selectionRoot.focus();
710
- }
711
- }
712
- handleSlotchange({
713
- target
714
- }) {
715
- const assignedElements = target.assignedElements({
716
- flatten: true
717
- });
718
- if (this.childItems.length !== assignedElements.length) {
719
- assignedElements.forEach((item) => {
720
- if (item.triggerUpdate !== void 0) {
721
- item.triggerUpdate();
722
- } else if (item.childItems !== void 0) {
723
- item.childItems.forEach((child) => {
724
- child.triggerUpdate();
725
- });
726
- }
727
- });
728
- }
729
- }
730
- }
731
- __decorateClass$2([
732
- decorators_js.property({ type: String, reflect: true })
733
- ], LuzmoMenu.prototype, "label", 2);
734
- __decorateClass$2([
735
- decorators_js.property({ type: Boolean, reflect: true })
736
- ], LuzmoMenu.prototype, "ignore", 2);
737
- __decorateClass$2([
738
- decorators_js.property({ type: String, reflect: true })
739
- ], LuzmoMenu.prototype, "variant", 2);
740
- __decorateClass$2([
741
- decorators_js.property({ type: String, reflect: true })
742
- ], LuzmoMenu.prototype, "selects", 2);
743
- __decorateClass$2([
744
- decorators_js.property({ type: String })
745
- ], LuzmoMenu.prototype, "value", 2);
746
- __decorateClass$2([
747
- decorators_js.property({ type: String, attribute: "value-separator" })
748
- ], LuzmoMenu.prototype, "valueSeparator", 2);
749
- __decorateClass$2([
750
- decorators_js.property({ attribute: false })
751
- ], LuzmoMenu.prototype, "selected", 1);
752
- __decorateClass$2([
753
- decorators_js.property({ attribute: false })
754
- ], LuzmoMenu.prototype, "selectedItems", 2);
755
- __decorateClass$2([
756
- decorators_js.query("slot:not([name])")
757
- ], LuzmoMenu.prototype, "menuSlot", 2);
758
- const menuDividerStyles = ":host{--menu-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-menu-section-divider-margin-block, max(0px, (var(--menu-item-section-divider-height) - var(--menu-divider-thickness)) / 2));margin-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));overflow:visible}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:block;flex-shrink:0}";
759
- class LuzmoMenuDivider extends sizedMixin.SizedMixin(base.LuzmoElement, {
760
- validSizes: ["s", "m", "l"]
761
- }) {
762
- static get styles() {
763
- return [lit.unsafeCSS(divider_module.dividerStyles), lit.unsafeCSS(menuDividerStyles)];
764
- }
765
- firstUpdated(changed) {
766
- super.firstUpdated(changed);
767
- this.setAttribute("role", "separator");
768
- }
769
- }
770
- const menuGroupStyles = ".luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.header{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .header{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{margin:0;display:inline-flex;overflow:visible;flex-direction:column}[hidden]{display:none!important}";
771
- var __defProp$1 = Object.defineProperty;
772
- var __decorateClass$1 = (decorators, target, key, kind) => {
773
- var result = void 0;
774
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
775
- if (decorator = decorators[i])
776
- result = decorator(target, key, result) || result;
777
- if (result) __defProp$1(target, key, result);
778
- return result;
779
- };
780
- class LuzmoMenuGroup extends LuzmoMenu {
781
- constructor() {
782
- super(...arguments);
783
- this.headerId = "";
784
- }
785
- static get styles() {
786
- return [...super.styles, lit.unsafeCSS(menuGroupStyles)];
787
- }
788
- render() {
789
- return lit.html`
24
+ `}firstUpdated(e){if(super.firstUpdated(e),!this.hasAttribute("tabindex")&&!this.ignore){const o=this.getAttribute("role");this.tabIndex=o==="group"?-1:0}const t=[new Promise(o=>requestAnimationFrame(()=>o(!0)))];[...this.children].forEach(o=>{o.localName==="luzmo-menu-item"&&t.push(o.updateComplete)}),this.childItemsUpdated=Promise.all(t)}updated(e){super.updated(e),e.has("selects")&&this.hasUpdated&&this.selectsChanged(),e.has("label")&&(this.label||e.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}selectsChanged(){const e=[new Promise(t=>requestAnimationFrame(()=>t(!0)))];this.childItemSet.forEach(t=>{e.push(t.triggerUpdate())}),this.childItemsUpdated=Promise.all(e)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.childItemsUpdated,await this.cacheUpdated,e}updateCachedMenuItems(){if(this.cachedChildItems=[],!this.menuSlot)return[];const e=this.menuSlot.assignedElements({flatten:!0});for(const[t,o]of e.entries()){if(this.childItemSet.has(o)){this.cachedChildItems.push(o);continue}const n=o.localName==="slot"?o.assignedElements({flatten:!0}):[...o.querySelectorAll(":scope > *")];e.splice(t,1,o,...n)}return this.cachedChildItems}onFocusableItemAddedOrUpdated(e){e.menuCascade.set(this,{hadFocusRoot:!!e.item.menuData.focusRoot,ancestorWithSelects:e.currentAncestorWithSelects}),this.selects&&(e.currentAncestorWithSelects=this),e.item.menuData.focusRoot=e.item.menuData.focusRoot||this}onSelectableItemAddedOrUpdated(e){var i,n;const t=e.menuCascade.get(this);if(!t)return;if(e.item.menuData.parentMenu=e.item.menuData.parentMenu||this,t.hadFocusRoot&&!this.ignore&&(this.tabIndex=-1),this.addChildItem(e.item),this.selects==="inherit"){this.resolvedSelects="inherit";const a=(i=e.currentAncestorWithSelects)==null?void 0:i.ignore;this.resolvedRole=a?"none":((n=e.currentAncestorWithSelects)==null?void 0:n.getAttribute("role"))||this.getAttribute("role")||void 0}else this.selects?(this.resolvedRole=this.ignore?"none":this.getAttribute("role")||void 0,this.resolvedSelects=this.selects):(this.resolvedRole=this.ignore?"none":this.getAttribute("role")||void 0,this.resolvedSelects=this.resolvedRole==="none"?"ignore":"none");const o=this.resolvedSelects==="single"||this.resolvedSelects==="multiple";e.item.menuData.cleanupSteps.push(a=>this.removeChildItem(a)),(o||!this.selects&&this.resolvedSelects!=="ignore")&&!e.item.menuData.selectionRoot&&(e.item.setRole(this.childRole),e.item.menuData.selectionRoot=e.item.menuData.selectionRoot||this,e.item.selected&&(this.selectedItemsMap.set(e.item,!0),this.selectedItems=[...this.selectedItems,e.item],this._selected=[...this.selected,e.item.value],this.value=this.selected.join(this.valueSeparator)))}addChildItem(e){this.childItemSet.add(e),this.handleItemsChanged()}async removeChildItem(e){this.childItemSet.delete(e),this.cachedChildItems=void 0,e.focused&&(this.handleItemsChanged(),await this.updateComplete,this.focus())}handleClick(e){if(this.pointerUpTarget===e.target){this.pointerUpTarget=null;return}this.handlePointerBasedSelection(e)}handlePointerup(e){this.pointerUpTarget=e.target,this.handlePointerBasedSelection(e)}handlePointerBasedSelection(e){var i,n;if(e instanceof MouseEvent&&e.button!==0)return;const o=e.composedPath().find(a=>a instanceof Element?a.getAttribute("role")===this.childRole:!1);if(e.defaultPrevented){const a=this.childItems.indexOf(o);((i=o==null?void 0:o.menuData)==null?void 0:i.focusRoot)===this&&a!==-1&&(this.focusedItemIndex=a);return}if(o!=null&&o.href&&o.href.length>0){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));return}else if(((n=o==null?void 0:o.menuData)==null?void 0:n.selectionRoot)===this&&this.childItems.length>0){if(e.preventDefault(),o.hasSubmenu||o.open)return;this.selectOrToggleItem(o)}else return;this.prepareToCleanUp()}prepareToCleanUp(){document.addEventListener("focusout",()=>{requestAnimationFrame(()=>{const e=this.childItems[this.focusedItemIndex];e&&(e.focused=!1,this.updateSelectedItemIndex())})},{once:!0})}handleItemsChanged(){this.cachedChildItems=void 0,this._willUpdateItems||(this._willUpdateItems=!0,this.cacheUpdated=this.updateCache())}async updateCache(){await(this.hasUpdated?new Promise(e=>requestAnimationFrame(()=>e(!0))):Promise.all([new Promise(e=>requestAnimationFrame(()=>e(!0))),this.updateComplete])),this.cachedChildItems===void 0&&(this.updateSelectedItemIndex(),this.updateItemFocus()),this._willUpdateItems=!1}updateItemFocus(){if(this.childItems.length===0)return;const e=this.childItems[this.focusInItemIndex];this.getRootNode().activeElement===e.menuData.focusRoot&&this.forwardFocusVisibleToItem(e)}forwardFocusVisibleToItem(e){if(!e||e.menuData.focusRoot!==this)return;this.closeDescendentOverlays();const t=this.hasVisibleFocusInTree()||!!this.childItems.some(o=>o.hasVisibleFocusInTree());e.focused=t,this.setAttribute("aria-activedescendant",e.id),e.menuData.selectionRoot&&e.menuData.selectionRoot!==this&&e.menuData.selectionRoot.focus()}handleSlotchange({target:e}){const t=e.assignedElements({flatten:!0});this.childItems.length!==t.length&&t.forEach(o=>{o.triggerUpdate!==void 0?o.triggerUpdate():o.childItems!==void 0&&o.childItems.forEach(i=>{i.triggerUpdate()})})}}m([l.n({type:String,reflect:!0})],u.prototype,"label",2);m([l.n({type:Boolean,reflect:!0})],u.prototype,"ignore",2);m([l.n({type:String,reflect:!0})],u.prototype,"variant",2);m([l.n({type:String,reflect:!0})],u.prototype,"selects",2);m([l.n({type:String})],u.prototype,"value",2);m([l.n({type:String,attribute:"value-separator"})],u.prototype,"valueSeparator",2);m([l.n({attribute:!1})],u.prototype,"selected",1);m([l.n({attribute:!1})],u.prototype,"selectedItems",2);m([f.e("slot:not([name])")],u.prototype,"menuSlot",2);const _=":host{--menu-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-menu-section-divider-margin-block, max(0px, (var(--menu-item-section-divider-height) - var(--menu-divider-thickness)) / 2));margin-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));overflow:visible}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:block;flex-shrink:0}";class I extends z.SizedMixin(l.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[l.r(y.dividerStyles),l.r(_)]}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","separator")}}const q=".luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.header{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .header{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{margin:0;display:inline-flex;overflow:visible;flex-direction:column}[hidden]{display:none!important}";var B=Object.defineProperty,w=(r,e,t,o)=>{for(var i=void 0,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=a(e,t,i)||i);return i&&B(e,t,i),i};class g extends u{constructor(){super(...arguments),this.headerId=""}static get styles(){return[...super.styles,l.r(q)]}render(){return l.x`
790
25
  <span class="header" ?hidden=${!this.headerElement}>
791
26
  <slot name="header" @slotchange=${this.updateLabel}></slot>
792
27
  </span>
@@ -797,199 +32,19 @@ class LuzmoMenuGroup extends LuzmoMenu {
797
32
  ignore
798
33
  >${this.renderMenuItemSlot()}</luzmo-menu
799
34
  >
800
- `;
801
- }
802
- get ownRole() {
803
- switch (this.selects) {
804
- case "multiple":
805
- case "single":
806
- case "inherit": {
807
- return "group";
808
- }
809
- default: {
810
- return "menu";
811
- }
812
- }
813
- }
814
- updateLabel() {
815
- const headerElement = this.headerElements.length > 0 ? this.headerElements[0] : void 0;
816
- if (headerElement !== this.headerElement) {
817
- if (this.headerElement && this.headerElement.id === this.headerId) {
818
- this.headerElement.removeAttribute("id");
819
- }
820
- if (headerElement) {
821
- this.headerId = this.headerId || `luzmo-menu-group-label-${randomId.randomID()}`;
822
- const headerId = headerElement.id || this.headerId;
823
- if (!headerElement.id) {
824
- headerElement.id = headerId;
825
- }
826
- this.setAttribute("aria-labelledby", headerId);
827
- } else {
828
- this.removeAttribute("aria-labelledby");
829
- }
830
- }
831
- this.headerElement = headerElement;
832
- }
833
- }
834
- __decorateClass$1([
835
- decorators_js.queryAssignedNodes({
836
- slot: "header",
837
- flatten: true
838
- })
839
- ], LuzmoMenuGroup.prototype, "headerElements");
840
- __decorateClass$1([
841
- decorators_js.state()
842
- ], LuzmoMenuGroup.prototype, "headerElement");
843
- const menuItemStyles = '.checkmark{display:var(--luzmo-menu-checkmark-display, var(--menu-checkmark-display));font-size:var(--luzmo-menu-item-checkmark-size, var(--menu-item-checkmark-size));fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));opacity:1;grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--luzmo-menu-item-top-to-checkmark, var(--menu-item-top-to-checkmark)) - var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.angle{font-size:var(--menu-item-angle-size);grid-area:angleArea;align-self:center;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--luzmo-menu-item-label-text-to-visual, var(--menu-item-label-text-to-visual));margin-block-start:var(--luzmo-menu-item-top-to-icon, var(--menu-item-top-to-icon));block-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));inline-size:var(--luzmo-menu-item-icon-width, var(--menu-item-icon-height));font-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)));line-height:var(--luzmo-menu-item-label-line-height, var(--menu-item-label-line-height));min-block-size:var(--luzmo-menu-item-min-height, var(--menu-item-min-height));padding-block-start:var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text));padding-block-end:var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-template:". angleAreaCollapsible . headingIconArea sectionHeadingArea . . ." "selectedArea angleAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea angleAreaDrillIn" 1fr ". . . . descriptionArea . . ." ". . . . submenuArea . . ." ". . . . . . . ."/auto auto auto auto 1fr auto auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;align-items:center;position:relative}.luzmo-Menu-itemCheckbox{--luzmo-checkbox-top-to-text: 0;--luzmo-checkbox-text-to-control: 0;min-block-size:0}.luzmo-Menu-itemCheckbox .luzmo-Checkbox-box{margin-block-start:var(--luzmo-menu-item-top-to-checkbox, var(--menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-itemSwitch{min-block-size:0}.luzmo-Menu-itemSwitch .luzmo-Switch-switch{margin-block-start:var(--luzmo-menu-item-top-to-action, var(--menu-item-top-to-action));margin-block-end:0}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-key-focus, var(--menu-item-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label,:host([focused])>.menu-item-tooltip-icon,:host(:focus)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-focus, var(--menu-item-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-focus, var(--menu-item-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-focus, var(--menu-item-value-color-focus)))}:host([focused])>.icon:not(.angle,.checkmark),:host(:focus)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)))}:host([focused])>.angle,:host(:focus)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--menu-item-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-down, var(--menu-item-background-color-down)))}:host(:is(:active,[active]))>#label,:host(:is(:active,[active]))>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-down, var(--menu-item-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-down, var(--menu-item-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-down, var(--menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}:host([disabled]) #label,:host([disabled]) .menu-item-tooltip-icon,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}:host([focused]) .luzmo-Menu-back,:host([focused]){box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .luzmo-Menu-itemCheckbox{grid-area:checkmarkArea}.luzmo-Menu-itemSelection{grid-area:selectedArea}#label{--luzmo-switch-control-label-spacing: 0;--luzmo-switch-spacing-top-to-label: 0;font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-content-color-default, var(--menu-item-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)))}:host([selected]) #label{color:var(--menu-item-highlight-label-content-color)}:host([selected]) .menu-item-tooltip-icon{color:var(--menu-item-highlight-label-content-color)}::slotted([slot=value]){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-value-color-default, var(--menu-item-value-color-default)));font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));grid-area:valueArea;justify-self:end}.luzmo-Menu-itemActions,::slotted([slot=value]){align-self:start;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing))}.luzmo-Menu-itemActions{grid-area:actionsArea}[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-description-color-default, var(--menu-item-description-color-default)));font-size:var(--luzmo-menu-item-description-font-size, var(--menu-item-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-menu-item-description-line-height, var(--menu-item-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-menu-item-label-to-description-spacing, var(--menu-item-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.luzmo-Menu-item--collapsible.is-open{padding-block-end:0}.luzmo-Menu-item--collapsible.is-open .angle{transform:rotate(90deg)}:host([focused]) .luzmo-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .luzmo-Menu-item--collapsible.is-open,.luzmo-Menu-item--collapsible.is-open:focus{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}.luzmo-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}.luzmo-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)))}.luzmo-Menu-item--collapsible .angle{grid-area:angleAreaCollapsible}:host([has-submenu]) .angle{fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));grid-area:angleAreaDrillIn;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--menu-item-background-color-default: var( --highcontrast-menu-item-selected-background-color, var( --luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover) ) )}:host([has-submenu]) .is-open .icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover)))}:host(:hover)>#label,:host(:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-hover, var(--menu-item-label-content-color-hover)))}:host([selected]:hover)>#label,:host([selected]:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-highlight-label-content-color, var(--menu-item-highlight-label-content-color)))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-hover, var(--menu-item-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-hover, var(--menu-item-value-color-hover)))}:host(:hover)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host(:hover)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}:host([disabled]:hover) #label,:host([disabled]:hover) .menu-item-tooltip-icon,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}.luzmo-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}:host([has-submenu]:hover) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}}:host([has-submenu][focused]) .angle,:host([has-submenu]:focus) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .luzmo-Menu-backButton{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{text-align:initial;font-family:var(--luzmo-menu-item-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}:host([has-submenu][disabled]) .angle{color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}#button{position:absolute;top:0;right:0;bottom:0;left:0}.icon-container>svg{vertical-align:top}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors: active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}.menu-item-tooltip-container{grid-area:actionsArea;align-self:center;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));display:flex;align-items:center;justify-content:center}.menu-item-tooltip-container luzmo-tooltip{--tooltip-font-size: var( --luzmo-menu-item-tooltip-font-size, var(--tooltip-font-size) )}.menu-item-tooltip-icon-trigger{cursor:default;display:flex;align-items:center;justify-content:center}.menu-item-tooltip-icon{font-size:.875rem;width:.875rem;height:.875rem}';
844
- var __defProp = Object.defineProperty;
845
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
846
- var __decorateClass = (decorators, target, key, kind) => {
847
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
848
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
849
- if (decorator = decorators[i])
850
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
851
- if (kind && result) __defProp(target, key, result);
852
- return result;
853
- };
854
- const POINTERLEAVE_TIMEOUT = 100;
855
- const checkIcon = (classes) => lit.html`
856
- <span class="icon-container icon checkmark ${classes.join(" ")}">
857
- ${icons.luzmoIcon(icons.luzmoCheck)}
35
+ `}get ownRole(){switch(this.selects){case"multiple":case"single":case"inherit":return"group";default:return"menu"}}updateLabel(){const e=this.headerElements.length>0?this.headerElements[0]:void 0;if(e!==this.headerElement)if(this.headerElement&&this.headerElement.id===this.headerId&&this.headerElement.removeAttribute("id"),e){this.headerId=this.headerId||`luzmo-menu-group-label-${k.randomID()}`;const t=e.id||this.headerId;e.id||(e.id=t),this.setAttribute("aria-labelledby",t)}else this.removeAttribute("aria-labelledby");this.headerElement=e}}w([E.n({slot:"header",flatten:!0})],g.prototype,"headerElements");w([S.r()],g.prototype,"headerElement");const F='.checkmark{display:var(--luzmo-menu-checkmark-display, var(--menu-checkmark-display));font-size:var(--luzmo-menu-item-checkmark-size, var(--menu-item-checkmark-size));fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));opacity:1;grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--luzmo-menu-item-top-to-checkmark, var(--menu-item-top-to-checkmark)) - var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.angle{font-size:var(--menu-item-angle-size);grid-area:angleArea;align-self:center;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--luzmo-menu-item-label-text-to-visual, var(--menu-item-label-text-to-visual));margin-block-start:var(--luzmo-menu-item-top-to-icon, var(--menu-item-top-to-icon));block-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));inline-size:var(--luzmo-menu-item-icon-width, var(--menu-item-icon-height));font-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)));line-height:var(--luzmo-menu-item-label-line-height, var(--menu-item-label-line-height));min-block-size:var(--luzmo-menu-item-min-height, var(--menu-item-min-height));padding-block-start:var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text));padding-block-end:var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-template:". angleAreaCollapsible . headingIconArea sectionHeadingArea . . ." "selectedArea angleAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea angleAreaDrillIn" 1fr ". . . . descriptionArea . . ." ". . . . submenuArea . . ." ". . . . . . . ."/auto auto auto auto 1fr auto auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;align-items:center;position:relative}.luzmo-Menu-itemCheckbox{--luzmo-checkbox-top-to-text: 0;--luzmo-checkbox-text-to-control: 0;min-block-size:0}.luzmo-Menu-itemCheckbox .luzmo-Checkbox-box{margin-block-start:var(--luzmo-menu-item-top-to-checkbox, var(--menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-itemSwitch{min-block-size:0}.luzmo-Menu-itemSwitch .luzmo-Switch-switch{margin-block-start:var(--luzmo-menu-item-top-to-action, var(--menu-item-top-to-action));margin-block-end:0}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-key-focus, var(--menu-item-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label,:host([focused])>.menu-item-tooltip-icon,:host(:focus)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-focus, var(--menu-item-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-focus, var(--menu-item-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-focus, var(--menu-item-value-color-focus)))}:host([focused])>.icon:not(.angle,.checkmark),:host(:focus)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)))}:host([focused])>.angle,:host(:focus)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--menu-item-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-down, var(--menu-item-background-color-down)))}:host(:is(:active,[active]))>#label,:host(:is(:active,[active]))>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-down, var(--menu-item-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-down, var(--menu-item-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-down, var(--menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}:host([disabled]) #label,:host([disabled]) .menu-item-tooltip-icon,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}:host([focused]) .luzmo-Menu-back,:host([focused]){box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .luzmo-Menu-itemCheckbox{grid-area:checkmarkArea}.luzmo-Menu-itemSelection{grid-area:selectedArea}#label{--luzmo-switch-control-label-spacing: 0;--luzmo-switch-spacing-top-to-label: 0;font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-content-color-default, var(--menu-item-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)))}:host([selected]) #label{color:var(--menu-item-highlight-label-content-color)}:host([selected]) .menu-item-tooltip-icon{color:var(--menu-item-highlight-label-content-color)}::slotted([slot=value]){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-value-color-default, var(--menu-item-value-color-default)));font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));grid-area:valueArea;justify-self:end}.luzmo-Menu-itemActions,::slotted([slot=value]){align-self:start;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing))}.luzmo-Menu-itemActions{grid-area:actionsArea}[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-description-color-default, var(--menu-item-description-color-default)));font-size:var(--luzmo-menu-item-description-font-size, var(--menu-item-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-menu-item-description-line-height, var(--menu-item-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-menu-item-label-to-description-spacing, var(--menu-item-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.luzmo-Menu-item--collapsible.is-open{padding-block-end:0}.luzmo-Menu-item--collapsible.is-open .angle{transform:rotate(90deg)}:host([focused]) .luzmo-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .luzmo-Menu-item--collapsible.is-open,.luzmo-Menu-item--collapsible.is-open:focus{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}.luzmo-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}.luzmo-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)))}.luzmo-Menu-item--collapsible .angle{grid-area:angleAreaCollapsible}:host([has-submenu]) .angle{fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));grid-area:angleAreaDrillIn;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--menu-item-background-color-default: var( --highcontrast-menu-item-selected-background-color, var( --luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover) ) )}:host([has-submenu]) .is-open .icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover)))}:host(:hover)>#label,:host(:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-hover, var(--menu-item-label-content-color-hover)))}:host([selected]:hover)>#label,:host([selected]:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-highlight-label-content-color, var(--menu-item-highlight-label-content-color)))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-hover, var(--menu-item-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-hover, var(--menu-item-value-color-hover)))}:host(:hover)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host(:hover)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}:host([disabled]:hover) #label,:host([disabled]:hover) .menu-item-tooltip-icon,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}.luzmo-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}:host([has-submenu]:hover) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}}:host([has-submenu][focused]) .angle,:host([has-submenu]:focus) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .luzmo-Menu-backButton{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{text-align:initial;font-family:var(--luzmo-menu-item-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}:host([has-submenu][disabled]) .angle{color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}#button{position:absolute;top:0;right:0;bottom:0;left:0}.icon-container>svg{vertical-align:top}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors: active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}.menu-item-tooltip-container{grid-area:actionsArea;align-self:center;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));display:flex;align-items:center;justify-content:center}.menu-item-tooltip-container luzmo-tooltip{--tooltip-font-size: var( --luzmo-menu-item-tooltip-font-size, var(--tooltip-font-size) )}.menu-item-tooltip-icon-trigger{cursor:default;display:flex;align-items:center;justify-content:center}.menu-item-tooltip-icon{font-size:.875rem;width:.875rem;height:.875rem}';var j=Object.defineProperty,H=Object.getOwnPropertyDescriptor,c=(r,e,t,o)=>{for(var i=o>1?void 0:o?H(e,t):e,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=(o?a(e,t,i):a(i))||i);return o&&i&&j(e,t,i),i};const N=100,W=r=>l.x`
36
+ <span class="icon-container icon checkmark ${r.join(" ")}">
37
+ ${d.T3(d.F)}
858
38
  </span>
859
- `;
860
- const angleIcon = (classes) => lit.html`
861
- <span class="icon-container icon angle ${classes.join(" ")}">
862
- ${icons.luzmoIcon(icons.luzmoAngleRight, { className: "indicator" })}
39
+ `,V=r=>l.x`
40
+ <span class="icon-container icon angle ${r.join(" ")}">
41
+ ${d.T3(d.S,{className:"indicator"})}
863
42
  </span>
864
- `;
865
- const infoIcon = (classes) => lit.html`
866
- <span class="icon-container icon info ${classes.join(" ")}">
867
- ${icons.luzmoIcon(icons.luzmoInfoCircleOutline)}
43
+ `,K=r=>l.x`
44
+ <span class="icon-container icon info ${r.join(" ")}">
45
+ ${d.T3(d.p1)}
868
46
  </span>
869
- `;
870
- class MenuItemAddedOrUpdatedEvent extends Event {
871
- constructor(item) {
872
- super("luzmo-menu-item-added-or-updated", {
873
- bubbles: true,
874
- composed: true
875
- });
876
- this.menuCascade = /* @__PURE__ */ new WeakMap();
877
- this.clear(item);
878
- }
879
- get item() {
880
- return this._item;
881
- }
882
- clear(item) {
883
- this._item = item;
884
- this.currentAncestorWithSelects = void 0;
885
- item.menuData = {
886
- cleanupSteps: [],
887
- focusRoot: void 0,
888
- selectionRoot: void 0,
889
- parentMenu: void 0
890
- };
891
- this.menuCascade = /* @__PURE__ */ new WeakMap();
892
- }
893
- }
894
- class LuzmoMenuItem extends likeAnchor.LikeAnchor(
895
- observeSlotText.ObserveSlotText(observeSlotPresence.ObserveSlotPresence(focusable.Focusable, '[slot="icon"]'))
896
- ) {
897
- constructor() {
898
- super();
899
- this.active = false;
900
- this.dependencyManager = new dependencyManger.DependencyManagerController(this);
901
- this.focused = false;
902
- this.selected = false;
903
- this._value = "";
904
- this.hasSubmenu = false;
905
- this.tooltipPlacement = "top";
906
- this.noWrap = false;
907
- this.renderAngleIcon = (classes = []) => angleIcon(classes);
908
- this.renderCheckIcon = (classes = []) => checkIcon(classes);
909
- this.renderInfoIcon = (classes = []) => infoIcon(classes);
910
- this.open = false;
911
- this.handleSlottableRequest = (event) => {
912
- var _a;
913
- (_a = this.submenuElement) == null ? void 0 : _a.dispatchEvent(
914
- new slottableRequestEvent.SlottableRequestEvent(event.name, event.data)
915
- );
916
- };
917
- this.proxyFocus = () => {
918
- this.focus();
919
- };
920
- this.handleBeforetoggle = (event) => {
921
- if (event.newState === "closed") {
922
- this.open = true;
923
- this.overlayElement.manuallyKeepOpen();
924
- this.overlayElement.removeEventListener(
925
- "beforetoggle",
926
- this.handleBeforetoggle
927
- );
928
- }
929
- };
930
- this.recentlyLeftChild = false;
931
- this.willDispatchUpdate = false;
932
- this.menuData = {
933
- focusRoot: void 0,
934
- parentMenu: void 0,
935
- selectionRoot: void 0,
936
- cleanupSteps: []
937
- };
938
- this.addEventListener("click", this.handleClickCapture, {
939
- capture: true
940
- });
941
- new mutationController_js.MutationController(this, {
942
- config: {
943
- characterData: true,
944
- childList: true,
945
- subtree: true
946
- },
947
- callback: (mutations) => {
948
- const isSubmenu = mutations.every(
949
- (mutation) => mutation.target.slot === "submenu"
950
- );
951
- if (isSubmenu) {
952
- return;
953
- }
954
- this.breakItemChildrenCache();
955
- }
956
- });
957
- }
958
- static get styles() {
959
- return [lit.unsafeCSS(menuItemStyles)];
960
- }
961
- get value() {
962
- return this._value || this.itemText;
963
- }
964
- set value(value) {
965
- if (value === this._value) {
966
- return;
967
- }
968
- this._value = value || "";
969
- if (this._value) {
970
- this.setAttribute("value", this._value);
971
- } else {
972
- this.removeAttribute("value");
973
- }
974
- }
975
- /**
976
- * @private
977
- */
978
- get itemText() {
979
- return this.itemChildren.content.reduce(
980
- (acc, node) => acc + (node.textContent || "").trim(),
981
- ""
982
- );
983
- }
984
- renderTooltip() {
985
- if (!this.tooltip) {
986
- return lit.nothing;
987
- }
988
- this.dependencyManager.add("luzmo-tooltip");
989
- this.dependencyManager.add("luzmo-overlay");
990
- Promise.resolve().then(() => require("../tooltip/index.cjs"));
991
- Promise.resolve().then(() => require("../overlay/index.cjs"));
992
- return lit.html`
47
+ `;class x extends Event{constructor(e){super("luzmo-menu-item-added-or-updated",{bubbles:!0,composed:!0}),this.menuCascade=new WeakMap,this.clear(e)}get item(){return this._item}clear(e){this._item=e,this.currentAncestorWithSelects=void 0,e.menuData={cleanupSteps:[],focusRoot:void 0,selectionRoot:void 0,parentMenu:void 0},this.menuCascade=new WeakMap}}class s extends C.LikeAnchor(D.ObserveSlotText(P.ObserveSlotPresence(A.Focusable,'[slot="icon"]'))){constructor(){super(),this.active=!1,this.dependencyManager=new R.DependencyManagerController(this),this.focused=!1,this.selected=!1,this._value="",this.hasSubmenu=!1,this.tooltipPlacement="top",this.noWrap=!1,this.renderAngleIcon=(e=[])=>V(e),this.renderCheckIcon=(e=[])=>W(e),this.renderInfoIcon=(e=[])=>K(e),this.open=!1,this.handleSlottableRequest=e=>{var t;(t=this.submenuElement)==null||t.dispatchEvent(new O.SlottableRequestEvent(e.name,e.data))},this.proxyFocus=()=>{this.focus()},this.handleBeforetoggle=e=>{e.newState==="closed"&&(this.open=!0,this.overlayElement.manuallyKeepOpen(),this.overlayElement.removeEventListener("beforetoggle",this.handleBeforetoggle))},this.recentlyLeftChild=!1,this.willDispatchUpdate=!1,this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},this.addEventListener("click",this.handleClickCapture,{capture:!0}),new M.s(this,{config:{characterData:!0,childList:!0,subtree:!0},callback:e=>{e.every(o=>o.target.slot==="submenu")||this.breakItemChildrenCache()}})}static get styles(){return[l.r(F)]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((e,t)=>e+(t.textContent||"").trim(),"")}renderTooltip(){return this.tooltip?(this.dependencyManager.add("luzmo-tooltip"),this.dependencyManager.add("luzmo-overlay"),Promise.resolve().then(()=>require("../tooltip/index.cjs")),Promise.resolve().then(()=>require("../overlay/index.cjs")),l.x`
993
48
  <div class="menu-item-tooltip-container">
994
49
  <!-- The visible icon that acts as trigger -->
995
50
  <div
@@ -1009,117 +64,38 @@ class LuzmoMenuItem extends likeAnchor.LikeAnchor(
1009
64
  <luzmo-tooltip> ${this.tooltip} </luzmo-tooltip>
1010
65
  </luzmo-overlay>
1011
66
  </div>
1012
- `;
1013
- }
1014
- get focusElement() {
1015
- return this;
1016
- }
1017
- get hasIcon() {
1018
- return this.slotContentIsPresent;
1019
- }
1020
- get itemChildren() {
1021
- if (!this.iconSlot || !this.contentSlot) {
1022
- return {
1023
- icon: [],
1024
- content: []
1025
- };
1026
- }
1027
- if (this._itemChildren) {
1028
- return this._itemChildren;
1029
- }
1030
- const icon = this.iconSlot.assignedElements().map((element) => {
1031
- const newElement = element.cloneNode(true);
1032
- newElement.removeAttribute("slot");
1033
- newElement.classList.toggle("icon");
1034
- return newElement;
1035
- });
1036
- const content = this.contentSlot.assignedNodes().map((node) => node.cloneNode(true));
1037
- this._itemChildren = { icon, content };
1038
- return this._itemChildren;
1039
- }
1040
- click() {
1041
- if (this.disabled) {
1042
- return;
1043
- }
1044
- if (this.shouldProxyClick()) {
1045
- return;
1046
- }
1047
- super.click();
1048
- }
1049
- handleClickCapture(event) {
1050
- if (this.disabled) {
1051
- event.preventDefault();
1052
- event.stopImmediatePropagation();
1053
- event.stopPropagation();
1054
- return false;
1055
- }
1056
- }
1057
- shouldProxyClick() {
1058
- let handled = false;
1059
- if (this.anchorElement) {
1060
- this.anchorElement.click();
1061
- handled = true;
1062
- }
1063
- return handled;
1064
- }
1065
- breakItemChildrenCache() {
1066
- this._itemChildren = void 0;
1067
- this.triggerUpdate();
1068
- }
1069
- renderSubmenu() {
1070
- const slot = lit.html`
67
+ `):l.E}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const e=this.iconSlot.assignedElements().map(o=>{const i=o.cloneNode(!0);return i.removeAttribute("slot"),i.classList.toggle("icon"),i}),t=this.contentSlot.assignedNodes().map(o=>o.cloneNode(!0));return this._itemChildren={icon:e,content:t},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}shouldProxyClick(){let e=!1;return this.anchorElement&&(this.anchorElement.click(),e=!0),e}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}renderSubmenu(){const e=l.x`
1071
68
  <slot
1072
69
  name="submenu"
1073
70
  @slotchange=${this.manageSubmenu}
1074
- @luzmo-menu-item-added-or-updated=${{
1075
- handleEvent: (event) => {
1076
- event.clear(event.item);
1077
- },
1078
- capture: true
1079
- }}
1080
- @focusin=${(event) => event.stopPropagation()}
71
+ @luzmo-menu-item-added-or-updated=${{handleEvent:t=>{t.clear(t.item)},capture:!0}}
72
+ @focusin=${t=>t.stopPropagation()}
1081
73
  ></slot>
1082
- `;
1083
- if (!this.hasSubmenu) {
1084
- return slot;
1085
- }
1086
- this.dependencyManager.add("luzmo-overlay");
1087
- this.dependencyManager.add("luzmo-popover");
1088
- Promise.resolve().then(() => require("../overlay-LViy9VWM.cjs")).then((n) => n.overlay);
1089
- Promise.resolve().then(() => require("../popover-BkgUf0kL.cjs"));
1090
- return lit.html`
74
+ `;return this.hasSubmenu?(this.dependencyManager.add("luzmo-overlay"),this.dependencyManager.add("luzmo-popover"),Promise.resolve().then(()=>require("../overlay-B3ajDLLq.cjs")).then(t=>t.overlay),Promise.resolve().then(()=>require("../popover-fwJeZHMQ.cjs")),l.x`
1091
75
  <luzmo-overlay
1092
76
  .triggerElement=${this}
1093
77
  ?disabled=${!this.hasSubmenu}
1094
- ?open=${this.hasSubmenu && this.open && this.dependencyManager.loaded}
1095
- .placement=${this.isLTR ? "right-start" : "left-start"}
1096
- .offset=${[-10, -5]}
78
+ ?open=${this.hasSubmenu&&this.open&&this.dependencyManager.loaded}
79
+ .placement=${this.isLTR?"right-start":"left-start"}
80
+ .offset=${[-10,-5]}
1097
81
  .type=${"auto"}
1098
- @close=${(event) => event.stopPropagation()}
82
+ @close=${t=>t.stopPropagation()}
1099
83
  @slottable-request=${this.handleSlottableRequest}
1100
84
  >
1101
85
  <luzmo-popover
1102
- @change=${(event) => {
1103
- this.handleSubmenuChange(event);
1104
- this.open = false;
1105
- }}
86
+ @change=${t=>{this.handleSubmenuChange(t),this.open=!1}}
1106
87
  @pointerenter=${this.handleSubmenuPointerenter}
1107
88
  @pointerleave=${this.handleSubmenuPointerleave}
1108
- @luzmo-menu-item-added-or-updated=${(event) => event.stopPropagation()}
89
+ @luzmo-menu-item-added-or-updated=${t=>t.stopPropagation()}
1109
90
  >
1110
- ${slot}
91
+ ${e}
1111
92
  </luzmo-popover>
1112
93
  </luzmo-overlay>
1113
94
  ${this.renderAngleIcon()}
1114
- `;
1115
- }
1116
- render() {
1117
- return lit.html`
1118
- ${this.selected ? lit.html`
1119
- ${this.renderCheckIcon(
1120
- this.hasIcon ? ["checkmark--withAdjacentIcon"] : []
1121
- )}
1122
- ` : lit.nothing}
95
+ `):e}render(){return l.x`
96
+ ${this.selected?l.x`
97
+ ${this.renderCheckIcon(this.hasIcon?["checkmark--withAdjacentIcon"]:[])}
98
+ `:l.E}
1123
99
  <slot name="icon"></slot>
1124
100
  <div id="label">
1125
101
  <slot id="slot"></slot>
@@ -1127,250 +103,6 @@ class LuzmoMenuItem extends likeAnchor.LikeAnchor(
1127
103
  <slot name="description"></slot>
1128
104
  <slot name="value"></slot>
1129
105
  ${this.renderTooltip()}
1130
- ${this.href && this.href.length > 0 ? super.renderAnchor({
1131
- id: "button",
1132
- ariaHidden: true,
1133
- className: "button anchor hidden"
1134
- }) : lit.nothing}
106
+ ${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):l.E}
1135
107
  ${this.renderSubmenu()}
1136
- `;
1137
- }
1138
- manageSubmenu(event) {
1139
- this.submenuElement = event.target.assignedElements({
1140
- flatten: true
1141
- })[0];
1142
- this.hasSubmenu = !!this.submenuElement;
1143
- if (this.hasSubmenu) {
1144
- this.setAttribute("aria-haspopup", "true");
1145
- }
1146
- }
1147
- handlePointerdown(event) {
1148
- if (event.target === this && this.hasSubmenu && this.open) {
1149
- this.addEventListener("focus", this.handleSubmenuFocus, {
1150
- once: true
1151
- });
1152
- this.overlayElement.addEventListener(
1153
- "beforetoggle",
1154
- this.handleBeforetoggle
1155
- );
1156
- }
1157
- }
1158
- firstUpdated(changes) {
1159
- super.firstUpdated(changes);
1160
- this.setAttribute("tabindex", "-1");
1161
- this.addEventListener("pointerdown", this.handlePointerdown);
1162
- this.addEventListener("pointerenter", this.closeOverlaysForRoot);
1163
- if (!this.hasAttribute("id")) {
1164
- this.id = `luzmo-menu-item-${randomId.randomID()}`;
1165
- }
1166
- }
1167
- closeOverlaysForRoot() {
1168
- var _a;
1169
- if (this.open) {
1170
- return;
1171
- }
1172
- (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
1173
- }
1174
- handleSubmenuClick(event) {
1175
- if (event.composedPath().includes(this.overlayElement)) {
1176
- return;
1177
- }
1178
- this.openOverlay();
1179
- }
1180
- handleSubmenuFocus() {
1181
- requestAnimationFrame(() => {
1182
- this.overlayElement.open = this.open;
1183
- });
1184
- }
1185
- handlePointerenter() {
1186
- if (this.leaveTimeout) {
1187
- clearTimeout(this.leaveTimeout);
1188
- delete this.leaveTimeout;
1189
- return;
1190
- }
1191
- this.openOverlay();
1192
- }
1193
- handlePointerleave() {
1194
- if (this.open && !this.recentlyLeftChild) {
1195
- this.leaveTimeout = setTimeout(() => {
1196
- delete this.leaveTimeout;
1197
- this.open = false;
1198
- }, POINTERLEAVE_TIMEOUT);
1199
- }
1200
- }
1201
- /**
1202
- * When there is a `change` event in the submenu for this item
1203
- * then we "click" this item to cascade the selection up the
1204
- * menu tree allowing all submenus between the initial selection
1205
- * and the root of the tree to have their selection changes and
1206
- * be closed.
1207
- */
1208
- handleSubmenuChange(event) {
1209
- var _a;
1210
- event.stopPropagation();
1211
- (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
1212
- }
1213
- handleSubmenuPointerenter() {
1214
- this.recentlyLeftChild = true;
1215
- }
1216
- handleSubmenuPointerleave() {
1217
- requestAnimationFrame(() => {
1218
- this.recentlyLeftChild = false;
1219
- });
1220
- }
1221
- handleSubmenuOpen(event) {
1222
- this.focused = false;
1223
- const parentOverlay = event.composedPath().find(
1224
- (el) => el !== this.overlayElement && el.localName === "luzmo-overlay"
1225
- );
1226
- this.overlayElement.parentOverlayToForceClose = parentOverlay;
1227
- }
1228
- cleanup() {
1229
- this.open = false;
1230
- this.active = false;
1231
- }
1232
- openOverlay() {
1233
- if (!this.hasSubmenu || this.open || this.disabled) {
1234
- return;
1235
- }
1236
- this.open = true;
1237
- this.active = true;
1238
- this.setAttribute("aria-expanded", "true");
1239
- this.addEventListener("luzmo-closed", this.cleanup, {
1240
- once: true
1241
- });
1242
- }
1243
- updateAriaSelected() {
1244
- const role = this.getAttribute("role");
1245
- if (role === "option") {
1246
- this.setAttribute("aria-selected", this.selected ? "true" : "false");
1247
- } else if (role === "menuitemcheckbox" || role === "menuitemradio") {
1248
- this.setAttribute("aria-checked", this.selected ? "true" : "false");
1249
- }
1250
- }
1251
- setRole(role) {
1252
- this.setAttribute("role", role);
1253
- this.updateAriaSelected();
1254
- }
1255
- updated(changes) {
1256
- var _a, _b;
1257
- super.updated(changes);
1258
- if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
1259
- this.setAttribute("aria-label", this.label || "");
1260
- }
1261
- if (changes.has("active") && (this.active || changes.get("active") !== void 0) && this.active) {
1262
- (_a = this.menuData.selectionRoot) == null ? void 0 : _a.closeDescendentOverlays();
1263
- }
1264
- if (this.anchorElement) {
1265
- this.anchorElement.addEventListener("focus", this.proxyFocus);
1266
- this.anchorElement.tabIndex = -1;
1267
- }
1268
- if (changes.has("selected")) {
1269
- this.updateAriaSelected();
1270
- }
1271
- if (changes.has("hasSubmenu") && (this.hasSubmenu || changes.get("hasSubmenu") !== void 0)) {
1272
- if (this.hasSubmenu) {
1273
- this.abortControllerSubmenu = new AbortController();
1274
- const options = { signal: this.abortControllerSubmenu.signal };
1275
- this.addEventListener("click", this.handleSubmenuClick, options);
1276
- this.addEventListener("pointerenter", this.handlePointerenter, options);
1277
- this.addEventListener("pointerleave", this.handlePointerleave, options);
1278
- this.addEventListener("luzmo-opened", this.handleSubmenuOpen, options);
1279
- } else {
1280
- (_b = this.abortControllerSubmenu) == null ? void 0 : _b.abort();
1281
- }
1282
- }
1283
- }
1284
- connectedCallback() {
1285
- super.connectedCallback();
1286
- this.triggerUpdate();
1287
- }
1288
- disconnectedCallback() {
1289
- this.menuData.cleanupSteps.forEach((removal) => removal(this));
1290
- this.menuData = {
1291
- focusRoot: void 0,
1292
- parentMenu: void 0,
1293
- selectionRoot: void 0,
1294
- cleanupSteps: []
1295
- };
1296
- super.disconnectedCallback();
1297
- }
1298
- async triggerUpdate() {
1299
- if (this.willDispatchUpdate) {
1300
- return;
1301
- }
1302
- this.willDispatchUpdate = true;
1303
- await new Promise((ready) => requestAnimationFrame(ready));
1304
- this.dispatchUpdate();
1305
- }
1306
- dispatchUpdate() {
1307
- if (!this.isConnected) {
1308
- return;
1309
- }
1310
- this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
1311
- this.willDispatchUpdate = false;
1312
- }
1313
- }
1314
- __decorateClass([
1315
- decorators_js.property({ type: Boolean, reflect: true })
1316
- ], LuzmoMenuItem.prototype, "active", 2);
1317
- __decorateClass([
1318
- decorators_js.property({ type: Boolean, reflect: true })
1319
- ], LuzmoMenuItem.prototype, "focused", 2);
1320
- __decorateClass([
1321
- decorators_js.property({ type: Boolean, reflect: true })
1322
- ], LuzmoMenuItem.prototype, "selected", 2);
1323
- __decorateClass([
1324
- decorators_js.property({ type: String })
1325
- ], LuzmoMenuItem.prototype, "value", 1);
1326
- __decorateClass([
1327
- decorators_js.property({ type: Boolean, reflect: true, attribute: "has-submenu" })
1328
- ], LuzmoMenuItem.prototype, "hasSubmenu", 2);
1329
- __decorateClass([
1330
- decorators_js.property({ type: String })
1331
- ], LuzmoMenuItem.prototype, "tooltip", 2);
1332
- __decorateClass([
1333
- decorators_js.property({ type: String, attribute: "tooltip-placement" })
1334
- ], LuzmoMenuItem.prototype, "tooltipPlacement", 2);
1335
- __decorateClass([
1336
- decorators_js.query("slot:not([name])")
1337
- ], LuzmoMenuItem.prototype, "contentSlot", 2);
1338
- __decorateClass([
1339
- decorators_js.query('slot[name="icon"]')
1340
- ], LuzmoMenuItem.prototype, "iconSlot", 2);
1341
- __decorateClass([
1342
- decorators_js.property({
1343
- type: Boolean,
1344
- reflect: true,
1345
- attribute: "no-wrap",
1346
- hasChanged() {
1347
- return false;
1348
- }
1349
- })
1350
- ], LuzmoMenuItem.prototype, "noWrap", 2);
1351
- __decorateClass([
1352
- decorators_js.query(".anchor")
1353
- ], LuzmoMenuItem.prototype, "anchorElement", 2);
1354
- __decorateClass([
1355
- decorators_js.query("luzmo-overlay")
1356
- ], LuzmoMenuItem.prototype, "overlayElement", 2);
1357
- __decorateClass([
1358
- decorators_js.property({ type: Boolean, reflect: true })
1359
- ], LuzmoMenuItem.prototype, "open", 2);
1360
- if (!customElements.get("luzmo-menu")) {
1361
- customElements.define("luzmo-menu", LuzmoMenu);
1362
- }
1363
- if (!customElements.get("luzmo-menu-divider")) {
1364
- customElements.define("luzmo-menu-divider", LuzmoMenuDivider);
1365
- }
1366
- if (!customElements.get("luzmo-menu-group")) {
1367
- customElements.define("luzmo-menu-group", LuzmoMenuGroup);
1368
- }
1369
- if (!customElements.get("luzmo-menu-item")) {
1370
- customElements.define("luzmo-menu-item", LuzmoMenuItem);
1371
- }
1372
- exports.LuzmoMenu = LuzmoMenu;
1373
- exports.LuzmoMenuDivider = LuzmoMenuDivider;
1374
- exports.LuzmoMenuGroup = LuzmoMenuGroup;
1375
- exports.LuzmoMenuItem = LuzmoMenuItem;
1376
- exports.MenuItemAddedOrUpdatedEvent = MenuItemAddedOrUpdatedEvent;
108
+ `}manageSubmenu(e){this.submenuElement=e.target.assignedElements({flatten:!0})[0],this.hasSubmenu=!!this.submenuElement,this.hasSubmenu&&this.setAttribute("aria-haspopup","true")}handlePointerdown(e){e.target===this&&this.hasSubmenu&&this.open&&(this.addEventListener("focus",this.handleSubmenuFocus,{once:!0}),this.overlayElement.addEventListener("beforetoggle",this.handleBeforetoggle))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerenter",this.closeOverlaysForRoot),this.hasAttribute("id")||(this.id=`luzmo-menu-item-${k.randomID()}`)}closeOverlaysForRoot(){var e;this.open||(e=this.menuData.parentMenu)==null||e.closeDescendentOverlays()}handleSubmenuClick(e){e.composedPath().includes(this.overlayElement)||this.openOverlay()}handleSubmenuFocus(){requestAnimationFrame(()=>{this.overlayElement.open=this.open})}handlePointerenter(){if(this.leaveTimeout){clearTimeout(this.leaveTimeout),delete this.leaveTimeout;return}this.openOverlay()}handlePointerleave(){this.open&&!this.recentlyLeftChild&&(this.leaveTimeout=setTimeout(()=>{delete this.leaveTimeout,this.open=!1},N))}handleSubmenuChange(e){var t;e.stopPropagation(),(t=this.menuData.selectionRoot)==null||t.selectOrToggleItem(this)}handleSubmenuPointerenter(){this.recentlyLeftChild=!0}handleSubmenuPointerleave(){requestAnimationFrame(()=>{this.recentlyLeftChild=!1})}handleSubmenuOpen(e){this.focused=!1;const t=e.composedPath().find(o=>o!==this.overlayElement&&o.localName==="luzmo-overlay");this.overlayElement.parentOverlayToForceClose=t}cleanup(){this.open=!1,this.active=!1}openOverlay(){!this.hasSubmenu||this.open||this.disabled||(this.open=!0,this.active=!0,this.setAttribute("aria-expanded","true"),this.addEventListener("luzmo-closed",this.cleanup,{once:!0}))}updateAriaSelected(){const e=this.getAttribute("role");e==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):(e==="menuitemcheckbox"||e==="menuitemradio")&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(e){this.setAttribute("role",e),this.updateAriaSelected()}updated(e){var t,o;if(super.updated(e),e.has("label")&&(this.label||e.get("label")!==void 0)&&this.setAttribute("aria-label",this.label||""),e.has("active")&&(this.active||e.get("active")!==void 0)&&this.active&&((t=this.menuData.selectionRoot)==null||t.closeDescendentOverlays()),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),e.has("selected")&&this.updateAriaSelected(),e.has("hasSubmenu")&&(this.hasSubmenu||e.get("hasSubmenu")!==void 0))if(this.hasSubmenu){this.abortControllerSubmenu=new AbortController;const i={signal:this.abortControllerSubmenu.signal};this.addEventListener("click",this.handleSubmenuClick,i),this.addEventListener("pointerenter",this.handlePointerenter,i),this.addEventListener("pointerleave",this.handlePointerleave,i),this.addEventListener("luzmo-opened",this.handleSubmenuOpen,i)}else(o=this.abortControllerSubmenu)==null||o.abort()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}disconnectedCallback(){this.menuData.cleanupSteps.forEach(e=>e(this)),this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},super.disconnectedCallback()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(e=>requestAnimationFrame(e)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.dispatchEvent(new x(this)),this.willDispatchUpdate=!1)}}c([l.n({type:Boolean,reflect:!0})],s.prototype,"active",2);c([l.n({type:Boolean,reflect:!0})],s.prototype,"focused",2);c([l.n({type:Boolean,reflect:!0})],s.prototype,"selected",2);c([l.n({type:String})],s.prototype,"value",1);c([l.n({type:Boolean,reflect:!0,attribute:"has-submenu"})],s.prototype,"hasSubmenu",2);c([l.n({type:String})],s.prototype,"tooltip",2);c([l.n({type:String,attribute:"tooltip-placement"})],s.prototype,"tooltipPlacement",2);c([f.e("slot:not([name])")],s.prototype,"contentSlot",2);c([f.e('slot[name="icon"]')],s.prototype,"iconSlot",2);c([l.n({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],s.prototype,"noWrap",2);c([f.e(".anchor")],s.prototype,"anchorElement",2);c([f.e("luzmo-overlay")],s.prototype,"overlayElement",2);c([l.n({type:Boolean,reflect:!0})],s.prototype,"open",2);customElements.get("luzmo-menu")||customElements.define("luzmo-menu",u);customElements.get("luzmo-menu-divider")||customElements.define("luzmo-menu-divider",I);customElements.get("luzmo-menu-group")||customElements.define("luzmo-menu-group",g);customElements.get("luzmo-menu-item")||customElements.define("luzmo-menu-item",s);exports.LuzmoMenu=u;exports.LuzmoMenuDivider=I;exports.LuzmoMenuGroup=g;exports.LuzmoMenuItem=s;exports.MenuItemAddedOrUpdatedEvent=x;