@m3e/web 2.5.4 → 2.5.6

package/dist/checkbox.js

@@ -43,10 +43,11 @@ var _M3eCheckboxElement_instances, _M3eCheckboxElement_clickHandler, _M3eCheckbo
  * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the checkbox.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires invalid - Emitted when a form is submitted and the element fails constraint validation.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires invalid - Dispatched when a form is submitted and the element fails constraint validation.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon inside the container.
  * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.
@@ -156,18 +157,18 @@ _M3eCheckboxElement_renderIcon = function _M3eCheckboxElement_renderIcon() {
 };
 _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.checked = !this.checked;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = !this.checked;
     this.indeterminate = false;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = !this.checked;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -175,7 +176,7 @@ _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-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(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.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, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base, :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper, :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-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"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
+M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-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, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.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, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.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, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.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, ${DesignToken.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, ${DesignToken.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.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, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.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, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.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, ${DesignToken.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.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, ${DesignToken.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; } }`;
 __decorate([query(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);

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 input - Emitted when the checked state changes.\r\n * @fires invalid - Emitted when a form is submitted and the element fails constraint validation.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-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(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .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(:state(-touched):state(-invalid))[checked]) .base,\r\n    :host(:not(:state(-touched):state(-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(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[checked]) .wrapper,\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[indeterminate]) .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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not(\r\n            :hover\r\n          )\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover)\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(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .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\"]):state(-touched):state(-invalid)[checked]) .base,\r\n    :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid)[indeterminate]) .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(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .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(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base,\r\n      :host(:not(:state(-touched):state(-invalid))[checked]) .base,\r\n      :host(:not(:state(-touched):state(-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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not(\r\n              :hover\r\n            )\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover\r\n        )\r\n        .wrapper {\r\n        border-color: CanvasText;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[checked]) .wrapper,\r\n      :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[indeterminate]) .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(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper {\r\n        border-color: Highlight;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base,\r\n      :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid)[checked]) .base,\r\n      :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid)[indeterminate]) .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    this.checked = !this.checked;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.indeterminate = false;\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.checked = !this.checked;\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","composed","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.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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"}

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 a,css as i}from"lit";import{query as c,property as s}from"lit/decorators.js";import{Labelled as l,RequiredConstraintValidation as n,Dirty as d,Touched as h,Required as b,ConstraintValidation as u,CheckedIndeterminate as p,FormAssociated as v,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(l(n(d(h(b(u(p(v(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>`:a},H=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.indeterminate=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=!this.checked,this.closest("label")&&e.preventDefault())},M.styles=i`: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(:state(-touched):state(-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(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-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(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-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(:state(-touched):state(-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(:state(-touched):state(-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"]):state(-touched):state(-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"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-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"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${C.color.error}); } @media (forced-colors: active) { :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base, :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper, :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-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"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,t([c(".focus-ring")],M.prototype,"_focusRing",void 0),t([c(".state-layer")],M.prototype,"_stateLayer",void 0),t([c(".ripple")],M.prototype,"_ripple",void 0),t([s()],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){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};
 //# 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 input - Emitted when the checked state changes.\r\n * @fires invalid - Emitted when a form is submitted and the element fails constraint validation.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-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(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .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(:state(-touched):state(-invalid))[checked]) .base,\r\n    :host(:not(:state(-touched):state(-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(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[checked]) .wrapper,\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[indeterminate]) .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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not(\r\n            :hover\r\n          )\r\n      )\r\n      .wrapper {\r\n      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover)\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(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .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\"]):state(-touched):state(-invalid)[checked]) .base,\r\n    :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid)[indeterminate]) .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(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .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(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base,\r\n      :host(:not(:state(-touched):state(-invalid))[checked]) .base,\r\n      :host(:not(:state(-touched):state(-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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not(\r\n              :hover\r\n            )\r\n        )\r\n        .wrapper,\r\n      :host(\r\n          :not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover\r\n        )\r\n        .wrapper {\r\n        border-color: CanvasText;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[checked]) .wrapper,\r\n      :host(:not([aria-disabled=\"true\"]):not(:state(-touched):state(-invalid))[indeterminate]) .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(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper {\r\n        border-color: Highlight;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base,\r\n      :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid)[checked]) .base,\r\n      :host(:not([aria-disabled=\"true\"]):state(-touched):state(-invalid)[indeterminate]) .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    this.checked = !this.checked;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.indeterminate = false;\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.checked = !this.checked;\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","composed","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.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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"}

package/dist/chips.js

@@ -123,16 +123,16 @@ _M3eChipElement_renderContent = function _M3eChipElement_renderContent() {
   return html`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`;
 };
 _M3eChipElement_handleIconSlotChange = function _M3eChipElement_handleIconSlotChange(e) {
-  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-icon", hasAssignedNodes(e.target));
 };
 _M3eChipElement_handleTrailingIconSlotChange = function _M3eChipElement_handleTrailingIconSlotChange(e) {
-  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-trailing-icon", hasAssignedNodes(e.target));
 };
 _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(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:state(-with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:state(-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:state(-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(-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; } }`;
 __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);
