@luzmo/lucero 0.0.16 → 0.0.17

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 (119) 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 +1 -1
  6. package/components/accordion/index.js +2 -2
  7. package/components/action-bar/index.cjs +1 -1
  8. package/components/action-bar/index.js +2 -2
  9. package/components/action-button/index.cjs +1 -1
  10. package/components/action-button/index.js +2 -2
  11. package/components/action-group/index.js +1 -1
  12. package/components/action-menu/index.cjs +1 -1
  13. package/components/action-menu/index.js +3 -3
  14. package/components/avatar/index.js +1 -1
  15. package/components/button/index.cjs +1 -1
  16. package/components/button/index.js +3 -3
  17. package/components/button-group/index.js +1 -1
  18. package/components/calendar/calendar.d.ts +218 -0
  19. package/components/calendar/index.cjs +18 -0
  20. package/components/calendar/index.d.ts +7 -0
  21. package/components/calendar/index.js +28 -0
  22. package/components/checkbox/index.cjs +1 -1
  23. package/components/checkbox/index.js +2 -2
  24. package/components/class-map-Buyb1CLm.cjs +22 -0
  25. package/components/class-map-CJko4aXp.js +51 -0
  26. package/components/{close-button-DOA-6eL0.cjs → close-button-BQJ2wHkM.cjs} +1 -1
  27. package/components/{close-button-DU58NTKR.js → close-button-DN2cjFRq.js} +1 -1
  28. package/components/color-area/index.js +1 -1
  29. package/components/color-field/index.cjs +1 -1
  30. package/components/color-field/index.js +2 -2
  31. package/components/color-handle/index.js +1 -1
  32. package/components/color-loupe/index.js +1 -1
  33. package/components/color-menu/index.js +1 -1
  34. package/components/color-picker/index.js +1 -1
  35. package/components/color-slider/index.js +1 -1
  36. package/components/date-time-picker/date-time-picker.d.ts +269 -0
  37. package/components/date-time-picker/helpers.d.ts +10 -0
  38. package/components/date-time-picker/index.cjs +105 -0
  39. package/components/date-time-picker/index.d.ts +7 -0
  40. package/components/date-time-picker/index.js +1126 -0
  41. package/components/date-time-picker/segments/date/day-segment.d.ts +9 -0
  42. package/components/date-time-picker/segments/date/month-segment.d.ts +9 -0
  43. package/components/date-time-picker/segments/date/year-segment.d.ts +12 -0
  44. package/components/date-time-picker/segments/date-time-segments.d.ts +35 -0
  45. package/components/date-time-picker/segments/editable-segment.d.ts +21 -0
  46. package/components/date-time-picker/segments/literal-segment.d.ts +6 -0
  47. package/components/date-time-picker/segments/modifiers/clear-modifier.d.ts +5 -0
  48. package/components/date-time-picker/segments/modifiers/decrement-modifier.d.ts +5 -0
  49. package/components/date-time-picker/segments/modifiers/increment-modifier.d.ts +5 -0
  50. package/components/date-time-picker/segments/modifiers/input-modifier.d.ts +13 -0
  51. package/components/date-time-picker/segments/modifiers/segments-modifier.d.ts +18 -0
  52. package/components/date-time-picker/segments/segments-factory.d.ts +16 -0
  53. package/components/date-time-picker/segments/segments-formatter.d.ts +17 -0
  54. package/components/date-time-picker/segments/time/day-period-segment.d.ts +18 -0
  55. package/components/date-time-picker/segments/time/hour-segment.d.ts +19 -0
  56. package/components/date-time-picker/segments/time/millisecond-segment.d.ts +7 -0
  57. package/components/date-time-picker/segments/time/minute-segment.d.ts +7 -0
  58. package/components/date-time-picker/segments/time/second-segment.d.ts +7 -0
  59. package/components/date-time-picker/types.d.ts +41 -0
  60. package/components/divider/index.js +1 -1
  61. package/components/field-group/index.js +1 -1
  62. package/components/field-label/index.js +1 -1
  63. package/components/icon/index.cjs +1 -1
  64. package/components/icon/index.js +2 -2
  65. package/components/index-BziWAe4P.cjs +113 -0
  66. package/components/index-vWdA-LXe.js +1490 -0
  67. package/components/index.cjs +1 -1
  68. package/components/index.js +135 -129
  69. package/components/infield-button/index.cjs +1 -1
  70. package/components/infield-button/index.js +2 -2
  71. package/components/label/index.js +1 -1
  72. package/components/menu/index.cjs +66 -1
  73. package/components/menu/index.js +874 -10
  74. package/components/multi-language-field/index.js +1 -1
  75. package/components/number-field/index.cjs +6 -6
  76. package/components/number-field/index.js +128 -394
  77. package/components/observe-slot-presence-CmVi0zTc.js +68 -0
  78. package/components/observe-slot-presence-bc9chhsi.cjs +18 -0
  79. package/components/overlay/index.js +1 -1
  80. package/components/picker/index.cjs +1 -1
  81. package/components/picker/index.js +3 -3
  82. package/components/{picker-C9HmjRgR.js → picker-BxEG2NdV.js} +110 -138
  83. package/components/picker-DROquiIZ.cjs +123 -0
  84. package/components/picker-button/index.cjs +37 -0
  85. package/components/picker-button/index.d.ts +7 -0
  86. package/components/picker-button/index.js +87 -0
  87. package/components/picker-button/picker-button.d.ts +21 -0
  88. package/components/popover/index.js +1 -1
  89. package/components/progress-circle/index.js +1 -1
  90. package/components/radio/index.cjs +1 -1
  91. package/components/radio/index.js +2 -2
  92. package/components/search/index.cjs +1 -1
  93. package/components/search/index.js +3 -3
  94. package/components/slider/index.js +1 -1
  95. package/components/swatch/index.cjs +1 -1
  96. package/components/swatch/index.js +2 -2
  97. package/components/switch/index.cjs +1 -1
  98. package/components/switch/index.js +2 -2
  99. package/components/tags/index.cjs +1 -1
  100. package/components/tags/index.js +2 -2
  101. package/components/text-field/index.cjs +1 -1
  102. package/components/text-field/index.js +3 -3
  103. package/components/text-field-BTnBJoP9.js +314 -0
  104. package/components/text-field-mxJCYues.cjs +85 -0
  105. package/components/text-field.module-ColtFhf_.js +21 -0
  106. package/components/text-field.module-p_VF2tC_.cjs +18 -0
  107. package/components/toast/index.cjs +1 -1
  108. package/components/toast/index.js +3 -3
  109. package/components/tooltip/index.js +1 -1
  110. package/components/unit-input/index.cjs +1 -1
  111. package/components/unit-input/index.js +2 -2
  112. package/custom-elements.json +1 -1
  113. package/index.d.ts +3 -0
  114. package/package.json +16 -1
  115. package/components/index-4SZZSkew.cjs +0 -83
  116. package/components/index-AM-58E5r.js +0 -936
  117. package/components/picker-B05XA8I1.cjs +0 -127
  118. package/components/text-field-5_ev9way.cjs +0 -85
  119. package/components/text-field-CvKSS59x.js +0 -313
