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

package/internal/controller/events.js

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+export function redispatchEvent(element, event) {
+    // For bubbling events in SSR light DOM (or composed), stop their propagation
+    // and dispatch the copy.
+    if (event.bubbles && (!element.shadowRoot || event.composed)) {
+        event.stopPropagation();
+    }
+    const copy = Reflect.construct(event.constructor, [event.type, event]);
+    const dispatched = element.dispatchEvent(copy);
+    if (!dispatched) {
+        event.preventDefault();
+    }
+    return dispatched;
+}
+/**
+ * Dispatches a click event to the given element that triggers a native action,
+ * but is not composed and therefore is not seen outside the element.
+ *
+ * This is useful for responding to an external click event on the host element
+ * that should trigger an internal action like a button click.
+ *
+ * Note, a helper is provided because setting this up correctly is a bit tricky.
+ * In particular, calling `click` on an element creates a composed event, which
+ * is not desirable, and a manually dispatched event must specifically be a
+ * `MouseEvent` to trigger a native action.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+export function dispatchActivationClick(element) {
+    const event = new MouseEvent('click', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+}
+/**
+ * Returns true if the click event should trigger an activation behavior. The
+ * behavior is defined by the element and is whatever it should do when
+ * clicked.
+ *
+ * Typically when an element needs to handle a click, the click is generated
+ * from within the element and an event listener within the element implements
+ * the needed behavior; however, it's possible to fire a click directly
+ * at the element that the element should handle. This method helps
+ * distinguish these "external" clicks.
+ *
+ * An "external" click can be triggered in a number of ways: via a click
+ * on an associated label for a form  associated element, calling
+ * `element.click()`, or calling
+ * `element.dispatchEvent(new MouseEvent('click', ...))`.
+ *
+ * Also works around Firefox issue
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching
+ * events for a microtask after called.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+export function isActivationClick(event) {
+    // Event must start at the event target.
+    if (event.currentTarget !== event.target) {
+        return false;
+    }
+    // Event must not be retargeted from shadowRoot.
+    if (event.composedPath()[0] !== event.target) {
+        return false;
+    }
+    // Target must not be disabled; this should only occur for a synthetically
+    // dispatched click.
+    if (event.target.disabled) {
+        return false;
+    }
+    // This is an activation if the event should not be squelched.
+    return !squelchEvent(event);
+}
+// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
+//  Remove when Firefox bug is addressed.
+function squelchEvent(event) {
+    const squelched = isSquelchingEvents;
+    if (squelched) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    squelchEventsForMicrotask();
+    return squelched;
+}
+// Ignore events for one microtask only.
+let isSquelchingEvents = false;
+async function squelchEventsForMicrotask() {
+    isSquelchingEvents = true;
+    // Need to pause for just one microtask.
+    // tslint:disable-next-line
+    await null;
+    isSquelchingEvents = false;
+}
+//# sourceMappingURL=events.js.map

package/internal/controller/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,eAAe,CAAC,OAAgB,EAAE,KAAY;IAC5D,6EAA6E;IAC7E,yBAAyB;IACzB,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;QAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,UAAU,EAAE;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,uBAAuB,CAAC,OAAoB;IAC1D,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IACvD,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAY;IAC5C,wCAAwC;IACxC,IAAI,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,MAAM,EAAE;QACxC,OAAO,KAAK,CAAC;KACd;IACD,gDAAgD;IAChD,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;QAC5C,OAAO,KAAK,CAAC;KACd;IACD,0EAA0E;IAC1E,oBAAoB;IACpB,IAAK,KAAK,CAAC,MAA4C,CAAC,QAAQ,EAAE;QAChE,OAAO,KAAK,CAAC;KACd;IACD,8DAA8D;IAC9D,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC;AAED,6DAA6D;AAC7D,yCAAyC;AACzC,SAAS,YAAY,CAAC,KAAY;IAChC,MAAM,SAAS,GAAG,kBAAkB,CAAC;IACrC,IAAI,SAAS,EAAE;QACb,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;KAClC;IACD,yBAAyB,EAAE,CAAC;IAC5B,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,wCAAwC;AACxC,IAAI,kBAAkB,GAAG,KAAK,CAAC;AAC/B,KAAK,UAAU,yBAAyB;IACtC,kBAAkB,GAAG,IAAI,CAAC;IAC1B,wCAAwC;IACxC,2BAA2B;IAC3B,MAAM,IAAI,CAAC;IACX,kBAAkB,GAAG,KAAK,CAAC;AAC7B,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Re-dispatches an event from the provided element.\n *\n * This function is useful for forwarding non-composed events, such as `change`\n * events.\n *\n * @example\n * class MyInput extends LitElement {\n *   render() {\n *     return html`<input @change=${this.redispatchEvent}>`;\n *   }\n *\n *   protected redispatchEvent(event: Event) {\n *     redispatchEvent(this, event);\n *   }\n * }\n *\n * @param element The element to dispatch the event from.\n * @param event The event to re-dispatch.\n * @return Whether or not the event was dispatched (if cancelable).\n */\nexport function redispatchEvent(element: Element, event: Event) {\n  // For bubbling events in SSR light DOM (or composed), stop their propagation\n  // and dispatch the copy.\n  if (event.bubbles && (!element.shadowRoot || event.composed)) {\n    event.stopPropagation();\n  }\n\n  const copy = Reflect.construct(event.constructor, [event.type, event]);\n  const dispatched = element.dispatchEvent(copy);\n  if (!dispatched) {\n    event.preventDefault();\n  }\n\n  return dispatched;\n}\n\n/**\n * Dispatches a click event to the given element that triggers a native action,\n * but is not composed and therefore is not seen outside the element.\n *\n * This is useful for responding to an external click event on the host element\n * that should trigger an internal action like a button click.\n *\n * Note, a helper is provided because setting this up correctly is a bit tricky.\n * In particular, calling `click` on an element creates a composed event, which\n * is not desirable, and a manually dispatched event must specifically be a\n * `MouseEvent` to trigger a native action.\n *\n * @example\n * hostClickListener = (event: MouseEvent) {\n *   if (isActivationClick(event)) {\n *     this.dispatchActivationClick(this.buttonElement);\n *   }\n * }\n *\n */\nexport function dispatchActivationClick(element: HTMLElement) {\n  const event = new MouseEvent('click', {bubbles: true});\n  element.dispatchEvent(event);\n  return event;\n}\n\n/**\n * Returns true if the click event should trigger an activation behavior. The\n * behavior is defined by the element and is whatever it should do when\n * clicked.\n *\n * Typically when an element needs to handle a click, the click is generated\n * from within the element and an event listener within the element implements\n * the needed behavior; however, it's possible to fire a click directly\n * at the element that the element should handle. This method helps\n * distinguish these \"external\" clicks.\n *\n * An \"external\" click can be triggered in a number of ways: via a click\n * on an associated label for a form  associated element, calling\n * `element.click()`, or calling\n * `element.dispatchEvent(new MouseEvent('click', ...))`.\n *\n * Also works around Firefox issue\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching\n * events for a microtask after called.\n *\n * @example\n * hostClickListener = (event: MouseEvent) {\n *   if (isActivationClick(event)) {\n *     this.dispatchActivationClick(this.buttonElement);\n *   }\n * }\n *\n */\nexport function isActivationClick(event: Event) {\n  // Event must start at the event target.\n  if (event.currentTarget !== event.target) {\n    return false;\n  }\n  // Event must not be retargeted from shadowRoot.\n  if (event.composedPath()[0] !== event.target) {\n    return false;\n  }\n  // Target must not be disabled; this should only occur for a synthetically\n  // dispatched click.\n  if ((event.target as EventTarget & {disabled: boolean}).disabled) {\n    return false;\n  }\n  // This is an activation if the event should not be squelched.\n  return !squelchEvent(event);\n}\n\n// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)\n//  Remove when Firefox bug is addressed.\nfunction squelchEvent(event: Event) {\n  const squelched = isSquelchingEvents;\n  if (squelched) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  }\n  squelchEventsForMicrotask();\n  return squelched;\n}\n\n// Ignore events for one microtask only.\nlet isSquelchingEvents = false;\nasync function squelchEventsForMicrotask() {\n  isSquelchingEvents = true;\n  // Need to pause for just one microtask.\n  // tslint:disable-next-line\n  await null;\n  isSquelchingEvents = false;\n}\n"]}

package/internal/motion/animation.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+export declare const EASING: {
+    readonly STANDARD: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly STANDARD_ACCELERATE: "cubic-bezier(.3,0,1,1)";
+    readonly STANDARD_DECELERATE: "cubic-bezier(0,0,0,1)";
+    readonly EMPHASIZED: "cubic-bezier(.3,0,0,1)";
+    readonly EMPHASIZED_ACCELERATE: "cubic-bezier(.3,0,.8,.15)";
+    readonly EMPHASIZED_DECELERATE: "cubic-bezier(.05,.7,.1,1)";
+};
+/**
+ * A signal that is used for abortable tasks.
+ */
+export interface AnimationSignal {
+    /**
+     * Starts the abortable task. Any previous tasks started with this instance
+     * will be aborted.
+     *
+     * @return An `AbortSignal` for the current task.
+     */
+    start(): AbortSignal;
+    /**
+     * Complete the current task.
+     */
+    finish(): void;
+}
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+export declare function createAnimationSignal(): AnimationSignal;
+/**
+ * Returns a function which can be used to throttle function calls
+ * mapped to a key via a given function that should produce a promise that
+ * determines the throttle amount (defaults to requestAnimationFrame).
+ */
+export declare function createThrottle(): (key: string, cb: (...args: unknown[]) => unknown, timeout?: () => Promise<void>) => Promise<void>;
+/**
+ * Parses an number in milliseconds from a css time value
+ */
+export declare function msFromTimeCSSValue(value: string): number;

package/internal/motion/animation.js

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+export const EASING = {
+    STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
+    STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
+    STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
+    EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
+    EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
+    EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
+};
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+export function createAnimationSignal() {
+    // The current animation's AbortController
+    let animationAbortController = null;
+    return {
+        start() {
+            // Tell the previous animation to cancel.
+            animationAbortController?.abort();
+            // Set up a new AbortController for the current animation.
+            animationAbortController = new AbortController();
+            // Provide the AbortSignal so that the caller can check aborted status
+            // and add listeners.
+            return animationAbortController.signal;
+        },
+        finish() {
+            animationAbortController = null;
+        },
+    };
+}
+/**
+ * Returns a function which can be used to throttle function calls
+ * mapped to a key via a given function that should produce a promise that
+ * determines the throttle amount (defaults to requestAnimationFrame).
+ */
+export function createThrottle() {
+    const stack = new Set();
+    return async (key = '', cb, timeout = async () => {
+        await new Promise(requestAnimationFrame);
+    }) => {
+        if (!stack.has(key)) {
+            stack.add(key);
+            await timeout();
+            if (stack.has(key)) {
+                stack.delete(key);
+                cb();
+            }
+        }
+    };
+}
+/**
+ * Parses an number in milliseconds from a css time value
+ */
+export function msFromTimeCSSValue(value) {
+    const match = value.trim().match(/([\d.]+)(\s*s$)?/);
+    const time = match?.[1];
+    const seconds = match?.[2];
+    return Number(time ?? 0) * (seconds ? 1000 : 1);
+}
+//# sourceMappingURL=animation.js.map

package/internal/motion/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,4BAA4B;IACtC,mBAAmB,EAAE,wBAAwB;IAC7C,mBAAmB,EAAE,uBAAuB;IAC5C,UAAU,EAAE,wBAAwB;IACpC,qBAAqB,EAAE,2BAA2B;IAClD,qBAAqB,EAAE,2BAA2B;CAC1C,CAAC;AAmBX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,qBAAqB;IACnC,0CAA0C;IAC1C,IAAI,wBAAwB,GAAyB,IAAI,CAAC;IAE1D,OAAO;QACL,KAAK;YACH,yCAAyC;YACzC,wBAAwB,EAAE,KAAK,EAAE,CAAC;YAClC,0DAA0D;YAC1D,wBAAwB,GAAG,IAAI,eAAe,EAAE,CAAC;YACjD,sEAAsE;YACtE,qBAAqB;YACrB,OAAO,wBAAwB,CAAC,MAAM,CAAC;QACzC,CAAC;QACD,MAAM;YACJ,wBAAwB,GAAG,IAAI,CAAC;QAClC,CAAC;KACF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;IACxB,OAAO,KAAK,EACD,GAAG,GAAG,EAAE,EAAE,EAAmC,EAC7C,OAAO,GAAG,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE;QACd,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACnB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACf,MAAM,OAAO,EAAE,CAAC;YAChB,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAClB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAClB,EAAE,EAAE,CAAC;aACN;SACF;IACH,CAAC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,OAAO,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Easing functions to use for web animations.\n *\n * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.\n *\n * TODO(b/241113345): replace with tokens\n */\nexport const EASING = {\n  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',\n  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',\n  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',\n  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',\n  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',\n  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',\n} as const;\n\n/**\n * A signal that is used for abortable tasks.\n */\nexport interface AnimationSignal {\n  /**\n   * Starts the abortable task. Any previous tasks started with this instance\n   * will be aborted.\n   *\n   * @return An `AbortSignal` for the current task.\n   */\n  start(): AbortSignal;\n  /**\n   * Complete the current task.\n   */\n  finish(): void;\n}\n\n/**\n * Creates an `AnimationSignal` that can be used to cancel a previous task.\n *\n * @example\n * class MyClass {\n *   private labelAnimationSignal = createAnimationSignal();\n *\n *   private async animateLabel() {\n *     // Start of the task. Previous tasks will be canceled.\n *     const signal = this.labelAnimationSignal.start();\n *\n *     // Do async work...\n *     if (signal.aborted) {\n *       // Use AbortSignal to check if a request was made to abort after some\n *       // asynchronous work.\n *       return;\n *     }\n *\n *     const animation = this.animate(...);\n *     // Add event listeners to be notified when the task should be canceled.\n *     signal.addEventListener('abort', () => {\n *       animation.cancel();\n *     });\n *\n *     animation.addEventListener('finish', () => {\n *       // Tell the signal that the current task is finished.\n *       this.labelAnimationSignal.finish();\n *     });\n *   }\n * }\n *\n * @return An `AnimationSignal`.\n */\nexport function createAnimationSignal(): AnimationSignal {\n  // The current animation's AbortController\n  let animationAbortController: AbortController|null = null;\n\n  return {\n    start() {\n      // Tell the previous animation to cancel.\n      animationAbortController?.abort();\n      // Set up a new AbortController for the current animation.\n      animationAbortController = new AbortController();\n      // Provide the AbortSignal so that the caller can check aborted status\n      // and add listeners.\n      return animationAbortController.signal;\n    },\n    finish() {\n      animationAbortController = null;\n    },\n  };\n}\n\n/**\n * Returns a function which can be used to throttle function calls\n * mapped to a key via a given function that should produce a promise that\n * determines the throttle amount (defaults to requestAnimationFrame).\n */\nexport function createThrottle() {\n  const stack = new Set();\n  return async (\n             key = '', cb: (...args: unknown[]) => unknown,\n             timeout = async () => {\n               await new Promise(requestAnimationFrame);\n             }) => {\n    if (!stack.has(key)) {\n      stack.add(key);\n      await timeout();\n      if (stack.has(key)) {\n        stack.delete(key);\n        cb();\n      }\n    }\n  };\n}\n\n/**\n * Parses an number in milliseconds from a css time value\n */\nexport function msFromTimeCSSValue(value: string) {\n  const match = value.trim().match(/([\\d.]+)(\\s*s$)?/);\n  const time = match?.[1];\n  const seconds = match?.[2];\n  return Number(time ?? 0) * (seconds ? 1000 : 1);\n}\n"]}

package/internal/sass/_string-ext.scss

@@ -0,0 +1,195 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:string';
+// go/keep-sorted end
+
+/// Checks if a string starts with a given prefix.
+///
+/// @example - scss
+///   @debug has-prefix('var(--foo)', 'var('); // true
+///
+/// @param {String} $string - The string to test.
+/// @param {String} $prefix - The prefix to check.
+/// @return {Boolean} True if the string starts with the given prefix.
+@function has-prefix($string, $prefix) {
+  @return string.slice($string, 1, string.length($prefix)) == $prefix;
+}
+
+/// Checks if a string ends with a given suffix.
+///
+/// @example - scss
+///   @debug has-suffix('var(--foo)', ')'); // true
+///
+/// @param {String} $string - The string to test.
+/// @param {String} $suffix - The suffix to check.
+/// @return {Boolean} True if the string ends with the given suffix.
+@function has-suffix($string, $suffix) {
+  @return string.slice($string, -1 * string.length($suffix)) == $suffix;
+}
+
+/// Trims a repeating prefix from the start of a string.
+///
+/// @example - scss
+///   @debug trim-repeating-prefix('  foo bar  ', ' '); // "foo bar  "
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The repeating prefix string to trim.
+/// @return {String} The string with the prefix trimmed from the start.
+@function trim-repeating-prefix($string, $prefix) {
+  @while has-prefix($string, $prefix) {
+    $string: trim-prefix($string, $prefix);
+  }
+
+  @return $string;
+}
+
+/// Trims a prefix from the start of a string.
+///
+/// @example - scss
+///   @debug trim-prefix('var(--foo)', 'var('); // "--foo)"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The prefix string to trim.
+/// @return {String} The string with the prefix trimmed from the start.
+@function trim-prefix($string, $prefix) {
+  @if has-prefix($string, $prefix) {
+    $string: string.slice($string, string.length($prefix) + 1);
+  }
+
+  @return $string;
+}
+
+/// Trims a repeating suffix from the end of a string.
+///
+/// @example - scss
+///   @debug trim-repeating-suffix('  foo bar  ', ' '); // "  foo bar"
+///   @debug trim-repeating-suffix('var(--foo)', ')'); // "var(--foo"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $suffix - The repeating suffix string to trim.
+/// @return {String} The string with the suffix trimmed from the end.
+@function trim-repeating-suffix($string, $suffix) {
+  @while has-suffix($string, $suffix) {
+    $string: trim-suffix($string, $suffix);
+  }
+
+  @return $string;
+}
+
+/// Trims a suffix from the end of a string.
+///
+/// @example - scss
+///   @debug trim-suffix('var(--foo)', ')'); // "var(--foo"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $suffix - The suffix string to trim.
+/// @return {String} The string with the suffix trimmed from the end.
+@function trim-suffix($string, $suffix) {
+  @if has-suffix($string, $suffix) {
+    $string: string.slice($string, 1, -1 * string.length($suffix) - 1);
+  }
+
+  @return $string;
+}
+
+/// Trims a repeating prefix and suffix from the start and end of a string.
+///
+/// If a suffix is not provided, the prefix is used as the suffix to trim.
+///
+/// @example - scss
+///   @debug trim-repeating('  foo bar  ', ' '); // "foo bar"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The repeating prefix string to trim.
+/// @param {String} $suffix [$prefix] - The repeating suffix string to trim.
+/// @return {String} The string with the prefix and suffix trimmed.
+@function trim-repeating($string, $prefix, $suffix: $prefix) {
+  @return trim-repeating-prefix(
+    trim-repeating-suffix($string, $suffix),
+    $prefix
+  );
+}
+
+/// Trims a prefix and suffix from the start and end of a string.
+///
+/// If a suffix is not provided, the prefix is used as the suffix to trim.
+///
+/// @example - scss
+///   @debug trim('var(--foo)', 'var(', ')'); // "--foo"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The prefix string to trim.
+/// @param {String} $suffix [$prefix] - The suffix string to trim.
+/// @return {String} The string with the prefix and suffix trimmed.
+@function trim($string, $prefix, $suffix: $prefix) {
+  @return trim-prefix(trim-suffix($string, $suffix), $prefix);
+}
+
+/// Returns a new string with the first match of a pattern replaced by a
+/// replacement.
+///
+/// @example - scss
+///   @debug trim('foo bar baz', 'bar', 'quux'); // "foo quux baz"
+///
+/// @param {String} $string - The string to be searched.
+/// @param {String} $pattern - The pattern to search for.
+/// @param {String} $replacement - The value to replace the pattern.
+/// @return {String} The string with the first match of pattern replaced by the
+///     replacement or the initial string itself.
+@function replace($string, $pattern, $replacement) {
+  $pattern-index: string.index($string, $pattern);
+  @if not $pattern-index {
+    @return $string;
+  }
+
+  $before: string.slice($string, 1, $pattern-index - 1);
+  $after: string.slice($string, string.length($pattern) + $pattern-index);
+
+  @return $before + $replacement + $after;
+}
+
+/// Divides a string into an ordered list of substrings.
+///
+/// @example - scss
+///   @debug split("1px 2px 3px 4px"); // (1px 2px 3px 4px)
+///   @debug split("1px, 2px, 3px, 4px"); // (1px 2px 3px 4px)
+///   @debug split("1px/2px/3px/4px"); // (1px 2px 3px 4px)
+///
+/// @param {String} $str - The string to split
+/// @return {List} The list of substrings
+@function split($str) {
+  $list: ();
+  $item: '';
+  // list separator precedence is comma, slash, space
+  $separator: ' ';
+  @if string.index($str, ',') {
+    $separator: ',';
+  } @else if string.index($str, '/') {
+    $separator: '/';
+  }
+  @for $i from 1 through string.length($str) {
+    $chr: string.slice($str, $i, $i);
+    @if $chr == $separator {
+      @if $item != '' {
+        // remove surrounding whitespace
+        $item: string.unquote(trim($item, ' '));
+        $list: list.append($list, $item);
+      }
+      $item: '';
+    } @else {
+      $item: $item + $chr;
+    }
+  }
+  // append final item
+  @if $item != '' {
+    // remove surrounding whitespace
+    $item: string.unquote(trim($item, ' '));
+    $list: list.append($list, $item);
+  }
+  @return $list;
+}