@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.16

package/components/menu/index.js

@@ -15,78 +15,118 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as w, r as f, x as u, n as a, E as b } from "../base-WsynuqaS.js";
-import { e as p } from "../query-D_KR_GUc.js";
-import { S as I } from "../sized-mixin-D4ACoVUr.js";
-import { d as M } from "../divider.module-DoQWQEIJ.js";
-import { r as A } from "../state-Deh-vKYE.js";
-import { n as C } from "../query-assigned-nodes-C76XVPWY.js";
-import { r as y } from "../random-id-ByCz1xaq.js";
-import { s as D } from "../mutation-controller-DH7YOCyj.js";
-import { F as O } from "../focusable-BxtpnzWp.js";
-import { L as R } from "../like-anchor-Bvn_vLQ8.js";
-import { O as P } from "../observe-slot-presence-CmVi0zTc.js";
-import { O as L } from "../observe-slot-text-BPfIQQtz.js";
-import { D as U } from "../dependency-manger-CEXvGQUV.js";
-import { p as z, S as $, F as T, c as _ } from "../luzmo-icons-NEyaMpEM.js";
-import { S as B } from "../slottable-request-event-DggLA4Rx.js";
-const E = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const r = document.createElement("style");
-    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
+    document.head.appendChild(styleElement);
   }
 };
-E();
-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-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 j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, d = (r, e, t, o) => {
-  for (var i = o > 1 ? void 0 : o ? H(e, t) : e, n = r.length - 1, l; n >= 0; n--)
-    (l = r[n]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && j(e, t, i), i;
+initializeGlobalLuzmoCSSVariables();
+import { unsafeCSS, html, nothing } from "lit";
+import { property, query, queryAssignedNodes, state } from "lit/decorators.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
+import { d as dividerStyles } from "../divider.module-DauH6k2_.js";
+import { r as randomID } from "../random-id-BEc6QIUL.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { F as Focusable } from "../focusable-ChCLg1k4.js";
+import { L as LikeAnchor } from "../like-anchor-v3cJ9RWM.js";
+import { O as ObserveSlotPresence } from "../observe-slot-presence-DcMdoumP.js";
+import { O as ObserveSlotText } from "../observe-slot-text-CjnkkBPn.js";
+import { D as DependencyManagerController } from "../dependency-manger-XHpQjFgK.js";
+import { luzmoIcon, luzmoAngleRight, luzmoCheck, luzmoInfoCircleOutline } from "@luzmo/icons";
+import { S as SlottableRequestEvent } from "../slottable-request-event-D9WzrdWv.js";
+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}";
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
 };
