@m3e/web 2.5.3 → 2.5.4

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

@@ -1 +1 @@
-{"version":3,"file":"nav-menu.min.js","sources":["../../src/nav-menu/NavMenuItemElement.ts","../../src/nav-menu/NavMenuElement.ts","../../src/nav-menu/NavMenuItemGroupElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  EventAttribute,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  registerStyleSheet,\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 { M3eNavMenuElement } from \"./NavMenuElement\";\r\n\r\n/**\r\n * An expandable item, selectable item within a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.\r\n * It supports nested child items, selection and disabled states, and emits events for open/close transitions.\r\n * The component is highly customizable via slots and CSS custom properties, and is designed for accessible,\r\n * keyboard-navigable menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item-group>\r\n *     <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n *       <span slot=\"label\">Inbox</span>\r\n *       <span slot=\"badge\">24</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n *       <span slot=\"label\">Outbox</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n *       <span slot=\"label\">Favorites</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n *       <span slot=\"label\">Trash</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item open>\r\n *     <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n *     <span slot=\"label\">Getting Started</span>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n *       <span slot=\"label\">Overview</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n *       <span slot=\"label\">Installation</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n *   <m3e-nav-menu-item>\r\n *     <span slot=\"label\">Actions</span>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item\r\n *\r\n * @slot - Renders the nested child items.\r\n * @slot label - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot badge - Renders the badge of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n * @slot toggle-icon - Renders the toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr open - Whether the item is expanded.\r\n * @attr selected - Whether the item is selected.\r\n *\r\n * @fires opening - Emitted when the item begins to open.\r\n * @fires opened - Emitted when the item has opened.\r\n * @fires closing - Emitted when the item begins to close.\r\n * @fires closed - Emitted when the item has closed.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.\r\n * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.\r\n * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.\r\n * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.\r\n * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.\r\n * @cssprop --m3e-nav-menu-item-height - Height of the item.\r\n * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.\r\n * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.\r\n * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.\r\n * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.\r\n * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.\r\n * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.\r\n * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.\r\n * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.\r\n * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-tracking - Letter spacing for badge slot.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.\r\n * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.\r\n */\r\n@customElement(\"m3e-nav-menu-item\")\r\nexport class M3eNavMenuItemElement extends Selected(\r\n  Disabled(\r\n    EventAttribute(AttachInternals(Role(LitElement, \"treeitem\"), true), \"opening\", \"opened\", \"closing\", \"closed\"),\r\n  ),\r\n) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-nav-menu-item > m3e-divider {\r\n        margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n        flex: none;\r\n      }\r\n      m3e-nav-menu-item > m3e-nav-menu-item:first-of-type {\r\n        margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\r\n      }\r\n      m3e-nav-menu-item > m3e-nav-menu-item:last-of-type {\r\n        margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\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: block;\r\n      flex: none;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);\r\n      height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);\r\n      font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      transition: ${unsafeCSS(\r\n        `color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n        background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .base,\r\n    .focus-ring {\r\n      border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    .label {\r\n      flex: 1 1 auto;\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n      vertical-align: middle;\r\n    }\r\n    .icon,\r\n    .toggle {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"badge\"]) {\r\n      flex: none;\r\n      position: relative;\r\n      font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .toggle {\r\n      transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:state(-with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    .icon {\r\n      margin-inline-start: -0.5rem;\r\n    }\r\n    .toggle {\r\n      margin-inline-end: -0.5rem;\r\n    }\r\n    .group {\r\n      padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem);\r\n    }\r\n    :host([open]) .toggle {\r\n      transform: rotate(180deg);\r\n    }\r\n    :host(:not(:state(-with-items))) .toggle,\r\n    :host(:not(:state(-with-items))) .group {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"selected-icon\"]),\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"toggle-icon\"]),\r\n    .toggle-icon {\r\n      vertical-align: middle;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      cursor: pointer;\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-menu-item-disabled-color-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([selected]:not(:state(-with-items)):not(:disabled)) .base {\r\n      color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer});\r\n      background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-menu-item-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-menu-item-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base {\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-menu-item-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-menu-item-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .state-layer {\r\n      margin-inline: auto;\r\n    }\r\n    :host([selected]:state(-with-items):not(:disabled)) .base {\r\n      background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest});\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-menu-item-open-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-menu-item-open-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    ::slotted(a[slot=\"label\"]) {\r\n      all: unset;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .toggle,\r\n      .state-layer {\r\n        transition: none !important;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .state-layer {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        color: LinkText;\r\n      }\r\n      :host([selected]:not(:state(-with-items)):not(:disabled)) .base,\r\n      :host([selected]:state(-with-items):not(:disabled)) .base {\r\n        forced-color-adjust: none;\r\n        background-color: unset;\r\n        color: Highlight;\r\n      }\r\n      :host([selected]:not(:state(-with-items)):not(:disabled)) .base::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2));\r\n        inset-block-start: 50%;\r\n        width: 0.375rem;\r\n        height: 0.375rem;\r\n        border-radius: 50%;\r\n        transform: translateY(-50%);\r\n        background-color: currentColor;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".ripple\") readonly ripple?: M3eRippleElement;\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */ @state() private _hasChildItems = false;\r\n\r\n  /** @private */ #items: M3eNavMenuItemElement[] = [];\r\n  /** @private */ #menu: M3eNavMenuElement | null = null;\r\n  /** @private */ #path = new Array<M3eNavMenuItemElement>();\r\n  /** @private */ #link: HTMLAnchorElement | null = null;\r\n\r\n  /**\r\n   * Whether the item is expanded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /** A reference to the nested `HTMLAnchorElement`. */\r\n  get link(): HTMLAnchorElement | null {\r\n    return this.#link;\r\n  }\r\n\r\n  /** A reference to the element used to present the label of the item. */\r\n  get label(): HTMLElement | null {\r\n    return this._base ?? null;\r\n  }\r\n\r\n  /** Whether the item is visible. */\r\n  get visible(): boolean {\r\n    return !this.#path.some((x) => !x.open);\r\n  }\r\n\r\n  /** The full path of the item, starting with the top-most ancestor, including this item. */\r\n  get path(): ReadonlyArray<M3eNavMenuItemElement> {\r\n    return [...this.#path, this];\r\n  }\r\n\r\n  /** Whether the item has child items. */\r\n  get hasChildItems(): boolean {\r\n    return this._hasChildItems;\r\n  }\r\n\r\n  /** The parenting item. */\r\n  get parentItem(): M3eNavMenuItemElement | null {\r\n    return this.#path[this.#path.length - 1] ?? null;\r\n  }\r\n\r\n  /** The items that immediately descend from this item. */\r\n  get childItems(): readonly M3eNavMenuItemElement[] {\r\n    return this.#items;\r\n  }\r\n\r\n  /** The one-based level of the item. */\r\n  get level(): number {\r\n    return this.#path.length + 1;\r\n  }\r\n\r\n  /**\r\n   * Expands this item, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  expand(descendants: boolean = false): void {\r\n    if (this.hasChildItems) {\r\n      this.open = true;\r\n      if (descendants) {\r\n        this.childItems.forEach((x) => x.expand(true));\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Collapses this item, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  collapse(descendants: boolean = false): void {\r\n    if (this.hasChildItems) {\r\n      this.open = false;\r\n      if (descendants) {\r\n        this.childItems.forEach((x) => x.collapse(true));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** Toggles the expanded state of the item. */\r\n  toggle(): void {\r\n    if (this.hasChildItems) {\r\n      this.open = !this.open;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#path.length = 0;\r\n    for (\r\n      let item = this.parentElement?.closest(\"m3e-nav-menu-item\");\r\n      item;\r\n      item = item.parentElement?.closest(\"m3e-nav-menu-item\")\r\n    ) {\r\n      this.#path.push(item);\r\n    }\r\n    this.#path.reverse();\r\n\r\n    this.style.setProperty(\"--_nav-menu-item-level\", `${this.level}`);\r\n    this.#menu = this.closest(\"m3e-nav-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#path.length = 0;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      // Remove aria-selected and just use aria-current.\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.hasChildItems ? null : `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\":scope > m3e-icon[slot]\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n\r\n      this.#path.forEach((x) => (x.selected = this.selected));\r\n      if (this.selected && !this.hasChildItems) {\r\n        this.closest(\"m3e-nav-menu\")?.[selectionManager].notifySelectionChange(this);\r\n      }\r\n    }\r\n\r\n    if (changedProperties.has(\"open\") || changedProperties.has(\"_hasChildItems\")) {\r\n      this.ariaExpanded = this._hasChildItems ? `${this.open}` : null;\r\n    }\r\n\r\n    if ((changedProperties.has(\"_hasChildItems\") && this.disabled) || changedProperties.has(\"disabled\")) {\r\n      this.#items.forEach((x) => (x.disabled = this.disabled));\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\r\n    const base = this._base;\r\n    if (base) {\r\n      [this.focusRing, this.stateLayer, this.ripple].forEach((x) => x?.attach(base));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" @click=\"${this.#handleClick}\">\r\n        <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n        <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n        <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n        <div class=\"icon\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n        <div class=\"label\">\r\n          <slot name=\"label\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n        </div>\r\n        <slot name=\"badge\"></slot>\r\n        <div aria-hidden=\"true\" class=\"toggle\">\r\n          <slot name=\"toggle-icon\">\r\n            <svg class=\"toggle-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M480-360 280-560h400L480-360Z\" />\r\n            </svg>\r\n          </slot>\r\n        </div>\r\n      </div>\r\n      <m3e-collapsible\r\n        class=\"group\"\r\n        role=\"group\"\r\n        aria-hidden=\"${ifDefined(this._hasChildItems ? undefined : \"true\")}\"\r\n        ?open=\"${this._hasChildItems && this.open}\"\r\n        @opening=\"${this.#handleCollapsibleEvent}\"\r\n        @opened=\"${this.#handleCollapsibleEvent}\"\r\n        @closing=\"${this.#handleCollapsibleEvent}\"\r\n        @closed=\"${this.#handleCollapsibleEvent}\"\r\n      >\r\n        <slot @slotchange=\"${this.#handleItemSlotChange}\"></slot>\r\n      </m3e-collapsible>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    const icon = html`<slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>`;\r\n    return this.selected && !this.hasChildItems\r\n      ? html`<slot name=\"selected-icon\" @slotchange=\"${this.#handleIconSlotChange}\">${icon}</slot>`\r\n      : icon;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event) {\r\n    setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#link =\r\n      (<HTMLSlotElement>e.target).assignedElements({ flatten: true }).find((x) => x instanceof HTMLAnchorElement) ??\r\n      null;\r\n\r\n    this.#link?.setAttribute(\"tabindex\", \"-1\");\r\n  }\r\n\r\n  /** @private */\r\n  #handleItemSlotChange(e: Event): void {\r\n    this.#items = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .filter((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n    const hadChildItems = this._hasChildItems;\r\n    this._hasChildItems = this.#items.length > 0;\r\n    setCustomState(this, \"-with-items\", this._hasChildItems);\r\n\r\n    if (hadChildItems || this._hasChildItems) {\r\n      this.selected = this.#items.some((x) => x.selected);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(): void {\r\n    if (this.disabled) return;\r\n\r\n    this.#menu?.[selectionManager].setActiveItem(this);\r\n    if (!this._hasChildItems) {\r\n      this.#menu?.[selectionManager].select(this);\r\n      this.#path.forEach((x) => (x.selected = this.selected));\r\n      this.#link?.click();\r\n\r\n      const drawerContainer = this.closest(\"m3e-drawer-container\");\r\n      if (drawerContainer) {\r\n        const drawer = this.closest(\"[slot='start']\") ?? this.closest(\"[slot='end']\");\r\n        if (\r\n          drawer &&\r\n          (hasCustomState(drawerContainer, `-${drawer.slot}-push`) ||\r\n            hasCustomState(drawerContainer, `-${drawer.slot}-over`))\r\n        ) {\r\n          setTimeout(() => {\r\n            drawerContainer.removeAttribute(drawer.slot);\r\n            drawerContainer.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n          }, 300);\r\n        }\r\n      }\r\n    } else {\r\n      this.toggle();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCollapsibleEvent(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n  }\r\n}\r\n\r\ninterface M3eNavMenuItemElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n}\r\n\r\nexport interface M3eNavMenuItemElement {\r\n  addEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-menu-item\": M3eNavMenuItemElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  DesignToken,\r\n  FocusController,\r\n  forcedColorsActive,\r\n  PressedController,\r\n  registerStyleSheet,\r\n  Role,\r\n  scrollIntoViewIfNeeded,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eNavMenuItemElement } from \"./NavMenuItemElement\";\r\n\r\n/**\r\n * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting\r\n * nested expandable items, keyboard navigation, and focus management. It is highly customizable\r\n * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,\r\n * and complex menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item-group>\r\n *     <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n *       <span slot=\"label\">Inbox</span>\r\n *       <span slot=\"badge\">24</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n *       <span slot=\"label\">Outbox</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n *       <span slot=\"label\">Favorites</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n *       <span slot=\"label\">Trash</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item open>\r\n *     <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n *     <span slot=\"label\">Getting Started</span>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n *       <span slot=\"label\">Overview</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n *       <span slot=\"label\">Installation</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n *   <m3e-nav-menu-item>\r\n *     <span slot=\"label\">Actions</span>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu\r\n *\r\n * @slot - Renders the items of the menu.\r\n *\r\n * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.\r\n * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.\r\n * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.\r\n */\r\n@customElement(\"m3e-nav-menu\")\r\nexport class M3eNavMenuElement extends Role(LitElement, \"tree\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-nav-menu > m3e-divider {\r\n        margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n        flex: none;\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: block;\r\n      outline: none;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      min-height: 0;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n      min-height: inherit;\r\n      box-sizing: border-box;\r\n      padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem);\r\n      padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);\r\n      padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);\r\n      padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #ignoreFocusVisible = false;\r\n  /** @private */ #ignoreFocus = false;\r\n\r\n  /** @private */\r\n  readonly [selectionManager] = new SelectionManager<M3eNavMenuItemElement>()\r\n    .withVerticalOrientation()\r\n    .withHomeAndEnd()\r\n    .withTypeahead()\r\n    .withSkipPredicate((x) => x.disabled || !x.visible)\r\n    .disableRovingTabIndex()\r\n    .onActiveItemChange(() => {\r\n      if (this[selectionManager].activeItem) {\r\n        this.#activateItem(this[selectionManager].activeItem);\r\n      }\r\n    })\r\n    .onSelectedItemsChange(() => {\r\n      const selected = this.selected;\r\n      for (const item of this.items) {\r\n        if (item !== selected) {\r\n          this.#updateItemFocusVisible(item, false, false);\r\n        }\r\n      }\r\n\r\n      if (selected?.label) {\r\n        scrollIntoViewIfNeeded(selected.label, this, { block: \"start\", behavior: \"smooth\" });\r\n      }\r\n    });\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n  /** @private */ readonly #pointerDownHandler = (e: Event) => this.#handlePointerDown(e);\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, { callback: (pressed) => (this.#ignoreFocus = pressed) });\r\n    new FocusController(this, {\r\n      callback: () => {\r\n        if (!this.#ignoreFocus) {\r\n          this.#updateFocusVisible();\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /** The selected item of the menu. */\r\n  get selected(): M3eNavMenuItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** All the items of the menu. */\r\n  get items(): readonly M3eNavMenuItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /**\r\n   * Expands all items, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  expand(descendants?: boolean): void;\r\n\r\n  /**\r\n   * Expands the specified items, and optionally, all descendants.\r\n   * @param {M3eNavMenuItemElement[]} items The items to expand.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  expand(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n  /** @internal */\r\n  expand(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n    const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n    items.forEach((x) => x.expand(descendants));\r\n  }\r\n\r\n  /**\r\n   * Collapses all items, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n   */\r\n  collapse(descendants?: boolean): void;\r\n\r\n  /**\r\n   * Collapses the specified items, and optionally, all descendants.\r\n   * @param {M3eNavMenuItemElement[]} items The items to collapse.\r\n   * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n   */\r\n  collapse(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n  /** @internal */\r\n  collapse(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n    const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n\r\n    items.forEach((x) => x.collapse(descendants));\r\n    const activeItem = this[selectionManager].activeItem;\r\n    if (activeItem && !activeItem.visible) {\r\n      for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {\r\n        if (parent.visible) {\r\n          this[selectionManager].setActiveItem(parent);\r\n          break;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"tabindex\", \"0\");\r\n\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.addEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.removeEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    for (const divider of this.querySelectorAll<HTMLElement>(\"m3e-divider\")) {\r\n      divider.ariaHidden = \"true\";\r\n    }\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-menu-item\")]);\r\n    for (const item of added) {\r\n      item.id = item.id || `m3e-nav-menu-item-${M3eNavMenuElement.__nextId++}`;\r\n    }\r\n    if (this[selectionManager].activeItem) {\r\n      this.setAttribute(\"aria-activedescendant\", this[selectionManager].activeItem.id);\r\n      this.#updateFocusVisible();\r\n    } else {\r\n      this.removeAttribute(\"aria-activedescendant\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#ignoreFocusVisible = false;\r\n    this.#updateFocusVisible();\r\n\r\n    const item = this[selectionManager].activeItem;\r\n    if (e.defaultPrevented || !item || item.disabled) return;\r\n\r\n    switch (e.key) {\r\n      case \"Enter\":\r\n      case \" \":\r\n        e.preventDefault();\r\n\r\n        if (e.key === \" \" && item.ripple && !item.ripple.visible) {\r\n          item.ripple.centered = true;\r\n          item.ripple.show(0, 0, true);\r\n          item.ripple.centered = false;\r\n        }\r\n\r\n        if (item.hasChildItems) {\r\n          requestAnimationFrame(() => item.toggle());\r\n        } else if (!item.selected) {\r\n          this[selectionManager].select(item);\r\n          item.link?.click();\r\n        }\r\n        break;\r\n\r\n      case \"*\":\r\n        e.preventDefault();\r\n        item.expand(true);\r\n        break;\r\n\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        e.preventDefault();\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          if (item.hasChildItems && item.open) {\r\n            requestAnimationFrame(() => item.collapse());\r\n          } else {\r\n            const parent = item.parentItem;\r\n            if (parent) {\r\n              this[selectionManager].setActiveItem(parent);\r\n            }\r\n          }\r\n        } else if (item.hasChildItems && !item.open) {\r\n          item.expand();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        e.preventDefault();\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          if (item.hasChildItems && item.open) {\r\n            requestAnimationFrame(() => item.collapse());\r\n          } else {\r\n            const parent = item.parentItem;\r\n            if (parent) {\r\n              this[selectionManager].setActiveItem(parent);\r\n            }\r\n          }\r\n        } else if (item.hasChildItems && !item.open) {\r\n          item.expand();\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this[selectionManager].onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(e: KeyboardEvent): void {\r\n    const item = this[selectionManager].activeItem;\r\n    if (!e.defaultPrevented && item && !item.disabled && e.key === \" \") {\r\n      item.ripple?.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: Event): void {\r\n    if (!e.defaultPrevented && !this.#ignoreFocusVisible && !forcedColorsActive()) {\r\n      this.#ignoreFocusVisible = true;\r\n\r\n      const item = e\r\n        .composedPath()\r\n        .reverse()\r\n        .find((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n      if (item && !item.disabled) {\r\n        this.#updateItemFocusVisible(item, true, false);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #activateItem(item: M3eNavMenuItemElement): void {\r\n    this.setAttribute(\"aria-activedescendant\", item.id);\r\n    if (item.label) {\r\n      scrollIntoViewIfNeeded(item.label, this, { block: \"nearest\", behavior: \"smooth\" });\r\n    }\r\n    this.#updateFocusVisible();\r\n  }\r\n\r\n  /** @private */\r\n  #updateFocusVisible(): void {\r\n    const focusWithin = this.matches(\":focus-within\");\r\n    const focused = focusWithin || this.matches(\":focus\");\r\n    const focusVisible =\r\n      focused &&\r\n      !this.#ignoreFocusVisible &&\r\n      (forcedColorsActive() ||\r\n        this.matches(\":focus-visible\") ||\r\n        (focusWithin && this.querySelector(\"a:focus-visible\") !== null));\r\n\r\n    this[selectionManager].items.forEach((x) => {\r\n      const active = x === this[selectionManager].activeItem;\r\n      this.#updateItemFocusVisible(x, active && focused, active && focusVisible);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateItemFocusVisible(item: M3eNavMenuItemElement, focused: boolean, focusVisible: boolean): void {\r\n    if (focused && focusVisible) {\r\n      item.stateLayer?.show(\"focused\");\r\n    } else {\r\n      item.stateLayer?.hide(\"focused\");\r\n    }\r\n    if (focusVisible) {\r\n      item.focusRing?.show();\r\n    } else {\r\n      item.focusRing?.hide();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-menu\": M3eNavMenuElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { AttachInternals, customElement, deleteCustomState, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A top-level semantic grouping of items in a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.\r\n * It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item-group>\r\n *     <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n *       <span slot=\"label\">Inbox</span>\r\n *       <span slot=\"badge\">24</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n *       <span slot=\"label\">Outbox</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n *       <span slot=\"label\">Favorites</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n *       <span slot=\"label\">Trash</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item-group\r\n *\r\n * @slot - Renders the items of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.\r\n * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.\r\n */\r\n@customElement(\"m3e-nav-menu-item-group\")\r\nexport class M3eNavMenuItemGroupElement extends AttachInternals(Role(LitElement, \"group\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    :host(:not(:state(-with-label))) .label {\r\n      display: none;\r\n    }\r\n    .label {\r\n      margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem);\r\n      margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n      flex: none;\r\n    }\r\n    :host(:state(-divided)) .label {\r\n      margin-block-start: calc(\r\n        var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem)\r\n      );\r\n    }\r\n    :host(:not(:state(-divided))) .label {\r\n      margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-nav-menu-item-group-label-${M3eNavMenuItemGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    setCustomState(this, \"-divided\", this.previousElementSibling?.tagName === \"M3E-DIVIDER\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    deleteCustomState(this, \"-divided\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </div>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (e.target as HTMLSlotElement).assignedElements({ flatten: true })[0];\r\n    if (label !== this.#label) {\r\n      // If the label is changed and its id matched the reversed id,\r\n      // clear the id in the event the element is moved elsewhere in the DOM.\r\n\r\n      if (this.#label?.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\r\n\r\n      this.#label = label;\r\n\r\n      if (this.#label) {\r\n        this.#label.id = this.#label.id || this.#labelId;\r\n        this.setAttribute(\"aria-labelledby\", this.#label.id);\r\n      } else {\r\n        this.removeAttribute(\"aria-labelledby\");\r\n      }\r\n    }\r\n    setCustomState(this, \"-with-label\", this.#label !== undefined);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-menu-item-group\": M3eNavMenuItemGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eNavMenuItemElement","M3eNavMenuItemElement_1","Selected","Disabled","EventAttribute","AttachInternals","Role","LitElement","constructor","this","_hasChildItems","_M3eNavMenuItemElement_items","set","_M3eNavMenuItemElement_menu","_M3eNavMenuItemElement_path","Array","_M3eNavMenuItemElement_link","open","link","__classPrivateFieldGet","label","_base","visible","some","x","path","hasChildItems","parentItem","length","childItems","level","expand","descendants","forEach","collapse","toggle","connectedCallback","super","item","parentElement","closest","push","reverse","style","setProperty","__classPrivateFieldSet","disconnectedCallback","update","changedProperties","has","ariaSelected","ariaCurrent","selected","icon","querySelectorAll","toggleAttribute","selectionManager","notifySelectionChange","ariaExpanded","disabled","firstUpdated","_changedProperties","base","focusRing","stateLayer","ripple","attach","render","html","_M3eNavMenuItemElement_instances","_M3eNavMenuItemElement_handleClick","_M3eNavMenuItemElement_renderIcon","call","_M3eNavMenuItemElement_handleSlotChange","ifDefined","undefined","_M3eNavMenuItemElement_handleCollapsibleEvent","_M3eNavMenuItemElement_handleItemSlotChange","_M3eNavMenuItemElement_handleIconSlotChange","e","setCustomState","hasAssignedNodes","target","assignedElements","flatten","find","HTMLAnchorElement","setAttribute","filter","hadChildItems","setActiveItem","select","click","drawerContainer","drawer","hasCustomState","slot","setTimeout","removeAttribute","dispatchEvent","Event","bubbles","stopPropagation","type","registerStyleSheet","css","styles","DesignToken","density","calc","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","unsafeCSS","motion","duration","short4","easing","shape","corner","full","medium1","color","onSurfaceVariant","onSurface","onSecondaryContainer","secondaryContainer","surfaceContainerHighest","__decorate","query","prototype","state","property","Boolean","reflect","customElement","M3eNavMenuElement","M3eNavMenuElement_1","_M3eNavMenuElement_ignoreFocusVisible","_M3eNavMenuElement_ignoreFocus","_b","SelectionManager","withVerticalOrientation","withHomeAndEnd","withTypeahead","withSkipPredicate","disableRovingTabIndex","onActiveItemChange","activeItem","_M3eNavMenuElement_instances","_M3eNavMenuElement_activateItem","onSelectedItemsChange","items","_M3eNavMenuElement_updateItemFocusVisible","scrollIntoViewIfNeeded","block","behavior","_M3eNavMenuElement_keyDownHandler","_M3eNavMenuElement_keyUpHandler","_M3eNavMenuElement_pointerDownHandler","PressedController","callback","pressed","FocusController","_M3eNavMenuElement_updateFocusVisible","selectedItems","itemsOrDescendants","maybeDescendants","isArray","parent","addEventListener","removeEventListener","_M3eNavMenuElement_handleSlotChange","divider","ariaHidden","added","setItems","id","__nextId","defaultPrevented","key","preventDefault","centered","show","requestAnimationFrame","M3eDirectionality","current","onKeyDown","hide","forcedColorsActive","composedPath","focusWithin","matches","focused","focusVisible","querySelector","active","scrollbar","width","M3eNavMenuItemGroupElement","M3eNavMenuItemGroupElement_1","_M3eNavMenuItemGroupElement_labelId","_M3eNavMenuItemGroupElement_label","previousElementSibling","tagName","deleteCustomState","_M3eNavMenuItemGroupElement_instances","_M3eNavMenuItemGroupElement_handleLabelSlotChange"],"mappings":"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"}
+{"version":3,"file":"nav-menu.min.js","sources":["../../src/nav-menu/NavMenuItemElement.ts","../../src/nav-menu/NavMenuElement.ts","../../src/nav-menu/NavMenuItemGroupElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  registerStyleSheet,\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 { M3eNavMenuElement } from \"./NavMenuElement\";\r\n\r\n/**\r\n * An expandable item, selectable item within a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.\r\n * It supports nested child items, selection and disabled states, and emits events for open/close transitions.\r\n * The component is highly customizable via slots and CSS custom properties, and is designed for accessible,\r\n * keyboard-navigable menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item-group>\r\n *     <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n *       <span slot=\"label\">Inbox</span>\r\n *       <span slot=\"badge\">24</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n *       <span slot=\"label\">Outbox</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n *       <span slot=\"label\">Favorites</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n *       <span slot=\"label\">Trash</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item open>\r\n *     <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n *     <span slot=\"label\">Getting Started</span>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n *       <span slot=\"label\">Overview</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n *       <span slot=\"label\">Installation</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n *   <m3e-nav-menu-item>\r\n *     <span slot=\"label\">Actions</span>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item\r\n *\r\n * @slot - Renders the nested child items.\r\n * @slot label - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot badge - Renders the badge of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n * @slot toggle-icon - Renders the toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr open - Whether the item is expanded.\r\n * @attr selected - Whether the item is selected.\r\n *\r\n * @fires opening - Emitted when the item begins to open.\r\n * @fires opened - Emitted when the item has opened.\r\n * @fires closing - Emitted when the item begins to close.\r\n * @fires closed - Emitted when the item has closed.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.\r\n * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.\r\n * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.\r\n * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.\r\n * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.\r\n * @cssprop --m3e-nav-menu-item-height - Height of the item.\r\n * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.\r\n * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.\r\n * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.\r\n * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.\r\n * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.\r\n * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.\r\n * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.\r\n * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.\r\n * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-tracking - Letter spacing for badge slot.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.\r\n * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.\r\n */\r\n@customElement(\"m3e-nav-menu-item\")\r\nexport class M3eNavMenuItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"treeitem\"), true))) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-nav-menu-item > m3e-divider {\r\n        margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n        flex: none;\r\n      }\r\n      m3e-nav-menu-item > m3e-nav-menu-item:first-of-type {\r\n        margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\r\n      }\r\n      m3e-nav-menu-item > m3e-nav-menu-item:last-of-type {\r\n        margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\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: block;\r\n      flex: none;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);\r\n      height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);\r\n      font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      transition: ${unsafeCSS(\r\n        `color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n        background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .base,\r\n    .focus-ring {\r\n      border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    .label {\r\n      flex: 1 1 auto;\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n      vertical-align: middle;\r\n    }\r\n    .icon,\r\n    .toggle {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"badge\"]) {\r\n      flex: none;\r\n      position: relative;\r\n      font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .toggle {\r\n      transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:state(-with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    .icon {\r\n      margin-inline-start: -0.5rem;\r\n    }\r\n    .toggle {\r\n      margin-inline-end: -0.5rem;\r\n    }\r\n    .group {\r\n      padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem);\r\n    }\r\n    :host([open]) .toggle {\r\n      transform: rotate(180deg);\r\n    }\r\n    :host(:not(:state(-with-items))) .toggle,\r\n    :host(:not(:state(-with-items))) .group {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"selected-icon\"]),\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"toggle-icon\"]),\r\n    .toggle-icon {\r\n      vertical-align: middle;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      cursor: pointer;\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-menu-item-disabled-color-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([selected]:not(:state(-with-items)):not(:disabled)) .base {\r\n      color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer});\r\n      background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-menu-item-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-menu-item-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base {\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-menu-item-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-menu-item-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .state-layer {\r\n      margin-inline: auto;\r\n    }\r\n    :host([selected]:state(-with-items):not(:disabled)) .base {\r\n      background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest});\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-menu-item-open-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-menu-item-open-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    ::slotted(a[slot=\"label\"]) {\r\n      all: unset;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .toggle,\r\n      .state-layer {\r\n        transition: none !important;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .state-layer {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        color: LinkText;\r\n      }\r\n      :host([selected]:not(:state(-with-items)):not(:disabled)) .base,\r\n      :host([selected]:state(-with-items):not(:disabled)) .base {\r\n        forced-color-adjust: none;\r\n        background-color: unset;\r\n        color: Highlight;\r\n      }\r\n      :host([selected]:not(:state(-with-items)):not(:disabled)) .base::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2));\r\n        inset-block-start: 50%;\r\n        width: 0.375rem;\r\n        height: 0.375rem;\r\n        border-radius: 50%;\r\n        transform: translateY(-50%);\r\n        background-color: currentColor;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".ripple\") readonly ripple?: M3eRippleElement;\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */ @state() private _hasChildItems = false;\r\n\r\n  /** @private */ #items: M3eNavMenuItemElement[] = [];\r\n  /** @private */ #menu: M3eNavMenuElement | null = null;\r\n  /** @private */ #path = new Array<M3eNavMenuItemElement>();\r\n  /** @private */ #link: HTMLAnchorElement | null = null;\r\n\r\n  /**\r\n   * Whether the item is expanded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /** A reference to the nested `HTMLAnchorElement`. */\r\n  get link(): HTMLAnchorElement | null {\r\n    return this.#link;\r\n  }\r\n\r\n  /** A reference to the element used to present the label of the item. */\r\n  get label(): HTMLElement | null {\r\n    return this._base ?? null;\r\n  }\r\n\r\n  /** Whether the item is visible. */\r\n  get visible(): boolean {\r\n    return !this.#path.some((x) => !x.open);\r\n  }\r\n\r\n  /** The full path of the item, starting with the top-most ancestor, including this item. */\r\n  get path(): ReadonlyArray<M3eNavMenuItemElement> {\r\n    return [...this.#path, this];\r\n  }\r\n\r\n  /** Whether the item has child items. */\r\n  get hasChildItems(): boolean {\r\n    return this._hasChildItems;\r\n  }\r\n\r\n  /** The parenting item. */\r\n  get parentItem(): M3eNavMenuItemElement | null {\r\n    return this.#path[this.#path.length - 1] ?? null;\r\n  }\r\n\r\n  /** The items that immediately descend from this item. */\r\n  get childItems(): readonly M3eNavMenuItemElement[] {\r\n    return this.#items;\r\n  }\r\n\r\n  /** The one-based level of the item. */\r\n  get level(): number {\r\n    return this.#path.length + 1;\r\n  }\r\n\r\n  /**\r\n   * Expands this item, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  expand(descendants: boolean = false): void {\r\n    if (this.hasChildItems) {\r\n      this.open = true;\r\n      if (descendants) {\r\n        this.childItems.forEach((x) => x.expand(true));\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Collapses this item, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  collapse(descendants: boolean = false): void {\r\n    if (this.hasChildItems) {\r\n      this.open = false;\r\n      if (descendants) {\r\n        this.childItems.forEach((x) => x.collapse(true));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** Toggles the expanded state of the item. */\r\n  toggle(): void {\r\n    if (this.hasChildItems) {\r\n      this.open = !this.open;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#path.length = 0;\r\n    for (\r\n      let item = this.parentElement?.closest(\"m3e-nav-menu-item\");\r\n      item;\r\n      item = item.parentElement?.closest(\"m3e-nav-menu-item\")\r\n    ) {\r\n      this.#path.push(item);\r\n    }\r\n    this.#path.reverse();\r\n\r\n    this.style.setProperty(\"--_nav-menu-item-level\", `${this.level}`);\r\n    this.#menu = this.closest(\"m3e-nav-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#path.length = 0;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      // Remove aria-selected and just use aria-current.\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.hasChildItems ? null : `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\":scope > m3e-icon[slot]\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n\r\n      this.#path.forEach((x) => (x.selected = this.selected));\r\n      if (this.selected && !this.hasChildItems) {\r\n        this.closest(\"m3e-nav-menu\")?.[selectionManager].notifySelectionChange(this);\r\n      }\r\n    }\r\n\r\n    if (changedProperties.has(\"open\") || changedProperties.has(\"_hasChildItems\")) {\r\n      this.ariaExpanded = this._hasChildItems ? `${this.open}` : null;\r\n    }\r\n\r\n    if ((changedProperties.has(\"_hasChildItems\") && this.disabled) || changedProperties.has(\"disabled\")) {\r\n      this.#items.forEach((x) => (x.disabled = this.disabled));\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\r\n    const base = this._base;\r\n    if (base) {\r\n      [this.focusRing, this.stateLayer, this.ripple].forEach((x) => x?.attach(base));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" @click=\"${this.#handleClick}\">\r\n        <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n        <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n        <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n        <div class=\"icon\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n        <div class=\"label\">\r\n          <slot name=\"label\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n        </div>\r\n        <slot name=\"badge\"></slot>\r\n        <div aria-hidden=\"true\" class=\"toggle\">\r\n          <slot name=\"toggle-icon\">\r\n            <svg class=\"toggle-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M480-360 280-560h400L480-360Z\" />\r\n            </svg>\r\n          </slot>\r\n        </div>\r\n      </div>\r\n      <m3e-collapsible\r\n        class=\"group\"\r\n        role=\"group\"\r\n        aria-hidden=\"${ifDefined(this._hasChildItems ? undefined : \"true\")}\"\r\n        ?open=\"${this._hasChildItems && this.open}\"\r\n        @opening=\"${this.#handleCollapsibleEvent}\"\r\n        @opened=\"${this.#handleCollapsibleEvent}\"\r\n        @closing=\"${this.#handleCollapsibleEvent}\"\r\n        @closed=\"${this.#handleCollapsibleEvent}\"\r\n      >\r\n        <slot @slotchange=\"${this.#handleItemSlotChange}\"></slot>\r\n      </m3e-collapsible>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    const icon = html`<slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>`;\r\n    return this.selected && !this.hasChildItems\r\n      ? html`<slot name=\"selected-icon\" @slotchange=\"${this.#handleIconSlotChange}\">${icon}</slot>`\r\n      : icon;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event) {\r\n    setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#link =\r\n      (<HTMLSlotElement>e.target).assignedElements({ flatten: true }).find((x) => x instanceof HTMLAnchorElement) ??\r\n      null;\r\n\r\n    this.#link?.setAttribute(\"tabindex\", \"-1\");\r\n  }\r\n\r\n  /** @private */\r\n  #handleItemSlotChange(e: Event): void {\r\n    this.#items = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .filter((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n    const hadChildItems = this._hasChildItems;\r\n    this._hasChildItems = this.#items.length > 0;\r\n    setCustomState(this, \"-with-items\", this._hasChildItems);\r\n\r\n    if (hadChildItems || this._hasChildItems) {\r\n      this.selected = this.#items.some((x) => x.selected);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(): void {\r\n    if (this.disabled) return;\r\n\r\n    this.#menu?.[selectionManager].setActiveItem(this);\r\n    if (!this._hasChildItems) {\r\n      this.#menu?.[selectionManager].select(this);\r\n      this.#path.forEach((x) => (x.selected = this.selected));\r\n      this.#link?.click();\r\n\r\n      const drawerContainer = this.closest(\"m3e-drawer-container\");\r\n      if (drawerContainer) {\r\n        const drawer = this.closest(\"[slot='start']\") ?? this.closest(\"[slot='end']\");\r\n        if (\r\n          drawer &&\r\n          (hasCustomState(drawerContainer, `-${drawer.slot}-push`) ||\r\n            hasCustomState(drawerContainer, `-${drawer.slot}-over`))\r\n        ) {\r\n          setTimeout(() => {\r\n            drawerContainer.removeAttribute(drawer.slot);\r\n            drawerContainer.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n          }, 300);\r\n        }\r\n      }\r\n    } else {\r\n      this.toggle();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCollapsibleEvent(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n  }\r\n}\r\n\r\ninterface M3eNavMenuItemElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n}\r\n\r\nexport interface M3eNavMenuItemElement {\r\n  addEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-menu-item\": M3eNavMenuItemElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  DesignToken,\r\n  FocusController,\r\n  forcedColorsActive,\r\n  PressedController,\r\n  registerStyleSheet,\r\n  Role,\r\n  scrollIntoViewIfNeeded,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eNavMenuItemElement } from \"./NavMenuItemElement\";\r\n\r\n/**\r\n * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting\r\n * nested expandable items, keyboard navigation, and focus management. It is highly customizable\r\n * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,\r\n * and complex menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item-group>\r\n *     <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n *       <span slot=\"label\">Inbox</span>\r\n *       <span slot=\"badge\">24</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n *       <span slot=\"label\">Outbox</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n *       <span slot=\"label\">Favorites</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n *       <span slot=\"label\">Trash</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item open>\r\n *     <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n *     <span slot=\"label\">Getting Started</span>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n *       <span slot=\"label\">Overview</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n *       <span slot=\"label\">Installation</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n *   <m3e-nav-menu-item>\r\n *     <span slot=\"label\">Actions</span>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu\r\n *\r\n * @slot - Renders the items of the menu.\r\n *\r\n * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.\r\n * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.\r\n * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.\r\n */\r\n@customElement(\"m3e-nav-menu\")\r\nexport class M3eNavMenuElement extends Role(LitElement, \"tree\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-nav-menu > m3e-divider {\r\n        margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n        flex: none;\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: block;\r\n      outline: none;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      min-height: 0;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n      min-height: inherit;\r\n      box-sizing: border-box;\r\n      padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem);\r\n      padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);\r\n      padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);\r\n      padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #ignoreFocusVisible = false;\r\n  /** @private */ #ignoreFocus = false;\r\n\r\n  /** @private */\r\n  readonly [selectionManager] = new SelectionManager<M3eNavMenuItemElement>()\r\n    .withVerticalOrientation()\r\n    .withHomeAndEnd()\r\n    .withTypeahead()\r\n    .withSkipPredicate((x) => x.disabled || !x.visible)\r\n    .disableRovingTabIndex()\r\n    .onActiveItemChange(() => {\r\n      if (this[selectionManager].activeItem) {\r\n        this.#activateItem(this[selectionManager].activeItem);\r\n      }\r\n    })\r\n    .onSelectedItemsChange(() => {\r\n      const selected = this.selected;\r\n      for (const item of this.items) {\r\n        if (item !== selected) {\r\n          this.#updateItemFocusVisible(item, false, false);\r\n        }\r\n      }\r\n\r\n      if (selected?.label) {\r\n        scrollIntoViewIfNeeded(selected.label, this, { block: \"start\", behavior: \"smooth\" });\r\n      }\r\n    });\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n  /** @private */ readonly #pointerDownHandler = (e: Event) => this.#handlePointerDown(e);\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, { callback: (pressed) => (this.#ignoreFocus = pressed) });\r\n    new FocusController(this, {\r\n      callback: () => {\r\n        if (!this.#ignoreFocus) {\r\n          this.#updateFocusVisible();\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /** The selected item of the menu. */\r\n  get selected(): M3eNavMenuItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** All the items of the menu. */\r\n  get items(): readonly M3eNavMenuItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /**\r\n   * Expands all items, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  expand(descendants?: boolean): void;\r\n\r\n  /**\r\n   * Expands the specified items, and optionally, all descendants.\r\n   * @param {M3eNavMenuItemElement[]} items The items to expand.\r\n   * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n   */\r\n  expand(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n  /** @internal */\r\n  expand(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n    const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n    items.forEach((x) => x.expand(descendants));\r\n  }\r\n\r\n  /**\r\n   * Collapses all items, and optionally, all descendants.\r\n   * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n   */\r\n  collapse(descendants?: boolean): void;\r\n\r\n  /**\r\n   * Collapses the specified items, and optionally, all descendants.\r\n   * @param {M3eNavMenuItemElement[]} items The items to collapse.\r\n   * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n   */\r\n  collapse(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n  /** @internal */\r\n  collapse(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n    const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n\r\n    items.forEach((x) => x.collapse(descendants));\r\n    const activeItem = this[selectionManager].activeItem;\r\n    if (activeItem && !activeItem.visible) {\r\n      for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {\r\n        if (parent.visible) {\r\n          this[selectionManager].setActiveItem(parent);\r\n          break;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"tabindex\", \"0\");\r\n\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.addEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.removeEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    for (const divider of this.querySelectorAll<HTMLElement>(\"m3e-divider\")) {\r\n      divider.ariaHidden = \"true\";\r\n    }\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-menu-item\")]);\r\n    for (const item of added) {\r\n      item.id = item.id || `m3e-nav-menu-item-${M3eNavMenuElement.__nextId++}`;\r\n    }\r\n    if (this[selectionManager].activeItem) {\r\n      this.setAttribute(\"aria-activedescendant\", this[selectionManager].activeItem.id);\r\n      this.#updateFocusVisible();\r\n    } else {\r\n      this.removeAttribute(\"aria-activedescendant\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#ignoreFocusVisible = false;\r\n    this.#updateFocusVisible();\r\n\r\n    const item = this[selectionManager].activeItem;\r\n    if (e.defaultPrevented || !item || item.disabled) return;\r\n\r\n    switch (e.key) {\r\n      case \"Enter\":\r\n      case \" \":\r\n        e.preventDefault();\r\n\r\n        if (e.key === \" \" && item.ripple && !item.ripple.visible) {\r\n          item.ripple.centered = true;\r\n          item.ripple.show(0, 0, true);\r\n          item.ripple.centered = false;\r\n        }\r\n\r\n        if (item.hasChildItems) {\r\n          requestAnimationFrame(() => item.toggle());\r\n        } else if (!item.selected) {\r\n          this[selectionManager].select(item);\r\n          item.link?.click();\r\n        }\r\n        break;\r\n\r\n      case \"*\":\r\n        e.preventDefault();\r\n        item.expand(true);\r\n        break;\r\n\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        e.preventDefault();\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          if (item.hasChildItems && item.open) {\r\n            requestAnimationFrame(() => item.collapse());\r\n          } else {\r\n            const parent = item.parentItem;\r\n            if (parent) {\r\n              this[selectionManager].setActiveItem(parent);\r\n            }\r\n          }\r\n        } else if (item.hasChildItems && !item.open) {\r\n          item.expand();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        e.preventDefault();\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          if (item.hasChildItems && item.open) {\r\n            requestAnimationFrame(() => item.collapse());\r\n          } else {\r\n            const parent = item.parentItem;\r\n            if (parent) {\r\n              this[selectionManager].setActiveItem(parent);\r\n            }\r\n          }\r\n        } else if (item.hasChildItems && !item.open) {\r\n          item.expand();\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this[selectionManager].onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(e: KeyboardEvent): void {\r\n    const item = this[selectionManager].activeItem;\r\n    if (!e.defaultPrevented && item && !item.disabled && e.key === \" \") {\r\n      item.ripple?.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: Event): void {\r\n    if (!e.defaultPrevented && !this.#ignoreFocusVisible && !forcedColorsActive()) {\r\n      this.#ignoreFocusVisible = true;\r\n\r\n      const item = e\r\n        .composedPath()\r\n        .reverse()\r\n        .find((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n      if (item && !item.disabled) {\r\n        this.#updateItemFocusVisible(item, true, false);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #activateItem(item: M3eNavMenuItemElement): void {\r\n    this.setAttribute(\"aria-activedescendant\", item.id);\r\n    if (item.label) {\r\n      scrollIntoViewIfNeeded(item.label, this, { block: \"nearest\", behavior: \"smooth\" });\r\n    }\r\n    this.#updateFocusVisible();\r\n  }\r\n\r\n  /** @private */\r\n  #updateFocusVisible(): void {\r\n    const focusWithin = this.matches(\":focus-within\");\r\n    const focused = focusWithin || this.matches(\":focus\");\r\n    const focusVisible =\r\n      focused &&\r\n      !this.#ignoreFocusVisible &&\r\n      (forcedColorsActive() ||\r\n        this.matches(\":focus-visible\") ||\r\n        (focusWithin && this.querySelector(\"a:focus-visible\") !== null));\r\n\r\n    this[selectionManager].items.forEach((x) => {\r\n      const active = x === this[selectionManager].activeItem;\r\n      this.#updateItemFocusVisible(x, active && focused, active && focusVisible);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateItemFocusVisible(item: M3eNavMenuItemElement, focused: boolean, focusVisible: boolean): void {\r\n    if (focused && focusVisible) {\r\n      item.stateLayer?.show(\"focused\");\r\n    } else {\r\n      item.stateLayer?.hide(\"focused\");\r\n    }\r\n    if (focusVisible) {\r\n      item.focusRing?.show();\r\n    } else {\r\n      item.focusRing?.hide();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-menu\": M3eNavMenuElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { AttachInternals, customElement, deleteCustomState, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A top-level semantic grouping of items in a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.\r\n * It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n *   <m3e-nav-menu-item-group>\r\n *     <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n *       <span slot=\"label\">Inbox</span>\r\n *       <span slot=\"badge\">24</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n *       <span slot=\"label\">Outbox</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n *       <span slot=\"label\">Favorites</span>\r\n *     </m3e-nav-menu-item>\r\n *     <m3e-nav-menu-item>\r\n *       <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n *       <span slot=\"label\">Trash</span>\r\n *     </m3e-nav-menu-item>\r\n *   </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item-group\r\n *\r\n * @slot - Renders the items of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.\r\n * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.\r\n */\r\n@customElement(\"m3e-nav-menu-item-group\")\r\nexport class M3eNavMenuItemGroupElement extends AttachInternals(Role(LitElement, \"group\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    :host(:not(:state(-with-label))) .label {\r\n      display: none;\r\n    }\r\n    .label {\r\n      margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem);\r\n      margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n      flex: none;\r\n    }\r\n    :host(:state(-divided)) .label {\r\n      margin-block-start: calc(\r\n        var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem)\r\n      );\r\n    }\r\n    :host(:not(:state(-divided))) .label {\r\n      margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-nav-menu-item-group-label-${M3eNavMenuItemGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    setCustomState(this, \"-divided\", this.previousElementSibling?.tagName === \"M3E-DIVIDER\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    deleteCustomState(this, \"-divided\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </div>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (e.target as HTMLSlotElement).assignedElements({ flatten: true })[0];\r\n    if (label !== this.#label) {\r\n      // If the label is changed and its id matched the reversed id,\r\n      // clear the id in the event the element is moved elsewhere in the DOM.\r\n\r\n      if (this.#label?.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\r\n\r\n      this.#label = label;\r\n\r\n      if (this.#label) {\r\n        this.#label.id = this.#label.id || this.#labelId;\r\n        this.setAttribute(\"aria-labelledby\", this.#label.id);\r\n      } else {\r\n        this.removeAttribute(\"aria-labelledby\");\r\n      }\r\n    }\r\n    setCustomState(this, \"-with-label\", this.#label !== undefined);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-menu-item-group\": M3eNavMenuItemGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eNavMenuItemElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","this","_hasChildItems","_M3eNavMenuItemElement_items","set","_M3eNavMenuItemElement_menu","_M3eNavMenuItemElement_path","Array","_M3eNavMenuItemElement_link","open","link","__classPrivateFieldGet","label","_base","visible","some","x","path","hasChildItems","parentItem","length","childItems","level","expand","descendants","forEach","collapse","toggle","connectedCallback","super","item","parentElement","closest","push","reverse","style","setProperty","__classPrivateFieldSet","disconnectedCallback","update","changedProperties","has","ariaSelected","ariaCurrent","selected","icon","querySelectorAll","toggleAttribute","selectionManager","notifySelectionChange","ariaExpanded","disabled","firstUpdated","_changedProperties","base","focusRing","stateLayer","ripple","attach","render","html","_M3eNavMenuItemElement_instances","_M3eNavMenuItemElement_handleClick","_M3eNavMenuItemElement_renderIcon","call","_M3eNavMenuItemElement_handleSlotChange","ifDefined","undefined","_M3eNavMenuItemElement_handleCollapsibleEvent","_M3eNavMenuItemElement_handleItemSlotChange","_M3eNavMenuItemElement_handleIconSlotChange","e","setCustomState","hasAssignedNodes","target","assignedElements","flatten","find","HTMLAnchorElement","setAttribute","filter","M3eNavMenuItemElement_1","hadChildItems","setActiveItem","select","click","drawerContainer","drawer","hasCustomState","slot","setTimeout","removeAttribute","dispatchEvent","Event","bubbles","stopPropagation","type","registerStyleSheet","css","styles","DesignToken","density","calc","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","unsafeCSS","motion","duration","short4","easing","shape","corner","full","medium1","color","onSurfaceVariant","onSurface","onSecondaryContainer","secondaryContainer","surfaceContainerHighest","__decorate","query","prototype","state","property","Boolean","reflect","customElement","M3eNavMenuElement","M3eNavMenuElement_1","_M3eNavMenuElement_ignoreFocusVisible","_M3eNavMenuElement_ignoreFocus","_b","SelectionManager","withVerticalOrientation","withHomeAndEnd","withTypeahead","withSkipPredicate","disableRovingTabIndex","onActiveItemChange","activeItem","_M3eNavMenuElement_instances","_M3eNavMenuElement_activateItem","onSelectedItemsChange","items","_M3eNavMenuElement_updateItemFocusVisible","scrollIntoViewIfNeeded","block","behavior","_M3eNavMenuElement_keyDownHandler","_M3eNavMenuElement_keyUpHandler","_M3eNavMenuElement_pointerDownHandler","PressedController","callback","pressed","FocusController","_M3eNavMenuElement_updateFocusVisible","selectedItems","itemsOrDescendants","maybeDescendants","isArray","parent","addEventListener","removeEventListener","_M3eNavMenuElement_handleSlotChange","divider","ariaHidden","added","setItems","id","__nextId","defaultPrevented","key","preventDefault","centered","show","requestAnimationFrame","M3eDirectionality","current","onKeyDown","hide","forcedColorsActive","composedPath","focusWithin","matches","focused","focusVisible","querySelector","active","scrollbar","width","M3eNavMenuItemGroupElement","M3eNavMenuItemGroupElement_1","_M3eNavMenuItemGroupElement_labelId","_M3eNavMenuItemGroupElement_label","previousElementSibling","tagName","deleteCustomState","_M3eNavMenuItemGroupElement_instances","_M3eNavMenuItemGroupElement_handleLabelSlotChange"],"mappings":"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"}