@@ -1,936 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { a as x, r as p, x as v, n as r, E as w } from "./base-CawdqE7p.js";
19
- import { e as b } from "./query-D_KR_GUc.js";
20
- import { S as y } from "./sized-mixin-BxMraZLS.js";
21
- import { s as A } from "./divider.module-DwOuLGU3.js";
22
- import { r as P } from "./state-CYxk12SV.js";
23
- import { n as O } from "./query-assigned-nodes-C76XVPWY.js";
24
- import { r as S } from "./random-id-ByCz1xaq.js";
25
- import { s as E } from "./mutation-controller-DH7YOCyj.js";
26
- import { F as D } from "./focusable-cj2QhwDT.js";
27
- import { L as R } from "./like-anchor-QBlvwFfT.js";
28
- import { O as L } from "./observe-slot-text-ggb4kKgY.js";
29
- import { D as U } from "./dependency-manger-CEXvGQUV.js";
30
- import { luzmoIcon as M, luzmoAngleRight as T, luzmoCheck as _ } from "@luzmo/icons";
31
- import { S as $ } from "./slottable-request-event-DggLA4Rx.js";
32
- const g = Symbol("slotContentIsPresent");
33
- function B(a, e) {
34
- var t, o;
35
- const i = Array.isArray(e) ? e : [e];
36
- class n extends (o = a, t = g, o) {
37
- constructor(...c) {
38
- super(c), this[t] = /* @__PURE__ */ new Map(), this.managePresenceObservedSlot = () => {
39
- let z = !1;
40
- i.forEach((d) => {
41
- const k = !!this.querySelector(`:scope > ${d}`), f = this[g].get(d) || !1;
42
- z = z || f !== k, this[g].set(
43
- d,
44
- !!this.querySelector(`:scope > ${d}`)
45
- );
46
- }), z && this.updateComplete.then(() => {
47
- this.requestUpdate();
48
- });
49
- }, new E(this, {
50
- config: {
51
- childList: !0,
52
- subtree: !0
53
- },
54
- callback: () => {
55
- this.managePresenceObservedSlot();
56
- }
57
- }), this.managePresenceObservedSlot();
58
- }
59
- /**
60
- * @private
61
- */
62
- get slotContentIsPresent() {
63
- if (i.length === 1)
64
- return this[g].get(i[0]) || !1;
65
- throw new Error(
66
- "Multiple selectors provided to `ObserveSlotPresence` use `getSlotContentPresence(selector: string)` instead."
67
- );
68
- }
69
- getSlotContentPresence(c) {
70
- if (this[g].has(c))
71
- return this[g].get(c) || !1;
72
- throw new Error(
73
- `The provided selector \`${c}\` is not being observed.`
74
- );
75
- }
76
- }
77
- return n;
78
- }
79
- const F = ":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-color-disabled);--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}";
80
- var j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, h = (a, e, t, o) => {
81
- for (var i = o > 1 ? void 0 : o ? H(e, t) : e, n = a.length - 1, l; n >= 0; n--)
82
- (l = a[n]) && (i = (o ? l(e, t, i) : l(i)) || i);
83
- return o && i && j(e, t, i), i;
84
- };
85
- function q(a, e) {
86
- return !!e && (a === e || a.contains(e));
87
- }
88
- class m extends y(x, {
89
- noDefaultSize: !0
90
- }) {
91
- constructor() {
92
- 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 = /* @__PURE__ */ new Set(), this.selectedItemsMap = /* @__PURE__ */ new Map(), this._hasUpdatedSelectedItemIndex = !1, this._willUpdateItems = !1, this.pointerUpTarget = null, this.descendentOverlays = /* @__PURE__ */ new Map(), this.handleSubmenuClosed = (e) => {
93
- e.stopPropagation(), e.composedPath()[0].dispatchEvent(
94
- new Event("luzmo-menu-submenu-closed", {
95
- bubbles: !0,
96
- composed: !0
97
- })
98
- );
99
- }, this.handleSubmenuOpened = (e) => {
100
- e.stopPropagation(), e.composedPath()[0].dispatchEvent(
101
- new Event("luzmo-menu-submenu-opened", {
102
- bubbles: !0,
103
- composed: !0
104
- })
105
- );
106
- const o = this.childItems[this.focusedItemIndex];
107
- o && (o.focused = !1);
108
- const i = e.composedPath().find((l) => this.childItemSet.has(l));
109
- if (!i)
110
- return;
111
- const n = this.childItems.indexOf(
112
- i
113
- );
114
- this.focusedItemIndex = n, this.focusInItemIndex = n;
115
- }, this.resolveCacheUpdated = () => {
116
- }, this.addEventListener(
117
- "luzmo-menu-item-added-or-updated",
118
- this.onSelectableItemAddedOrUpdated
119
- ), this.addEventListener(
120
- "luzmo-menu-item-added-or-updated",
121
- this.onFocusableItemAddedOrUpdated,
122
- {
123
- capture: !0
124
- }
125
- ), 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);
126
- }
127
- static get styles() {
128
- return [p(F)];
129
- }
130
- get isSubmenu() {
131
- return this.slot === "submenu";
132
- }
133
- get selected() {
134
- return this._selected;
135
- }
136
- set selected(e) {
137
- if (e === this.selected)
138
- return;
139
- const t = this.selected;
140
- this._selected = e, this.selectedItems = [], this.selectedItemsMap.clear(), this.childItems.forEach((o) => {
141
- this === o.menuData.selectionRoot && (o.selected = this.selected.includes(o.value), o.selected && (this.selectedItems.push(o), this.selectedItemsMap.set(o, !0)));
142
- }), this.requestUpdate("selected", t);
143
- }
144
- get childItems() {
145
- return this.cachedChildItems || (this.cachedChildItems = this.updateCachedMenuItems()), this.cachedChildItems;
146
- }
147
- /**
148
- * Hide this getter from web-component-analyzer until
149
- * https://github.com/runem/web-component-analyzer/issues/131
150
- * has been addressed.
151
- *
152
- * @private
153
- */
154
- get childRole() {
155
- if (this.resolvedRole === "listbox")
156
- return "option";
157
- switch (this.resolvedSelects) {
158
- case "single":
159
- return "menuitemradio";
160
- case "multiple":
161
- return "menuitemcheckbox";
162
- default:
163
- return "menuitem";
164
- }
165
- }
166
- get ownRole() {
167
- return "menu";
168
- }
169
- focus({ preventScroll: e } = {}) {
170
- if (this.childItems.every((o) => o.disabled))
171
- return;
172
- if (this.childItems.some((o) => o.menuData.focusRoot !== this)) {
173
- super.focus({ preventScroll: e });
174
- return;
175
- }
176
- this.focusMenuItemByOffset(0), super.focus({ preventScroll: e });
177
- const t = this.selectedItems[0];
178
- t && !e && t.scrollIntoView({ block: "nearest" });
179
- }
180
- handleFocusin(e) {
181
- var i;
182
- if (this.childItems.some((n) => n.menuData.focusRoot !== this))
183
- return;
184
- const t = this.getRootNode().activeElement, o = ((i = this.childItems[this.focusedItemIndex]) == null ? void 0 : i.menuData.selectionRoot) || this;
185
- if ((t !== o || e.target !== this) && (o.focus({ preventScroll: !0 }), t && this.focusedItemIndex === 0)) {
186
- const n = this.childItems.indexOf(t);
187
- this.focusMenuItemByOffset(Math.max(n, 0));
188
- }
189
- this.startListeningToKeyboard();
190
- }
191
- startListeningToKeyboard() {
192
- this.addEventListener("keydown", this.handleKeydown);
193
- }
194
- handleBlur(e) {
195
- q(this, e.relatedTarget) || (this.stopListeningToKeyboard(), this.childItems.forEach((t) => t.focused = !1), this.removeAttribute("aria-activedescendant"));
196
- }
197
- stopListeningToKeyboard() {
198
- this.removeEventListener("keydown", this.handleKeydown);
199
- }
200
- selectOrToggleItem(e) {
201
- const t = this.resolvedSelects, o = new Map(this.selectedItemsMap), i = [...this.selected], n = [...this.selectedItems], l = this.value, c = this.childItems[this.focusedItemIndex];
202
- if (c && (c.focused = !1, c.active = !1), this.focusedItemIndex = this.childItems.indexOf(e), this.forwardFocusVisibleToItem(e), t === "multiple") {
203
- this.selectedItemsMap.has(e) ? this.selectedItemsMap.delete(e) : this.selectedItemsMap.set(e, !0);
204
- const d = [], k = [];
205
- this.childItemSet.forEach((f) => {
206
- f.menuData.selectionRoot === this && this.selectedItemsMap.has(f) && (d.push(f.value), k.push(f));
207
- }), this._selected = d, this.selectedItems = k, this.value = this.selected.join(this.valueSeparator);
208
- } else
209
- this.selectedItemsMap.clear(), this.selectedItemsMap.set(e, !0), this.value = e.value, this._selected = [e.value], this.selectedItems = [e];
210
- if (!this.dispatchEvent(
211
- new Event("change", {
212
- cancelable: !0,
213
- bubbles: !0,
214
- composed: !0
215
- })
216
- )) {
217
- this._selected = i, this.selectedItems = n, this.selectedItemsMap = o, this.value = l;
218
- return;
219
- }
220
- if (t === "single") {
221
- for (const d of o.keys())
222
- d !== e && (d.selected = !1);
223
- e.selected = !0;
224
- } else t === "multiple" && (e.selected = !e.selected);
225
- }
226
- handleKeydown(e) {
227
- if (e.defaultPrevented)
228
- return;
229
- const t = this.childItems[this.focusedItemIndex];
230
- t && (t.focused = !0);
231
- const { key: o } = e;
232
- if (e.shiftKey && e.target !== this && this.hasAttribute("tabindex")) {
233
- this.removeAttribute("tabindex");
234
- const i = (n) => {
235
- !n.shiftKey && !this.hasAttribute("tabindex") && (this.tabIndex = 0, document.removeEventListener("keyup", i), this.removeEventListener("focusout", i));
236
- };
237
- document.addEventListener("keyup", i), this.addEventListener("focusout", i);
238
- }
239
- if (o === "Tab") {
240
- this.prepareToCleanUp();
241
- return;
242
- }
243
- if (o === " " && (t != null && t.hasSubmenu)) {
244
- t.openOverlay();
245
- return;
246
- }
247
- if (o === " " || o === "Enter") {
248
- const i = this.childItems[this.focusedItemIndex];
249
- i && i.menuData.selectionRoot === e.target && (e.preventDefault(), i.click());
250
- return;
251
- }
252
- if (o === "ArrowDown" || o === "ArrowUp") {
253
- const i = this.childItems[this.focusedItemIndex];
254
- i && i.menuData.selectionRoot === e.target && this.navigateWithinMenu(e);
255
- return;
256
- }
257
- this.navigateBetweenRelatedMenus(e);
258
- }
259
- focusMenuItemByOffset(e) {
260
- const t = e || 1, o = this.childItems[this.focusedItemIndex];
261
- o && (o.focused = !1, o.active = o.open), this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + e) % this.childItems.length;
262
- let i = this.childItems[this.focusedItemIndex], n = this.childItems.length;
263
- for (; i != null && i.disabled && n; )
264
- n -= 1, this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + t) % this.childItems.length, i = this.childItems[this.focusedItemIndex];
265
- return i != null && i.disabled || this.forwardFocusVisibleToItem(i), i;
266
- }
267
- updateSelectedItemIndex() {
268
- let e = 0;
269
- const t = /* @__PURE__ */ new Map(), o = [], i = [];
270
- let n = this.childItems.length;
271
- for (; n; ) {
272
- n -= 1;
273
- const l = this.childItems[n];
274
- l.menuData.selectionRoot === this && ((l.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(l.value)) && (e = n, t.set(l, !0), o.unshift(l.value), i.unshift(l)), n !== e && (l.focused = !1));
275
- }
276
- i.map((l, c) => {
277
- c > 0 && (l.focused = !1);
278
- }), this.selectedItemsMap = t, this._selected = o, this.selectedItems = i, this.value = this.selected.join(this.valueSeparator), this.focusedItemIndex = e, this.focusInItemIndex = e;
279
- }
280
- closeDescendentOverlays() {
281
- this.descendentOverlays.forEach((e) => {
282
- e.open = !1;
283
- }), this.descendentOverlays = /* @__PURE__ */ new Map();
284
- }
285
- render() {
286
- return this.renderMenuItemSlot();
287
- }
288
- connectedCallback() {
289
- super.connectedCallback(), !this.hasAttribute("role") && !this.ignore && this.setAttribute("role", this.ownRole), this.updateComplete.then(() => this.updateItemFocus());
290
- }
291
- disconnectedCallback() {
292
- this.cachedChildItems = void 0, this.selectedItems = [], this.selectedItemsMap.clear(), this.childItemSet.clear(), this.descendentOverlays = /* @__PURE__ */ new Map(), super.disconnectedCallback();
293
- }
294
- handleDescendentOverlayOpened(e) {
295
- const t = e.composedPath()[0];
296
- t.overlayElement && this.descendentOverlays.set(t.overlayElement, t.overlayElement);
297
- }
298
- handleDescendentOverlayClosed(e) {
299
- const t = e.composedPath()[0];
300
- t.overlayElement && this.descendentOverlays.delete(t.overlayElement);
301
- }
302
- navigateWithinMenu(e) {
303
- const { key: t } = e, o = this.childItems[this.focusedItemIndex], i = t === "ArrowDown" ? 1 : -1, n = this.focusMenuItemByOffset(i);
304
- n !== o && (e.preventDefault(), e.stopPropagation(), n.scrollIntoView({ block: "nearest" }));
305
- }
306
- navigateBetweenRelatedMenus(e) {
307
- const { key: t } = e;
308
- e.stopPropagation();
309
- const o = this.isLTR && t === "ArrowRight" || !this.isLTR && t === "ArrowLeft", i = this.isLTR && t === "ArrowLeft" || !this.isLTR && t === "ArrowRight";
310
- if (o) {
311
- const n = this.childItems[this.focusedItemIndex];
312
- n != null && n.hasSubmenu && n.openOverlay();
313
- } else i && this.isSubmenu && (this.dispatchEvent(new Event("close", { bubbles: !0 })), this.updateSelectedItemIndex());
314
- }
315
- renderMenuItemSlot() {
316
- return v`
317
- <slot
318
- @luzmo-menu-submenu-opened=${this.handleDescendentOverlayOpened}
319
- @luzmo-menu-submenu-closed=${this.handleDescendentOverlayClosed}
320
- @slotchange=${this.handleSlotchange}
321
- ></slot>
322
- `;
323
- }
324
- firstUpdated(e) {
325
- if (super.firstUpdated(e), !this.hasAttribute("tabindex") && !this.ignore) {
326
- const o = this.getAttribute("role");
327
- this.tabIndex = o === "group" ? -1 : 0;
328
- }
329
- const t = [
330
- new Promise((o) => requestAnimationFrame(() => o(!0)))
331
- ];
332
- [...this.children].forEach((o) => {
333
- o.localName === "luzmo-menu-item" && t.push(o.updateComplete);
334
- }), this.childItemsUpdated = Promise.all(t);
335
- }
336
- updated(e) {
337
- 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"));
338
- }
339
- selectsChanged() {
340
- const e = [
341
- new Promise((t) => requestAnimationFrame(() => t(!0)))
342
- ];
343
- this.childItemSet.forEach((t) => {
344
- e.push(t.triggerUpdate());
345
- }), this.childItemsUpdated = Promise.all(e);
346
- }
347
- async getUpdateComplete() {
348
- const e = await super.getUpdateComplete();
349
- return await this.childItemsUpdated, await this.cacheUpdated, e;
350
- }
351
- updateCachedMenuItems() {
352
- if (this.cachedChildItems = [], !this.menuSlot)
353
- return [];
354
- const e = this.menuSlot.assignedElements({
355
- flatten: !0
356
- });
357
- for (const [t, o] of e.entries()) {
358
- if (this.childItemSet.has(o)) {
359
- this.cachedChildItems.push(o);
360
- continue;
361
- }
362
- const n = o.localName === "slot" ? o.assignedElements({
363
- flatten: !0
364
- }) : [...o.querySelectorAll(":scope > *")];
365
- e.splice(
366
- t,
367
- 1,
368
- o,
369
- ...n
370
- );
371
- }
372
- return this.cachedChildItems;
373
- }
374
- /**
375
- * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
376
- * this event to announce its presence in the DOM. During the CAPTURE phase the first
377
- * Menu based element that the event encounters will manage the focus state of the
378
- * dispatching `<luzmo-menu-item>` element.
379
- * @param event
380
- */
381
- onFocusableItemAddedOrUpdated(e) {
382
- e.menuCascade.set(this, {
383
- hadFocusRoot: !!e.item.menuData.focusRoot,
384
- ancestorWithSelects: e.currentAncestorWithSelects
385
- }), this.selects && (e.currentAncestorWithSelects = this), e.item.menuData.focusRoot = e.item.menuData.focusRoot || this;
386
- }
387
- /**
388
- * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
389
- * this event to announce its presence in the DOM. During the BUBBLE phase the first
390
- * Menu based element that the event encounters that does not inherit selection will
391
- * manage the selection state of the dispatching `<luzmo-menu-item>` element.
392
- * @param event
393
- */
394
- onSelectableItemAddedOrUpdated(e) {
395
- var i, n;
396
- const t = e.menuCascade.get(this);
397
- if (!t)
398
- return;
399
- if (e.item.menuData.parentMenu = e.item.menuData.parentMenu || this, t.hadFocusRoot && !this.ignore && (this.tabIndex = -1), this.addChildItem(e.item), this.selects === "inherit") {
400
- this.resolvedSelects = "inherit";
401
- const l = (i = e.currentAncestorWithSelects) == null ? void 0 : i.ignore;
402
- this.resolvedRole = l ? "none" : ((n = e.currentAncestorWithSelects) == null ? void 0 : n.getAttribute("role")) || this.getAttribute("role") || void 0;
403
- } 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");
404
- const o = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
405
- e.item.menuData.cleanupSteps.push(
406
- (l) => this.removeChildItem(l)
407
- ), (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)));
408
- }
409
- addChildItem(e) {
410
- this.childItemSet.add(e), this.handleItemsChanged();
411
- }
412
- async removeChildItem(e) {
413
- this.childItemSet.delete(e), this.cachedChildItems = void 0, e.focused && (this.handleItemsChanged(), await this.updateComplete, this.focus());
414
- }
415
- handleClick(e) {
416
- if (this.pointerUpTarget === e.target) {
417
- this.pointerUpTarget = null;
418
- return;
419
- }
420
- this.handlePointerBasedSelection(e);
421
- }
422
- handlePointerup(e) {
423
- this.pointerUpTarget = e.target, this.handlePointerBasedSelection(e);
424
- }
425
- handlePointerBasedSelection(e) {
426
- var i, n;
427
- if (e instanceof MouseEvent && e.button !== 0)
428
- return;
429
- const o = e.composedPath().find((l) => l instanceof Element ? l.getAttribute("role") === this.childRole : !1);
430
- if (e.defaultPrevented) {
431
- const l = this.childItems.indexOf(o);
432
- ((i = o == null ? void 0 : o.menuData) == null ? void 0 : i.focusRoot) === this && l !== -1 && (this.focusedItemIndex = l);
433
- return;
434
- }
435
- if (o != null && o.href && o.href.length > 0) {
436
- this.dispatchEvent(
437
- new Event("change", {
438
- bubbles: !0,
439
- composed: !0
440
- })
441
- );
442
- return;
443
- } else if (((n = o == null ? void 0 : o.menuData) == null ? void 0 : n.selectionRoot) === this && this.childItems.length > 0) {
444
- if (e.preventDefault(), o.hasSubmenu || o.open)
445
- return;
446
- this.selectOrToggleItem(o);
447
- } else
448
- return;
449
- this.prepareToCleanUp();
450
- }
451
- prepareToCleanUp() {
452
- document.addEventListener(
453
- "focusout",
454
- () => {
455
- requestAnimationFrame(() => {
456
- const e = this.childItems[this.focusedItemIndex];
457
- e && (e.focused = !1, this.updateSelectedItemIndex());
458
- });
459
- },
460
- { once: !0 }
461
- );
462
- }
463
- handleItemsChanged() {
464
- this.cachedChildItems = void 0, this._willUpdateItems || (this._willUpdateItems = !0, this.cacheUpdated = this.updateCache());
465
- }
466
- async updateCache() {
467
- await (this.hasUpdated ? new Promise((e) => requestAnimationFrame(() => e(!0))) : Promise.all([
468
- new Promise((e) => requestAnimationFrame(() => e(!0))),
469
- this.updateComplete
470
- ])), this.cachedChildItems === void 0 && (this.updateSelectedItemIndex(), this.updateItemFocus()), this._willUpdateItems = !1;
471
- }
472
- updateItemFocus() {
473
- if (this.childItems.length === 0)
474
- return;
475
- const e = this.childItems[this.focusInItemIndex];
476
- this.getRootNode().activeElement === e.menuData.focusRoot && this.forwardFocusVisibleToItem(e);
477
- }
478
- forwardFocusVisibleToItem(e) {
479
- if (!e || e.menuData.focusRoot !== this)
480
- return;
481
- this.closeDescendentOverlays();
482
- const t = this.hasVisibleFocusInTree() || !!this.childItems.some((o) => o.hasVisibleFocusInTree());
483
- e.focused = t, this.setAttribute("aria-activedescendant", e.id), e.menuData.selectionRoot && e.menuData.selectionRoot !== this && e.menuData.selectionRoot.focus();
484
- }
485
- handleSlotchange({
486
- target: e
487
- }) {
488
- const t = e.assignedElements({
489
- flatten: !0
490
- });
491
- this.childItems.length !== t.length && t.forEach((o) => {
492
- o.triggerUpdate !== void 0 ? o.triggerUpdate() : o.childItems !== void 0 && o.childItems.forEach((i) => {
493
- i.triggerUpdate();
494
- });
495
- });
496
- }
497
- }
498
- h([
499
- r({ type: String, reflect: !0 })
500
- ], m.prototype, "label", 2);
501
- h([
502
- r({ type: Boolean, reflect: !0 })
503
- ], m.prototype, "ignore", 2);
504
- h([
505
- r({ type: String, reflect: !0 })
506
- ], m.prototype, "variant", 2);
507
- h([
508
- r({ type: String, reflect: !0 })
509
- ], m.prototype, "selects", 2);
510
- h([
511
- r({ type: String })
512
- ], m.prototype, "value", 2);
513
- h([
514
- r({ type: String, attribute: "value-separator" })
515
- ], m.prototype, "valueSeparator", 2);
516
- h([
517
- r({ attribute: !1 })
518
- ], m.prototype, "selected", 1);
519
- h([
520
- r({ attribute: !1 })
521
- ], m.prototype, "selectedItems", 2);
522
- h([
523
- b("slot:not([name])")
524
- ], m.prototype, "menuSlot", 2);
525
- const V = ":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-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 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}";
526
- class W extends y(x, {
527
- validSizes: ["s", "m", "l"]
528
- }) {
529
- static get styles() {
530
- return [p(A), p(V)];
531
- }
532
- firstUpdated(e) {
533
- super.firstUpdated(e), this.setAttribute("role", "separator");
534
- }
535
- }
536
- const N = ".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-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 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}";
537
- var K = Object.defineProperty, C = (a, e, t, o) => {
538
- for (var i = void 0, n = a.length - 1, l; n >= 0; n--)
539
- (l = a[n]) && (i = l(e, t, i) || i);
540
- return i && K(e, t, i), i;
541
- };
542
- class I extends m {
543
- constructor() {
544
- super(...arguments), this.headerId = "";
545
- }
546
- static get styles() {
547
- return [...super.styles, p(N)];
548
- }
549
- render() {
550
- return v`
551
- <span class="header" ?hidden=${!this.headerElement}>
552
- <slot name="header" @slotchange=${this.updateLabel}></slot>
553
- </span>
554
- <luzmo-menu
555
- size=${this.size}
556
- .variant=${this.variant}
557
- .selects=${this.selects}
558
- ignore
559
- >${this.renderMenuItemSlot()}</luzmo-menu
560
- >
561
- `;
562
- }
563
- get ownRole() {
564
- switch (this.selects) {
565
- case "multiple":
566
- case "single":
567
- case "inherit":
568
- return "group";
569
- default:
570
- return "menu";
571
- }
572
- }
573
- updateLabel() {
574
- const e = this.headerElements.length > 0 ? this.headerElements[0] : void 0;
575
- if (e !== this.headerElement)
576
- if (this.headerElement && this.headerElement.id === this.headerId && this.headerElement.removeAttribute("id"), e) {
577
- this.headerId = this.headerId || `luzmo-menu-group-label-${S()}`;
578
- const t = e.id || this.headerId;
579
- e.id || (e.id = t), this.setAttribute("aria-labelledby", t);
580
- } else
581
- this.removeAttribute("aria-labelledby");
582
- this.headerElement = e;
583
- }
584
- }
585
- C([
586
- O({
587
- slot: "header",
588
- flatten: !0
589
- })
590
- ], I.prototype, "headerElements");
591
- C([
592
- P()
593
- ], I.prototype, "headerElement");
594
- const G = '.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-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 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-size, var(--menu-item-icon-height));font-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));--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{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{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]) ::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}:host([selected]) #label{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{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{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) ::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-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 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}';
595
- var J = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, u = (a, e, t, o) => {
596
- for (var i = o > 1 ? void 0 : o ? Q(e, t) : e, n = a.length - 1, l; n >= 0; n--)
597
- (l = a[n]) && (i = (o ? l(e, t, i) : l(i)) || i);
598
- return o && i && J(e, t, i), i;
599
- };
600
- const X = 100, Y = (a) => v`
601
- <span class="icon-container icon checkmark ${a.join(" ")}">
602
- ${M(_)}
603
- </span>
604
- `, Z = (a) => v`
605
- <span class="icon-container icon angle ${a.join(" ")}">
606
- ${M(T, { className: "indicator" })}
607
- </span>
608
- `;
609
- class ee extends Event {
610
- constructor(e) {
611
- super("luzmo-menu-item-added-or-updated", {
612
- bubbles: !0,
613
- composed: !0
614
- }), this.menuCascade = /* @__PURE__ */ new WeakMap(), this.clear(e);
615
- }
616
- get item() {
617
- return this._item;
618
- }
619
- clear(e) {
620
- this._item = e, this.currentAncestorWithSelects = void 0, e.menuData = {
621
- cleanupSteps: [],
622
- focusRoot: void 0,
623
- selectionRoot: void 0,
624
- parentMenu: void 0
625
- }, this.menuCascade = /* @__PURE__ */ new WeakMap();
626
- }
627
- }
628
- class s extends R(
629
- L(B(D, '[slot="icon"]'))
630
- ) {
631
- constructor() {
632
- super(), this.active = !1, this.dependencyManager = new U(this), this.focused = !1, this.selected = !1, this._value = "", this.hasSubmenu = !1, this.noWrap = !1, this.renderAngleIcon = (e = []) => Z(e), this.renderCheckIcon = (e = []) => Y(e), this.open = !1, this.handleSlottableRequest = (e) => {
633
- var t;
634
- (t = this.submenuElement) == null || t.dispatchEvent(
635
- new $(e.name, e.data)
636
- );
637
- }, this.proxyFocus = () => {
638
- this.focus();
639
- }, this.handleBeforetoggle = (e) => {
640
- e.newState === "closed" && (this.open = !0, this.overlayElement.manuallyKeepOpen(), this.overlayElement.removeEventListener(
641
- "beforetoggle",
642
- this.handleBeforetoggle
643
- ));
644
- }, this.recentlyLeftChild = !1, this.willDispatchUpdate = !1, this.menuData = {
645
- focusRoot: void 0,
646
- parentMenu: void 0,
647
- selectionRoot: void 0,
648
- cleanupSteps: []
649
- }, this.addEventListener("click", this.handleClickCapture, {
650
- capture: !0
651
- }), new E(this, {
652
- config: {
653
- characterData: !0,
654
- childList: !0,
655
- subtree: !0
656
- },
657
- callback: (e) => {
658
- e.every(
659
- (o) => o.target.slot === "submenu"
660
- ) || this.breakItemChildrenCache();
661
- }
662
- });
663
- }
664
- static get styles() {
665
- return [p(G)];
666
- }
667
- get value() {
668
- return this._value || this.itemText;
669
- }
670
- set value(e) {
671
- e !== this._value && (this._value = e || "", this._value ? this.setAttribute("value", this._value) : this.removeAttribute("value"));
672
- }
673
- /**
674
- * @private
675
- */
676
- get itemText() {
677
- return this.itemChildren.content.reduce(
678
- (e, t) => e + (t.textContent || "").trim(),
679
- ""
680
- );
681
- }
682
- get focusElement() {
683
- return this;
684
- }
685
- get hasIcon() {
686
- return this.slotContentIsPresent;
687
- }
688
- get itemChildren() {
689
- if (!this.iconSlot || !this.contentSlot)
690
- return {
691
- icon: [],
692
- content: []
693
- };
694
- if (this._itemChildren)
695
- return this._itemChildren;
696
- const e = this.iconSlot.assignedElements().map((o) => {
697
- const i = o.cloneNode(!0);
698
- return i.removeAttribute("slot"), i.classList.toggle("icon"), i;
699
- }), t = this.contentSlot.assignedNodes().map((o) => o.cloneNode(!0));
700
- return this._itemChildren = { icon: e, content: t }, this._itemChildren;
701
- }
702
- click() {
703
- this.disabled || this.shouldProxyClick() || super.click();
704
- }
705
- handleClickCapture(e) {
706
- if (this.disabled)
707
- return e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation(), !1;
708
- }
709
- shouldProxyClick() {
710
- let e = !1;
711
- return this.anchorElement && (this.anchorElement.click(), e = !0), e;
712
- }
713
- breakItemChildrenCache() {
714
- this._itemChildren = void 0, this.triggerUpdate();
715
- }
716
- renderSubmenu() {
717
- const e = v`
718
- <slot
719
- name="submenu"
720
- @slotchange=${this.manageSubmenu}
721
- @luzmo-menu-item-added-or-updated=${{
722
- handleEvent: (t) => {
723
- t.clear(t.item);
724
- },
725
- capture: !0
726
- }}
727
- @focusin=${(t) => t.stopPropagation()}
728
- ></slot>
729
- `;
730
- return this.hasSubmenu ? (this.dependencyManager.add("luzmo-overlay"), this.dependencyManager.add("luzmo-popover"), import("./overlay-CJ9by37f.js").then((t) => t.f), import("./popover-Bx4ZDHk4.js"), v`
731
- <luzmo-overlay
732
- .triggerElement=${this}
733
- ?disabled=${!this.hasSubmenu}
734
- ?open=${this.hasSubmenu && this.open && this.dependencyManager.loaded}
735
- .placement=${this.isLTR ? "right-start" : "left-start"}
736
- .offset=${[-10, -5]}
737
- .type=${"auto"}
738
- @close=${(t) => t.stopPropagation()}
739
- @slottable-request=${this.handleSlottableRequest}
740
- >
741
- <luzmo-popover
742
- @change=${(t) => {
743
- this.handleSubmenuChange(t), this.open = !1;
744
- }}
745
- @pointerenter=${this.handleSubmenuPointerenter}
746
- @pointerleave=${this.handleSubmenuPointerleave}
747
- @luzmo-menu-item-added-or-updated=${(t) => t.stopPropagation()}
748
- >
749
- ${e}
750
- </luzmo-popover>
751
- </luzmo-overlay>
752
- ${this.renderAngleIcon()}
753
- `) : e;
754
- }
755
- render() {
756
- return v`
757
- ${this.selected ? v`
758
- ${this.renderCheckIcon(
759
- this.hasIcon ? ["checkmark--withAdjacentIcon"] : []
760
- )}
761
- ` : w}
762
- <slot name="icon"></slot>
763
- <div id="label">
764
- <slot id="slot"></slot>
765
- </div>
766
- <slot name="description"></slot>
767
- <slot name="value"></slot>
768
- ${this.href && this.href.length > 0 ? super.renderAnchor({
769
- id: "button",
770
- ariaHidden: !0,
771
- className: "button anchor hidden"
772
- }) : w}
773
- ${this.renderSubmenu()}
774
- `;
775
- }
776
- manageSubmenu(e) {
777
- this.submenuElement = e.target.assignedElements({
778
- flatten: !0
779
- })[0], this.hasSubmenu = !!this.submenuElement, this.hasSubmenu && this.setAttribute("aria-haspopup", "true");
780
- }
781
- handlePointerdown(e) {
782
- e.target === this && this.hasSubmenu && this.open && (this.addEventListener("focus", this.handleSubmenuFocus, {
783
- once: !0
784
- }), this.overlayElement.addEventListener(
785
- "beforetoggle",
786
- this.handleBeforetoggle
787
- ));
788
- }
789
- firstUpdated(e) {
790
- 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-${S()}`);
791
- }
792
- closeOverlaysForRoot() {
793
- var e;
794
- this.open || (e = this.menuData.parentMenu) == null || e.closeDescendentOverlays();
795
- }
796
- handleSubmenuClick(e) {
797
- e.composedPath().includes(this.overlayElement) || this.openOverlay();
798
- }
799
- handleSubmenuFocus() {
800
- requestAnimationFrame(() => {
801
- this.overlayElement.open = this.open;
802
- });
803
- }
804
- handlePointerenter() {
805
- if (this.leaveTimeout) {
806
- clearTimeout(this.leaveTimeout), delete this.leaveTimeout;
807
- return;
808
- }
809
- this.openOverlay();
810
- }
811
- handlePointerleave() {
812
- this.open && !this.recentlyLeftChild && (this.leaveTimeout = setTimeout(() => {
813
- delete this.leaveTimeout, this.open = !1;
814
- }, X));
815
- }
816
- /**
817
- * When there is a `change` event in the submenu for this item
818
- * then we "click" this item to cascade the selection up the
819
- * menu tree allowing all submenus between the initial selection
820
- * and the root of the tree to have their selection changes and
821
- * be closed.
822
- */
823
- handleSubmenuChange(e) {
824
- var t;
825
- e.stopPropagation(), (t = this.menuData.selectionRoot) == null || t.selectOrToggleItem(this);
826
- }
827
- handleSubmenuPointerenter() {
828
- this.recentlyLeftChild = !0;
829
- }
830
- handleSubmenuPointerleave() {
831
- requestAnimationFrame(() => {
832
- this.recentlyLeftChild = !1;
833
- });
834
- }
835
- handleSubmenuOpen(e) {
836
- this.focused = !1;
837
- const t = e.composedPath().find(
838
- (o) => o !== this.overlayElement && o.localName === "luzmo-overlay"
839
- );
840
- this.overlayElement.parentOverlayToForceClose = t;
841
- }
842
- cleanup() {
843
- this.open = !1, this.active = !1;
844
- }
845
- openOverlay() {
846
- !this.hasSubmenu || this.open || this.disabled || (this.open = !0, this.active = !0, this.setAttribute("aria-expanded", "true"), this.addEventListener("luzmo-closed", this.cleanup, {
847
- once: !0
848
- }));
849
- }
850
- updateAriaSelected() {
851
- const e = this.getAttribute("role");
852
- e === "option" ? this.setAttribute("aria-selected", this.selected ? "true" : "false") : (e === "menuitemcheckbox" || e === "menuitemradio") && this.setAttribute("aria-checked", this.selected ? "true" : "false");
853
- }
854
- setRole(e) {
855
- this.setAttribute("role", e), this.updateAriaSelected();
856
- }
857
- updated(e) {
858
- var t, o;
859
- 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))
860
- if (this.hasSubmenu) {
861
- this.abortControllerSubmenu = new AbortController();
862
- const i = { signal: this.abortControllerSubmenu.signal };
863
- 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);
864
- } else
865
- (o = this.abortControllerSubmenu) == null || o.abort();
866
- }
867
- connectedCallback() {
868
- super.connectedCallback(), this.triggerUpdate();
869
- }
870
- disconnectedCallback() {
871
- this.menuData.cleanupSteps.forEach((e) => e(this)), this.menuData = {
872
- focusRoot: void 0,
873
- parentMenu: void 0,
874
- selectionRoot: void 0,
875
- cleanupSteps: []
876
- }, super.disconnectedCallback();
877
- }
878
- async triggerUpdate() {
879
- this.willDispatchUpdate || (this.willDispatchUpdate = !0, await new Promise((e) => requestAnimationFrame(e)), this.dispatchUpdate());
880
- }
881
- dispatchUpdate() {
882
- this.isConnected && (this.dispatchEvent(new ee(this)), this.willDispatchUpdate = !1);
883
- }
884
- }
885
- u([
886
- r({ type: Boolean, reflect: !0 })
887
- ], s.prototype, "active", 2);
888
- u([
889
- r({ type: Boolean, reflect: !0 })
890
- ], s.prototype, "focused", 2);
891
- u([
892
- r({ type: Boolean, reflect: !0 })
893
- ], s.prototype, "selected", 2);
894
- u([
895
- r({ type: String })
896
- ], s.prototype, "value", 1);
897
- u([
898
- r({ type: Boolean, reflect: !0, attribute: "has-submenu" })
899
- ], s.prototype, "hasSubmenu", 2);
900
- u([
901
- b("slot:not([name])")
902
- ], s.prototype, "contentSlot", 2);
903
- u([
904
- b('slot[name="icon"]')
905
- ], s.prototype, "iconSlot", 2);
906
- u([
907
- r({
908
- type: Boolean,
909
- reflect: !0,
910
- attribute: "no-wrap",
911
- hasChanged() {
912
- return !1;
913
- }
914
- })
915
- ], s.prototype, "noWrap", 2);
916
- u([
917
- b(".anchor")
918
- ], s.prototype, "anchorElement", 2);
919
- u([
920
- b("luzmo-overlay")
921
- ], s.prototype, "overlayElement", 2);
922
- u([
923
- r({ type: Boolean, reflect: !0 })
924
- ], s.prototype, "open", 2);
925
- customElements.get("luzmo-menu") || customElements.define("luzmo-menu", m);
926
- customElements.get("luzmo-menu-divider") || customElements.define("luzmo-menu-divider", W);
927
- customElements.get("luzmo-menu-group") || customElements.define("luzmo-menu-group", I);
928
- customElements.get("luzmo-menu-item") || customElements.define("luzmo-menu-item", s);
929
- export {
930
- m as L,
931
- ee as M,
932
- B as O,
933
- W as a,
934
- I as b,
935
- s as c
936
- };