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

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;

package/ripple/lib/ripple.d.ts

@@ -3,60 +3,62 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * A ripple component.
+ */
 export declare class Ripple extends LitElement {
-    mdRoot: HTMLElement;
+    /**
+     * Sets the ripple to be an unbounded circle.
+     */
     unbounded: boolean;
-    disabled: boolean;
-    protected hovered: boolean;
-    protected focused: boolean;
-    protected pressed: boolean;
-    protected rippleSize: string;
-    protected rippleScale: string;
-    protected initialSize: number;
-    protected pressAnimationSignal: import("../../motion/animation.js").AnimationSignal;
-    protected growAnimation: Animation | null;
-    protected delayedEndPressHandle: number | null;
-    /** @soyTemplate */
-    protected render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderRippleClasses(): ClassInfo;
-    protected update(changedProps: PropertyValues<this>): void;
-    protected getDimensions(): DOMRect;
-    protected determineRippleSize(): void;
-    protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {
-        x: number;
-        y: number;
-    };
-    protected getTranslationCoordinates(positionEvent?: Event | null): {
-        startPoint: {
-            x: number;
-            y: number;
-        };
-        endPoint: {
-            x: number;
-            y: number;
-        };
-    };
-    protected startPressAnimation(positionEvent?: Event | null): void;
     /**
-     * @deprecated Use beginHover
+     * Disables the ripple.
      */
-    startHover(hoverEvent?: Event): void;
-    beginHover(hoverEvent?: Event): void;
-    endHover(): void;
+    disabled: boolean;
+    private hovered;
+    private focused;
+    private pressed;
+    private readonly mdRoot;
+    private rippleSize;
+    private rippleScale;
+    private initialSize;
+    private growAnimation?;
+    private state;
+    private rippleStartEvent?;
+    private checkBoundsAfterContextMenu;
+    handlePointerenter(event: PointerEvent): void;
+    handlePointerleave(event: PointerEvent): void;
+    handleFocusin(): void;
+    handleFocusout(): void;
+    handlePointerup(event: PointerEvent): void;
+    handlePointerdown(event: PointerEvent): Promise<void>;
+    handleClick(): void;
+    handlePointercancel(event: PointerEvent): void;
+    handleContextmenu(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected update(changedProps: PropertyValues<this>): void;
+    private getDimensions;
+    private determineRippleSize;
+    private getNormalizedPointerEventCoords;
+    private getTranslationCoordinates;
+    private startPressAnimation;
+    private endPressAnimation;
     /**
-     * @deprecated Use beginFocus
+     * 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
      */
-    startFocus(): void;
-    beginFocus(): void;
-    endFocus(): void;
+    private shouldReactToEvent;
     /**
-     * @deprecated Use beginPress
+     * Check if the event is within the bounds of the element.
+     *
+     * This is only needed for the "stuck" contextmenu longpress on Chrome.
      */
-    startPress(positionEvent?: Event | null): void;
-    beginPress(positionEvent?: Event | null): void;
-    endPress(): void;
+    private inBounds;
+    private isTouch;
 }

package/ripple/lib/ripple.js

@@ -7,7 +7,7 @@ import { __decorate, __metadata } from "tslib";
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createAnimationSignal, EASING } from '../../motion/animation.js';
+import { EASING } from '../../motion/animation.js';
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
 const INITIAL_ORIGIN_SCALE = 0.2;
@@ -16,14 +16,72 @@ const SOFT_EDGE_MINIMUM_SIZE = 75;
 const SOFT_EDGE_CONTAINER_RATIO = 0.35;
 const PRESS_PSEUDO = '::after';
 const ANIMATION_FILL = 'forwards';
-/** @soyCompatible */
+/**
+ * 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: begin press; transition to `WAITING_FOR_CLICK`.
+     *   - on cancel: transition to `INACTIVE`.
+     *   - after `TOUCH_DELAY_MS`: begin press; 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 end press; transition to `INACTIVE`.
+     */
+    State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
+})(State || (State = {}));
+/**
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
+ */
+const TOUCH_DELAY_MS = 150;
+/**
+ * A ripple component.
+ */
 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.
