@m3e/web 2.5.1 → 2.5.2

package/dist/nav-bar.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, html, css, nothing } from 'lit';
 import { state, property, query } from 'lit/decorators.js';
-import { ReconnectedCallback, AttachInternals, Role, setCustomState, DesignToken, customElement, LinkButton, Selected, KeyboardClick, Focusable, DisabledInteractive, Disabled, renderPseudoLink } from '@m3e/web/core';
+import { ReconnectedCallback, AttachInternals, Role, setCustomState, DesignToken, customElement, LinkButton, Selected, KeyboardClick, Focusable, DisabledInteractive, Disabled, renderPseudoLink, hasAssignedNodes } from '@m3e/web/core';
 import { SelectionManager, selectionManager } from '@m3e/web/core/a11y';
 import { M3eBreakpointObserver, Breakpoint } from '@m3e/web/core/layout';
 
@@ -142,7 +142,7 @@ __decorate([property({
 })], M3eNavBarElement.prototype, "mode", void 0);
 M3eNavBarElement = __decorate([customElement("m3e-nav-bar")], M3eNavBarElement);
 
-var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemElement_handleClick;
+var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemElement_handleClick, _M3eNavItemElement_handleSelectedIconSlotChange;
 /**
  * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.
  *
@@ -268,7 +268,7 @@ let M3eNavItemElement = class M3eNavItemElement extends LinkButton(Selected(Keyb
   /** @inheritdoc */
   render() {
     const disabled = this.disabled || this.disabledInteractive;
-    return html`${this.orientation === "vertical" ? html`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>` : nothing}<div class="outer">${this[renderPseudoLink]()}<div class="inner">${this.orientation === "horizontal" ? html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>` : nothing}<m3e-state-layer class="state-layer" ?disabled="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon"><slot name="icon" aria-hidden="true"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`;
+    return html`${this.orientation === "vertical" ? html`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>` : nothing}<div class="outer">${this[renderPseudoLink]()}<div class="inner">${this.orientation === "horizontal" ? html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>` : nothing}<m3e-state-layer class="state-layer" ?disabled="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon" aria-hidden="true"><slot name="icon"></slot><slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_handleSelectedIconSlotChange)}"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`;
   }
 };
 _M3eNavItemElement_clickHandler = new WeakMap();
@@ -289,8 +289,11 @@ _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
     this.selected = false;
   }
 };
+_M3eNavItemElement_handleSelectedIconSlotChange = function _M3eNavItemElement_handleSelectedIconSlotChange(e) {
+  setCustomState(this, "-with-selected-icon", hasAssignedNodes(e.target));
+};
 /** The styles of the element. */
