@m3e/web 2.5.13 → 2.5.14

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 beforeinput - Dispatched before the selected state of an item changes.\r\n * @fires input - Dispatched when the selected state of an item changes.\r\n * @fires change - Dispatched 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, unsafeCSS } 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  ReconnectedCallback,\r\n  renderPseudoLink,\r\n  ResizeController,\r\n  resumeAnimation,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\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 beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched 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 ReconnectedCallback(\r\n  SuppressInitialAnimation(\r\n    LinkButton(\r\n      Selected(\r\n        KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true))))),\r\n      ),\r\n    ),\r\n  ),\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    :host(:not(:is(:state(--no-animate), :--no-animate))) .base {\r\n      transition: ${unsafeCSS(\r\n        `margin-top ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      white-space: nowrap;\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(:is(:state(--no-animate), :--no-animate))) .state-layer,\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple {\r\n      transition: ${unsafeCSS(`height ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not([selected])) slot[name=\"selected-icon\"],\r\n    :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name=\"selected-icon\"],\r\n    :host([selected]:is(:state(--with-selected-icon), :--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.onSurfaceVariant});\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]):not([orientation=\"horizontal\"])) .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])[orientation=\"horizontal\"]) .label,\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=\"horizongal\"]) .base {\r\n      margin-top: 0;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      margin-bottom: 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(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .state-layer,\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .ripple {\r\n      animation: collapse ${DesignToken.motion.duration.medium1};\r\n    }\r\n    @keyframes collapse {\r\n      from {\r\n        width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem));\r\n      }\r\n      to {\r\n        width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n      }\r\n    }\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\"]) .state-layer,\r\n    :host([orientation=\"horizontal\"]) .ripple,\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"])\r\n      .icon-wrapper,\r\n    :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n      .icon-wrapper {\r\n      animation: ${unsafeCSS(`slide-down ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"])\r\n      .icon-wrapper,\r\n    :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n      .icon-wrapper {\r\n      animation: ${unsafeCSS(`slide-up ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    @keyframes slide-down {\r\n      from {\r\n        transform: translateY(-4px);\r\n      }\r\n      to {\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n    @keyframes slide-up {\r\n      from {\r\n        transform: translateY(4px);\r\n      }\r\n      to {\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"]) .label {\r\n      animation: horizontal-fade-in ${DesignToken.motion.duration.medium1};\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .label {\r\n      animation: vertical-fade-in ${DesignToken.motion.duration.medium1};\r\n    }\r\n    @keyframes horizontal-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n    @keyframes vertical-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\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 (prefers-reduced-motion) {\r\n      :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"])\r\n        .icon-wrapper,\r\n      :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n        .icon-wrapper,\r\n      :host(\r\n          :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"]\r\n        )\r\n        .icon-wrapper,\r\n      :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n        .icon-wrapper,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .state-layer,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .ripple,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"]) .label,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .label {\r\n        animation: none;\r\n      }\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .base {\r\n        transition: none;\r\n      }\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 */ #inRail = false;\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  /** @private */ @query(\".inner\") private readonly _inner?: HTMLElement;\r\n\r\n  /** @private */ readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: (entries) => this.#handleStateLayerResize(entries),\r\n  });\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  /** @internal */\r\n  override [resumeAnimation](): void {\r\n    if (this.#inRail) {\r\n      super[resumeAnimation]();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.#inRail = this.closest(\"m3e-nav-rail\") !== null;\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    this.#inRail = false;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initResizeObserver();\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    this.#initResizeObserver();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    const label = html`<div class=\"label\"><slot></slot></div>`;\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\"></slot>\r\n                <slot name=\"selected-icon\" @slotchange=\"${this.#handleSelectedIconSlotChange}\"></slot>\r\n              </div>\r\n            </div>\r\n\r\n            <m3e-collapsible\r\n              orientation=\"horizontal\"\r\n              ?no-animate=\"${!this.#inRail}\"\r\n              ?open=\"${this.orientation === \"horizontal\"}\"\r\n            >\r\n              ${this.orientation === \"horizontal\" ? label : nothing}\r\n            </m3e-collapsible>\r\n\r\n            ${this.orientation === \"horizontal\" ? nothing : label}\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    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.selected = true;\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\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  /** @private */\r\n  #handleStateLayerResize(entries: ResizeObserverEntry[]): void {\r\n    if (entries.length === 0 || this.orientation === \"vertical\") return;\r\n    this._inner?.style.setProperty(\"--_expanded-width\", `${entries[0].contentRect.width}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #initResizeObserver(): void {\r\n    if (this._stateLayer && this.#inRail) {\r\n      this.#resizeController.observe(this._stateLayer);\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","SuppressInitialAnimation","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_inRail","_M3eNavItemElement_clickHandler","_M3eNavItemElement_resizeController","ResizeController","target","callback","entries","_M3eNavItemElement_instances","_M3eNavItemElement_handleStateLayerResize","navBar","closest","WeakMap","WeakSet","resumeAnimation","connectedCallback","addEventListener","capture","removeEventListener","_M3eNavItemElement_initResizeObserver","update","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","label","nothing","renderPseudoLink","_M3eNavItemElement_handleSelectedIconSlotChange","defaultPrevented","cancelable","hasAssignedNodes","length","_inner","style","setProperty","contentRect","width","typescale","standard","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","unsafeCSS","motion","duration","short1","easing","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","medium1","short2","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 beforeinput - Dispatched before the selected state of an item changes.\r\n * @fires input - Dispatched when the selected state of an item changes.\r\n * @fires change - Dispatched 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      contain: layout style;\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, unsafeCSS } 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  ReconnectedCallback,\r\n  renderPseudoLink,\r\n  ResizeController,\r\n  resumeAnimation,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\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 beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched 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 ReconnectedCallback(\r\n  SuppressInitialAnimation(\r\n    LinkButton(\r\n      Selected(\r\n        KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true))))),\r\n      ),\r\n    ),\r\n  ),\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      contain: layout style;\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    :host(:not(:is(:state(--no-animate), :--no-animate))) .base {\r\n      transition: ${unsafeCSS(\r\n        `margin-top ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      white-space: nowrap;\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(:is(:state(--no-animate), :--no-animate))) .state-layer,\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple {\r\n      transition: ${unsafeCSS(`height ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not([selected])) slot[name=\"selected-icon\"],\r\n    :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name=\"selected-icon\"],\r\n    :host([selected]:is(:state(--with-selected-icon), :--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.onSurfaceVariant});\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]):not([orientation=\"horizontal\"])) .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])[orientation=\"horizontal\"]) .label,\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=\"horizongal\"]) .base {\r\n      margin-top: 0;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      margin-bottom: 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(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .state-layer,\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .ripple {\r\n      animation: collapse ${DesignToken.motion.duration.medium1};\r\n    }\r\n    @keyframes collapse {\r\n      from {\r\n        width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem));\r\n      }\r\n      to {\r\n        width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n      }\r\n    }\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\"]) .state-layer,\r\n    :host([orientation=\"horizontal\"]) .ripple,\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"])\r\n      .icon-wrapper,\r\n    :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n      .icon-wrapper {\r\n      animation: ${unsafeCSS(`slide-down ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"])\r\n      .icon-wrapper,\r\n    :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n      .icon-wrapper {\r\n      animation: ${unsafeCSS(`slide-up ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    @keyframes slide-down {\r\n      from {\r\n        transform: translateY(-4px);\r\n      }\r\n      to {\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n    @keyframes slide-up {\r\n      from {\r\n        transform: translateY(4px);\r\n      }\r\n      to {\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"]) .label {\r\n      animation: horizontal-fade-in ${DesignToken.motion.duration.medium1};\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .label {\r\n      animation: vertical-fade-in ${DesignToken.motion.duration.medium1};\r\n    }\r\n    @keyframes horizontal-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n    @keyframes vertical-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\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 (prefers-reduced-motion) {\r\n      :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"])\r\n        .icon-wrapper,\r\n      :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n        .icon-wrapper,\r\n      :host(\r\n          :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"]\r\n        )\r\n        .icon-wrapper,\r\n      :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"])\r\n        .icon-wrapper,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .state-layer,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .ripple,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"horizontal\"]) .label,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))[orientation=\"vertical\"]) .label {\r\n        animation: none;\r\n      }\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .base {\r\n        transition: none;\r\n      }\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 */ #inRail = false;\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  /** @private */ @query(\".inner\") private readonly _inner?: HTMLElement;\r\n\r\n  /** @private */ readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: (entries) => this.#handleStateLayerResize(entries),\r\n  });\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  /** @internal */\r\n  override [resumeAnimation](): void {\r\n    if (this.#inRail) {\r\n      super[resumeAnimation]();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.#inRail = this.closest(\"m3e-nav-rail\") !== null;\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    this.#inRail = false;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initResizeObserver();\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    this.#initResizeObserver();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    const label = html`<div class=\"label\"><slot></slot></div>`;\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\"></slot>\r\n                <slot name=\"selected-icon\" @slotchange=\"${this.#handleSelectedIconSlotChange}\"></slot>\r\n              </div>\r\n            </div>\r\n\r\n            <m3e-collapsible\r\n              orientation=\"horizontal\"\r\n              ?no-animate=\"${!this.#inRail}\"\r\n              ?open=\"${this.orientation === \"horizontal\"}\"\r\n            >\r\n              ${this.orientation === \"horizontal\" ? label : nothing}\r\n            </m3e-collapsible>\r\n\r\n            ${this.orientation === \"horizontal\" ? nothing : label}\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    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.selected = true;\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\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  /** @private */\r\n  #handleStateLayerResize(entries: ResizeObserverEntry[]): void {\r\n    if (entries.length === 0 || this.orientation === \"vertical\") return;\r\n    this._inner?.style.setProperty(\"--_expanded-width\", `${entries[0].contentRect.width}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #initResizeObserver(): void {\r\n    if (this._stateLayer && this.#inRail) {\r\n      this.#resizeController.observe(this._stateLayer);\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","SuppressInitialAnimation","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_inRail","_M3eNavItemElement_clickHandler","_M3eNavItemElement_resizeController","ResizeController","target","callback","entries","_M3eNavItemElement_instances","_M3eNavItemElement_handleStateLayerResize","navBar","closest","WeakMap","WeakSet","resumeAnimation","connectedCallback","addEventListener","capture","removeEventListener","_M3eNavItemElement_initResizeObserver","update","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","label","nothing","renderPseudoLink","_M3eNavItemElement_handleSelectedIconSlotChange","defaultPrevented","cancelable","hasAssignedNodes","length","_inner","style","setProperty","contentRect","width","typescale","standard","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","unsafeCSS","motion","duration","short1","easing","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","medium1","short2","onSurface","query"],"mappings":"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"}

package/dist/nav-menu.js

@@ -320,7 +320,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
   registerStyleSheet(css`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`);
 })();
 /** The styles of the element. */
-M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { contain: layout style; display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
         background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .toggle { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
         ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:is(:state(--with-items), :--with-items))) .toggle, :host(:not(:is(:state(--with-items), :--with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:is(:state(--with-items), :--with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: LinkText; } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base, :host([selected]:is(:state(--with-items), :--with-items):not(:disabled)) .base { forced-color-adjust: none; background-color: unset; color: Highlight; } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base::after { content: ""; position: absolute; inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2)); inset-block-start: 50%; width: 0.375rem; height: 0.375rem; border-radius: 50%; transform: translateY(-50%); background-color: currentColor; } }`;
 __decorate([query(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
@@ -638,7 +638,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
   registerStyleSheet(css`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`);
 })();
 /** The styles of the element. */
-M3eNavMenuElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
+M3eNavMenuElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { contain: layout style; width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
 /** @private */
 M3eNavMenuElement.__nextId = 0;
 M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([customElement("m3e-nav-menu")], M3eNavMenuElement);