@m3e/web 2.5.3 → 2.5.5

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":";;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AAEI,IAAMA,eAAe,GAArB,MAAMA,eAAgB,SAAQC,QAAQ,CAC3CC,KAAK,CACHC,OAAO,CACLC,OAAO,CAACC,aAAa,CAACC,SAAS,CAACC,cAAc,CAACC,QAAQ,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC9G,CACF,CACF,CAAA;AANMC,EAAAA,WAAAA,GAAA;;;AA4FL;IAAyBC,6BAAA,CAAAC,GAAA,CAAA,IAAA,EAAiBC,CAAQ,IAAKC,sBAAA,CAAA,IAAI,gEAAa,CAAAC,IAAA,CAAjB,IAAI,EAAcF,CAAC,CAAC,CAAA;AAE3E;IAAyBG,gCAAA,CAAAJ,GAAA,CAAA,IAAA,EAAmB,IAAIK,eAAe,CAAC,IAAI,EAAE;AACpEC,MAAAA,MAAM,EAAE,IAAI;MACZC,QAAQ,EAAGC,QAAQ,IAAI;QACrB,IAAI,IAAI,CAACC,QAAQ,EAAE;AACnB,QAAA,IAAID,QAAQ,EAAE;AACZ,UAAA,IAAI,CAACE,WAAW,EAAEC,IAAI,CAAC,OAAO,CAAC;AACjC,QAAA,CAAC,MAAM;AACL,UAAA,IAAI,CAACD,WAAW,EAAEE,IAAI,CAAC,OAAO,CAAC;AACjC,QAAA;AACF,MAAA;AACD,KAAA,CAAC,CAAA;AAEF;IAAyBC,kCAAA,CAAAb,GAAA,CAAA,IAAA,EAAqB,IAAIc,iBAAiB,CAAC,IAAI,EAAE;AACxER,MAAAA,MAAM,EAAE,IAAI;AACZS,MAAAA,kBAAkB,EAAE,GAAG;MACvBR,QAAQ,EAAGS,OAAO,IAAI;QACpB,IAAI,IAAI,CAACP,QAAQ,EAAE;AACnB,QAAA,IAAIO,OAAO,EAAE;UACX,IAAI,CAACC,OAAO,EAAEN,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;AAChC,QAAA,CAAC,MAAM;AACL,UAAA,IAAI,CAACM,OAAO,EAAEL,IAAI,EAAE;AACtB,QAAA;AACF,MAAA;AACD,KAAA,CAAC,CAAA;AAEF;;;AAGG;IACS,IAAA,CAAAM,KAAK,GAAG,IAAI;AAqG1B,EAAA;AAnGE;AACA,EAAA,MAAanB,6BAAA,GAAA,IAAAoB,OAAA,EAAA,EAAAf,gCAAA,GAAA,IAAAe,OAAA,EAAA,EAAAN,kCAAA,GAAA,IAAAM,OAAA,EAAA,EAAAC,0BAAA,GAAA,IAAAC,OAAA,EAAA,EAACC,SAAS,EAAA,GAAC;AACtB,IAAA,OAAO,IAAI,CAACC,OAAO,IAAI,CAAC,IAAI,CAACd,QAAQ,GAAG,IAAI,CAACS,KAAK,GAAG,IAAI;AAC3D,EAAA;AAEA;AACSM,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AAEzB,IAAA,IAAI,CAACC,gBAAgB,CAAC,OAAO,EAAEvB,sBAAA,CAAA,IAAI,EAAAH,6BAAA,EAAA,GAAA,CAAc,CAAC;AAElD,IAAA,KAAK,MAAM2B,KAAK,IAAI,IAAI,CAACC,MAAM,EAAE;MAC/BzB,sBAAA,CAAA,IAAI,EAAAE,gCAAA,EAAA,GAAA,CAAiB,CAACwB,OAAO,CAACF,KAAK,CAAC;MACpCxB,sBAAA,CAAA,IAAI,EAAAW,kCAAA,EAAA,GAAA,CAAmB,CAACe,OAAO,CAACF,KAAK,CAAC;AACxC,IAAA;AACF,EAAA;AAEA;AACSG,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;AAE5B,IAAA,IAAI,CAACC,mBAAmB,CAAC,OAAO,EAAE5B,sBAAA,CAAA,IAAI,EAAAH,6BAAA,EAAA,GAAA,CAAc,CAAC;AAErD,IAAA,KAAK,MAAM2B,KAAK,IAAI,IAAI,CAACC,MAAM,EAAE;MAC/BzB,sBAAA,CAAA,IAAI,EAAAE,gCAAA,EAAA,GAAA,CAAiB,CAAC2B,SAAS,CAACL,KAAK,CAAC;MACtCxB,sBAAA,CAAA,IAAI,EAAAW,kCAAA,EAAA,GAAA,CAAmB,CAACkB,SAAS,CAACL,KAAK,CAAC;AAC1C,IAAA;AACF,EAAA;AAEA;EACmBM,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,KAAK,CAACD,MAAM,CAACC,iBAAiB,CAAC;AAE/B,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,SAAS,CAAC,EAAE;AACpChC,MAAAA,sBAAA,CAAA,IAAI,EAAAkB,0BAAA,EAAA,GAAA,EAAAe,sCAAA,CAAuB,CAAAhC,IAAA,CAA3B,IAAI,CAAyB;AAC/B,IAAA;AACF,EAAA;AAEA;EACmBiC,YAAYA,CAACC,kBAAwC,EAAA;AACtE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;IACtC,CAAC,IAAI,CAACC,UAAU,EAAE,IAAI,CAAC5B,WAAW,EAAE,IAAI,CAACO,OAAO,CAAC,CAACsB,OAAO,CAAEC,CAAC,IAAKA,CAAC,EAAEC,MAAM,CAAC,IAAI,CAAC,CAAC;AACnF,EAAA;AAEA;AACmBC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,kEAAA,EACyC,IAAI,CAAClC,QAAQ,CAAA,kEAAA,EACf,IAAI,CAACA,QAAQ,CAAA,kEAAA,EACZ,IAAI,CAACA,QAAQ,CAAA,mGAAA,EAEpBP,sBAAA,CAAA,IAAI,EAAAkB,0BAAA,EAAA,GAAA,EAAAwB,2BAAA,CAAY,CAAAzC,IAAA,CAAhB,IAAI,CAAc,CAAA,YAAA,CACvD;AACT,EAAA;;;AAIE,EAAA,OAAOwC,IAAI,CAAA,gTAAA,CAOJ;AACT,CAAC;qEAGY1C,CAAQ,EAAA;EACnB,IAAIA,CAAC,CAAC4C,gBAAgB,IAAI,IAAI,CAACtB,OAAO,IAAI,IAAI,CAACd,QAAQ,EAAE;EACzD,IAAI,CAACc,OAAO,GAAG,IAAI;EACnB,IAAI,IAAI,CAACuB,aAAa,CAAC,IAAIC,KAAK,CAAC,OAAO,EAAE;AAAEC,IAAAA,OAAO,EAAE,IAAI;AAAEC,IAAAA,QAAQ,EAAE,IAAI;AAAEC,IAAAA,UAAU,EAAE;GAAM,CAAC,CAAC,EAAE;AAC/FhD,IAAAA,sBAAA,CAAA,IAAI,EAAAkB,0BAAA,EAAA,GAAA,EAAAe,sCAAA,CAAuB,CAAAhC,IAAA,CAA3B,IAAI,CAAyB;AAC7B,IAAA,IAAI,CAAC2C,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAI,KAAE,CAAC,CAAC;AAC5D,EAAA,CAAC,MAAM;IACL,IAAI,CAACzB,OAAO,GAAG,KAAK;AACtB,EAAA;AAEA;AACA,EAAA,IAAI,IAAI,CAAC4B,OAAO,CAAC,OAAO,CAAC,EAAE;IACzBlD,CAAC,CAACmD,cAAc,EAAE;AACpB,EAAA;AACF,CAAC;;AAIC,EAAA,MAAMC,KAAK,GAAG,IAAI,CAACF,OAAO,CAAC,iBAAiB,CAAC;AAC7C,EAAA,IAAIE,KAAK,EAAE;AACTA,IAAAA,KAAK,CAACC,gBAAgB,CAAC,CAACC,qBAAqB,CAAC,IAAI,CAAC;EACrD,CAAC,MAAM,IAAI,IAAI,CAACC,IAAI,IAAI,IAAI,CAACjC,OAAO,EAAE;AACpC;AACA,IAAA,CACE,IAAK,IAAI,CAACkC,WAAW,EAAiB,EAAEC,gBAAgB,CAAkB,mBAAmB,IAAI,CAACF,IAAI,CAAA,EAAA,CAAI,CAAC,IACzG,EAAE,CAAC,CACN,CACEG,MAAM,CAAEnB,CAAC,IAAKA,CAAC,KAAK,IAAI,IAAIA,CAAC,CAACjB,OAAO,CAAC,CACtCgB,OAAO,CAAEC,CAAC,IAAMA,CAAC,CAACjB,OAAO,GAAG,KAAM,CAAC;AACxC,EAAA;AACF,CAAC;AAxND;AACgBrC,eAAA,CAAA0E,MAAM,GAAmBC,GAAG,ycAqBgBC,WAAW,CAACC,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,6DAC3BF,WAAW,CAACC,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,+ZAqBZF,WAAW,CAACG,KAAK,CAACC,SAAS,6EAC3BJ,WAAW,CAACG,KAAK,CAACC,SAAS,CAAA,gEAAA,EACrCJ,WAAW,CAACG,KAAK,CAACC,SAAS,CAAA,iDAAA,EAC1CJ,WAAW,CAACG,KAAK,CAACE,gBAAgB,CAAA,mGAAA,EAGXL,WAAW,CAACG,KAAK,CAACG,OAAO,2EACzBN,WAAW,CAACG,KAAK,CAACG,OAAO,CAAA,8DAAA,EACnCN,WAAW,CAACG,KAAK,CAACG,OAAO,CAAA,+CAAA,EACxCN,WAAW,CAACG,KAAK,CAACG,OAAO,CAAA,0GAAA,EAGNN,WAAW,CAACG,KAAK,CAACC,SAAS,CAAA,6KAAA,EAGxBJ,WAAW,CAACG,KAAK,CAACI,KAAK,CAAA,qEAAA,EACvBP,WAAW,CAACG,KAAK,CAACI,KAAK,8DACjCP,WAAW,CAACG,KAAK,CAACI,KAAK,CAAA,4CAAA,EACtCP,WAAW,CAACG,KAAK,CAACI,KAAK,CAAA,4hBAAA,CA7DhD;AAiFiCC,UAAA,CAAA,CAAtCC,KAAK,CAAC,aAAa,CAAC,CAAmD,EAAArF,eAAA,CAAAsF,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAChCF,UAAA,CAAA,CAAvCC,KAAK,CAAC,cAAc,CAAC,CAAqD,EAAArF,eAAA,CAAAsF,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AACxCF,UAAA,CAAA,CAAlCC,KAAK,CAAC,SAAS,CAAC,CAA6C,EAAArF,eAAA,CAAAsF,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAgClEF,UAAA,CAAA,CAAXG,QAAQ,EAAE,CAAc,EAAAvF,eAAA,CAAAsF,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AA3HdtF,eAAe,GAAAoF,UAAA,CAAA,CAD3BI,aAAa,CAAC,WAAW,CAAC,CACd,EAAAxF,eAAe,CAgO3B;;;ACzRD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCG;AAEI,IAAMyF,oBAAoB,GAA1B,MAAMA,oBAAqB,SAAQxF,QAAQ,CAChDyF,4BAA4B,CAC1BxF,KAAK,CACHC,OAAO,CACLwF,QAAQ,CAACC,oBAAoB,CAACrF,cAAc,CAACC,QAAQ,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1G,CACF,CACF,CACF,CAAA;AARMC,EAAAA,WAAAA,GAAA;;;AAqBL;AAAgBiF,IAAAA,gDAAA,CAAA/E,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;IAAyBgF,qCAAA,CAAAhF,GAAA,CAAA,IAAA,EAAmB,MAAME,sBAAA,CAAA,IAAI,EAAA+E,+BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAc,CAAA/E,IAAA,CAAlB,IAAI,CAAgB,CAAA;AAEtE;IACS,IAAA,CAAAgF,EAAA,CAAkB,GAAG,IAAIC,gBAAgB,EAAmB,CAClEC,QAAQ,EAAE,CACVC,kBAAkB,CAACC,iBAAiB,CAACC,OAAO,CAAC,CAC7CC,kBAAkB,CAAC,MAAK;MACvB,IAAI,CAACnC,gBAAgB,CAAC,CAACoC,UAAU,EAAEC,KAAK,EAAE;AAC5C,IAAA,CAAC,CAAC;AAkHN,EAAA;AAvIE;EACA,WAAoBC,kBAAkBA,GAAA;AACpC,IAAA,OAAO,CAAC,GAAG,KAAK,CAACA,kBAAkB,EAAE,cAAc,CAAC;AACtD,EAAA;AAoBA;EACA,IAAIC,MAAMA,GAAA;AACR,IAAA,OAAO,IAAI,CAACvC,gBAAgB,CAAC,EAAEwC,KAAK,IAAI,EAAE;AAC5C,EAAA;AAEA;EACA,IAAIC,QAAQA,GAAA;IACV,OAAO,IAAI,CAACzC,gBAAgB,CAAC,EAAE0C,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI;AACzD,EAAA;AAEA;EACA,IAAI9E,KAAKA,GAAA;AACP,IAAA,OAAO,IAAI,CAAC6E,QAAQ,EAAE7E,KAAK,IAAI,IAAI;AACrC,EAAA;AAEA;AACS+E,EAAAA,aAAaA,GAAA;IACpB,KAAK,CAACA,aAAa,EAAE;AACrB,IAAA,IAAI,CAACJ,MAAM,CAACtD,OAAO,CAAEC,CAAC,IAAKA,CAAC,CAACyD,aAAa,EAAE,CAAC;AAC/C,EAAA;AAEA;AACSC,EAAAA,eAAeA,GAAA;IACtB,KAAK,CAACA,eAAe,EAAE;AACvB,IAAA,IAAI,CAACL,MAAM,CAACtD,OAAO,CAAEC,CAAC,IAAKA,CAAC,CAAC0D,eAAe,EAAE,CAAC;AACjD,EAAA;AAEA;AACSC,EAAAA,WAAWA,GAAA;IAClB,KAAK,CAACA,WAAW,EAAE;AACnB,IAAA,IAAI,CAACN,MAAM,CAACtD,OAAO,CAAEC,CAAC,IAAKA,CAAC,CAAC2D,WAAW,EAAE,CAAC;AAC7C,EAAA;AAEA;AACSC,EAAAA,cAAcA,GAAA;IACrB,KAAK,CAACA,cAAc,EAAE;AACtB,IAAA,IAAI,CAACP,MAAM,CAACtD,OAAO,CAAEC,CAAC,IAAKA,CAAC,CAAC4D,cAAc,EAAE,CAAC;AAChD,EAAA;AAEA;AACSC,EAAAA,wBAAwBA,CAAC7C,IAAY,EAAE8C,QAAuB,EAAEC,QAAuB,EAAA;IAC9F,KAAK,CAACF,wBAAwB,CAAC7C,IAAI,EAAE8C,QAAQ,EAAEC,QAAQ,CAAC;AAExD,IAAA,QAAQ/C,IAAI;AACV,MAAA,KAAK,MAAM;AACT,QAAA,IAAI,CAACqC,MAAM,CAACtD,OAAO,CAAEC,CAAC,IAAMA,CAAC,CAACgB,IAAI,GAAG,IAAI,CAACA,IAAK,CAAC;AAChD,QAAA;AAEF,MAAA,KAAK,cAAc;AACjB,QAAA,IAAI,CAACqC,MAAM,CAACtD,OAAO,CAAEC,CAAC,IAAI;UACxBgE,cAAc,CAAChE,CAAC,EAAE,WAAW,EAAE+D,QAAQ,KAAK,MAAM,CAAC;AACnD/D,UAAAA,CAAC,CAACiE,YAAY,CAAC,IAAI;AACrB,QAAA,CAAC,CAAC;AACF,QAAA;AACJ;AACF,EAAA;AAEA;AACSjF,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AAEzB,IAAA,IAAI,CAACC,gBAAgB,CAAC,UAAU,EAAEvB,sBAAA,CAAA,IAAI,EAAA8E,qCAAA,EAAA,GAAA,CAAiB,CAAC;IACxD0B,sBAAA,CAAA,IAAI,oDAA+BnB,iBAAiB,CAAC3D,OAAO,CAC1D,MAAO,IAAI,CAAC0B,gBAAgB,CAAC,CAACqD,cAAc,GAAGpB,iBAAiB,CAACC,OAAQ,CAC1E,EAAA,GAAA,CAAA;AACH,EAAA;AAEA;AACS3D,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;AAE5B,IAAA,IAAI,CAACC,mBAAmB,CAAC,UAAU,EAAE5B,sBAAA,CAAA,IAAI,EAAA8E,qCAAA,EAAA,GAAA,CAAiB,CAAC;IAC3D9E,sBAAA,CAAA,IAAI,EAAA6E,gDAAA,EAAA,GAAA,CAA4B,EAAE5E,IAAA,CAAlC,IAAI,CAAgC;AACtC,EAAA;AAEA;EACmB6B,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,KAAK,CAACD,MAAM,CAACC,iBAAiB,CAAC;AAE/B,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;MACrC,IAAI,CAAC0E,YAAY,GAAG,IAAI;AAC1B,IAAA;IAEA,IAAI3E,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,KAAKD,iBAAiB,CAAC4E,GAAG,CAAC,UAAU,CAAC,KAAKC,SAAS,IAAI,IAAI,CAACrG,QAAQ,CAAC,EAAE;MAC3G,IAAI,CAAC6C,gBAAgB,CAAC,CAAC7C,QAAQ,GAAG,IAAI,CAACA,QAAQ;AACjD,IAAA;AACF,EAAA;AAEA;AACmBiC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,mBAAA,EACMzC,sBAAA,CAAA,IAAI,EAAA+E,+BAAA,EAAA,GAAA,EAAA8B,sCAAA,CAAkB,CAAA,YAAA,EACzB7G,sBAAA,CAAA,IAAI,EAAA+E,+BAAA,EAAA,GAAA,EAAA+B,mCAAA,CAAe,cACpB9G,sBAAA,CAAA,IAAI,EAAA+E,+BAAA,EAAA,GAAA,EAAAC,kCAAA,CAAc,CAAA,SAAA,CACtB;AACX,EAAA;;;;;KAtGU5B,gBAAgB;;EA0GxB,MAAM;AAAE2D,IAAAA;AAAK,GAAE,GAAG,IAAI,CAAC3D,gBAAgB,CAAC,CAAC4D,QAAQ,CAAC,CAAC,GAAG,IAAI,CAACxD,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAC1FuD,EAAAA,KAAK,CAAC1E,OAAO,CAAEC,CAAC,IAAMA,CAAC,CAACgB,IAAI,GAAGhB,CAAC,CAACgB,IAAI,IAAI,IAAI,CAACA,IAAK,CAAC;AACtD,CAAC;mFAGcvD,CAAgB,EAAA;AAC7B,EAAA,IAAI,CAACqD,gBAAgB,CAAC,CAAC6D,SAAS,CAAClH,CAAC,CAAC;AACrC,CAAC;;EAIC,IAAI,CAACmH,aAAa,EAAE;AACtB,CAAC;AAjID;AACgBzC,oBAAA,CAAAf,MAAM,GAAmBC,GAAG,CAAA,+BAAA,CAAtB;AAfXc,oBAAoB,GAAAL,UAAA,CAAA,CADhCI,aAAa,CAAC,iBAAiB,CAAC,CACpB,EAAAC,oBAAoB,CAgJhC;;;;"}

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

