@m3e/nav-menu 1.1.7 → 1.1.9

package/dist/index.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { LitElement, html, unsafeCSS, css } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { Selected, Disabled, EventAttribute, AttachInternals, Role, DesignToken, hasAssignedNodes, scrollIntoViewIfNeeded, PressedController, FocusController } from '@m3e/core';
 import { selectionManager, SelectionManager } from '@m3e/core/a11y';
 import { M3eDirectionality } from '@m3e/core/bidi';
@@ -1061,10 +1061,17 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
     bubbles: true
   }));
 };
+(() => {
+  if (document) {
+    const lightDomStyle = new CSSStyleSheet();
+    lightDomStyle.replaceSync(css`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`.toString());
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
+  }
+})();
 /** The styles of the element. */
-M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; position: relative; font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
         background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .toggle { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)}; } :host(:not(.-with-icon)) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(.-has-items)) .toggle, :host(:not(.-has-items)) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(.-has-items):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(.-has-items):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected].-has-items:not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } ::slotted(m3e-divider) { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); } ::slotted(m3e-nav-menu-item:first-of-type) { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } ::slotted(m3e-nav-menu-item:last-of-type) { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(.-has-items):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected].-has-items:not(:disabled)) .base { background-color: unset; color: ButtonText; } }`;
+        ${DesignToken.motion.easing.standard}`)}; } :host(:not(.-with-icon)) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(.-has-items)) .toggle, :host(:not(.-has-items)) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(.-has-items):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(.-has-items):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected].-has-items:not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(.-has-items):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected].-has-items:not(:disabled)) .base { background-color: unset; color: ButtonText; } }`;
 __decorate([e$1(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
 __decorate([e$1(".focus-ring")], M3eNavMenuItemElement.prototype, "focusRing", void 0);
 __decorate([e$1(".ripple")], M3eNavMenuItemElement.prototype, "ripple", void 0);
@@ -1243,7 +1250,7 @@ let M3eNavMenuElement = M3eNavMenuElement_1 = class M3eNavMenuElement extends Ro
   }
   /** @inheritdoc */
   render() {
-    return html`<slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleSlotChange)}"></slot>`;
+    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleSlotChange)}"></slot></div>`;
   }
 };
 _M3eNavMenuElement_ignoreFocusVisible = new WeakMap();
@@ -1377,8 +1384,15 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
     item.focusRing?.hide();
   }
 };
+(() => {
+  if (document) {
+    const lightDomStyle = new CSSStyleSheet();
+    lightDomStyle.replaceSync(css`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`.toString());
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
+  }
+})();
 /** The styles of the element. */
-M3eNavMenuElement.styles = css`:host { display: flex; flex-direction: column; outline: none; overflow-y: auto; overflow-x: hidden; position: relative; min-height: 0; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-divider) { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`;
+M3eNavMenuElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
 /** @private */
 M3eNavMenuElement.__nextId = 0;
 M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([t$2("m3e-nav-menu")], M3eNavMenuElement);
@@ -1448,7 +1462,7 @@ let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenu
   }
   /** @inheritdoc */
   render() {
-    return html`<slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_instances, "m", _M3eNavMenuItemGroupElement_handleLabelSlotChange)}"></slot><slot></slot>`;
+    return html`<div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_instances, "m", _M3eNavMenuItemGroupElement_handleLabelSlotChange)}"></slot></div><slot></slot>`;
   }
 };
 _M3eNavMenuItemGroupElement_labelId = new WeakMap();
@@ -1472,9 +1486,10 @@ _M3eNavMenuItemGroupElement_handleLabelSlotChange = function _M3eNavMenuItemGrou
       this.removeAttribute("aria-labelledby");
     }
   }
+  this.classList.toggle("-has-label", __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f") !== undefined);
 };
 /** The styles of the element. */
-M3eNavMenuItemGroupElement.styles = css`:host { display: contents; } ::slotted([slot="label"]) { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(.-divided) ::slotted([slot="label"]) { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(.-divided)) ::slotted([slot="label"]) { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
+M3eNavMenuItemGroupElement.styles = css`:host { display: contents; } :host(:not(.-has-label)) .label { display: none; } .label { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(.-divided) .label { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(.-divided)) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
 /** @private */
 M3eNavMenuItemGroupElement.__nextId = 0;
 M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([t$2("m3e-nav-menu-item-group")], M3eNavMenuItemGroupElement);