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

package/radio/lib/radio.js

@@ -8,27 +8,32 @@ import { __decorate, __metadata } from "tslib";
 // tslint:disable:strip-private-property-underscore
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { html } from 'lit';
-import { property, query, state } from 'lit/decorators.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 { ActionElement } from '../../actionelement/action-element.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 { MdRipple } from '../../ripple/ripple.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.
@@ -42,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;
     }
     /**
@@ -70,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;
@@ -84,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();
@@ -126,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
@@ -186,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;
         }
@@ -234,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),
@@ -265,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([
@@ -276,10 +243,6 @@ __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
     ,
@@ -287,15 +250,23 @@ __decorate([
     __metadata("design:type", String)
 ], Radio.prototype, "ariaLabel", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ attribute: 'data-aria-labelledby', noAccessor: true }),
-    __metadata("design:type", String)
-], Radio.prototype, "ariaLabelledBy", void 0);
+    state(),
+    __metadata("design:type", Object)
+], Radio.prototype, "focused", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
-    __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 '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\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 {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.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 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  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-labelledby', noAccessor: true})\n  ariaLabelledBy!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-describedby', noAccessor: true})\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/lib/_ripple.scss

@@ -42,9 +42,6 @@
     inset: 0;
     pointer-events: none;
     overflow: hidden;
-    // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
-    // Remove Safari workaround for incorrect ripple overflow when addressed.
-    transform: scale(1);
   }
 
   .md3-ripple-surface {
@@ -95,7 +92,13 @@
     transition-duration: 105ms;
   }
 
-  .md3-ripple--unbounded {
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround for incorrect ripple overflow:
+  // setting shape token to `:host([unbounded])` so border-radius can be set
+  // only in this state.
+  // This addresses `hover` and `pressed` state oveflow.
+  .md3-ripple--unbounded,
+  :host([unbounded]) {
     $unbounded: (
       state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
     );
@@ -104,6 +107,20 @@
     --_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
   }
 
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround for incorrect ripple overflow when addressed.
+  // This addresses `hover` and `pressed` state oveflow.
+  :host([unbounded]) {
+    border-radius: var(--_state-layer-shape);
+  }
+
+  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+  // Remove Safari workaround for incorrect ripple overflow when addressed.
+  // This addresses `during animation` state oveflow.
+  .md3-ripple--unbounded {
+    transform: scale(1);
+  }
+
   // TODO(b/230630968): create a forced-colors-mode mixin
   @media screen and (forced-colors: active) {
     :host {

package/ripple/lib/ripple-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_dragged-state-layer-opacity: var(--md-ripple-dragged-state-layer-opacity, 0.16);--_focus-state-layer-opacity: var(--md-ripple-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-ripple-hover-state-layer-opacity, 0.08);--_pressed-state-layer-opacity: var(--md-ripple-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-ripple-state-layer-shape, 0px);--_focus-state-layer-color: var(--md-ripple-focus-state-layer-color, black);--_hover-state-layer-color: var(--md-ripple-hover-state-layer-color, black);--_pressed-state-layer-color: var(--md-ripple-pressed-state-layer-color, black);--_dragged-state-layer-color: var(--md-ripple-dragged-state-layer-color, black)}:host{display:flex}:host([disabled]){opacity:0}:host,.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform:scale(1)}.md3-ripple-surface{border-radius:var(--_state-layer-shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;content:""}.md3-ripple-surface::before{background-color:var(--_hover-state-layer-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--_pressed-state-layer-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--hovered::before{background-color:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-ripple--focused::before{background-color:var(--_focus-state-layer-color);opacity:var(--_focus-state-layer-opacity);transition-duration:75ms}.md3-ripple--pressed::after{opacity:var(--_pressed-state-layer-opacity);transition-duration:105ms}.md3-ripple--unbounded{--_state-layer-shape: var(--md-ripple-state-layer-shape, 9999px)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */
+export const styles = css `:host{--_dragged-state-layer-opacity: var(--md-ripple-dragged-state-layer-opacity, 0.16);--_focus-state-layer-opacity: var(--md-ripple-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-ripple-hover-state-layer-opacity, 0.08);--_pressed-state-layer-opacity: var(--md-ripple-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-ripple-state-layer-shape, 0px);--_focus-state-layer-color: var(--md-ripple-focus-state-layer-color, black);--_hover-state-layer-color: var(--md-ripple-hover-state-layer-color, black);--_pressed-state-layer-color: var(--md-ripple-pressed-state-layer-color, black);--_dragged-state-layer-color: var(--md-ripple-dragged-state-layer-color, black)}:host{display:flex}:host([disabled]){opacity:0}:host,.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden}.md3-ripple-surface{border-radius:var(--_state-layer-shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;content:""}.md3-ripple-surface::before{background-color:var(--_hover-state-layer-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--_pressed-state-layer-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--hovered::before{background-color:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-ripple--focused::before{background-color:var(--_focus-state-layer-color);opacity:var(--_focus-state-layer-opacity);transition-duration:75ms}.md3-ripple--pressed::after{opacity:var(--_pressed-state-layer-opacity);transition-duration:105ms}.md3-ripple--unbounded,:host([unbounded]){--_state-layer-shape: var(--md-ripple-state-layer-shape, 9999px)}:host([unbounded]){border-radius:var(--_state-layer-shape)}.md3-ripple--unbounded{transform:scale(1)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */
 `;
 //# sourceMappingURL=ripple-styles.css.js.map

