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

package/ripple/directive.js

@@ -0,0 +1,266 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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');
+        }
+    }
+    render(ripple) {
+        return noChange;
+    }
+    // Use EventListenerObject::handleEvent interface to handle events without
+    // generating bound event handlers
+    async handleEvent(event) {
+        const ripple = await this.rippleGetter();
+        if (!ripple) {
+            return;
+        }
+        switch (event.type) {
+            case 'click':
+                this.click(ripple);
+                break;
+            case 'contextmenu':
+                this.contextMenu(ripple);
+                break;
+            case 'pointercancel':
+                this.pointerCancel(ripple, event);
+                break;
+            case 'pointerdown':
+                this.pointerDown(ripple, event);
+                break;
+            case 'pointerenter':
+                this.pointerEnter(ripple, event);
+                break;
+            case 'pointerleave':
+                this.pointerLeave(ripple, event);
+                break;
+            case 'pointerup':
+                this.pointerUp(ripple, event);
+                break;
+            default:
+                break;
+        }
+    }
+    update(part, [ripple]) {
+        if (!this.element) {
+            // NOTE: addEventListener typing needs to be used with HTMLElements or a
+            // subclass
+            this.element = part.element;
+            this.element.addEventListener('click', this);
+            this.element.addEventListener('contextmenu', this);
+            this.element.addEventListener('pointercancel', this);
+            this.element.addEventListener('pointerdown', this);
+            this.element.addEventListener('pointerenter', this);
+            this.element.addEventListener('pointerleave', this);
+            this.element.addEventListener('pointerup', this);
+        }
+        // Normalize given ripple accessor
+        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
+ *
+ * @param rippleGetter A function that returns an `md-ripple` element
+ * @param simulateKeyboardClick For elements that do not issue a click on
+ *     keyboard interaction, pass `true` to enable press animations on Enter or
+ *     Spacebar
+ */
+export const ripple = directive(RippleDirective);
+//# sourceMappingURL=directive.js.map

package/ripple/directive.js.map

@@ -0,0 +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);"]}

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

@@ -0,0 +1,29 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../tokens';
+
+@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,
+    )
+  );
+
+  @return $values;
+}

package/ripple/lib/_ripple.scss

@@ -6,79 +6,108 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
-  :host {
-    @include common;
-    @include host;
-  }
-
-  :host([disabled]) {
-    @include disabled;
-  }
+@use 'sass:map';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './md-comp-ripple';
 
-  .md3-ripple-surface {
-    @include common;
-    @include surface;
-  }
-
-  .md3-ripple--focused {
-    @include focused;
-  }
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(md-comp-ripple.values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, ripple);
 
-  .md3-ripple--pressed {
-    @include pressed;
-  }
+  @include theme.emit-theme-vars($tokens);
 }
 
