@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/checkbox/lib/checkbox.js

@@ -4,183 +4,129 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import '@material/web/focus/focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { ActionElement } from '@material/web/actionelement/action-element.js';
-import { ariaProperty as legacyAriaProperty } from '@material/web/compat/base/aria-property.js';
-import { ariaProperty } from '@material/web/decorators/aria-property.js';
-import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
-import { html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-/** @soyCompatible */
-export class Checkbox extends ActionElement {
+import { when } from 'lit/directives/when.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
+import { FormController, getFormValue } from '../../controller/form-controller.js';
+import { ariaProperty } from '../../decorators/aria-property.js';
+import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
+import { ripple } from '../../ripple/directive.js';
+/**
+ * A checkbox component.
+ */
+export class Checkbox extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.checked = false;
-        this.indeterminate = false;
         this.disabled = false;
-        this.name = '';
+        this.error = false;
+        this.indeterminate = false;
         this.value = 'on';
-        /**
-         * Touch target extends beyond visual boundary of a component by default.
-         * Set to `true` to remove touch target added to the component.
-         * @see https://material.io/design/usability/accessibility.html
-         */
-        this.reducedTouchTarget = false;
-        this.animationClass = '';
+        this.name = '';
+        this.prevChecked = false;
+        this.prevDisabled = false;
+        this.prevIndeterminate = false;
         this.showFocusRing = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            return html `<md-ripple ?disabled=${this.disabled} unbounded></md-ripple>`;
+        };
+        this.addController(new FormController(this));
+        this.addEventListener('click', (event) => {
+            if (!isActivationClick(event)) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.input);
+        });
     }