package/ripple/lib/ripple-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple-styles.css.js","sourceRoot":"","sources":["ripple-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`:host{--_dragged-state-layer-opacity: var(--md-ripple-dragged-state-layer-opacity, 0.16);--_focus-state-layer-opacity: var(--md-ripple-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-ripple-hover-state-layer-opacity, 0.08);--_pressed-state-layer-opacity: var(--md-ripple-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-ripple-state-layer-shape, 0px);--_focus-state-layer-color: var(--md-ripple-focus-state-layer-color, black);--_hover-state-layer-color: var(--md-ripple-hover-state-layer-color, black);--_pressed-state-layer-color: var(--md-ripple-pressed-state-layer-color, black);--_dragged-state-layer-color: var(--md-ripple-dragged-state-layer-color, black)}:host{display:flex}:host([disabled]){opacity:0}:host,.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform:scale(1)}.md3-ripple-surface{border-radius:var(--_state-layer-shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;content:\"\"}.md3-ripple-surface::before{background-color:var(--_hover-state-layer-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--_pressed-state-layer-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--hovered::before{background-color:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-ripple--focused::before{background-color:var(--_focus-state-layer-color);opacity:var(--_focus-state-layer-opacity);transition-duration:75ms}.md3-ripple--pressed::after{opacity:var(--_pressed-state-layer-opacity);transition-duration:105ms}.md3-ripple--unbounded{--_state-layer-shape: var(--md-ripple-state-layer-shape, 9999px)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}
+{"version":3,"file":"ripple-styles.css.js","sourceRoot":"","sources":["ripple-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`:host{--_dragged-state-layer-opacity: var(--md-ripple-dragged-state-layer-opacity, 0.16);--_focus-state-layer-opacity: var(--md-ripple-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-ripple-hover-state-layer-opacity, 0.08);--_pressed-state-layer-opacity: var(--md-ripple-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-ripple-state-layer-shape, 0px);--_focus-state-layer-color: var(--md-ripple-focus-state-layer-color, black);--_hover-state-layer-color: var(--md-ripple-hover-state-layer-color, black);--_pressed-state-layer-color: var(--md-ripple-pressed-state-layer-color, black);--_dragged-state-layer-color: var(--md-ripple-dragged-state-layer-color, black)}:host{display:flex}:host([disabled]){opacity:0}:host,.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden}.md3-ripple-surface{border-radius:var(--_state-layer-shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;content:\"\"}.md3-ripple-surface::before{background-color:var(--_hover-state-layer-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--_pressed-state-layer-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--hovered::before{background-color:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-ripple--focused::before{background-color:var(--_focus-state-layer-color);opacity:var(--_focus-state-layer-opacity);transition-duration:75ms}.md3-ripple--pressed::after{opacity:var(--_pressed-state-layer-opacity);transition-duration:105ms}.md3-ripple--unbounded,:host([unbounded]){--_state-layer-shape: var(--md-ripple-state-layer-shape, 9999px)}:host([unbounded]){border-radius:var(--_state-layer-shape)}.md3-ripple--unbounded{transform:scale(1)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}

package/ripple/lib/ripple.js

@@ -20,6 +20,9 @@ const ANIMATION_FILL = 'forwards';
 export class Ripple extends LitElement {
     constructor() {
         super(...arguments);
+        // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+        // Remove Safari workaround that requires reflecting `unbounded` so
+        // it can be styled against.
         this.unbounded = false;
         this.disabled = false;
         this.hovered = false;
@@ -193,7 +196,7 @@ __decorate([
     __metadata("design:type", HTMLElement)
 ], Ripple.prototype, "mdRoot", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Ripple.prototype, "unbounded", void 0);
 __decorate([

package/ripple/lib/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {createAnimationSignal, Easing} from '../../motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/** @soyCompatible */\nexport class Ripple extends LitElement {\n  @query('.md3-ripple-surface') mdRoot!: HTMLElement;\n\n  @property({type: Boolean}) unbounded = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() protected hovered = false;\n  @state() protected focused = false;\n  @state() protected pressed = false;\n\n  protected rippleSize = '';\n  protected rippleScale = '';\n  protected initialSize = 0;\n  protected pressAnimationSignal = createAnimationSignal();\n  protected growAnimation: Animation|null = null;\n  protected delayedEndPressHandle: number|null = null;\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-ripple-surface ${\n        classMap(this.getRenderRippleClasses())}\"></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      'md3-ripple--hovered': this.hovered,\n      'md3-ripple--focused': this.focused,\n      'md3-ripple--pressed': this.pressed,\n      'md3-ripple--unbounded': this.unbounded,\n    };\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover();\n      this.endFocus();\n      this.endPress();\n    }\n    super.update(changedProps);\n  }\n\n  protected getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  protected determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event|null) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  protected startPressAnimation(positionEvent?: Event|null) {\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    const signal = this.pressAnimationSignal.start();\n\n    const growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: Easing.STANDARD,\n          fill: ANIMATION_FILL\n        });\n\n    growAnimation.addEventListener('finish', () => {\n      this.pressAnimationSignal.finish();\n      this.growAnimation = null;\n    });\n\n    signal.addEventListener('abort', () => {\n      growAnimation.cancel();\n      this.growAnimation = null;\n    });\n\n    this.growAnimation = growAnimation;\n  }\n\n  /**\n   * @deprecated Use beginHover\n   */\n  startHover(hoverEvent?: Event) {\n    this.beginHover(hoverEvent);\n  }\n\n  beginHover(hoverEvent?: Event) {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true;\n    }\n  }\n\n  endHover() {\n    this.hovered = false;\n  }\n\n  /**\n   * @deprecated Use beginFocus\n   */\n  startFocus() {\n    this.beginFocus();\n  }\n\n  beginFocus() {\n    this.focused = true;\n  }\n\n  endFocus() {\n    this.focused = false;\n  }\n\n  /**\n   * @deprecated Use beginPress\n   */\n  startPress(positionEvent?: Event|null) {\n    this.beginPress(positionEvent);\n  }\n\n  beginPress(positionEvent?: Event|null) {\n    this.pressed = true;\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle);\n      this.delayedEndPressHandle = null;\n    }\n    this.startPressAnimation(positionEvent);\n  }\n\n  endPress() {\n    const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false;\n        this.delayedEndPressHandle = null;\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    }\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {createAnimationSignal, Easing} from '../../motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/** @soyCompatible */\nexport class Ripple extends LitElement {\n  @query('.md3-ripple-surface') mdRoot!: HTMLElement;\n\n  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)\n  // Remove Safari workaround that requires reflecting `unbounded` so\n  // it can be styled against.\n  @property({type: Boolean, reflect: true}) unbounded = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() protected hovered = false;\n  @state() protected focused = false;\n  @state() protected pressed = false;\n\n  protected rippleSize = '';\n  protected rippleScale = '';\n  protected initialSize = 0;\n  protected pressAnimationSignal = createAnimationSignal();\n  protected growAnimation: Animation|null = null;\n  protected delayedEndPressHandle: number|null = null;\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-ripple-surface ${\n        classMap(this.getRenderRippleClasses())}\"></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      'md3-ripple--hovered': this.hovered,\n      'md3-ripple--focused': this.focused,\n      'md3-ripple--pressed': this.pressed,\n      'md3-ripple--unbounded': this.unbounded,\n    };\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover();\n      this.endFocus();\n      this.endPress();\n    }\n    super.update(changedProps);\n  }\n\n  protected getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  protected determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event|null) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  protected startPressAnimation(positionEvent?: Event|null) {\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    const signal = this.pressAnimationSignal.start();\n\n    const growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: Easing.STANDARD,\n          fill: ANIMATION_FILL\n        });\n\n    growAnimation.addEventListener('finish', () => {\n      this.pressAnimationSignal.finish();\n      this.growAnimation = null;\n    });\n\n    signal.addEventListener('abort', () => {\n      growAnimation.cancel();\n      this.growAnimation = null;\n    });\n\n    this.growAnimation = growAnimation;\n  }\n\n  /**\n   * @deprecated Use beginHover\n   */\n  startHover(hoverEvent?: Event) {\n    this.beginHover(hoverEvent);\n  }\n\n  beginHover(hoverEvent?: Event) {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true;\n    }\n  }\n\n  endHover() {\n    this.hovered = false;\n  }\n\n  /**\n   * @deprecated Use beginFocus\n   */\n  startFocus() {\n    this.beginFocus();\n  }\n\n  beginFocus() {\n    this.focused = true;\n  }\n\n  endFocus() {\n    this.focused = false;\n  }\n\n  /**\n   * @deprecated Use beginPress\n   */\n  startPress(positionEvent?: Event|null) {\n    this.beginPress(positionEvent);\n  }\n\n  beginPress(positionEvent?: Event|null) {\n    this.pressed = true;\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle);\n      this.delayedEndPressHandle = null;\n    }\n    this.startPressAnimation(positionEvent);\n  }\n\n  endPress() {\n    const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false;\n        this.delayedEndPressHandle = null;\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    }\n  }\n}\n"]}

package/segmentedbutton/lib/_shared.scss

@@ -8,7 +8,7 @@
 
 @use 'sass:map';
 @use '../../motion/animation';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/color';
 @use '../../sass/resolvers';
 @use '../../sass/touch-target';
@@ -193,7 +193,7 @@
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color: var(--_unselected-hover-state-layer-color),
         hover-state-layer-opacity: var(--_hover-state-layer-opacity),
@@ -240,7 +240,7 @@
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color: var(--_selected-hover-state-layer-color),
         hover-state-layer-opacity: var(--_hover-state-layer-opacity),

package/switch/lib/_handle.scss

@@ -8,10 +8,11 @@
 
 @use 'sass:map';
 
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 
 @mixin styles() {
   .md3-switch__handle-container {
+    display: flex;
     $margin: calc(var(--_track-width) - var(--_track-height));
 
     .md3-switch--selected & {
@@ -88,7 +89,7 @@
     width: var(--_state-layer-size);
 
     .md3-switch--selected & {
-      @include ripple-theme.theme(
+      @include ripple.theme(
         (
           hover-state-layer-color: var(--_selected-hover-state-layer-color),
           focus-state-layer-color: var(--_selected-focus-state-layer-color),
@@ -102,7 +103,7 @@
     }
 
     .md3-switch--unselected & {
-      @include ripple-theme.theme(
+      @include ripple.theme(
         (
           hover-state-layer-color: var(--_unselected-hover-state-layer-color),
           focus-state-layer-color: var(--_unselected-focus-state-layer-color),