@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/radio/lib/radio.js

@@ -3,56 +3,24 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-var _a;
-import { __decorate, __metadata } from "tslib";
+var _a, _b;
+import { __decorate } from "tslib";
 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 { 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';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../internal/controller/events.js';
 import { SingleSelectionController } from './single-selection-controller.js';
 const CHECKED = Symbol('checked');
 /**
- * @fires checked
+ * A radio component.
  */
 export class Radio extends LitElement {
-    constructor() {
-        super();
-        this[_a] = false;
-        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 = '';
-        this.selectionController = new SingleSelectionController(this);
-        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.addController(this.selectionController);
-        this.addEventListener('click', (event) => {
-            if (!isActivationClick(event)) {
-                return;
-            }
-            this.focus();
-            dispatchActivationClick(this.input);
-        });
-    }
+    /**
+     * Whether or not the radio is selected.
+     */
     get checked() {
         return this[CHECKED];
     }
@@ -62,54 +30,88 @@ export class Radio extends LitElement {
             return;
         }
         this[CHECKED] = checked;
+        const state = String(checked);
+        this.internals.setFormValue(this.checked ? this.value : null, state);
         this.requestUpdate('checked', wasChecked);
         this.selectionController.handleCheckedChange();
     }
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
     /**
      * The associated form element with which this element's value will submit.
      */
     get form() {
-        return this.closest('form');
+        return this.internals.form;
+    }
+    /**
+     * The labels this element is associated with.
+     */
+    get labels() {
+        return this.internals.labels;
     }
-    [(_a = CHECKED, getFormValue)]() {
-        return this.checked ? this.value : null;
+    constructor() {
+        super();
+        this[_b] = false;
+        /**
+         * Whether or not the radio is disabled.
+         */
+        this.disabled = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.selectionController = new SingleSelectionController(this);
+        this.internals = this /* needed for closure */.attachInternals();
+        this.addController(this.selectionController);
+        if (!isServer) {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event)) {
+                    return;
+                }
+                this.focus();
+                dispatchActivationClick(this.input);
+            });
+        }
     }
     focus() {
         this.input?.focus();
     }
     render() {
+        const classes = { checked: this.checked };
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `
-      ${when(this.showRipple, this.renderRipple)}
-      ${this.renderFocusRing()}
-      <svg class="icon" viewBox="0 0 20 20">
-        <mask id="cutout">
-          <rect width="100%" height="100%" fill="white" />
-          <circle cx="10" cy="10" r="8" fill="black" />
-        </mask>
-        <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
-        <circle class="inner circle" cx="10" cy="10" r="5" />
-      </svg>
-      <input
-        type="radio"
-        name=${this.name}
-        aria-label=${this.ariaLabel || nothing}
-        .checked=${this.checked}
-        .value=${this.value}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @pointerdown=${this.handlePointerDown}
-        ${ripple(this.getRipple)}
-      >
+      <div class=${classMap(classes)}>
+        <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring for="input"></md-focus-ring>
+        <svg class="icon" viewBox="0 0 20 20">
+          <mask id="cutout">
+            <rect width="100%" height="100%" fill="white" />
+            <circle cx="10" cy="10" r="8" fill="black" />
+          </mask>
+          <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
+          <circle class="inner circle" cx="10" cy="10" r="5" />
+        </svg>
+        <input
+          id="input"
+          type="radio"
+          name=${this.name}
+          aria-label=${ariaLabel || nothing}
+          .checked=${this.checked}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        >
+      </div>
     `;
     }