-function q(r, e) {
-  return !!e && (r === e || r.contains(e));
+function elementIsOrContains(el, isOrContains) {
+  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
 }
-class m extends I(w, {
-  noDefaultSize: !0
+class LuzmoMenu extends SizedMixin(LuzmoElement, {
+  noDefaultSize: true
 }) {
   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 = /* @__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) => {
-      e.stopPropagation(), e.composedPath()[0].dispatchEvent(
+    super();
+    this.label = "";
+    this.ignore = false;
+    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 = false;
+    this._willUpdateItems = false;
+    this.pointerUpTarget = null;
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+    this.handleSubmenuClosed = (event) => {
+      event.stopPropagation();
+      const target = event.composedPath()[0];
+      target.dispatchEvent(
         new Event("luzmo-menu-submenu-closed", {
-          bubbles: !0,
-          composed: !0
+          bubbles: true,
+          composed: true
         })
       );
-    }, this.handleSubmenuOpened = (e) => {
-      e.stopPropagation(), e.composedPath()[0].dispatchEvent(
+    };
+    this.handleSubmenuOpened = (event) => {
+      event.stopPropagation();
+      const target = event.composedPath()[0];
+      target.dispatchEvent(
         new Event("luzmo-menu-submenu-opened", {
-          bubbles: !0,
-          composed: !0
+          bubbles: true,
+          composed: true
         })
       );
-      const o = this.childItems[this.focusedItemIndex];
-      o && (o.focused = !1);
-      const i = e.composedPath().find((l) => this.childItemSet.has(l));
-      if (!i)
+      const focusedItem = this.childItems[this.focusedItemIndex];
+      if (focusedItem) {
+        focusedItem.focused = false;
+      }
+      const openedItem = event.composedPath().find((el) => this.childItemSet.has(el));
+      if (!openedItem) {
         return;
-      const n = this.childItems.indexOf(
-        i
+      }
+      const openedItemIndex = this.childItems.indexOf(
+        openedItem
       );
-      this.focusedItemIndex = n, this.focusInItemIndex = n;
-    }, this.resolveCacheUpdated = () => {
-    }, this.addEventListener(
+      this.focusedItemIndex = openedItemIndex;
+      this.focusInItemIndex = openedItemIndex;
+    };
+    this.resolveCacheUpdated = () => {
+    };
+    this.addEventListener(
       "luzmo-menu-item-added-or-updated",
       this.onSelectableItemAddedOrUpdated
-    ), this.addEventListener(
+    );
+    this.addEventListener(
       "luzmo-menu-item-added-or-updated",
       this.onFocusableItemAddedOrUpdated,
       {
-        capture: !0
+        capture: true
       }
-    ), 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);
+    );
+    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 [f(F)];
+    return [unsafeCSS(menuStyles)];
   }
   get isSubmenu() {
     return this.slot === "submenu";
@@ -94,16 +134,31 @@ class m extends I(w, {
   get selected() {
     return this._selected;
   }
-  set selected(e) {
-    if (e === this.selected)
+  set selected(selected) {
+    if (selected === 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);
+    }
+    const old = this.selected;
+    this._selected = selected;
+    this.selectedItems = [];
+    this.selectedItemsMap.clear();
+    this.childItems.forEach((item) => {
+      if (this !== item.menuData.selectionRoot) {
+        return;
+      }
+      item.selected = this.selected.includes(item.value);
+      if (item.selected) {
+        this.selectedItems.push(item);
+        this.selectedItemsMap.set(item, true);
+      }
+    });
+    this.requestUpdate("selected", old);
   }
   get childItems() {
-    return this.cachedChildItems || (this.cachedChildItems = this.updateCachedMenuItems()), this.cachedChildItems;
+    if (!this.cachedChildItems) {
+      this.cachedChildItems = this.updateCachedMenuItems();
+    }
+    return this.cachedChildItems;
   }
   /**
    * Hide this getter from web-component-analyzer until
@@ -113,168 +168,300 @@ class m extends I(w, {
    * @private
    */
   get childRole() {
-    if (this.resolvedRole === "listbox")
+    if (this.resolvedRole === "listbox") {
       return "option";
+    }
     switch (this.resolvedSelects) {
-      case "single":
+      case "single": {
         return "menuitemradio";
-      case "multiple":
+      }
+      case "multiple": {
         return "menuitemcheckbox";
-      default:
+      }
+      default: {
         return "menuitem";
+      }
     }
   }
   get ownRole() {
     return "menu";
   }
-  focus({ preventScroll: e } = {}) {
-    if (this.childItems.every((o) => o.disabled))
+  focus({ preventScroll } = {}) {
+    if (this.childItems.every((childItem) => childItem.disabled)) {
       return;
-    if (this.childItems.some((o) => o.menuData.focusRoot !== this)) {
-      super.focus({ preventScroll: e });
+    }
+    if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
+      super.focus({ preventScroll });
       return;
     }
-    this.focusMenuItemByOffset(0), super.focus({ preventScroll: e });
-    const t = this.selectedItems[0];
-    t && !e && t.scrollIntoView({ block: "nearest" });
+    this.focusMenuItemByOffset(0);
+    super.focus({ preventScroll });
+    const selectedItem = this.selectedItems[0];
+    if (selectedItem && !preventScroll) {
+      selectedItem.scrollIntoView({ block: "nearest" });
+    }
   }
-  handleFocusin(e) {
-    var i;
-    if (this.childItems.some((n) => n.menuData.focusRoot !== this))
+  handleFocusin(event) {
+    var _a;
+    if (this.childItems.some((childItem) => childItem.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));
+    }
+    const activeElement = this.getRootNode().activeElement;
+    const selectionRoot = ((_a = this.childItems[this.focusedItemIndex]) == null ? void 0 : _a.menuData.selectionRoot) || this;
+    if (activeElement !== selectionRoot || event.target !== this) {
+      selectionRoot.focus({ preventScroll: true });
+      if (activeElement && this.focusedItemIndex === 0) {
+        const offset = this.childItems.indexOf(activeElement);
+        this.focusMenuItemByOffset(Math.max(offset, 0));
+      }
     }
     this.startListeningToKeyboard();
   }
   startListeningToKeyboard() {
     this.addEventListener("keydown", this.handleKeydown);
   }
-  handleBlur(e) {
-    q(this, e.relatedTarget) || (this.stopListeningToKeyboard(), this.childItems.forEach((t) => t.focused = !1), this.removeAttribute("aria-activedescendant"));
+  handleBlur(event) {
+    if (elementIsOrContains(this, event.relatedTarget)) {
+      return;
+    }
+    this.stopListeningToKeyboard();
+    this.childItems.forEach((child) => child.focused = false);
+    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], l = 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 = [], x = [];
-      this.childItemSet.forEach((g) => {
-        g.menuData.selectionRoot === this && this.selectedItemsMap.has(g) && (v.push(g.value), x.push(g));
-      }), this._selected = v, this.selectedItems = x, 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(
+  selectOrToggleItem(targetItem) {
+    const resolvedSelects = this.resolvedSelects;
+    const oldSelectedItemsMap = new Map(this.selectedItemsMap);
+    const oldSelected = [...this.selected];
+    const oldSelectedItems = [...this.selectedItems];
+    const oldValue = this.value;
+    const focusedChild = this.childItems[this.focusedItemIndex];
+    if (focusedChild) {
+      focusedChild.focused = false;
+      focusedChild.active = false;
+    }
+    this.focusedItemIndex = this.childItems.indexOf(targetItem);
+    this.forwardFocusVisibleToItem(targetItem);
+    if (resolvedSelects === "multiple") {
+      if (this.selectedItemsMap.has(targetItem)) {
+        this.selectedItemsMap.delete(targetItem);
+      } else {
+        this.selectedItemsMap.set(targetItem, true);
+      }
+      const selected = [];
+      const selectedItems = [];
+      this.childItemSet.forEach((childItem) => {
+        if (childItem.menuData.selectionRoot !== this) {
+          return;
+        }
+        if (this.selectedItemsMap.has(childItem)) {
+          selected.push(childItem.value);
+          selectedItems.push(childItem);
+        }
+      });
+      this._selected = selected;
+      this.selectedItems = selectedItems;
+      this.value = this.selected.join(this.valueSeparator);
+    } else {
+      this.selectedItemsMap.clear();
+      this.selectedItemsMap.set(targetItem, true);
+      this.value = targetItem.value;
+      this._selected = [targetItem.value];
+      this.selectedItems = [targetItem];
+    }
+    const applyDefault = this.dispatchEvent(
       new Event("change", {
-        cancelable: !0,
-        bubbles: !0,
-        composed: !0
+        cancelable: true,
+        bubbles: true,
+        composed: true
       })
-    )) {
-      this._selected = i, this.selectedItems = n, this.selectedItemsMap = o, this.value = l;
+    );
+    if (!applyDefault) {
+      this._selected = oldSelected;
+      this.selectedItems = oldSelectedItems;
+      this.selectedItemsMap = oldSelectedItemsMap;
+      this.value = oldValue;
       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);
+    if (resolvedSelects === "single") {
+      for (const oldItem of oldSelectedItemsMap.keys()) {
+        if (oldItem !== targetItem) {
+          oldItem.selected = false;
+        }
+      }
+      targetItem.selected = true;
+    } else if (resolvedSelects === "multiple") {
+      targetItem.selected = !targetItem.selected;
+    }
   }
-  handleKeydown(e) {
-    if (e.defaultPrevented)
+  handleKeydown(event) {
+    if (event.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")) {
+    }
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    if (lastFocusedItem) {
+      lastFocusedItem.focused = true;
+    }
+    const { key } = event;
+    if (event.shiftKey && event.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));
+      const replaceTabindex = (eventForTab) => {
+        if (!eventForTab.shiftKey && !this.hasAttribute("tabindex")) {
+          this.tabIndex = 0;
+          document.removeEventListener("keyup", replaceTabindex);
+          this.removeEventListener("focusout", replaceTabindex);
+        }
       };
-      document.addEventListener("keyup", i), this.addEventListener("focusout", i);
+      document.addEventListener("keyup", replaceTabindex);
+      this.addEventListener("focusout", replaceTabindex);
     }
-    if (o === "Tab") {
+    if (key === "Tab") {
       this.prepareToCleanUp();
       return;
     }
-    if (o === " " && (t != null && t.hasSubmenu)) {
-      t.openOverlay();
+    if (key === " " && (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu)) {
+      lastFocusedItem.openOverlay();
       return;
     }
-    if (o === " " || o === "Enter") {
-      const i = this.childItems[this.focusedItemIndex];
-      i && i.menuData.selectionRoot === e.target && (e.preventDefault(), i.click());
+    if (key === " " || key === "Enter") {
+      const childItem = this.childItems[this.focusedItemIndex];
+      if (childItem && childItem.menuData.selectionRoot === event.target) {
+        event.preventDefault();
+        childItem.click();
+      }
       return;
     }
-    if (o === "ArrowDown" || o === "ArrowUp") {
-      const i = this.childItems[this.focusedItemIndex];
-      i && i.menuData.selectionRoot === e.target && this.navigateWithinMenu(e);
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      const childItem = this.childItems[this.focusedItemIndex];
+      if (childItem && childItem.menuData.selectionRoot === event.target) {
+        this.navigateWithinMenu(event);
+      }
       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;
+    this.navigateBetweenRelatedMenus(event);
+  }
+  focusMenuItemByOffset(offset) {
+    const step = offset || 1;
+    const focusedItem = this.childItems[this.focusedItemIndex];
+    if (focusedItem) {
+      focusedItem.focused = false;
+      focusedItem.active = focusedItem.open;
+    }
+    this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + offset) % this.childItems.length;
+    let itemToFocus = this.childItems[this.focusedItemIndex];
+    let availableItems = this.childItems.length;
+    while ((itemToFocus == null ? void 0 : itemToFocus.disabled) && availableItems) {
+      availableItems -= 1;
+      this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + step) % this.childItems.length;
+      itemToFocus = this.childItems[this.focusedItemIndex];
+    }
+    if (!(itemToFocus == null ? void 0 : itemToFocus.disabled)) {
+      this.forwardFocusVisibleToItem(itemToFocus);
+    }
+    return itemToFocus;
   }
   updateSelectedItemIndex() {
-    let e = 0;
-    const t = /* @__PURE__ */ new Map(), o = [], i = [];
-    let n = this.childItems.length;
-    for (; n; ) {
-      n -= 1;
-      const l = this.childItems[n];
-      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));
-    }
-    i.map((l, h) => {
-      h > 0 && (l.focused = !1);
-    }), this.selectedItemsMap = t, this._selected = o, this.selectedItems = i, this.value = this.selected.join(this.valueSeparator), this.focusedItemIndex = e, this.focusInItemIndex = e;
+    let firstOrFirstSelectedIndex = 0;
+    const selectedItemsMap = /* @__PURE__ */ new Map();
+    const selected = [];
+    const selectedItems = [];
+    let itemIndex = this.childItems.length;
+    while (itemIndex) {
+      itemIndex -= 1;
+      const childItem = this.childItems[itemIndex];
+      if (childItem.menuData.selectionRoot === this) {
+        if (childItem.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(childItem.value)) {
+          firstOrFirstSelectedIndex = itemIndex;
+          selectedItemsMap.set(childItem, true);
+          selected.unshift(childItem.value);
+          selectedItems.unshift(childItem);
+        }
+        if (itemIndex !== firstOrFirstSelectedIndex) {
+          childItem.focused = false;
+        }
+      }
+    }
+    selectedItems.map((item, i) => {
+      if (i > 0) {
+        item.focused = false;
+      }
+    });
+    this.selectedItemsMap = selectedItemsMap;
+    this._selected = selected;
+    this.selectedItems = selectedItems;
+    this.value = this.selected.join(this.valueSeparator);
+    this.focusedItemIndex = firstOrFirstSelectedIndex;
+    this.focusInItemIndex = firstOrFirstSelectedIndex;
   }
   closeDescendentOverlays() {
-    this.descendentOverlays.forEach((e) => {
-      e.open = !1;
-    }), this.descendentOverlays = /* @__PURE__ */ new Map();
+    this.descendentOverlays.forEach((overlay) => {
+      overlay.open = false;
+    });
+    this.descendentOverlays = /* @__PURE__ */ new Map();
   }
   render() {
     return this.renderMenuItemSlot();
   }
   connectedCallback() {
-    super.connectedCallback(), !this.hasAttribute("role") && !this.ignore && this.setAttribute("role", this.ownRole), this.updateComplete.then(() => this.updateItemFocus());
+    super.connectedCallback();
+    if (!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 = /* @__PURE__ */ 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" }));
+    this.cachedChildItems = void 0;
+    this.selectedItems = [];
+    this.selectedItemsMap.clear();
+    this.childItemSet.clear();
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+    super.disconnectedCallback();
+  }
+  handleDescendentOverlayOpened(event) {
+    const target = event.composedPath()[0];
+    if (!target.overlayElement) {
+      return;
+    }
+    this.descendentOverlays.set(target.overlayElement, target.overlayElement);
   }
-  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());
+  handleDescendentOverlayClosed(event) {
+    const target = event.composedPath()[0];
+    if (!target.overlayElement) {
+      return;
+    }
+    this.descendentOverlays.delete(target.overlayElement);
+  }
+  navigateWithinMenu(event) {
+    const { key } = event;
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    const direction = key === "ArrowDown" ? 1 : -1;
+    const itemToFocus = this.focusMenuItemByOffset(direction);
+    if (itemToFocus === lastFocusedItem) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    itemToFocus.scrollIntoView({ block: "nearest" });
+  }
+  navigateBetweenRelatedMenus(event) {
+    const { key } = event;
+    event.stopPropagation();
+    const shouldOpenSubmenu = this.isLTR && key === "ArrowRight" || !this.isLTR && key === "ArrowLeft";
+    const shouldCloseSelfAsSubmenu = this.isLTR && key === "ArrowLeft" || !this.isLTR && key === "ArrowRight";
+    if (shouldOpenSubmenu) {
+      const lastFocusedItem = this.childItems[this.focusedItemIndex];
+      if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
+        lastFocusedItem.openOverlay();
+      }
+    } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+      this.dispatchEvent(new Event("close", { bubbles: true }));
+      this.updateSelectedItemIndex();
+    }
   }
   renderMenuItemSlot() {
-    return u`
+    return html`
       <slot
         @luzmo-menu-submenu-opened=${this.handleDescendentOverlayOpened}
         @luzmo-menu-submenu-closed=${this.handleDescendentOverlayClosed}
@@ -282,52 +469,72 @@ class m extends I(w, {
       ></slot>
     `;
   }
-  firstUpdated(e) {
-    if (super.firstUpdated(e), !this.hasAttribute("tabindex") && !this.ignore) {
-      const o = this.getAttribute("role");
-      this.tabIndex = o === "group" ? -1 : 0;
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    if (!this.hasAttribute("tabindex") && !this.ignore) {
+      const role = this.getAttribute("role");
+      this.tabIndex = role === "group" ? -1 : 0;
     }
-    const t = [
-      new Promise((o) => requestAnimationFrame(() => o(!0)))
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
     ];
-    [...this.children].forEach((o) => {
-      o.localName === "luzmo-menu-item" && t.push(o.updateComplete);
-    }), this.childItemsUpdated = Promise.all(t);
+    [...this.children].forEach((item) => {
+      if (item.localName === "luzmo-menu-item") {
+        updates.push(item.updateComplete);
+      }
+    });
+    this.childItemsUpdated = Promise.all(updates);
   }
-  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"));
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("selects") && this.hasUpdated) {
+      this.selectsChanged();
+    }
+    if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
   }
   selectsChanged() {
-    const e = [
-      new Promise((t) => requestAnimationFrame(() => t(!0)))
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
     ];
-    this.childItemSet.forEach((t) => {
-      e.push(t.triggerUpdate());
-    }), this.childItemsUpdated = Promise.all(e);
+    this.childItemSet.forEach((childItem) => {
+      updates.push(childItem.triggerUpdate());
+    });
+    this.childItemsUpdated = Promise.all(updates);
   }
   async getUpdateComplete() {
-    const e = await super.getUpdateComplete();
-    return await this.childItemsUpdated, await this.cacheUpdated, e;
+    const complete = await super.getUpdateComplete();
+    await this.childItemsUpdated;
+    await this.cacheUpdated;
+    return complete;
   }
   updateCachedMenuItems() {
-    if (this.cachedChildItems = [], !this.menuSlot)
+    this.cachedChildItems = [];
+    if (!this.menuSlot) {
       return [];
-    const e = this.menuSlot.assignedElements({
-      flatten: !0
+    }
+    const slottedElements = this.menuSlot.assignedElements({
+      flatten: true
     });
-    for (const [t, o] of e.entries()) {
-      if (this.childItemSet.has(o)) {
-        this.cachedChildItems.push(o);
+    for (const [i, slottedElement] of slottedElements.entries()) {
+      if (this.childItemSet.has(slottedElement)) {
+        this.cachedChildItems.push(slottedElement);
         continue;
       }
-      const n = o.localName === "slot" ? o.assignedElements({
-        flatten: !0
-      }) : [...o.querySelectorAll(":scope > *")];
-      e.splice(
-        t,
+      const isHTMLSlotElement = slottedElement.localName === "slot";
+      const flattenedChildren = isHTMLSlotElement ? slottedElement.assignedElements({
+        flatten: true
+      }) : [...slottedElement.querySelectorAll(":scope > *")];
+      slottedElements.splice(
+        i,
         1,
-        o,
-        ...n
+        slottedElement,
+        ...flattenedChildren
       );
     }
     return this.cachedChildItems;
@@ -339,11 +546,15 @@ class m extends I(w, {
    * dispatching `<luzmo-menu-item>` element.
    * @param event
    */
-  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;
+  onFocusableItemAddedOrUpdated(event) {
+    event.menuCascade.set(this, {
+      hadFocusRoot: !!event.item.menuData.focusRoot,
+      ancestorWithSelects: event.currentAncestorWithSelects
+    });
+    if (this.selects) {
+      event.currentAncestorWithSelects = this;
+    }
+    event.item.menuData.focusRoot = event.item.menuData.focusRoot || this;
   }
   /**
    * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
@@ -352,61 +563,103 @@ class m extends I(w, {
    * manage the selection state of the dispatching `<luzmo-menu-item>` element.
    * @param event
    */
-  onSelectableItemAddedOrUpdated(e) {
-    var i, n;
-    const t = e.menuCascade.get(this);
-    if (!t)
+  onSelectableItemAddedOrUpdated(event) {
+    var _a, _b;
+    const cascadeData = event.menuCascade.get(this);
+    if (!cascadeData) {
       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") {
+    }
+    event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
+    if (cascadeData.hadFocusRoot && !this.ignore) {
+      this.tabIndex = -1;
+    }
+    this.addChildItem(event.item);
+    if (this.selects === "inherit") {
       this.resolvedSelects = "inherit";
-      const l = (i = e.currentAncestorWithSelects) == null ? void 0 : i.ignore;
-      this.resolvedRole = l ? "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(
-      (l) => this.removeChildItem(l)
-    ), (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) {
+      const ignoreMenu = (_a = event.currentAncestorWithSelects) == null ? void 0 : _a.ignore;
+      this.resolvedRole = ignoreMenu ? "none" : ((_b = event.currentAncestorWithSelects) == null ? void 0 : _b.getAttribute("role")) || this.getAttribute("role") || void 0;
+    } else if (this.selects) {
+      this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
+      this.resolvedSelects = this.selects;
+    } else {
+      this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
+      this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
+    }
+    const selects = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
+    event.item.menuData.cleanupSteps.push(
+      (item) => this.removeChildItem(item)
+    );
+    if ((selects || !this.selects && this.resolvedSelects !== "ignore") && !event.item.menuData.selectionRoot) {
+      event.item.setRole(this.childRole);
+      event.item.menuData.selectionRoot = event.item.menuData.selectionRoot || this;
+      if (event.item.selected) {
+        this.selectedItemsMap.set(event.item, true);
+        this.selectedItems = [...this.selectedItems, event.item];
+        this._selected = [...this.selected, event.item.value];
+        this.value = this.selected.join(this.valueSeparator);
+      }
+    }
+  }
+  addChildItem(item) {
+    this.childItemSet.add(item);
+    this.handleItemsChanged();
+  }
+  async removeChildItem(item) {
+    this.childItemSet.delete(item);
+    this.cachedChildItems = void 0;
+    if (item.focused) {
+      this.handleItemsChanged();
+      await this.updateComplete;
+      this.focus();
+    }
+  }
+  handleClick(event) {
+    if (this.pointerUpTarget === event.target) {
       this.pointerUpTarget = null;
       return;
     }
-    this.handlePointerBasedSelection(e);
+    this.handlePointerBasedSelection(event);
   }
-  handlePointerup(e) {
-    this.pointerUpTarget = e.target, this.handlePointerBasedSelection(e);
+  handlePointerup(event) {
+    this.pointerUpTarget = event.target;
+    this.handlePointerBasedSelection(event);
   }
-  handlePointerBasedSelection(e) {
-    var i, n;
-    if (e instanceof MouseEvent && e.button !== 0)
+  handlePointerBasedSelection(event) {
+    var _a, _b;
+    if (event instanceof MouseEvent && event.button !== 0) {
       return;
-    const o = e.composedPath().find((l) => l instanceof Element ? l.getAttribute("role") === this.childRole : !1);
-    if (e.defaultPrevented) {
-      const l = this.childItems.indexOf(o);
-      ((i = o == null ? void 0 : o.menuData) == null ? void 0 : i.focusRoot) === this && l !== -1 && (this.focusedItemIndex = l);
+    }
+    const path = event.composedPath();
+    const target = path.find((el) => {
+      if (!(el instanceof Element)) {
+        return false;
+      }
+      return el.getAttribute("role") === this.childRole;
+    });
+    if (event.defaultPrevented) {
+      const index = this.childItems.indexOf(target);
+      if (((_a = target == null ? void 0 : target.menuData) == null ? void 0 : _a.focusRoot) === this && index !== -1) {
+        this.focusedItemIndex = index;
+      }
       return;
     }
-    if (o != null && o.href && o.href.length > 0) {
+    if ((target == null ? void 0 : target.href) && target.href.length > 0) {
       this.dispatchEvent(
         new Event("change", {
-          bubbles: !0,
-          composed: !0
+          bubbles: true,
+          composed: true
         })
       );
       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)
+    } else if (((_b = target == null ? void 0 : target.menuData) == null ? void 0 : _b.selectionRoot) === this && this.childItems.length > 0) {
+      event.preventDefault();
+      if (target.hasSubmenu || target.open) {
         return;
-      this.selectOrToggleItem(o);
-    } else
+      }
+      this.selectOrToggleItem(target);
+    } else {
       return;
+    }
     this.prepareToCleanUp();
   }
   prepareToCleanUp() {
@@ -414,101 +667,133 @@ class m extends I(w, {
       "focusout",
       () => {
         requestAnimationFrame(() => {
-          const e = this.childItems[this.focusedItemIndex];
-          e && (e.focused = !1, this.updateSelectedItemIndex());
+          const focusedItem = this.childItems[this.focusedItemIndex];
+          if (focusedItem) {
+            focusedItem.focused = false;
+            this.updateSelectedItemIndex();
+          }
         });
       },
-      { once: !0 }
+      { once: true }
     );
   }
   handleItemsChanged() {
-    this.cachedChildItems = void 0, this._willUpdateItems || (this._willUpdateItems = !0, this.cacheUpdated = this.updateCache());
+    this.cachedChildItems = void 0;
+    if (!this._willUpdateItems) {
+      this._willUpdateItems = true;
+      this.cacheUpdated = this.updateCache();
+    }
   }
   async updateCache() {
-    await (this.hasUpdated ? new Promise((e) => requestAnimationFrame(() => e(!0))) : Promise.all([
-      new Promise((e) => requestAnimationFrame(() => e(!0))),
+    await (this.hasUpdated ? new Promise((res) => requestAnimationFrame(() => res(true))) : Promise.all([
+      new Promise((res) => requestAnimationFrame(() => res(true))),
       this.updateComplete
-    ])), this.cachedChildItems === void 0 && (this.updateSelectedItemIndex(), this.updateItemFocus()), this._willUpdateItems = !1;
+    ]));
+    if (this.cachedChildItems === void 0) {
+      this.updateSelectedItemIndex();
+      this.updateItemFocus();
+    }
+    this._willUpdateItems = false;
   }
   updateItemFocus() {
-    if (this.childItems.length === 0)
+    if (this.childItems.length === 0) {
       return;
-    const e = this.childItems[this.focusInItemIndex];
-    this.getRootNode().activeElement === e.menuData.focusRoot && this.forwardFocusVisibleToItem(e);
+    }
+    const focusInItem = this.childItems[this.focusInItemIndex];
+    if (this.getRootNode().activeElement === focusInItem.menuData.focusRoot) {
+      this.forwardFocusVisibleToItem(focusInItem);
+    }
   }
-  forwardFocusVisibleToItem(e) {
-    if (!e || e.menuData.focusRoot !== this)
+  forwardFocusVisibleToItem(item) {
+    if (!item || item.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();
+    const focused = this.hasVisibleFocusInTree() || !!this.childItems.some((child) => child.hasVisibleFocusInTree());
+    item.focused = focused;
+    this.setAttribute("aria-activedescendant", item.id);
+    if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
+      item.menuData.selectionRoot.focus();
+    }
   }
   handleSlotchange({
-    target: e
+    target
   }) {
-    const t = e.assignedElements({
-      flatten: !0
+    const assignedElements = target.assignedElements({
+      flatten: true
     });
-    this.childItems.length !== t.length && t.forEach((o) => {
-      o.triggerUpdate !== void 0 ? o.triggerUpdate() : o.childItems !== void 0 && o.childItems.forEach((i) => {
-        i.triggerUpdate();
+    if (this.childItems.length !== assignedElements.length) {
+      assignedElements.forEach((item) => {
+        if (item.triggerUpdate !== void 0) {
+          item.triggerUpdate();
+        } else if (item.childItems !== void 0) {
+          item.childItems.forEach((child) => {
+            child.triggerUpdate();
+          });
+        }
       });
-    });
+    }
   }
 }
-d([
-  a({ type: String, reflect: !0 })
-], m.prototype, "label", 2);
-d([
-  a({ type: Boolean, reflect: !0 })
-], m.prototype, "ignore", 2);
-d([
-  a({ type: String, reflect: !0 })
-], m.prototype, "variant", 2);
-d([
-  a({ type: String, reflect: !0 })
-], m.prototype, "selects", 2);
-d([
-  a({ type: String })
-], m.prototype, "value", 2);
-d([
-  a({ type: String, attribute: "value-separator" })
-], m.prototype, "valueSeparator", 2);
-d([
-  a({ attribute: !1 })
-], m.prototype, "selected", 1);
-d([
-  a({ attribute: !1 })
-], m.prototype, "selectedItems", 2);
-d([
-  p("slot:not([name])")
-], m.prototype, "menuSlot", 2);
-const N = ":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 V extends I(w, {
+__decorateClass$2([
+  property({ type: String, reflect: true })
+], LuzmoMenu.prototype, "label", 2);
+__decorateClass$2([
+  property({ type: Boolean, reflect: true })
+], LuzmoMenu.prototype, "ignore", 2);
+__decorateClass$2([
+  property({ type: String, reflect: true })
+], LuzmoMenu.prototype, "variant", 2);
+__decorateClass$2([
+  property({ type: String, reflect: true })
+], LuzmoMenu.prototype, "selects", 2);
+__decorateClass$2([
+  property({ type: String })
+], LuzmoMenu.prototype, "value", 2);
+__decorateClass$2([
+  property({ type: String, attribute: "value-separator" })
+], LuzmoMenu.prototype, "valueSeparator", 2);
+__decorateClass$2([
+  property({ attribute: false })
+], LuzmoMenu.prototype, "selected", 1);
+__decorateClass$2([
+  property({ attribute: false })
+], LuzmoMenu.prototype, "selectedItems", 2);
+__decorateClass$2([
+  query("slot:not([name])")
+], LuzmoMenu.prototype, "menuSlot", 2);
+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}";
+class LuzmoMenuDivider extends SizedMixin(LuzmoElement, {
   validSizes: ["s", "m", "l"]
 }) {
   static get styles() {
-    return [f(M), f(N)];
+    return [unsafeCSS(dividerStyles), unsafeCSS(menuDividerStyles)];
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.setAttribute("role", "separator");
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.setAttribute("role", "separator");
   }
 }
-const W = ".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 K = Object.defineProperty, S = (r, e, t, o) => {
-  for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
-    (l = r[n]) && (i = l(e, t, i) || i);
-  return i && K(e, t, i), i;
+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}";
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
 };
-class k extends m {
+class LuzmoMenuGroup extends LuzmoMenu {
   constructor() {
-    super(...arguments), this.headerId = "";
+    super(...arguments);
+    this.headerId = "";
   }
   static get styles() {
-    return [...super.styles, f(W)];
+    return [...super.styles, unsafeCSS(menuGroupStyles)];
   }
   render() {
-    return u`
+    return html`
       <span class="header" ?hidden=${!this.headerElement}>
         <slot name="header" @slotchange=${this.updateLabel}></slot>
       </span>
@@ -525,127 +810,193 @@ class k extends m {
     switch (this.selects) {
       case "multiple":
       case "single":
-      case "inherit":
+      case "inherit": {
         return "group";
-      default:
+      }
+      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-${y()}`;
-        const t = e.id || this.headerId;
-        e.id || (e.id = t), this.setAttribute("aria-labelledby", t);
-      } else
+    const headerElement = this.headerElements.length > 0 ? this.headerElements[0] : void 0;
+    if (headerElement !== this.headerElement) {
+      if (this.headerElement && this.headerElement.id === this.headerId) {
+        this.headerElement.removeAttribute("id");
+      }
+      if (headerElement) {
+        this.headerId = this.headerId || `luzmo-menu-group-label-${randomID()}`;
+        const headerId = headerElement.id || this.headerId;
+        if (!headerElement.id) {
+          headerElement.id = headerId;
+        }
+        this.setAttribute("aria-labelledby", headerId);
+      } else {
         this.removeAttribute("aria-labelledby");
-    this.headerElement = e;
+      }
+    }
+    this.headerElement = headerElement;
   }
 }
-S([
-  C({
+__decorateClass$1([
+  queryAssignedNodes({
     slot: "header",
-    flatten: !0
+    flatten: true
   })
-], k.prototype, "headerElements");
-S([
-  A()
-], k.prototype, "headerElement");
-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-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, Q = Object.getOwnPropertyDescriptor, c = (r, e, t, o) => {
-  for (var i = o > 1 ? void 0 : o ? Q(e, t) : e, n = r.length - 1, l; n >= 0; n--)
-    (l = r[n]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && J(e, t, i), i;
+], LuzmoMenuGroup.prototype, "headerElements");
+__decorateClass$1([
+  state()
+], LuzmoMenuGroup.prototype, "headerElement");
+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}';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
 };
-const X = 100, Y = (r) => u`
-  <span class="icon-container icon checkmark ${r.join(" ")}">
-    ${z(T)}
+const POINTERLEAVE_TIMEOUT = 100;
+const checkIcon = (classes) => html`
+  <span class="icon-container icon checkmark ${classes.join(" ")}">
+    ${luzmoIcon(luzmoCheck)}
   </span>
-`, Z = (r) => u`
-  <span class="icon-container icon angle ${r.join(" ")}">
-    ${z($, { className: "indicator" })}
+`;
+const angleIcon = (classes) => html`
+  <span class="icon-container icon angle ${classes.join(" ")}">
+    ${luzmoIcon(luzmoAngleRight, { className: "indicator" })}
   </span>
-`, ee = (r) => u`
-  <span class="icon-container icon info ${r.join(" ")}">
-    ${z(_)}
+`;
+const infoIcon = (classes) => html`
+  <span class="icon-container icon info ${classes.join(" ")}">
+    ${luzmoIcon(luzmoInfoCircleOutline)}
   </span>
 `;
-class te extends Event {
-  constructor(e) {
+class MenuItemAddedOrUpdatedEvent extends Event {
+  constructor(item) {
     super("luzmo-menu-item-added-or-updated", {
-      bubbles: !0,
-      composed: !0
-    }), this.menuCascade = /* @__PURE__ */ new WeakMap(), this.clear(e);
+      bubbles: true,
+      composed: true
+    });
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
+    this.clear(item);
   }
   get item() {
     return this._item;
   }
-  clear(e) {
-    this._item = e, this.currentAncestorWithSelects = void 0, e.menuData = {
+  clear(item) {
+    this._item = item;
+    this.currentAncestorWithSelects = void 0;
+    item.menuData = {
       cleanupSteps: [],
       focusRoot: void 0,
       selectionRoot: void 0,
       parentMenu: void 0
-    }, this.menuCascade = /* @__PURE__ */ new WeakMap();
+    };
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
   }
 }
-class s extends R(
-  L(P(O, '[slot="icon"]'))
+class LuzmoMenuItem extends LikeAnchor(
+  ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
 ) {
   constructor() {
-    super(), this.active = !1, this.dependencyManager = new U(this), this.focused = !1, this.selected = !1, this._value = "", this.hasSubmenu = !1, this.tooltipPlacement = "top", this.noWrap = !1, this.renderAngleIcon = (e = []) => Z(e), this.renderCheckIcon = (e = []) => Y(e), this.renderInfoIcon = (e = []) => ee(e), this.open = !1, this.handleSlottableRequest = (e) => {
-      var t;
-      (t = this.submenuElement) == null || t.dispatchEvent(
-        new B(e.name, e.data)
+    super();
+    this.active = false;
+    this.dependencyManager = new DependencyManagerController(this);
+    this.focused = false;
+    this.selected = false;
+    this._value = "";
+    this.hasSubmenu = false;
+    this.tooltipPlacement = "top";
+    this.noWrap = false;
+    this.renderAngleIcon = (classes = []) => angleIcon(classes);
+    this.renderCheckIcon = (classes = []) => checkIcon(classes);
+    this.renderInfoIcon = (classes = []) => infoIcon(classes);
+    this.open = false;
+    this.handleSlottableRequest = (event) => {
+      var _a;
+      (_a = this.submenuElement) == null ? void 0 : _a.dispatchEvent(
+        new SlottableRequestEvent(event.name, event.data)
       );
-    }, this.proxyFocus = () => {
+    };
+    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 = {
+    };
+    this.handleBeforetoggle = (event) => {
+      if (event.newState === "closed") {
+        this.open = true;
+        this.overlayElement.manuallyKeepOpen();
+        this.overlayElement.removeEventListener(
+          "beforetoggle",
+          this.handleBeforetoggle
+        );
+      }
+    };
+    this.recentlyLeftChild = false;
+    this.willDispatchUpdate = false;
+    this.menuData = {
       focusRoot: void 0,
       parentMenu: void 0,
       selectionRoot: void 0,
       cleanupSteps: []
-    }, this.addEventListener("click", this.handleClickCapture, {
-      capture: !0
-    }), new D(this, {
+    };
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true
+    });
+    new MutationController(this, {
       config: {
-        characterData: !0,
-        childList: !0,
-        subtree: !0
+        characterData: true,
+        childList: true,
+        subtree: true
       },
-      callback: (e) => {
-        e.every(
-          (o) => o.target.slot === "submenu"
-        ) || this.breakItemChildrenCache();
+      callback: (mutations) => {
+        const isSubmenu = mutations.every(
+          (mutation) => mutation.target.slot === "submenu"
+        );
+        if (isSubmenu) {
+          return;
+        }
+        this.breakItemChildrenCache();
       }
     });
   }
   static get styles() {
-    return [f(G)];
+    return [unsafeCSS(menuItemStyles)];
   }
   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"));
+  set value(value) {
+    if (value === this._value) {
+      return;
+    }
+    this._value = value || "";
+    if (this._value) {
+      this.setAttribute("value", this._value);
+    } else {
+      this.removeAttribute("value");
+    }
   }
   /**
    * @private
    */
   get itemText() {
     return this.itemChildren.content.reduce(
-      (e, t) => e + (t.textContent || "").trim(),
+      (acc, node) => acc + (node.textContent || "").trim(),
       ""
     );
   }
   renderTooltip() {
-    return this.tooltip ? (this.dependencyManager.add("luzmo-tooltip"), this.dependencyManager.add("luzmo-overlay"), import("../tooltip/index.js"), import("../overlay/index.js"), u`
+    if (!this.tooltip) {
+      return nothing;
+    }
+    this.dependencyManager.add("luzmo-tooltip");
+    this.dependencyManager.add("luzmo-overlay");
+    import("../tooltip/index.js");
+    import("../overlay/index.js");
+    return html`
       <div class="menu-item-tooltip-container">
         <!-- The visible icon that acts as trigger -->
         <div
@@ -665,7 +1016,7 @@ class s extends R(
           <luzmo-tooltip> ${this.tooltip} </luzmo-tooltip>
         </luzmo-overlay>
       </div>
-    `) : b;
+    `;
   }
   get focusElement() {
     return this;
@@ -674,48 +1025,76 @@ class s extends R(
     return this.slotContentIsPresent;
   }
   get itemChildren() {
-    if (!this.iconSlot || !this.contentSlot)
+    if (!this.iconSlot || !this.contentSlot) {
       return {
         icon: [],
         content: []
       };
-    if (this._itemChildren)
+    }
+    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;
+    }
+    const icon = this.iconSlot.assignedElements().map((element) => {
+      const newElement = element.cloneNode(true);
+      newElement.removeAttribute("slot");
+      newElement.classList.toggle("icon");
+      return newElement;
+    });
+    const content = this.contentSlot.assignedNodes().map((node) => node.cloneNode(true));
+    this._itemChildren = { icon, content };
+    return this._itemChildren;
   }
   click() {
-    this.disabled || this.shouldProxyClick() || super.click();
-  }
-  handleClickCapture(e) {
-    if (this.disabled)
-      return e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation(), !1;
+    if (this.disabled) {
+      return;
+    }
+    if (this.shouldProxyClick()) {
+      return;
+    }
+    super.click();
+  }
+  handleClickCapture(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
   }
   shouldProxyClick() {
-    let e = !1;
-    return this.anchorElement && (this.anchorElement.click(), e = !0), e;
+    let handled = false;
+    if (this.anchorElement) {
+      this.anchorElement.click();
+      handled = true;
+    }
+    return handled;
   }
   breakItemChildrenCache() {
-    this._itemChildren = void 0, this.triggerUpdate();
+    this._itemChildren = void 0;
+    this.triggerUpdate();
   }
   renderSubmenu() {
-    const e = u`
+    const slot = html`
       <slot
         name="submenu"
         @slotchange=${this.manageSubmenu}
         @luzmo-menu-item-added-or-updated=${{
-      handleEvent: (t) => {
-        t.clear(t.item);
+      handleEvent: (event) => {
+        event.clear(event.item);
       },
-      capture: !0
+      capture: true
     }}
-        @focusin=${(t) => t.stopPropagation()}
+        @focusin=${(event) => event.stopPropagation()}
       ></slot>
     `;
-    return this.hasSubmenu ? (this.dependencyManager.add("luzmo-overlay"), this.dependencyManager.add("luzmo-popover"), import("../overlay-Cig9r6uU.js").then((t) => t.f), import("../popover-DjX0aAnY.js"), u`
+    if (!this.hasSubmenu) {
+      return slot;
+    }
+    this.dependencyManager.add("luzmo-overlay");
+    this.dependencyManager.add("luzmo-popover");
+    import("../overlay-CN8ISP1F.js").then((n) => n.f);
+    import("../popover-BkbYhl3i.js");
+    return html`
       <luzmo-overlay
         .triggerElement=${this}
         ?disabled=${!this.hasSubmenu}
@@ -723,30 +1102,31 @@ class s extends R(
         .placement=${this.isLTR ? "right-start" : "left-start"}
         .offset=${[-10, -5]}
         .type=${"auto"}
-        @close=${(t) => t.stopPropagation()}
+        @close=${(event) => event.stopPropagation()}
         @slottable-request=${this.handleSlottableRequest}
       >
         <luzmo-popover
-          @change=${(t) => {
-      this.handleSubmenuChange(t), this.open = !1;
+          @change=${(event) => {
+      this.handleSubmenuChange(event);
+      this.open = false;
     }}
           @pointerenter=${this.handleSubmenuPointerenter}
           @pointerleave=${this.handleSubmenuPointerleave}
-          @luzmo-menu-item-added-or-updated=${(t) => t.stopPropagation()}
+          @luzmo-menu-item-added-or-updated=${(event) => event.stopPropagation()}
         >
-          ${e}
+          ${slot}
         </luzmo-popover>
       </luzmo-overlay>
       ${this.renderAngleIcon()}
-    `) : e;
+    `;
   }
   render() {
-    return u`
-      ${this.selected ? u`
+    return html`
+      ${this.selected ? html`
             ${this.renderCheckIcon(
       this.hasIcon ? ["checkmark--withAdjacentIcon"] : []
     )}
-          ` : b}
+          ` : nothing}
       <slot name="icon"></slot>
       <div id="label">
         <slot id="slot"></slot>
@@ -756,34 +1136,53 @@ class s extends R(
       ${this.renderTooltip()}
       ${this.href && this.href.length > 0 ? super.renderAnchor({
       id: "button",
-      ariaHidden: !0,
+      ariaHidden: true,
       className: "button anchor hidden"
-    }) : b}
+    }) : nothing}
       ${this.renderSubmenu()}
     `;
   }
-  manageSubmenu(e) {
-    this.submenuElement = e.target.assignedElements({
-      flatten: !0
-    })[0], this.hasSubmenu = !!this.submenuElement, this.hasSubmenu && this.setAttribute("aria-haspopup", "true");
+  manageSubmenu(event) {
+    this.submenuElement = event.target.assignedElements({
+      flatten: true
+    })[0];
+    this.hasSubmenu = !!this.submenuElement;
+    if (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
-    ));
+  handlePointerdown(event) {
+    if (event.target === this && this.hasSubmenu && this.open) {
+      this.addEventListener("focus", this.handleSubmenuFocus, {
+        once: true
+      });
+      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-${y()}`);
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.setAttribute("tabindex", "-1");
+    this.addEventListener("pointerdown", this.handlePointerdown);
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
+    if (!this.hasAttribute("id")) {
+      this.id = `luzmo-menu-item-${randomID()}`;
+    }
   }
   closeOverlaysForRoot() {
-    var e;
-    this.open || (e = this.menuData.parentMenu) == null || e.closeDescendentOverlays();
+    var _a;
+    if (this.open) {
+      return;
+    }
+    (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
   }
-  handleSubmenuClick(e) {
-    e.composedPath().includes(this.overlayElement) || this.openOverlay();
+  handleSubmenuClick(event) {
+    if (event.composedPath().includes(this.overlayElement)) {
+      return;
+    }
+    this.openOverlay();
   }
   handleSubmenuFocus() {
     requestAnimationFrame(() => {
@@ -792,15 +1191,19 @@ class s extends R(
   }
   handlePointerenter() {
     if (this.leaveTimeout) {
-      clearTimeout(this.leaveTimeout), delete 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;
-    }, X));
+    if (this.open && !this.recentlyLeftChild) {
+      this.leaveTimeout = setTimeout(() => {
+        delete this.leaveTimeout;
+        this.open = false;
+      }, POINTERLEAVE_TIMEOUT);
+    }
   }
   /**
    * When there is a `change` event in the submenu for this item
@@ -809,122 +1212,174 @@ class s extends R(
    * and the root of the tree to have their selection changes and
    * be closed.
    */
-  handleSubmenuChange(e) {
-    var t;
-    e.stopPropagation(), (t = this.menuData.selectionRoot) == null || t.selectOrToggleItem(this);
+  handleSubmenuChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
   }
   handleSubmenuPointerenter() {
-    this.recentlyLeftChild = !0;
+    this.recentlyLeftChild = true;
   }
   handleSubmenuPointerleave() {
     requestAnimationFrame(() => {
-      this.recentlyLeftChild = !1;
+      this.recentlyLeftChild = false;
     });
   }
-  handleSubmenuOpen(e) {
-    this.focused = !1;
-    const t = e.composedPath().find(
-      (o) => o !== this.overlayElement && o.localName === "luzmo-overlay"
+  handleSubmenuOpen(event) {
+    this.focused = false;
+    const parentOverlay = event.composedPath().find(
+      (el) => el !== this.overlayElement && el.localName === "luzmo-overlay"
     );
-    this.overlayElement.parentOverlayToForceClose = t;
+    this.overlayElement.parentOverlayToForceClose = parentOverlay;
   }
   cleanup() {
-    this.open = !1, this.active = !1;
+    this.open = false;
+    this.active = false;
   }
   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
-    }));
+    if (!this.hasSubmenu || this.open || this.disabled) {
+      return;
+    }
+    this.open = true;
+    this.active = true;
+    this.setAttribute("aria-expanded", "true");
+    this.addEventListener("luzmo-closed", this.cleanup, {
+      once: true
+    });
   }
   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");
+    const role = this.getAttribute("role");
+    if (role === "option") {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    } else if (role === "menuitemcheckbox" || role === "menuitemradio") {
+      this.setAttribute("aria-checked", this.selected ? "true" : "false");
+    }
   }
-  setRole(e) {
-    this.setAttribute("role", e), this.updateAriaSelected();
+  setRole(role) {
+    this.setAttribute("role", role);
+    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))
+  updated(changes) {
+    var _a, _b;
+    super.updated(changes);
+    if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
+      this.setAttribute("aria-label", this.label || "");
+    }
+    if (changes.has("active") && (this.active || changes.get("active") !== void 0) && this.active) {
+      (_a = this.menuData.selectionRoot) == null ? void 0 : _a.closeDescendentOverlays();
+    }
+    if (this.anchorElement) {
+      this.anchorElement.addEventListener("focus", this.proxyFocus);
+      this.anchorElement.tabIndex = -1;
+    }
+    if (changes.has("selected")) {
+      this.updateAriaSelected();
+    }
+    if (changes.has("hasSubmenu") && (this.hasSubmenu || changes.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();
+        const options = { signal: this.abortControllerSubmenu.signal };
+        this.addEventListener("click", this.handleSubmenuClick, options);
+        this.addEventListener("pointerenter", this.handlePointerenter, options);
+        this.addEventListener("pointerleave", this.handlePointerleave, options);
+        this.addEventListener("luzmo-opened", this.handleSubmenuOpen, options);
+      } else {
+        (_b = this.abortControllerSubmenu) == null ? void 0 : _b.abort();
+      }
+    }
   }
   connectedCallback() {
-    super.connectedCallback(), this.triggerUpdate();
+    super.connectedCallback();
+    this.triggerUpdate();
   }
   disconnectedCallback() {
-    this.menuData.cleanupSteps.forEach((e) => e(this)), this.menuData = {
+    this.menuData.cleanupSteps.forEach((removal) => removal(this));
+    this.menuData = {
       focusRoot: void 0,
       parentMenu: void 0,
       selectionRoot: void 0,
       cleanupSteps: []
-    }, super.disconnectedCallback();
+    };
+    super.disconnectedCallback();
   }
   async triggerUpdate() {
-    this.willDispatchUpdate || (this.willDispatchUpdate = !0, await new Promise((e) => requestAnimationFrame(e)), this.dispatchUpdate());
+    if (this.willDispatchUpdate) {
+      return;
+    }
+    this.willDispatchUpdate = true;
+    await new Promise((ready) => requestAnimationFrame(ready));
+    this.dispatchUpdate();
   }
   dispatchUpdate() {
-    this.isConnected && (this.dispatchEvent(new te(this)), this.willDispatchUpdate = !1);
+    if (!this.isConnected) {
+      return;
+    }
+    this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
+    this.willDispatchUpdate = false;
   }
 }
-c([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "active", 2);
-c([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "focused", 2);
-c([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "selected", 2);
-c([
-  a({ type: String })
-], s.prototype, "value", 1);
-c([
-  a({ type: Boolean, reflect: !0, attribute: "has-submenu" })
-], s.prototype, "hasSubmenu", 2);
-c([
-  a({ type: String })
-], s.prototype, "tooltip", 2);
-c([
-  a({ type: String, attribute: "tooltip-placement" })
-], s.prototype, "tooltipPlacement", 2);
-c([
-  p("slot:not([name])")
-], s.prototype, "contentSlot", 2);
-c([
-  p('slot[name="icon"]')
-], s.prototype, "iconSlot", 2);
-c([
-  a({
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "selected", 2);
+__decorateClass([
+  property({ type: String })
+], LuzmoMenuItem.prototype, "value", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-submenu" })
+], LuzmoMenuItem.prototype, "hasSubmenu", 2);
+__decorateClass([
+  property({ type: String })
+], LuzmoMenuItem.prototype, "tooltip", 2);
+__decorateClass([
+  property({ type: String, attribute: "tooltip-placement" })
+], LuzmoMenuItem.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  query("slot:not([name])")
+], LuzmoMenuItem.prototype, "contentSlot", 2);
+__decorateClass([
+  query('slot[name="icon"]')
+], LuzmoMenuItem.prototype, "iconSlot", 2);
+__decorateClass([
+  property({
     type: Boolean,
-    reflect: !0,
+    reflect: true,
     attribute: "no-wrap",
     hasChanged() {
-      return !1;
+      return false;
     }
   })
-], s.prototype, "noWrap", 2);
-c([
-  p(".anchor")
-], s.prototype, "anchorElement", 2);
-c([
-  p("luzmo-overlay")
-], s.prototype, "overlayElement", 2);
-c([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "open", 2);
-customElements.get("luzmo-menu") || customElements.define("luzmo-menu", m);
-customElements.get("luzmo-menu-divider") || customElements.define("luzmo-menu-divider", V);
-customElements.get("luzmo-menu-group") || customElements.define("luzmo-menu-group", k);
-customElements.get("luzmo-menu-item") || customElements.define("luzmo-menu-item", s);
+], LuzmoMenuItem.prototype, "noWrap", 2);
+__decorateClass([
+  query(".anchor")
+], LuzmoMenuItem.prototype, "anchorElement", 2);
+__decorateClass([
+  query("luzmo-overlay")
+], LuzmoMenuItem.prototype, "overlayElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "open", 2);
+if (!customElements.get("luzmo-menu")) {
+  customElements.define("luzmo-menu", LuzmoMenu);
+}
+if (!customElements.get("luzmo-menu-divider")) {
+  customElements.define("luzmo-menu-divider", LuzmoMenuDivider);
+}
+if (!customElements.get("luzmo-menu-group")) {
+  customElements.define("luzmo-menu-group", LuzmoMenuGroup);
+}
+if (!customElements.get("luzmo-menu-item")) {
+  customElements.define("luzmo-menu-item", LuzmoMenuItem);
+}
 export {
-  m as LuzmoMenu,
-  V as LuzmoMenuDivider,
-  k as LuzmoMenuGroup,
-  s as LuzmoMenuItem,
-  te as MenuItemAddedOrUpdatedEvent
+  LuzmoMenu,
+  LuzmoMenuDivider,
+  LuzmoMenuGroup,
+  LuzmoMenuItem,
+  MenuItemAddedOrUpdatedEvent
 };