@m3e/web 2.5.3 → 2.5.5

package/dist/checkbox.js

@@ -175,7 +175,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 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(\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    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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"}

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 l,Dirty as n,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(l(n(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.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=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 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(\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    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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"}

package/dist/chips.js

@@ -5,7 +5,7 @@
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
-import { AttachInternals, isDisabledMixin, isDisabledInteractiveMixin, isLinkButtonMixin, renderPseudoLink, setCustomState, hasAssignedNodes, getTextContent, DesignToken, customElement, FormSubmitter, LinkButton, KeyboardClick, Focusable, DisabledInteractive, Disabled, Role, Vertical, Selected, Labelled, Dirty, Touched, FormAssociated, formValue, EventAttribute, RequiredConstraintValidation, Required, ConstraintValidation, registerStyleSheet } from '@m3e/web/core';
+import { AttachInternals, isDisabledMixin, isDisabledInteractiveMixin, isLinkButtonMixin, renderPseudoLink, setCustomState, hasAssignedNodes, getTextContent, DesignToken, customElement, FormSubmitter, LinkButton, KeyboardClick, Focusable, DisabledInteractive, Disabled, Role, Vertical, Selected, Labelled, Dirty, Touched, FormAssociated, formValue, RequiredConstraintValidation, Required, ConstraintValidation, registerStyleSheet } from '@m3e/web/core';
 import { query, property } from 'lit/decorators.js';
 import { selectionManager, SelectionManager, ListManager, ListKeyManager } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -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);
@@ -394,7 +394,7 @@ _M3eFilterChipElement_handleClick = function _M3eFilterChipElement_handleClick(e
 /** 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;
@@ -516,7 +516,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 +528,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) {
@@ -630,7 +630,7 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.
  * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.
  */
-let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(DisabledInteractive(Disabled(Role(M3eChipElement, "row"))), "remove") {
+let M3eInputChipElement = class M3eInputChipElement extends DisabledInteractive(Disabled(Role(M3eChipElement, "row"))) {
   constructor() {
     super(...arguments);
     _M3eInputChipElement_instances.add(this);
@@ -655,7 +655,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(Disab
     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 +669,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(Disab
 };
 _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 +688,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({