@m3e/web 2.5.5 → 2.5.6

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")) {
@@ -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() {

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":["../../src/radio-group/RadioElement.ts","../../src/radio-group/RadioGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  HoverController,\r\n  KeyboardClick,\r\n  Labelled,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  PressedController,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A radio button that allows a user to select one option from a set of options.\r\n *\r\n * @description\r\n * The `m3e-radio` component represents a radio button that enables users to select an options from a set.\r\n * It supports selection from mutually exclusive options, emitting `input` and `change` events when its state updates.\r\n * The component reflects its state through customizable CSS properties for hover, focus, ripple, and icon styling—\r\n * adapting dynamically based on whether it is selected, unselected, or disabled.\r\n *\r\n * Attributes like `checked`, `disabled`, and `value` control its behavior and accessibility, while its visual\r\n * presentation can be tuned via design tokens such as `--m3e-radio-container-size` and `--m3e-radio-icon-size`.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n * @attr value - A string representing the value of the radio.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-radio-container-size - Base size of the radio button container.\r\n * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.\r\n * @cssprop --m3e-radio-unselected-hover-color - Hover state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-focus-color - Focus state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-ripple-color - Ripple color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-icon-color - Icon color when radio is not selected.\r\n * @cssprop --m3e-radio-selected-hover-color - Hover state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-focus-color - Focus state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-ripple-color - Ripple color when radio is selected.\r\n * @cssprop --m3e-radio-selected-icon-color - Icon color when radio is selected.\r\n * @cssprop --m3e-radio-disabled-icon-color - Icon color when radio is disabled.\r\n * @cssprop --m3e-radio-error-hover-color - Fallback hover color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-focus-color - Fallback focus color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-ripple-color - Fallback ripple color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-icon-color - Fallback icon color used when the radio is invalid and touched.\r\n */\r\n@customElement(\"m3e-radio\")\r\nexport class M3eRadioElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      Checked(KeyboardClick(Focusable(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))))),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      width: fit-content;\r\n      height: fit-content;\r\n      vertical-align: middle;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\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      justify-content: center;\r\n      position: relative;\r\n      border-radius: 50%;\r\n      width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: 3rem;\r\n      margin: auto;\r\n    }\r\n    .wrapper {\r\n      box-sizing: border-box;\r\n      pointer-events: none;\r\n      width: var(--m3e-radio-icon-size, 1.25rem);\r\n      height: var(--m3e-radio-icon-size, 1.25rem);\r\n    }\r\n    .circle {\r\n      fill: currentColor;\r\n    }\r\n    :host(:not([checked])) .circle.inner {\r\n      opacity: 0;\r\n    }\r\n    :host(:not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n      color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([checked]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n    :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error});\r\n      color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([checked])) .base,\r\n      :host([checked]) .base {\r\n        --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-ripple-color: var(--_radio-forced-color, CanvasText);\r\n        color: var(--_radio-forced-color, CanvasText);\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n      :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n        --_radio-forced-color: Highlight;\r\n        color: Highlight;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    minPressedDuration: 150,\r\n    callback: (pressed) => {\r\n      if (this.disabled) return;\r\n      if (pressed) {\r\n        this._ripple?.show(0, 0, true);\r\n      } else {\r\n        this._ripple?.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * A string representing the value of the radio.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\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(\"checked\")) {\r\n      this.#notifySelectionChange();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    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\" centered ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return html`<svg viewBox=\"0 0 20 20\">\r\n      <mask id=\"cutout2\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\r\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\"></circle>\r\n      </mask>\r\n      <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout2)\"></circle>\r\n      <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\"></circle>\r\n    </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented || this.checked || this.disabled) return;\r\n    this.checked = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.#notifySelectionChange();\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.checked = false;\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #notifySelectionChange(): void {\r\n    const group = this.closest(\"m3e-radio-group\");\r\n    if (group) {\r\n      group[selectionManager].notifySelectionChange(this);\r\n    } else if (this.name && this.checked) {\r\n      // Uncheck any sibling radios of the same name which are also checked.\r\n      [\r\n        ...((this.getRootNode() as ParentNode)?.querySelectorAll<M3eRadioElement>(`m3e-radio[name=\"${this.name}\"]`) ??\r\n          []),\r\n      ]\r\n        .filter((x) => x !== this && x.checked)\r\n        .forEach((x) => (x.checked = false));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio\": M3eRadioElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  Dirty,\r\n  Disabled,\r\n  Touched,\r\n  Role,\r\n  Required,\r\n  ConstraintValidation,\r\n  FormAssociated,\r\n  RequiredConstraintValidation,\r\n  updateLabels,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eRadioElement } from \"./RadioElement\";\r\n\r\n/**\r\n * A container for a set of radio buttons.\r\n *\r\n * @description\r\n * The `m3e-radio-group` component is a semantic container that orchestrates a set of `m3e-radio` elements.\r\n * It provides accessible grouping, keyboard navigation, and validation logic for mutually exclusive selection.\r\n * When marked as `required`, the group enforces selection constraints and reflects validation state, while\r\n * delegating form submission to the checked radio. The group does not submit a value itself—it coordinates\r\n * behavior, focus, and feedback across its radios.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio-group\r\n *\r\n * @slot - Renders the radio buttons of the group.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires change - Emitted when the checked state of a radio button changes.\r\n */\r\n@customElement(\"m3e-radio-group\")\r\nexport class M3eRadioGroupElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The list of attributes corresponding to the registered properties. */\r\n  static override get observedAttributes() {\r\n    return [...super.observedAttributes, \"aria-invalid\"];\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ readonly #focusOutHandler = () => this.#handleChange();\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eRadioElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => {\r\n      this[selectionManager].activeItem?.click();\r\n    });\r\n\r\n  /** The radios in the group. */\r\n  get radios(): readonly M3eRadioElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected radio. */\r\n  get selected(): M3eRadioElement | null {\r\n    return this[selectionManager]?.selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The selected value of the radio group. */\r\n  get value(): string | null {\r\n    return this.selected?.value ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsTouched(): void {\r\n    super.markAsTouched();\r\n    this.radios.forEach((x) => x.markAsTouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsUntouched(): void {\r\n    super.markAsUntouched();\r\n    this.radios.forEach((x) => x.markAsUntouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsDirty(): void {\r\n    super.markAsDirty();\r\n    this.radios.forEach((x) => x.markAsDirty());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsPristine(): void {\r\n    super.markAsPristine();\r\n    this.radios.forEach((x) => x.markAsPristine());\r\n  }\r\n\r\n  /** Synchronizes property values when attributes change. */\r\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\r\n    super.attributeChangedCallback(name, oldValue, newValue);\r\n\r\n    switch (name) {\r\n      case \"name\":\r\n        this.radios.forEach((x) => (x.name = this.name));\r\n        break;\r\n\r\n      case \"aria-invalid\":\r\n        this.radios.forEach((x) => {\r\n          setCustomState(x, \"--invalid\", newValue === \"true\");\r\n          x[updateLabels]?.();\r\n        });\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription?.();\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(\"disabled\")) {\r\n      this.ariaDisabled = null;\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-radio\")]);\r\n    added.forEach((x) => (x.name = x.name || this.name));\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(): void {\r\n    this.checkValidity();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio-group\": M3eRadioGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eRadioElement","Labelled","Dirty","Touched","Checked","KeyboardClick","Focusable","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","_M3eRadioElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eRadioElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eRadioElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eRadioElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","update","changedProperties","has","_M3eRadioElement_notifySelectionChange","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eRadioElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","composed","cancelable","closest","preventDefault","group","selectionManager","notifySelectionChange","name","getRootNode","querySelectorAll","filter","styles","css","DesignToken","density","calc","color","onSurface","onSurfaceVariant","primary","error","__decorate","query","prototype","property","customElement","M3eRadioGroupElement","RequiredConstraintValidation","Required","ConstraintValidation","_M3eRadioGroupElement_directionalitySubscription","_M3eRadioGroupElement_focusOutHandler","_M3eRadioGroupElement_instances","_M3eRadioGroupElement_handleChange","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","observedAttributes","radios","items","selected","selectedItems","markAsTouched","markAsUntouched","markAsDirty","markAsPristine","attributeChangedCallback","oldValue","newValue","setCustomState","updateLabels","__classPrivateFieldSet","directionality","ariaDisabled","get","undefined","_M3eRadioGroupElement_handleSlotChange","_M3eRadioGroupElement_handleKeyDown","added","setItems","onKeyDown","checkValidity"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","sources":["../../src/radio-group/RadioElement.ts","../../src/radio-group/RadioGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  HoverController,\r\n  KeyboardClick,\r\n  Labelled,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  PressedController,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A radio button that allows a user to select one option from a set of options.\r\n *\r\n * @description\r\n * The `m3e-radio` component represents a radio button that enables users to select an options from a set.\r\n * It supports selection from mutually exclusive options, emitting `input` and `change` events when its state updates.\r\n * The component reflects its state through customizable CSS properties for hover, focus, ripple, and icon styling—\r\n * adapting dynamically based on whether it is selected, unselected, or disabled.\r\n *\r\n * Attributes like `checked`, `disabled`, and `value` control its behavior and accessibility, while its visual\r\n * presentation can be tuned via design tokens such as `--m3e-radio-container-size` and `--m3e-radio-icon-size`.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n * @attr value - A string representing the value of the radio.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-radio-container-size - Base size of the radio button container.\r\n * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.\r\n * @cssprop --m3e-radio-unselected-hover-color - Hover state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-focus-color - Focus state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-ripple-color - Ripple color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-icon-color - Icon color when radio is not selected.\r\n * @cssprop --m3e-radio-selected-hover-color - Hover state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-focus-color - Focus state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-ripple-color - Ripple color when radio is selected.\r\n * @cssprop --m3e-radio-selected-icon-color - Icon color when radio is selected.\r\n * @cssprop --m3e-radio-disabled-icon-color - Icon color when radio is disabled.\r\n * @cssprop --m3e-radio-error-hover-color - Fallback hover color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-focus-color - Fallback focus color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-ripple-color - Fallback ripple color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-icon-color - Fallback icon color used when the radio is invalid and touched.\r\n */\r\n@customElement(\"m3e-radio\")\r\nexport class M3eRadioElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      Checked(KeyboardClick(Focusable(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))))),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      width: fit-content;\r\n      height: fit-content;\r\n      vertical-align: middle;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\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      justify-content: center;\r\n      position: relative;\r\n      border-radius: 50%;\r\n      width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: 3rem;\r\n      margin: auto;\r\n    }\r\n    .wrapper {\r\n      box-sizing: border-box;\r\n      pointer-events: none;\r\n      width: var(--m3e-radio-icon-size, 1.25rem);\r\n      height: var(--m3e-radio-icon-size, 1.25rem);\r\n    }\r\n    .circle {\r\n      fill: currentColor;\r\n    }\r\n    :host(:not([checked])) .circle.inner {\r\n      opacity: 0;\r\n    }\r\n    :host(:not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n      color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([checked]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n    :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error});\r\n      color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([checked])) .base,\r\n      :host([checked]) .base {\r\n        --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-ripple-color: var(--_radio-forced-color, CanvasText);\r\n        color: var(--_radio-forced-color, CanvasText);\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n      :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n        --_radio-forced-color: Highlight;\r\n        color: Highlight;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    minPressedDuration: 150,\r\n    callback: (pressed) => {\r\n      if (this.disabled) return;\r\n      if (pressed) {\r\n        this._ripple?.show(0, 0, true);\r\n      } else {\r\n        this._ripple?.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * A string representing the value of the radio.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\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(\"checked\")) {\r\n      this.#notifySelectionChange();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    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\" centered ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return html`<svg viewBox=\"0 0 20 20\">\r\n      <mask id=\"cutout2\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\r\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\"></circle>\r\n      </mask>\r\n      <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout2)\"></circle>\r\n      <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\"></circle>\r\n    </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented || this.checked || this.disabled) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = true;\r\n      this.#notifySelectionChange();\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #notifySelectionChange(): void {\r\n    const group = this.closest(\"m3e-radio-group\");\r\n    if (group) {\r\n      group[selectionManager].notifySelectionChange(this);\r\n    } else if (this.name && this.checked) {\r\n      // Uncheck any sibling radios of the same name which are also checked.\r\n      [\r\n        ...((this.getRootNode() as ParentNode)?.querySelectorAll<M3eRadioElement>(`m3e-radio[name=\"${this.name}\"]`) ??\r\n          []),\r\n      ]\r\n        .filter((x) => x !== this && x.checked)\r\n        .forEach((x) => (x.checked = false));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio\": M3eRadioElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  Dirty,\r\n  Disabled,\r\n  Touched,\r\n  Role,\r\n  Required,\r\n  ConstraintValidation,\r\n  FormAssociated,\r\n  RequiredConstraintValidation,\r\n  updateLabels,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eRadioElement } from \"./RadioElement\";\r\n\r\n/**\r\n * A container for a set of radio buttons.\r\n *\r\n * @description\r\n * The `m3e-radio-group` component is a semantic container that orchestrates a set of `m3e-radio` elements.\r\n * It provides accessible grouping, keyboard navigation, and validation logic for mutually exclusive selection.\r\n * When marked as `required`, the group enforces selection constraints and reflects validation state, while\r\n * delegating form submission to the checked radio. The group does not submit a value itself—it coordinates\r\n * behavior, focus, and feedback across its radios.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio-group\r\n *\r\n * @slot - Renders the radio buttons of the group.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state of a radio button changes.\r\n * @fires input - Dispatched when the checked state of a radio button changes.\r\n * @fires change - Dispatched when the checked state of a radio button changes.\r\n */\r\n@customElement(\"m3e-radio-group\")\r\nexport class M3eRadioGroupElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The list of attributes corresponding to the registered properties. */\r\n  static override get observedAttributes() {\r\n    return [...super.observedAttributes, \"aria-invalid\"];\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ readonly #focusOutHandler = () => this.#handleChange();\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eRadioElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => {\r\n      this[selectionManager].activeItem?.click();\r\n    });\r\n\r\n  /** The radios in the group. */\r\n  get radios(): readonly M3eRadioElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected radio. */\r\n  get selected(): M3eRadioElement | null {\r\n    return this[selectionManager]?.selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The selected value of the radio group. */\r\n  get value(): string | null {\r\n    return this.selected?.value ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsTouched(): void {\r\n    super.markAsTouched();\r\n    this.radios.forEach((x) => x.markAsTouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsUntouched(): void {\r\n    super.markAsUntouched();\r\n    this.radios.forEach((x) => x.markAsUntouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsDirty(): void {\r\n    super.markAsDirty();\r\n    this.radios.forEach((x) => x.markAsDirty());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsPristine(): void {\r\n    super.markAsPristine();\r\n    this.radios.forEach((x) => x.markAsPristine());\r\n  }\r\n\r\n  /** Synchronizes property values when attributes change. */\r\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\r\n    super.attributeChangedCallback(name, oldValue, newValue);\r\n\r\n    switch (name) {\r\n      case \"name\":\r\n        this.radios.forEach((x) => (x.name = this.name));\r\n        break;\r\n\r\n      case \"aria-invalid\":\r\n        this.radios.forEach((x) => {\r\n          setCustomState(x, \"--invalid\", newValue === \"true\");\r\n          x[updateLabels]?.();\r\n        });\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription?.();\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(\"disabled\")) {\r\n      this.ariaDisabled = null;\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-radio\")]);\r\n    added.forEach((x) => (x.name = x.name || this.name));\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(): void {\r\n    this.checkValidity();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio-group\": M3eRadioGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eRadioElement","Labelled","Dirty","Touched","Checked","KeyboardClick","Focusable","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","_M3eRadioElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eRadioElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eRadioElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eRadioElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","update","changedProperties","has","_M3eRadioElement_notifySelectionChange","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eRadioElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","group","selectionManager","notifySelectionChange","name","getRootNode","querySelectorAll","filter","styles","css","DesignToken","density","calc","color","onSurface","onSurfaceVariant","primary","error","__decorate","query","prototype","property","customElement","M3eRadioGroupElement","RequiredConstraintValidation","Required","ConstraintValidation","_M3eRadioGroupElement_directionalitySubscription","_M3eRadioGroupElement_focusOutHandler","_M3eRadioGroupElement_instances","_M3eRadioGroupElement_handleChange","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","observedAttributes","radios","items","selected","selectedItems","markAsTouched","markAsUntouched","markAsDirty","markAsPristine","attributeChangedCallback","oldValue","newValue","setCustomState","updateLabels","__classPrivateFieldSet","directionality","ariaDisabled","get","undefined","_M3eRadioGroupElement_handleSlotChange","_M3eRadioGroupElement_handleKeyDown","added","setItems","onKeyDown","checkValidity"],"mappings":"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"}

package/dist/radio-group.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as r,__classPrivateFieldSet as t}from"tslib";import{LitElement as i,html as o,css as s}from"lit";import{query as a,property as c}from"lit/decorators.js";import{Labelled as l,Dirty as d,Touched as n,Checked as h,KeyboardClick as u,Focusable as m,FormAssociated as p,Disabled as v,AttachInternals as b,Role as f,HoverController as k,PressedController as y,formValue as g,DesignToken as w,customElement as $,RequiredConstraintValidation as x,Required as C,ConstraintValidation as A,setCustomState as E,updateLabels as _}from"@m3e/web/core";import{selectionManager as S,SelectionManager as D}from"@m3e/web/core/a11y";import{M3eDirectionality as L}from"@m3e/web/core/bidi";var T,W,z,M,P,U,I;let R=class extends(l(d(n(h(u(m(p(v(b(f(i,"radio"),!0)))))))))){constructor(){super(...arguments),T.add(this),W.set(this,r=>e(this,T,"m",U).call(this,r)),z.set(this,new k(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),M.set(this,new y(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(W=new WeakMap,z=new WeakMap,M=new WeakMap,T=new WeakSet,g)](){return this.checked&&!this.disabled?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,W,"f"));for(const r of this.labels)e(this,z,"f").observe(r),e(this,M,"f").observe(r)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,W,"f"));for(const r of this.labels)e(this,z,"f").unobserve(r),e(this,M,"f").unobserve(r)}update(r){super.update(r),r.has("checked")&&e(this,T,"m",I).call(this)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${e(this,T,"m",P).call(this)}</div></div>`}};var j,q,H,V,B,G,K;P=function(){return o`<svg viewBox="0 0 20 20"><mask id="cutout2"><rect width="100%" height="100%" fill="white"></rect><circle cx="10" cy="10" r="8" fill="black"></circle></mask><circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout2)"></circle><circle class="inner circle" cx="10" cy="10" r="5"></circle></svg>`},U=function(r){r.defaultPrevented||this.checked||this.disabled||(this.checked=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(e(this,T,"m",I).call(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=!1,this.closest("label")&&r.preventDefault())},I=function(){const e=this.closest("m3e-radio-group");e?e[S].notifySelectionChange(this):this.name&&this.checked&&[...this.getRootNode()?.querySelectorAll(`m3e-radio[name="${this.name}"]`)??[]].filter(e=>e!==this&&e.checked).forEach(e=>e.checked=!1)},R.styles=s`: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) + ${w.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${w.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, ${w.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${w.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${w.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${w.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${w.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${w.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${w.color.primary}); color: var(--m3e-radio-selected-icon-color, ${w.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${w.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, ${w.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${w.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${w.color.error}); color: var(--m3e-radio-error-icon-color, ${w.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; } }`,r([a(".focus-ring")],R.prototype,"_focusRing",void 0),r([a(".state-layer")],R.prototype,"_stateLayer",void 0),r([a(".ripple")],R.prototype,"_ripple",void 0),r([c()],R.prototype,"value",void 0),R=r([$("m3e-radio")],R);let N=class extends(l(x(d(n(C(A(p(v(b(f(i,"radiogroup"))))))))))){constructor(){super(...arguments),j.add(this),q.set(this,void 0),H.set(this,()=>e(this,j,"m",G).call(this)),this[K]=(new D).withWrap().withDirectionality(L.current).onActiveItemChange(()=>{this[S].activeItem?.click()})}static get observedAttributes(){return[...super.observedAttributes,"aria-invalid"]}get radios(){return this[S]?.items??[]}get selected(){return this[S]?.selectedItems[0]??null}get value(){return this.selected?.value??null}markAsTouched(){super.markAsTouched(),this.radios.forEach(e=>e.markAsTouched())}markAsUntouched(){super.markAsUntouched(),this.radios.forEach(e=>e.markAsUntouched())}markAsDirty(){super.markAsDirty(),this.radios.forEach(e=>e.markAsDirty())}markAsPristine(){super.markAsPristine(),this.radios.forEach(e=>e.markAsPristine())}attributeChangedCallback(e,r,t){switch(super.attributeChangedCallback(e,r,t),e){case"name":this.radios.forEach(e=>e.name=this.name);break;case"aria-invalid":this.radios.forEach(e=>{E(e,"--invalid","true"===t),e[_]?.()})}}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",e(this,H,"f")),t(this,q,L.observe(()=>this[S].directionality=L.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusout",e(this,H,"f")),e(this,q,"f")?.call(this)}update(e){super.update(e),e.has("disabled")&&(this.ariaDisabled=null),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[S].disabled=this.disabled)}render(){return o`<slot @slotchange="${e(this,j,"m",V)}" @keydown="${e(this,j,"m",B)}" @change="${e(this,j,"m",G)}"></slot>`}};q=new WeakMap,H=new WeakMap,j=new WeakSet,K=S,V=function(){const{added:e}=this[S].setItems([...this.querySelectorAll("m3e-radio")]);e.forEach(e=>e.name=e.name||this.name)},B=function(e){this[S].onKeyDown(e)},G=function(){this.checkValidity()},N.styles=s`:host { display: inline-flex; }`,N=r([$("m3e-radio-group")],N);export{R as M3eRadioElement,N as M3eRadioGroupElement};
+import{__classPrivateFieldGet as e,__decorate as r,__classPrivateFieldSet as t}from"tslib";import{LitElement as i,html as o,css as s}from"lit";import{query as a,property as c}from"lit/decorators.js";import{Labelled as l,Dirty as d,Touched as n,Checked as h,KeyboardClick as u,Focusable as m,FormAssociated as p,Disabled as v,AttachInternals as b,Role as f,HoverController as k,PressedController as y,formValue as g,DesignToken as w,customElement as $,RequiredConstraintValidation as x,Required as C,ConstraintValidation as E,setCustomState as A,updateLabels as _}from"@m3e/web/core";import{selectionManager as S,SelectionManager as D}from"@m3e/web/core/a11y";import{M3eDirectionality as L}from"@m3e/web/core/bidi";var T,W,z,M,P,U,I;let R=class extends(l(d(n(h(u(m(p(v(b(f(i,"radio"),!0)))))))))){constructor(){super(...arguments),T.add(this),W.set(this,r=>e(this,T,"m",U).call(this,r)),z.set(this,new k(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),M.set(this,new y(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(W=new WeakMap,z=new WeakMap,M=new WeakMap,T=new WeakSet,g)](){return this.checked&&!this.disabled?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,W,"f"));for(const r of this.labels)e(this,z,"f").observe(r),e(this,M,"f").observe(r)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,W,"f"));for(const r of this.labels)e(this,z,"f").unobserve(r),e(this,M,"f").unobserve(r)}update(r){super.update(r),r.has("checked")&&e(this,T,"m",I).call(this)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${e(this,T,"m",P).call(this)}</div></div>`}};var j,q,H,V,B,G,K;P=function(){return o`<svg viewBox="0 0 20 20"><mask id="cutout2"><rect width="100%" height="100%" fill="white"></rect><circle cx="10" cy="10" r="8" fill="black"></circle></mask><circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout2)"></circle><circle class="inner circle" cx="10" cy="10" r="5"></circle></svg>`},U=function(r){r.defaultPrevented||this.checked||this.disabled||(this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.checked=!0,e(this,T,"m",I).call(this),this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))),this.closest("label")&&r.preventDefault())},I=function(){const e=this.closest("m3e-radio-group");e?e[S].notifySelectionChange(this):this.name&&this.checked&&[...this.getRootNode()?.querySelectorAll(`m3e-radio[name="${this.name}"]`)??[]].filter(e=>e!==this&&e.checked).forEach(e=>e.checked=!1)},R.styles=s`: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) + ${w.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${w.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, ${w.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${w.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${w.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${w.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${w.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${w.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${w.color.primary}); color: var(--m3e-radio-selected-icon-color, ${w.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${w.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, ${w.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${w.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${w.color.error}); color: var(--m3e-radio-error-icon-color, ${w.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; } }`,r([a(".focus-ring")],R.prototype,"_focusRing",void 0),r([a(".state-layer")],R.prototype,"_stateLayer",void 0),r([a(".ripple")],R.prototype,"_ripple",void 0),r([c()],R.prototype,"value",void 0),R=r([$("m3e-radio")],R);let N=class extends(l(x(d(n(C(E(p(v(b(f(i,"radiogroup"))))))))))){constructor(){super(...arguments),j.add(this),q.set(this,void 0),H.set(this,()=>e(this,j,"m",G).call(this)),this[K]=(new D).withWrap().withDirectionality(L.current).onActiveItemChange(()=>{this[S].activeItem?.click()})}static get observedAttributes(){return[...super.observedAttributes,"aria-invalid"]}get radios(){return this[S]?.items??[]}get selected(){return this[S]?.selectedItems[0]??null}get value(){return this.selected?.value??null}markAsTouched(){super.markAsTouched(),this.radios.forEach(e=>e.markAsTouched())}markAsUntouched(){super.markAsUntouched(),this.radios.forEach(e=>e.markAsUntouched())}markAsDirty(){super.markAsDirty(),this.radios.forEach(e=>e.markAsDirty())}markAsPristine(){super.markAsPristine(),this.radios.forEach(e=>e.markAsPristine())}attributeChangedCallback(e,r,t){switch(super.attributeChangedCallback(e,r,t),e){case"name":this.radios.forEach(e=>e.name=this.name);break;case"aria-invalid":this.radios.forEach(e=>{A(e,"--invalid","true"===t),e[_]?.()})}}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",e(this,H,"f")),t(this,q,L.observe(()=>this[S].directionality=L.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusout",e(this,H,"f")),e(this,q,"f")?.call(this)}update(e){super.update(e),e.has("disabled")&&(this.ariaDisabled=null),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[S].disabled=this.disabled)}render(){return o`<slot @slotchange="${e(this,j,"m",V)}" @keydown="${e(this,j,"m",B)}" @change="${e(this,j,"m",G)}"></slot>`}};q=new WeakMap,H=new WeakMap,j=new WeakSet,K=S,V=function(){const{added:e}=this[S].setItems([...this.querySelectorAll("m3e-radio")]);e.forEach(e=>e.name=e.name||this.name)},B=function(e){this[S].onKeyDown(e)},G=function(){this.checkValidity()},N.styles=s`:host { display: inline-flex; }`,N=r([$("m3e-radio-group")],N);export{R as M3eRadioElement,N as M3eRadioGroupElement};
 //# sourceMappingURL=radio-group.min.js.map