@material/web 1.0.0-pre.2 → 1.0.0-pre.3

package/radio/lib/radio-styles.scss

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

package/radio/lib/radio.js

@@ -21,6 +21,27 @@ const CHECKED = Symbol('checked');
  * A radio component.
  */
 export class Radio extends LitElement {
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked() {
+        return this[CHECKED];
+    }
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
+            return;
+        }
+        this[CHECKED] = checked;
+        this.requestUpdate('checked', wasChecked);
+        this.selectionController.handleCheckedChange();
+    }
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.closest('form');
+    }
     constructor() {
         super();
         this[_a] = false;
@@ -56,27 +77,6 @@ export class Radio extends LitElement {
             dispatchActivationClick(this.input);
         });
     }
-    /**
-     * Whether or not the radio is selected.
-     */
-    get checked() {
-        return this[CHECKED];
-    }
-    set checked(checked) {
-        const wasChecked = this.checked;
-        if (wasChecked === checked) {
-            return;
-        }
-        this[CHECKED] = checked;
-        this.requestUpdate('checked', wasChecked);
-        this.selectionController.handleCheckedChange();
-    }
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form() {
-        return this.closest('form');
-    }
     [(_a = CHECKED, getFormValue)]() {
         return this.checked ? this.value : null;
     }

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 * A radio component.\n */\nexport class Radio extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /**\n   * @nocollapse\n   */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the radio is selected.\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  /**\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({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, 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 * A radio component.\n */\nexport class Radio extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /**\n   * @nocollapse\n   */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the radio is selected.\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  /**\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({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"]}

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;;;;;;;;;;;;;;;GAeG;AAEH,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/**\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"]}
+{"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/directive.d.ts

@@ -10,46 +10,14 @@ import { Ripple } from './lib/ripple.js';
  *
  * Use with `await rippleFunction()`
  */
-declare type RippleFunction = () => Ripple | null | Promise<Ripple | null>;
+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

package/ripple/directive.js

@@ -5,65 +5,10 @@
  */
 import { noChange } from 'lit';
 import { Directive, directive, PartType } from 'lit/directive.js';
