@m3e/web 2.5.5 → 2.5.7

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

@@ -51,9 +51,10 @@ var M3eButtonSegmentElement_1;
  * @attr disabled - Whether the element is disabled.
  * @attr value - A string representing the value of the segment.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-segmented-button-height - Total height of the segmented button.
  * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.
@@ -157,19 +158,18 @@ _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleC
   if (e.defaultPrevented) return;
   const segmentedButton = this.closest("m3e-segmented-button");
   if (segmentedButton && (segmentedButton.multi || !this.checked)) {
-    const checked = this.checked;
-    this.checked = !this.checked;
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.checked = !this.checked;
       this.closest("m3e-segmented-button")?.[selectionManager].notifySelectionChange(this);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.checked = checked;
     }
   }
 };
@@ -221,8 +221,9 @@ var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_directional
  * @attr multi - Whether multiple options can be selected.
  * @attr name - The name that identifies the element when submitting the associated form.
  *
- * @fires input - Emitted when the checked state of a segment changes.
- * @fires change - Emitted when the checked state of a segment changes.
+ * @fires beforeinput - Dispatched before the checked state of a segment changes.
+ * @fires input - Dispatched when the checked state of a segment changes.
+ * @fires change - Dispatched when the checked state of a segment changes.
  *
  * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.
  * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.