-    update(changedProperties) {
-        const oldIndeterminate = changedProperties.get('indeterminate');
-        const oldChecked = changedProperties.get('checked');
-        const oldDisabled = changedProperties.get('disabled');
-        if (oldIndeterminate !== undefined || oldChecked !== undefined ||
-            oldDisabled !== undefined) {
-            const oldState = this.calculateAnimationStateName(!!oldChecked, !!oldIndeterminate, !!oldDisabled);
-            const newState = this.calculateAnimationStateName(this.checked, this.indeterminate, this.disabled);
-            this.animationClass = `${oldState}-${newState}`;
-        }
-        super.update(changedProperties);
-    }
-    calculateAnimationStateName(checked, indeterminate, disabled) {
-        if (disabled) {
-            return 'disabled';
-        }
-        else if (indeterminate) {
-            return 'indeterminate';
-        }
-        else if (checked) {
-            return 'checked';
-        }
-        else {
-            return 'unchecked';
-        }
-    }
-    /** @soyTemplate */
-    renderRipple() {
-        return html `<md-ripple
-        ?disabled="${this.disabled}"
-        unbounded></md-ripple>`;
+    get form() {
+        return this.closest('form');
     }
-    /** @soyTemplate */
-    renderFocusRing() {
-        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    focus() {
+        this.input?.focus();
     }
-    /**
-     * @soyTemplate
-     * @soyAttributes checkboxAttributes: input
-     * @soyClasses checkboxClasses: .md3-checkbox
-     */
-    render() {
-        /** @classMap */
-        const classes = {
-            'md3-checkbox--disabled': this.disabled,
-            'md3-checkbox--touch': !this.reducedTouchTarget,
-            // transition animiation classes
-            'md3-checkbox--anim-checked-indeterminate': this.animationClass === 'checked-indeterminate',
-            'md3-checkbox--anim-checked-unchecked': this.animationClass === 'checked-unchecked',
-            'md3-checkbox--anim-indeterminate-checked': this.animationClass === 'indeterminate-checked',
-            'md3-checkbox--anim-indeterminate-unchecked': this.animationClass === 'indeterminate-unchecked',
-            'md3-checkbox--anim-unchecked-checked': this.animationClass === 'unchecked-checked',
-            'md3-checkbox--anim-unchecked-indeterminate': this.animationClass === 'unchecked-indeterminate',
-        };
-        const ariaChecked = this.indeterminate ? 'mixed' : undefined;
-        return html `
-      <div class="md3-checkbox ${classMap(classes)}">
-        ${this.renderFocusRing()}
-        <input type="checkbox"
-              class="md3-checkbox__native-control"
-              name="${ifDefined(this.name)}"
-              aria-checked="${ifDefined(ariaChecked)}"
-              aria-label="${ifDefined(this.ariaLabel)}"
-              aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
-              aria-describedby="${ifDefined(this.ariaDescribedBy)}"
-              data-indeterminate="${this.indeterminate ? 'true' : 'false'}"
-              ?disabled="${this.disabled}"
-              .indeterminate="${this.indeterminate}"
-              ?checked="${this.checked}"
-              .value="${this.value}"
-              @change="${this.handleChange}"
-              @focus="${this.handleFocus}"
-              @blur="${this.handleBlur}"
-              @pointerdown=${this.handlePointerDown}
-              @pointerenter=${this.handlePointerEnter}
-              @pointerup=${this.handlePointerUp}
-              @pointercancel=${this.handlePointerCancel}
-              @pointerleave=${this.handlePointerLeave}
-              @click=${this.handleClick}
-              @contextmenu=${this.handleContextMenu}
-              >
-        <div class="md3-checkbox__background"
-          @animationend="${this.resetAnimationClass}">
-          <svg class="md3-checkbox__checkmark"
-              viewBox="0 0 24 24" aria-hidden="true">
-            <path class="md3-checkbox__checkmark-path"
-                  fill="none"
-                  d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
-          </svg>
-          <div class="md3-checkbox__mixedmark"></div>
-        </div>
-        <div class="md3-checkbox__ripple">
-          ${this.renderRipple()}
-        </div>
-      </div>`;
+    [getFormValue]() {
+        return this.checked ? this.value : null;
     }
-    setFormData(formData) {
-        if (this.name && this.checked) {
-            formData.append(this.name, this.value);
+    update(changed) {
+        if (changed.has('checked') || changed.has('disabled') ||
+            changed.has('indeterminate')) {
+            this.prevChecked = changed.get('checked') ?? this.checked;
+            this.prevDisabled = changed.get('disabled') ?? this.disabled;
+            this.prevIndeterminate =
+                changed.get('indeterminate') ?? this.indeterminate;
         }
+        super.update(changed);
     }
-    beginPress({ positionEvent }) {
-        this.ripple.beginPress(positionEvent);
-    }
-    endPress({ cancelled }) {
-        this.ripple.endPress();
-        if (cancelled) {
-            return;
-        }
-        super.endPress({
-            cancelled,
-            actionData: { checked: this.formElement.checked, value: this.formElement.value }
+    render() {
+        const prevNone = !this.prevChecked && !this.prevIndeterminate;
+        const prevChecked = this.prevChecked && !this.prevIndeterminate;
+        const prevIndeterminate = this.prevIndeterminate;
+        const isChecked = this.checked && !this.indeterminate;
+        const isIndeterminate = this.indeterminate;
+        const containerClasses = classMap({
+            'selected': isChecked || isIndeterminate,
+            'unselected': !isChecked && !isIndeterminate,
+            'checked': isChecked,
+            'indeterminate': isIndeterminate,
+            'error': this.error && !this.disabled,
+            'prev-unselected': prevNone,
+            'prev-checked': prevChecked,
+            'prev-indeterminate': prevIndeterminate,
+            'prev-disabled': this.prevDisabled,
         });
-    }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
+        return html `
+      <div class="container ${containerClasses}">
+        <div class="outline"></div>
+        <div class="background"></div>
+        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
+        ${when(this.showRipple, this.renderRipple)}
+        <svg class="icon" viewBox="0 0 18 18">
+          <rect class="mark short" />
+          <rect class="mark long" />
+        </svg>
+      </div>
+      <input type="checkbox"
+        aria-checked=${isIndeterminate ? 'mixed' : nothing}
+        aria-label=${this.ariaLabel || nothing}
+        ?disabled=${this.disabled}
+        .indeterminate=${this.indeterminate}
+        .checked=${this.checked}
+        @blur=${this.handleBlur}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @pointerdown=${this.handlePointerDown}
+        ${ripple(this.getRipple)}
+      >
+     `;
     }
     handleBlur() {
         this.showFocusRing = false;
     }
-    handlePointerEnter(e) {
-        this.ripple.beginHover(e);
+    handleChange(event) {
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = target.indeterminate;
+        redispatchEvent(this, event);
     }
-    handlePointerLeave(e) {
-        super.handlePointerLeave(e);
-        this.ripple.endHover();
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
     }
-    handlePointerDown(e) {
-        super.handlePointerDown(e);
+    handlePointerDown() {
         pointerPress();
         this.showFocusRing = shouldShowStrongFocus();
     }
-    handleChange() {
-        this.checked = this.formElement.checked;
-        this.indeterminate = this.formElement.indeterminate;
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    resetAnimationClass() {
-        this.animationClass = '';
-    }
 }
-__decorate([
-    query('input'),
-    __metadata("design:type", HTMLInputElement)
-], Checkbox.prototype, "formElement", void 0);
+Checkbox.formAssociated = true;
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
@@ -188,51 +134,55 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], Checkbox.prototype, "indeterminate", void 0);
+], Checkbox.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], Checkbox.prototype, "disabled", void 0);
+], Checkbox.prototype, "error", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], Checkbox.prototype, "name", void 0);
+], Checkbox.prototype, "indeterminate", void 0);
 __decorate([
-    property({ type: String }),
+    property(),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "value", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "name", void 0);
 __decorate([
     ariaProperty // tslint:disable-line:no-new-decorators
     ,
-    property({ type: String, attribute: 'aria-label' }),
+    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
     __metadata("design:type", String)
 ], Checkbox.prototype, "ariaLabel", void 0);
 __decorate([
-    legacyAriaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'aria-labelledby' }),
-    __metadata("design:type", String)
-], Checkbox.prototype, "ariaLabelledBy", void 0);
-__decorate([
-    legacyAriaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'aria-describedby' }),
-    __metadata("design:type", String)
-], Checkbox.prototype, "ariaDescribedBy", void 0);
+    state(),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "prevChecked", void 0);
 __decorate([
-    property({ type: Boolean }),
+    state(),
     __metadata("design:type", Object)
-], Checkbox.prototype, "reducedTouchTarget", void 0);
+], Checkbox.prototype, "prevDisabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], Checkbox.prototype, "animationClass", void 0);
+], Checkbox.prototype, "prevIndeterminate", void 0);
+__decorate([
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
+], Checkbox.prototype, "ripple", void 0);
+__decorate([
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], Checkbox.prototype, "input", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "showFocusRing", void 0);
 __decorate([
-    query('md-ripple'),
-    __metadata("design:type", MdRipple)
-], Checkbox.prototype, "ripple", void 0);
+    state(),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "showRipple", void 0);
 //# sourceMappingURL=checkbox.js.map