package/dist/search.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { unsafeCSS, css, LitElement, html, nothing, svg } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
-import { DesignToken, EventAttribute, AttachInternals, setCustomState, hasAssignedNodes, registerStyleSheet, customElement, ReconnectedCallback, ScrollLockController, InertController, FocusController, prefersReducedMotion, debounce } from '@m3e/web/core';
+import { DesignToken, AttachInternals, setCustomState, hasAssignedNodes, registerStyleSheet, customElement, ReconnectedCallback, ScrollLockController, InertController, FocusController, prefersReducedMotion, debounce } from '@m3e/web/core';
 import '@m3e/web/icon-button';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { positionAnchor } from '@m3e/web/core/anchoring';
@@ -50,7 +50,7 @@ const SearchBarLightDomStyle = css`m3e-search-bar input[slot="input"]::placehold
  * Styles for `M3eSearchBarElement`.
  * @internal
  */
-const SearchBarStyle = css`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:state(-clearable))) .clear { display: none; } :host(:state(-with-leading)) slot[name="leading"], :host(:state(-with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:state(-with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:state(-with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:state(-with-trailing), :state(-clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:state(-with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
+const SearchBarStyle = css`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:is(:state(--clearable), :--clearable))) .clear { display: none; } :host(:is(:state(--with-leading), :--with-leading)) slot[name="leading"], :host(:is(:state(--with-trailing), :--with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:is(:state(--with-leading), :--with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:is(:state(--with-leading), :--with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:is(:state(--with-leading), :--with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
 
 /** @internal */
 const SearchViewToken = {
@@ -87,14 +87,14 @@ const SearchViewLightDomStyle = css`m3e-search-view input[slot="input"]::placeho
  * Styles for `M3eSearchViewElement`.
  * @internal
  */
-const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
+const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:is(:state(--fullscreen), :--fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .bar, :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:is(:state(--clearable), :--clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:is(:state(--fullscreen), :--fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen):not([open])) .header, :host(:is(:state(--fullscreen), :--fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:is(:state(--fullscreen), :--fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[open]) .header, :host(:is(:state(--docked), :--docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked):not([contained])) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:is(:state(--docked), :--docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:is(:state(--docked), :--docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:is(:state(--docked), :--docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:is(:state(--docked), :--docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:is(:state(--docked), :--docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
       overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
-      display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
-      background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+      display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--docked), :--docked):not([open])) .results { transform: scaleY(0.8); } :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(0.8); } } :host(:is(:state(--docked), :--docked)) .view { background-color: transparent; } :host(:is(:state(--docked), :--docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
+      background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, 
+        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--docked), :--docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); } } :host(:state(-fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:state(-fullscreen)) .bar, :host(:state(-fullscreen)) .header, :host(:state(-docked)) .results, :host(:state(-docked):not([open])) .view, :host(:state(-docked):not([open])) .view::backdrop, :host(:state(-docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;
+        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); } } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:is(:state(--fullscreen), :--fullscreen)) .bar, :host(:is(:state(--fullscreen), :--fullscreen)) .header, :host(:is(:state(--docked), :--docked)) .results, :host(:is(:state(--docked), :--docked):not([open])) .view, :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop, :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;
 
 var _M3eSearchBarElement_instances, _M3eSearchBarElement_input, _M3eSearchBarElement_inputInputHandler, _M3eSearchBarElement_renderClearButton, _M3eSearchBarElement_handleContainerClick, _M3eSearchBarElement_handleLeadingSlotChange, _M3eSearchBarElement_handleTrailingSlotChange, _M3eSearchBarElement_handleInputSlotChange, _M3eSearchBarElement_handleInputInput, _M3eSearchBarElement_handleClearClick;
 /**
@@ -151,7 +151,7 @@ var _M3eSearchBarElement_instances, _M3eSearchBarElement_input, _M3eSearchBarEle
  * @cssprop --m3e-search-bar-trailing-actions-leading-space - Space between the input and trailing actions.
  * @cssprop --m3e-search-bar-actions-gap - Gap between action icons.
  */
-let M3eSearchBarElement = class M3eSearchBarElement extends EventAttribute(AttachInternals(LitElement), "clear") {
+let M3eSearchBarElement = class M3eSearchBarElement extends AttachInternals(LitElement) {
   constructor() {
     super(...arguments);
     _M3eSearchBarElement_instances.add(this);
@@ -197,10 +197,10 @@ _M3eSearchBarElement_handleContainerClick = function _M3eSearchBarElement_handle
   }
 };
 _M3eSearchBarElement_handleLeadingSlotChange = function _M3eSearchBarElement_handleLeadingSlotChange(e) {
-  setCustomState(this, "-with-leading", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-leading", hasAssignedNodes(e.target));
 };
 _M3eSearchBarElement_handleTrailingSlotChange = function _M3eSearchBarElement_handleTrailingSlotChange(e) {
-  setCustomState(this, "-with-trailing", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-trailing", hasAssignedNodes(e.target));
 };
 _M3eSearchBarElement_handleInputSlotChange = function _M3eSearchBarElement_handleInputSlotChange(e) {
   const input = e.target.assignedElements({
@@ -219,7 +219,7 @@ _M3eSearchBarElement_handleInputSlotChange = function _M3eSearchBarElement_handl
   }
 };
 _M3eSearchBarElement_handleInputInput = function _M3eSearchBarElement_handleInputInput() {
-  setCustomState(this, "-clearable", this.clearable && (__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.value ?? "").length > 0);
+  setCustomState(this, "--clearable", this.clearable && (__classPrivateFieldGet(this, _M3eSearchBarElement_input, "f")?.value ?? "").length > 0);
 };
 _M3eSearchBarElement_handleClearClick = function _M3eSearchBarElement_handleClearClick() {
   this.clear();
@@ -308,7 +308,7 @@ var _M3eSearchViewElement_instances, _M3eSearchViewElement_input, _M3eSearchView
  * @cssprop --m3e-search-view-docked-scrim-color - Color of the scrim behind the docked view.
  * @cssprop --m3e-search-view-docked-scrim-opacity - Opacity of the scrim behind the docked view.
  */
-let M3eSearchViewElement = class M3eSearchViewElement extends EventAttribute(ReconnectedCallback(AttachInternals(LitElement)), "clear", "query") {
+let M3eSearchViewElement = class M3eSearchViewElement extends ReconnectedCallback(AttachInternals(LitElement)) {
   constructor() {
     super();
     _M3eSearchViewElement_instances.add(this);
@@ -531,12 +531,12 @@ _M3eSearchViewElement_handleInputInput = function _M3eSearchViewElement_handleIn
   }
 };
 _M3eSearchViewElement_updateMode = function _M3eSearchViewElement_updateMode() {
-  setCustomState(this, "-fullscreen", this.currentMode === "fullscreen");
-  setCustomState(this, "-docked", this.currentMode === "docked");
+  setCustomState(this, "--fullscreen", this.currentMode === "fullscreen");
+  setCustomState(this, "--docked", this.currentMode === "docked");
 };
 _M3eSearchViewElement_updateClearableState = function _M3eSearchViewElement_updateClearableState() {
   this._clearable = (__classPrivateFieldGet(this, _M3eSearchViewElement_input, "f")?.value ?? "").length > 0;
-  setCustomState(this, "-clearable", this._clearable);
+  setCustomState(this, "--clearable", this._clearable);
 };
 _M3eSearchViewElement_handleInputFocus = function _M3eSearchViewElement_handleInputFocus() {
   this.open = !__classPrivateFieldGet(this, _M3eSearchViewElement_closeOnInputFocus, "f");