+        /**
+         * Sets the ripple to be an unbounded circle.
+         */
         this.unbounded = false;
+        /**
+         * Disables the ripple.
+         */
         this.disabled = false;
         this.hovered = false;
         this.focused = false;
@@ -31,28 +89,116 @@ export class Ripple extends LitElement {
         this.rippleSize = '';
         this.rippleScale = '';
         this.initialSize = 0;
-        this.pressAnimationSignal = createAnimationSignal();
-        this.growAnimation = null;
-        this.delayedEndPressHandle = null;
+        this.state = State.INACTIVE;
+        this.checkBoundsAfterContextMenu = false;
+    }
+    handlePointerenter(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = true;
+    }
+    handlePointerleave(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = false;
+        // release a held mouse or pen press that moves outside the element
+        if (this.state !== State.INACTIVE) {
+            this.endPressAnimation();
+        }
+    }
+    handleFocusin() {
+        this.focused = true;
+    }
+    handleFocusout() {
+        this.focused = false;
+    }
+    handlePointerup(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        if (this.state === State.HOLDING) {
+            this.state = State.WAITING_FOR_CLICK;
+            return;
+        }
+        if (this.state === State.TOUCH_DELAY) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(this.rippleStartEvent);
+            return;
+        }
+    }
+    async handlePointerdown(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.rippleStartEvent = event;
+        if (!this.isTouch(event)) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(event);
+            return;
+        }
+        // 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(event)) {
+            return;
+        }
+        this.checkBoundsAfterContextMenu = false;
+        // Wait for a hold after touch delay
+        this.state = State.TOUCH_DELAY;
+        await new Promise(resolve => {
+            setTimeout(resolve, TOUCH_DELAY_MS);
+        });
+        if (this.state !== State.TOUCH_DELAY) {
+            return;
+        }
+        this.state = State.HOLDING;
+        this.startPressAnimation(event);
+    }
+    handleClick() {
+        // Click is a MouseEvent in Firefox and Safari, so we cannot use
+        // `shouldReactToEvent`
+        if (this.disabled) {
+            return;
+        }
+        if (this.state === State.WAITING_FOR_CLICK) {
+            this.endPressAnimation();
+            return;
+        }
+        if (this.state === State.INACTIVE) {
+            // keyboard synthesized click event
+            this.startPressAnimation();
+            this.endPressAnimation();
+        }
+    }
+    handlePointercancel(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    handleContextmenu() {
+        if (this.disabled) {
+            return;
+        }
+        this.checkBoundsAfterContextMenu = true;
+        this.endPressAnimation();
     }
-    /** @soyTemplate */
     render() {
-        return html `<div class="md3-ripple-surface ${classMap(this.getRenderRippleClasses())}"></div>`;
-    }
-    /** @soyTemplate */
-    getRenderRippleClasses() {
-        return {
-            'md3-ripple--hovered': this.hovered,
-            'md3-ripple--focused': this.focused,
-            'md3-ripple--pressed': this.pressed,
-            'md3-ripple--unbounded': this.unbounded,
+        const classes = {
+            'hovered': this.hovered,
+            'focused': this.focused,
+            'pressed': this.pressed,
+            'unbounded': this.unbounded,
         };
+        return html `<div class="surface ${classMap(classes)}"></div>`;
     }
     update(changedProps) {
         if (changedProps.has('disabled') && this.disabled) {
-            this.endHover();
-            this.endFocus();
-            this.endPress();
+            this.hovered = false;
+            this.focused = false;
+            this.pressed = false;
         }
         super.update(changedProps);
     }
@@ -108,12 +254,13 @@ export class Ripple extends LitElement {
         return { startPoint, endPoint };
     }
     startPressAnimation(positionEvent) {
+        this.pressed = true;
+        this.growAnimation?.cancel();
         this.determineRippleSize();
         const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
         const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
         const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
-        const signal = this.pressAnimationSignal.start();
-        const growAnimation = this.mdRoot.animate({
+        this.growAnimation = this.mdRoot.animate({
             top: [0, 0],
             left: [0, 0],
             height: [this.rippleSize, this.rippleSize],
@@ -128,73 +275,60 @@ export class Ripple extends LitElement {
             easing: EASING.STANDARD,
             fill: ANIMATION_FILL
         });
-        growAnimation.addEventListener('finish', () => {
-            this.pressAnimationSignal.finish();
-            this.growAnimation = null;
-        });
-        signal.addEventListener('abort', () => {
-            growAnimation.cancel();
-            this.growAnimation = null;
-        });
-        this.growAnimation = growAnimation;
-    }
-    /**
-     * @deprecated Use beginHover
-     */
-    startHover(hoverEvent) {
-        this.beginHover(hoverEvent);
     }
-    beginHover(hoverEvent) {
-        if (hoverEvent?.pointerType !== 'touch') {
-            this.hovered = true;
+    async endPressAnimation() {
+        const animation = this.growAnimation;
+        const pressAnimationPlayState = animation?.currentTime ?? Infinity;
+        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+            this.pressed = false;
+            return;
         }
-    }
-    endHover() {
-        this.hovered = false;
+        await new Promise(resolve => {
+            setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+        });
+        if (this.growAnimation !== animation) {
+            // A new press animation was started. The old animation was canceled and
+            // should not finish the pressed state.
+            return;
+        }
+        this.pressed = false;
     }
     /**
-     * @deprecated Use beginFocus
+     * 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
      */
-    startFocus() {
-        this.beginFocus();
-    }
-    beginFocus() {
-        this.focused = true;
-    }
-    endFocus() {
-        this.focused = false;
+    shouldReactToEvent(event) {
+        if (this.disabled || !event.isPrimary) {
+            return false;
+        }
+        if (this.rippleStartEvent &&
+            this.rippleStartEvent.pointerId !== event.pointerId) {
+            return false;
+        }
+        if (event.type === 'pointerenter' || event.type === 'pointerleave') {
+            return !this.isTouch(event);
+        }
+        const isPrimaryButton = event.buttons === 1;
+        return this.isTouch(event) || isPrimaryButton;
     }
     /**
-     * @deprecated Use beginPress
+     * Check if the event is within the bounds of the element.
+     *
+     * This is only needed for the "stuck" contextmenu longpress on Chrome.
      */
-    startPress(positionEvent) {
-        this.beginPress(positionEvent);
+    inBounds({ x, y }) {
+        const { top, left, bottom, right } = this.getBoundingClientRect();
+        return x >= left && x <= right && y >= top && y <= bottom;
     }
-    beginPress(positionEvent) {
-        this.pressed = true;
-        if (this.delayedEndPressHandle !== null) {
-            clearTimeout(this.delayedEndPressHandle);
-            this.delayedEndPressHandle = null;
-        }
-        this.startPressAnimation(positionEvent);
-    }
-    endPress() {
-        const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity;
-        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
-            this.pressed = false;
-        }
-        else {
-            this.delayedEndPressHandle = setTimeout(() => {
-                this.pressed = false;
-                this.delayedEndPressHandle = null;
-            }, MINIMUM_PRESS_MS - pressAnimationPlayState);
-        }
+    isTouch({ pointerType }) {
+        return pointerType === 'touch';
     }
 }
-__decorate([
-    query('.md3-ripple-surface'),
-    __metadata("design:type", HTMLElement)
-], Ripple.prototype, "mdRoot", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
@@ -215,4 +349,8 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Ripple.prototype, "pressed", void 0);
+__decorate([
+    query('.surface'),
+    __metadata("design:type", HTMLElement)
+], Ripple.prototype, "mdRoot", void 0);
 //# sourceMappingURL=ripple.js.map