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

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

package/ripple/lib/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {createAnimationSignal, EASING} from '../../motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/** @soyCompatible */\nexport class Ripple extends LitElement {\n  @query('.md3-ripple-surface') mdRoot!: HTMLElement;\n\n  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)\n  // Remove Safari workaround that requires reflecting `unbounded` so\n  // it can be styled against.\n  @property({type: Boolean, reflect: true}) unbounded = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() protected hovered = false;\n  @state() protected focused = false;\n  @state() protected pressed = false;\n\n  protected rippleSize = '';\n  protected rippleScale = '';\n  protected initialSize = 0;\n  protected pressAnimationSignal = createAnimationSignal();\n  protected growAnimation: Animation|null = null;\n  protected delayedEndPressHandle: number|null = null;\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-ripple-surface ${\n        classMap(this.getRenderRippleClasses())}\"></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      'md3-ripple--hovered': this.hovered,\n      'md3-ripple--focused': this.focused,\n      'md3-ripple--pressed': this.pressed,\n      'md3-ripple--unbounded': this.unbounded,\n    };\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover();\n      this.endFocus();\n      this.endPress();\n    }\n    super.update(changedProps);\n  }\n\n  protected getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  protected determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event|null) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  protected startPressAnimation(positionEvent?: Event|null) {\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    const signal = this.pressAnimationSignal.start();\n\n    const growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: EASING.STANDARD,\n          fill: ANIMATION_FILL\n        });\n\n    growAnimation.addEventListener('finish', () => {\n      this.pressAnimationSignal.finish();\n      this.growAnimation = null;\n    });\n\n    signal.addEventListener('abort', () => {\n      growAnimation.cancel();\n      this.growAnimation = null;\n    });\n\n    this.growAnimation = growAnimation;\n  }\n\n  /**\n   * @deprecated Use beginHover\n   */\n  startHover(hoverEvent?: Event) {\n    this.beginHover(hoverEvent);\n  }\n\n  beginHover(hoverEvent?: Event) {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true;\n    }\n  }\n\n  endHover() {\n    this.hovered = false;\n  }\n\n  /**\n   * @deprecated Use beginFocus\n   */\n  startFocus() {\n    this.beginFocus();\n  }\n\n  beginFocus() {\n    this.focused = true;\n  }\n\n  endFocus() {\n    this.focused = false;\n  }\n\n  /**\n   * @deprecated Use beginPress\n   */\n  startPress(positionEvent?: Event|null) {\n    this.beginPress(positionEvent);\n  }\n\n  beginPress(positionEvent?: Event|null) {\n    this.pressed = true;\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle);\n      this.delayedEndPressHandle = null;\n    }\n    this.startPressAnimation(positionEvent);\n  }\n\n  endPress() {\n    const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false;\n        this.delayedEndPressHandle = null;\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    }\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\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: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; 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 end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK\n}\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 * A ripple component.\n */\nexport class Ripple extends LitElement {\n  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)\n  // Remove Safari workaround that requires reflecting `unbounded` so\n  // it can be styled against.\n  /**\n   * Sets the ripple to be an unbounded circle.\n   */\n  @property({type: Boolean, reflect: true}) unbounded = false;\n\n  /**\n   * Disables the ripple.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() private hovered = false;\n  @state() private focused = false;\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement;\n  private rippleSize = '';\n  private rippleScale = '';\n  private initialSize = 0;\n  private growAnimation?: Animation;\n  private state = State.INACTIVE;\n  private rippleStartEvent?: PointerEvent;\n  private checkBoundsAfterContextMenu = false;\n\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  handleFocusin() {\n    this.focused = true;\n  }\n\n  handleFocusout() {\n    this.focused = false;\n  }\n\n  handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\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(event)) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = false;\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise(resolve => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  handleClick() {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = true;\n    this.endPressAnimation();\n  }\n\n  protected override render() {\n    const classes = {\n      'hovered': this.hovered,\n      'focused': this.focused,\n      'pressed': this.pressed,\n      'unbounded': this.unbounded,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.focused = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  private getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  private determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: EASING.STANDARD,\n          fill: ANIMATION_FILL\n        });\n  }\n\n  private async endPressAnimation() {\n    const animation = this.growAnimation;\n    const pressAnimationPlayState = animation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise(resolve => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\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(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (this.rippleStartEvent &&\n        this.rippleStartEvent.pointerId !== event.pointerId) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\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.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n}\n"]}

package/ripple/ripple.d.ts

@@ -10,7 +10,15 @@ declare global {
     }
 }
 /**
- * @soyCompatible
+ * @summary Ripples, also known as state layers, are visual indicators used to
+ * communicate the status of a component or interactive element.
+ *
+ * @description A state layer is a semi-transparent covering on an element that
+ * indicates its state. State layers provide a systematic approach to
+ * visualizing states by using opacity. A layer can be applied to an entire
+ * element or in a circular shape and only one state layer can be applied at a
+ * given time.
+ *
  * @final
  * @suppress {visibility}
  */

package/ripple/ripple.js

@@ -8,7 +8,15 @@ import { customElement } from 'lit/decorators.js';
 import { Ripple } from './lib/ripple.js';
 import { styles } from './lib/ripple-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Ripples, also known as state layers, are visual indicators used to
+ * communicate the status of a component or interactive element.
+ *
+ * @description A state layer is a semi-transparent covering on an element that
+ * indicates its state. State layers provide a systematic approach to
+ * visualizing states by using opacity. A layer can be applied to an entire
+ * element or in a circular shape and only one state layer can be applied at a
+ * given time.
+ *
  * @final
  * @suppress {visibility}
  */

package/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;GAIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,MAAM;CAEnC,CAAA;AADiB,eAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","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 {Ripple} from './lib/ripple.js';\nimport {styles} from './lib/ripple-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-ripple': MdRipple;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-ripple')\nexport class MdRipple extends Ripple {\n  static override styles = [styles];\n}"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;;;;;;;;;GAYG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","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 {Ripple} from './lib/ripple.js';\nimport {styles} from './lib/ripple-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-ripple': MdRipple;\n  }\n}\n\n/**\n * @summary Ripples, also known as state layers, are visual indicators used to\n * communicate the status of a component or interactive element.\n *\n * @description A state layer is a semi-transparent covering on an element that\n * indicates its state. State layers provide a systematic approach to\n * visualizing states by using opacity. A layer can be applied to an entire\n * element or in a circular shape and only one state layer can be applied at a\n * given time.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-ripple')\nexport class MdRipple extends Ripple {\n  static override styles = [styles];\n}\n"]}

package/sass/_assert.scss

@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:meta';
+// go/keep-sorted end
 
 ///
 /// is-type returns the given value if it matches the given type. If not, it

package/sass/_color-scheme.scss

@@ -3,11 +3,15 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../tokens';
 @use './color';
 @use './theme';
 @use './var';
+// go/keep-sorted end
 
 // TODO(b/213571555): Following Sass mixins will call color scheme APIs which
 // are generated using tokens compiler when ready.

package/sass/_color.scss

@@ -3,13 +3,17 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
 @use './assert';
 @use './string-ext';
 @use './var';
+// go/keep-sorted end
 
 $_hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
 

package/sass/_elevation.scss

@@ -3,10 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
 @use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
 @use './color';
 @use './var';
+// go/keep-sorted end
 
 /// Returns the appropriate elevation theme for the given args.
 ///

package/sass/_feature-flags.scss

@@ -3,9 +3,11 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
+// go/keep-sorted end
 
 /// Valid configuration values for each config option.
 $_valid-values: (