-    handleBlur() {
-        this.showFocusRing = false;
-    }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
-    }
     handleChange(event) {
         if (this.disabled) {
             return;
@@ -118,53 +120,35 @@ export class Radio extends LitElement {
         this.checked = true;
         redispatchEvent(this, event);
     }
-    handlePointerDown() {
-        pointerPress();
-        this.showFocusRing = shouldShowStrongFocus();
+    /** @private */
+    formResetCallback() {
+        // The checked property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.checked = this.hasAttribute('checked');
     }
-    renderFocusRing() {
-        return html `<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;
+    /** @private */
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
     }
 }
+_a = Radio, _b = CHECKED;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+/** @nocollapse */
 Radio.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+/** @nocollapse */
 Radio.formAssociated = true;
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
+    property({ type: Boolean })
 ], Radio.prototype, "checked", null);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], Radio.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], Radio.prototype, "value", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
-], Radio.prototype, "name", void 0);
-__decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], Radio.prototype, "ariaLabel", void 0);
-__decorate([
-    query('input'),
-    __metadata("design:type", HTMLInputElement)
+    query('input')
 ], 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\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.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\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * @fires checked\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() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  @property({type: Boolean, reflect: true}) 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  @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  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private readonly selectionController = new SingleSelectionController(this);\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addController(this.selectionController);\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  protected override render(): TemplateResult {\n    return html`\n      ${when(this.showRipple, this.renderRipple)}\n      ${this.renderFocusRing()}\n      <svg class=\"icon\" viewBox=\"0 0 20 20\">\n        <mask id=\"cutout\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n        </mask>\n        <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout)\" />\n        <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n      </svg>\n      <input\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    `;\n  }\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handleChange(event: Event) {\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    redispatchEvent(this, event);\n  }\n\n  private handlePointerDown() {\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"]}
+{"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\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * A radio component.\n */\nexport class Radio extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /** @nocollapse */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    const state = String(checked);\n    this.internals.setFormValue(this.checked ? this.value : null, state);\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this.internals.labels;\n  }\n\n  @query('input') private readonly input!: HTMLInputElement|null;\n  private readonly selectionController = new SingleSelectionController(this);\n  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this.addEventListener('click', (event: Event) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input!);\n      });\n    }\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  protected override render() {\n    const classes = {checked: this.checked};\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div class=${classMap(classes)}>\n        <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring for=\"input\"></md-focus-ring>\n        <svg class=\"icon\" viewBox=\"0 0 20 20\">\n          <mask id=\"cutout\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n          </mask>\n          <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout)\" />\n          <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n        </svg>\n        <input\n          id=\"input\"\n          type=\"radio\"\n          name=${this.name}\n          aria-label=${ariaLabel || nothing}\n          .checked=${this.checked}\n          .value=${this.value}\n          ?disabled=${this.disabled}\n          @change=${this.handleChange}\n        >\n      </div>\n    `;\n  }\n\n  private handleChange(event: Event) {\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    redispatchEvent(this, event);\n  }\n\n  /** @private */\n  formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n}\n"]}

package/radio/radio.d.ts

@@ -9,7 +9,22 @@ declare global {
         'md-radio': MdRadio;
     }
 }
-/** @soyCompatible */
+/**
+ * @summary Radio buttons allow users to select one option from a set.
+ *
+ * @description
+ * Radio buttons are the recommended way to allow users to make a single
+ * selection from a list of options.
+ *
+ * Only one radio button can be selected at a time.
+ *
+ * Use radio buttons to:
+ * - Select a single option from a set
+ * - Expose all available options
+ *
+ * @final
+ * @suppress {visibility}
+ */
 export declare class MdRadio extends Radio {
     static styles: import("lit").CSSResult[];
 }

package/radio/radio.js

@@ -8,7 +8,22 @@ import { customElement } from 'lit/decorators.js';
 import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js';
 import { Radio } from './lib/radio.js';
 import { styles } from './lib/radio-styles.css.js';
-/** @soyCompatible */
+/**
+ * @summary Radio buttons allow users to select one option from a set.
+ *
+ * @description
+ * Radio buttons are the recommended way to allow users to make a single
+ * selection from a list of options.
+ *
+ * Only one radio button can be selected at a time.
+ *
+ * Use radio buttons to:
+ * - Select a single option from a set
+ * - Expose all available options
+ *
+ * @final
+ * @suppress {visibility}
+ */
 let MdRadio = class MdRadio extends Radio {
 };
 MdRadio.styles = [styles, forcedColorsStyles];