package/checkbox/lib/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class Checkbox extends ActionElement {\n  @query('input') protected formElement!: HTMLInputElement;\n\n  @property({type: Boolean, reflect: true}) checked = false;\n\n  @property({type: Boolean, reflect: true}) indeterminate = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: String, reflect: true}) name = '';\n\n  @property({type: String}) value = 'on';\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-labelledby'})\n  ariaLabelledBy!: undefined|string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-describedby'})\n  ariaDescribedBy!: undefined|string;\n\n  /**\n   * Touch target extends beyond visual boundary of a component by default.\n   * Set to `true` to remove touch target added to the component.\n   * @see https://material.io/design/usability/accessibility.html\n   */\n  @property({type: Boolean}) reducedTouchTarget = false;\n\n  @state() protected animationClass = '';\n\n  @state() protected showFocusRing = false;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  protected override update(changedProperties: PropertyValues) {\n    const oldIndeterminate = changedProperties.get('indeterminate');\n    const oldChecked = changedProperties.get('checked');\n    const oldDisabled = changedProperties.get('disabled');\n    if (oldIndeterminate !== undefined || oldChecked !== undefined ||\n        oldDisabled !== undefined) {\n      const oldState = this.calculateAnimationStateName(\n          !!oldChecked, !!oldIndeterminate, !!oldDisabled);\n      const newState = this.calculateAnimationStateName(\n          this.checked, this.indeterminate, this.disabled);\n      this.animationClass = `${oldState}-${newState}`;\n    }\n    super.update(changedProperties);\n  }\n\n  protected calculateAnimationStateName(\n      checked: boolean, indeterminate: boolean, disabled: boolean): string {\n    if (disabled) {\n      return 'disabled';\n    } else if (indeterminate) {\n      return 'indeterminate';\n    } else if (checked) {\n      return 'checked';\n    } else {\n      return 'unchecked';\n    }\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`<md-ripple\n        ?disabled=\"${this.disabled}\"\n        unbounded></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes checkboxAttributes: input\n   * @soyClasses checkboxClasses: .md3-checkbox\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-checkbox--disabled': this.disabled,\n      'md3-checkbox--touch': !this.reducedTouchTarget,\n      // transition animiation classes\n      'md3-checkbox--anim-checked-indeterminate':\n          this.animationClass === 'checked-indeterminate',\n      'md3-checkbox--anim-checked-unchecked':\n          this.animationClass === 'checked-unchecked',\n      'md3-checkbox--anim-indeterminate-checked':\n          this.animationClass === 'indeterminate-checked',\n      'md3-checkbox--anim-indeterminate-unchecked':\n          this.animationClass === 'indeterminate-unchecked',\n      'md3-checkbox--anim-unchecked-checked':\n          this.animationClass === 'unchecked-checked',\n      'md3-checkbox--anim-unchecked-indeterminate':\n          this.animationClass === 'unchecked-indeterminate',\n    };\n    const ariaChecked = this.indeterminate ? 'mixed' : undefined;\n    return html`\n      <div class=\"md3-checkbox ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input type=\"checkbox\"\n              class=\"md3-checkbox__native-control\"\n              name=\"${ifDefined(this.name)}\"\n              aria-checked=\"${ifDefined(ariaChecked)}\"\n              aria-label=\"${ifDefined(this.ariaLabel)}\"\n              aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n              aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n              data-indeterminate=\"${this.indeterminate ? 'true' : 'false'}\"\n              ?disabled=\"${this.disabled}\"\n              .indeterminate=\"${this.indeterminate}\"\n              ?checked=\"${this.checked}\"\n              .value=\"${this.value}\"\n              @change=\"${this.handleChange}\"\n              @focus=\"${this.handleFocus}\"\n              @blur=\"${this.handleBlur}\"\n              @pointerdown=${this.handlePointerDown}\n              @pointerenter=${this.handlePointerEnter}\n              @pointerup=${this.handlePointerUp}\n              @pointercancel=${this.handlePointerCancel}\n              @pointerleave=${this.handlePointerLeave}\n              @click=${this.handleClick}\n              @contextmenu=${this.handleContextMenu}\n              >\n        <div class=\"md3-checkbox__background\"\n          @animationend=\"${this.resetAnimationClass}\">\n          <svg class=\"md3-checkbox__checkmark\"\n              viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path class=\"md3-checkbox__checkmark-path\"\n                  fill=\"none\"\n                  d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n          <div class=\"md3-checkbox__mixedmark\"></div>\n        </div>\n        <div class=\"md3-checkbox__ripple\">\n          ${this.renderRipple()}\n        </div>\n      </div>`;\n  }\n\n  protected setFormData(formData: FormData) {\n    if (this.name && this.checked) {\n      formData.append(this.name, this.value);\n    }\n  }\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) {\n      return;\n    }\n\n    super.endPress({\n      cancelled,\n      actionData:\n          {checked: this.formElement.checked, value: this.formElement.value}\n    });\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleChange() {\n    this.checked = this.formElement.checked;\n    this.indeterminate = this.formElement.indeterminate;\n\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  protected resetAnimationClass() {\n    this.animationClass = '';\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A checkbox component.\n */\nexport class Checkbox extends LitElement {\n  static formAssociated = true;\n\n  @property({type: Boolean, reflect: true}) checked = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @property({type: Boolean, reflect: true}) error = false;\n  @property({type: Boolean, reflect: true}) indeterminate = false;\n  @property() value = 'on';\n  @property() name = '';\n\n  get form() {\n    return this.closest('form');\n  }\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @state() private prevChecked = false;\n  @state() private prevDisabled = false;\n  @state() private prevIndeterminate = false;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addEventListener('click', (event: MouseEvent) => {\n      if (!isActivationClick(event)) {\n        return;\n      }\n      this.focus();\n      dispatchActivationClick(this.input!);\n    });\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  protected override update(changed: PropertyValues<Checkbox>) {\n    if (changed.has('checked') || changed.has('disabled') ||\n        changed.has('indeterminate')) {\n      this.prevChecked = changed.get('checked') ?? this.checked;\n      this.prevDisabled = changed.get('disabled') ?? this.disabled;\n      this.prevIndeterminate =\n          changed.get('indeterminate') ?? this.indeterminate;\n    }\n\n    super.update(changed);\n  }\n\n  protected override render(): TemplateResult {\n    const prevNone = !this.prevChecked && !this.prevIndeterminate;\n    const prevChecked = this.prevChecked && !this.prevIndeterminate;\n    const prevIndeterminate = this.prevIndeterminate;\n    const isChecked = this.checked && !this.indeterminate;\n    const isIndeterminate = this.indeterminate;\n\n    const containerClasses = classMap({\n      'selected': isChecked || isIndeterminate,\n      'unselected': !isChecked && !isIndeterminate,\n      'checked': isChecked,\n      'indeterminate': isIndeterminate,\n      'error': this.error && !this.disabled,\n      'prev-unselected': prevNone,\n      'prev-checked': prevChecked,\n      'prev-indeterminate': prevIndeterminate,\n      'prev-disabled': this.prevDisabled,\n    });\n\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <div class=\"outline\"></div>\n        <div class=\"background\"></div>\n        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>\n        ${when(this.showRipple, this.renderRipple)}\n        <svg class=\"icon\" viewBox=\"0 0 18 18\">\n          <rect class=\"mark short\" />\n          <rect class=\"mark long\" />\n        </svg>\n      </div>\n      <input type=\"checkbox\"\n        aria-checked=${isIndeterminate ? 'mixed' : nothing}\n        aria-label=${this.ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        .indeterminate=${this.indeterminate}\n        .checked=${this.checked}\n        @blur=${this.handleBlur}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @pointerdown=${this.handlePointerDown}\n        ${ripple(this.getRipple)}\n      >\n     `;\n  }\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n\n    redispatchEvent(this, event);\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private readonly getRipple = () => {  // bind to this\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {  // bind to this\n    return html`<md-ripple ?disabled=${this.disabled} unbounded></md-ripple>`;\n  };\n}\n"]}

