@m3e/web 2.5.10 → 2.5.12

package/dist/checkbox.js

@@ -157,6 +157,11 @@ _M3eCheckboxElement_renderIcon = function _M3eCheckboxElement_renderIcon() {
 };
 _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   if (e.defaultPrevented) return;
+  if (this.disabled) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    return;
+  }
   if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
     cancelable: true

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/CheckboxElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  CheckedIndeterminate,\r\n  ConstraintValidation,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  KeyboardClick,\r\n  Focusable,\r\n  HoverController,\r\n  PressedController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A checkbox that allows a user to select one or more options from a limited number of choices.\r\n *\r\n * @description\r\n * The `m3e-checkbox` component enables users to select one or more options from a set. It supports selected,\r\n * unselected, and indeterminate states, and communicates selection through visual cues and accessible semantics.\r\n * This component reflects user intent, form participation, and validation feedback, adapting to disabled and\r\n * required contexts. It emits `input` and `change` events to signal state transitions and integrates with form\r\n * submission via `name` and `value`.\r\n *\r\n * @example\r\n * The following example illustrates wrapping a `m3e-checkbox` within a `label`.\r\n * ```html\r\n * <label>\r\n *  <m3e-checkbox></m3e-checkbox>\r\n *  Checkbox label\r\n * </label>\r\n * ```\r\n * @example\r\n * The next example illustrates use of the `for` attribute to label a checkbox.\r\n * ```html\r\n * <m3e-checkbox id=\"chk\"></m3e-checkbox>\r\n * <label for=\"chk\">Checkbox label </label>\r\n * ```\r\n *\r\n * @tag m3e-checkbox\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr indeterminate - Whether the element's checked state is indeterminate.\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 checkbox.\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 invalid - Dispatched when a form is submitted and the element fails constraint validation.\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-checkbox-icon-size - Size of the checkbox icon inside the container.\r\n * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.\r\n * @cssprop --m3e-checkbox-container-shape - Border radius of the icon container.\r\n * @cssprop --m3e-checkbox-unselected-outline-thickness - Border thickness for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-outline-color - Border color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-hover-outline-color - Border color on hover when unselected.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Base color for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Opacity for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-error-outline-color - Border color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-container-color - Background color for selected container.\r\n * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-color - Base color for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Opacity for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-color - Base color for disabled selected icon.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Opacity for disabled selected icon.\r\n * @cssprop --m3e-checkbox-unselected-hover-color - Ripple hover color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-focus-color - Ripple focus color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-ripple-color - Ripple base color for unselected state.\r\n * @cssprop --m3e-checkbox-selected-hover-color - Ripple hover color for selected state.\r\n * @cssprop --m3e-checkbox-selected-focus-color - Ripple focus color for selected state.\r\n * @cssprop --m3e-checkbox-selected-ripple-color - Ripple base color for selected state.\r\n * @cssprop --m3e-checkbox-unselected-error-hover-color - Ripple hover color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-focus-color - Ripple focus color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-ripple-color - Ripple base color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-error-hover-color - Ripple hover color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-focus-color - Ripple focus color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-ripple-color - Ripple base color for invalid selected state.\r\n */\r\n@customElement(\"m3e-checkbox\")\r\nexport class M3eCheckboxElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(\r\n          ConstraintValidation(\r\n            CheckedIndeterminate(\r\n              FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"checkbox\")))), false)),\r\n            ),\r\n          ),\r\n        ),\r\n      ),\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-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-checkbox-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-checkbox-icon-size, 1.125rem);\r\n      height: var(--m3e-checkbox-icon-size, 1.125rem);\r\n      border-radius: var(--m3e-checkbox-container-shape, 0.125rem);\r\n    }\r\n    :host(:not([checked]):not([indeterminate])) .wrapper {\r\n      border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px);\r\n      border-style: solid;\r\n    }\r\n    :host(\r\n        :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]\r\n      )\r\n      .wrapper,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(\r\n            :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n          )[indeterminate]\r\n      )\r\n      .wrapper {\r\n      background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):not(:hover)\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):hover\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n    :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-selected-disabled-container-opacity, 38%),\r\n        transparent\r\n      );\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface})\r\n          var(--m3e-checkbox-selected-disabled-icon-opacity, 100%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n      .base,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate]\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(\r\n          :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n        )\r\n        .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n        --m3e-state-layer-hover-color: CanvasText;\r\n        --m3e-state-layer-focus-color: CanvasText;\r\n        --m3e-ripple-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):not(:hover)\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):hover\r\n        )\r\n        .wrapper {\r\n        border-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[checked]\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[indeterminate]\r\n        )\r\n        .wrapper {\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n        border-color: GrayText;\r\n      }\r\n      :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n      :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n        background-color: GrayText;\r\n        color: Canvas;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .wrapper {\r\n        border-color: Highlight;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .base,\r\n      :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n        .base,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(\r\n              :state(--invalid),\r\n              :--invalid\r\n            )[indeterminate]\r\n        )\r\n        .base {\r\n        --m3e-state-layer-hover-color: Highlight;\r\n        --m3e-state-layer-focus-color: Highlight;\r\n        --m3e-ripple-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 checkbox.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled && !this.indeterminate ? 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    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    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 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    if (this.indeterminate) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path Required d=\"M240-440v-80h480v80H240Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    if (this.checked) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    return nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n      this.indeterminate = false;\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\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-checkbox\": M3eCheckboxElement;\r\n  }\r\n}\r\n"],"names":["M3eCheckboxElement","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","CheckedIndeterminate","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eCheckboxElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eCheckboxElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eCheckboxElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eCheckboxElement_instances","WeakSet","formValue","checked","indeterminate","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eCheckboxElement_renderIcon","nothing","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","styles","css","DesignToken","density","calc","color","onSurface","primary","onPrimary","onSurfaceVariant","surface","error","onError","__decorate","query","prototype","property","customElement"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/CheckboxElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  CheckedIndeterminate,\r\n  ConstraintValidation,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  KeyboardClick,\r\n  Focusable,\r\n  HoverController,\r\n  PressedController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A checkbox that allows a user to select one or more options from a limited number of choices.\r\n *\r\n * @description\r\n * The `m3e-checkbox` component enables users to select one or more options from a set. It supports selected,\r\n * unselected, and indeterminate states, and communicates selection through visual cues and accessible semantics.\r\n * This component reflects user intent, form participation, and validation feedback, adapting to disabled and\r\n * required contexts. It emits `input` and `change` events to signal state transitions and integrates with form\r\n * submission via `name` and `value`.\r\n *\r\n * @example\r\n * The following example illustrates wrapping a `m3e-checkbox` within a `label`.\r\n * ```html\r\n * <label>\r\n *  <m3e-checkbox></m3e-checkbox>\r\n *  Checkbox label\r\n * </label>\r\n * ```\r\n * @example\r\n * The next example illustrates use of the `for` attribute to label a checkbox.\r\n * ```html\r\n * <m3e-checkbox id=\"chk\"></m3e-checkbox>\r\n * <label for=\"chk\">Checkbox label </label>\r\n * ```\r\n *\r\n * @tag m3e-checkbox\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr indeterminate - Whether the element's checked state is indeterminate.\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 checkbox.\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 invalid - Dispatched when a form is submitted and the element fails constraint validation.\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-checkbox-icon-size - Size of the checkbox icon inside the container.\r\n * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.\r\n * @cssprop --m3e-checkbox-container-shape - Border radius of the icon container.\r\n * @cssprop --m3e-checkbox-unselected-outline-thickness - Border thickness for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-outline-color - Border color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-hover-outline-color - Border color on hover when unselected.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Base color for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Opacity for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-error-outline-color - Border color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-container-color - Background color for selected container.\r\n * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-color - Base color for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Opacity for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-color - Base color for disabled selected icon.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Opacity for disabled selected icon.\r\n * @cssprop --m3e-checkbox-unselected-hover-color - Ripple hover color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-focus-color - Ripple focus color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-ripple-color - Ripple base color for unselected state.\r\n * @cssprop --m3e-checkbox-selected-hover-color - Ripple hover color for selected state.\r\n * @cssprop --m3e-checkbox-selected-focus-color - Ripple focus color for selected state.\r\n * @cssprop --m3e-checkbox-selected-ripple-color - Ripple base color for selected state.\r\n * @cssprop --m3e-checkbox-unselected-error-hover-color - Ripple hover color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-focus-color - Ripple focus color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-ripple-color - Ripple base color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-error-hover-color - Ripple hover color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-focus-color - Ripple focus color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-ripple-color - Ripple base color for invalid selected state.\r\n */\r\n@customElement(\"m3e-checkbox\")\r\nexport class M3eCheckboxElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(\r\n          ConstraintValidation(\r\n            CheckedIndeterminate(\r\n              FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"checkbox\")))), false)),\r\n            ),\r\n          ),\r\n        ),\r\n      ),\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-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-checkbox-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-checkbox-icon-size, 1.125rem);\r\n      height: var(--m3e-checkbox-icon-size, 1.125rem);\r\n      border-radius: var(--m3e-checkbox-container-shape, 0.125rem);\r\n    }\r\n    :host(:not([checked]):not([indeterminate])) .wrapper {\r\n      border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px);\r\n      border-style: solid;\r\n    }\r\n    :host(\r\n        :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]\r\n      )\r\n      .wrapper,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(\r\n            :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n          )[indeterminate]\r\n      )\r\n      .wrapper {\r\n      background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):not(:hover)\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):hover\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n    :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-selected-disabled-container-opacity, 38%),\r\n        transparent\r\n      );\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface})\r\n          var(--m3e-checkbox-selected-disabled-icon-opacity, 100%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n      .base,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate]\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(\r\n          :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n        )\r\n        .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n        --m3e-state-layer-hover-color: CanvasText;\r\n        --m3e-state-layer-focus-color: CanvasText;\r\n        --m3e-ripple-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):not(:hover)\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):hover\r\n        )\r\n        .wrapper {\r\n        border-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[checked]\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[indeterminate]\r\n        )\r\n        .wrapper {\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n        border-color: GrayText;\r\n      }\r\n      :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n      :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n        background-color: GrayText;\r\n        color: Canvas;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .wrapper {\r\n        border-color: Highlight;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .base,\r\n      :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n        .base,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(\r\n              :state(--invalid),\r\n              :--invalid\r\n            )[indeterminate]\r\n        )\r\n        .base {\r\n        --m3e-state-layer-hover-color: Highlight;\r\n        --m3e-state-layer-focus-color: Highlight;\r\n        --m3e-ripple-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 checkbox.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled && !this.indeterminate ? 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    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    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 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    if (this.indeterminate) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path Required d=\"M240-440v-80h480v80H240Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    if (this.checked) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    return nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n      return;\r\n    }\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n      this.indeterminate = false;\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\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-checkbox\": M3eCheckboxElement;\r\n  }\r\n}\r\n"],"names":["M3eCheckboxElement","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","CheckedIndeterminate","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eCheckboxElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eCheckboxElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eCheckboxElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eCheckboxElement_instances","WeakSet","formValue","checked","indeterminate","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eCheckboxElement_renderIcon","nothing","defaultPrevented","preventDefault","stopImmediatePropagation","dispatchEvent","Event","bubbles","cancelable","closest","styles","css","DesignToken","density","calc","color","onSurface","primary","onPrimary","onSurfaceVariant","surface","error","onError","__decorate","query","prototype","property","customElement"],"mappings":"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"}

