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

package/radio/lib/radio.js

@@ -6,30 +6,34 @@
 import { __decorate, __metadata } from "tslib";
 // Style preference for leading underscores.
 // tslint:disable:strip-private-property-underscore
-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';
+import { when } from 'lit/directives/when.js';
+import { dispatchActivationClick, isActivationClick } 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';
 import { SingleSelectionController } from './single-selection-controller.js';
 /**
  * @fires checked
  * @soyCompatible
  */
-export class Radio extends ActionElement {
+export class Radio extends LitElement {
     constructor() {
-        super(...arguments);
-        this._checked = false;
-        this.showFocusRing = false;
-        this.global = false;
+        super();
+        this._checked = false; // tslint:disable-line:enforce-name-casing
         this.disabled = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
         this.value = 'on';
+        /**
+         * The HTML name to use in form submission.
+         */
         this.name = '';
         /**
          * Touch target extends beyond visual boundary of a component by default.
@@ -43,12 +47,25 @@ export class Radio extends ActionElement {
          */
         this.formElementTabIndex = 0;
         this.focused = false;
-        this.rippleElement = null;
+        this.showFocusRing = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            return html `<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;
+        };
+        this.addController(new FormController(this));
+        this.addEventListener('click', (event) => {
+            if (!isActivationClick(event)) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.input);
+        });
     }
     get checked() {
-        return this.getChecked();
-    }
-    getChecked() {
         return this._checked;
     }
     /**
@@ -71,9 +88,6 @@ export class Radio extends ActionElement {
      * and we couldn't tell that radio1 was the most recently checked.
      */
     set checked(isChecked) {
-        this.setChecked(isChecked);
-    }
-    setChecked(isChecked) {
         const oldValue = this._checked;
         if (isChecked === oldValue) {
             return;
@@ -85,17 +99,17 @@ export class Radio extends ActionElement {
         // TODO(b/168543810): Remove triggering event on programmatic API call.
         this.dispatchEvent(new Event('checked', { bubbles: true, composed: true }));
     }
-    /** @soyTemplate */
-    renderRipple() {
-        return html `<md-ripple unbounded
-        ?disabled="${this.disabled}"></md-ripple>`;
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.closest('form');
     }
-    /** @soyTemplate */
-    renderFocusRing() {
-        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    [getFormValue]() {
+        return this.checked ? this.value : null;
     }
-    get isRippleActive() {
-        return false;
+    focus() {
+        this.input?.focus();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -127,46 +141,15 @@ export class Radio extends ActionElement {
         this.selectionController = undefined;
     }
     updated(changedProperties) {
-        if (changedProperties.has('checked') && this.formElement) {
-            this.formElement.checked = this.checked;
+        if (changedProperties.has('checked') && this.input) {
+            this.input.checked = this.checked;
             if (!this.checked) {
                 // Remove focus ring when unchecked on other radio programmatically.
                 // Blur on input since this determines the focus style.
-                this.formElement?.blur();
+                this.input.blur();
             }
         }
     }
-    createAdapter() { }
-    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 }
-        });
-    }
-    click() {
-        this.formElement.focus();
-        this.formElement.click();
-    }
-    handleFocus() {
-        this.focused = true;
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    handleBlur() {
-        this.focused = false;
-        this.showFocusRing = false;
-    }
-    setFormData(formData) {
-        if (this.name && this.checked) {
-            formData.append(this.name, this.value);
-        }
-    }
     /**
      * @soyTemplate
      * @soyAttributes radioAttributes: input
@@ -187,44 +170,34 @@ export class Radio extends ActionElement {
           class="md3-radio__native-control"
           type="radio"
           name="${this.name}"
-          aria-label="${ifDefined(this.ariaLabel)}"
-          aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
-          aria-describedby="${ifDefined(this.ariaDescribedBy)}"
-          ?checked="${this.checked}"
+          aria-label="${this.ariaLabel || nothing}"
+          .checked="${this.checked}"
           .value="${this.value}"
           ?disabled="${this.disabled}"
-          @change="${this.changeHandler}"
+          @change="${this.handleChange}"
           @focus="${this.handleFocus}"
-          @click="${this.handleClick}"
           @blur="${this.handleBlur}"
-          @pointerenter=${this.handlePointerEnter}
           @pointerdown=${this.handlePointerDown}
-          @pointerup=${this.handlePointerUp}
-          @pointercancel=${this.handlePointerCancel}
-          @pointerleave=${this.handlePointerLeave}
+          ${ripple(this.getRipple)}
           >
         <div class="md3-radio__background">
           <div class="md3-radio__outer-circle"></div>
           <div class="md3-radio__inner-circle"></div>
         </div>
         <div class="md3-radio__ripple">
-          ${this.renderRipple()}
+          ${when(this.showRipple, this.renderRipple)}
         </div>
       </div>`;
     }
-    handlePointerEnter() {
-        this.ripple.beginHover();
+    handleBlur() {
+        this.focused = false;
+        this.showFocusRing = false;
     }
-    handlePointerDown(event) {
-        super.handlePointerDown(event);
-        pointerPress();
+    handleFocus() {
+        this.focused = true;
         this.showFocusRing = shouldShowStrongFocus();
     }
-    handlePointerLeave(e) {
-        super.handlePointerLeave(e);
-        this.ripple.endHover();
-    }
-    changeHandler() {
+    handleChange() {
         if (this.disabled) {
             return;
         }
@@ -235,23 +208,16 @@ export class Radio extends ActionElement {
             composed: true,
         }));
     }
+    handlePointerDown(event) {
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    renderFocusRing() {
+        return html `<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;
+    }
 }
-__decorate([
-    query('input'),
-    __metadata("design:type", HTMLInputElement)
-], Radio.prototype, "formElement", void 0);
-__decorate([
-    query('md-ripple'),
-    __metadata("design:type", MdRipple)
-], Radio.prototype, "ripple", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Radio.prototype, "showFocusRing", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Radio.prototype, "global", void 0);
+Radio.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+Radio.formAssociated = true;
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean),
@@ -266,7 +232,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Radio.prototype, "value", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "name", void 0);
 __decorate([
@@ -277,26 +243,30 @@ __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)
 ], Radio.prototype, "formElementTabIndex", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Radio.prototype, "focused", void 0);
 __decorate([
     ariaProperty // tslint:disable-line:no-new-decorators
     ,
-    property({ attribute: 'aria-label' }),
+    property({ attribute: 'data-aria-label', noAccessor: true }),
     __metadata("design:type", String)
 ], Radio.prototype, "ariaLabel", void 0);
 __decorate([
-    legacyAriaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ attribute: 'aria-labelledby' }),
-    __metadata("design:type", String)
-], Radio.prototype, "ariaLabelledBy", void 0);
+    state(),
+    __metadata("design:type", Object)
+], Radio.prototype, "focused", void 0);
 __decorate([
-    legacyAriaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'aria-describedby' }),
-    __metadata("design:type", String)
-], Radio.prototype, "ariaDescribedBy", void 0);
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], Radio.prototype, "input", void 0);
+__decorate([
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
+], Radio.prototype, "ripple", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Radio.prototype, "showFocusRing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Radio.prototype, "showRipple", void 0);
 //# sourceMappingURL=radio.js.map

package/radio/lib/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\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\nimport {SingleSelectionController} from './single-selection-controller.js';\n\n/**\n * @fires checked\n * @soyCompatible\n */\nexport class Radio extends ActionElement {\n  @query('input') protected formElement!: HTMLInputElement;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  protected _checked = false;\n\n  @state() protected showFocusRing = false;\n\n  @property({type: Boolean}) global = false;\n\n  @property({type: Boolean, reflect: true})\n  get checked(): boolean {\n    return this.getChecked();\n  }\n\n  protected getChecked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * We define our own getter/setter for `checked` because we need to track\n   * changes to it synchronously.\n   *\n   * The order in which the `checked` property is set across radio buttons\n   * within the same group is very important. However, we can't rely on\n   * UpdatingElement's `updated` callback to observe these changes (which is\n   * also what the `@observer` decorator uses), because it batches changes to\n   * all properties.\n   *\n   * Consider:\n   *\n   *   radio1.disabled = true;\n   *   radio2.checked = true;\n   *   radio1.checked = true;\n   *\n   * In this case we'd first see all changes for radio1, and then for radio2,\n   * and we couldn't tell that radio1 was the most recently checked.\n   */\n  set checked(isChecked: boolean) {\n    this.setChecked(isChecked);\n  }\n\n  protected setChecked(isChecked: boolean) {\n    const oldValue = this._checked;\n    if (isChecked === oldValue) {\n      return;\n    }\n    this._checked = isChecked;\n    this.selectionController?.update(this);\n\n    this.requestUpdate('checked', oldValue);\n\n    // useful when unchecks self and wrapping element needs to synchronize\n    // TODO(b/168543810): Remove triggering event on programmatic API call.\n    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));\n  }\n\n  @property({type: Boolean}) override disabled = false;\n\n  @property({type: String}) value = 'on';\n\n  @property({type: String}) name = '';\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  protected selectionController?: SingleSelectionController;\n\n  /**\n   * input's tabindex is updated based on checked status.\n   * Tab navigation will be removed from unchecked radios.\n   */\n  @property({type: Number}) formElementTabIndex = 0;\n\n  @state() protected focused = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'aria-labelledby'})\n  ariaLabelledBy!: 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  protected rippleElement: MdRipple|null = null;\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return html`<md-ripple unbounded\n        ?disabled=\"${this.disabled}\"></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  get isRippleActive() {\n    return false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Note that we must defer creating the selection controller until the\n    // element has connected, because selection controllers are keyed by the\n    // radio's shadow root. For example, if we're stamping in a lit map\n    // or repeat, then we'll be constructed before we're added to a root node.\n    //\n    // Also note if we aren't using native shadow DOM, we still need a\n    // SelectionController, because we should update checked status of other\n    // radios in the group when selection changes. It also simplifies\n    // implementation and testing to use one in all cases.\n    //\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    this.selectionController = SingleSelectionController.getController(this);\n    this.selectionController.register(this);\n\n    // Radios maybe checked before connected, update selection as soon it is\n    // connected to DOM. Last checked radio button in the DOM will be selected.\n    //\n    // NOTE: If we update selection only after firstUpdate() we might mistakenly\n    // update checked status before other radios are rendered.\n    this.selectionController.update(this);\n  }\n\n  override disconnectedCallback() {\n    // The controller is initialized in connectedCallback, so if we are in\n    // disconnectedCallback then it must be initialized.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.selectionController!.unregister(this);\n    this.selectionController = undefined;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('checked') && this.formElement) {\n      this.formElement.checked = this.checked;\n      if (!this.checked) {\n        // Remove focus ring when unchecked on other radio programmatically.\n        // Blur on input since this determines the focus style.\n        this.formElement?.blur();\n      }\n    }\n  }\n\n  protected createAdapter() {}\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  override click() {\n    this.formElement.focus();\n    this.formElement.click();\n  }\n\n  protected handleFocus() {\n    this.focused = true;\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.focused = false;\n    this.showFocusRing = false;\n  }\n\n  protected setFormData(formData: FormData) {\n    if (this.name && this.checked) {\n      formData.append(this.name, this.value);\n    }\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes radioAttributes: input\n   * @soyClasses radioClasses: .md3-radio\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-radio--touch': !this.reducedTouchTarget,\n      'md3-ripple-upgraded--background-focused': this.focused,\n      'md3-radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=\"md3-radio ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input\n          tabindex=\"${this.formElementTabIndex}\"\n          class=\"md3-radio__native-control\"\n          type=\"radio\"\n          name=\"${this.name}\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n          aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n          ?checked=\"${this.checked}\"\n          .value=\"${this.value}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this.changeHandler}\"\n          @focus=\"${this.handleFocus}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerenter=${this.handlePointerEnter}\n          @pointerdown=${this.handlePointerDown}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          >\n        <div class=\"md3-radio__background\">\n          <div class=\"md3-radio__outer-circle\"></div>\n          <div class=\"md3-radio__inner-circle\"></div>\n        </div>\n        <div class=\"md3-radio__ripple\">\n          ${this.renderRipple()}\n        </div>\n      </div>`;\n  }\n\n  protected handlePointerEnter() {\n    this.ripple.beginHover();\n  }\n\n  override handlePointerDown(event: PointerEvent) {\n    super.handlePointerDown(event);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  protected changeHandler() {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\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} 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\nimport {SingleSelectionController} from './single-selection-controller.js';\n\n/**\n * @fires checked\n * @soyCompatible\n */\nexport class Radio extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  static formAssociated = true;\n\n  @property({type: Boolean, reflect: true})\n  get checked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * We define our own getter/setter for `checked` because we need to track\n   * changes to it synchronously.\n   *\n   * The order in which the `checked` property is set across radio buttons\n   * within the same group is very important. However, we can't rely on\n   * UpdatingElement's `updated` callback to observe these changes (which is\n   * also what the `@observer` decorator uses), because it batches changes to\n   * all properties.\n   *\n   * Consider:\n   *\n   *   radio1.disabled = true;\n   *   radio2.checked = true;\n   *   radio1.checked = true;\n   *\n   * In this case we'd first see all changes for radio1, and then for radio2,\n   * and we couldn't tell that radio1 was the most recently checked.\n   */\n  set checked(isChecked: boolean) {\n    const oldValue = this._checked;\n    if (isChecked === oldValue) {\n      return;\n    }\n    this._checked = isChecked;\n    this.selectionController?.update(this);\n\n    this.requestUpdate('checked', oldValue);\n\n    // useful when unchecks self and wrapping element needs to synchronize\n    // TODO(b/168543810): Remove triggering event on programmatic API call.\n    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));\n  }\n\n  private _checked = false;  // tslint:disable-line:enforce-name-casing\n\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property({type: String}) value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({type: String, reflect: true}) name = '';\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  /**\n   * input's tabindex is updated based on checked status.\n   * Tab navigation will be removed from unchecked radios.\n   */\n  @property({type: Number}) formElementTabIndex = 0;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.closest('form');\n  }\n\n  @state() private focused = false;\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private selectionController?: SingleSelectionController;\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: Event) => {\n      if (!isActivationClick(event)) {\n        return;\n      }\n      this.focus();\n      dispatchActivationClick(this.input!);\n    });\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Note that we must defer creating the selection controller until the\n    // element has connected, because selection controllers are keyed by the\n    // radio's shadow root. For example, if we're stamping in a lit map\n    // or repeat, then we'll be constructed before we're added to a root node.\n    //\n    // Also note if we aren't using native shadow DOM, we still need a\n    // SelectionController, because we should update checked status of other\n    // radios in the group when selection changes. It also simplifies\n    // implementation and testing to use one in all cases.\n    //\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    this.selectionController = SingleSelectionController.getController(this);\n    this.selectionController.register(this);\n\n    // Radios maybe checked before connected, update selection as soon it is\n    // connected to DOM. Last checked radio button in the DOM will be selected.\n    //\n    // NOTE: If we update selection only after firstUpdate() we might mistakenly\n    // update checked status before other radios are rendered.\n    this.selectionController.update(this);\n  }\n\n  override disconnectedCallback() {\n    // The controller is initialized in connectedCallback, so if we are in\n    // disconnectedCallback then it must be initialized.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.selectionController!.unregister(this);\n    this.selectionController = undefined;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('checked') && this.input) {\n      this.input.checked = this.checked;\n      if (!this.checked) {\n        // Remove focus ring when unchecked on other radio programmatically.\n        // Blur on input since this determines the focus style.\n        this.input.blur();\n      }\n    }\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes radioAttributes: input\n   * @soyClasses radioClasses: .md3-radio\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-radio--touch': !this.reducedTouchTarget,\n      'md3-ripple-upgraded--background-focused': this.focused,\n      'md3-radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=\"md3-radio ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input\n          tabindex=\"${this.formElementTabIndex}\"\n          class=\"md3-radio__native-control\"\n          type=\"radio\"\n          name=\"${this.name}\"\n          aria-label=\"${this.ariaLabel || nothing}\"\n          .checked=\"${this.checked}\"\n          .value=\"${this.value}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this.handleChange}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerdown=${this.handlePointerDown}\n          ${ripple(this.getRipple)}\n          >\n        <div class=\"md3-radio__background\">\n          <div class=\"md3-radio__outer-circle\"></div>\n          <div class=\"md3-radio__inner-circle\"></div>\n        </div>\n        <div class=\"md3-radio__ripple\">\n          ${when(this.showRipple, this.renderRipple)}\n        </div>\n      </div>`;\n  }\n\n  private handleBlur() {\n    this.focused = false;\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.focused = true;\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handleChange() {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private handlePointerDown(event: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;\n  }\n}\n"]}

package/ripple/_ripple.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/ripple' show theme;

package/ripple/directive.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Directive, DirectiveParameters, ElementPart, PartInfo } from 'lit/directive.js';
+import { Ripple } from './lib/ripple.js';
+/**
+ * Normalized ripple accessor type.
+ *
+ * Use with `await rippleFunction()`
+ */
+declare type RippleFunction = () => Ripple | null | Promise<Ripple | null>;
+declare class RippleDirective extends Directive {
+    private rippleGetter;
+    private element?;
+    private state;
+    private checkBoundsAfterContextMenu;
+    private rippleStartEvent;
+    private touchTimer;
+    private clickTimer;
+    constructor(partInfo: PartInfo);
+    render(ripple: RippleFunction | Promise<Ripple | null>): symbol;
+    handleEvent(event: Event): Promise<void>;
+    update(part: ElementPart, [ripple]: DirectiveParameters<this>): symbol;
+    /**
+     * Returns `true` if
+     *  - the ripple element is enabled
+     *  - the pointer is primary for the input type
+     *  - the pointer is the pointer that started the interaction, or will start
+     * the interaction
+     *  - the pointer is a touch, or the pointer state has the primary button
+     * held, or the pointer is hovering
+     */
+    private shouldReactToEvent;
+    private isTouch;
+    /**
+     * Check if the event is within the bounds of the element.
+     *
+     * This is only needed for the "stuck" contextmenu longpress on Chrome.
+     */
+    private inBounds;
+    private beginPress;
+    private endPress;
+    private waitForTouchHold;
+    private click;
+    private contextMenu;
+    private pointerDown;
+    private pointerUp;
+    private pointerCancel;
+    private pointerEnter;
+    private pointerLeave;
+}
+/**
+ * Connects a Ripple element to a node that drives the interaction
+ *
+ * @param rippleGetter A function that returns an `md-ripple` element
+ * @param simulateKeyboardClick For elements that do not issue a click on
+ *     keyboard interaction, pass `true` to enable press animations on Enter or
+ *     Spacebar
+ */
+export declare const ripple: (ripple: Promise<Ripple> | RippleFunction) => import("lit-html/directive.js").DirectiveResult<typeof RippleDirective>;
+export {};