-@mixin disabled() {
-  opacity: 0;
-}
+@mixin styles() {
+  $tokens: md-comp-ripple.values();
+  $tokens: theme.create-theme-vars($tokens, ripple);
 
-@mixin common() {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
 
-@mixin host() {
-  display: flex;
-}
+  :host {
+    display: flex;
+  }
 
-@mixin surface() {
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
+  :host([disabled]) {
+    opacity: 0;
+  }
 
-  &::before,
-  &::after {
+  :host,
+  .md3-ripple-surface {
     position: absolute;
-    opacity: 0;
+    inset: 0;
     pointer-events: none;
-    z-index: -1;
-    content: '';
+    overflow: hidden;
+    // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
+    // Remove Safari workaround for incorrect ripple overflow when addressed.
+    transform: scale(1);
   }
 
-  &::before {
-    transition: opacity 15ms linear, background-color 15ms linear;
-    inset: 0;
+  .md3-ripple-surface {
+    border-radius: var(--_state-layer-shape);
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &::before,
+    &::after {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+      content: '';
+    }
+
+    &::before {
+      background-color: var(--_hover-state-layer-color);
+      transition: opacity 15ms linear, background-color 15ms linear;
+      inset: 0;
+    }
+
+    &::after {
+      // press ripple fade-out
+      background: radial-gradient(
+        closest-side,
+        var(--_pressed-state-layer-color) max(calc(100% - 70px), 65%),
+        transparent 100%
+      );
+      transition: opacity 375ms linear;
+      transform-origin: center center;
+    }
   }
 
-  &::after {
-    // press ripple fade-out
-    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);
   }
-}
 
-@mixin focused() {
-  &::before {
+  .md3-ripple--focused::before {
+    background-color: var(--_focus-state-layer-color);
+    opacity: var(--_focus-state-layer-opacity);
     transition-duration: 75ms;
   }
-}
 
-@mixin pressed() {
-  &::after {
+  .md3-ripple--pressed::after {
     // press ripple fade-in
+    opacity: var(--_pressed-state-layer-opacity);
     transition-duration: 105ms;
   }
+
+  .md3-ripple--unbounded {
+    $unbounded: (
+      state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
+    );
+    $unbounded: theme.create-theme-vars($unbounded, ripple);
+
+    --_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
+  }
+
+  // TODO(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{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex}:host([disabled]){opacity:0}.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;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;z-index:-1;content:""}.md3-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--focused::before{transition-duration:75ms}.md3-ripple--pressed::after{transition-duration:105ms}.md3-ripple-surface{border-radius:var(--md-ripple-state-layer-shape, 0)}.md3-ripple-surface::before{background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-state-layer-color, black) max(100% - 70px, 65%), transparent 100%)}.md3-ripple-surface.md3-ripple--hovered::before{opacity:var(--md-ripple-hover-state-layer-opacity, 0.08);background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface.md3-ripple--focused::before{opacity:var(--md-ripple-focus-state-layer-opacity, 0.12);background-color:var(--md-ripple-focus-state-layer-color, black)}.md3-ripple-surface.md3-ripple--pressed::after{opacity:var(--md-ripple-pressed-state-layer-opacity, 0.12)}.md3-ripple-surface.md3-ripple--unbounded{border-radius:var(--md-ripple-state-layer-shape, 9999px)}/*# sourceMappingURL=ripple-styles.css.map */
+export const styles = css `:host{--_dragged-state-layer-opacity: var(--md-ripple-dragged-state-layer-opacity, 0.16);--_focus-state-layer-opacity: var(--md-ripple-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-ripple-hover-state-layer-opacity, 0.08);--_pressed-state-layer-opacity: var(--md-ripple-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-ripple-state-layer-shape, 0px);--_focus-state-layer-color: var(--md-ripple-focus-state-layer-color, black);--_hover-state-layer-color: var(--md-ripple-hover-state-layer-color, black);--_pressed-state-layer-color: var(--md-ripple-pressed-state-layer-color, black);--_dragged-state-layer-color: var(--md-ripple-dragged-state-layer-color, black)}:host{display:flex}:host([disabled]){opacity:0}:host,.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform:scale(1)}.md3-ripple-surface{border-radius:var(--_state-layer-shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;content:""}.md3-ripple-surface::before{background-color:var(--_hover-state-layer-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--_pressed-state-layer-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--hovered::before{background-color:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-ripple--focused::before{background-color:var(--_focus-state-layer-color);opacity:var(--_focus-state-layer-opacity);transition-duration:75ms}.md3-ripple--pressed::after{opacity:var(--_pressed-state-layer-opacity);transition-duration:105ms}.md3-ripple--unbounded{--_state-layer-shape: var(--md-ripple-state-layer-shape, 9999px)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */
 `;
 //# 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{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex}:host([disabled]){opacity:0}.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;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;z-index:-1;content:\"\"}.md3-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--focused::before{transition-duration:75ms}.md3-ripple--pressed::after{transition-duration:105ms}.md3-ripple-surface{border-radius:var(--md-ripple-state-layer-shape, 0)}.md3-ripple-surface::before{background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-state-layer-color, black) max(100% - 70px, 65%), transparent 100%)}.md3-ripple-surface.md3-ripple--hovered::before{opacity:var(--md-ripple-hover-state-layer-opacity, 0.08);background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface.md3-ripple--focused::before{opacity:var(--md-ripple-focus-state-layer-opacity, 0.12);background-color:var(--md-ripple-focus-state-layer-color, black)}.md3-ripple-surface.md3-ripple--pressed::after{opacity:var(--md-ripple-pressed-state-layer-opacity, 0.12)}.md3-ripple-surface.md3-ripple--unbounded{border-radius:var(--md-ripple-state-layer-shape, 9999px)}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}
+{"version":3,"file":"ripple-styles.css.js","sourceRoot":"","sources":["ripple-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_dragged-state-layer-opacity: var(--md-ripple-dragged-state-layer-opacity, 0.16);--_focus-state-layer-opacity: var(--md-ripple-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-ripple-hover-state-layer-opacity, 0.08);--_pressed-state-layer-opacity: var(--md-ripple-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-ripple-state-layer-shape, 0px);--_focus-state-layer-color: var(--md-ripple-focus-state-layer-color, black);--_hover-state-layer-color: var(--md-ripple-hover-state-layer-color, black);--_pressed-state-layer-color: var(--md-ripple-pressed-state-layer-color, black);--_dragged-state-layer-color: var(--md-ripple-dragged-state-layer-color, black)}:host{display:flex}:host([disabled]){opacity:0}:host,.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform:scale(1)}.md3-ripple-surface{border-radius:var(--_state-layer-shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;content:\"\"}.md3-ripple-surface::before{background-color:var(--_hover-state-layer-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--_pressed-state-layer-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--hovered::before{background-color:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-ripple--focused::before{background-color:var(--_focus-state-layer-color);opacity:var(--_focus-state-layer-opacity);transition-duration:75ms}.md3-ripple--pressed::after{opacity:var(--_pressed-state-layer-opacity);transition-duration:105ms}.md3-ripple--unbounded{--_state-layer-shape: var(--md-ripple-state-layer-shape, 9999px)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}

package/ripple/lib/ripple-styles.scss

@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './ripple';
-@use './ripple-theme';
-
-@include ripple.static-styles();
 
-.md3-ripple-surface {
-  @include ripple-theme.theme-styles(ripple-theme.values());
-}
+@include ripple.styles;

package/ripple/lib/ripple.d.ts

@@ -16,7 +16,7 @@ export declare class Ripple extends LitElement {
     protected rippleSize: string;
     protected rippleScale: string;
     protected initialSize: number;
-    protected pressAnimationSignal: import("@material/web/motion/animation.js").AnimationSignal;
+    protected pressAnimationSignal: import("../../motion/animation.js").AnimationSignal;
     protected growAnimation: Animation | null;
     protected delayedEndPressHandle: number | null;
     /** @soyTemplate */

package/ripple/lib/ripple.js

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { createAnimationSignal, Easing } from '@material/web/motion/animation.js';
 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';
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
 const INITIAL_ORIGIN_SCALE = 0.2;

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

package/sass/_assert.scss

@@ -1,3 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
 @use 'sass:meta';
 
 ///