package/dist/checkbox.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}from"tslib";import{LitElement as o,html as r,nothing as i,css as a}from"lit";import{query as s,property as c}from"lit/decorators.js";import{Labelled as d,RequiredConstraintValidation as n,Dirty as l,Touched as h,Required as u,ConstraintValidation as v,CheckedIndeterminate as b,FormAssociated as p,KeyboardClick as m,Focusable as k,Disabled as f,AttachInternals as x,Role as g,HoverController as y,PressedController as w,formValue as $,DesignToken as C,customElement as E}from"@m3e/web/core";var _,S,T,z,L,H;let M=class extends(d(n(l(h(u(v(b(p(m(k(f(x(g(o,"checkbox")))),!1)))))))))){constructor(){super(...arguments),_.add(this),S.set(this,t=>e(this,_,"m",H).call(this,t)),T.set(this,new y(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),z.set(this,new w(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(S=new WeakMap,T=new WeakMap,z=new WeakMap,_=new WeakSet,$)](){return!this.checked||this.disabled||this.indeterminate?null:this.value}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").observe(t),e(this,z,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").unobserve(t),e(this,z,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return r`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${e(this,_,"m",L).call(this)}</div></div>`}};L=function(){return this.indeterminate?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path Required d="M240-440v-80h480v80H240Z"/></svg>`:this.checked?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>`:i},H=function(e){e.defaultPrevented||(this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))),this.closest("label")&&e.preventDefault())},M.styles=a`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${C.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${C.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${C.color.onSurface}); } :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${C.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${C.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${C.color.primary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${C.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${C.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${C.color.onSurfaceVariant}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${C.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${C.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${C.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${C.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${C.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${C.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${C.color.error}); } :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate] ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${C.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${C.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${C.color.onError}); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${C.color.error}); } @media (forced-colors: active) { :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper, :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: Highlight; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base, :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is( :state(--invalid), :--invalid )[indeterminate] ) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,t([s(".focus-ring")],M.prototype,"_focusRing",void 0),t([s(".state-layer")],M.prototype,"_stateLayer",void 0),t([s(".ripple")],M.prototype,"_ripple",void 0),t([c()],M.prototype,"value",void 0),M=t([E("m3e-checkbox")],M);export{M as M3eCheckboxElement};
+import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as o,html as r,nothing as i,css as a}from"lit";import{query as s,property as c}from"lit/decorators.js";import{Labelled as d,RequiredConstraintValidation as n,Dirty as l,Touched as h,Required as u,ConstraintValidation as v,CheckedIndeterminate as b,FormAssociated as p,KeyboardClick as m,Focusable as k,Disabled as f,AttachInternals as x,Role as g,HoverController as y,PressedController as w,formValue as $,DesignToken as C,customElement as E}from"@m3e/web/core";var _,S,T,z,L,H;let M=class extends(d(n(l(h(u(v(b(p(m(k(f(x(g(o,"checkbox")))),!1)))))))))){constructor(){super(...arguments),_.add(this),S.set(this,t=>e(this,_,"m",H).call(this,t)),T.set(this,new y(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),z.set(this,new w(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(S=new WeakMap,T=new WeakMap,z=new WeakMap,_=new WeakSet,$)](){return!this.checked||this.disabled||this.indeterminate?null:this.value}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").observe(t),e(this,z,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").unobserve(t),e(this,z,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return r`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${e(this,_,"m",L).call(this)}</div></div>`}};L=function(){return this.indeterminate?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path Required d="M240-440v-80h480v80H240Z"/></svg>`:this.checked?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>`:i},H=function(e){if(!e.defaultPrevented){if(this.disabled)return e.preventDefault(),void e.stopImmediatePropagation();this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))),this.closest("label")&&e.preventDefault()}},M.styles=a`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${C.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${C.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${C.color.onSurface}); } :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${C.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${C.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${C.color.primary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${C.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${C.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${C.color.onSurfaceVariant}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${C.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${C.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${C.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${C.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${C.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${C.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${C.color.error}); } :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate] ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${C.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${C.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${C.color.onError}); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${C.color.error}); } @media (forced-colors: active) { :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper, :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: Highlight; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base, :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is( :state(--invalid), :--invalid )[indeterminate] ) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,t([s(".focus-ring")],M.prototype,"_focusRing",void 0),t([s(".state-layer")],M.prototype,"_stateLayer",void 0),t([s(".ripple")],M.prototype,"_ripple",void 0),t([c()],M.prototype,"value",void 0),M=t([E("m3e-checkbox")],M);export{M as M3eCheckboxElement};
 //# sourceMappingURL=checkbox.min.js.map

package/dist/checkbox.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.min.js","sources":["../../src/checkbox/CheckboxElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  CheckedIndeterminate,\r\n  ConstraintValidation,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  KeyboardClick,\r\n  Focusable,\r\n  HoverController,\r\n  PressedController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A checkbox that allows a user to select one or more options from a limited number of choices.\r\n *\r\n * @description\r\n * The `m3e-checkbox` component enables users to select one or more options from a set. It supports selected,\r\n * unselected, and indeterminate states, and communicates selection through visual cues and accessible semantics.\r\n * This component reflects user intent, form participation, and validation feedback, adapting to disabled and\r\n * required contexts. It emits `input` and `change` events to signal state transitions and integrates with form\r\n * submission via `name` and `value`.\r\n *\r\n * @example\r\n * The following example illustrates wrapping a `m3e-checkbox` within a `label`.\r\n * ```html\r\n * <label>\r\n *  <m3e-checkbox></m3e-checkbox>\r\n *  Checkbox label\r\n * </label>\r\n * ```\r\n * @example\r\n * The next example illustrates use of the `for` attribute to label a checkbox.\r\n * ```html\r\n * <m3e-checkbox id=\"chk\"></m3e-checkbox>\r\n * <label for=\"chk\">Checkbox label </label>\r\n * ```\r\n *\r\n * @tag m3e-checkbox\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr indeterminate - Whether the element's checked state is indeterminate.\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 checkbox.\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 invalid - Dispatched when a form is submitted and the element fails constraint validation.\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-checkbox-icon-size - Size of the checkbox icon inside the container.\r\n * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.\r\n * @cssprop --m3e-checkbox-container-shape - Border radius of the icon container.\r\n * @cssprop --m3e-checkbox-unselected-outline-thickness - Border thickness for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-outline-color - Border color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-hover-outline-color - Border color on hover when unselected.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Base color for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Opacity for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-error-outline-color - Border color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-container-color - Background color for selected container.\r\n * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-color - Base color for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Opacity for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-color - Base color for disabled selected icon.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Opacity for disabled selected icon.\r\n * @cssprop --m3e-checkbox-unselected-hover-color - Ripple hover color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-focus-color - Ripple focus color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-ripple-color - Ripple base color for unselected state.\r\n * @cssprop --m3e-checkbox-selected-hover-color - Ripple hover color for selected state.\r\n * @cssprop --m3e-checkbox-selected-focus-color - Ripple focus color for selected state.\r\n * @cssprop --m3e-checkbox-selected-ripple-color - Ripple base color for selected state.\r\n * @cssprop --m3e-checkbox-unselected-error-hover-color - Ripple hover color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-focus-color - Ripple focus color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-ripple-color - Ripple base color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-error-hover-color - Ripple hover color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-focus-color - Ripple focus color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-ripple-color - Ripple base color for invalid selected state.\r\n */\r\n@customElement(\"m3e-checkbox\")\r\nexport class M3eCheckboxElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(\r\n          ConstraintValidation(\r\n            CheckedIndeterminate(\r\n              FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"checkbox\")))), false)),\r\n            ),\r\n          ),\r\n        ),\r\n      ),\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-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-checkbox-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-checkbox-icon-size, 1.125rem);\r\n      height: var(--m3e-checkbox-icon-size, 1.125rem);\r\n      border-radius: var(--m3e-checkbox-container-shape, 0.125rem);\r\n    }\r\n    :host(:not([checked]):not([indeterminate])) .wrapper {\r\n      border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px);\r\n      border-style: solid;\r\n    }\r\n    :host(\r\n        :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]\r\n      )\r\n      .wrapper,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(\r\n            :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n          )[indeterminate]\r\n      )\r\n      .wrapper {\r\n      background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):not(:hover)\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):hover\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n    :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-selected-disabled-container-opacity, 38%),\r\n        transparent\r\n      );\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface})\r\n          var(--m3e-checkbox-selected-disabled-icon-opacity, 100%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n      .base,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate]\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(\r\n          :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n        )\r\n        .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n        --m3e-state-layer-hover-color: CanvasText;\r\n        --m3e-state-layer-focus-color: CanvasText;\r\n        --m3e-ripple-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):not(:hover)\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):hover\r\n        )\r\n        .wrapper {\r\n        border-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[checked]\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[indeterminate]\r\n        )\r\n        .wrapper {\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n        border-color: GrayText;\r\n      }\r\n      :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n      :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n        background-color: GrayText;\r\n        color: Canvas;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .wrapper {\r\n        border-color: Highlight;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .base,\r\n      :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n        .base,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(\r\n              :state(--invalid),\r\n              :--invalid\r\n            )[indeterminate]\r\n        )\r\n        .base {\r\n        --m3e-state-layer-hover-color: Highlight;\r\n        --m3e-state-layer-focus-color: Highlight;\r\n        --m3e-ripple-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 checkbox.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled && !this.indeterminate ? 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    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    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 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    if (this.indeterminate) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path Required d=\"M240-440v-80h480v80H240Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    if (this.checked) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    return nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n      this.indeterminate = false;\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\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-checkbox\": M3eCheckboxElement;\r\n  }\r\n}\r\n"],"names":["M3eCheckboxElement","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","CheckedIndeterminate","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eCheckboxElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eCheckboxElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eCheckboxElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eCheckboxElement_instances","WeakSet","formValue","checked","indeterminate","connectedCallback","super","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eCheckboxElement_renderIcon","nothing","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","styles","css","DesignToken","density","calc","color","onSurface","primary","onPrimary","onSurfaceVariant","surface","error","onError","__decorate","query","prototype","property","customElement"],"mappings":"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"}
+{"version":3,"file":"checkbox.min.js","sources":["../../src/checkbox/CheckboxElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  CheckedIndeterminate,\r\n  ConstraintValidation,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  KeyboardClick,\r\n  Focusable,\r\n  HoverController,\r\n  PressedController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A checkbox that allows a user to select one or more options from a limited number of choices.\r\n *\r\n * @description\r\n * The `m3e-checkbox` component enables users to select one or more options from a set. It supports selected,\r\n * unselected, and indeterminate states, and communicates selection through visual cues and accessible semantics.\r\n * This component reflects user intent, form participation, and validation feedback, adapting to disabled and\r\n * required contexts. It emits `input` and `change` events to signal state transitions and integrates with form\r\n * submission via `name` and `value`.\r\n *\r\n * @example\r\n * The following example illustrates wrapping a `m3e-checkbox` within a `label`.\r\n * ```html\r\n * <label>\r\n *  <m3e-checkbox></m3e-checkbox>\r\n *  Checkbox label\r\n * </label>\r\n * ```\r\n * @example\r\n * The next example illustrates use of the `for` attribute to label a checkbox.\r\n * ```html\r\n * <m3e-checkbox id=\"chk\"></m3e-checkbox>\r\n * <label for=\"chk\">Checkbox label </label>\r\n * ```\r\n *\r\n * @tag m3e-checkbox\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr indeterminate - Whether the element's checked state is indeterminate.\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 checkbox.\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 invalid - Dispatched when a form is submitted and the element fails constraint validation.\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-checkbox-icon-size - Size of the checkbox icon inside the container.\r\n * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.\r\n * @cssprop --m3e-checkbox-container-shape - Border radius of the icon container.\r\n * @cssprop --m3e-checkbox-unselected-outline-thickness - Border thickness for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-outline-color - Border color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-hover-outline-color - Border color on hover when unselected.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Base color for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Opacity for disabled unselected outline.\r\n * @cssprop --m3e-checkbox-unselected-error-outline-color - Border color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-container-color - Background color for selected container.\r\n * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-color - Base color for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Opacity for disabled selected container.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-color - Base color for disabled selected icon.\r\n * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Opacity for disabled selected icon.\r\n * @cssprop --m3e-checkbox-unselected-hover-color - Ripple hover color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-focus-color - Ripple focus color for unselected state.\r\n * @cssprop --m3e-checkbox-unselected-ripple-color - Ripple base color for unselected state.\r\n * @cssprop --m3e-checkbox-selected-hover-color - Ripple hover color for selected state.\r\n * @cssprop --m3e-checkbox-selected-focus-color - Ripple focus color for selected state.\r\n * @cssprop --m3e-checkbox-selected-ripple-color - Ripple base color for selected state.\r\n * @cssprop --m3e-checkbox-unselected-error-hover-color - Ripple hover color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-focus-color - Ripple focus color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-unselected-error-ripple-color - Ripple base color for invalid unselected state.\r\n * @cssprop --m3e-checkbox-selected-error-hover-color - Ripple hover color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-focus-color - Ripple focus color for invalid selected state.\r\n * @cssprop --m3e-checkbox-selected-error-ripple-color - Ripple base color for invalid selected state.\r\n */\r\n@customElement(\"m3e-checkbox\")\r\nexport class M3eCheckboxElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(\r\n          ConstraintValidation(\r\n            CheckedIndeterminate(\r\n              FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"checkbox\")))), false)),\r\n            ),\r\n          ),\r\n        ),\r\n      ),\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-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-checkbox-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-checkbox-icon-size, 1.125rem);\r\n      height: var(--m3e-checkbox-icon-size, 1.125rem);\r\n      border-radius: var(--m3e-checkbox-container-shape, 0.125rem);\r\n    }\r\n    :host(:not([checked]):not([indeterminate])) .wrapper {\r\n      border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px);\r\n      border-style: solid;\r\n    }\r\n    :host(\r\n        :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n    :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]\r\n      )\r\n      .wrapper,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(\r\n            :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n          )[indeterminate]\r\n      )\r\n      .wrapper {\r\n      background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):not(:hover)\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n            [checked]\r\n          ):not([indeterminate]):hover\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n    :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-checkbox-selected-disabled-container-opacity, 38%),\r\n        transparent\r\n      );\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface})\r\n          var(--m3e-checkbox-selected-disabled-icon-opacity, 100%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n      .base,\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate]\r\n      )\r\n      .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError});\r\n      --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError});\r\n      --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError});\r\n    }\r\n    :host(\r\n        :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n            [checked]\r\n          ):not([indeterminate])\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(\r\n          :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked])\r\n        )\r\n        .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base,\r\n      :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base {\r\n        --m3e-state-layer-hover-color: CanvasText;\r\n        --m3e-state-layer-focus-color: CanvasText;\r\n        --m3e-ripple-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):not(:hover)\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not(\r\n              [checked]\r\n            ):not([indeterminate]):hover\r\n        )\r\n        .wrapper {\r\n        border-color: CanvasText;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[checked]\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(\r\n              :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)\r\n            )[indeterminate]\r\n        )\r\n        .wrapper {\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host([aria-disabled=\"true\"]:not([checked]):not([indeterminate])) .wrapper {\r\n        border-color: GrayText;\r\n      }\r\n      :host([aria-disabled=\"true\"][checked]) .wrapper,\r\n      :host([aria-disabled=\"true\"][indeterminate]) .wrapper {\r\n        background-color: GrayText;\r\n        color: Canvas;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .wrapper {\r\n        border-color: Highlight;\r\n      }\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not(\r\n              [checked]\r\n            ):not([indeterminate])\r\n        )\r\n        .base,\r\n      :host(:not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked])\r\n        .base,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):is(:state(--touched), :--touched):is(\r\n              :state(--invalid),\r\n              :--invalid\r\n            )[indeterminate]\r\n        )\r\n        .base {\r\n        --m3e-state-layer-hover-color: Highlight;\r\n        --m3e-state-layer-focus-color: Highlight;\r\n        --m3e-ripple-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 checkbox.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled && !this.indeterminate ? 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    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    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 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    if (this.indeterminate) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path Required d=\"M240-440v-80h480v80H240Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    if (this.checked) {\r\n      return html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n      </svg>`;\r\n    }\r\n\r\n    return nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n      return;\r\n    }\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n      this.indeterminate = false;\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\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-checkbox\": M3eCheckboxElement;\r\n  }\r\n}\r\n"],"names":["M3eCheckboxElement","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","CheckedIndeterminate","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eCheckboxElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eCheckboxElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eCheckboxElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eCheckboxElement_instances","WeakSet","formValue","checked","indeterminate","connectedCallback","super","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eCheckboxElement_renderIcon","nothing","defaultPrevented","preventDefault","stopImmediatePropagation","dispatchEvent","Event","bubbles","cancelable","closest","styles","css","DesignToken","density","calc","color","onSurface","primary","onPrimary","onSurfaceVariant","surface","error","onError","__decorate","query","prototype","property","customElement"],"mappings":"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"}

package/dist/chips.js

@@ -132,7 +132,7 @@ _M3eChipElement_handleSlotChange = function _M3eChipElement_handleSlotChange(e)
   __classPrivateFieldSet(this, _M3eChipElement_textContent, getTextContent(e.target), "f");
 };
 /** The styles of the element. */
-M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:is(:state(--with-icon), :--with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:is(:state(--with-trailing-icon), :--with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:is(:state(--with-trailing-icon), :--with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
+M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-3)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:is(:state(--with-icon), :--with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:is(:state(--with-trailing-icon), :--with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:is(:state(--with-trailing-icon), :--with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
 __decorate([query(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
 __decorate([query(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
@@ -689,7 +689,7 @@ _M3eInputChipElement_handleKeyDown = function _M3eInputChipElement_handleKeyDown
 /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
 M3eInputChipElement.formAssociated = true;
 /** The styles of the element. */
-M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}); } :host(:is(:state(--with-avatar), :--with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:is(:state(--with-avatar), :--with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
+M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-3)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}); } :host(:is(:state(--with-avatar), :--with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:is(:state(--with-avatar), :--with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
 __decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
 __decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([property({