package/dist/paginator.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __decorate } from 'tslib';
 import { LitElement, html, nothing, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { EventAttribute, Role, DesignToken, customElement } from '@m3e/web/core';
+import { Role, DesignToken, customElement } from '@m3e/web/core';
 import '@m3e/web/form-field';
 import '@m3e/web/select';
 import '@m3e/web/option';
@@ -67,7 +67,7 @@ var M3ePaginatorElement_1;
  * @cssprop --m3e-paginator-line-height - The line height used for paginator text.
  * @cssprop --m3e-paginator-tracking - The letter-spacing used for paginator text.
  */
-let M3ePaginatorElement = M3ePaginatorElement_1 = class M3ePaginatorElement extends EventAttribute(Role(LitElement, "group"), "page") {
+let M3ePaginatorElement = M3ePaginatorElement_1 = class M3ePaginatorElement extends Role(LitElement, "group") {
   constructor() {
     super(...arguments);
     _M3ePaginatorElement_instances.add(this);

package/dist/paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.js","sources":["../../src/paginator/PaginatorElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Paginator\r\n * Source: https://github.com/angular/components/blob/main/src/material/paginator/paginator.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, EventAttribute, Role } from \"@m3e/web/core\";\r\nimport type { M3eSelectElement } from \"@m3e/web/select\";\r\nimport type { FormFieldVariant } from \"@m3e/web/form-field\";\r\n\r\nimport \"@m3e/web/form-field\";\r\nimport \"@m3e/web/select\";\r\nimport \"@m3e/web/option\";\r\nimport \"@m3e/web/icon-button\";\r\nimport \"@m3e/web/tooltip\";\r\n\r\nimport { PaginatorPageEventDetail } from \"./PaginatorPageEventDetail\";\r\n\r\n/**\r\n * Provides navigation for paged information, typically used with a table.\r\n *\r\n * @description\r\n * The `m3e-paginator` component is a compact, accessible paginator control for navigating\r\n * paged data sets. It provides semantic first/previous/next/last navigation controls and an\r\n * optional page-size selector that integrates with Material design tokens and `m3e-form-field` variants\r\n * to ensure consistent typography, density, and spacing across applications.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-paginator`. In this example, there are 300 total\r\n * records and the first/last navigation controls are shown.\r\n * ```html\r\n * <m3e-paginator show-first-last-buttons length=\"300\"></m3e-paginator>\r\n * ```\r\n *\r\n * @tag m3e-paginator\r\n *\r\n * @slot first-page-icon - Slot for a custom first-page icon.\r\n * @slot previous-page-icon - Slot for a custom previous-page icon.\r\n * @slot next-page-icon - Slot for a custom next-page icon.\r\n * @slot last-page-icon - Slot for a custom last-page icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr first-page-label - The accessible label given to the button used to move to the first page.\r\n * @attr hide-page-size - Whether to hide page size selection.\r\n * @attr items-per-page-label - The label for the page size selector.\r\n * @attr last-page-label - The accessible label given to the button used to move to the last page.\r\n * @attr length - The length of the total number of items which are being paginated.\r\n * @attr next-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr page-index - The zero-based page index of the displayed list of items.\r\n * @attr page-size - The number of items to display in a page.\r\n * @attr page-sizes - A comma separated list of available page sizes.\r\n * @attr page-size-variant - The appearance variant of the page size field.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr show-first-last-buttons - Whether to show first/last buttons.\r\n *\r\n * @fires page - Emitted when a user selects a different page size or navigates to another page.\r\n *\r\n * @cssprop --m3e-paginator-font-size - The font size used for paginator text.\r\n * @cssprop --m3e-paginator-font-weight - The font weight used for paginator text.\r\n * @cssprop --m3e-paginator-line-height - The line height used for paginator text.\r\n * @cssprop --m3e-paginator-tracking - The letter-spacing used for paginator text.\r\n */\r\n@customElement(\"m3e-paginator\")\r\nexport class M3ePaginatorElement extends EventAttribute(Role(LitElement, \"group\"), \"page\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .outer {\r\n      display: flex;\r\n      font-size: var(--m3e-paginator-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-paginator-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-paginator-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-paginator-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n    }\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      padding-inline: 0.5rem;\r\n      width: 100%;\r\n    }\r\n    .form-field {\r\n      --md-sys-density-scale: -2;\r\n      --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      --m3e-form-field-font-weight: var(\r\n        --m3e-paginator-font-weight,\r\n        ${DesignToken.typescale.standard.body.small.fontWeight}\r\n      );\r\n      --m3e-form-field-line-height: var(\r\n        --m3e-paginator-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n      --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n    }\r\n    .items-per-page-label {\r\n      display: flex;\r\n      align-items: center;\r\n      margin-inline-end: 0.5rem;\r\n    }\r\n    .form-field {\r\n      min-width: auto;\r\n      width: 6rem;\r\n      margin-inline: 0.25rem;\r\n    }\r\n    .range-label {\r\n      margin-inline: 1.5rem 2rem;\r\n    }\r\n    :host([hide-page-size]) .range-label {\r\n      margin-inline-start: unset;\r\n    }\r\n    .range-actions {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    ::slotted([slot=\"first-page-icon\"]),\r\n    ::slotted([slot=\"previous-page-icon\"]),\r\n    ::slotted([slot=\"next-page-icon\"]),\r\n    ::slotted([slot=\"last-page-icon\"]),\r\n    svg {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important;\r\n    }\r\n\r\n    :host(:dir(rtl)) svg {\r\n      transform: rotate(180deg);\r\n    }\r\n  `;\r\n\r\n  /* @private */ private static __nextId = 0;\r\n  /* @private */ readonly #pageSizeLabelId = `m3e-paginator-page-size-label-${M3ePaginatorElement.__nextId++}`;\r\n\r\n  /* @private */\r\n  readonly #defaultRangeLabelFormatter = (pageIndex: number, pageSize: number | \"all\", length: number): string => {\r\n    length = Math.max(length, 0);\r\n\r\n    if (pageSize === \"all\") return \"\";\r\n    if (length === 0 || pageSize <= 0) return `0 of ${length}`;\r\n\r\n    const startIndex = pageIndex * pageSize;\r\n    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;\r\n    return `${startIndex + 1} - ${endIndex} of ${length}`;\r\n  };\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * The zero-based page index of the displayed list of items.\r\n   * @default 0\r\n   */\r\n  @property({ attribute: \"page-index\", type: Number }) pageIndex = 0;\r\n\r\n  /**\r\n   * The length of the total number of items which are being paginated.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) length = 0;\r\n\r\n  /**\r\n   * The number of items to display in a page.\r\n   * @default 50\r\n   */\r\n  @property({ attribute: \"page-size\", converter: (value) => (value === \"all\" ? \"all\" : Number(value)) })\r\n  pageSize: number | \"all\" = 50;\r\n\r\n  /**\r\n   * A comma separated list of available page sizes.\r\n   * @default \"5,10,25,50,100\"\r\n   */\r\n  @property({ attribute: \"page-sizes\" }) pageSizes = \"5,10,25,50,100\";\r\n\r\n  /**\r\n   * Whether to hide page size selection.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-page-size\", type: Boolean, reflect: true }) hidePageSize = false;\r\n\r\n  /**\r\n   * Whether to show first/last buttons.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"show-first-last-buttons\", type: Boolean }) showFirstLastButtons = false;\r\n\r\n  /**\r\n   * The label for the page size selector.\r\n   * @default \"Items per page:\"\r\n   */\r\n  @property({ attribute: \"items-per-page-label\" }) itemsPerPageLabel = \"Items per page:\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the first page.\r\n   * @default \"First page\"\r\n   */\r\n  @property({ attribute: \"first-page-label\" }) firstPageLabel = \"First page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the last page.\r\n   * @default \"Last page\"\r\n   */\r\n  @property({ attribute: \"last-page-label\" }) lastPageLabel = \"Last page\";\r\n\r\n  /**\r\n   * The appearance variant of the page size field.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ attribute: \"page-size-variant\" }) pageSizeVariant: FormFieldVariant = \"outlined\";\r\n\r\n  /** The total number of pages. */\r\n  get pageCount(): number {\r\n    return !this.pageSize || this.pageSize === \"all\" ? 0 : Math.ceil(this.length / this.pageSize);\r\n  }\r\n\r\n  /** Whether a previous page can be displayed. */\r\n  get hasPreviousPage(): boolean {\r\n    return this.pageSize !== \"all\" && this.pageSize > 0 && this.pageIndex >= 1;\r\n  }\r\n\r\n  /** Whether a next page can be displayed. */\r\n  get hasNextPage(): boolean {\r\n    return this.pageSize !== \"all\" && this.pageSize > 0 && this.pageIndex < this.pageCount - 1;\r\n  }\r\n\r\n  /**\r\n   * A function used to format the range label.\r\n   * @param {number} pageIndex The zero-based index of the current page.\r\n   * @param {number | \"all\"} pageSize The current number of items to display in a page.\r\n   * @param {number} length The current length of the total number of items which are being paginated.\r\n   * @returns {string} The range label.\r\n   */\r\n  rangeLabelFormatter?: (pageIndex: number, pageSize: number | \"all\", length: number) => string;\r\n\r\n  /** Move to the first page. */\r\n  firstPage(): void {\r\n    if (this.hasPreviousPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex = 0;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** Move to the previous page. */\r\n  previousPage(): void {\r\n    if (this.hasPreviousPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex--;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** Move to the next page. */\r\n  nextPage(): void {\r\n    if (this.hasNextPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex++;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** Move to the last page. */\r\n  lastPage(): void {\r\n    if (this.hasNextPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex = this.pageCount - 1;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"pageIndex\")) {\r\n      const pageSizes = this.#parsePageSizes();\r\n      if (!pageSizes.includes(this.pageSize)) {\r\n        this.pageSizes = [...pageSizes, this.pageSize].join(\",\");\r\n        this.pageSizes = this.#parsePageSizes().join(\",\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"outer\">\r\n      <div class=\"inner\">${this.#renderPageSize()} ${this.#renderRangeActions()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderPageSize(): unknown {\r\n    const sizes = this.#parsePageSizes();\r\n    return this.hidePageSize\r\n      ? nothing\r\n      : html`<div id=\"${this.#pageSizeLabelId}\" class=\"items-per-page-label\" aria-live=\"polite\">\r\n            ${this.itemsPerPageLabel}\r\n          </div>\r\n          <m3e-form-field class=\"form-field\" variant=\"${this.pageSizeVariant}\" hide-subscript=\"always\">\r\n            <m3e-select\r\n              class=\"select\"\r\n              aria-labelledby=\"${this.#pageSizeLabelId}\"\r\n              hide-selection-indicator\r\n              ?disabled=\"${this.disabled || sizes.length <= 1}\"\r\n              @change=\"${this.#handleSelectChange}\"\r\n            >\r\n              ${sizes.map(\r\n                (x) =>\r\n                  html`<m3e-option value=\"${x}\" ?selected=\"${x === this.pageSize}\">\r\n                    ${x === \"all\" ? \"All\" : x}\r\n                  </m3e-option>`,\r\n              )}\r\n            </m3e-select>\r\n          </m3e-form-field>`;\r\n  }\r\n\r\n  /** @private */\r\n  #parsePageSizes(): Array<number | \"all\"> {\r\n    const sizes: Array<number | \"all\"> = this.pageSizes\r\n      .split(\",\")\r\n      .map((x) => x.trim())\r\n      .filter((x) => x !== \"\")\r\n      .map((x) => (x === \"all\" ? x : Number(x)));\r\n\r\n    const numericSizes = <Array<number>>sizes.filter((x) => x !== \"all\");\r\n    numericSizes.sort((a, b) => a - b);\r\n    return sizes.some((x) => x === \"all\") ? [...numericSizes, \"all\"] : numericSizes;\r\n  }\r\n\r\n  /** @private */\r\n  #renderRangeActions(): unknown {\r\n    const rangeLabelFormatter = this.rangeLabelFormatter ?? this.#defaultRangeLabelFormatter;\r\n\r\n    return this.pageSize === \"all\"\r\n      ? nothing\r\n      : html`<div class=\"range-actions\">\r\n          <div class=\"range-label\">${rangeLabelFormatter(this.pageIndex, this.pageSize, this.length)}</div>\r\n          ${!this.showFirstLastButtons\r\n            ? nothing\r\n            : html`<m3e-icon-button\r\n                  id=\"firstPageButton\"\r\n                  aria-label=\"${this.firstPageLabel}\"\r\n                  ?disabled=\"${this.disabled || !this.hasPreviousPage}\"\r\n                  @click=\"${this.firstPage}\"\r\n                >\r\n                  <slot name=\"first-page-icon\">\r\n                    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                      <path d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n                    </svg>\r\n                  </slot>\r\n                </m3e-icon-button>\r\n                <m3e-tooltip for=\"firstPageButton\" position=\"above\">${this.firstPageLabel}</m3e-tooltip>`}\r\n          <m3e-icon-button\r\n            id=\"previousPageButton\"\r\n            aria-label=\"${this.previousPageLabel}\"\r\n            ?disabled=\"${this.disabled || !this.hasPreviousPage}\"\r\n            @click=\"${this.previousPage}\"\r\n          >\r\n            <slot name=\"previous-page-icon\">\r\n              <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n              </svg>\r\n            </slot>\r\n          </m3e-icon-button>\r\n          <m3e-tooltip for=\"previousPageButton\" position=\"above\">${this.previousPageLabel}</m3e-tooltip>\r\n          <m3e-icon-button\r\n            id=\"nextPageButton\"\r\n            aria-label=\"${this.nextPageLabel}\"\r\n            ?disabled=\"${this.disabled || !this.hasNextPage}\"\r\n            @click=\"${this.nextPage}\"\r\n          >\r\n            <slot name=\"next-page-icon\">\r\n              <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n              </svg>\r\n            </slot>\r\n          </m3e-icon-button>\r\n          <m3e-tooltip for=\"nextPageButton\" position=\"above\">${this.nextPageLabel}</m3e-tooltip>\r\n          ${!this.showFirstLastButtons\r\n            ? nothing\r\n            : html`<m3e-icon-button\r\n                  id=\"lastPageButton\"\r\n                  aria-label=\"${this.lastPageLabel}\"\r\n                  ?disabled=\"${this.disabled || !this.hasNextPage}\"\r\n                  @click=\"${this.lastPage}\"\r\n                >\r\n                  <slot name=\"last-page-icon\">\r\n                    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                      <path d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\" />\r\n                    </svg>\r\n                  </slot>\r\n                </m3e-icon-button>\r\n                <m3e-tooltip for=\"lastPageButton\" position=\"above\">${this.lastPageLabel}</m3e-tooltip>`}\r\n        </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectChange(e: Event): void {\r\n    const option = (e.target as M3eSelectElement)?.selected[0];\r\n    if (!option) return;\r\n\r\n    const pageSize = option.value === \"all\" ? \"all\" : Number(option.value);\r\n    if (pageSize !== this.pageSize) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex = 0;\r\n      this.pageSize = pageSize;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #emitPageEvent(previousPageIndex: number): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<PaginatorPageEventDetail>(\"page\", {\r\n        detail: {\r\n          previousPageIndex: previousPageIndex,\r\n          pageIndex: this.pageIndex,\r\n          pageSize: this.pageSize,\r\n          length: this.length,\r\n        },\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ninterface M3ePaginatorElementEventMap extends HTMLElementEventMap {\r\n  page: CustomEvent<PaginatorPageEventDetail>;\r\n}\r\n\r\nexport interface M3ePaginatorElement {\r\n  addEventListener<K extends keyof M3ePaginatorElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3ePaginatorElement, ev: M3ePaginatorElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3ePaginatorElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3ePaginatorElement, ev: M3ePaginatorElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-paginator\": M3ePaginatorElement;\r\n  }\r\n}\r\n"],"names":["M3ePaginatorElement","M3ePaginatorElement_1","EventAttribute","Role","LitElement","constructor","_M3ePaginatorElement_pageSizeLabelId","__nextId","_M3ePaginatorElement_defaultRangeLabelFormatter","set","pageIndex","pageSize","length","Math","max","startIndex","endIndex","min","disabled","pageSizes","hidePageSize","showFirstLastButtons","itemsPerPageLabel","previousPageLabel","nextPageLabel","firstPageLabel","lastPageLabel","pageSizeVariant","pageCount","ceil","hasPreviousPage","hasNextPage","firstPage","previousPageIndex","__classPrivateFieldGet","_M3ePaginatorElement_instances","_M3ePaginatorElement_emitPageEvent","call","previousPage","nextPage","lastPage","willUpdate","changedProperties","has","includes","join","_M3ePaginatorElement_parsePageSizes","render","html","_M3ePaginatorElement_renderPageSize","_M3ePaginatorElement_renderRangeActions","sizes","nothing","_M3ePaginatorElement_handleSelectChange","map","x","split","trim","filter","Number","numericSizes","sort","a","b","some","rangeLabelFormatter","e","option","target","selected","value","dispatchEvent","CustomEvent","detail","styles","css","DesignToken","typescale","standard","body","small","fontSize","fontWeight","lineHeight","tracking","__decorate","property","type","Boolean","reflect","prototype","attribute","converter","customElement"],"mappings":"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"}
+{"version":3,"file":"paginator.js","sources":["../../src/paginator/PaginatorElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Paginator\r\n * Source: https://github.com/angular/components/blob/main/src/material/paginator/paginator.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport type { M3eSelectElement } from \"@m3e/web/select\";\r\nimport type { FormFieldVariant } from \"@m3e/web/form-field\";\r\n\r\nimport \"@m3e/web/form-field\";\r\nimport \"@m3e/web/select\";\r\nimport \"@m3e/web/option\";\r\nimport \"@m3e/web/icon-button\";\r\nimport \"@m3e/web/tooltip\";\r\n\r\nimport { PaginatorPageEventDetail } from \"./PaginatorPageEventDetail\";\r\n\r\n/**\r\n * Provides navigation for paged information, typically used with a table.\r\n *\r\n * @description\r\n * The `m3e-paginator` component is a compact, accessible paginator control for navigating\r\n * paged data sets. It provides semantic first/previous/next/last navigation controls and an\r\n * optional page-size selector that integrates with Material design tokens and `m3e-form-field` variants\r\n * to ensure consistent typography, density, and spacing across applications.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-paginator`. In this example, there are 300 total\r\n * records and the first/last navigation controls are shown.\r\n * ```html\r\n * <m3e-paginator show-first-last-buttons length=\"300\"></m3e-paginator>\r\n * ```\r\n *\r\n * @tag m3e-paginator\r\n *\r\n * @slot first-page-icon - Slot for a custom first-page icon.\r\n * @slot previous-page-icon - Slot for a custom previous-page icon.\r\n * @slot next-page-icon - Slot for a custom next-page icon.\r\n * @slot last-page-icon - Slot for a custom last-page icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr first-page-label - The accessible label given to the button used to move to the first page.\r\n * @attr hide-page-size - Whether to hide page size selection.\r\n * @attr items-per-page-label - The label for the page size selector.\r\n * @attr last-page-label - The accessible label given to the button used to move to the last page.\r\n * @attr length - The length of the total number of items which are being paginated.\r\n * @attr next-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr page-index - The zero-based page index of the displayed list of items.\r\n * @attr page-size - The number of items to display in a page.\r\n * @attr page-sizes - A comma separated list of available page sizes.\r\n * @attr page-size-variant - The appearance variant of the page size field.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr show-first-last-buttons - Whether to show first/last buttons.\r\n *\r\n * @fires page - Emitted when a user selects a different page size or navigates to another page.\r\n *\r\n * @cssprop --m3e-paginator-font-size - The font size used for paginator text.\r\n * @cssprop --m3e-paginator-font-weight - The font weight used for paginator text.\r\n * @cssprop --m3e-paginator-line-height - The line height used for paginator text.\r\n * @cssprop --m3e-paginator-tracking - The letter-spacing used for paginator text.\r\n */\r\n@customElement(\"m3e-paginator\")\r\nexport class M3ePaginatorElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .outer {\r\n      display: flex;\r\n      font-size: var(--m3e-paginator-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-paginator-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-paginator-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-paginator-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n    }\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      padding-inline: 0.5rem;\r\n      width: 100%;\r\n    }\r\n    .form-field {\r\n      --md-sys-density-scale: -2;\r\n      --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      --m3e-form-field-font-weight: var(\r\n        --m3e-paginator-font-weight,\r\n        ${DesignToken.typescale.standard.body.small.fontWeight}\r\n      );\r\n      --m3e-form-field-line-height: var(\r\n        --m3e-paginator-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n      --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n    }\r\n    .items-per-page-label {\r\n      display: flex;\r\n      align-items: center;\r\n      margin-inline-end: 0.5rem;\r\n    }\r\n    .form-field {\r\n      min-width: auto;\r\n      width: 6rem;\r\n      margin-inline: 0.25rem;\r\n    }\r\n    .range-label {\r\n      margin-inline: 1.5rem 2rem;\r\n    }\r\n    :host([hide-page-size]) .range-label {\r\n      margin-inline-start: unset;\r\n    }\r\n    .range-actions {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    ::slotted([slot=\"first-page-icon\"]),\r\n    ::slotted([slot=\"previous-page-icon\"]),\r\n    ::slotted([slot=\"next-page-icon\"]),\r\n    ::slotted([slot=\"last-page-icon\"]),\r\n    svg {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important;\r\n    }\r\n\r\n    :host(:dir(rtl)) svg {\r\n      transform: rotate(180deg);\r\n    }\r\n  `;\r\n\r\n  /* @private */ private static __nextId = 0;\r\n  /* @private */ readonly #pageSizeLabelId = `m3e-paginator-page-size-label-${M3ePaginatorElement.__nextId++}`;\r\n\r\n  /* @private */\r\n  readonly #defaultRangeLabelFormatter = (pageIndex: number, pageSize: number | \"all\", length: number): string => {\r\n    length = Math.max(length, 0);\r\n\r\n    if (pageSize === \"all\") return \"\";\r\n    if (length === 0 || pageSize <= 0) return `0 of ${length}`;\r\n\r\n    const startIndex = pageIndex * pageSize;\r\n    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;\r\n    return `${startIndex + 1} - ${endIndex} of ${length}`;\r\n  };\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * The zero-based page index of the displayed list of items.\r\n   * @default 0\r\n   */\r\n  @property({ attribute: \"page-index\", type: Number }) pageIndex = 0;\r\n\r\n  /**\r\n   * The length of the total number of items which are being paginated.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) length = 0;\r\n\r\n  /**\r\n   * The number of items to display in a page.\r\n   * @default 50\r\n   */\r\n  @property({ attribute: \"page-size\", converter: (value) => (value === \"all\" ? \"all\" : Number(value)) })\r\n  pageSize: number | \"all\" = 50;\r\n\r\n  /**\r\n   * A comma separated list of available page sizes.\r\n   * @default \"5,10,25,50,100\"\r\n   */\r\n  @property({ attribute: \"page-sizes\" }) pageSizes = \"5,10,25,50,100\";\r\n\r\n  /**\r\n   * Whether to hide page size selection.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-page-size\", type: Boolean, reflect: true }) hidePageSize = false;\r\n\r\n  /**\r\n   * Whether to show first/last buttons.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"show-first-last-buttons\", type: Boolean }) showFirstLastButtons = false;\r\n\r\n  /**\r\n   * The label for the page size selector.\r\n   * @default \"Items per page:\"\r\n   */\r\n  @property({ attribute: \"items-per-page-label\" }) itemsPerPageLabel = \"Items per page:\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the first page.\r\n   * @default \"First page\"\r\n   */\r\n  @property({ attribute: \"first-page-label\" }) firstPageLabel = \"First page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the last page.\r\n   * @default \"Last page\"\r\n   */\r\n  @property({ attribute: \"last-page-label\" }) lastPageLabel = \"Last page\";\r\n\r\n  /**\r\n   * The appearance variant of the page size field.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ attribute: \"page-size-variant\" }) pageSizeVariant: FormFieldVariant = \"outlined\";\r\n\r\n  /** The total number of pages. */\r\n  get pageCount(): number {\r\n    return !this.pageSize || this.pageSize === \"all\" ? 0 : Math.ceil(this.length / this.pageSize);\r\n  }\r\n\r\n  /** Whether a previous page can be displayed. */\r\n  get hasPreviousPage(): boolean {\r\n    return this.pageSize !== \"all\" && this.pageSize > 0 && this.pageIndex >= 1;\r\n  }\r\n\r\n  /** Whether a next page can be displayed. */\r\n  get hasNextPage(): boolean {\r\n    return this.pageSize !== \"all\" && this.pageSize > 0 && this.pageIndex < this.pageCount - 1;\r\n  }\r\n\r\n  /**\r\n   * A function used to format the range label.\r\n   * @param {number} pageIndex The zero-based index of the current page.\r\n   * @param {number | \"all\"} pageSize The current number of items to display in a page.\r\n   * @param {number} length The current length of the total number of items which are being paginated.\r\n   * @returns {string} The range label.\r\n   */\r\n  rangeLabelFormatter?: (pageIndex: number, pageSize: number | \"all\", length: number) => string;\r\n\r\n  /** Move to the first page. */\r\n  firstPage(): void {\r\n    if (this.hasPreviousPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex = 0;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** Move to the previous page. */\r\n  previousPage(): void {\r\n    if (this.hasPreviousPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex--;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** Move to the next page. */\r\n  nextPage(): void {\r\n    if (this.hasNextPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex++;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** Move to the last page. */\r\n  lastPage(): void {\r\n    if (this.hasNextPage) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex = this.pageCount - 1;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"pageIndex\")) {\r\n      const pageSizes = this.#parsePageSizes();\r\n      if (!pageSizes.includes(this.pageSize)) {\r\n        this.pageSizes = [...pageSizes, this.pageSize].join(\",\");\r\n        this.pageSizes = this.#parsePageSizes().join(\",\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"outer\">\r\n      <div class=\"inner\">${this.#renderPageSize()} ${this.#renderRangeActions()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderPageSize(): unknown {\r\n    const sizes = this.#parsePageSizes();\r\n    return this.hidePageSize\r\n      ? nothing\r\n      : html`<div id=\"${this.#pageSizeLabelId}\" class=\"items-per-page-label\" aria-live=\"polite\">\r\n            ${this.itemsPerPageLabel}\r\n          </div>\r\n          <m3e-form-field class=\"form-field\" variant=\"${this.pageSizeVariant}\" hide-subscript=\"always\">\r\n            <m3e-select\r\n              class=\"select\"\r\n              aria-labelledby=\"${this.#pageSizeLabelId}\"\r\n              hide-selection-indicator\r\n              ?disabled=\"${this.disabled || sizes.length <= 1}\"\r\n              @change=\"${this.#handleSelectChange}\"\r\n            >\r\n              ${sizes.map(\r\n                (x) =>\r\n                  html`<m3e-option value=\"${x}\" ?selected=\"${x === this.pageSize}\">\r\n                    ${x === \"all\" ? \"All\" : x}\r\n                  </m3e-option>`,\r\n              )}\r\n            </m3e-select>\r\n          </m3e-form-field>`;\r\n  }\r\n\r\n  /** @private */\r\n  #parsePageSizes(): Array<number | \"all\"> {\r\n    const sizes: Array<number | \"all\"> = this.pageSizes\r\n      .split(\",\")\r\n      .map((x) => x.trim())\r\n      .filter((x) => x !== \"\")\r\n      .map((x) => (x === \"all\" ? x : Number(x)));\r\n\r\n    const numericSizes = <Array<number>>sizes.filter((x) => x !== \"all\");\r\n    numericSizes.sort((a, b) => a - b);\r\n    return sizes.some((x) => x === \"all\") ? [...numericSizes, \"all\"] : numericSizes;\r\n  }\r\n\r\n  /** @private */\r\n  #renderRangeActions(): unknown {\r\n    const rangeLabelFormatter = this.rangeLabelFormatter ?? this.#defaultRangeLabelFormatter;\r\n\r\n    return this.pageSize === \"all\"\r\n      ? nothing\r\n      : html`<div class=\"range-actions\">\r\n          <div class=\"range-label\">${rangeLabelFormatter(this.pageIndex, this.pageSize, this.length)}</div>\r\n          ${!this.showFirstLastButtons\r\n            ? nothing\r\n            : html`<m3e-icon-button\r\n                  id=\"firstPageButton\"\r\n                  aria-label=\"${this.firstPageLabel}\"\r\n                  ?disabled=\"${this.disabled || !this.hasPreviousPage}\"\r\n                  @click=\"${this.firstPage}\"\r\n                >\r\n                  <slot name=\"first-page-icon\">\r\n                    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                      <path d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n                    </svg>\r\n                  </slot>\r\n                </m3e-icon-button>\r\n                <m3e-tooltip for=\"firstPageButton\" position=\"above\">${this.firstPageLabel}</m3e-tooltip>`}\r\n          <m3e-icon-button\r\n            id=\"previousPageButton\"\r\n            aria-label=\"${this.previousPageLabel}\"\r\n            ?disabled=\"${this.disabled || !this.hasPreviousPage}\"\r\n            @click=\"${this.previousPage}\"\r\n          >\r\n            <slot name=\"previous-page-icon\">\r\n              <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n              </svg>\r\n            </slot>\r\n          </m3e-icon-button>\r\n          <m3e-tooltip for=\"previousPageButton\" position=\"above\">${this.previousPageLabel}</m3e-tooltip>\r\n          <m3e-icon-button\r\n            id=\"nextPageButton\"\r\n            aria-label=\"${this.nextPageLabel}\"\r\n            ?disabled=\"${this.disabled || !this.hasNextPage}\"\r\n            @click=\"${this.nextPage}\"\r\n          >\r\n            <slot name=\"next-page-icon\">\r\n              <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n              </svg>\r\n            </slot>\r\n          </m3e-icon-button>\r\n          <m3e-tooltip for=\"nextPageButton\" position=\"above\">${this.nextPageLabel}</m3e-tooltip>\r\n          ${!this.showFirstLastButtons\r\n            ? nothing\r\n            : html`<m3e-icon-button\r\n                  id=\"lastPageButton\"\r\n                  aria-label=\"${this.lastPageLabel}\"\r\n                  ?disabled=\"${this.disabled || !this.hasNextPage}\"\r\n                  @click=\"${this.lastPage}\"\r\n                >\r\n                  <slot name=\"last-page-icon\">\r\n                    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                      <path d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\" />\r\n                    </svg>\r\n                  </slot>\r\n                </m3e-icon-button>\r\n                <m3e-tooltip for=\"lastPageButton\" position=\"above\">${this.lastPageLabel}</m3e-tooltip>`}\r\n        </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectChange(e: Event): void {\r\n    const option = (e.target as M3eSelectElement)?.selected[0];\r\n    if (!option) return;\r\n\r\n    const pageSize = option.value === \"all\" ? \"all\" : Number(option.value);\r\n    if (pageSize !== this.pageSize) {\r\n      const previousPageIndex = this.pageIndex;\r\n      this.pageIndex = 0;\r\n      this.pageSize = pageSize;\r\n      this.#emitPageEvent(previousPageIndex);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #emitPageEvent(previousPageIndex: number): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<PaginatorPageEventDetail>(\"page\", {\r\n        detail: {\r\n          previousPageIndex: previousPageIndex,\r\n          pageIndex: this.pageIndex,\r\n          pageSize: this.pageSize,\r\n          length: this.length,\r\n        },\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ninterface M3ePaginatorElementEventMap extends HTMLElementEventMap {\r\n  page: CustomEvent<PaginatorPageEventDetail>;\r\n}\r\n\r\nexport interface M3ePaginatorElement {\r\n  addEventListener<K extends keyof M3ePaginatorElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3ePaginatorElement, ev: M3ePaginatorElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3ePaginatorElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3ePaginatorElement, ev: M3ePaginatorElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-paginator\": M3ePaginatorElement;\r\n  }\r\n}\r\n"],"names":["M3ePaginatorElement","M3ePaginatorElement_1","Role","LitElement","constructor","_M3ePaginatorElement_pageSizeLabelId","__nextId","_M3ePaginatorElement_defaultRangeLabelFormatter","set","pageIndex","pageSize","length","Math","max","startIndex","endIndex","min","disabled","pageSizes","hidePageSize","showFirstLastButtons","itemsPerPageLabel","previousPageLabel","nextPageLabel","firstPageLabel","lastPageLabel","pageSizeVariant","pageCount","ceil","hasPreviousPage","hasNextPage","firstPage","previousPageIndex","__classPrivateFieldGet","_M3ePaginatorElement_instances","_M3ePaginatorElement_emitPageEvent","call","previousPage","nextPage","lastPage","willUpdate","changedProperties","has","includes","join","_M3ePaginatorElement_parsePageSizes","render","html","_M3ePaginatorElement_renderPageSize","_M3ePaginatorElement_renderRangeActions","sizes","nothing","_M3ePaginatorElement_handleSelectChange","map","x","split","trim","filter","Number","numericSizes","sort","a","b","some","rangeLabelFormatter","e","option","target","selected","value","dispatchEvent","CustomEvent","detail","styles","css","DesignToken","typescale","standard","body","small","fontSize","fontWeight","lineHeight","tracking","__decorate","property","type","Boolean","reflect","prototype","attribute","converter","customElement"],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;;;AAkBH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AAEI,IAAMA,mBAAmB,GAAAC,qBAAA,GAAzB,MAAMD,mBAAoB,SAAQE,IAAI,CAACC,UAAU,EAAE,OAAO,CAAC,CAAA;AAA3DC,EAAAA,WAAAA,GAAA;;;AAoEL;IAAwBC,+CAAmB,CAAA,8BAAA,EAAiCJ,qBAAmB,CAACK,QAAQ,EAAE,CAAA,CAAE,CAAA;AAE5G;IACSC,+CAAA,CAAAC,GAAA,CAAA,IAAA,EAA8B,CAACC,SAAiB,EAAEC,QAAwB,EAAEC,MAAc,KAAY;MAC7GA,MAAM,GAAGC,IAAI,CAACC,GAAG,CAACF,MAAM,EAAE,CAAC,CAAC;AAE5B,MAAA,IAAID,QAAQ,KAAK,KAAK,EAAE,OAAO,EAAE;MACjC,IAAIC,MAAM,KAAK,CAAC,IAAID,QAAQ,IAAI,CAAC,EAAE,OAAO,CAAA,KAAA,EAAQC,MAAM,CAAA,CAAE;AAE1D,MAAA,MAAMG,UAAU,GAAGL,SAAS,GAAGC,QAAQ;AACvC,MAAA,MAAMK,QAAQ,GAAGD,UAAU,GAAGH,MAAM,GAAGC,IAAI,CAACI,GAAG,CAACF,UAAU,GAAGJ,QAAQ,EAAEC,MAAM,CAAC,GAAGG,UAAU,GAAGJ,QAAQ;MACtG,OAAO,CAAA,EAAGI,UAAU,GAAG,CAAC,MAAMC,QAAQ,CAAA,IAAA,EAAOJ,MAAM,CAAA,CAAE;AACvD,IAAA,CAAC,CAAA;AAED;;;AAGG;IACyC,IAAA,CAAAM,QAAQ,GAAG,KAAK;AAE5D;;;AAGG;IACkD,IAAA,CAAAR,SAAS,GAAG,CAAC;AAElE;;;AAGG;IACyB,IAAA,CAAAE,MAAM,GAAG,CAAC;AAEtC;;;AAGG;IAEH,IAAA,CAAAD,QAAQ,GAAmB,EAAE;AAE7B;;;AAGG;IACoC,IAAA,CAAAQ,SAAS,GAAG,gBAAgB;AAEnE;;;AAGG;IACsE,IAAA,CAAAC,YAAY,GAAG,KAAK;AAE7F;;;AAGG;IACgE,IAAA,CAAAC,oBAAoB,GAAG,KAAK;AAE/F;;;AAGG;IAC8C,IAAA,CAAAC,iBAAiB,GAAG,iBAAiB;AAEtF;;;AAGG;IAC6C,IAAA,CAAAC,iBAAiB,GAAG,eAAe;AAEnF;;;AAGG;IACyC,IAAA,CAAAC,aAAa,GAAG,WAAW;AAEvE;;;AAGG;IAC0C,IAAA,CAAAC,cAAc,GAAG,YAAY;AAE1E;;;AAGG;IACyC,IAAA,CAAAC,aAAa,GAAG,WAAW;AAEvE;;;AAGG;IAC2C,IAAA,CAAAC,eAAe,GAAqB,UAAU;AAuN9F,EAAA;AArNE;EACA,IAAIC,SAASA,GAAA;IACX,OAAO,CAAC,IAAI,CAACjB,QAAQ,IAAI,IAAI,CAACA,QAAQ,KAAK,KAAK,GAAG,CAAC,GAAGE,IAAI,CAACgB,IAAI,CAAC,IAAI,CAACjB,MAAM,GAAG,IAAI,CAACD,QAAQ,CAAC;AAC/F,EAAA;AAEA;EACA,IAAImB,eAAeA,GAAA;AACjB,IAAA,OAAO,IAAI,CAACnB,QAAQ,KAAK,KAAK,IAAI,IAAI,CAACA,QAAQ,GAAG,CAAC,IAAI,IAAI,CAACD,SAAS,IAAI,CAAC;AAC5E,EAAA;AAEA;EACA,IAAIqB,WAAWA,GAAA;IACb,OAAO,IAAI,CAACpB,QAAQ,KAAK,KAAK,IAAI,IAAI,CAACA,QAAQ,GAAG,CAAC,IAAI,IAAI,CAACD,SAAS,GAAG,IAAI,CAACkB,SAAS,GAAG,CAAC;AAC5F,EAAA;AAWA;AACAI,EAAAA,SAASA,GAAA;IACP,IAAI,IAAI,CAACF,eAAe,EAAE;AACxB,MAAA,MAAMG,iBAAiB,GAAG,IAAI,CAACvB,SAAS;MACxC,IAAI,CAACA,SAAS,GAAG,CAAC;AAClBwB,MAAAA,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAe,CAAAC,IAAA,CAAnB,IAAI,EAAgBJ,iBAAiB,CAAC;AACxC,IAAA;AACF,EAAA;AAEA;AACAK,EAAAA,YAAYA,GAAA;IACV,IAAI,IAAI,CAACR,eAAe,EAAE;AACxB,MAAA,MAAMG,iBAAiB,GAAG,IAAI,CAACvB,SAAS;MACxC,IAAI,CAACA,SAAS,EAAE;AAChBwB,MAAAA,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAe,CAAAC,IAAA,CAAnB,IAAI,EAAgBJ,iBAAiB,CAAC;AACxC,IAAA;AACF,EAAA;AAEA;AACAM,EAAAA,QAAQA,GAAA;IACN,IAAI,IAAI,CAACR,WAAW,EAAE;AACpB,MAAA,MAAME,iBAAiB,GAAG,IAAI,CAACvB,SAAS;MACxC,IAAI,CAACA,SAAS,EAAE;AAChBwB,MAAAA,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAe,CAAAC,IAAA,CAAnB,IAAI,EAAgBJ,iBAAiB,CAAC;AACxC,IAAA;AACF,EAAA;AAEA;AACAO,EAAAA,QAAQA,GAAA;IACN,IAAI,IAAI,CAACT,WAAW,EAAE;AACpB,MAAA,MAAME,iBAAiB,GAAG,IAAI,CAACvB,SAAS;AACxC,MAAA,IAAI,CAACA,SAAS,GAAG,IAAI,CAACkB,SAAS,GAAG,CAAC;AACnCM,MAAAA,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAe,CAAAC,IAAA,CAAnB,IAAI,EAAgBJ,iBAAiB,CAAC;AACxC,IAAA;AACF,EAAA;AAEA;EACmBQ,UAAUA,CAACC,iBAAuC,EAAA;AACnE,IAAA,KAAK,CAACD,UAAU,CAACC,iBAAiB,CAAC;AAEnC,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,WAAW,CAAC,EAAE;AACtC,MAAA,MAAMxB,SAAS,GAAGe,sBAAA,CAAA,IAAI,2EAAgB,CAAAG,IAAA,CAApB,IAAI,CAAkB;MACxC,IAAI,CAAClB,SAAS,CAACyB,QAAQ,CAAC,IAAI,CAACjC,QAAQ,CAAC,EAAE;AACtC,QAAA,IAAI,CAACQ,SAAS,GAAG,CAAC,GAAGA,SAAS,EAAE,IAAI,CAACR,QAAQ,CAAC,CAACkC,IAAI,CAAC,GAAG,CAAC;QACxD,IAAI,CAAC1B,SAAS,GAAGe,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAW,mCAAA,CAAgB,CAAAT,IAAA,CAApB,IAAI,CAAkB,CAACQ,IAAI,CAAC,GAAG,CAAC;AACnD,MAAA;AACF,IAAA;AACF,EAAA;AAEA;AACmBE,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,sCAAA,EACYd,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAc,mCAAA,CAAgB,CAAAZ,IAAA,CAApB,IAAI,CAAkB,CAAA,CAAA,EAAIH,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAe,uCAAA,CAAoB,CAAAb,IAAA,CAAxB,IAAI,CAAsB,CAAA,YAAA,CACpE;AACT,EAAA;;;;;;AAIE,EAAA,MAAMc,KAAK,GAAGjB,sBAAA,CAAA,IAAI,2EAAgB,CAAAG,IAAA,CAApB,IAAI,CAAkB;AACpC,EAAA,OAAO,IAAI,CAACjB,YAAY,GACpBgC,OAAO,GACPJ,IAAI,CAAA,SAAA,EAAYd,sBAAA,CAAA,IAAI,EAAA5B,oCAAA,EAAA,GAAA,CAAiB,qDAC/B,IAAI,CAACgB,iBAAiB,CAAA,kDAAA,EAEoB,IAAI,CAACK,eAAe,CAAA,sEAAA,EAG3CO,sBAAA,CAAA,IAAI,EAAA5B,oCAAA,EAAA,GAAA,CAAiB,CAAA,sCAAA,EAE3B,IAAI,CAACY,QAAQ,IAAIiC,KAAK,CAACvC,MAAM,IAAI,CAAC,CAAA,WAAA,EACpCsB,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAkB,uCAAA,CAAoB,CAAA,EAAA,EAEjCF,KAAK,CAACG,GAAG,CACRC,CAAC,IACAP,IAAI,CAAA,mBAAA,EAAsBO,CAAC,CAAA,aAAA,EAAgBA,CAAC,KAAK,IAAI,CAAC5C,QAAQ,CAAA,EAAA,EAC1D4C,CAAC,KAAK,KAAK,GAAG,KAAK,GAAGA,CAAC,CAAA,aAAA,CACb,CACjB,CAAA,8BAAA,CAEa;AAC1B,CAAC;;EAIC,MAAMJ,KAAK,GAA0B,IAAI,CAAChC,SAAS,CAChDqC,KAAK,CAAC,GAAG,CAAC,CACVF,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACE,IAAI,EAAE,CAAC,CACpBC,MAAM,CAAEH,CAAC,IAAKA,CAAC,KAAK,EAAE,CAAC,CACvBD,GAAG,CAAEC,CAAC,IAAMA,CAAC,KAAK,KAAK,GAAGA,CAAC,GAAGI,MAAM,CAACJ,CAAC,CAAE,CAAC;EAE5C,MAAMK,YAAY,GAAkBT,KAAK,CAACO,MAAM,CAAEH,CAAC,IAAKA,CAAC,KAAK,KAAK,CAAC;EACpEK,YAAY,CAACC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,CAAC;AAClC,EAAA,OAAOZ,KAAK,CAACa,IAAI,CAAET,CAAC,IAAKA,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAGK,YAAY,EAAE,KAAK,CAAC,GAAGA,YAAY;AACjF,CAAC;;AAIC,EAAA,MAAMK,mBAAmB,GAAG,IAAI,CAACA,mBAAmB,IAAI/B,sBAAA,CAAA,IAAI,EAAA1B,+CAAA,EAAA,GAAA,CAA4B;AAExF,EAAA,OAAO,IAAI,CAACG,QAAQ,KAAK,KAAK,GAC1ByC,OAAO,GACPJ,IAAI,CAAA,oDAAA,EACyBiB,mBAAmB,CAAC,IAAI,CAACvD,SAAS,EAAE,IAAI,CAACC,QAAQ,EAAE,IAAI,CAACC,MAAM,CAAC,CAAA,MAAA,EACxF,CAAC,IAAI,CAACS,oBAAoB,GACxB+B,OAAO,GACPJ,IAAI,CAAA,kDAAA,EAEc,IAAI,CAACvB,cAAc,CAAA,aAAA,EACpB,IAAI,CAACP,QAAQ,IAAI,CAAC,IAAI,CAACY,eAAe,CAAA,UAAA,EACzC,IAAI,CAACE,SAAS,CAAA,4PAAA,EAQ4B,IAAI,CAACP,cAAc,CAAA,cAAA,CAAgB,CAAA,qDAAA,EAG/E,IAAI,CAACF,iBAAiB,CAAA,aAAA,EACvB,IAAI,CAACL,QAAQ,IAAI,CAAC,IAAI,CAACY,eAAe,CAAA,UAAA,EACzC,IAAI,CAACQ,YAAY,CAAA,2OAAA,EAQ4B,IAAI,CAACf,iBAAiB,CAAA,+DAAA,EAG/D,IAAI,CAACC,aAAa,CAAA,aAAA,EACnB,IAAI,CAACN,QAAQ,IAAI,CAAC,IAAI,CAACa,WAAW,CAAA,UAAA,EACrC,IAAI,CAACQ,QAAQ,CAAA,mOAAA,EAQ4B,IAAI,CAACf,aAAa,CAAA,cAAA,EACrE,CAAC,IAAI,CAACH,oBAAoB,GACxB+B,OAAO,GACPJ,IAAI,CAAA,iDAAA,EAEc,IAAI,CAACtB,aAAa,CAAA,aAAA,EACnB,IAAI,CAACR,QAAQ,IAAI,CAAC,IAAI,CAACa,WAAW,CAAA,UAAA,EACrC,IAAI,CAACS,QAAQ,CAAA,0PAAA,EAQ4B,IAAI,CAACd,aAAa,gBAAgB,CAAA,MAAA,CACxF;AACb,CAAC;2FAGmBwC,CAAQ,EAAA;EAC1B,MAAMC,MAAM,GAAID,CAAC,CAACE,MAA2B,EAAEC,QAAQ,CAAC,CAAC,CAAC;EAC1D,IAAI,CAACF,MAAM,EAAE;AAEb,EAAA,MAAMxD,QAAQ,GAAGwD,MAAM,CAACG,KAAK,KAAK,KAAK,GAAG,KAAK,GAAGX,MAAM,CAACQ,MAAM,CAACG,KAAK,CAAC;AACtE,EAAA,IAAI3D,QAAQ,KAAK,IAAI,CAACA,QAAQ,EAAE;AAC9B,IAAA,MAAMsB,iBAAiB,GAAG,IAAI,CAACvB,SAAS;IACxC,IAAI,CAACA,SAAS,GAAG,CAAC;IAClB,IAAI,CAACC,QAAQ,GAAGA,QAAQ;AACxBuB,IAAAA,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAe,CAAAC,IAAA,CAAnB,IAAI,EAAgBJ,iBAAiB,CAAC;AACxC,EAAA;AACF,CAAC;iFAGcA,iBAAyB,EAAA;AACtC,EAAA,IAAI,CAACsC,aAAa,CAChB,IAAIC,WAAW,CAA2B,MAAM,EAAE;AAChDC,IAAAA,MAAM,EAAE;AACNxC,MAAAA,iBAAiB,EAAEA,iBAAiB;MACpCvB,SAAS,EAAE,IAAI,CAACA,SAAS;MACzBC,QAAQ,EAAE,IAAI,CAACA,QAAQ;MACvBC,MAAM,EAAE,IAAI,CAACA;AACd;AACF,GAAA,CAAC,CACH;AACH,CAAC;AApXD;AACgBX,mBAAA,CAAAyE,MAAM,GAAmBC,GAAG,+FAMIC,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAA,iDAAA,EAC9CL,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACE,UAAU,CAAA,iDAAA,EACpDN,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACG,UAAU,oDACpDP,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACI,QAAQ,CAAA,yNAAA,EAWrCR,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAA,mEAAA,EAG3GL,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACE,UAAU,uEAIpDN,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACG,UAAU,CAAA,6DAAA,EAEGP,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACI,QAAQ,CAAA,gnBAAA,CA7B3F;AAiEtB;AAA8BnF,mBAAA,CAAAM,QAAQ,GAAG,CAAC;AAmBE8E,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAkB,EAAAxF,mBAAA,CAAAyF,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMRL,UAAA,CAAA,CAApDC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,YAAY;AAAEJ,EAAAA,IAAI,EAAE5B;AAAM,CAAE,CAAC,CAAe,EAAA1D,mBAAA,CAAAyF,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMvCL,UAAA,CAAA,CAA3BC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAE5B;CAAQ,CAAC,CAAY,EAAA1D,mBAAA,CAAAyF,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAOvCL,UAAA,CAAA,CADCC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,WAAW;EAAEC,SAAS,EAAGtB,KAAK,IAAMA,KAAK,KAAK,KAAK,GAAG,KAAK,GAAGX,MAAM,CAACW,KAAK;CAAI,CAAC,CACxE,EAAArE,mBAAA,CAAAyF,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMSL,UAAA,CAAA,CAAtCC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAc,CAAC,CAA8B,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMKL,UAAA,CAAA,CAAxEC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,gBAAgB;AAAEJ,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAsB,EAAAxF,mBAAA,CAAAyF,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAM3BL,UAAA,CAAA,CAAlEC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,yBAAyB;AAAEJ,EAAAA,IAAI,EAAEC;AAAO,CAAE,CAAC,CAA8B,EAAAvF,mBAAA,CAAAyF,SAAA,EAAA,sBAAA,EAAA,MAAA,CAAA;AAM/CL,UAAA,CAAA,CAAhDC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAwB,CAAC,CAAuC,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAMvCL,UAAA,CAAA,CAA/CC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAuB,CAAC,CAAqC,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAMxCL,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAmB,CAAC,CAA6B,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAM3BL,UAAA,CAAA,CAA5CC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAoB,CAAC,CAA+B,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAM/BL,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAmB,CAAC,CAA6B,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAM1BL,UAAA,CAAA,CAA7CC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAqB,CAAC,CAAgD,EAAA1F,mBAAA,CAAAyF,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AA/JlFzF,mBAAmB,GAAAC,qBAAA,GAAAmF,UAAA,CAAA,CAD/BQ,aAAa,CAAC,eAAe,CAAC,CAClB,EAAA5F,mBAAmB,CAsX/B;;;;"}

package/dist/paginator.min.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as i,html as a,nothing as s,css as o}from"lit";import{property as l}from"lit/decorators.js";import{EventAttribute as n,Role as r,DesignToken as p,customElement as g}from"@m3e/web/core";import"@m3e/web/form-field";import"@m3e/web/select";import"@m3e/web/option";import"@m3e/web/icon-button";import"@m3e/web/tooltip";
+import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as i,html as a,nothing as s,css as o}from"lit";import{property as l}from"lit/decorators.js";import{Role as n,DesignToken as r,customElement as p}from"@m3e/web/core";import"@m3e/web/form-field";import"@m3e/web/select";import"@m3e/web/option";import"@m3e/web/icon-button";import"@m3e/web/tooltip";
 /**
  * Adapted from Angular Material Paginator
  * Source: https://github.com/angular/components/blob/main/src/material/paginator/paginator.ts
@@ -11,5 +11,5 @@ import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement
  * @license MIT
  * Copyright (c) 2025 Google LLC
  * See LICENSE file in the project root for full license text.
- */var h,d,m,c,b,u,f,v,P;let x=P=class extends(n(r(i,"group"),"page")){constructor(){super(...arguments),h.add(this),d.set(this,"m3e-paginator-page-size-label-"+P.__nextId++),m.set(this,(e,t,i)=>{if(i=Math.max(i,0),"all"===t)return"";if(0===i||t<=0)return`0 of ${i}`;const a=e*t;return`${a+1} - ${a<i?Math.min(a+t,i):a+t} of ${i}`}),this.disabled=!1,this.pageIndex=0,this.length=0,this.pageSize=50,this.pageSizes="5,10,25,50,100",this.hidePageSize=!1,this.showFirstLastButtons=!1,this.itemsPerPageLabel="Items per page:",this.previousPageLabel="Previous page",this.nextPageLabel="Next page",this.firstPageLabel="First page",this.lastPageLabel="Last page",this.pageSizeVariant="outlined"}get pageCount(){return this.pageSize&&"all"!==this.pageSize?Math.ceil(this.length/this.pageSize):0}get hasPreviousPage(){return"all"!==this.pageSize&&this.pageSize>0&&this.pageIndex>=1}get hasNextPage(){return"all"!==this.pageSize&&this.pageSize>0&&this.pageIndex<this.pageCount-1}firstPage(){if(this.hasPreviousPage){const t=this.pageIndex;this.pageIndex=0,e(this,h,"m",v).call(this,t)}}previousPage(){if(this.hasPreviousPage){const t=this.pageIndex;this.pageIndex--,e(this,h,"m",v).call(this,t)}}nextPage(){if(this.hasNextPage){const t=this.pageIndex;this.pageIndex++,e(this,h,"m",v).call(this,t)}}lastPage(){if(this.hasNextPage){const t=this.pageIndex;this.pageIndex=this.pageCount-1,e(this,h,"m",v).call(this,t)}}willUpdate(t){if(super.willUpdate(t),t.has("pageIndex")){const t=e(this,h,"m",b).call(this);t.includes(this.pageSize)||(this.pageSizes=[...t,this.pageSize].join(","),this.pageSizes=e(this,h,"m",b).call(this).join(","))}}render(){return a`<div class="outer"><div class="inner">${e(this,h,"m",c).call(this)} ${e(this,h,"m",u).call(this)}</div></div>`}};d=new WeakMap,m=new WeakMap,h=new WeakSet,c=function(){const t=e(this,h,"m",b).call(this);return this.hidePageSize?s:a`<div id="${e(this,d,"f")}" class="items-per-page-label" aria-live="polite">${this.itemsPerPageLabel}</div><m3e-form-field class="form-field" variant="${this.pageSizeVariant}" hide-subscript="always"><m3e-select class="select" aria-labelledby="${e(this,d,"f")}" hide-selection-indicator ?disabled="${this.disabled||t.length<=1}" @change="${e(this,h,"m",f)}">${t.map(e=>a`<m3e-option value="${e}" ?selected="${e===this.pageSize}">${"all"===e?"All":e}</m3e-option>`)}</m3e-select></m3e-form-field>`},b=function(){const e=this.pageSizes.split(",").map(e=>e.trim()).filter(e=>""!==e).map(e=>"all"===e?e:Number(e)),t=e.filter(e=>"all"!==e);return t.sort((e,t)=>e-t),e.some(e=>"all"===e)?[...t,"all"]:t},u=function(){const t=this.rangeLabelFormatter??e(this,m,"f");return"all"===this.pageSize?s:a`<div class="range-actions"><div class="range-label">${t(this.pageIndex,this.pageSize,this.length)}</div>${this.showFirstLastButtons?a`<m3e-icon-button id="firstPageButton" aria-label="${this.firstPageLabel}" ?disabled="${this.disabled||!this.hasPreviousPage}" @click="${this.firstPage}"><slot name="first-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="firstPageButton" position="above">${this.firstPageLabel}</m3e-tooltip>`:s}<m3e-icon-button id="previousPageButton" aria-label="${this.previousPageLabel}" ?disabled="${this.disabled||!this.hasPreviousPage}" @click="${this.previousPage}"><slot name="previous-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="previousPageButton" position="above">${this.previousPageLabel}</m3e-tooltip><m3e-icon-button id="nextPageButton" aria-label="${this.nextPageLabel}" ?disabled="${this.disabled||!this.hasNextPage}" @click="${this.nextPage}"><slot name="next-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="nextPageButton" position="above">${this.nextPageLabel}</m3e-tooltip>${this.showFirstLastButtons?a`<m3e-icon-button id="lastPageButton" aria-label="${this.lastPageLabel}" ?disabled="${this.disabled||!this.hasNextPage}" @click="${this.lastPage}"><slot name="last-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="lastPageButton" position="above">${this.lastPageLabel}</m3e-tooltip>`:s}</div>`},f=function(t){const i=t.target?.selected[0];if(!i)return;const a="all"===i.value?"all":Number(i.value);if(a!==this.pageSize){const t=this.pageIndex;this.pageIndex=0,this.pageSize=a,e(this,h,"m",v).call(this,t)}},v=function(e){this.dispatchEvent(new CustomEvent("page",{detail:{previousPageIndex:e,pageIndex:this.pageIndex,pageSize:this.pageSize,length:this.length}}))},x.styles=o`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${p.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${p.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${p.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${p.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; } .form-field { --md-sys-density-scale: -2; --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${p.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${p.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${p.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${p.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`,x.__nextId=0,t([l({type:Boolean,reflect:!0})],x.prototype,"disabled",void 0),t([l({attribute:"page-index",type:Number})],x.prototype,"pageIndex",void 0),t([l({type:Number})],x.prototype,"length",void 0),t([l({attribute:"page-size",converter:e=>"all"===e?"all":Number(e)})],x.prototype,"pageSize",void 0),t([l({attribute:"page-sizes"})],x.prototype,"pageSizes",void 0),t([l({attribute:"hide-page-size",type:Boolean,reflect:!0})],x.prototype,"hidePageSize",void 0),t([l({attribute:"show-first-last-buttons",type:Boolean})],x.prototype,"showFirstLastButtons",void 0),t([l({attribute:"items-per-page-label"})],x.prototype,"itemsPerPageLabel",void 0),t([l({attribute:"previous-page-label"})],x.prototype,"previousPageLabel",void 0),t([l({attribute:"next-page-label"})],x.prototype,"nextPageLabel",void 0),t([l({attribute:"first-page-label"})],x.prototype,"firstPageLabel",void 0),t([l({attribute:"last-page-label"})],x.prototype,"lastPageLabel",void 0),t([l({attribute:"page-size-variant"})],x.prototype,"pageSizeVariant",void 0),x=P=t([g("m3e-paginator")],x);export{x as M3ePaginatorElement};
+ */var g,h,d,m,c,b,u,f,v;let P=v=class extends(n(i,"group")){constructor(){super(...arguments),g.add(this),h.set(this,"m3e-paginator-page-size-label-"+v.__nextId++),d.set(this,(e,t,i)=>{if(i=Math.max(i,0),"all"===t)return"";if(0===i||t<=0)return`0 of ${i}`;const a=e*t;return`${a+1} - ${a<i?Math.min(a+t,i):a+t} of ${i}`}),this.disabled=!1,this.pageIndex=0,this.length=0,this.pageSize=50,this.pageSizes="5,10,25,50,100",this.hidePageSize=!1,this.showFirstLastButtons=!1,this.itemsPerPageLabel="Items per page:",this.previousPageLabel="Previous page",this.nextPageLabel="Next page",this.firstPageLabel="First page",this.lastPageLabel="Last page",this.pageSizeVariant="outlined"}get pageCount(){return this.pageSize&&"all"!==this.pageSize?Math.ceil(this.length/this.pageSize):0}get hasPreviousPage(){return"all"!==this.pageSize&&this.pageSize>0&&this.pageIndex>=1}get hasNextPage(){return"all"!==this.pageSize&&this.pageSize>0&&this.pageIndex<this.pageCount-1}firstPage(){if(this.hasPreviousPage){const t=this.pageIndex;this.pageIndex=0,e(this,g,"m",f).call(this,t)}}previousPage(){if(this.hasPreviousPage){const t=this.pageIndex;this.pageIndex--,e(this,g,"m",f).call(this,t)}}nextPage(){if(this.hasNextPage){const t=this.pageIndex;this.pageIndex++,e(this,g,"m",f).call(this,t)}}lastPage(){if(this.hasNextPage){const t=this.pageIndex;this.pageIndex=this.pageCount-1,e(this,g,"m",f).call(this,t)}}willUpdate(t){if(super.willUpdate(t),t.has("pageIndex")){const t=e(this,g,"m",c).call(this);t.includes(this.pageSize)||(this.pageSizes=[...t,this.pageSize].join(","),this.pageSizes=e(this,g,"m",c).call(this).join(","))}}render(){return a`<div class="outer"><div class="inner">${e(this,g,"m",m).call(this)} ${e(this,g,"m",b).call(this)}</div></div>`}};h=new WeakMap,d=new WeakMap,g=new WeakSet,m=function(){const t=e(this,g,"m",c).call(this);return this.hidePageSize?s:a`<div id="${e(this,h,"f")}" class="items-per-page-label" aria-live="polite">${this.itemsPerPageLabel}</div><m3e-form-field class="form-field" variant="${this.pageSizeVariant}" hide-subscript="always"><m3e-select class="select" aria-labelledby="${e(this,h,"f")}" hide-selection-indicator ?disabled="${this.disabled||t.length<=1}" @change="${e(this,g,"m",u)}">${t.map(e=>a`<m3e-option value="${e}" ?selected="${e===this.pageSize}">${"all"===e?"All":e}</m3e-option>`)}</m3e-select></m3e-form-field>`},c=function(){const e=this.pageSizes.split(",").map(e=>e.trim()).filter(e=>""!==e).map(e=>"all"===e?e:Number(e)),t=e.filter(e=>"all"!==e);return t.sort((e,t)=>e-t),e.some(e=>"all"===e)?[...t,"all"]:t},b=function(){const t=this.rangeLabelFormatter??e(this,d,"f");return"all"===this.pageSize?s:a`<div class="range-actions"><div class="range-label">${t(this.pageIndex,this.pageSize,this.length)}</div>${this.showFirstLastButtons?a`<m3e-icon-button id="firstPageButton" aria-label="${this.firstPageLabel}" ?disabled="${this.disabled||!this.hasPreviousPage}" @click="${this.firstPage}"><slot name="first-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="firstPageButton" position="above">${this.firstPageLabel}</m3e-tooltip>`:s}<m3e-icon-button id="previousPageButton" aria-label="${this.previousPageLabel}" ?disabled="${this.disabled||!this.hasPreviousPage}" @click="${this.previousPage}"><slot name="previous-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="previousPageButton" position="above">${this.previousPageLabel}</m3e-tooltip><m3e-icon-button id="nextPageButton" aria-label="${this.nextPageLabel}" ?disabled="${this.disabled||!this.hasNextPage}" @click="${this.nextPage}"><slot name="next-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="nextPageButton" position="above">${this.nextPageLabel}</m3e-tooltip>${this.showFirstLastButtons?a`<m3e-icon-button id="lastPageButton" aria-label="${this.lastPageLabel}" ?disabled="${this.disabled||!this.hasNextPage}" @click="${this.lastPage}"><slot name="last-page-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z"/></svg></slot></m3e-icon-button><m3e-tooltip for="lastPageButton" position="above">${this.lastPageLabel}</m3e-tooltip>`:s}</div>`},u=function(t){const i=t.target?.selected[0];if(!i)return;const a="all"===i.value?"all":Number(i.value);if(a!==this.pageSize){const t=this.pageIndex;this.pageIndex=0,this.pageSize=a,e(this,g,"m",f).call(this,t)}},f=function(e){this.dispatchEvent(new CustomEvent("page",{detail:{previousPageIndex:e,pageIndex:this.pageIndex,pageSize:this.pageSize,length:this.length}}))},P.styles=o`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${r.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${r.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${r.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${r.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; } .form-field { --md-sys-density-scale: -2; --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${r.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${r.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${r.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${r.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`,P.__nextId=0,t([l({type:Boolean,reflect:!0})],P.prototype,"disabled",void 0),t([l({attribute:"page-index",type:Number})],P.prototype,"pageIndex",void 0),t([l({type:Number})],P.prototype,"length",void 0),t([l({attribute:"page-size",converter:e=>"all"===e?"all":Number(e)})],P.prototype,"pageSize",void 0),t([l({attribute:"page-sizes"})],P.prototype,"pageSizes",void 0),t([l({attribute:"hide-page-size",type:Boolean,reflect:!0})],P.prototype,"hidePageSize",void 0),t([l({attribute:"show-first-last-buttons",type:Boolean})],P.prototype,"showFirstLastButtons",void 0),t([l({attribute:"items-per-page-label"})],P.prototype,"itemsPerPageLabel",void 0),t([l({attribute:"previous-page-label"})],P.prototype,"previousPageLabel",void 0),t([l({attribute:"next-page-label"})],P.prototype,"nextPageLabel",void 0),t([l({attribute:"first-page-label"})],P.prototype,"firstPageLabel",void 0),t([l({attribute:"last-page-label"})],P.prototype,"lastPageLabel",void 0),t([l({attribute:"page-size-variant"})],P.prototype,"pageSizeVariant",void 0),P=v=t([p("m3e-paginator")],P);export{P as M3ePaginatorElement};
 //# sourceMappingURL=paginator.min.js.map