package/checkbox/lib/forced-colors-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/checkbox/lib/forced-colors-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `@media(forced-colors: active){:host{--md-checkbox-selected-container-color:CanvasText;--md-checkbox-selected-disabled-container-color:GrayText;--md-checkbox-selected-disabled-container-opacity:1;--md-checkbox-selected-disabled-icon-color:Canvas;--md-checkbox-selected-error-container-color:CanvasText;--md-checkbox-selected-error-focus-container-color:CanvasText;--md-checkbox-selected-error-focus-icon-color:Canvas;--md-checkbox-selected-error-hover-container-color:CanvasText;--md-checkbox-selected-error-hover-icon-color:Canvas;--md-checkbox-selected-error-icon-color:Canvas;--md-checkbox-selected-error-pressed-container-color:CanvasText;--md-checkbox-selected-error-pressed-icon-color:Canvas;--md-checkbox-selected-focus-container-color:CanvasText;--md-checkbox-selected-focus-icon-color:Canvas;--md-checkbox-selected-hover-container-color:CanvasText;--md-checkbox-selected-hover-icon-color:Canvas;--md-checkbox-selected-icon-color:Canvas;--md-checkbox-selected-pressed-container-color:CanvasText;--md-checkbox-selected-pressed-icon-color:Canvas;--md-checkbox-unselected-disabled-container-opacity:1;--md-checkbox-unselected-disabled-outline-color:GrayText;--md-checkbox-unselected-error-focus-outline-color:CanvasText;--md-checkbox-unselected-error-hover-outline-color:CanvasText;--md-checkbox-unselected-error-outline-color:CanvasText;--md-checkbox-unselected-error-pressed-outline-color:CanvasText;--md-checkbox-unselected-focus-outline-color:CanvasText;--md-checkbox-unselected-hover-outline-color:CanvasText;--md-checkbox-unselected-outline-color:CanvasText;--md-checkbox-unselected-pressed-outline-color:CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

package/checkbox/lib/forced-colors-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-checkbox-selected-container-color:CanvasText;--md-checkbox-selected-disabled-container-color:GrayText;--md-checkbox-selected-disabled-container-opacity:1;--md-checkbox-selected-disabled-icon-color:Canvas;--md-checkbox-selected-error-container-color:CanvasText;--md-checkbox-selected-error-focus-container-color:CanvasText;--md-checkbox-selected-error-focus-icon-color:Canvas;--md-checkbox-selected-error-hover-container-color:CanvasText;--md-checkbox-selected-error-hover-icon-color:Canvas;--md-checkbox-selected-error-icon-color:Canvas;--md-checkbox-selected-error-pressed-container-color:CanvasText;--md-checkbox-selected-error-pressed-icon-color:Canvas;--md-checkbox-selected-focus-container-color:CanvasText;--md-checkbox-selected-focus-icon-color:Canvas;--md-checkbox-selected-hover-container-color:CanvasText;--md-checkbox-selected-hover-icon-color:Canvas;--md-checkbox-selected-icon-color:Canvas;--md-checkbox-selected-pressed-container-color:CanvasText;--md-checkbox-selected-pressed-icon-color:Canvas;--md-checkbox-unselected-disabled-container-opacity:1;--md-checkbox-unselected-disabled-outline-color:GrayText;--md-checkbox-unselected-error-focus-outline-color:CanvasText;--md-checkbox-unselected-error-hover-outline-color:CanvasText;--md-checkbox-unselected-error-outline-color:CanvasText;--md-checkbox-unselected-error-pressed-outline-color:CanvasText;--md-checkbox-unselected-focus-outline-color:CanvasText;--md-checkbox-unselected-hover-outline-color:CanvasText;--md-checkbox-unselected-outline-color:CanvasText;--md-checkbox-unselected-pressed-outline-color:CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/checkbox/lib/forced-colors-styles.scss

@@ -0,0 +1,47 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './checkbox';
+
+@media (forced-colors: active) {
+  :host {
+    $container-color: CanvasText;
+    $icon-color: Canvas;
+    $outline-color: CanvasText;
+    @include checkbox.theme(
+      (
+        selected-container-color: $container-color,
+        selected-disabled-container-color: GrayText,
+        selected-disabled-container-opacity: 1,
+        selected-disabled-icon-color: $icon-color,
+        selected-error-container-color: $container-color,
+        selected-error-focus-container-color: $container-color,
+        selected-error-focus-icon-color: $icon-color,
+        selected-error-hover-container-color: $container-color,
+        selected-error-hover-icon-color: $icon-color,
+        selected-error-icon-color: $icon-color,
+        selected-error-pressed-container-color: $container-color,
+        selected-error-pressed-icon-color: $icon-color,
+        selected-focus-container-color: $container-color,
+        selected-focus-icon-color: $icon-color,
+        selected-hover-container-color: $container-color,
+        selected-hover-icon-color: $icon-color,
+        selected-icon-color: $icon-color,
+        selected-pressed-container-color: $container-color,
+        selected-pressed-icon-color: $icon-color,
+        unselected-disabled-container-opacity: 1,
+        unselected-disabled-outline-color: GrayText,
+        unselected-error-focus-outline-color: $outline-color,
+        unselected-error-hover-outline-color: $outline-color,
+        unselected-error-outline-color: $outline-color,
+        unselected-error-pressed-outline-color: $outline-color,
+        unselected-focus-outline-color: $outline-color,
+        unselected-hover-outline-color: $outline-color,
+        unselected-outline-color: $outline-color,
+        unselected-pressed-outline-color: $outline-color,
+      )
+    );
+  }
+}

package/{formfield/formfield.d.ts → chips/action/delete-action.d.ts}

@@ -3,10 +3,10 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Formfield } from './lib/formfield.js';
+import { DeleteAction } from './lib/delete-action.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'md-formfield': MdFormfield;
+        'md-delete-action': MdDeleteAction;
     }
 }
 /**
@@ -14,6 +14,5 @@ declare global {
  * @final
  * @suppress {visibility}
  */
-export declare class MdFormfield extends Formfield {
-    static styles: import("lit").CSSResult[];
+export declare class MdDeleteAction extends DeleteAction {
 }

package/chips/action/delete-action.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { DeleteAction } from './lib/delete-action.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdDeleteAction = class MdDeleteAction extends DeleteAction {
+};
+MdDeleteAction = __decorate([
+    customElement('md-delete-action')
+], MdDeleteAction);
+export { MdDeleteAction };
+//# sourceMappingURL=delete-action.js.map

package/chips/action/delete-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-action.js","sourceRoot":"","sources":["delete-action.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AAQpD;;;;GAIG;AAEH,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,YAAY;CAAG,CAAA;AAAtC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAAwB;SAAtC,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {DeleteAction} from './lib/delete-action.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-delete-action': MdDeleteAction;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-delete-action')\nexport class MdDeleteAction extends DeleteAction {}\n"]}

package/chips/action/lib/action.d.ts

@@ -3,17 +3,18 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/focus/focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { ActionElement } from '@material/web/actionelement/action-element.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
+import '../../../focus/focus-ring.js';
+import '../../../ripple/ripple.js';
 import { TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
+import { ActionElement, BeginPressConfig, EndPressConfig } from '../../../actionelement/action-element.js';
+import { MdRipple } from '../../../ripple/ripple.js';
 /**
  * Base class for all actions.
  * @soyCompatible
  */
 export declare abstract class Action extends ActionElement {
+    isDeletable: boolean;
     isFocusable: boolean;
     isTouchable: boolean;
     disabled: boolean;
@@ -31,4 +32,16 @@ export declare abstract class Action extends ActionElement {
     protected renderRipple(): TemplateResult;
     /** @soyTemplate */
     protected renderFocusRing(): TemplateResult;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    beginPress({ positionEvent }: BeginPressConfig): void;
+    endPress(options: EndPressConfig): void;
+    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    handlePointerDown(e: PointerEvent): void;
+    handleClick(e: MouseEvent): void;
+    protected handleKeyDown(e: KeyboardEvent): void;
+    protected getInteractionEvent(): string;
+    private dispatchCustomEvent;
+    private isRTL;
 }