@api-client/ui 0.2.10 → 0.2.11

package/build/src/md/UiElement.d.ts

@@ -65,6 +65,11 @@ export declare abstract class UiElement extends LitElement implements ActionCont
      * template element with `@pointerleave="${this.handlePointerleave}"`
      */
     handlePointerLeave(e: PointerEvent): void;
+    /**
+     * Subclasses should add this method as an event handler on the interactive
+     * template element with `@pointerenter="${this.handlePointerEnter}"`
+     */
+    handlePointerEnter(e: PointerEvent): void;
     /**
      * Hook method for the ActionController.
      * Subclasses should add this method as an event handler on the interactive

package/build/src/md/UiElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiElement.d.ts","sourceRoot":"","sources":["../../../src/md/UiElement.ts"],"names":[],"mappings":"AACA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACf,MAAM,oCAAoC,CAAA;AAE3C;;;;;GAKG;AACH,8BAAsB,SAAU,SAAQ,UAAW,YAAW,oBAAoB;IAChF;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAE1B,SAAS,CAAC,gBAAgB,mBAA6B;IAEvD;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAExD;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI3C;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,cAAc,GAAG,IAAI;IAazD;;;;OAIG;IACH,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIxC;;;;OAIG;IACH,eAAe,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAItC;;;;OAIG;IACH,mBAAmB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C;;;;OAIG;IACH,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIzC;;;;OAIG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAIhC;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;;OAIG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAIrC;;;;OAIG;IACH,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAInC;;OAEG;IACH,YAAY,IAAI,IAAI;CAGrB"}
+{"version":3,"file":"UiElement.d.ts","sourceRoot":"","sources":["../../../src/md/UiElement.ts"],"names":[],"mappings":"AACA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACf,MAAM,oCAAoC,CAAA;AAE3C;;;;;GAKG;AACH,8BAAsB,SAAU,SAAQ,UAAW,YAAW,oBAAoB;IAChF;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAE1B,SAAS,CAAC,gBAAgB,mBAA6B;IAEvD;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAExD;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI3C;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,cAAc,GAAG,IAAI;IAazD;;;;OAIG;IACH,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIxC;;;;OAIG;IACH,eAAe,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAItC;;;;OAIG;IACH,mBAAmB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C;;;;OAIG;IACH,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIzC;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIzC;;;;OAIG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAIhC;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;;OAIG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAIrC;;;;OAIG;IACH,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAInC;;OAEG;IACH,YAAY,IAAI,IAAI;CAGrB"}

package/build/src/md/UiElement.js

@@ -95,6 +95,13 @@ let UiElement = (() => {
         handlePointerLeave(e) {
             this.actionController.pointerLeave(e);
         }
+        /**
+         * Subclasses should add this method as an event handler on the interactive
+         * template element with `@pointerenter="${this.handlePointerEnter}"`
+         */
+        handlePointerEnter(e) {
+            // this.actionController.pointerEnter(e)
+        }
         /**
          * Hook method for the ActionController.
          * Subclasses should add this method as an event handler on the interactive

package/build/src/md/UiElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiElement.js","sourceRoot":"","sources":["../../../src/md/UiElement.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD;;;;GAIG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EACL,gBAAgB,GAIjB,MAAM,oCAAoC,CAAA;AAE3C;;;;;GAKG;IACmB,SAAS;sBAAS,UAAU;;;;iBAA5B,SAAU,SAAQ,WAAU;;;mCAY/C,KAAK,EAAE;YAAC,0KAAmB,OAAO,6BAAP,OAAO,yFAAqB;;;QAL9C,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAK9C,mFAA+C;QAHxD;;WAEG;QACM,IAAmB,OAAO,6CAAqB;QAA/C,IAAmB,OAAO,mDAAqB;QAExD;;;;;;;;WAQG;QACH,UAAU,CAAC,OAAyB;YAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACrB,CAAC;QAED;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAkB;YAChD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;YACpB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,UAAU;oBAClB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAA;YACH,CAAC;QACH,CAAC;QAED;;;;WAIG;QACH,iBAAiB,CAAC,CAAe;YAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACtC,CAAC;QAED;;;;WAIG;QACH,eAAe,CAAC,CAAe;YAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;QACpC,CAAC;QAED;;;;WAIG;QACH,mBAAmB,CAAC,CAAe;YACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;QACxC,CAAC;QAED;;;;WAIG;QACH,kBAAkB,CAAC,CAAe;YAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QACvC,CAAC;QAED;;;;WAIG;QACH,WAAW,CAAC,CAAa;YACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAChC,CAAC;QAED;;;;WAIG;QACH,iBAAiB;YACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAA;QACrC,CAAC;QAED;;;;WAIG;QACH,aAAa,CAAC,CAAgB;YAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAClC,CAAC;QAED;;;;WAIG;QACH,WAAW,CAAC,CAAgB;YAC1B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAChC,CAAC;QAED;;WAEG;QACH,YAAY;YACV,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;QACzC,CAAC;;;;;;;SA7HmB,SAAS","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { LitElement } from 'lit'\nimport { state } from 'lit/decorators.js'\nimport {\n  ActionController,\n  ActionControllerHost,\n  BeginPressConfig,\n  EndPressConfig,\n} from '../controllers/ActionController.js'\n\n/**\n * The base class for all API Client's base UI elements.\n * Only contains logic to be applied to **all** UI elements.\n *\n * @fires action - An event dispatched when the UI element was activated (pointer, keyboard).\n */\nexport abstract class UiElement extends LitElement implements ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean\n\n  protected actionController = new ActionController(this)\n\n  /**\n   * Indicates the component is in the pressed state.\n   */\n  @state() protected accessor pressed: boolean | undefined\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig): void {\n    this.pressed = true\n  }\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({ cancelled, actionData }: EndPressConfig): void {\n    this.pressed = false\n    if (!cancelled) {\n      this.dispatchEvent(\n        new CustomEvent('action', {\n          detail: actionData,\n          bubbles: true,\n          composed: true,\n        })\n      )\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent): void {\n    this.actionController.pointerDown(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent): void {\n    this.actionController.pointerUp(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent): void {\n    this.actionController.pointerCancel(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent): void {\n    this.actionController.pointerLeave(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent): void {\n    this.actionController.click(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu(): void {\n    this.actionController.contextMenu()\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keydown=\"${this.handleKeyDown}\"`\n   */\n  handleKeyDown(e: KeyboardEvent): void {\n    this.actionController.keyDown(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keyup=\"${this.handleKeyUp}\"`\n   */\n  handleKeyUp(e: KeyboardEvent): void {\n    this.actionController.keyUp(e)\n  }\n\n  /**\n   * A common way for an element to notify a change.\n   */\n  notifyChange(): void {\n    this.dispatchEvent(new Event('change'))\n  }\n}\n"]}
+{"version":3,"file":"UiElement.js","sourceRoot":"","sources":["../../../src/md/UiElement.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD;;;;GAIG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EACL,gBAAgB,GAIjB,MAAM,oCAAoC,CAAA;AAE3C;;;;;GAKG;IACmB,SAAS;sBAAS,UAAU;;;;iBAA5B,SAAU,SAAQ,WAAU;;;mCAY/C,KAAK,EAAE;YAAC,0KAAmB,OAAO,6BAAP,OAAO,yFAAqB;;;QAL9C,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAK9C,mFAA+C;QAHxD;;WAEG;QACM,IAAmB,OAAO,6CAAqB;QAA/C,IAAmB,OAAO,mDAAqB;QAExD;;;;;;;;WAQG;QACH,UAAU,CAAC,OAAyB;YAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACrB,CAAC;QAED;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAkB;YAChD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;YACpB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,UAAU;oBAClB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAA;YACH,CAAC;QACH,CAAC;QAED;;;;WAIG;QACH,iBAAiB,CAAC,CAAe;YAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACtC,CAAC;QAED;;;;WAIG;QACH,eAAe,CAAC,CAAe;YAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;QACpC,CAAC;QAED;;;;WAIG;QACH,mBAAmB,CAAC,CAAe;YACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;QACxC,CAAC;QAED;;;;WAIG;QACH,kBAAkB,CAAC,CAAe;YAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QACvC,CAAC;QAED;;;WAGG;QACH,kBAAkB,CAAC,CAAe;YAChC,wCAAwC;QAC1C,CAAC;QAED;;;;WAIG;QACH,WAAW,CAAC,CAAa;YACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAChC,CAAC;QAED;;;;WAIG;QACH,iBAAiB;YACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAA;QACrC,CAAC;QAED;;;;WAIG;QACH,aAAa,CAAC,CAAgB;YAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAClC,CAAC;QAED;;;;WAIG;QACH,WAAW,CAAC,CAAgB;YAC1B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAChC,CAAC;QAED;;WAEG;QACH,YAAY;YACV,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;QACzC,CAAC;;;;;;;SArImB,SAAS","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { LitElement } from 'lit'\nimport { state } from 'lit/decorators.js'\nimport {\n  ActionController,\n  ActionControllerHost,\n  BeginPressConfig,\n  EndPressConfig,\n} from '../controllers/ActionController.js'\n\n/**\n * The base class for all API Client's base UI elements.\n * Only contains logic to be applied to **all** UI elements.\n *\n * @fires action - An event dispatched when the UI element was activated (pointer, keyboard).\n */\nexport abstract class UiElement extends LitElement implements ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean\n\n  protected actionController = new ActionController(this)\n\n  /**\n   * Indicates the component is in the pressed state.\n   */\n  @state() protected accessor pressed: boolean | undefined\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig): void {\n    this.pressed = true\n  }\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({ cancelled, actionData }: EndPressConfig): void {\n    this.pressed = false\n    if (!cancelled) {\n      this.dispatchEvent(\n        new CustomEvent('action', {\n          detail: actionData,\n          bubbles: true,\n          composed: true,\n        })\n      )\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent): void {\n    this.actionController.pointerDown(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent): void {\n    this.actionController.pointerUp(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent): void {\n    this.actionController.pointerCancel(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent): void {\n    this.actionController.pointerLeave(e)\n  }\n\n  /**\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerenter=\"${this.handlePointerEnter}\"`\n   */\n  handlePointerEnter(e: PointerEvent): void {\n    // this.actionController.pointerEnter(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent): void {\n    this.actionController.click(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu(): void {\n    this.actionController.contextMenu()\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keydown=\"${this.handleKeyDown}\"`\n   */\n  handleKeyDown(e: KeyboardEvent): void {\n    this.actionController.keyDown(e)\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keyup=\"${this.handleKeyUp}\"`\n   */\n  handleKeyUp(e: KeyboardEvent): void {\n    this.actionController.keyUp(e)\n  }\n\n  /**\n   * A common way for an element to notify a change.\n   */\n  notifyChange(): void {\n    this.dispatchEvent(new Event('change'))\n  }\n}\n"]}

package/build/src/md/button/ui-elevated-button.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResultOrNative } from 'lit';
 import Element from './internals/elevated-button.js';
 /**
- * @attrbite {string} form
+ * @attribute form
  */
 export declare class UiElevatedButtonElement extends Element {
     static styles: CSSResultOrNative[];

package/build/src/md/button/ui-elevated-button.js

@@ -4,7 +4,7 @@ import Element from './internals/elevated-button.js';
 import base from './internals/button-styles.js';
 import styles from './internals/elevated-button.styles.js';
 /**
- * @attrbite {string} form
+ * @attribute form
  */
 let UiElevatedButtonElement = (() => {
     let _classDecorators = [customElement('ui-elevated-button')];

package/build/src/md/button/ui-elevated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-elevated-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-elevated-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,gCAAgC,CAAA;AACpD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,uCAAuC,CAAA;AAE1D;;GAEG;IAEU,uBAAuB;4BADnC,aAAa,CAAC,oBAAoB,CAAC;;;;sBACS,OAAO;uCAAf,SAAQ,WAAO;;;;YAApD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAuB;;;;;SAAvB,uBAAuB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/elevated-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/elevated-button.styles.js'\n\n/**\n * @attrbite {string} form\n */\n@customElement('ui-elevated-button')\nexport class UiElevatedButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-elevated-button': UiElevatedButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-elevated-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-elevated-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,gCAAgC,CAAA;AACpD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,uCAAuC,CAAA;AAE1D;;GAEG;IAEU,uBAAuB;4BADnC,aAAa,CAAC,oBAAoB,CAAC;;;;sBACS,OAAO;uCAAf,SAAQ,WAAO;;;;YAApD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAuB;;;;;SAAvB,uBAAuB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/elevated-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/elevated-button.styles.js'\n\n/**\n * @attribute form\n */\n@customElement('ui-elevated-button')\nexport class UiElevatedButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-elevated-button': UiElevatedButtonElement\n  }\n}\n"]}

package/build/src/md/button/ui-filled-button.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResultOrNative } from 'lit';
 import Element from './internals/filled-button.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 export declare class UiFilledButtonElement extends Element {
     static styles: CSSResultOrNative[];

package/build/src/md/button/ui-filled-button.js

@@ -4,7 +4,7 @@ import Element from './internals/filled-button.js';
 import base from './internals/button-styles.js';
 import styles from './internals/filled-button.styles.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 let UiFilledButtonElement = (() => {
     let _classDecorators = [customElement('ui-filled-button')];

package/build/src/md/button/ui-filled-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-filled-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-filled-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,8BAA8B,CAAA;AAClD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,qCAAqC,CAAA;AAExD;;GAEG;IAEU,qBAAqB;4BADjC,aAAa,CAAC,kBAAkB,CAAC;;;;sBACS,OAAO;qCAAf,SAAQ,WAAO;;;;YAAlD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAqB;;;;;SAArB,qBAAqB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/filled-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/filled-button.styles.js'\n\n/**\n * @attrbite {string} form\n */\n@customElement('ui-filled-button')\nexport class UiFilledButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-filled-button': UiFilledButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-filled-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-filled-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,8BAA8B,CAAA;AAClD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,qCAAqC,CAAA;AAExD;;GAEG;IAEU,qBAAqB;4BADjC,aAAa,CAAC,kBAAkB,CAAC;;;;sBACS,OAAO;qCAAf,SAAQ,WAAO;;;;YAAlD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAqB;;;;;SAArB,qBAAqB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/filled-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/filled-button.styles.js'\n\n/**\n * @attribute {string} form\n */\n@customElement('ui-filled-button')\nexport class UiFilledButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-filled-button': UiFilledButtonElement\n  }\n}\n"]}

package/build/src/md/button/ui-filled-tonal-button.d.ts

@@ -1,14 +1,14 @@
 import type { CSSResultOrNative } from 'lit';
 import Element from './internals/filled-tonal-button.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
-export declare class UiFilltedButtonElement extends Element {
+export declare class UiFilledButtonElement extends Element {
     static styles: CSSResultOrNative[];
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'ui-filled-tonal-button': UiFilltedButtonElement;
+        'ui-filled-tonal-button': UiFilledButtonElement;
     }
 }
 //# sourceMappingURL=ui-filled-tonal-button.d.ts.map

package/build/src/md/button/ui-filled-tonal-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-filled-tonal-button.d.ts","sourceRoot":"","sources":["../../../../src/md/button/ui-filled-tonal-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,oCAAoC,CAAA;AAIxD;;GAEG;AACH,qBACa,sBAAuB,SAAQ,OAAO;IACjD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,sBAAsB,CAAA;KACjD;CACF"}
+{"version":3,"file":"ui-filled-tonal-button.d.ts","sourceRoot":"","sources":["../../../../src/md/button/ui-filled-tonal-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,oCAAoC,CAAA;AAIxD;;GAEG;AACH,qBACa,qBAAsB,SAAQ,OAAO;IAChD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,qBAAqB,CAAA;KAChD;CACF"}

package/build/src/md/button/ui-filled-tonal-button.js

@@ -4,20 +4,20 @@ import Element from './internals/filled-tonal-button.js';
 import base from './internals/button-styles.js';
 import styles from './internals/filled-tonal-button.styles.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
-let UiFilltedButtonElement = (() => {
+let UiFilledButtonElement = (() => {
     let _classDecorators = [customElement('ui-filled-tonal-button')];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = Element;
-    var UiFilltedButtonElement = class extends _classSuper {
+    var UiFilledButtonElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            UiFilltedButtonElement = _classThis = _classDescriptor.value;
+            UiFilledButtonElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [base, styles];
@@ -25,7 +25,7 @@ let UiFilltedButtonElement = (() => {
             __runInitializers(_classThis, _classExtraInitializers);
         }
     };
-    return UiFilltedButtonElement = _classThis;
+    return UiFilledButtonElement = _classThis;
 })();
-export { UiFilltedButtonElement };
+export { UiFilledButtonElement };
 //# sourceMappingURL=ui-filled-tonal-button.js.map

package/build/src/md/button/ui-filled-tonal-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-filled-tonal-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-filled-tonal-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,oCAAoC,CAAA;AACxD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,2CAA2C,CAAA;AAE9D;;GAEG;IAEU,sBAAsB;4BADlC,aAAa,CAAC,wBAAwB,CAAC;;;;sBACI,OAAO;sCAAf,SAAQ,WAAO;;;;YAAnD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAsB;;;;;SAAtB,sBAAsB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/filled-tonal-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/filled-tonal-button.styles.js'\n\n/**\n * @attrbite {string} form\n */\n@customElement('ui-filled-tonal-button')\nexport class UiFilltedButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-filled-tonal-button': UiFilltedButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-filled-tonal-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-filled-tonal-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,oCAAoC,CAAA;AACxD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,2CAA2C,CAAA;AAE9D;;GAEG;IAEU,qBAAqB;4BADjC,aAAa,CAAC,wBAAwB,CAAC;;;;sBACG,OAAO;qCAAf,SAAQ,WAAO;;;;YAAlD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAqB;;;;;SAArB,qBAAqB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/filled-tonal-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/filled-tonal-button.styles.js'\n\n/**\n * @attribute {string} form\n */\n@customElement('ui-filled-tonal-button')\nexport class UiFilledButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-filled-tonal-button': UiFilledButtonElement\n  }\n}\n"]}

package/build/src/md/button/ui-outlined-button.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResultOrNative } from 'lit';
 import Element from './internals/outlined-button.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 export declare class UiOutlinedButtonElement extends Element {
     static styles: CSSResultOrNative[];

package/build/src/md/button/ui-outlined-button.js

@@ -4,7 +4,7 @@ import Element from './internals/outlined-button.js';
 import base from './internals/button-styles.js';
 import styles from './internals/outlined-button.styles.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 let UiOutlinedButtonElement = (() => {
     let _classDecorators = [customElement('ui-outlined-button')];

package/build/src/md/button/ui-outlined-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-outlined-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-outlined-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,gCAAgC,CAAA;AACpD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,uCAAuC,CAAA;AAE1D;;GAEG;IAEU,uBAAuB;4BADnC,aAAa,CAAC,oBAAoB,CAAC;;;;sBACS,OAAO;uCAAf,SAAQ,WAAO;;;;YAApD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAuB;;;;;SAAvB,uBAAuB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/outlined-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/outlined-button.styles.js'\n\n/**\n * @attrbite {string} form\n */\n@customElement('ui-outlined-button')\nexport class UiOutlinedButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-outlined-button': UiOutlinedButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-outlined-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-outlined-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,gCAAgC,CAAA;AACpD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,uCAAuC,CAAA;AAE1D;;GAEG;IAEU,uBAAuB;4BADnC,aAAa,CAAC,oBAAoB,CAAC;;;;sBACS,OAAO;uCAAf,SAAQ,WAAO;;;;YAApD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAuB;;;;;SAAvB,uBAAuB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/outlined-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/outlined-button.styles.js'\n\n/**\n * @attribute {string} form\n */\n@customElement('ui-outlined-button')\nexport class UiOutlinedButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-outlined-button': UiOutlinedButtonElement\n  }\n}\n"]}

package/build/src/md/button/ui-text-button.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResultOrNative } from 'lit';
 import Element from './internals/text-button.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 export declare class UiTextButtonElement extends Element {
     static styles: CSSResultOrNative[];

package/build/src/md/button/ui-text-button.js

@@ -4,7 +4,7 @@ import Element from './internals/text-button.js';
 import base from './internals/button-styles.js';
 import styles from './internals/text-button.styles.js';
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 let UiTextButtonElement = (() => {
     let _classDecorators = [customElement('ui-text-button')];

package/build/src/md/button/ui-text-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-text-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-text-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,4BAA4B,CAAA;AAChD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAEtD;;GAEG;IAEU,mBAAmB;4BAD/B,aAAa,CAAC,gBAAgB,CAAC;;;;sBACS,OAAO;mCAAf,SAAQ,WAAO;;;;YAAhD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAmB;;;;;SAAnB,mBAAmB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/text-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/text-button.styles.js'\n\n/**\n * @attrbite {string} form\n */\n@customElement('ui-text-button')\nexport class UiTextButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-text-button': UiTextButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-text-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-text-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,4BAA4B,CAAA;AAChD,OAAO,IAAI,MAAM,8BAA8B,CAAA;AAC/C,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAEtD;;GAEG;IAEU,mBAAmB;4BAD/B,aAAa,CAAC,gBAAgB,CAAC;;;;sBACS,OAAO;mCAAf,SAAQ,WAAO;;;;YAAhD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAmB;;;;;SAAnB,mBAAmB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/text-button.js'\nimport base from './internals/button-styles.js'\nimport styles from './internals/text-button.styles.js'\n\n/**\n * @attribute {string} form\n */\n@customElement('ui-text-button')\nexport class UiTextButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-text-button': UiTextButtonElement\n  }\n}\n"]}

package/build/src/md/checkbox/internals/Checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/Checkbox.styles.ts"],"names":[],"mappings":";AAEA,wBA0RC"}
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/Checkbox.styles.ts"],"names":[],"mappings":";AAEA,wBAyHC"}

package/build/src/md/checkbox/internals/Checkbox.styles.js

@@ -6,29 +6,44 @@ export default css `
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
+    position: relative;
+
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-background-color: transparent;
+    --_container-opacity: 1;
+
+    --_check-mark-color: currentColor;
+
+    --_checkbox-width: 18px;
+    --_checkbox-height: 18px;
+    --_state-width: 40px;
+    --_state-height: 40px;
   }
 
   .surface {
     position: relative;
-    min-width: 40px;
-    height: 40px;
+    min-width: var(--_state-width);
+    height: var(--_state-height);
     display: flex;
     align-items: center;
   }
 
   .container {
     border-radius: 2px;
-    border: 2px var(--md-sys-color-on-surface) solid;
-    background-color: transparent;
+    border: var(--_container-border-width) var(--_container-border-color) solid;
+    background-color: var(--_container-background-color);
+    opacity: var(--_container-opacity);
 
     position: absolute;
     inset: 11px 0px 0px 11px;
 
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
 
     box-sizing: border-box;
 
@@ -39,22 +54,23 @@ export default css `
   }
 
   .icon {
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
     position: absolute;
     inset: 11px 0 0 11px;
   }
 
   .icon > svg {
-    width: 18px !important;
-    height: 18px !important;
+    width: var(--_checkbox-width) !important;
+    height: var(--_checkbox-height) !important;
+    fill: var(--_check-mark-color);
   }
 
   .state {
     position: absolute;
     inset: 0;
-    width: 40px;
-    height: 40px;
+    width: var(--_state-width);
+    height: var(--_state-height);
     border-radius: var(--md-sys-shape-corner-full);
   }
 