@@ -182,7 +182,7 @@ M3eChipElement = __decorate([customElement("m3e-chip")], M3eChipElement);
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -295,9 +295,10 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -376,25 +377,24 @@ _M3eFilterChipElement_clickHandler = new WeakMap();
 _M3eFilterChipElement_instances = new WeakSet();
 _M3eFilterChipElement_handleClick = function _M3eFilterChipElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  const selected = this.selected;
-  this.selected = !this.selected;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = !this.selected;
     this.closest("m3e-filter-chip-set")?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = selected;
   }
 };
 /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
 M3eFilterChipElement.formAssociated = true;
 /** The styles of the element. */
-M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(:state(-hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:state(-with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :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])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
+M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :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])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
 M3eFilterChipElement = __decorate([customElement("m3e-filter-chip")], M3eFilterChipElement);
 
 var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalitySubscription, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a;
@@ -430,8 +430,9 @@ var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalityS
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr vertical - Whether the element is oriented vertically.
  *
- * @fires input - Emitted when the selected state of a chip changes.
- * @fires change - Emitted when the selected state of a chip changes.
+ * @fires beforeinput - Dispatched before the selected state of a chip changes.
+ * @fires input - Dispatched when the selected state of a chip changes.
+ * @fires change - Dispatched when the selected state of a chip changes.
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
@@ -516,7 +517,7 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled(Dir
       this.ariaDisabled = this.multi && this.disabled ? "true" : null;
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.chips.forEach(x => setCustomState(x, "-hide-selection", this.hideSelectionIndicator));
+      this.chips.forEach(x => setCustomState(x, "--hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -528,7 +529,7 @@ _M3eFilterChipSetElement_handleSlotChange = function _M3eFilterChipSetElement_ha
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-filter-chip")]);
-  added.forEach(x => setCustomState(x, "-hide-selection", this.hideSelectionIndicator));
+  added.forEach(x => setCustomState(x, "--hide-selection", this.hideSelectionIndicator));
   __classPrivateFieldGet(this, _M3eFilterChipSetElement_instances, "m", _M3eFilterChipSetElement_updateChipRole).call(this);
 };
 _M3eFilterChipSetElement_handleKeyDown = function _M3eFilterChipSetElement_handleKeyDown(e) {
@@ -590,8 +591,8 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.
- * @fires click - Emitted when the element is clicked.
+ * @fires remove - Dispatched when the remove button is clicked or DELETE or BACKSPACE key is pressed.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -655,7 +656,7 @@ let M3eInputChipElement = class M3eInputChipElement extends DisabledInteractive(
     super.update(changedProperties);
     this.removeAttribute("tabindex");
     if (changedProperties.has("removable")) {
-      setCustomState(this, "-with-trailing-icon", this.removable);
+      setCustomState(this, "--with-trailing-icon", this.removable);
     }
   }
   /** @inheritdoc */
@@ -669,7 +670,7 @@ let M3eInputChipElement = class M3eInputChipElement extends DisabledInteractive(
 };
 _M3eInputChipElement_instances = new WeakSet();
 _M3eInputChipElement_handleAvatarSlotChange = function _M3eInputChipElement_handleAvatarSlotChange(e) {
-  setCustomState(this, "-with-avatar", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-avatar", hasAssignedNodes(e.target));
 };
 _M3eInputChipElement_handleRemoveButtonClick = function _M3eInputChipElement_handleRemoveButtonClick(e) {
   e.stopPropagation();
@@ -688,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(:state(-with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:state(-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(-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; } }`];
 __decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
 __decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([property({
@@ -732,7 +733,7 @@ var _M3eInputChipSetElement_instances, _M3eInputChipSetElement_directionalitySub
  * @attr required - Whether a value is required for the element.
  * @attr vertical - Whether the element is oriented vertically.
  *
- * @fires change - Emitted when a chip is added to, or removed from, the set.
+ * @fires change - Dispatched when a chip is added to, or removed from, the set.
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
@@ -1009,7 +1010,7 @@ M3eInputChipSetElement = __decorate([customElement("m3e-input-chip-set")], M3eIn
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.