@m3e/web 2.5.4 → 2.5.5

package/dist/option.min.js.map

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

package/dist/radio-group.js

@@ -173,7 +173,7 @@ _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelecti
   }
 };
 /** The styles of the element. */
-M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:state(-touched):state(-invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:state(-touched):state(-invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
+M3eRadioElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
 __decorate([query(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
@@ -272,7 +272,7 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled(RequiredC
         break;
       case "aria-invalid":
         this.radios.forEach(x => {
-          setCustomState(x, "-invalid", newValue === "true");
+          setCustomState(x, "--invalid", newValue === "true");
           x[updateLabels]?.();
         });
         break;

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(:state(-touched):state(-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(:state(-touched):state(-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 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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"}

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(:state(-touched):state(-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(:state(-touched):state(-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 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};
 //# sourceMappingURL=radio-group.min.js.map

package/dist/radio-group.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.min.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(:state(-touched):state(-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(:state(-touched):state(-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","this","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","super","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","undefined","get","_M3eRadioGroupElement_handleSlotChange","_M3eRadioGroupElement_handleKeyDown","added","setItems","onKeyDown","checkValidity"],"mappings":"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"}
+{"version":3,"file":"radio-group.min.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","this","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","super","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","undefined","get","_M3eRadioGroupElement_handleSlotChange","_M3eRadioGroupElement_handleKeyDown","added","setItems","onKeyDown","checkValidity"],"mappings":";;;;;4tBAgFO,IAAMA,EAAN,cAA8BC,EACnCC,EACEC,EACEC,EAAQC,EAAcC,EAAUC,EAAeC,EAASC,EAAgBC,EAAKC,EAAY,UAAU,YAHlGC,WAAAA,mCA4FoBC,EAAAC,IAAAC,KAAiBC,GAAaC,EAAAF,cAAiBG,KAAjBH,KAAkBC,IAEhDG,EAAAL,IAAAC,KAAmB,IAAIK,EAAgBL,KAAM,CACpEM,OAAQ,KACRC,SAAWC,IACLR,KAAKS,WACLD,EACFR,KAAKU,aAAaC,KAAK,SAEvBX,KAAKU,aAAaE,KAAK,cAKJC,EAAAd,IAAAC,KAAqB,IAAIc,EAAkBd,KAAM,CACxEM,OAAQ,KACRS,mBAAoB,IACpBR,SAAWS,IACLhB,KAAKS,WACLO,EACFhB,KAAKiB,SAASN,KAAK,EAAG,GAAG,GAEzBX,KAAKiB,SAASL,YASRZ,KAAAkB,MAAQ,IAqGtB,CAlGE,KAAapB,EAAA,IAAAqB,QAAAf,EAAA,IAAAe,QAAAN,EAAA,IAAAM,QAAAC,EAAA,IAAAC,QAACC,MACZ,OAAOtB,KAAKuB,UAAYvB,KAAKS,SAAWT,KAAKkB,MAAQ,IACvD,CAGSM,iBAAAA,GACPC,MAAMD,oBAENxB,KAAK0B,iBAAiB,QAASxB,EAAAF,KAAIF,EAAA,MAEnC,IAAK,MAAM6B,KAAS3B,KAAK4B,OACvB1B,EAAAF,KAAII,EAAA,KAAkByB,QAAQF,GAC9BzB,EAAAF,KAAIa,EAAA,KAAoBgB,QAAQF,EAEpC,CAGSG,oBAAAA,GACPL,MAAMK,uBAEN9B,KAAK+B,oBAAoB,QAAS7B,EAAAF,KAAIF,EAAA,MAEtC,IAAK,MAAM6B,KAAS3B,KAAK4B,OACvB1B,EAAAF,KAAII,EAAA,KAAkB4B,UAAUL,GAChCzB,EAAAF,KAAIa,EAAA,KAAoBmB,UAAUL,EAEtC,CAGmBM,MAAAA,CAAOC,GACxBT,MAAMQ,OAAOC,GAETA,EAAkBC,IAAI,YACxBjC,EAAAF,KAAIoB,EAAA,IAAAgB,GAAuBjC,KAA3BH,KAEJ,CAGmBqC,YAAAA,CAAaC,GAC9Bb,MAAMY,aAAaC,GACnB,CAACtC,KAAKuC,WAAYvC,KAAKU,YAAaV,KAAKiB,SAASuB,QAASC,GAAMA,GAAGC,OAAO1C,MAC7E,CAGmB2C,MAAAA,GACjB,OAAOC,CAAI,qEACyC5C,KAAKS,6EACPT,KAAKS,6EACJT,KAAKS,8GAEZP,EAAAF,KAAIoB,EAAA,IAAAyB,GAAY1C,KAAhBH,mBAE9C,kCAIE,OAAO4C,CAAI,kTAQb,aAGa3C,GACPA,EAAE6C,kBAAoB9C,KAAKuB,SAAWvB,KAAKS,WAC/CT,KAAKuB,SAAU,EACXvB,KAAK+C,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,EAAMC,YAAY,MACrFjD,EAAAF,KAAIoB,EAAA,IAAAgB,GAAuBjC,KAA3BH,MACAA,KAAK+C,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,MAElDjD,KAAKuB,SAAU,EAIbvB,KAAKoD,QAAQ,UACfnD,EAAEoD,iBAEN,eAIE,MAAMC,EAAQtD,KAAKoD,QAAQ,mBACvBE,EACFA,EAAMC,GAAkBC,sBAAsBxD,MACrCA,KAAKyD,MAAQzD,KAAKuB,SAE3B,IACOvB,KAAK0D,eAA8BC,iBAAkC,mBAAmB3D,KAAKyD,WAChG,IAEDG,OAAQnB,GAAMA,IAAMzC,MAAQyC,EAAElB,SAC9BiB,QAASC,GAAOA,EAAElB,SAAU,EAEnC,EAvNgBtC,EAAA4E,OAAyBC,CAAG,ycAqBgBC,EAAYC,QAAQC,MAAK,+DACxBF,EAAYC,QAAQC,MAAK,iaAqBTF,EAAYG,MAAMC,sFAClBJ,EAAYG,MAAMC,4EAC5BJ,EAAYG,MAAMC,6DACjCJ,EAAYG,MAAME,sHAGKL,EAAYG,MAAMG,kFAClBN,EAAYG,MAAMG,wEAC5BN,EAAYG,MAAMG,yDACjCN,EAAYG,MAAMG,oHAGCN,EAAYG,MAAMC,yLAGfJ,EAAYG,MAAMI,6EAClBP,EAAYG,MAAMI,mEAC5BP,EAAYG,MAAMI,oDACjCP,EAAYG,MAAMI,oiBAoBVC,EAAA,CAAtCC,EAAM,gBAAiEvF,EAAAwF,UAAA,qBAChCF,EAAA,CAAvCC,EAAM,iBAAoEvF,EAAAwF,UAAA,sBACxCF,EAAA,CAAlCC,EAAM,YAAuDvF,EAAAwF,UAAA,kBAgClEF,EAAA,CAAXG,KAAwBzF,EAAAwF,UAAA,gBA3HdxF,EAAesF,EAAA,CAD3BI,EAAc,cACF1F,GCvBN,IAAM2F,EAAN,cAAmC1F,EACxC2F,EACE1F,EACEC,EACE0F,EAASC,EAAqBvF,EAAeC,EAASC,EAAgBC,EAAKC,EAAY,wBAJxFC,WAAAA,mCAqBWmF,EAAAjF,IAAAC,aACSiF,EAAAlF,IAAAC,KAAmB,IAAME,EAAAF,KAAIkF,EAAA,IAAAC,GAAchF,KAAlBH,OAGzCA,KAAAoF,IAAqB,IAAIC,GAC/BC,WACAC,mBAAmBC,EAAkBC,SACrCC,mBAAmB,KAClB1F,KAAKuD,GAAkBoC,YAAYC,SAmHzC,CAtIE,6BAAoBC,GAClB,MAAO,IAAIpE,MAAMoE,mBAAoB,eACvC,CAqBA,UAAIC,GACF,OAAO9F,KAAKuD,IAAmBwC,OAAS,EAC1C,CAGA,YAAIC,GACF,OAAOhG,KAAKuD,IAAmB0C,cAAc,IAAM,IACrD,CAGA,SAAI/E,GACF,OAAOlB,KAAKgG,UAAU9E,OAAS,IACjC,CAGSgF,aAAAA,GACPzE,MAAMyE,gBACNlG,KAAK8F,OAAOtD,QAASC,GAAMA,EAAEyD,gBAC/B,CAGSC,eAAAA,GACP1E,MAAM0E,kBACNnG,KAAK8F,OAAOtD,QAASC,GAAMA,EAAE0D,kBAC/B,CAGSC,WAAAA,GACP3E,MAAM2E,cACNpG,KAAK8F,OAAOtD,QAASC,GAAMA,EAAE2D,cAC/B,CAGSC,cAAAA,GACP5E,MAAM4E,iBACNrG,KAAK8F,OAAOtD,QAASC,GAAMA,EAAE4D,iBAC/B,CAGSC,wBAAAA,CAAyB7C,EAAc8C,EAAyBC,GAGvE,OAFA/E,MAAM6E,yBAAyB7C,EAAM8C,EAAUC,GAEvC/C,GACN,IAAK,OACHzD,KAAK8F,OAAOtD,QAASC,GAAOA,EAAEgB,KAAOzD,KAAKyD,MAC1C,MAEF,IAAK,eACHzD,KAAK8F,OAAOtD,QAASC,IACnBgE,EAAehE,EAAG,YAA0B,SAAb+D,GAC/B/D,EAAEiE,SAIV,CAGSlF,iBAAAA,GACPC,MAAMD,oBAENxB,KAAK0B,iBAAiB,WAAYxB,EAAAF,KAAIiF,EAAA,MACtC0B,EAAA3G,OAAmCwF,EAAkB3D,QACnD,IAAO7B,KAAKuD,GAAkBqD,eAAiBpB,EAAkBC,SAClE,IACH,CAGS3D,oBAAAA,GACPL,MAAMK,uBAEN9B,KAAK+B,oBAAoB,WAAY7B,EAAAF,KAAIiF,EAAA,MACzC/E,EAAAF,KAAIgF,EAAA,MAA8B7E,KAAlCH,KACF,CAGmBiC,MAAAA,CAAOC,GACxBT,MAAMQ,OAAOC,GAETA,EAAkBC,IAAI,cACxBnC,KAAK6G,aAAe,MAGlB3E,EAAkBC,IAAI,mBAAsD2E,IAAtC5E,EAAkB6E,IAAI,aAA6B/G,KAAKS,YAChGT,KAAKuD,GAAkB9C,SAAWT,KAAKS,SAE3C,CAGmBkC,MAAAA,GACjB,OAAOC,CAAI,sBACM1C,EAAAF,KAAIkF,EAAA,IAAA8B,iBACP9G,EAAAF,KAAIkF,EAAA,IAAA+B,gBACL/G,EAAAF,KAAIkF,EAAA,IAAAC,aAEnB,+CAtGU5B,eA0GR,MAAM2D,MAAEA,GAAUlH,KAAKuD,GAAkB4D,SAAS,IAAInH,KAAK2D,iBAAiB,eAC5EuD,EAAM1E,QAASC,GAAOA,EAAEgB,KAAOhB,EAAEgB,MAAQzD,KAAKyD,KAChD,aAGexD,GACbD,KAAKuD,GAAkB6D,UAAUnH,EACnC,eAIED,KAAKqH,eACP,EAhIgBzC,EAAAf,OAAyBC,CAAG,kCAfjCc,EAAoBL,EAAA,CADhCI,EAAc,oBACFC"}