-/**
- * Delay reacting to touch so that we do not show the ripple for a swipe or
- * scroll interaction.
- */
-const TOUCH_DELAY_MS = 150;
-/**
- * Interaction states for the ripple.
- *
- * On Touch:
- *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
- *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
- *
- * On Mouse or Pen:
- *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
- */
-var State;
-(function (State) {
-    /**
-     * Initial state of the control, no touch in progress.
-     *
-     * Transitions:
-     *   - on touch down: transition to `TOUCH_DELAY`.
-     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
-     */
-    State[State["INACTIVE"] = 0] = "INACTIVE";
-    /**
-     * Touch down has been received, waiting to determine if it's a swipe or
-     * scroll.
-     *
-     * Transitions:
-     *   - on touch up: beginPress(); transition to `WAITING_FOR_CLICK`.
-     *   - on cancel: transition to `INACTIVE`.
-     *   - after `TOUCH_DELAY_MS`: beginPress(); transition to `HOLDING`.
-     */
-    State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
-    /**
-     * A touch has been deemed to be a press
-     *
-     * Transitions:
-     *  - on up: transition to `WAITING_FOR_CLICK`.
-     */
-    State[State["HOLDING"] = 2] = "HOLDING";
-    /**
-     * The user touch has finished, transition into rest state.
-     *
-     * Transitions:
-     *   - on click endPress(); transition to `INACTIVE`.
-     */
-    State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
-})(State || (State = {}));
 class RippleDirective extends Directive {
     constructor(partInfo) {
         super(partInfo);
         this.rippleGetter = async () => null;
-        this.state = State.INACTIVE;
-        this.checkBoundsAfterContextMenu = false;
-        this.rippleStartEvent = null;
-        this.touchTimer = null;
-        this.clickTimer = null;
         if (partInfo.type !== PartType.ELEMENT) {
             throw new Error('The `ripple` directive must be used on an element');
         }
@@ -80,25 +25,25 @@ class RippleDirective extends Directive {
         }
         switch (event.type) {
             case 'click':
-                this.click(ripple);
+                ripple.handleClick();
                 break;
             case 'contextmenu':
-                this.contextMenu(ripple);
+                ripple.handleContextmenu();
                 break;
             case 'pointercancel':
-                this.pointerCancel(ripple, event);
+                ripple.handlePointercancel(event);
                 break;
             case 'pointerdown':
-                this.pointerDown(ripple, event);
+                await ripple.handlePointerdown(event);
                 break;
             case 'pointerenter':
-                this.pointerEnter(ripple, event);
+                ripple.handlePointerenter(event);
                 break;
             case 'pointerleave':
-                this.pointerLeave(ripple, event);
+                ripple.handlePointerleave(event);
                 break;
             case 'pointerup':
-                this.pointerUp(ripple, event);
+                ripple.handlePointerup(event);
                 break;
             default:
                 break;
@@ -121,138 +66,6 @@ class RippleDirective extends Directive {
         this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple;
         return noChange;
     }
-    /**
-     * 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
-     */
-    shouldReactToEvent(ripple, ev, hovering = false) {
-        const enabled = !ripple.disabled;
-        const isPrimaryPointer = ev.isPrimary;
-        const isInteractionPointer = this.rippleStartEvent === null ||
-            this.rippleStartEvent.pointerId === ev.pointerId;
-        const isPrimaryButton = ev.buttons === 1;
-        return enabled && isPrimaryPointer && isInteractionPointer &&
-            (this.isTouch(ev) || isPrimaryButton || hovering);
-    }
-    isTouch({ pointerType }) {
-        return pointerType === 'touch';
-    }
-    /**
-     * Check if the event is within the bounds of the element.
-     *
-     * This is only needed for the "stuck" contextmenu longpress on Chrome.
-     */
-    inBounds({ x, y }) {
-        const { top, left, bottom, right } = this.element.getBoundingClientRect();
-        return x >= left && x <= right && y >= top && y <= bottom;
-    }
-    beginPress(ripple) {
-        ripple.beginPress(this.rippleStartEvent);
-    }
-    endPress(ripple) {
-        ripple.endPress();
-        this.state = State.INACTIVE;
-        this.rippleStartEvent = null;
-        if (this.touchTimer) {
-            clearTimeout(this.touchTimer);
-            this.touchTimer = null;
-        }
-        if (this.clickTimer) {
-            clearTimeout(this.clickTimer);
-            this.clickTimer = null;
-        }
-    }
-    waitForTouchHold() {
-        if (this.touchTimer !== null) {
-            clearTimeout(this.touchTimer);
-        }
-        this.state = State.TOUCH_DELAY;
-        this.touchTimer = setTimeout(async () => {
-            const ripple = await this.rippleGetter();
-            if (ripple === null || this.state !== State.TOUCH_DELAY) {
-                return;
-            }
-            this.state = State.HOLDING;
-            this.beginPress(ripple);
-        }, TOUCH_DELAY_MS);
-    }
-    click(ripple) {
-        // Click is a MouseEvent in Firefox and Safari, so we cannot use
-        // `shouldReactToEvent`
-        if (ripple.disabled) {
-            return;
-        }
-        if (this.state === State.WAITING_FOR_CLICK) {
-            this.endPress(ripple);
-        }
-        else if (this.state === State.INACTIVE) {
-            // keyboard synthesized click event
-            this.beginPress(ripple);
-            this.endPress(ripple);
-        }
-    }
-    contextMenu(ripple) {
-        if (!ripple.disabled) {
-            this.checkBoundsAfterContextMenu = true;
-            this.endPress(ripple);
-        }
-    }
-    pointerDown(ripple, ev) {
-        if (!this.shouldReactToEvent(ripple, ev)) {
-            return;
-        }
-        this.rippleStartEvent = ev;
-        if (this.isTouch(ev)) {
-            // after a longpress contextmenu event, an extra `pointerdown` can be
-            // dispatched to the pressed element. Check that the down is within
-            // bounds of the element in this case.
-            if (this.checkBoundsAfterContextMenu && !this.inBounds(ev)) {
-                return;
-            }
-            this.checkBoundsAfterContextMenu = false;
-            this.waitForTouchHold();
-        }
-        else {
-            this.state = State.WAITING_FOR_CLICK;
-            this.beginPress(ripple);
-        }
-    }
-    pointerUp(ripple, ev) {
-        if (!this.isTouch(ev) || !this.shouldReactToEvent(ripple, ev)) {
-            return;
-        }
-        if (this.state === State.HOLDING) {
-            this.state = State.WAITING_FOR_CLICK;
-        }
-        else if (this.state === State.TOUCH_DELAY) {
-            this.state = State.WAITING_FOR_CLICK;
-            this.beginPress(ripple);
-        }
-    }
-    pointerCancel(ripple, ev) {
-        if (this.shouldReactToEvent(ripple, ev)) {
-            this.endPress(ripple);
-        }
-    }
-    pointerEnter(ripple, ev) {
-        if (this.shouldReactToEvent(ripple, ev, true)) {
-            ripple.beginHover(ev);
-        }
-    }
-    pointerLeave(ripple, ev) {
-        if (this.shouldReactToEvent(ripple, ev, true)) {
-            ripple.endHover();
-            // release a held mouse or pen press that moves outside the element
-            if (!this.isTouch(ev) && this.state !== State.INACTIVE) {
-                this.endPress(ripple);
-            }
-        }
-    }
 }
 /**
  * Connects a Ripple element to a node that drives the interaction

package/ripple/directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"directive.js","sourceRoot":"","sources":["directive.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 {noChange} from 'lit';\nimport {Directive, directive, DirectiveParameters, ElementPart, PartInfo, PartType} from 'lit/directive.js';\n\nimport {Ripple} from './lib/ripple.js';\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: beginPress(); transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: beginPress(); transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click endPress(); transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK\n}\n\n/**\n * Normalized ripple accessor type.\n *\n * Use with `await rippleFunction()`\n */\ntype RippleFunction = () => Ripple|null|Promise<Ripple|null>;\n\nclass RippleDirective extends Directive {\n  private rippleGetter: RippleFunction = async () => null;\n  private element?: HTMLElement;\n  private state: State = State.INACTIVE;\n  private checkBoundsAfterContextMenu = false;\n  private rippleStartEvent: PointerEvent|null = null;\n  private touchTimer: number|null = null;\n  private clickTimer: number|null = null;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error('The `ripple` directive must be used on an element');\n    }\n  }\n\n  render(ripple: RippleFunction|Promise<Ripple|null>) {\n    return noChange;\n  }\n\n  // Use EventListenerObject::handleEvent interface to handle events without\n  // generating bound event handlers\n  async handleEvent(event: Event) {\n    const ripple = await this.rippleGetter();\n    if (!ripple) {\n      return;\n    }\n    switch (event.type) {\n      case 'click':\n        this.click(ripple);\n        break;\n      case 'contextmenu':\n        this.contextMenu(ripple);\n        break;\n      case 'pointercancel':\n        this.pointerCancel(ripple, event as PointerEvent);\n        break;\n      case 'pointerdown':\n        this.pointerDown(ripple, event as PointerEvent);\n        break;\n      case 'pointerenter':\n        this.pointerEnter(ripple, event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.pointerLeave(ripple, event as PointerEvent);\n        break;\n      case 'pointerup':\n        this.pointerUp(ripple, event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  override update(part: ElementPart, [ripple]: DirectiveParameters<this>) {\n    if (!this.element) {\n      // NOTE: addEventListener typing needs to be used with HTMLElements or a\n      // subclass\n      this.element = part.element as HTMLElement;\n      this.element.addEventListener('click', this);\n      this.element.addEventListener('contextmenu', this);\n      this.element.addEventListener('pointercancel', this);\n      this.element.addEventListener('pointerdown', this);\n      this.element.addEventListener('pointerenter', this);\n      this.element.addEventListener('pointerleave', this);\n      this.element.addEventListener('pointerup', this);\n    }\n    // Normalize given ripple accessor\n    this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple;\n    return noChange;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(\n      ripple: Ripple, ev: PointerEvent, hovering = false) {\n    const enabled = !ripple.disabled;\n    const isPrimaryPointer = ev.isPrimary;\n    const isInteractionPointer = this.rippleStartEvent === null ||\n        this.rippleStartEvent.pointerId === ev.pointerId;\n    const isPrimaryButton = ev.buttons === 1;\n    return enabled && isPrimaryPointer && isInteractionPointer &&\n        (this.isTouch(ev) || isPrimaryButton || hovering);\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n\n  /**\n   * Check if the event is within the bounds of the element.\n   *\n   * This is only needed for the \"stuck\" contextmenu longpress on Chrome.\n   */\n  private inBounds({x, y}: PointerEvent) {\n    const {top, left, bottom, right} = this.element!.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private beginPress(ripple: Ripple) {\n    ripple.beginPress(this.rippleStartEvent);\n  }\n\n  private endPress(ripple: Ripple) {\n    ripple.endPress();\n    this.state = State.INACTIVE;\n    this.rippleStartEvent = null;\n    if (this.touchTimer) {\n      clearTimeout(this.touchTimer);\n      this.touchTimer = null;\n    }\n    if (this.clickTimer) {\n      clearTimeout(this.clickTimer);\n      this.clickTimer = null;\n    }\n  }\n\n  private waitForTouchHold() {\n    if (this.touchTimer !== null) {\n      clearTimeout(this.touchTimer);\n    }\n    this.state = State.TOUCH_DELAY;\n    this.touchTimer = setTimeout(async () => {\n      const ripple = await this.rippleGetter();\n      if (ripple === null || this.state !== State.TOUCH_DELAY) {\n        return;\n      }\n      this.state = State.HOLDING;\n      this.beginPress(ripple);\n    }, TOUCH_DELAY_MS);\n  }\n\n  private click(ripple: Ripple) {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (ripple.disabled) {\n      return;\n    }\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPress(ripple);\n    } else if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.beginPress(ripple);\n      this.endPress(ripple);\n    }\n  }\n\n  private contextMenu(ripple: Ripple) {\n    if (!ripple.disabled) {\n      this.checkBoundsAfterContextMenu = true;\n      this.endPress(ripple);\n    }\n  }\n\n  private pointerDown(ripple: Ripple, ev: PointerEvent) {\n    if (!this.shouldReactToEvent(ripple, ev)) {\n      return;\n    }\n    this.rippleStartEvent = ev;\n    if (this.isTouch(ev)) {\n      // after a longpress contextmenu event, an extra `pointerdown` can be\n      // dispatched to the pressed element. Check that the down is within\n      // bounds of the element in this case.\n      if (this.checkBoundsAfterContextMenu && !this.inBounds(ev)) {\n        return;\n      }\n      this.checkBoundsAfterContextMenu = false;\n      this.waitForTouchHold();\n    } else {\n      this.state = State.WAITING_FOR_CLICK;\n      this.beginPress(ripple);\n    }\n  }\n\n  private pointerUp(ripple: Ripple, ev: PointerEvent) {\n    if (!this.isTouch(ev) || !this.shouldReactToEvent(ripple, ev)) {\n      return;\n    }\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n    } else if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.beginPress(ripple);\n    }\n  }\n\n  private pointerCancel(ripple: Ripple, ev: PointerEvent) {\n    if (this.shouldReactToEvent(ripple, ev)) {\n      this.endPress(ripple);\n    }\n  }\n\n  private pointerEnter(ripple: Ripple, ev: PointerEvent) {\n    if (this.shouldReactToEvent(ripple, ev, true)) {\n      ripple.beginHover(ev);\n    }\n  }\n\n  private pointerLeave(ripple: Ripple, ev: PointerEvent) {\n    if (this.shouldReactToEvent(ripple, ev, true)) {\n      ripple.endHover();\n      // release a held mouse or pen press that moves outside the element\n      if (!this.isTouch(ev) && this.state !== State.INACTIVE) {\n        this.endPress(ripple);\n      }\n    }\n  }\n}\n\n/**\n * Connects a Ripple element to a node that drives the interaction\n *\n * @param rippleGetter A function that returns an `md-ripple` element\n * @param simulateKeyboardClick For elements that do not issue a click on\n *     keyboard interaction, pass `true` to enable press animations on Enter or\n *     Spacebar\n */\nexport const ripple = directive(RippleDirective);"]}
+{"version":3,"file":"directive.js","sourceRoot":"","sources":["directive.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAC,SAAS,EAAE,SAAS,EAA8C,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAW5G,MAAM,eAAgB,SAAQ,SAAS;IAIrC,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAJV,iBAAY,GAAmB,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC;QAKtD,IAAI,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE;YACtC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;SACtE;IACH,CAAC;IAED,MAAM,CAAC,MAA2C;QAChD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,0EAA0E;IAC1E,kCAAkC;IAClC,KAAK,CAAC,WAAW,CAAC,KAAY;QAC5B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QACzC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,QAAQ,KAAK,CAAC,IAAI,EAAE;YAClB,KAAK,OAAO;gBACV,MAAM,CAAC,WAAW,EAAE,CAAC;gBACrB,MAAM;YACR,KAAK,aAAa;gBAChB,MAAM,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,MAAM;YACR,KAAK,eAAe;gBAClB,MAAM,CAAC,mBAAmB,CAAC,KAAqB,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,aAAa;gBAChB,MAAM,MAAM,CAAC,iBAAiB,CAAC,KAAqB,CAAC,CAAC;gBACtD,MAAM;YACR,KAAK,cAAc;gBACjB,MAAM,CAAC,kBAAkB,CAAC,KAAqB,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,cAAc;gBACjB,MAAM,CAAC,kBAAkB,CAAC,KAAqB,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,WAAW;gBACd,MAAM,CAAC,eAAe,CAAC,KAAqB,CAAC,CAAC;gBAC9C,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;IAEQ,MAAM,CAAC,IAAiB,EAAE,CAAC,MAAM,CAA4B;QACpE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,wEAAwE;YACxE,WAAW;YACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAsB,CAAC;YAC3C,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YAC7C,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;SAClD;QACD,kCAAkC;QAClC,IAAI,CAAC,YAAY,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC;QACzE,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {noChange} from 'lit';\nimport {Directive, directive, DirectiveParameters, ElementPart, PartInfo, PartType} from 'lit/directive.js';\n\nimport {Ripple} from './lib/ripple.js';\n\n/**\n * Normalized ripple accessor type.\n *\n * Use with `await rippleFunction()`\n */\ntype RippleFunction = () => Ripple|null|Promise<Ripple|null>;\n\nclass RippleDirective extends Directive {\n  private rippleGetter: RippleFunction = async () => null;\n  private element?: HTMLElement;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error('The `ripple` directive must be used on an element');\n    }\n  }\n\n  render(ripple: RippleFunction|Promise<Ripple|null>) {\n    return noChange;\n  }\n\n  // Use EventListenerObject::handleEvent interface to handle events without\n  // generating bound event handlers\n  async handleEvent(event: Event) {\n    const ripple = await this.rippleGetter();\n    if (!ripple) {\n      return;\n    }\n    switch (event.type) {\n      case 'click':\n        ripple.handleClick();\n        break;\n      case 'contextmenu':\n        ripple.handleContextmenu();\n        break;\n      case 'pointercancel':\n        ripple.handlePointercancel(event as PointerEvent);\n        break;\n      case 'pointerdown':\n        await ripple.handlePointerdown(event as PointerEvent);\n        break;\n      case 'pointerenter':\n        ripple.handlePointerenter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        ripple.handlePointerleave(event as PointerEvent);\n        break;\n      case 'pointerup':\n        ripple.handlePointerup(event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  override update(part: ElementPart, [ripple]: DirectiveParameters<this>) {\n    if (!this.element) {\n      // NOTE: addEventListener typing needs to be used with HTMLElements or a\n      // subclass\n      this.element = part.element as HTMLElement;\n      this.element.addEventListener('click', this);\n      this.element.addEventListener('contextmenu', this);\n      this.element.addEventListener('pointercancel', this);\n      this.element.addEventListener('pointerdown', this);\n      this.element.addEventListener('pointerenter', this);\n      this.element.addEventListener('pointerleave', this);\n      this.element.addEventListener('pointerup', this);\n    }\n    // Normalize given ripple accessor\n    this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple;\n    return noChange;\n  }\n}\n\n/**\n * Connects a Ripple element to a node that drives the interaction\n *\n * @param rippleGetter A function that returns an `md-ripple` element\n * @param simulateKeyboardClick For elements that do not issue a click on\n *     keyboard interaction, pass `true` to enable press animations on Enter or\n *     Spacebar\n */\nexport const ripple = directive(RippleDirective);\n"]}

package/ripple/lib/_md-comp-ripple.scss

@@ -3,27 +3,28 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../tokens';
+// go/keep-sorted end
 
-@function values($exclude-hardcoded-values: false) {
-  $state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
-  $default-shape: map.get(
-    tokens.md-sys-shape-values($exclude-hardcoded-values),
-    corner-none
-  );
-  $default-color: if($exclude-hardcoded-values, null, black);
-  // add missing tokens
-  $values: map.merge(
-    $state-values,
-    (
-      state-layer-shape: $default-shape,
-      focus-state-layer-color: $default-color,
-      hover-state-layer-color: $default-color,
-      pressed-state-layer-color: $default-color,
-      dragged-state-layer-color: $default-color,
-    )
-  );
+$_default-deps: (
+  md-sys-color: tokens.md-sys-color-values-light(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+  md-sys-state: tokens.md-sys-state-values(),
+);
 
-  @return $values;
+@function values($deps: $_default-deps) {
+  @return (
+    'focus-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'focus-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
+    'hover-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'hover-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
+    'pressed-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'pressed-opacity':
+      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
+    'shape': map.get($deps, 'md-sys-shape', 'corner-none')
+  );
 }

package/ripple/lib/_ripple.scss

@@ -3,13 +3,14 @@
 // 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:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../sass/theme';
 @use '../../tokens';
 @use './md-comp-ripple';
+// go/keep-sorted end
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(md-comp-ripple.values(), $tokens);
@@ -37,19 +38,19 @@
   }
 
   :host,
-  .md3-ripple-surface {
+  .surface {
     position: absolute;
     inset: 0;
     pointer-events: none;
     overflow: hidden;
   }
 
-  .md3-ripple-surface {
+  .surface {
     // 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.
     will-change: transform;
-    border-radius: var(--_state-layer-shape);
+    border-radius: var(--_shape);
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
@@ -62,7 +63,7 @@
     }
 
     &::before {
-      background-color: var(--_hover-state-layer-color);
+      background-color: var(--_hover-color);
       transition: opacity 15ms linear, background-color 15ms linear;
       inset: 0;
     }
@@ -71,7 +72,7 @@
       // 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;
@@ -79,33 +80,32 @@
     }
   }
 
-  .md3-ripple--hovered::before {
-    background-color: var(--_hover-state-layer-color);
-    opacity: var(--_hover-state-layer-opacity);
+  .hovered::before {
+    background-color: var(--_hover-color);
+    opacity: var(--_hover-opacity);
   }
 
-  .md3-ripple--focused::before {
-    background-color: var(--_focus-state-layer-color);
-    opacity: var(--_focus-state-layer-opacity);
+  .focused::before {
+    background-color: var(--_focus-color);
+    opacity: var(--_focus-opacity);
     transition-duration: 75ms;
   }
 
-  .md3-ripple--pressed::after {
+  .pressed::after {
     // press ripple fade-in
-    opacity: var(--_pressed-state-layer-opacity);
+    opacity: var(--_pressed-opacity);
     transition-duration: 105ms;
   }
 
-  .md3-ripple--unbounded {
+  .unbounded {
     $unbounded: (
-      state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
+      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')};
+    --_shape: #{map.get($unbounded, 'shape')};
   }
 
-  // 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{will-change:transform;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{--_focus-color: var(--md-ripple-focus-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-opacity: var(--md-ripple-focus-opacity, 0.12);--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);--_shape: var(--md-ripple-shape, 0px)}:host{display:flex}:host([disabled]){opacity:0}:host,.surface{position:absolute;inset:0;pointer-events:none;overflow:hidden}.surface{will-change:transform;border-radius:var(--_shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{position:absolute;opacity:0;pointer-events:none;content:""}.surface::before{background-color:var(--_hover-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.focused::before{background-color:var(--_focus-color);opacity:var(--_focus-opacity);transition-duration:75ms}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}.unbounded{--_shape: var(--md-ripple-shape, 9999px)}@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}.md3-ripple-surface{will-change:transform;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{--_focus-color: var(--md-ripple-focus-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-opacity: var(--md-ripple-focus-opacity, 0.12);--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);--_shape: var(--md-ripple-shape, 0px)}:host{display:flex}:host([disabled]){opacity:0}:host,.surface{position:absolute;inset:0;pointer-events:none;overflow:hidden}.surface{will-change:transform;border-radius:var(--_shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{position:absolute;opacity:0;pointer-events:none;content:\"\"}.surface::before{background-color:var(--_hover-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.focused::before{background-color:var(--_focus-color);opacity:var(--_focus-opacity);transition-duration:75ms}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}.unbounded{--_shape: var(--md-ripple-shape, 9999px)}@media screen and (forced-colors: active){:host{display:none}}/*# 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;