-M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
+M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:state(-with-selected-icon))) slot[name="selected-icon"], :host([selected]:state(-with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
 __decorate([query(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);

package/dist/nav-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar.js","sources":["../../src/nav-bar/NavBarElement.ts","../../src/nav-bar/NavItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport { AttachInternals, customElement, DesignToken, ReconnectedCallback, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eNavItemElement } from \"./NavItemElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\nimport { NavBarMode } from \"./NavBarMode\";\r\n\r\n/**\r\n * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\r\n *\r\n * @description\r\n * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in\r\n * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming\r\n * via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-bar\r\n *\r\n * @slot - Renders the items of the bar.\r\n *\r\n * @attr mode - The mode in which items in the bar are presented.\r\n *\r\n * @fires change - Emitted when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-bar-height - Height of the navigation bar.\r\n * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.\r\n * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.\r\n */\r\n@customElement(\"m3e-nav-bar\")\r\nexport class M3eNavBarElement extends ReconnectedCallback(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      min-height: var(--m3e-nav-bar-height, 4rem);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: inherit;\r\n      height: inherit;\r\n      width: 100%;\r\n      background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer});\r\n      --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);\r\n    }\r\n  `;\r\n\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eNavItemElement>().disableRovingTabIndex();\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _mode?: Exclude<NavBarMode, \"auto\">;\r\n\r\n  /**\r\n   * The mode in which items in the bar are presented.\r\n   * @default \"compact\"\r\n   */\r\n  @property({ reflect: true }) mode: NavBarMode = \"compact\";\r\n\r\n  /** The items of the bar. */\r\n  get items(): readonly M3eNavItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /** The selected item. */\r\n  get selected(): M3eNavItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The current mode applied to the bar. */\r\n  get currentMode(): Exclude<NavBarMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"compact\" ? \"expanded\" : \"compact\");\r\n  }\r\n  set currentMode(value: Exclude<NavBarMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.mode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._mode = undefined;\r\n        this._updateItems();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this._updateItems();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"compact\" : \"expanded\";\r\n      this._updateItems();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @change=\"${this.#handleChange}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-item\")]);\r\n    this._updateItems();\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateItems(): void {\r\n    const orientation: NavItemOrientation = this.currentMode === \"compact\" ? \"vertical\" : \"horizontal\";\r\n    this._updateOrientation(orientation);\r\n    setCustomState(this, \"-compact\", orientation === \"vertical\");\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateOrientation(orientation: NavItemOrientation): void {\r\n    this[selectionManager].items.forEach((x) => (x.orientation = orientation));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-bar\": M3eNavBarElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavBarElement } from \"./NavBarElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\n\r\n/**\r\n * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\r\n *\r\n * @description\r\n * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars\r\n * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,\r\n * orientation, and extensive theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr orientation - The layout orientation of the item.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.\r\n * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.\r\n * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.\r\n * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.\r\n * @cssprop --m3e-nav-item-shape - Border radius of the nav item.\r\n * @cssprop --m3e-nav-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.\r\n * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.\r\n * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.\r\n * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.\r\n * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.\r\n * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.\r\n * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.\r\n * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.\r\n * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.\r\n * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.\r\n * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.\r\n * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.\r\n * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.\r\n * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.\r\n */\r\n@customElement(\"m3e-nav-item\")\r\nexport class M3eNavItemElement extends LinkButton(\r\n  Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      position: relative;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1;\r\n      font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-nav-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-nav-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n      border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full});\r\n      min-width: var(--_nav-item-min-width);\r\n      align-self: var(--_nav-item-align-self);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      max-width: fit-content;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    .outer {\r\n      height: 100%;\r\n    }\r\n    .outer,\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: var(--_nav-item-justify-content, center);\r\n      position: relative;\r\n      border-radius: inherit;\r\n    }\r\n    .icon-wrapper {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"selected-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-inactive-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-inactive-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-inactive-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-active-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-active-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-active-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n      background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([orientation=\"vertical\"]) .outer {\r\n      align-self: stretch;\r\n      align-items: flex-start;\r\n    }\r\n    :host([orientation=\"vertical\"]) .label {\r\n      text-align: center;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple {\r\n      top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      bottom: unset;\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .icon {\r\n      top: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n      left: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .focus-ring {\r\n      border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .icon-wrapper {\r\n      width: var(--m3e-nav-item-icon-size, 1.5rem);\r\n      height: var(--m3e-nav-item-icon-size, 1.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      padding: var(--m3e-horizontal-nav-item-padding, 1rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      column-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:disabled) .label,\r\n    :host([disabled-interactive]) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon,\r\n    :host([disabled-interactive]) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:disabled) .label,\r\n      :host([disabled-interactive]) .label,\r\n      :host(:disabled) .icon,\r\n      :host([disabled-interactive]) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n        background-color: ButtonText;\r\n      }\r\n      :host([orientation=\"vertical\"][selected]:not(:disabled):not([disabled-interactive])) .label {\r\n        color: ButtonText;\r\n      }\r\n      :host([orientation=\"horizontal\"][selected]:not(:disabled):not([disabled-interactive])) .label,\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /**\r\n   * The layout orientation of the item.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: NavItemOrientation = \"vertical\";\r\n\r\n  /** The navigation bar to which this item belongs. */\r\n  get navBar(): M3eNavBarElement | null {\r\n    return this.closest(\"m3e-nav-bar\") ?? this.closest(\"m3e-nav-rail\") ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaPressed = null;\r\n      this.ariaCurrent = `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\"m3e-icon\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"orientation\")) {\r\n      this._focusRing?.attach(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    return html`${this.orientation === \"vertical\"\r\n        ? html`<m3e-focus-ring class=\"focus-ring\" inward></m3e-focus-ring>`\r\n        : nothing}\r\n      <div class=\"outer\">\r\n        ${this[renderPseudoLink]()}\r\n        <div class=\"inner\">\r\n          ${this.orientation === \"horizontal\" ? html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>` : nothing}\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled}\"></m3e-state-layer>\r\n          <m3e-ripple class=\"ripple\" centered ?disabled=\"${disabled}\"></m3e-ripple>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n          <div class=\"base\">\r\n            <div class=\"icon-wrapper\" aria-hidden=\"true\">\r\n              <div class=\"icon\">\r\n                <slot name=\"icon\" aria-hidden=\"true\"></slot>\r\n              </div>\r\n            </div>\r\n            <div class=\"label\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-item\": M3eNavItemElement;\r\n  }\r\n}\r\n"],"names":["M3eNavBarElement","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","SelectionManager","disableRovingTabIndex","_M3eNavBarElement_breakpointUnobserve","set","mode","items","selectionManager","selected","selectedItems","currentMode","_mode","value","disconnectedCallback","undefined","__classPrivateFieldGet","call","reconnectedCallback","_M3eNavBarElement_instances","_M3eNavBarElement_initBreakpointMonitoring","willUpdate","changedProperties","has","_updateItems","render","html","_M3eNavBarElement_handleChange","_M3eNavBarElement_handleSlotChange","orientation","_updateOrientation","setCustomState","forEach","x","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","setItems","querySelectorAll","e","stopPropagation","dispatchEvent","Event","bubbles","styles","css","DesignToken","scrollbar","thinWidth","color","surfaceContainer","__decorate","state","prototype","property","reflect","customElement","M3eNavItemElement","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_clickHandler","navBar","closest","connectedCallback","addEventListener","capture","removeEventListener","update","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","nothing","renderPseudoLink","defaultPrevented","composed","cancelable","typescale","standard","label","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","onSurface","query"],"mappings":"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"}
+{"version":3,"file":"nav-bar.js","sources":["../../src/nav-bar/NavBarElement.ts","../../src/nav-bar/NavItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport { AttachInternals, customElement, DesignToken, ReconnectedCallback, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eNavItemElement } from \"./NavItemElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\nimport { NavBarMode } from \"./NavBarMode\";\r\n\r\n/**\r\n * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\r\n *\r\n * @description\r\n * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in\r\n * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming\r\n * via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-bar\r\n *\r\n * @slot - Renders the items of the bar.\r\n *\r\n * @attr mode - The mode in which items in the bar are presented.\r\n *\r\n * @fires change - Emitted when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-bar-height - Height of the navigation bar.\r\n * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.\r\n * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.\r\n */\r\n@customElement(\"m3e-nav-bar\")\r\nexport class M3eNavBarElement extends ReconnectedCallback(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      min-height: var(--m3e-nav-bar-height, 4rem);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: inherit;\r\n      height: inherit;\r\n      width: 100%;\r\n      background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer});\r\n      --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);\r\n    }\r\n  `;\r\n\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eNavItemElement>().disableRovingTabIndex();\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _mode?: Exclude<NavBarMode, \"auto\">;\r\n\r\n  /**\r\n   * The mode in which items in the bar are presented.\r\n   * @default \"compact\"\r\n   */\r\n  @property({ reflect: true }) mode: NavBarMode = \"compact\";\r\n\r\n  /** The items of the bar. */\r\n  get items(): readonly M3eNavItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /** The selected item. */\r\n  get selected(): M3eNavItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The current mode applied to the bar. */\r\n  get currentMode(): Exclude<NavBarMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"compact\" ? \"expanded\" : \"compact\");\r\n  }\r\n  set currentMode(value: Exclude<NavBarMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.mode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._mode = undefined;\r\n        this._updateItems();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this._updateItems();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"compact\" : \"expanded\";\r\n      this._updateItems();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @change=\"${this.#handleChange}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-item\")]);\r\n    this._updateItems();\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateItems(): void {\r\n    const orientation: NavItemOrientation = this.currentMode === \"compact\" ? \"vertical\" : \"horizontal\";\r\n    this._updateOrientation(orientation);\r\n    setCustomState(this, \"-compact\", orientation === \"vertical\");\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateOrientation(orientation: NavItemOrientation): void {\r\n    this[selectionManager].items.forEach((x) => (x.orientation = orientation));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-bar\": M3eNavBarElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  hasAssignedNodes,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavBarElement } from \"./NavBarElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\n\r\n/**\r\n * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\r\n *\r\n * @description\r\n * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars\r\n * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,\r\n * orientation, and extensive theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr orientation - The layout orientation of the item.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.\r\n * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.\r\n * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.\r\n * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.\r\n * @cssprop --m3e-nav-item-shape - Border radius of the nav item.\r\n * @cssprop --m3e-nav-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.\r\n * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.\r\n * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.\r\n * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.\r\n * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.\r\n * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.\r\n * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.\r\n * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.\r\n * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.\r\n * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.\r\n * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.\r\n * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.\r\n * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.\r\n * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.\r\n */\r\n@customElement(\"m3e-nav-item\")\r\nexport class M3eNavItemElement extends LinkButton(\r\n  Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      position: relative;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1;\r\n      font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-nav-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-nav-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n      border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full});\r\n      min-width: var(--_nav-item-min-width);\r\n      align-self: var(--_nav-item-align-self);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      max-width: fit-content;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    .outer {\r\n      height: 100%;\r\n    }\r\n    .outer,\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: var(--_nav-item-justify-content, center);\r\n      position: relative;\r\n      border-radius: inherit;\r\n    }\r\n    .icon-wrapper {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"selected-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([selected])) slot[name=\"selected-icon\"],\r\n    :host(:not(:state(-with-selected-icon))) slot[name=\"selected-icon\"],\r\n    :host([selected]:state(-with-selected-icon)) slot[name=\"icon\"] {\r\n      display: none;\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-inactive-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-inactive-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-inactive-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-active-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-active-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-active-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n      background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([orientation=\"vertical\"]) .outer {\r\n      align-self: stretch;\r\n      align-items: flex-start;\r\n    }\r\n    :host([orientation=\"vertical\"]) .label {\r\n      text-align: center;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple {\r\n      top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      bottom: unset;\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .icon {\r\n      top: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n      left: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .focus-ring {\r\n      border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .icon-wrapper {\r\n      width: var(--m3e-nav-item-icon-size, 1.5rem);\r\n      height: var(--m3e-nav-item-icon-size, 1.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      padding: var(--m3e-horizontal-nav-item-padding, 1rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      column-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:disabled) .label,\r\n    :host([disabled-interactive]) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon,\r\n    :host([disabled-interactive]) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:disabled) .label,\r\n      :host([disabled-interactive]) .label,\r\n      :host(:disabled) .icon,\r\n      :host([disabled-interactive]) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n        background-color: ButtonText;\r\n      }\r\n      :host([orientation=\"vertical\"][selected]:not(:disabled):not([disabled-interactive])) .label {\r\n        color: ButtonText;\r\n      }\r\n      :host([orientation=\"horizontal\"][selected]:not(:disabled):not([disabled-interactive])) .label,\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /**\r\n   * The layout orientation of the item.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: NavItemOrientation = \"vertical\";\r\n\r\n  /** The navigation bar to which this item belongs. */\r\n  get navBar(): M3eNavBarElement | null {\r\n    return this.closest(\"m3e-nav-bar\") ?? this.closest(\"m3e-nav-rail\") ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaPressed = null;\r\n      this.ariaCurrent = `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\"m3e-icon\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"orientation\")) {\r\n      this._focusRing?.attach(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    return html`${this.orientation === \"vertical\"\r\n        ? html`<m3e-focus-ring class=\"focus-ring\" inward></m3e-focus-ring>`\r\n        : nothing}\r\n      <div class=\"outer\">\r\n        ${this[renderPseudoLink]()}\r\n        <div class=\"inner\">\r\n          ${this.orientation === \"horizontal\" ? html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>` : nothing}\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled}\"></m3e-state-layer>\r\n          <m3e-ripple class=\"ripple\" centered ?disabled=\"${disabled}\"></m3e-ripple>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n          <div class=\"base\">\r\n            <div class=\"icon-wrapper\" aria-hidden=\"true\">\r\n              <div class=\"icon\" aria-hidden=\"true\">\r\n                <slot name=\"icon\"></slot>\r\n                <slot name=\"selected-icon\" @slotchange=\"${this.#handleSelectedIconSlotChange}\"></slot>\r\n              </div>\r\n            </div>\r\n            <div class=\"label\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-selected-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-item\": M3eNavItemElement;\r\n  }\r\n}\r\n"],"names":["M3eNavBarElement","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","SelectionManager","disableRovingTabIndex","_M3eNavBarElement_breakpointUnobserve","set","mode","items","selectionManager","selected","selectedItems","currentMode","_mode","value","disconnectedCallback","undefined","__classPrivateFieldGet","call","reconnectedCallback","_M3eNavBarElement_instances","_M3eNavBarElement_initBreakpointMonitoring","willUpdate","changedProperties","has","_updateItems","render","html","_M3eNavBarElement_handleChange","_M3eNavBarElement_handleSlotChange","orientation","_updateOrientation","setCustomState","forEach","x","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","setItems","querySelectorAll","e","stopPropagation","dispatchEvent","Event","bubbles","styles","css","DesignToken","scrollbar","thinWidth","color","surfaceContainer","__decorate","state","prototype","property","reflect","customElement","M3eNavItemElement","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_clickHandler","navBar","closest","connectedCallback","addEventListener","capture","removeEventListener","update","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","nothing","renderPseudoLink","_M3eNavItemElement_instances","_M3eNavItemElement_handleSelectedIconSlotChange","defaultPrevented","composed","cancelable","hasAssignedNodes","target","typescale","standard","label","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","onSurface","query"],"mappings":"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"}

package/dist/nav-bar.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{LitElement as a,html as o,css as r,nothing as n}from"lit";import{state as l,property as s,query as c}from"lit/decorators.js";import{ReconnectedCallback as d,AttachInternals as h,Role as m,setCustomState as v,DesignToken as b,customElement as p,LinkButton as u,Selected as f,KeyboardClick as g,Focusable as y,DisabledInteractive as w,Disabled as x,renderPseudoLink as $}from"@m3e/web/core";import{SelectionManager as k,selectionManager as _}from"@m3e/web/core/a11y";import{M3eBreakpointObserver as z,Breakpoint as S}from"@m3e/web/core/layout";var C,E,I,j,B,W;let M=class extends(d(h(m(a,"navigation")))){constructor(){super(...arguments),C.add(this),this[W]=(new k).disableRovingTabIndex(),E.set(this,void 0),this.mode="compact"}get items(){return this[_].items}get selected(){return this[_].selectedItems[0]??null}get currentMode(){return this._mode??("compact"!==this.mode?"expanded":"compact")}set currentMode(e){this._mode=e}disconnectedCallback(){super.disconnectedCallback(),this._mode=void 0,e(this,E,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.mode&&e(this,C,"m",I).call(this)}willUpdate(t){super.willUpdate(t),t.has("mode")&&(e(this,E,"f")?.call(this),"auto"===this.mode?e(this,C,"m",I).call(this):(this._mode=void 0,this._updateItems())),t.has("_mode")&&this._updateItems()}render(){return o`<div class="base"><slot @change="${e(this,C,"m",B)}" @slotchange="${e(this,C,"m",j)}"></slot></div>`}_updateItems(){const e="compact"===this.currentMode?"vertical":"horizontal";this._updateOrientation(e),v(this,"-compact","vertical"===e)}_updateOrientation(e){this[_].items.forEach(t=>t.orientation=e)}};var T,L,R;E=new WeakMap,C=new WeakSet,W=_,I=function(){t(this,E,z.observe([S.XSmall,S.Small],e=>{this._mode=e.get(S.XSmall)||e.get(S.Small)?"compact":"expanded",this._updateItems()}),"f")},j=function(){this[_].setItems([...this.querySelectorAll("m3e-nav-item")]),this._updateItems()},B=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},M.styles=r`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${b.scrollbar.thinWidth}; scrollbar-color: ${b.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${b.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`,i([l()],M.prototype,"_mode",void 0),i([s({reflect:!0})],M.prototype,"mode",void 0),M=i([p("m3e-nav-bar")],M);let U=class extends(u(f(g(y(w(x(h(m(a,"button"),!0)))))))){constructor(){super(...arguments),T.add(this),L.set(this,t=>e(this,T,"m",R).call(this,t)),this.orientation="vertical"}get navBar(){return this.closest("m3e-nav-bar")??this.closest("m3e-nav-rail")??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,L,"f"),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,L,"f"),{capture:!0})}update(e){if(super.update(e),e.has("selected")){this.ariaSelected=null,this.ariaPressed=null,this.ariaCurrent=`${this.selected}`;for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected);this.navBar?.[_].notifySelectionChange(this)}}updated(e){super.updated(e),e.has("orientation")&&this._focusRing?.attach(this)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){const e=this.disabled||this.disabledInteractive;return o`${"vertical"===this.orientation?o`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>`:n}<div class="outer">${this[$]()}<div class="inner">${"horizontal"===this.orientation?o`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>`:n}<m3e-state-layer class="state-layer" ?disabled="${e}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${e}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon"><slot name="icon" aria-hidden="true"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`}};L=new WeakMap,T=new WeakSet,R=function(e){e.defaultPrevented||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.navBar?.[_].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},U.styles=r`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${b.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${b.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${b.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${b.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${b.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${b.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${b.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${b.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${b.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${b.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${b.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${b.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${b.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${b.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${b.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`,i([c(".focus-ring")],U.prototype,"_focusRing",void 0),i([c(".state-layer")],U.prototype,"_stateLayer",void 0),i([c(".ripple")],U.prototype,"_ripple",void 0),i([s({reflect:!0})],U.prototype,"orientation",void 0),U=i([p("m3e-nav-item")],U);export{M as M3eNavBarElement,U as M3eNavItemElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{LitElement as a,html as o,css as n,nothing as r}from"lit";import{state as l,property as s,query as c}from"lit/decorators.js";import{ReconnectedCallback as d,AttachInternals as h,Role as m,setCustomState as v,DesignToken as p,customElement as b,LinkButton as u,Selected as g,KeyboardClick as f,Focusable as y,DisabledInteractive as w,Disabled as x,renderPseudoLink as $,hasAssignedNodes as k}from"@m3e/web/core";import{SelectionManager as _,selectionManager as z}from"@m3e/web/core/a11y";import{M3eBreakpointObserver as S,Breakpoint as C}from"@m3e/web/core/layout";var E,I,j,B,W,M;let T=class extends(d(h(m(a,"navigation")))){constructor(){super(...arguments),E.add(this),this[M]=(new _).disableRovingTabIndex(),I.set(this,void 0),this.mode="compact"}get items(){return this[z].items}get selected(){return this[z].selectedItems[0]??null}get currentMode(){return this._mode??("compact"!==this.mode?"expanded":"compact")}set currentMode(e){this._mode=e}disconnectedCallback(){super.disconnectedCallback(),this._mode=void 0,e(this,I,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.mode&&e(this,E,"m",j).call(this)}willUpdate(t){super.willUpdate(t),t.has("mode")&&(e(this,I,"f")?.call(this),"auto"===this.mode?e(this,E,"m",j).call(this):(this._mode=void 0,this._updateItems())),t.has("_mode")&&this._updateItems()}render(){return o`<div class="base"><slot @change="${e(this,E,"m",W)}" @slotchange="${e(this,E,"m",B)}"></slot></div>`}_updateItems(){const e="compact"===this.currentMode?"vertical":"horizontal";this._updateOrientation(e),v(this,"-compact","vertical"===e)}_updateOrientation(e){this[z].items.forEach(t=>t.orientation=e)}};var L,R,U,A;I=new WeakMap,E=new WeakSet,M=z,j=function(){t(this,I,S.observe([C.XSmall,C.Small],e=>{this._mode=e.get(C.XSmall)||e.get(C.Small)?"compact":"expanded",this._updateItems()}),"f")},B=function(){this[z].setItems([...this.querySelectorAll("m3e-nav-item")]),this._updateItems()},W=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},T.styles=n`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${p.scrollbar.thinWidth}; scrollbar-color: ${p.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${p.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`,i([l()],T.prototype,"_mode",void 0),i([s({reflect:!0})],T.prototype,"mode",void 0),T=i([b("m3e-nav-bar")],T);let P=class extends(u(g(f(y(w(x(h(m(a,"button"),!0)))))))){constructor(){super(...arguments),L.add(this),R.set(this,t=>e(this,L,"m",U).call(this,t)),this.orientation="vertical"}get navBar(){return this.closest("m3e-nav-bar")??this.closest("m3e-nav-rail")??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,R,"f"),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,R,"f"),{capture:!0})}update(e){if(super.update(e),e.has("selected")){this.ariaSelected=null,this.ariaPressed=null,this.ariaCurrent=`${this.selected}`;for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected);this.navBar?.[z].notifySelectionChange(this)}}updated(e){super.updated(e),e.has("orientation")&&this._focusRing?.attach(this)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){const t=this.disabled||this.disabledInteractive;return o`${"vertical"===this.orientation?o`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>`:r}<div class="outer">${this[$]()}<div class="inner">${"horizontal"===this.orientation?o`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>`:r}<m3e-state-layer class="state-layer" ?disabled="${t}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${t}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon" aria-hidden="true"><slot name="icon"></slot><slot name="selected-icon" @slotchange="${e(this,L,"m",A)}"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`}};R=new WeakMap,L=new WeakSet,U=function(e){e.defaultPrevented||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.navBar?.[z].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},A=function(e){v(this,"-with-selected-icon",k(e.target))},P.styles=n`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${p.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${p.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${p.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${p.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${p.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:state(-with-selected-icon))) slot[name="selected-icon"], :host([selected]:state(-with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${p.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${p.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${p.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${p.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${p.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${p.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${p.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${p.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${p.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${p.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${p.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${p.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${p.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${p.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`,i([c(".focus-ring")],P.prototype,"_focusRing",void 0),i([c(".state-layer")],P.prototype,"_stateLayer",void 0),i([c(".ripple")],P.prototype,"_ripple",void 0),i([s({reflect:!0})],P.prototype,"orientation",void 0),P=i([b("m3e-nav-item")],P);export{T as M3eNavBarElement,P as M3eNavItemElement};
 //# sourceMappingURL=nav-bar.min.js.map

