@m3e/web 2.5.4 → 2.5.6

package/dist/option.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.min.js","sources":["../../src/option/OptionElement.ts","../../src/option/OptGroupElement.ts","../../src/option/OptionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  getTextContent,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  TextHighlightMode,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { typeaheadLabel } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An option that can be selected.\r\n *\r\n * @description\r\n * The `m3e-option` component represents an individual selectable item within an option list,\r\n * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,\r\n * supports single and multiple selection modes, and includes comprehensive accessibility features including\r\n * keyboard navigation and focus management. The component automatically manages its visual appearance based on\r\n * selection and disabled states, with configurable styling for interactive and non-interactive variants.\r\n *\r\n * @tag m3e-option\r\n *\r\n * @slot - Renders the label of the option.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disable-highlight - Whether text highlighting is disabled.\r\n * @attr highlight-mode - The mode in which to highlight a term.\r\n * @attr selected - Whether the element is selected.\r\n * @attr term - The search term to highlight.\r\n * @attr value - A string representing the value of the option.\r\n *\r\n * @cssprop --m3e-option-container-height - The height of the option container.\r\n * @cssprop --m3e-option-color - The text color of the option.\r\n * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.\r\n * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.\r\n * @cssprop --m3e-option-ripple-color - The color of the ripple effect.\r\n * @cssprop --m3e-option-selected-color - The text color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.\r\n * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.\r\n * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.\r\n * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.\r\n * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the option content.\r\n * @cssprop --m3e-option-padding-end - The right padding of the option content.\r\n * @cssprop --m3e-option-label-text-font-size - The font size of the option label.\r\n * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.\r\n * @cssprop --m3e-option-label-text-line-height - The line height of the option label.\r\n * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.\r\n * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.\r\n * @cssprop --m3e-option-icon-size - The size of the option icons.\r\n * @cssprop --m3e-option-shape - Base shape of the option.\r\n * @cssprop --m3e-option-selected-shape - Shape used for a selected option.\r\n * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.\r\n * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.\r\n */\r\n@customElement(\"m3e-option\")\r\nexport class M3eOptionElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"option\")))) {\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      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-option-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .base {\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-empty))[selected]) .base {\r\n      color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-option-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-option-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([selected]:not(:state(-first))) .base {\r\n      border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([selected]:not(:state(-last))) .base {\r\n      border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-first)) .base {\r\n      border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-last)) .base {\r\n      border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      column-gap: var(--m3e-option-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem));\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-option-focus-ring-shape, inherit);\r\n    }\r\n    .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem));\r\n      transition: ${unsafeCSS(\r\n        `margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host([selected]) .icon {\r\n      margin-inline-start: 0;\r\n      width: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      width: 0px;\r\n      font-size: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    :host(:state(-empty)) .icon,\r\n    :host(:state(-hide-selection-indicator)) .icon,\r\n    :host(:not([selected])) .check {\r\n      display: none;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .icon,\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** A string representing the value of the option. */\r\n  @property() get value() {\r\n    return this.#value ?? this.#textContent;\r\n  }\r\n  set value(value: string) {\r\n    this.#value = value;\r\n  }\r\n\r\n  /**\r\n   * The search term to highlight.\r\n   * @default \"\"\r\n   */\r\n  @property() term = \"\";\r\n\r\n  /**\r\n   * The mode in which to highlight a term.\r\n   * @default \"contains\"\r\n   */\r\n  @property({ attribute: \"highlight-mode\" }) highlightMode: TextHighlightMode = \"contains\";\r\n\r\n  /**\r\n   * Whether text highlighting is disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-highlight\", type: Boolean }) disableHighlight = false;\r\n\r\n  /** The textual label of the option. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @internal */\r\n  [typeaheadLabel](): string {\r\n    return this.label;\r\n  }\r\n\r\n  /** Whether the option represents an empty option. */\r\n  get isEmpty() {\r\n    return this.value === \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\") && this.selected) {\r\n      const panel = this.closest(\"[role='listbox']\") ?? this.closest(\"m3e-autocomplete\") ?? this.closest(\"m3e-select\");\r\n      if (panel && panel.ariaMultiSelectable !== \"true\" && !panel.hasAttribute(\"multi\")) {\r\n        panel.querySelectorAll(\"m3e-option\").forEach((x) => {\r\n          if (x !== this && x.selected) {\r\n            x.selected = false;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </div>\r\n        <m3e-text-overflow class=\"label\">\r\n          <m3e-text-highlight term=\"${this.term}\" mode=\"${this.highlightMode}\" ?disabled=\"${this.disableHighlight}\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n          </m3e-text-highlight>\r\n        </m3e-text-overflow>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n    setCustomState(this, \"-empty\", this.isEmpty);\r\n\r\n    if (this.selected) {\r\n      this.closest<LitElement>(\"m3e-select\")?.requestUpdate?.();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option\": M3eOptionElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * Groups options under a subheading.\r\n *\r\n * @description\r\n * The `m3e-optgroup` component organizes related options within an option list,\r\n * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`\r\n * associations automatically and applies Material Design 3 typography and spacing conventions to\r\n * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,\r\n * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label\r\n * and contained options.\r\n *\r\n * @tag m3e-optgroup\r\n *\r\n * @slot - Renders the options of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-option-height - The height of the group label container.\r\n * @cssprop --m3e-option-font-size - The font size of the group label.\r\n * @cssprop --m3e-option-font-weight - The font weight of the group label.\r\n * @cssprop --m3e-option-line-height - The line height of the group label.\r\n * @cssprop --m3e-option-tracking - The letter spacing of the group label.\r\n * @cssprop --m3e-option-padding-end - The right padding of the label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the label.\r\n * @cssprop --m3e-option-color - The text color of the group label.\r\n */\r\n@customElement(\"m3e-optgroup\")\r\nexport class M3eOptGroupElement 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      --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2);\r\n    }\r\n    .label {\r\n      height: var(--m3e-option-height, 3rem);\r\n      font-size: var(--m3e-option-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      padding-inline-start: var(--m3e-option-padding-start, 0.75rem);\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      flex: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-optgroup-label-${M3eOptGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-text-overflow class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (<HTMLSlotElement>e.target).assignedElements({ flatten: true })[0] ?? undefined;\r\n    if (label === this.#label) return;\r\n\r\n    if (this.#label?.id) {\r\n      removeAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n      if (this.#label.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\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      addAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-optgroup\": M3eOptGroupElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  DesignToken,\r\n  Role,\r\n  customElement,\r\n  MutationController,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  hasAssignedNodes,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eFloatingPanelElement } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eOptGroupElement } from \"./OptGroupElement\";\r\nimport { M3eOptionElement } from \"./OptionElement\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { OptionPanelState } from \"./OptionPanelState\";\r\n\r\n/**\r\n * Presents a list of options on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-option-panel` component renders a scrollable container for displaying selectable options\r\n * as a Material Design 3 menu surface. It provides dynamic positioning and anchoring to trigger elements,\r\n * automatic viewport boundary detection with intelligent repositioning, and smooth enter/exit animations.\r\n *\r\n * @tag m3e-option-panel\r\n *\r\n * @slot - Renders the contents of the list.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.\r\n * @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.\r\n * @cssprop --m3e-option-panel-gap - Vertical spacing between option items.\r\n * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.\r\n * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.\r\n */\r\n@customElement(\"m3e-option-panel\")\r\nexport class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, \"listbox\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-option-panel > m3e-divider {\r\n        margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem);\r\n      }\r\n      m3e-option-panel m3e-option[hidden],\r\n      m3e-option-panel m3e-optgroup[hidden] {\r\n        display: none;\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eFloatingPanelElement.styles,\r\n    css`\r\n      :host {\r\n        --m3e-floating-panel-container-shape: var(\r\n          --m3e-option-panel-container-shape,\r\n          ${DesignToken.shape.corner.large}\r\n        );\r\n        --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem);\r\n        --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem);\r\n        --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem);\r\n        --m3e-floating-panel-container-color: var(\r\n          --m3e-option-panel-container-color,\r\n          ${DesignToken.color.surfaceContainer}\r\n        );\r\n        --m3e-floating-panel-container-elevation: var(\r\n          --m3e-option-panel-container-elevation,\r\n          ${DesignToken.elevation.level3}\r\n        );\r\n        --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem);\r\n        --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem);\r\n      }\r\n      .base {\r\n        row-gap: var(--m3e-option-panel-gap, 0.125rem);\r\n        --m3e-text-highlight-container-color: var(\r\n          --m3e-option-panel-text-highlight-container-color,\r\n          ${DesignToken.color.tertiaryContainer}\r\n        );\r\n        --m3e-text-highlight-color: var(\r\n          --m3e-option-panel-text-highlight-color,\r\n          ${DesignToken.color.onTertiaryContainer}\r\n        );\r\n        --m3e-focus-ring-outward-offset: 0px;\r\n        --m3e-focus-ring-growth-factor: 1.5;\r\n      }\r\n      .no-data {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-no-data-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-no-data-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-no-data-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      .loading {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-loading-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-loading-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-loading-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-loading-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-loading-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      :host(:state(-no-data)) slot:not([name]),\r\n      :host(:state(-loading)) slot:not([name]),\r\n      :host(:state(-loading)) .no-data,\r\n      :host(:not(:state(-no-data))) .no-data,\r\n      :host(:not(:state(-with-no-data))) .no-data,\r\n      :host(:not(:state(-loading))) .loading,\r\n      :host(:not(:state(-with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:state(-no-data)) .base,\r\n      :host(:state(-loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:state(-with-loading-indicator)) .loading {\r\n        padding: 0;\r\n        justify-content: center;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The state for which to present content.\r\n   * @default \"content\"\r\n   */\r\n  @property({ reflect: true }) state: OptionPanelState = \"content\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot></slot>\r\n      <div class=\"no-data\" aria-hidden=\"true\">\r\n        <slot name=\"no-data\" @slotchange=\"${this.#handleNoDataSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"loading\" aria-hidden=\"true\">\r\n        <slot name=\"loading\" @slotchange=\"${this.#handleLoadingSlotChange}\"> </slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleNoDataSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-no-data\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleLoadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-loading\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    setCustomState(\r\n      this,\r\n      \"-with-loading-indicator\",\r\n      this.querySelector(\"m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']\") !==\r\n        null,\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    const options = this.querySelectorAll(\"m3e-option\");\r\n    let first = false;\r\n    let last: M3eOptionElement | undefined;\r\n\r\n    for (let i = 0; i < options.length; i++) {\r\n      const option = options[i];\r\n      if (option.hidden === true) {\r\n        deleteCustomState(option, \"-first\");\r\n        deleteCustomState(option, \"-last\");\r\n      } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {\r\n        addCustomState(option, \"-first\");\r\n        first = true;\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      } else {\r\n        deleteCustomState(option, \"-first\");\r\n        if (last) {\r\n          deleteCustomState(last, \"-last\");\r\n        }\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option-panel\": M3eOptionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eOptionElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","_M3eOptionElement_value","set","this","_M3eOptionElement_textContent","term","highlightMode","disableHighlight","value","__classPrivateFieldGet","__classPrivateFieldSet","label","WeakMap","_M3eOptionElement_instances","WeakSet","typeaheadLabel","isEmpty","connectedCallback","super","focusRing","stateLayer","_ripple","forEach","x","attach","firstUpdated","_changedProperties","update","changedProperties","has","selected","panel","closest","ariaMultiSelectable","hasAttribute","querySelectorAll","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","property","attribute","type","Boolean","customElement","M3eOptGroupElement","M3eOptGroupElement_1","_M3eOptGroupElement_labelId","__nextId","_M3eOptGroupElement_label","_M3eOptGroupElement_instances","_M3eOptGroupElement_handleLabelSlotChange","assignedElements","flatten","undefined","id","removeAriaReferencedId","addAriaReferencedId","M3eOptionPanelElement","M3eFloatingPanelElement","state","MutationController","config","childList","subtree","callback","_M3eOptionPanelElement_instances","_M3eOptionPanelElement_handleMutation","call","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","hasAssignedNodes","querySelector","options","last","first","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","registerStyleSheet","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":"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"}
+{"version":3,"file":"option.min.js","sources":["../../src/option/OptionElement.ts","../../src/option/OptGroupElement.ts","../../src/option/OptionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  getTextContent,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  TextHighlightMode,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { typeaheadLabel } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An option that can be selected.\r\n *\r\n * @description\r\n * The `m3e-option` component represents an individual selectable item within an option list,\r\n * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,\r\n * supports single and multiple selection modes, and includes comprehensive accessibility features including\r\n * keyboard navigation and focus management. The component automatically manages its visual appearance based on\r\n * selection and disabled states, with configurable styling for interactive and non-interactive variants.\r\n *\r\n * @tag m3e-option\r\n *\r\n * @slot - Renders the label of the option.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disable-highlight - Whether text highlighting is disabled.\r\n * @attr highlight-mode - The mode in which to highlight a term.\r\n * @attr selected - Whether the element is selected.\r\n * @attr term - The search term to highlight.\r\n * @attr value - A string representing the value of the option.\r\n *\r\n * @cssprop --m3e-option-container-height - The height of the option container.\r\n * @cssprop --m3e-option-color - The text color of the option.\r\n * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.\r\n * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.\r\n * @cssprop --m3e-option-ripple-color - The color of the ripple effect.\r\n * @cssprop --m3e-option-selected-color - The text color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.\r\n * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.\r\n * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.\r\n * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.\r\n * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the option content.\r\n * @cssprop --m3e-option-padding-end - The right padding of the option content.\r\n * @cssprop --m3e-option-label-text-font-size - The font size of the option label.\r\n * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.\r\n * @cssprop --m3e-option-label-text-line-height - The line height of the option label.\r\n * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.\r\n * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.\r\n * @cssprop --m3e-option-icon-size - The size of the option icons.\r\n * @cssprop --m3e-option-shape - Base shape of the option.\r\n * @cssprop --m3e-option-selected-shape - Shape used for a selected option.\r\n * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.\r\n * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.\r\n */\r\n@customElement(\"m3e-option\")\r\nexport class M3eOptionElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"option\")))) {\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      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-option-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .base {\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:is(:state(--empty), :--empty))[selected]) .base {\r\n      color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-option-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-option-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([selected]:not(:is(:state(--first), :--first))) .base {\r\n      border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([selected]:not(:is(:state(--last), :--last))) .base {\r\n      border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:is(:state(--first), :--first)) .base {\r\n      border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:is(:state(--last), :--last)) .base {\r\n      border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      column-gap: var(--m3e-option-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem));\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-option-focus-ring-shape, inherit);\r\n    }\r\n    .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem));\r\n      transition: ${unsafeCSS(\r\n        `margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host([selected]) .icon {\r\n      margin-inline-start: 0;\r\n      width: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      width: 0px;\r\n      font-size: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    :host(:is(:state(--empty), :--empty)) .icon,\r\n    :host(:is(:state(--hide-selection-indicator), :--hide-selection-indicator)) .icon,\r\n    :host(:not([selected])) .check {\r\n      display: none;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .icon,\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** A string representing the value of the option. */\r\n  @property() get value() {\r\n    return this.#value ?? this.#textContent;\r\n  }\r\n  set value(value: string) {\r\n    this.#value = value;\r\n  }\r\n\r\n  /**\r\n   * The search term to highlight.\r\n   * @default \"\"\r\n   */\r\n  @property() term = \"\";\r\n\r\n  /**\r\n   * The mode in which to highlight a term.\r\n   * @default \"contains\"\r\n   */\r\n  @property({ attribute: \"highlight-mode\" }) highlightMode: TextHighlightMode = \"contains\";\r\n\r\n  /**\r\n   * Whether text highlighting is disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-highlight\", type: Boolean }) disableHighlight = false;\r\n\r\n  /** The textual label of the option. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @internal */\r\n  [typeaheadLabel](): string {\r\n    return this.label;\r\n  }\r\n\r\n  /** Whether the option represents an empty option. */\r\n  get isEmpty() {\r\n    return this.value === \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\") && this.selected) {\r\n      const panel = this.closest(\"[role='listbox']\") ?? this.closest(\"m3e-autocomplete\") ?? this.closest(\"m3e-select\");\r\n      if (panel && panel.ariaMultiSelectable !== \"true\" && !panel.hasAttribute(\"multi\")) {\r\n        panel.querySelectorAll(\"m3e-option\").forEach((x) => {\r\n          if (x !== this && x.selected) {\r\n            x.selected = false;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </div>\r\n        <m3e-text-overflow class=\"label\">\r\n          <m3e-text-highlight term=\"${this.term}\" mode=\"${this.highlightMode}\" ?disabled=\"${this.disableHighlight}\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n          </m3e-text-highlight>\r\n        </m3e-text-overflow>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n    setCustomState(this, \"--empty\", this.isEmpty);\r\n\r\n    if (this.selected) {\r\n      this.closest<LitElement>(\"m3e-select\")?.requestUpdate?.();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option\": M3eOptionElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * Groups options under a subheading.\r\n *\r\n * @description\r\n * The `m3e-optgroup` component organizes related options within an option list,\r\n * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`\r\n * associations automatically and applies Material Design 3 typography and spacing conventions to\r\n * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,\r\n * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label\r\n * and contained options.\r\n *\r\n * @tag m3e-optgroup\r\n *\r\n * @slot - Renders the options of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-option-height - The height of the group label container.\r\n * @cssprop --m3e-option-font-size - The font size of the group label.\r\n * @cssprop --m3e-option-font-weight - The font weight of the group label.\r\n * @cssprop --m3e-option-line-height - The line height of the group label.\r\n * @cssprop --m3e-option-tracking - The letter spacing of the group label.\r\n * @cssprop --m3e-option-padding-end - The right padding of the label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the label.\r\n * @cssprop --m3e-option-color - The text color of the group label.\r\n */\r\n@customElement(\"m3e-optgroup\")\r\nexport class M3eOptGroupElement 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      --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2);\r\n    }\r\n    .label {\r\n      height: var(--m3e-option-height, 3rem);\r\n      font-size: var(--m3e-option-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      padding-inline-start: var(--m3e-option-padding-start, 0.75rem);\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      flex: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-optgroup-label-${M3eOptGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-text-overflow class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (<HTMLSlotElement>e.target).assignedElements({ flatten: true })[0] ?? undefined;\r\n    if (label === this.#label) return;\r\n\r\n    if (this.#label?.id) {\r\n      removeAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n      if (this.#label.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\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      addAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-optgroup\": M3eOptGroupElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  DesignToken,\r\n  Role,\r\n  customElement,\r\n  MutationController,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  hasAssignedNodes,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eFloatingPanelElement } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eOptGroupElement } from \"./OptGroupElement\";\r\nimport { M3eOptionElement } from \"./OptionElement\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { OptionPanelState } from \"./OptionPanelState\";\r\n\r\n/**\r\n * Presents a list of options on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-option-panel` component renders a scrollable container for displaying selectable options\r\n * as a Material Design 3 menu surface. It provides dynamic positioning and anchoring to trigger elements,\r\n * automatic viewport boundary detection with intelligent repositioning, and smooth enter/exit animations.\r\n *\r\n * @tag m3e-option-panel\r\n *\r\n * @slot - Renders the contents of the list.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.\r\n * @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.\r\n * @cssprop --m3e-option-panel-gap - Vertical spacing between option items.\r\n * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.\r\n * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.\r\n */\r\n@customElement(\"m3e-option-panel\")\r\nexport class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, \"listbox\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-option-panel > m3e-divider {\r\n        margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem);\r\n      }\r\n      m3e-option-panel m3e-option[hidden],\r\n      m3e-option-panel m3e-optgroup[hidden] {\r\n        display: none;\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eFloatingPanelElement.styles,\r\n    css`\r\n      :host {\r\n        --m3e-floating-panel-container-shape: var(\r\n          --m3e-option-panel-container-shape,\r\n          ${DesignToken.shape.corner.large}\r\n        );\r\n        --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem);\r\n        --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem);\r\n        --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem);\r\n        --m3e-floating-panel-container-color: var(\r\n          --m3e-option-panel-container-color,\r\n          ${DesignToken.color.surfaceContainer}\r\n        );\r\n        --m3e-floating-panel-container-elevation: var(\r\n          --m3e-option-panel-container-elevation,\r\n          ${DesignToken.elevation.level3}\r\n        );\r\n        --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem);\r\n        --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem);\r\n      }\r\n      .base {\r\n        row-gap: var(--m3e-option-panel-gap, 0.125rem);\r\n        --m3e-text-highlight-container-color: var(\r\n          --m3e-option-panel-text-highlight-container-color,\r\n          ${DesignToken.color.tertiaryContainer}\r\n        );\r\n        --m3e-text-highlight-color: var(\r\n          --m3e-option-panel-text-highlight-color,\r\n          ${DesignToken.color.onTertiaryContainer}\r\n        );\r\n        --m3e-focus-ring-outward-offset: 0px;\r\n        --m3e-focus-ring-growth-factor: 1.5;\r\n      }\r\n      .no-data {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-no-data-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-no-data-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-no-data-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      .loading {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-loading-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-loading-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-loading-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-loading-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-loading-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      :host(:is(:state(--no-data), :--no-data)) slot:not([name]),\r\n      :host(:is(:state(--loading), :--loading)) slot:not([name]),\r\n      :host(:is(:state(--loading), :--loading)) .no-data,\r\n      :host(:not(:is(:state(--no-data), :--no-data))) .no-data,\r\n      :host(:not(:is(:state(--with-no-data), :--with-no-data))) .no-data,\r\n      :host(:not(:is(:state(--loading), :--loading))) .loading,\r\n      :host(:not(:is(:state(--with-loading), :--with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:is(:state(--no-data), :--no-data)) .base,\r\n      :host(:is(:state(--loading), :--loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:is(:state(--with-loading-indicator), :--with-loading-indicator)) .loading {\r\n        padding: 0;\r\n        justify-content: center;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The state for which to present content.\r\n   * @default \"content\"\r\n   */\r\n  @property({ reflect: true }) state: OptionPanelState = \"content\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot></slot>\r\n      <div class=\"no-data\" aria-hidden=\"true\">\r\n        <slot name=\"no-data\" @slotchange=\"${this.#handleNoDataSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"loading\" aria-hidden=\"true\">\r\n        <slot name=\"loading\" @slotchange=\"${this.#handleLoadingSlotChange}\"> </slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleNoDataSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-no-data\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleLoadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-loading\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    setCustomState(\r\n      this,\r\n      \"--with-loading-indicator\",\r\n      this.querySelector(\"m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']\") !==\r\n        null,\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    const options = this.querySelectorAll(\"m3e-option\");\r\n    let first = false;\r\n    let last: M3eOptionElement | undefined;\r\n\r\n    for (let i = 0; i < options.length; i++) {\r\n      const option = options[i];\r\n      if (option.hidden === true) {\r\n        deleteCustomState(option, \"--first\");\r\n        deleteCustomState(option, \"--last\");\r\n      } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {\r\n        addCustomState(option, \"--first\");\r\n        first = true;\r\n        addCustomState(option, \"--last\");\r\n        last = option;\r\n      } else {\r\n        deleteCustomState(option, \"--first\");\r\n        if (last) {\r\n          deleteCustomState(last, \"--last\");\r\n        }\r\n        addCustomState(option, \"--last\");\r\n        last = option;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option-panel\": M3eOptionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eOptionElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","_M3eOptionElement_value","set","this","_M3eOptionElement_textContent","term","highlightMode","disableHighlight","value","__classPrivateFieldGet","__classPrivateFieldSet","label","WeakMap","_M3eOptionElement_instances","WeakSet","typeaheadLabel","isEmpty","connectedCallback","super","focusRing","stateLayer","_ripple","forEach","x","attach","firstUpdated","_changedProperties","update","changedProperties","has","selected","panel","closest","ariaMultiSelectable","hasAttribute","querySelectorAll","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","property","attribute","type","Boolean","customElement","M3eOptGroupElement","M3eOptGroupElement_1","_M3eOptGroupElement_labelId","__nextId","_M3eOptGroupElement_label","_M3eOptGroupElement_instances","_M3eOptGroupElement_handleLabelSlotChange","assignedElements","flatten","undefined","id","removeAriaReferencedId","addAriaReferencedId","M3eOptionPanelElement","M3eFloatingPanelElement","state","MutationController","config","childList","subtree","callback","_M3eOptionPanelElement_instances","_M3eOptionPanelElement_handleMutation","call","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","hasAssignedNodes","querySelector","options","last","first","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","registerStyleSheet","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":"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"}

package/dist/paginator.js

@@ -60,7 +60,7 @@ var M3ePaginatorElement_1;
  * @attr previous-page-label - The accessible label given to the button used to move to the previous page.
  * @attr show-first-last-buttons - Whether to show first/last buttons.
  *
- * @fires page - Emitted when a user selects a different page size or navigates to another page.
+ * @fires page - Dispatched when a user selects a different page size or navigates to another page.
  *
  * @cssprop --m3e-paginator-font-size - The font size used for paginator text.
  * @cssprop --m3e-paginator-font-weight - The font weight used for paginator text.

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, 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":"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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 - Dispatched 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":"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"}

package/dist/paginator.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.min.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","this","pageIndex","pageSize","length","Math","max","startIndex","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","super","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.min.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 - Dispatched 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","this","pageIndex","pageSize","length","Math","max","startIndex","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","super","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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"}

package/dist/radio-group.js

@@ -44,9 +44,10 @@ var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_
  * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the radio.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-radio-container-size - Base size of the radio button container.
  * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.
@@ -145,18 +146,18 @@ _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
 };
 _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
   if (e.defaultPrevented || this.checked || this.disabled) return;
-  this.checked = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = true;
     __classPrivateFieldGet(this, _M3eRadioElement_instances, "m", _M3eRadioElement_notifySelectionChange).call(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = false;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -173,7 +174,7 @@ _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelecti
   }
 };
 /** The styles of the element. */
-M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:state(-touched):state(-invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:state(-touched):state(-invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
+M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
 __decorate([query(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
@@ -212,7 +213,9 @@ var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_directionalitySubscri
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr required - Whether the element is required.
  *
- * @fires change - Emitted when the checked state of a radio button changes.
+ * @fires beforeinput - Dispatched before the checked state of a radio button changes.
+ * @fires input - Dispatched when the checked state of a radio button changes.
+ * @fires change - Dispatched when the checked state of a radio button changes.
  */
 let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled(RequiredConstraintValidation(Dirty(Touched(Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, "radiogroup")))))))))) {
   constructor() {
@@ -272,7 +275,7 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled(RequiredC
         break;
       case "aria-invalid":
         this.radios.forEach(x => {
-          setCustomState(x, "-invalid", newValue === "true");
+          setCustomState(x, "--invalid", newValue === "true");
           x[updateLabels]?.();
         });
         break;