package/dist/segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  setCustomState,\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 option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\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-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n  Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\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      position: relative;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      box-sizing: border-box;\r\n      border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n      border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n      border-style: solid;\r\n      border-radius: inherit;\r\n      border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n      padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n      column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper,\r\n    :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n    }\r\n    :host(:not(:disabled)[checked]) .base {\r\n      background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .label {\r\n      color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .icon {\r\n      color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .label {\r\n      color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .icon {\r\n      color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n      transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n    }\r\n    .check,\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not([checked])) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    :host([checked]) .icon {\r\n      margin-inline-start: 0;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n      display: none !important;\r\n    }\r\n    :host(:disabled) .base {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n      border-inline-end-color: var(\r\n        --_segmented-button-disabled-outline-color,\r\n        color-mix(\r\n          in srgb,\r\n          var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n            var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n          transparent\r\n        )\r\n      );\r\n    }\r\n    :host(:disabled) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .label,\r\n      :host(:not([selected]):not(:disabled)) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .base {\r\n        background-color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .label,\r\n      :host(:not(:disabled)[checked]) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n      :host {\r\n        --m3e-segmented-button-outline-color: ButtonText;\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  /**\r\n   * A string representing the value of the segment.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton) {\r\n      this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n    }\r\n\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\")) {\r\n      segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\")) {\r\n      if (this.disabled) {\r\n        if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (!this.nextElementSibling.disabled) {\r\n            this.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      } else {\r\n        this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n        if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (this.previousElementSibling.disabled) {\r\n            this.previousElementSibling.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n      const checked = this.checked;\r\n      this.checked = !this.checked;\r\n\r\n      if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n        this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      } else {\r\n        this.checked = checked;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-segment\": M3eButtonSegmentElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Labelled,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\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 { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires input - Emitted when the checked state of a segment changes.\r\n * @fires change - Emitted when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\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      vertical-align: middle;\r\n      align-items: center;\r\n    }\r\n    ::slotted(:is(:state(--first), :--first)) {\r\n      border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n      border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:is(:state(--last), :--last)) {\r\n      border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n      border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:not(:is(:state(--first), :--first))) {\r\n      --_segmented-button-left-border: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The segments of the button. */\r\n  get segments(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected segment(s) of the button. */\r\n  get selected(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the button. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this[selectionManager].multi = this.multi;\r\n    this[selectionManager].disableRovingTabIndex(this.multi);\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    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\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.segments.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\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-button-segment\")]);\r\n    added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    this[selectionManager].items.forEach((segment, i) => {\r\n      setCustomState(segment, \"--first\", i == 0);\r\n      setCustomState(segment, \"--last\", i == this[selectionManager].items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","e","__classPrivateFieldGet","call","value","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","setProperty","DesignToken","color","outline","removeProperty","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","get","undefined","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}
+{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  setCustomState,\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 option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n  Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\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      position: relative;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      box-sizing: border-box;\r\n      border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n      border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n      border-style: solid;\r\n      border-radius: inherit;\r\n      border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n      padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n      column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper,\r\n    :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n    }\r\n    :host(:not(:disabled)[checked]) .base {\r\n      background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .label {\r\n      color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .icon {\r\n      color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .label {\r\n      color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .icon {\r\n      color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n      transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n    }\r\n    .check,\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not([checked])) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    :host([checked]) .icon {\r\n      margin-inline-start: 0;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n      display: none !important;\r\n    }\r\n    :host(:disabled) .base {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n      border-inline-end-color: var(\r\n        --_segmented-button-disabled-outline-color,\r\n        color-mix(\r\n          in srgb,\r\n          var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n            var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n          transparent\r\n        )\r\n      );\r\n    }\r\n    :host(:disabled) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .label,\r\n      :host(:not([selected]):not(:disabled)) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .base {\r\n        background-color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .label,\r\n      :host(:not(:disabled)[checked]) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n      :host {\r\n        --m3e-segmented-button-outline-color: ButtonText;\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  /**\r\n   * A string representing the value of the segment.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton) {\r\n      this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n    }\r\n\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\")) {\r\n      segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\")) {\r\n      if (this.disabled) {\r\n        if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (!this.nextElementSibling.disabled) {\r\n            this.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      } else {\r\n        this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n        if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (this.previousElementSibling.disabled) {\r\n            this.previousElementSibling.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n      if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n        this.checked = !this.checked;\r\n        this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n\r\n        this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-segment\": M3eButtonSegmentElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Labelled,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\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 { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state of a segment changes.\r\n * @fires input - Dispatched when the checked state of a segment changes.\r\n * @fires change - Dispatched when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\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      vertical-align: middle;\r\n      align-items: center;\r\n    }\r\n    ::slotted(:is(:state(--first), :--first)) {\r\n      border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n      border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:is(:state(--last), :--last)) {\r\n      border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n      border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:not(:is(:state(--first), :--first))) {\r\n      --_segmented-button-left-border: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The segments of the button. */\r\n  get segments(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected segment(s) of the button. */\r\n  get selected(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the button. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this[selectionManager].multi = this.multi;\r\n    this[selectionManager].disableRovingTabIndex(this.multi);\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    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\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.segments.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\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-button-segment\")]);\r\n    added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    this[selectionManager].items.forEach((segment, i) => {\r\n      setCustomState(segment, \"--first\", i == 0);\r\n      setCustomState(segment, \"--last\", i == this[selectionManager].items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","e","__classPrivateFieldGet","call","value","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","setProperty","DesignToken","color","outline","removeProperty","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","get","undefined","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}

package/dist/segmented-button.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 t,__classPrivateFieldSet as o}from"tslib";import{LitElement as i,html as n,unsafeCSS as s,css as r}from"lit";import{query as l,property as a}from"lit/decorators.js";import{Dirty as d,Touched as c,Checked as h,Disabled as m,AttachInternals as u,Role as b,DesignToken as g,setCustomState as p,hasAssignedNodes as v,customElement as f,Labelled as y,FormAssociated as k,formValue as $}from"@m3e/web/core";import{selectionManager as w,SelectionManager as x}from"@m3e/web/core/a11y";import{M3eDirectionality as S}from"@m3e/web/core/bidi";var E,C,_,I,B;let P=B=class extends(d(c(h(m(u(b(i,"radio"),!0)))))){constructor(){super(...arguments),E.add(this),C.set(this,t=>e(this,E,"m",I).call(this,t)),this.value="on"}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,C,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,C,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){const t=this.closest("m3e-segmented-button");t&&(this.role=t.multi?"button":"radio"),super.update(e),e.has("checked")&&t?.[w].notifySelectionChange(this),e.has("disabled")&&(this.disabled?this.nextElementSibling instanceof B&&(this.nextElementSibling.disabled?this.style.removeProperty("--_segmented-button-disabled-outline-color"):this.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`)):(this.style.removeProperty("--_segmented-button-disabled-outline-color"),this.previousElementSibling instanceof B&&(this.previousElementSibling.disabled?this.previousElementSibling.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`):this.previousElementSibling.style.removeProperty("--_segmented-button-disabled-outline-color"))))}render(){return n`<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" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${e(this,E,"m",_)}"></slot></div><div class="label"><slot></slot></div></div></div>`}};var z,T,W,j,A,D;C=new WeakMap,E=new WeakSet,_=function(e){p(this,"--with-icon",v(e.target))},I=function(e){if(e.defaultPrevented)return;const t=this.closest("m3e-segmented-button");if(t&&(t.multi||!this.checked)){const e=this.checked;this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-segmented-button")?.[w].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=e}},P.styles=r`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${g.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${g.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${s(`background-color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${g.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${g.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${g.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper, :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${g.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${g.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${g.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${g.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${g.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${g.color.onSurface}); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${g.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`,t([l(".focus-ring")],P.prototype,"_focusRing",void 0),t([l(".state-layer")],P.prototype,"_stateLayer",void 0),t([l(".ripple")],P.prototype,"_ripple",void 0),t([a()],P.prototype,"value",void 0),P=B=t([f("m3e-button-segment")],P);let L=class extends(y(d(c(k(m(u(b(i,"radiogroup")))))))){constructor(){super(...arguments),z.add(this),T.set(this,void 0),this[D]=(new x).withWrap().withDirectionality(S.current).onActiveItemChange(()=>this[w].activeItem?.click()),this.multi=!1,this.hideSelectionIndicator=!1}get segments(){return this[w]?.items??[]}get selected(){return this[w]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(T=new WeakMap,z=new WeakSet,D=w,$)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const o of e)t.append(this.name,o);return t}return e}connectedCallback(){super.connectedCallback(),this[w].multi=this.multi,this[w].disableRovingTabIndex(this.multi),o(this,T,S.observe(()=>this[w].directionality=S.current),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,T,"f")?.call(this)}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[w].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",this[w].multi=this.multi,this[w].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.segments.forEach(e=>p(e,"--hide-selection",this.hideSelectionIndicator))}render(){return n`<slot @slotchange="${e(this,z,"m",W)}" @keydown="${e(this,z,"m",j)}" @change="${e(this,z,"m",A)}"></slot>`}};W=function(){const{added:e}=this[w].setItems([...this.querySelectorAll("m3e-button-segment")]);e.forEach(e=>p(e,"--hide-selection",this.hideSelectionIndicator)),this[w].items.forEach((e,t)=>{p(e,"--first",0==t),p(e,"--last",t==this[w].items.length-1)})},j=function(e){this.multi||this[w].onKeyDown(e)},A=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},L.styles=r`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:is(:state(--first), :--first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); } ::slotted(:is(:state(--last), :--last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); } ::slotted(:not(:is(:state(--first), :--first))) { --_segmented-button-left-border: none; }`,t([a({type:Boolean})],L.prototype,"multi",void 0),t([a({attribute:"hide-selection-indicator",type:Boolean})],L.prototype,"hideSelectionIndicator",void 0),L=t([f("m3e-segmented-button")],L);export{P as M3eButtonSegmentElement,L as M3eSegmentedButtonElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as o}from"tslib";import{LitElement as i,html as n,unsafeCSS as s,css as r}from"lit";import{query as l,property as a}from"lit/decorators.js";import{Dirty as d,Touched as c,Checked as h,Disabled as m,AttachInternals as u,Role as b,DesignToken as g,setCustomState as p,hasAssignedNodes as v,customElement as f,Labelled as y,FormAssociated as k,formValue as w}from"@m3e/web/core";import{selectionManager as $,SelectionManager as x}from"@m3e/web/core/a11y";import{M3eDirectionality as S}from"@m3e/web/core/bidi";var E,C,_,I,B;let P=B=class extends(d(c(h(m(u(b(i,"radio"),!0)))))){constructor(){super(...arguments),E.add(this),C.set(this,t=>e(this,E,"m",I).call(this,t)),this.value="on"}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,C,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,C,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){const t=this.closest("m3e-segmented-button");t&&(this.role=t.multi?"button":"radio"),super.update(e),e.has("checked")&&t?.[$].notifySelectionChange(this),e.has("disabled")&&(this.disabled?this.nextElementSibling instanceof B&&(this.nextElementSibling.disabled?this.style.removeProperty("--_segmented-button-disabled-outline-color"):this.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`)):(this.style.removeProperty("--_segmented-button-disabled-outline-color"),this.previousElementSibling instanceof B&&(this.previousElementSibling.disabled?this.previousElementSibling.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`):this.previousElementSibling.style.removeProperty("--_segmented-button-disabled-outline-color"))))}render(){return n`<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" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${e(this,E,"m",_)}"></slot></div><div class="label"><slot></slot></div></div></div>`}};var z,T,W,j,A,D;C=new WeakMap,E=new WeakSet,_=function(e){p(this,"--with-icon",v(e.target))},I=function(e){if(e.defaultPrevented)return;const t=this.closest("m3e-segmented-button");!t||!t.multi&&this.checked||this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.checked=!this.checked,this.closest("m3e-segmented-button")?.[$].notifySelectionChange(this),this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))},P.styles=r`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${g.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${g.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${s(`background-color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${g.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${g.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${g.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper, :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${g.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${g.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${g.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${g.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${g.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${g.color.onSurface}); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${g.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`,t([l(".focus-ring")],P.prototype,"_focusRing",void 0),t([l(".state-layer")],P.prototype,"_stateLayer",void 0),t([l(".ripple")],P.prototype,"_ripple",void 0),t([a()],P.prototype,"value",void 0),P=B=t([f("m3e-button-segment")],P);let L=class extends(y(d(c(k(m(u(b(i,"radiogroup")))))))){constructor(){super(...arguments),z.add(this),T.set(this,void 0),this[D]=(new x).withWrap().withDirectionality(S.current).onActiveItemChange(()=>this[$].activeItem?.click()),this.multi=!1,this.hideSelectionIndicator=!1}get segments(){return this[$]?.items??[]}get selected(){return this[$]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(T=new WeakMap,z=new WeakSet,D=$,w)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const o of e)t.append(this.name,o);return t}return e}connectedCallback(){super.connectedCallback(),this[$].multi=this.multi,this[$].disableRovingTabIndex(this.multi),o(this,T,S.observe(()=>this[$].directionality=S.current),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,T,"f")?.call(this)}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[$].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",this[$].multi=this.multi,this[$].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.segments.forEach(e=>p(e,"--hide-selection",this.hideSelectionIndicator))}render(){return n`<slot @slotchange="${e(this,z,"m",W)}" @keydown="${e(this,z,"m",j)}" @change="${e(this,z,"m",A)}"></slot>`}};W=function(){const{added:e}=this[$].setItems([...this.querySelectorAll("m3e-button-segment")]);e.forEach(e=>p(e,"--hide-selection",this.hideSelectionIndicator)),this[$].items.forEach((e,t)=>{p(e,"--first",0==t),p(e,"--last",t==this[$].items.length-1)})},j=function(e){this.multi||this[$].onKeyDown(e)},A=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},L.styles=r`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:is(:state(--first), :--first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); } ::slotted(:is(:state(--last), :--last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); } ::slotted(:not(:is(:state(--first), :--first))) { --_segmented-button-left-border: none; }`,t([a({type:Boolean})],L.prototype,"multi",void 0),t([a({attribute:"hide-selection-indicator",type:Boolean})],L.prototype,"hideSelectionIndicator",void 0),L=t([f("m3e-segmented-button")],L);export{P as M3eButtonSegmentElement,L as M3eSegmentedButtonElement};
 //# sourceMappingURL=segmented-button.min.js.map