@@ -63,223 +79,46 @@ export default css `
     z-index: 3;
   }
 
-  :host([checked]) .container,
-  :host([indeterminate]) .container {
-    border-width: 0px;
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host([checked]) .icon > svg,
-  :host([indeterminate]) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* Invalid state */
-
-  :host([invalid]) .container {
-    border-color: var(--md-sys-color-error);
-  }
-
-  :host([checked][invalid]) .container,
-  :host([indeterminate][invalid]) .container {
-    border-color: transparent;
-    background-color: var(--md-sys-color-error);
-  }
-
-  :host([checked][invalid]) .icon > svg,
-  :host([indeterminate][invalid]) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Disabled state */
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-    opacity: 38%;
+  :host([checked]) {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);
   }
 
-  :host([checked][disabled]) .container,
-  :host([indeterminate][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    border-width: 0;
-    opacity: 38%;
+  :host([checked]),
+  :host([indeterminate]) {
+    --_container-border-width: 0px;
+    --_container-background-color: var(--md-sys-color-primary);
+    --_check-mark-color: var(--md-sys-color-on-primary);
   }
 
-  :host([checked][disabled]) .icon > svg,
-  :host([indeterminate][disabled]) .icon > svg {
-    fill: var(--md-sys-color-surface);
-  }
-
-  /* Hover state */
-
-  /* :host(:hover) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  /* :host([checked]:hover) .state,
-:host([indeterminate]:hover) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  :host(:hover) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:hover) .container,
-  :host([indeterminate]:hover) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host(:hover) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  :host([invalid]:hover) {
+  :host([invalid]) {
     --md-ripple-hover-state-layer-color: var(--md-sys-color-error);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-error);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);
+    --_container-border-color: var(--md-sys-color-error);
   }
 
-  /* :host([invalid]:hover) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  :host([invalid]:hover) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
+  :host([checked][invalid]),
+  :host([indeterminate][invalid]) {
+    --_check-mark-color: var(--md-sys-color-on-error);
+    --_container-border-color: transparent;
+    --_container-background-color: var(--md-sys-color-error);
   }
 
-  :host([checked][invalid]:hover) .container,
-  :host([indeterminate][invalid]:hover) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-
-  :host([checked][invalid]:hover) .icon > svg,
-  :host([indeterminate][invalid]:hover) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Focus state */
-
-  /* :host(:focus) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-}
-
-:host([checked]:focus) .state,
-:host([indeterminate]:focus) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-
-  :host(:focus) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:focus) .container,
-  :host([indeterminate]:focus) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host(:focus) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* :host([invalid]:focus) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-
-  :host([invalid]:focus) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-
-  :host([checked][invalid]:focus) .container,
-  :host([indeterminate][invalid]:focus) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-
-  :host([checked][invalid]:focus) .icon > svg,
-  :host([indeterminate][invalid]:focus) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Pressed state */
-
-  /* :host(:active) .state,
-:host .pressed .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-}
-
-:host([checked]:active) .state,
-:host([checked]) .pressed .state,
-:host([indeterminate]:active) .state,
-:host([indeterminate]) .pressed .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-
-  :host(:active) .container,
-  :host .pressed .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:active) .container,
-  :host([checked]) .pressed .container,
-  :host([indeterminate]:active) .container,
-  :host([indeterminate]) .pressed .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host([checked]:active) .icon > svg,
-  :host([checked]) .pressed .icon > svg,
-  :host([indeterminate]:active) .icon > svg,
-  :host([indeterminate]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* :host([invalid]:active) .state,
-:host([invalid]) .pressed .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-
-  :host([invalid]:active) .container,
-  :host([invalid]) .pressed .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-
-  :host([checked][invalid]:active) .container,
-  :host([checked][invalid]) .pressed .container,
-  :host([indeterminate][invalid]:active) .container :host([indeterminate][invalid]) .pressed .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
+  :host([disabled]) {
+    pointer-events: none;
+    --_check-mark-color: var(--md-sys-color-surface);
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-opacity: 38%;
   }
 
-  :host([checked][invalid]:active) .icon > svg,
-  :host([checked][invalid]) .pressed .icon > svg,
-  :host([indeterminate][invalid]:active) .icon > svg,
-  :host([indeterminate][invalid]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-error);
+  :host([checked][disabled]),
+  :host([indeterminate][disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 0;
+    --_container-opacity: 38%;
   }
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

package/build/src/md/checkbox/internals/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0RjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n  }\n\n  .surface {\n    position: relative;\n    min-width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n  }\n\n  .container {\n    border-radius: 2px;\n    border: 2px var(--md-sys-color-on-surface) solid;\n    background-color: transparent;\n\n    position: absolute;\n    inset: 11px 0px 0px 11px;\n\n    width: 18px;\n    height: 18px;\n\n    box-sizing: border-box;\n\n    transition:\n      cubic-bezier(0.4, 0, 0.2, 1) border-radius 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) border-color 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) background-color 0.13s;\n  }\n\n  .icon {\n    width: 18px;\n    height: 18px;\n    position: absolute;\n    inset: 11px 0 0 11px;\n  }\n\n  .icon > svg {\n    width: 18px !important;\n    height: 18px !important;\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-full);\n  }\n\n  .ripple {\n    border-radius: var(--md-sys-shape-corner-full);\n    z-index: 3;\n  }\n\n  :host([checked]) .container,\n  :host([indeterminate]) .container {\n    border-width: 0px;\n    background-color: var(--md-sys-color-primary);\n  }\n\n  :host([checked]) .icon > svg,\n  :host([indeterminate]) .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* Invalid state */\n\n  :host([invalid]) .container {\n    border-color: var(--md-sys-color-error);\n  }\n\n  :host([checked][invalid]) .container,\n  :host([indeterminate][invalid]) .container {\n    border-color: transparent;\n    background-color: var(--md-sys-color-error);\n  }\n\n  :host([checked][invalid]) .icon > svg,\n  :host([indeterminate][invalid]) .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n\n  /* Disabled state */\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n    opacity: 38%;\n  }\n\n  :host([checked][disabled]) .container,\n  :host([indeterminate][disabled]) .container {\n    background-color: var(--md-sys-color-on-surface);\n    border-width: 0;\n    opacity: 38%;\n  }\n\n  :host([checked][disabled]) .icon > svg,\n  :host([indeterminate][disabled]) .icon > svg {\n    fill: var(--md-sys-color-surface);\n  }\n\n  /* Hover state */\n\n  /* :host(:hover) .state {\n  background-color: var(--md-sys-color-on-surface);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n} */\n\n  /* :host([checked]:hover) .state,\n:host([indeterminate]:hover) .state {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n} */\n\n  :host(:hover) .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n  }\n\n  :host([checked]:hover) .container,\n  :host([indeterminate]:hover) .container {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0px;\n  }\n\n  :host(:hover) .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  :host([invalid]:hover) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);\n  }\n\n  /* :host([invalid]:hover) .state {\n  background-color: var(--md-sys-color-error);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n} */\n\n  :host([invalid]:hover) .container {\n    border-color: var(--md-sys-color-error);\n    border-width: 2px;\n  }\n\n  :host([checked][invalid]:hover) .container,\n  :host([indeterminate][invalid]:hover) .container {\n    background-color: var(--md-sys-color-error);\n    border-width: 0px;\n  }\n\n  :host([checked][invalid]:hover) .icon > svg,\n  :host([indeterminate][invalid]:hover) .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n\n  /* Focus state */\n\n  /* :host(:focus) .state {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n}\n\n:host([checked]:focus) .state,\n:host([indeterminate]:focus) .state {\n  background-color: var(--md-sys-color-on-surface);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n} */\n\n  :host(:focus) .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n  }\n\n  :host([checked]:focus) .container,\n  :host([indeterminate]:focus) .container {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0px;\n  }\n\n  :host(:focus) .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* :host([invalid]:focus) .state {\n  background-color: var(--md-sys-color-error);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n} */\n\n  :host([invalid]:focus) .container {\n    border-color: var(--md-sys-color-error);\n    border-width: 2px;\n  }\n\n  :host([checked][invalid]:focus) .container,\n  :host([indeterminate][invalid]:focus) .container {\n    background-color: var(--md-sys-color-error);\n    border-width: 0px;\n  }\n\n  :host([checked][invalid]:focus) .icon > svg,\n  :host([indeterminate][invalid]:focus) .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n\n  /* Pressed state */\n\n  /* :host(:active) .state,\n:host .pressed .state {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n}\n\n:host([checked]:active) .state,\n:host([checked]) .pressed .state,\n:host([indeterminate]:active) .state,\n:host([indeterminate]) .pressed .state {\n  background-color: var(--md-sys-color-on-surface);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n} */\n\n  :host(:active) .container,\n  :host .pressed .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n  }\n\n  :host([checked]:active) .container,\n  :host([checked]) .pressed .container,\n  :host([indeterminate]:active) .container,\n  :host([indeterminate]) .pressed .container {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0px;\n  }\n\n  :host([checked]:active) .icon > svg,\n  :host([checked]) .pressed .icon > svg,\n  :host([indeterminate]:active) .icon > svg,\n  :host([indeterminate]) .pressed .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* :host([invalid]:active) .state,\n:host([invalid]) .pressed .state {\n  background-color: var(--md-sys-color-error);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n} */\n\n  :host([invalid]:active) .container,\n  :host([invalid]) .pressed .container {\n    border-color: var(--md-sys-color-error);\n    border-width: 2px;\n  }\n\n  :host([checked][invalid]:active) .container,\n  :host([checked][invalid]) .pressed .container,\n  :host([indeterminate][invalid]:active) .container :host([indeterminate][invalid]) .pressed .container {\n    background-color: var(--md-sys-color-error);\n    border-width: 0px;\n  }\n\n  :host([checked][invalid]:active) .icon > svg,\n  :host([checked][invalid]) .pressed .icon > svg,\n  :host([indeterminate][invalid]:active) .icon > svg,\n  :host([indeterminate][invalid]) .pressed .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n`\n"]}
+{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n\n    position: relative;\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n\n    --_container-border-color: var(--md-sys-color-on-surface);\n    --_container-border-width: 2px;\n    --_container-background-color: transparent;\n    --_container-opacity: 1;\n\n    --_check-mark-color: currentColor;\n\n    --_checkbox-width: 18px;\n    --_checkbox-height: 18px;\n    --_state-width: 40px;\n    --_state-height: 40px;\n  }\n\n  .surface {\n    position: relative;\n    min-width: var(--_state-width);\n    height: var(--_state-height);\n    display: flex;\n    align-items: center;\n  }\n\n  .container {\n    border-radius: 2px;\n    border: var(--_container-border-width) var(--_container-border-color) solid;\n    background-color: var(--_container-background-color);\n    opacity: var(--_container-opacity);\n\n    position: absolute;\n    inset: 11px 0px 0px 11px;\n\n    width: var(--_checkbox-width);\n    height: var(--_checkbox-height);\n\n    box-sizing: border-box;\n\n    transition:\n      cubic-bezier(0.4, 0, 0.2, 1) border-radius 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) border-color 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) background-color 0.13s;\n  }\n\n  .icon {\n    width: var(--_checkbox-width);\n    height: var(--_checkbox-height);\n    position: absolute;\n    inset: 11px 0 0 11px;\n  }\n\n  .icon > svg {\n    width: var(--_checkbox-width) !important;\n    height: var(--_checkbox-height) !important;\n    fill: var(--_check-mark-color);\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    width: var(--_state-width);\n    height: var(--_state-height);\n    border-radius: var(--md-sys-shape-corner-full);\n  }\n\n  .ripple {\n    border-radius: var(--md-sys-shape-corner-full);\n    z-index: 3;\n  }\n\n  :host([checked]) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);\n  }\n\n  :host([checked]),\n  :host([indeterminate]) {\n    --_container-border-width: 0px;\n    --_container-background-color: var(--md-sys-color-primary);\n    --_check-mark-color: var(--md-sys-color-on-primary);\n  }\n\n  :host([invalid]) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);\n    --_container-border-color: var(--md-sys-color-error);\n  }\n\n  :host([checked][invalid]),\n  :host([indeterminate][invalid]) {\n    --_check-mark-color: var(--md-sys-color-on-error);\n    --_container-border-color: transparent;\n    --_container-background-color: var(--md-sys-color-error);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    --_check-mark-color: var(--md-sys-color-surface);\n    --_container-border-color: var(--md-sys-color-on-surface);\n    --_container-border-width: 2px;\n    --_container-opacity: 38%;\n  }\n\n  :host([checked][disabled]),\n  :host([indeterminate][disabled]) {\n    --_container-background-color: var(--md-sys-color-on-surface);\n    --_container-border-width: 0;\n    --_container-opacity: 38%;\n  }\n`\n"]}