package/dist/nav-bar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar.min.js","sources":["../../src/nav-bar/NavBarElement.ts","../../src/nav-bar/NavItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport { AttachInternals, customElement, DesignToken, ReconnectedCallback, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eNavItemElement } from \"./NavItemElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\nimport { NavBarMode } from \"./NavBarMode\";\r\n\r\n/**\r\n * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\r\n *\r\n * @description\r\n * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in\r\n * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming\r\n * via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-bar\r\n *\r\n * @slot - Renders the items of the bar.\r\n *\r\n * @attr mode - The mode in which items in the bar are presented.\r\n *\r\n * @fires change - Emitted when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-bar-height - Height of the navigation bar.\r\n * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.\r\n * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.\r\n */\r\n@customElement(\"m3e-nav-bar\")\r\nexport class M3eNavBarElement extends ReconnectedCallback(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      min-height: var(--m3e-nav-bar-height, 4rem);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: inherit;\r\n      height: inherit;\r\n      width: 100%;\r\n      background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer});\r\n      --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);\r\n    }\r\n  `;\r\n\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eNavItemElement>().disableRovingTabIndex();\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _mode?: Exclude<NavBarMode, \"auto\">;\r\n\r\n  /**\r\n   * The mode in which items in the bar are presented.\r\n   * @default \"compact\"\r\n   */\r\n  @property({ reflect: true }) mode: NavBarMode = \"compact\";\r\n\r\n  /** The items of the bar. */\r\n  get items(): readonly M3eNavItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /** The selected item. */\r\n  get selected(): M3eNavItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The current mode applied to the bar. */\r\n  get currentMode(): Exclude<NavBarMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"compact\" ? \"expanded\" : \"compact\");\r\n  }\r\n  set currentMode(value: Exclude<NavBarMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.mode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._mode = undefined;\r\n        this._updateItems();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this._updateItems();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"compact\" : \"expanded\";\r\n      this._updateItems();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @change=\"${this.#handleChange}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-item\")]);\r\n    this._updateItems();\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateItems(): void {\r\n    const orientation: NavItemOrientation = this.currentMode === \"compact\" ? \"vertical\" : \"horizontal\";\r\n    this._updateOrientation(orientation);\r\n    setCustomState(this, \"-compact\", orientation === \"vertical\");\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateOrientation(orientation: NavItemOrientation): void {\r\n    this[selectionManager].items.forEach((x) => (x.orientation = orientation));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-bar\": M3eNavBarElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavBarElement } from \"./NavBarElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\n\r\n/**\r\n * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\r\n *\r\n * @description\r\n * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars\r\n * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,\r\n * orientation, and extensive theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr orientation - The layout orientation of the item.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.\r\n * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.\r\n * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.\r\n * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.\r\n * @cssprop --m3e-nav-item-shape - Border radius of the nav item.\r\n * @cssprop --m3e-nav-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.\r\n * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.\r\n * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.\r\n * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.\r\n * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.\r\n * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.\r\n * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.\r\n * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.\r\n * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.\r\n * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.\r\n * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.\r\n * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.\r\n * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.\r\n * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.\r\n */\r\n@customElement(\"m3e-nav-item\")\r\nexport class M3eNavItemElement extends LinkButton(\r\n  Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      position: relative;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1;\r\n      font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-nav-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-nav-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n      border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full});\r\n      min-width: var(--_nav-item-min-width);\r\n      align-self: var(--_nav-item-align-self);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      max-width: fit-content;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    .outer {\r\n      height: 100%;\r\n    }\r\n    .outer,\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: var(--_nav-item-justify-content, center);\r\n      position: relative;\r\n      border-radius: inherit;\r\n    }\r\n    .icon-wrapper {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"selected-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-inactive-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-inactive-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-inactive-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-active-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-active-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-active-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n      background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([orientation=\"vertical\"]) .outer {\r\n      align-self: stretch;\r\n      align-items: flex-start;\r\n    }\r\n    :host([orientation=\"vertical\"]) .label {\r\n      text-align: center;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple {\r\n      top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      bottom: unset;\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .icon {\r\n      top: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n      left: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .focus-ring {\r\n      border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .icon-wrapper {\r\n      width: var(--m3e-nav-item-icon-size, 1.5rem);\r\n      height: var(--m3e-nav-item-icon-size, 1.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      padding: var(--m3e-horizontal-nav-item-padding, 1rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      column-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:disabled) .label,\r\n    :host([disabled-interactive]) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon,\r\n    :host([disabled-interactive]) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:disabled) .label,\r\n      :host([disabled-interactive]) .label,\r\n      :host(:disabled) .icon,\r\n      :host([disabled-interactive]) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n        background-color: ButtonText;\r\n      }\r\n      :host([orientation=\"vertical\"][selected]:not(:disabled):not([disabled-interactive])) .label {\r\n        color: ButtonText;\r\n      }\r\n      :host([orientation=\"horizontal\"][selected]:not(:disabled):not([disabled-interactive])) .label,\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /**\r\n   * The layout orientation of the item.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: NavItemOrientation = \"vertical\";\r\n\r\n  /** The navigation bar to which this item belongs. */\r\n  get navBar(): M3eNavBarElement | null {\r\n    return this.closest(\"m3e-nav-bar\") ?? this.closest(\"m3e-nav-rail\") ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaPressed = null;\r\n      this.ariaCurrent = `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\"m3e-icon\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"orientation\")) {\r\n      this._focusRing?.attach(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    return html`${this.orientation === \"vertical\"\r\n        ? html`<m3e-focus-ring class=\"focus-ring\" inward></m3e-focus-ring>`\r\n        : nothing}\r\n      <div class=\"outer\">\r\n        ${this[renderPseudoLink]()}\r\n        <div class=\"inner\">\r\n          ${this.orientation === \"horizontal\" ? html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>` : nothing}\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled}\"></m3e-state-layer>\r\n          <m3e-ripple class=\"ripple\" centered ?disabled=\"${disabled}\"></m3e-ripple>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n          <div class=\"base\">\r\n            <div class=\"icon-wrapper\" aria-hidden=\"true\">\r\n              <div class=\"icon\">\r\n                <slot name=\"icon\" aria-hidden=\"true\"></slot>\r\n              </div>\r\n            </div>\r\n            <div class=\"label\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-item\": M3eNavItemElement;\r\n  }\r\n}\r\n"],"names":["M3eNavBarElement","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","this","SelectionManager","disableRovingTabIndex","_M3eNavBarElement_breakpointUnobserve","set","mode","items","selectionManager","selected","selectedItems","currentMode","_mode","value","disconnectedCallback","super","undefined","__classPrivateFieldGet","call","reconnectedCallback","_M3eNavBarElement_instances","_M3eNavBarElement_initBreakpointMonitoring","willUpdate","changedProperties","has","_updateItems","render","html","_M3eNavBarElement_handleChange","_M3eNavBarElement_handleSlotChange","orientation","_updateOrientation","setCustomState","forEach","x","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","setItems","querySelectorAll","e","stopPropagation","dispatchEvent","Event","bubbles","styles","css","DesignToken","scrollbar","thinWidth","color","surfaceContainer","__decorate","state","prototype","property","reflect","customElement","M3eNavItemElement","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_clickHandler","navBar","closest","connectedCallback","addEventListener","capture","removeEventListener","update","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","nothing","renderPseudoLink","defaultPrevented","composed","cancelable","typescale","standard","label","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","onSurface","query"],"mappings":"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"}
+{"version":3,"file":"nav-bar.min.js","sources":["../../src/nav-bar/NavBarElement.ts","../../src/nav-bar/NavItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport { AttachInternals, customElement, DesignToken, ReconnectedCallback, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eNavItemElement } from \"./NavItemElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\nimport { NavBarMode } from \"./NavBarMode\";\r\n\r\n/**\r\n * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\r\n *\r\n * @description\r\n * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in\r\n * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming\r\n * via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-bar\r\n *\r\n * @slot - Renders the items of the bar.\r\n *\r\n * @attr mode - The mode in which items in the bar are presented.\r\n *\r\n * @fires change - Emitted when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-bar-height - Height of the navigation bar.\r\n * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.\r\n * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.\r\n */\r\n@customElement(\"m3e-nav-bar\")\r\nexport class M3eNavBarElement extends ReconnectedCallback(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      min-height: var(--m3e-nav-bar-height, 4rem);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: inherit;\r\n      height: inherit;\r\n      width: 100%;\r\n      background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer});\r\n      --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);\r\n    }\r\n  `;\r\n\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eNavItemElement>().disableRovingTabIndex();\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _mode?: Exclude<NavBarMode, \"auto\">;\r\n\r\n  /**\r\n   * The mode in which items in the bar are presented.\r\n   * @default \"compact\"\r\n   */\r\n  @property({ reflect: true }) mode: NavBarMode = \"compact\";\r\n\r\n  /** The items of the bar. */\r\n  get items(): readonly M3eNavItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /** The selected item. */\r\n  get selected(): M3eNavItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The current mode applied to the bar. */\r\n  get currentMode(): Exclude<NavBarMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"compact\" ? \"expanded\" : \"compact\");\r\n  }\r\n  set currentMode(value: Exclude<NavBarMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.mode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._mode = undefined;\r\n        this._updateItems();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this._updateItems();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"compact\" : \"expanded\";\r\n      this._updateItems();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @change=\"${this.#handleChange}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-item\")]);\r\n    this._updateItems();\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateItems(): void {\r\n    const orientation: NavItemOrientation = this.currentMode === \"compact\" ? \"vertical\" : \"horizontal\";\r\n    this._updateOrientation(orientation);\r\n    setCustomState(this, \"-compact\", orientation === \"vertical\");\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateOrientation(orientation: NavItemOrientation): void {\r\n    this[selectionManager].items.forEach((x) => (x.orientation = orientation));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-bar\": M3eNavBarElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  hasAssignedNodes,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavBarElement } from \"./NavBarElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\n\r\n/**\r\n * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\r\n *\r\n * @description\r\n * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars\r\n * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,\r\n * orientation, and extensive theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr orientation - The layout orientation of the item.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.\r\n * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.\r\n * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.\r\n * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.\r\n * @cssprop --m3e-nav-item-shape - Border radius of the nav item.\r\n * @cssprop --m3e-nav-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.\r\n * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.\r\n * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.\r\n * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.\r\n * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.\r\n * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.\r\n * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.\r\n * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.\r\n * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.\r\n * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.\r\n * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.\r\n * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.\r\n * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.\r\n * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.\r\n */\r\n@customElement(\"m3e-nav-item\")\r\nexport class M3eNavItemElement extends LinkButton(\r\n  Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      position: relative;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1;\r\n      font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-nav-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-nav-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n      border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full});\r\n      min-width: var(--_nav-item-min-width);\r\n      align-self: var(--_nav-item-align-self);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      max-width: fit-content;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    .outer {\r\n      height: 100%;\r\n    }\r\n    .outer,\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: var(--_nav-item-justify-content, center);\r\n      position: relative;\r\n      border-radius: inherit;\r\n    }\r\n    .icon-wrapper {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"selected-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([selected])) slot[name=\"selected-icon\"],\r\n    :host(:not(:state(-with-selected-icon))) slot[name=\"selected-icon\"],\r\n    :host([selected]:state(-with-selected-icon)) slot[name=\"icon\"] {\r\n      display: none;\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-inactive-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-inactive-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-inactive-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-active-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-active-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-active-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n      background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([orientation=\"vertical\"]) .outer {\r\n      align-self: stretch;\r\n      align-items: flex-start;\r\n    }\r\n    :host([orientation=\"vertical\"]) .label {\r\n      text-align: center;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple {\r\n      top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      bottom: unset;\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .icon {\r\n      top: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n      left: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .focus-ring {\r\n      border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .icon-wrapper {\r\n      width: var(--m3e-nav-item-icon-size, 1.5rem);\r\n      height: var(--m3e-nav-item-icon-size, 1.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      padding: var(--m3e-horizontal-nav-item-padding, 1rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      column-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:disabled) .label,\r\n    :host([disabled-interactive]) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon,\r\n    :host([disabled-interactive]) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:disabled) .label,\r\n      :host([disabled-interactive]) .label,\r\n      :host(:disabled) .icon,\r\n      :host([disabled-interactive]) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n        background-color: ButtonText;\r\n      }\r\n      :host([orientation=\"vertical\"][selected]:not(:disabled):not([disabled-interactive])) .label {\r\n        color: ButtonText;\r\n      }\r\n      :host([orientation=\"horizontal\"][selected]:not(:disabled):not([disabled-interactive])) .label,\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /**\r\n   * The layout orientation of the item.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: NavItemOrientation = \"vertical\";\r\n\r\n  /** The navigation bar to which this item belongs. */\r\n  get navBar(): M3eNavBarElement | null {\r\n    return this.closest(\"m3e-nav-bar\") ?? this.closest(\"m3e-nav-rail\") ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaPressed = null;\r\n      this.ariaCurrent = `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\"m3e-icon\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"orientation\")) {\r\n      this._focusRing?.attach(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    return html`${this.orientation === \"vertical\"\r\n        ? html`<m3e-focus-ring class=\"focus-ring\" inward></m3e-focus-ring>`\r\n        : nothing}\r\n      <div class=\"outer\">\r\n        ${this[renderPseudoLink]()}\r\n        <div class=\"inner\">\r\n          ${this.orientation === \"horizontal\" ? html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>` : nothing}\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled}\"></m3e-state-layer>\r\n          <m3e-ripple class=\"ripple\" centered ?disabled=\"${disabled}\"></m3e-ripple>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n          <div class=\"base\">\r\n            <div class=\"icon-wrapper\" aria-hidden=\"true\">\r\n              <div class=\"icon\" aria-hidden=\"true\">\r\n                <slot name=\"icon\"></slot>\r\n                <slot name=\"selected-icon\" @slotchange=\"${this.#handleSelectedIconSlotChange}\"></slot>\r\n              </div>\r\n            </div>\r\n            <div class=\"label\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-selected-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-item\": M3eNavItemElement;\r\n  }\r\n}\r\n"],"names":["M3eNavBarElement","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","this","SelectionManager","disableRovingTabIndex","_M3eNavBarElement_breakpointUnobserve","set","mode","items","selectionManager","selected","selectedItems","currentMode","_mode","value","disconnectedCallback","super","undefined","__classPrivateFieldGet","call","reconnectedCallback","_M3eNavBarElement_instances","_M3eNavBarElement_initBreakpointMonitoring","willUpdate","changedProperties","has","_updateItems","render","html","_M3eNavBarElement_handleChange","_M3eNavBarElement_handleSlotChange","orientation","_updateOrientation","setCustomState","forEach","x","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","setItems","querySelectorAll","e","stopPropagation","dispatchEvent","Event","bubbles","styles","css","DesignToken","scrollbar","thinWidth","color","surfaceContainer","__decorate","state","prototype","property","reflect","customElement","M3eNavItemElement","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_clickHandler","navBar","closest","connectedCallback","addEventListener","capture","removeEventListener","update","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","nothing","renderPseudoLink","_M3eNavItemElement_instances","_M3eNavItemElement_handleSelectedIconSlotChange","defaultPrevented","composed","cancelable","hasAssignedNodes","target","typescale","standard","label","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","onSurface","query"],"mappings":"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"}

package/dist/search.js

@@ -87,9 +87,9 @@ const SearchViewLightDomStyle = css`m3e-search-view input[slot="input"]::placeho
  * Styles for `M3eSearchViewElement`.
  * @internal
  */
-const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
+const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
       overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
-      display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
+      display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
       background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},