package/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD,qBAAqB;AAErB,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,KAAK;CAEjC,CAAA;AADiB,cAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAE,CAAA;AAD3C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';\nimport {Radio} from './lib/radio.js';\nimport {styles} from './lib/radio-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-radio')\nexport class MdRadio extends Radio {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';\nimport {Radio} from './lib/radio.js';\nimport {styles} from './lib/radio-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n  }\n}\n\n/**\n * @summary Radio buttons allow users to select one option from a set.\n *\n * @description\n * Radio buttons are the recommended way to allow users to make a single\n * selection from a list of options.\n *\n * Only one radio button can be selected at a time.\n *\n * Use radio buttons to:\n * - Select a single option from a set\n * - Expose all available options\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-radio')\nexport class MdRadio extends Radio {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}

package/ripple/lib/_ripple.scss

@@ -3,128 +3,94 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
-@use '../../sass/theme';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../tokens';
-@use './md-comp-ripple';
+// go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-ripple.values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, ripple);
+  $supported-tokens: tokens.$md-comp-ripple-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
 
-  @include theme.emit-theme-vars($tokens);
+    @if $value {
+      --md-ripple-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
-  $tokens: md-comp-ripple.values();
-  $tokens: theme.create-theme-vars($tokens, ripple);
+  $tokens: tokens.md-comp-ripple-values();
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-ripple-#{$token}, #{$value});
     }
-  }
 
-  :host {
     display: flex;
+    margin: auto;
+    pointer-events: none;
   }
 
   :host([disabled]) {
-    opacity: 0;
+    display: none;
+  }
+
+  @media screen and (forced-colors: active) {
+    :host {
+      display: none;
+    }
   }
 
   :host,
-  .md3-ripple-surface {
+  .surface {
+    border-radius: inherit;
     position: absolute;
     inset: 0;
-    pointer-events: none;
     overflow: hidden;
   }
 
-  .md3-ripple-surface {
-    border-radius: var(--_state-layer-shape);
-    outline: none;
+  .surface {
     -webkit-tap-highlight-color: transparent;
 
     &::before,
     &::after {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
       content: '';
+      opacity: 0;
+      position: absolute;
     }
 
     &::before {
-      background-color: var(--_hover-state-layer-color);
-      transition: opacity 15ms linear, background-color 15ms linear;
+      background-color: var(--_hover-color);
       inset: 0;
+      transition: opacity 15ms linear, background-color 15ms linear;
     }
 
     &::after {
       // press ripple fade-out
       background: radial-gradient(
         closest-side,
-        var(--_pressed-state-layer-color) max(calc(100% - 70px), 65%),
+        var(--_pressed-color) max(calc(100% - 70px), 65%),
         transparent 100%
       );
-      transition: opacity 375ms linear;
       transform-origin: center center;
+      transition: opacity 375ms linear;
     }
   }
 
-  .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;
+  .hovered::before {
+    background-color: var(--_hover-color);
+    opacity: var(--_hover-opacity);
   }
 
-  .md3-ripple--pressed::after {
+  .pressed::after {
     // press ripple fade-in
-    opacity: var(--_pressed-state-layer-opacity);
+    opacity: var(--_pressed-opacity);
     transition-duration: 105ms;
   }
-
-  // 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'),
-    );
-    $unbounded: theme.create-theme-vars($unbounded, ripple);
-
-    --_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 {
-      display: none;
-    }
-  }
 }

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}.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 */
+export const styles = css `:host{--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media screen and (forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--_hover-color);inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}/*# 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}.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 "]}
+{"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{--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media screen and (forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:\"\";opacity:0;position:absolute}.surface::before{background-color:var(--_hover-color);inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}

package/ripple/lib/ripple-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './ripple';
+// go/keep-sorted end
 
 @include ripple.styles;