@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/{chunk-SFI2U4YW.mjs → chunk-VMY55K2X.mjs}

@@ -1,9 +1,11 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  controllerFor,
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/lightbox.ts
 var _defaults = {
@@ -14,16 +16,17 @@ var _defaults = {
   onCloseStart: null,
   onCloseEnd: null
 };
-var _Lightbox = class _Lightbox extends Component {
+var Lightbox = class extends Component {
   constructor(el, options) {
-    super(el, options, _Lightbox);
-    /** Ancestors forced to `overflow: visible`, with the inline value to put back. */
-    this._changedAncestorList = [];
+    super(el, options);
     this._timers = /* @__PURE__ */ new Map();
     this._motion = window.matchMedia("(prefers-reduced-motion: reduce)");
     this._isOpen = false;
     this._destroyed = false;
     this._revision = 0;
+    // Counts opens and closes only. _revision also moves when reduced motion
+    // flushes a transition, which must still report its end.
+    this._phase = 0;
     this._handleMotionChange = () => {
       if (!this._motion.matches) return;
       const callbacks = [...this._timers.values()];
@@ -37,7 +40,7 @@ var _Lightbox = class _Lightbox extends Component {
       }
     };
     this._handleLightboxKeypress = (e) => {
-      if (this._trigger === this.el && (e.key === Utils.keys.ENTER || e.key === " ")) {
+      if (this._trigger === this.el && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
         this._handleLightboxToggle();
       }
@@ -50,35 +53,38 @@ var _Lightbox = class _Lightbox extends Component {
       if (this.overlayActive) this.close();
     };
     this._handleWindowEscape = (e) => {
-      if (e.key === Utils.keys.ESC) this.close();
+      if (e.key === "Escape") this.close();
+    };
+    // The image zooms in place, not in a modal, so Tab would reach the page
+    // behind the overlay. Tab closes it instead, then moves focus as usual.
+    this._handleWindowTab = (e) => {
+      if (e.key === "Tab") this.close();
     };
     /**
      * Open lightbox.
      */
     this.open = () => {
       if (this._destroyed || this._isOpen) return;
+      this._phase++;
       const revision = this._cancel();
       if (this.overlayActive) this._reset();
-      this._isOpen = true;
       this._updateVars();
       const originRect = this.el.getBoundingClientRect();
       const placeholderRect = this.placeholder.getBoundingClientRect();
+      if (!originRect.width || !originRect.height) return;
+      this._isOpen = true;
       this.originalWidth = originRect.width;
       this.originalHeight = originRect.height;
       this.doneAnimating = false;
       this.el.classList.add("active");
       this.overlayActive = true;
-      if (typeof this.options.onOpenStart === "function")
-        this.options.onOpenStart.call(this, this.el);
-      if (revision !== this._revision) return;
+      if (!this._notify("open", this.options.onOpenStart, { current: () => revision === this._revision })) return;
       this.placeholder.style.width = placeholderRect.width + "px";
       this.placeholder.style.height = placeholderRect.height + "px";
-      this.placeholder.style.position = "relative";
-      this.placeholder.style.top = "0";
-      this.placeholder.style.left = "0";
-      this._makeAncestorsOverflowVisible();
       this.el.style.position = "absolute";
-      this.el.style.zIndex = "1000";
+      this.el.style.inset = "auto";
+      this.el.style.left = placeholderRect.left + window.scrollX + "px";
+      this.el.style.top = placeholderRect.top + window.scrollY + "px";
       this.el.style.willChange = "left, top, width, height";
       this.attrWidth = this.el.getAttribute("width");
       this.attrHeight = this.el.getAttribute("height");
@@ -91,6 +97,7 @@ var _Lightbox = class _Lightbox extends Component {
         this.el.removeAttribute("height");
       }
       this._addOverlay();
+      this._showOnTop(this.el);
       if (this.caption !== "") this._addCaption();
       const widthPercent = this.originalWidth / this.windowWidth;
       const heightPercent = this.originalHeight / this.windowHeight;
@@ -103,9 +110,13 @@ var _Lightbox = class _Lightbox extends Component {
         this.newWidth = this.windowHeight * 0.9 * ratio;
         this.newHeight = this.windowHeight * 0.9;
       }
-      window.addEventListener("scroll", this._handleWindowChange, { passive: true });
-      window.addEventListener("resize", this._handleWindowChange, { passive: true });
-      window.addEventListener("keyup", this._handleWindowEscape);
+      this._windowEvents?.abort();
+      this._windowEvents = controllerFor(this.el);
+      const { signal } = this._windowEvents;
+      window.addEventListener("scroll", this._handleWindowChange, { passive: true, signal });
+      window.addEventListener("resize", this._handleWindowChange, { passive: true, signal });
+      window.addEventListener("keyup", this._handleWindowEscape, { signal });
+      window.addEventListener("keydown", this._handleWindowTab, { signal });
       this._animateImageIn();
     };
     /**
@@ -113,24 +124,17 @@ var _Lightbox = class _Lightbox extends Component {
      */
     this.close = () => {
       if (this._destroyed || !this._isOpen) return;
+      this._phase++;
       const revision = this._cancel();
       this._isOpen = false;
       this.doneAnimating = false;
-      if (typeof this.options.onCloseStart === "function")
-        this.options.onCloseStart.call(this, this.el);
-      if (revision !== this._revision) return;
-      window.removeEventListener("scroll", this._handleWindowChange);
-      window.removeEventListener("resize", this._handleWindowChange);
-      window.removeEventListener("keyup", this._handleWindowEscape);
+      if (!this._notify("close", this.options.onCloseStart, { current: () => revision === this._revision })) return;
+      this._windowEvents?.abort();
+      this._restoreFocus();
       if (this._overlay) this._fadeOut(this._overlay);
       if (this._photoCaption) this._fadeOut(this._photoCaption);
       this._animateImageOut();
     };
-    this.el["Expressive_Lightbox"] = this;
-    this.options = {
-      ..._Lightbox.defaults,
-      ...options
-    };
     this.overlayActive = false;
     this.doneAnimating = true;
     this.placeholder = document.createElement("div");
@@ -149,53 +153,35 @@ var _Lightbox = class _Lightbox extends Component {
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Lightbox.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Lightbox);
-  }
-  static getInstance(el) {
-    return el["Expressive_Lightbox"];
-  }
   destroy() {
     if (this._destroyed) return;
     this._destroyed = true;
-    const root = this.el.getRootNode();
-    const focused = root.activeElement === this.el;
-    this._removeEventHandlers();
+    const focused = this.el.getRootNode().activeElement === this.el;
     this._cancel();
     this._reset();
     this.placeholder.replaceWith(this.el);
+    if (focused) this._restoreFocus();
+    restoreAttribute(this.el, "tabindex", this._tabindex);
+    super.destroy();
+  }
+  // Back to the trigger when focus fell to the body (or the shadow host), as
+  // a click on the overlay, which cannot take focus, leaves it.
+  _restoreFocus() {
+    const root = this.el.getRootNode();
     let active = document.activeElement;
     while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
-    if (focused && (active === document.body || active === root.host)) this._trigger.focus();
-    if (this._tabindex === null) this.el.removeAttribute("tabindex");
-    else this.el.setAttribute("tabindex", this._tabindex);
-    this.el["Expressive_Lightbox"] = void 0;
+    if ([document.body, root.host].includes(active)) this._trigger.focus({ preventScroll: true });
   }
   _reset() {
-    window.removeEventListener("scroll", this._handleWindowChange);
-    window.removeEventListener("resize", this._handleWindowChange);
-    window.removeEventListener("keyup", this._handleWindowEscape);
+    this._windowEvents?.abort();
     this._overlay?.remove();
     this._photoCaption?.remove();
-    for (const ancestor of this._changedAncestorList) {
-      const saved = _Lightbox._overflow.get(ancestor);
-      if (--saved.count === 0) {
-        ancestor.style.setProperty("overflow", saved.value, saved.priority);
-        _Lightbox._overflow.delete(ancestor);
-      }
-    }
-    this._changedAncestorList = [];
+    this.el.removeAttribute("popover");
     if (this.attrWidth != null) this.el.setAttribute("width", this.attrWidth);
     if (this.attrHeight != null) this.el.setAttribute("height", this.attrHeight);
     this.el.classList.remove("active");
     this.placeholder.removeAttribute("style");
-    if (this.originInlineStyles === null) this.el.removeAttribute("style");
-    else this.el.setAttribute("style", this.originInlineStyles);
+    restoreAttribute(this.el, "style", this.originInlineStyles);
     this.overlayActive = false;
     this._isOpen = false;
     this.doneAnimating = true;
@@ -217,37 +203,23 @@ var _Lightbox = class _Lightbox extends Component {
     this._timers.set(timer, callback);
   }
   _setupEventHandlers() {
-    this._motion.addEventListener("change", this._handleMotionChange);
-    this._trigger.addEventListener("click", this._handleLightboxToggle);
-    this.el.addEventListener("keydown", this._handleLightboxKeypress);
-  }
-  _removeEventHandlers() {
-    this._motion.removeEventListener("change", this._handleMotionChange);
-    this._trigger.removeEventListener("click", this._handleLightboxToggle);
-    this.el.removeEventListener("keydown", this._handleLightboxKeypress);
+    const { signal } = this._events;
+    this._motion.addEventListener("change", this._handleMotionChange, { signal });
+    this._trigger.addEventListener("click", this._handleLightboxToggle, { signal });
+    this.el.addEventListener("keydown", this._handleLightboxKeypress, { signal });
   }
-  _makeAncestorsOverflowVisible() {
-    this._changedAncestorList = [];
-    let ancestor = this.placeholder.parentNode;
-    while (ancestor != null && ancestor !== document) {
-      const curr = ancestor;
-      if (curr.style && (curr.style.overflow !== "visible" || _Lightbox._overflow.has(curr))) {
-        const saved = _Lightbox._overflow.get(curr) ?? { count: 0, value: curr.style.overflow, priority: curr.style.getPropertyPriority("overflow") };
-        saved.count++;
-        _Lightbox._overflow.set(curr, saved);
-        this._changedAncestorList.push(curr);
-        curr.style.overflow = "visible";
-      }
-      ancestor = ancestor.parentNode ?? ancestor.host;
-    }
+  /**
+   * Shows `el` as a manual popover, so it is in the top layer: no ancestor
+   * clips or covers it, and it stacks above what was shown before it.
+   */
+  _showOnTop(el) {
+    el.setAttribute("popover", "manual");
+    el.showPopover();
   }
-  _offset(el) {
-    const box = el.getBoundingClientRect();
-    const docElem = document.documentElement;
-    return {
-      top: box.top + window.scrollY - docElem.clientTop,
-      left: box.left + window.scrollX - docElem.clientLeft
-    };
+  /** The placeholder's document position, where the image rests. */
+  _restingPlace() {
+    const box = this.placeholder.getBoundingClientRect();
+    return { left: box.left + window.scrollX + "px", top: box.top + window.scrollY + "px" };
   }
   _updateVars() {
     this.windowWidth = window.innerWidth;
@@ -256,6 +228,7 @@ var _Lightbox = class _Lightbox extends Component {
   }
   // Image
   _animateImageIn() {
+    const phase = this._phase;
     this.el.style.maxHeight = this.newHeight.toString() + "px";
     this.el.style.maxWidth = this.newWidth.toString() + "px";
     const duration = this._motion.matches ? 0 : this.options.inDuration;
@@ -263,7 +236,6 @@ var _Lightbox = class _Lightbox extends Component {
     this.el.style.height = this.originalHeight + "px";
     this.el.style.width = this.originalWidth + "px";
     this._schedule(() => {
-      const placeholderOffset = this._offset(this.placeholder);
       this.el.style.transition = `height ${duration}ms ease,
         width ${duration}ms ease,
         left ${duration}ms ease,
@@ -271,15 +243,16 @@ var _Lightbox = class _Lightbox extends Component {
       `;
       this.el.style.height = this.newHeight + "px";
       this.el.style.width = this.newWidth + "px";
-      this.el.style.left = Utils.getDocumentScrollLeft() + this.windowWidth / 2 - placeholderOffset.left - this.newWidth / 2 + "px";
-      this.el.style.top = Utils.getDocumentScrollTop() + this.windowHeight / 2 - placeholderOffset.top - this.newHeight / 2 + "px";
+      this.el.style.left = window.scrollX + (this.windowWidth - this.newWidth) / 2 + "px";
+      this.el.style.top = window.scrollY + (this.windowHeight - this.newHeight) / 2 + "px";
     }, 1);
     this._schedule(() => {
       this.doneAnimating = true;
-      if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
+      this._notify("opened", this.options.onOpenEnd, { current: () => phase === this._phase });
     }, duration);
   }
   _animateImageOut() {
+    const phase = this._phase;
     const duration = this._motion.matches ? 0 : this.options.outDuration;
     this.el.style.transition = `height ${duration}ms ease,
       width ${duration}ms ease,
@@ -288,12 +261,10 @@ var _Lightbox = class _Lightbox extends Component {
     `;
     this.el.style.height = this.originalHeight + "px";
     this.el.style.width = this.originalWidth + "px";
-    this.el.style.left = "0";
-    this.el.style.top = "0";
+    Object.assign(this.el.style, this._restingPlace());
     this._schedule(() => {
       this._reset();
-      if (typeof this.options.onCloseEnd === "function")
-        this.options.onCloseEnd.call(this, this.el);
+      this._notify("closed", this.options.onCloseEnd, { current: () => phase === this._phase });
     }, duration);
   }
   // Caption
@@ -303,6 +274,7 @@ var _Lightbox = class _Lightbox extends Component {
     this._photoCaption.innerText = this.caption;
     Utils.portalRoot(this.el).append(this._photoCaption);
     this._photoCaption.style.display = "inline";
+    this._showOnTop(this._photoCaption);
     this._fadeIn(this._photoCaption);
   }
   // Overlay
@@ -318,11 +290,7 @@ var _Lightbox = class _Lightbox extends Component {
       { once: true }
     );
     this.el.before(this._overlay);
-    const overlayOffset = this._overlay.getBoundingClientRect();
-    this._overlay.style.width = this.windowWidth + "px";
-    this._overlay.style.height = this.windowHeight + "px";
-    this._overlay.style.left = -1 * overlayOffset.left + "px";
-    this._overlay.style.top = -1 * overlayOffset.top + "px";
+    this._showOnTop(this._overlay);
     this._fadeIn(this._overlay);
   }
   _fadeIn(el) {
@@ -340,10 +308,9 @@ var _Lightbox = class _Lightbox extends Component {
     el.style.opacity = "0";
   }
 };
-_Lightbox._overflow = /* @__PURE__ */ new WeakMap();
-var Lightbox = _Lightbox;
+Lightbox.key = "Expressive_Lightbox";
 
 export {
   Lightbox
 };
-//# sourceMappingURL=chunk-SFI2U4YW.mjs.map
+//# sourceMappingURL=chunk-VMY55K2X.mjs.map

package/dist/js/chunks/chunk-VMY55K2X.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/lightbox.ts"],
+  "sourcesContent": ["import { Utils, controllerFor, restoreAttribute } from '../core/utils';\nimport { BaseOptions, Component } from '../core/component';\n\nexport interface LightboxOptions extends BaseOptions {\n  /**\n   * Transition in duration in milliseconds.\n   * @default 275\n   */\n  inDuration: number;\n  /**\n   * Transition out duration in milliseconds.\n   * @default 200\n   */\n  outDuration: number;\n  /**\n   * Callback function called before lightbox is opened.\n   * @default null\n   */\n  onOpenStart: (el: Element) => void;\n  /**\n   * Callback function called after lightbox is opened.\n   * @default null\n   */\n  onOpenEnd: (el: Element) => void;\n  /**\n   * Callback function called before lightbox is closed.\n   * @default null\n   */\n  onCloseStart: (el: Element) => void;\n  /**\n   * Callback function called after lightbox is closed.\n   * @default null\n   */\n  onCloseEnd: (el: Element) => void;\n}\n\nconst _defaults: LightboxOptions = {\n  inDuration: 275,\n  outDuration: 200,\n  onOpenStart: null,\n  onOpenEnd: null,\n  onCloseStart: null,\n  onCloseEnd: null\n};\n\nexport class Lightbox extends Component<LightboxOptions> {\n  /** If the lightbox overlay is showing. */\n  overlayActive: boolean;\n  /** If the lightbox is no longer being animated. */\n  doneAnimating: boolean;\n  /** Caption, if specified. */\n  caption: string;\n  /** Original width of image. */\n  originalWidth: number;\n  /** Original height of image. */\n  originalHeight: number;\n  private originInlineStyles: string;\n  private placeholder: HTMLElement;\n  private newHeight: number;\n  private newWidth: number;\n  private windowWidth: number;\n  private windowHeight: number;\n  private attrWidth: string;\n  private attrHeight: string;\n  private _overlay: HTMLElement;\n  private _photoCaption: HTMLElement;\n  private _trigger: HTMLElement;\n  private _tabindex: string | null;\n  private _timers = new Map<ReturnType<typeof setTimeout>, () => void>();\n  private _motion = window.matchMedia('(prefers-reduced-motion: reduce)');\n  private _isOpen = false;\n  private _destroyed = false;\n  /** Removes the listeners that close an open lightbox. */\n  private _windowEvents: AbortController | undefined;\n  private _revision = 0;\n  // Counts opens and closes only. _revision also moves when reduced motion\n  // flushes a transition, which must still report its end.\n  private _phase = 0;\n\n  constructor(el: HTMLElement, options: Partial<LightboxOptions>) {\n    super(el, options);\n\n    this.overlayActive = false;\n    this.doneAnimating = true;\n    this.placeholder = document.createElement('div');\n    this.placeholder.classList.add('material-placeholder');\n    this.originalWidth = 0;\n    this.originalHeight = 0;\n    this.originInlineStyles = this.el.getAttribute('style');\n    this.caption = this.el.getAttribute('data-caption') || '';\n    this._tabindex = this.el.getAttribute('tabindex');\n    this._trigger = this.el.closest('button') ?? this.el;\n    this.el.tabIndex = this._trigger === this.el ? 0 : -1;\n    // Wrap\n    this.el.before(this.placeholder);\n    this.placeholder.append(this.el);\n    this._setupEventHandlers();\n  }\n\n  static get defaults(): LightboxOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Lightbox';\n\n  destroy() {\n    if (this._destroyed) return;\n    this._destroyed = true;\n    const focused = (this.el.getRootNode() as Document | ShadowRoot).activeElement === this.el;\n    this._cancel();\n    this._reset();\n    this.placeholder.replaceWith(this.el);\n    if (focused) this._restoreFocus();\n    restoreAttribute(this.el, 'tabindex', this._tabindex);\n    super.destroy();\n  }\n\n  // Back to the trigger when focus fell to the body (or the shadow host), as\n  // a click on the overlay, which cannot take focus, leaves it.\n  private _restoreFocus() {\n    const root = this.el.getRootNode() as Document | ShadowRoot;\n    let active = document.activeElement;\n    while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;\n    if ([document.body, (root as ShadowRoot).host].includes(active)) this._trigger.focus({ preventScroll: true });\n  }\n\n  private _reset() {\n    this._windowEvents?.abort();\n    // Removing a popover, or its attribute, takes it out of the top layer.\n    this._overlay?.remove();\n    this._photoCaption?.remove();\n    this.el.removeAttribute('popover');\n    if (this.attrWidth != null) this.el.setAttribute('width', this.attrWidth);\n    if (this.attrHeight != null) this.el.setAttribute('height', this.attrHeight);\n    this.el.classList.remove('active');\n    this.placeholder.removeAttribute('style');\n    restoreAttribute(this.el, 'style', this.originInlineStyles);\n    this.overlayActive = false;\n    this._isOpen = false;\n    this.doneAnimating = true;\n  }\n\n  private _cancel() {\n    for (const timer of this._timers.keys()) clearTimeout(timer);\n    this._timers.clear();\n    return ++this._revision;\n  }\n\n  private _schedule(callback: () => void, delay: number) {\n    if (this._motion.matches) { callback(); return; }\n    const timer = setTimeout(() => { this._timers.delete(timer); callback(); }, delay);\n    this._timers.set(timer, callback);\n  }\n\n  private _handleMotionChange = () => {\n    if (!this._motion.matches) return;\n    const callbacks = [...this._timers.values()];\n    const revision = this._cancel();\n    for (const callback of callbacks) {\n      if (revision !== this._revision) break;\n      callback();\n    }\n    if (this.overlayActive) {\n      for (const el of [this.el, this._overlay, this._photoCaption]) if (el) el.style.transition = 'none';\n    }\n  };\n\n  private _setupEventHandlers() {\n    const { signal } = this._events;\n    this._motion.addEventListener('change', this._handleMotionChange, { signal });\n    this._trigger.addEventListener('click', this._handleLightboxToggle, { signal });\n    this.el.addEventListener('keydown', this._handleLightboxKeypress, { signal });\n  }\n\n  private _handleLightboxKeypress = (e: KeyboardEvent) => {\n    if (this._trigger === this.el && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      this._handleLightboxToggle();\n    }\n  };\n\n  private _handleLightboxToggle = () => {\n    // If already modal, return to original\n    if (this._isOpen) this.close();\n    else this.open();\n  };\n\n  private _handleWindowChange = () => {\n    if (this.overlayActive) this.close();\n  };\n\n  private _handleWindowEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') this.close();\n  };\n\n  // The image zooms in place, not in a modal, so Tab would reach the page\n  // behind the overlay. Tab closes it instead, then moves focus as usual.\n  private _handleWindowTab = (e: KeyboardEvent) => {\n    if (e.key === 'Tab') this.close();\n  };\n\n  /**\n   * Shows `el` as a manual popover, so it is in the top layer: no ancestor\n   * clips or covers it, and it stacks above what was shown before it.\n   */\n  private _showOnTop(el: HTMLElement) {\n    el.setAttribute('popover', 'manual');\n    el.showPopover();\n  }\n\n  /** The placeholder's document position, where the image rests. */\n  private _restingPlace() {\n    const box = this.placeholder.getBoundingClientRect();\n    return { left: box.left + window.scrollX + 'px', top: box.top + window.scrollY + 'px' };\n  }\n\n  private _updateVars(): void {\n    this.windowWidth = window.innerWidth;\n    this.windowHeight = window.innerHeight;\n    this.caption = this.el.getAttribute('data-caption') || '';\n  }\n\n  // Image\n  private _animateImageIn(): void {\n    const phase = this._phase;\n    this.el.style.maxHeight = this.newHeight.toString() + 'px';\n    this.el.style.maxWidth = this.newWidth.toString() + 'px';\n    const duration = this._motion.matches ? 0 : this.options.inDuration;\n    // from\n    this.el.style.transition = 'none';\n    this.el.style.height = this.originalHeight + 'px';\n    this.el.style.width = this.originalWidth + 'px';\n    this._schedule(() => {\n      // easeOutQuad\n      this.el.style.transition = `height ${duration}ms ease,\n        width ${duration}ms ease,\n        left ${duration}ms ease,\n        top ${duration}ms ease\n      `;\n      // to\n      this.el.style.height = this.newHeight + 'px';\n      this.el.style.width = this.newWidth + 'px';\n      this.el.style.left = window.scrollX + (this.windowWidth - this.newWidth) / 2 + 'px';\n      this.el.style.top = window.scrollY + (this.windowHeight - this.newHeight) / 2 + 'px';\n    }, 1);\n\n    this._schedule(() => {\n      this.doneAnimating = true;\n      this._notify('opened', this.options.onOpenEnd, { current: () => phase === this._phase });\n    }, duration);\n\n  }\n  private _animateImageOut(): void {\n    const phase = this._phase;\n    const duration = this._motion.matches ? 0 : this.options.outDuration;\n    // easeOutQuad\n    this.el.style.transition = `height ${duration}ms ease,\n      width ${duration}ms ease,\n      left ${duration}ms ease,\n      top ${duration}ms ease\n    `;\n    // to\n    this.el.style.height = this.originalHeight + 'px'; // was originalWidth\n    this.el.style.width = this.originalWidth + 'px';\n    Object.assign(this.el.style, this._restingPlace());\n    this._schedule(() => {\n      this._reset();\n      // onCloseEnd callback\n      this._notify('closed', this.options.onCloseEnd, { current: () => phase === this._phase });\n    }, duration);\n  }\n\n  // Caption\n  private _addCaption(): void {\n    this._photoCaption = document.createElement('div');\n    this._photoCaption.classList.add('lightbox-caption');\n    this._photoCaption.innerText = this.caption;\n    Utils.portalRoot(this.el).append(this._photoCaption);\n    this._photoCaption.style.display = 'inline';\n    this._showOnTop(this._photoCaption);\n    this._fadeIn(this._photoCaption);\n  }\n\n  // Overlay\n  private _addOverlay(): void {\n    this._overlay = document.createElement('div');\n    this._overlay.id = 'lightbox-overlay';\n    this._overlay.addEventListener(\n      'click',\n      (event) => {\n        event.stopPropagation();\n        this.close();\n      },\n      { once: true }\n    );\n\n    this.el.before(this._overlay);\n    this._showOnTop(this._overlay);\n    this._fadeIn(this._overlay);\n  }\n\n  private _fadeIn(el: HTMLElement): void {\n    el.style.transition = 'none';\n    el.style.opacity = '0';\n    const duration = this._motion.matches ? 0 : this.options.inDuration;\n    this._schedule(() => {\n      el.style.transition = `opacity ${duration}ms ease`;\n      el.style.opacity = '1';\n    }, 1);\n  }\n\n  private _fadeOut(el: HTMLElement): void {\n    const duration = this._motion.matches ? 0 : this.options.outDuration;\n    el.style.transition = `opacity ${duration}ms ease`;\n    el.style.opacity = '0';\n  }\n\n  /**\n   * Open lightbox.\n   */\n  open = () => {\n    if (this._destroyed || this._isOpen) return;\n    this._phase++;\n    const revision = this._cancel();\n    if (this.overlayActive) this._reset();\n    this._updateVars();\n    // Both rects are read up front: measuring the placeholder after writing\n    // its width forced a second layout for the height.\n    const originRect = this.el.getBoundingClientRect();\n    const placeholderRect = this.placeholder.getBoundingClientRect();\n    // An image not yet loaded, or hidden, has no size to zoom from; the\n    // ratios below would be 0 / 0.\n    if (!originRect.width || !originRect.height) return;\n    this._isOpen = true;\n    this.originalWidth = originRect.width;\n    this.originalHeight = originRect.height;\n    // Set states\n    this.doneAnimating = false;\n    this.el.classList.add('active');\n    this.overlayActive = true;\n    // onOpenStart callback\n    if (!this._notify('open', this.options.onOpenStart, { current: () => revision === this._revision })) return;\n    // Set positioning for placeholder\n    this.placeholder.style.width = placeholderRect.width + 'px';\n    this.placeholder.style.height = placeholderRect.height + 'px';\n    // In the top layer the image is positioned in the document, starting\n    // where the placeholder holds its place.\n    this.el.style.position = 'absolute';\n    this.el.style.inset = 'auto';\n    this.el.style.left = placeholderRect.left + window.scrollX + 'px';\n    this.el.style.top = placeholderRect.top + window.scrollY + 'px';\n    this.el.style.willChange = 'left, top, width, height';\n    // Change from width or height attribute to css\n    this.attrWidth = this.el.getAttribute('width');\n    this.attrHeight = this.el.getAttribute('height');\n    if (this.attrWidth) {\n      this.el.style.width = this.attrWidth + 'px';\n      this.el.removeAttribute('width');\n    }\n    if (this.attrHeight) {\n      this.el.style.height = this.attrHeight + 'px'; // was width, from the height attribute\n      this.el.removeAttribute('height');\n    }\n    // The overlay, the image and the caption go into the top layer in that\n    // order, so each stacks above the one before.\n    this._addOverlay();\n    this._showOnTop(this.el);\n    if (this.caption !== '') this._addCaption();\n    // Resize Image\n    const widthPercent = this.originalWidth / this.windowWidth;\n    const heightPercent = this.originalHeight / this.windowHeight;\n    if (widthPercent > heightPercent) {\n      // Width first\n      const ratio = this.originalHeight / this.originalWidth;\n      this.newWidth = this.windowWidth * 0.9;\n      this.newHeight = this.windowWidth * 0.9 * ratio;\n    } else {\n      // Height first\n      const ratio = this.originalWidth / this.originalHeight;\n      this.newWidth = this.windowHeight * 0.9 * ratio;\n      this.newHeight = this.windowHeight * 0.9;\n    }\n    // Handle Exit triggers\n    this._windowEvents?.abort();\n    this._windowEvents = controllerFor(this.el);\n    const { signal } = this._windowEvents;\n    window.addEventListener('scroll', this._handleWindowChange, { passive: true, signal });\n    window.addEventListener('resize', this._handleWindowChange, { passive: true, signal });\n    window.addEventListener('keyup', this._handleWindowEscape, { signal });\n    window.addEventListener('keydown', this._handleWindowTab, { signal });\n    this._animateImageIn();\n  };\n\n  /**\n   * Close lightbox.\n   */\n  close = () => {\n    if (this._destroyed || !this._isOpen) return;\n    this._phase++;\n    const revision = this._cancel();\n    this._isOpen = false;\n    this.doneAnimating = false;\n    // onCloseStart callback\n    if (!this._notify('close', this.options.onCloseStart, { current: () => revision === this._revision })) return;\n    // disable exit handlers\n    this._windowEvents?.abort();\n    this._restoreFocus();\n    if (this._overlay) this._fadeOut(this._overlay);\n    if (this._photoCaption) this._fadeOut(this._photoCaption);\n    this._animateImageOut();\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-KUFHW3DS.mjs → chunk-VR3L2WN5.mjs}

@@ -1,6 +1,6 @@
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
 
 // src/ts/components/confetti.ts
 var _defaults = {
@@ -23,26 +23,18 @@ var FALLBACK_COLORS = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#
 var RAD = Math.PI / 180;
 var scenes = /* @__PURE__ */ new Map();
 var overlay = null;
-var Confetti = class _Confetti extends Component {
+var _Confetti = class _Confetti extends Component {
   constructor(el, options) {
-    super(el, options, _Confetti);
+    super(el, options);
     this._onClick = () => {
       this.fire();
     };
-    this.el["Expressive_Confetti"] = this;
-    this.options = { ..._Confetti.defaults, ...options };
-    if (!(el instanceof HTMLCanvasElement)) el.addEventListener("click", this._onClick);
+    if (!(el instanceof HTMLCanvasElement)) el.addEventListener("click", this._onClick, { signal: this._events.signal });
     else if (!this.options.manualStart) this.fire();
   }
   static get defaults() {
     return _defaults;
   }
-  static init(els, options = {}) {
-    return super.init(els, options, _Confetti);
-  }
-  static getInstance(el) {
-    return el["Expressive_Confetti"];
-  }
   /**
    * Bursts over the whole viewport. Resolves when the last piece is gone.
    */
@@ -64,13 +56,14 @@ var Confetti = class _Confetti extends Component {
     return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);
   }
   destroy() {
-    this.el.removeEventListener("click", this._onClick);
     if (this.el instanceof HTMLCanvasElement) stop(this.el);
-    this.el["Expressive_Confetti"] = void 0;
+    super.destroy();
   }
 };
+_Confetti.key = "Expressive_Confetti";
+var Confetti = _Confetti;
 function burst(getCanvas, themed, o) {
-  if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+  if (matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
   const canvas = getCanvas();
   let scene = scenes.get(canvas);
   if (!scene) {
@@ -183,10 +176,11 @@ function viewportCanvas() {
     height: "100%",
     margin: "0",
     padding: "0",
+    // The fallback keeps the order where the sheet, and so the token, is absent.
     border: "0",
     background: "transparent",
     pointerEvents: "none",
-    zIndex: "10001"
+    zIndex: "var(--expressive-z-confetti, 10001)"
   });
   document.body.append(overlay);
   if (typeof overlay.showPopover === "function") {
@@ -211,4 +205,4 @@ function themeColors(themed) {
 export {
   Confetti
 };
-//# sourceMappingURL=chunk-KUFHW3DS.mjs.map
+//# sourceMappingURL=chunk-VR3L2WN5.mjs.map

package/dist/js/chunks/chunk-VR3L2WN5.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/confetti.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\n\nexport type ConfettiShape = 'square' | 'circle' | 'star';\n\nexport interface ConfettiOptions extends BaseOptions {\n  /**\n   * Pieces per burst.\n   * @default 50\n   */\n  particleCount: number;\n  /**\n   * Launch direction in degrees. 90 is straight up, 0 is right.\n   * @default 90\n   */\n  angle: number;\n  /**\n   * How far the pieces fan out from the angle, in degrees.\n   * @default 45\n   */\n  spread: number;\n  /**\n   * Launch speed in pixels per frame.\n   * @default 45\n   */\n  startVelocity: number;\n  /**\n   * Share of its speed a piece keeps each frame.\n   * @default 0.9\n   */\n  decay: number;\n  /**\n   * Pull toward the bottom. 0 floats, 1 is normal.\n   * @default 1\n   */\n  gravity: number;\n  /**\n   * Sideways push per frame. Negative drifts left.\n   * @default 0\n   */\n  drift: number;\n  /**\n   * Frames a piece lives while it fades out.\n   * @default 200\n   */\n  ticks: number;\n  /**\n   * Launch point as fractions of the canvas, 0 to 1. A missing side is\n   * 0.5. A trigger element ignores it and launches from its own center.\n   * @default { x: 0.5, y: 0.5 }\n   */\n  origin: { x?: number; y?: number };\n  /**\n   * CSS colors. Empty uses the theme's primary, secondary and tertiary\n   * colors and their containers.\n   * @default []\n   */\n  colors: string[];\n  /**\n   * @default ['square', 'circle']\n   */\n  shapes: ConfettiShape[];\n  /**\n   * Piece size multiplier.\n   * @default 1\n   */\n  scalar: number;\n  /**\n   * On a canvas, wait for `fire()` instead of bursting once at init.\n   * @default false\n   */\n  manualStart: boolean;\n}\n\nconst _defaults: ConfettiOptions = {\n  particleCount: 50,\n  angle: 90,\n  spread: 45,\n  startVelocity: 45,\n  decay: 0.9,\n  gravity: 1,\n  drift: 0,\n  ticks: 200,\n  origin: { x: 0.5, y: 0.5 },\n  colors: [],\n  shapes: ['square', 'circle'],\n  scalar: 1,\n  manualStart: false\n};\n\nconst THEME_COLORS = ['primary', 'secondary', 'tertiary', 'primary-container', 'secondary-container', 'tertiary-container'];\n// Used when the page has no theme tokens.\nconst FALLBACK_COLORS = ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff'];\nconst RAD = Math.PI / 180;\n\ninterface Piece {\n  x: number;\n  y: number;\n  velocity: number;\n  angle: number;\n  wobble: number;\n  wobbleSpeed: number;\n  tilt: number;\n  tick: number;\n  color: string;\n  shape: ConfettiShape;\n  options: ConfettiOptions;\n}\n\ninterface Scene {\n  ctx: CanvasRenderingContext2D;\n  pieces: Piece[];\n  frame: number;\n  last: number;\n  done: (() => void)[];\n  overlay: boolean;\n}\n\nconst scenes = new Map<HTMLCanvasElement, Scene>();\nlet overlay: HTMLCanvasElement | null = null;\n\n/**\n * Confetti. Bursts of theme-colored pieces drawn on a canvas.\n *\n * - `Confetti.fire(options)` bursts over the whole viewport.\n * - Any other `.confetti` element bursts from its center when clicked.\n * - A `<canvas class=\"confetti\">` bursts inside its own box, once at init\n *   unless `manualStart`, and again on each `fire()`.\n *\n * The viewport canvas is a manual popover, so it draws above an open modal\n * dialog, and it ignores the pointer. Nothing is drawn when the reader\n * prefers reduced motion.\n */\nexport class Confetti extends Component<ConfettiOptions> {\n  private _onClick = () => { this.fire(); };\n\n  constructor(el: HTMLElement, options: Partial<ConfettiOptions>) {\n    super(el, options);\n    if (!(el instanceof HTMLCanvasElement)) el.addEventListener('click', this._onClick, { signal: this._events.signal });\n    else if (!this.options.manualStart) this.fire();\n  }\n\n  static get defaults(): ConfettiOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Confetti';\n\n  /**\n   * Bursts over the whole viewport. Resolves when the last piece is gone.\n   */\n  static fire(options: Partial<ConfettiOptions> = {}): Promise<void> {\n    return burst(viewportCanvas, document.body, { ...Confetti.defaults, ...options });\n  }\n\n  /**\n   * Bursts on this canvas, or from this element's center over the viewport.\n   * Resolves when the last piece is gone.\n   */\n  fire(options: Partial<ConfettiOptions> = {}): Promise<void> {\n    const merged = { ...this.options, ...options };\n    if (this.el instanceof HTMLCanvasElement) {\n      const canvas = this.el;\n      return burst(() => canvas, canvas.parentElement ?? document.body, merged);\n    }\n    const r = this.el.getBoundingClientRect();\n    merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };\n    return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);\n  }\n\n  destroy() {\n    if (this.el instanceof HTMLCanvasElement) stop(this.el);\n    super.destroy();\n  }\n}\n\n// `themed` is where the theme colors are read, so a scoped theme applies.\nfunction burst(getCanvas: () => HTMLCanvasElement, themed: Element, o: ConfettiOptions): Promise<void> {\n  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return Promise.resolve();\n  const canvas = getCanvas();\n  let scene = scenes.get(canvas);\n  if (!scene) {\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return Promise.resolve();\n    scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };\n    scenes.set(canvas, scene);\n  }\n  const { width, height } = fit(canvas);\n  const colors = o.colors.length ? o.colors : themeColors(themed);\n  const x = (o.origin.x ?? 0.5) * width;\n  const y = (o.origin.y ?? 0.5) * height;\n  for (let i = 0; i < o.particleCount; i++) {\n    scene.pieces.push({\n      x, y,\n      velocity: o.startVelocity * (0.5 + Math.random()),\n      angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,\n      wobble: Math.random() * 10,\n      wobbleSpeed: 0.05 + Math.random() * 0.05,\n      tilt: (0.25 + Math.random() / 2) * Math.PI,\n      tick: 0,\n      color: colors[i % colors.length],\n      shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? 'square',\n      options: o\n    });\n  }\n  const s = scene;\n  if (!s.frame) s.frame = requestAnimationFrame((now) => { s.last = now; draw(canvas, s, now); });\n  return new Promise((resolve) => s.done.push(resolve));\n}\n\nfunction draw(canvas: HTMLCanvasElement, scene: Scene, now: number) {\n  // Frames are counted at 60 per second whatever the display rate.\n  const step = Math.min((now - scene.last) / (1000 / 60), 4);\n  scene.last = now;\n  const { width, height } = fit(canvas);\n  const { ctx } = scene;\n  const dpr = canvas.width / (width || 1);\n  ctx.setTransform(1, 0, 0, 1, 0, 0);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  scene.pieces = scene.pieces.filter((p) => {\n    const o = p.options;\n    p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;\n    p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;\n    p.velocity *= o.decay ** step;\n    p.wobble += p.wobbleSpeed * step;\n    p.tilt += 0.1 * step;\n    p.tick += step;\n    if (p.tick >= o.ticks) return false;\n    const size = 8 * o.scalar;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));\n    ctx.rotate(p.tilt);\n    ctx.scale(1, Math.cos(p.wobble));\n    ctx.globalAlpha = 1 - p.tick / o.ticks;\n    ctx.fillStyle = p.color;\n    ctx.beginPath();\n    if (p.shape === 'circle') ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);\n    else if (p.shape === 'star') star(ctx, size * 0.75);\n    else ctx.rect(-size / 2, -size / 2, size, size);\n    ctx.fill();\n    return true;\n  });\n  if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));\n  else stop(canvas);\n}\n\nfunction stop(canvas: HTMLCanvasElement) {\n  const scene = scenes.get(canvas);\n  if (!scene) return;\n  cancelAnimationFrame(scene.frame);\n  scenes.delete(canvas);\n  scene.ctx.setTransform(1, 0, 0, 1, 0, 0);\n  scene.ctx.clearRect(0, 0, canvas.width, canvas.height);\n  if (scene.overlay) {\n    canvas.remove();\n    overlay = null;\n  }\n  for (const resolve of scene.done) resolve();\n}\n\nfunction star(ctx: CanvasRenderingContext2D, r: number) {\n  for (let i = 0; i < 10; i++) {\n    const a = (i * Math.PI) / 5 - Math.PI / 2;\n    const d = i % 2 ? r / 2 : r;\n    ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);\n  }\n  ctx.closePath();\n}\n\n// Matches the canvas's pixel buffer to its box and the screen's pixel ratio.\nfunction fit(canvas: HTMLCanvasElement) {\n  const width = canvas.clientWidth;\n  const height = canvas.clientHeight;\n  const w = Math.round(width * devicePixelRatio);\n  const h = Math.round(height * devicePixelRatio);\n  if (canvas.width !== w || canvas.height !== h) {\n    canvas.width = w;\n    canvas.height = h;\n  }\n  return { width, height };\n}\n\nfunction viewportCanvas(): HTMLCanvasElement {\n  if (overlay?.isConnected) return overlay;\n  overlay = document.createElement('canvas');\n  overlay.className = 'confetti-overlay';\n  overlay.setAttribute('aria-hidden', 'true');\n  // Inline, so the overlay works even where the stylesheet does not reach.\n  Object.assign(overlay.style, {\n    position: 'fixed', inset: '0', width: '100%', height: '100%', margin: '0', padding: '0',\n    // The fallback keeps the order where the sheet, and so the token, is absent.\n    border: '0', background: 'transparent', pointerEvents: 'none', zIndex: 'var(--expressive-z-confetti, 10001)'\n  });\n  document.body.append(overlay);\n  if (typeof overlay.showPopover === 'function') {\n    overlay.popover = 'manual';\n    overlay.showPopover();\n  }\n  return overlay;\n}\n\n// Resolves each theme color token through `color`, so light-dark() and\n// relative colors reach the canvas as plain colors.\nfunction themeColors(themed: Element): string[] {\n  const probe = document.createElement('span');\n  probe.hidden = true;\n  themed.append(probe);\n  const style = getComputedStyle(probe);\n  const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {\n    probe.style.color = `var(--md-sys-color-${role})`;\n    return getComputedStyle(probe).color;\n  });\n  probe.remove();\n  return colors.length ? colors : FALLBACK_COLORS;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-W6FAL3TI.mjs

@@ -0,0 +1,38 @@
+// src/ts/core/spring.ts
+var FPS = 60;
+var REST = 0.5;
+var LONGEST = 5;
+function displacement(x0, v0, { damping, stiffness }, t) {
+  const w = Math.sqrt(stiffness);
+  if (damping >= 1) return Math.exp(-w * t) * (x0 + (v0 + w * x0) * t);
+  const wd = w * Math.sqrt(1 - damping * damping);
+  return Math.exp(-damping * w * t) * (x0 * Math.cos(wd * t) + (v0 + damping * w * x0) / wd * Math.sin(wd * t));
+}
+function springPath(from, to, velocity, spring) {
+  const path = [from];
+  const [x0, v0] = [from - to, velocity * 1e3];
+  for (let frame = 1; frame < LONGEST * FPS; frame++) {
+    const x = displacement(x0, v0, spring, frame / FPS);
+    path.push(to + x);
+    if (Math.abs(x) < REST && Math.abs(to + x - path[frame - 1]) < REST) break;
+  }
+  path.push(to);
+  return path;
+}
+function springToken(el, name) {
+  const style = getComputedStyle(el);
+  const read = (part) => parseFloat(style.getPropertyValue(`--md-sys-motion-spring-${name}-${part}`));
+  const [damping, stiffness] = [read("damping"), read("stiffness")];
+  return damping > 0 && stiffness > 0 ? { damping, stiffness } : null;
+}
+function animatePath(el, property, path, write) {
+  const frames = path.map((value) => ({ [property]: write(value) }));
+  return el.animate(frames, { duration: (path.length - 1) * 1e3 / FPS, easing: "linear" });
+}
+
+export {
+  springPath,
+  springToken,
+  animatePath
+};
+//# sourceMappingURL=chunk-W6FAL3TI.mjs.map

package/dist/js/chunks/chunk-W6FAL3TI.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/core/spring.ts"],
+  "sourcesContent": ["/**\n * Springs solved at run time. The CSS springs are sampled at build time\n * into linear() easings that always start from rest, so motion that is\n * interrupted restarts. A spring solved here starts from where something\n * is, at the speed it has, as M3's springs do: mass 1, a damping ratio and\n * a stiffness.\n */\nexport interface Spring {\n  damping: number;\n  stiffness: number;\n}\n\n/** Frames per second the path is sampled at. */\nconst FPS = 60;\n/** Settled once within this distance of the target and moving less than this a frame. */\nconst REST = 0.5;\n/** No spring runs longer than this, in seconds. */\nconst LONGEST = 5;\n\n/**\n * How far from the target a spring is at `t` seconds, released `x0` away\n * at speed `v0`: underdamped springs oscillate as they decay, and M3's\n * critically damped ones do not.\n */\nfunction displacement(x0: number, v0: number, { damping, stiffness }: Spring, t: number) {\n  const w = Math.sqrt(stiffness);\n  if (damping >= 1) return Math.exp(-w * t) * (x0 + (v0 + w * x0) * t);\n  const wd = w * Math.sqrt(1 - damping * damping);\n  return Math.exp(-damping * w * t) * (x0 * Math.cos(wd * t) + ((v0 + damping * w * x0) / wd) * Math.sin(wd * t));\n}\n\n/**\n * The spring's path from `from` to `to`, released at `velocity` in units\n * per millisecond, as one value a frame until it settles on `to`.\n */\nexport function springPath(from: number, to: number, velocity: number, spring: Spring): number[] {\n  const path = [from];\n  const [x0, v0] = [from - to, velocity * 1000];\n  for (let frame = 1; frame < LONGEST * FPS; frame++) {\n    const x = displacement(x0, v0, spring, frame / FPS);\n    path.push(to + x);\n    if (Math.abs(x) < REST && Math.abs(to + x - path[frame - 1]) < REST) break;\n  }\n  path.push(to);\n  return path;\n}\n\n/** The spring a CSS token names, from its -damping and -stiffness tokens, or null without them. */\nexport function springToken(el: Element, name: string): Spring | null {\n  const style = getComputedStyle(el);\n  const read = (part: string) => parseFloat(style.getPropertyValue(`--md-sys-motion-spring-${name}-${part}`));\n  const [damping, stiffness] = [read('damping'), read('stiffness')];\n  return damping > 0 && stiffness > 0 ? { damping, stiffness } : null;\n}\n\n/** Plays a path on one property, `write` turning each value into CSS. */\nexport function animatePath(el: Element, property: string, path: number[], write: (value: number) => string): Animation {\n  const frames = path.map((value) => ({ [property]: write(value) }));\n  return el.animate(frames, { duration: ((path.length - 1) * 1000) / FPS, easing: 'linear' });\n}\n"],
+  "mappings": ";AAaA,IAAM,MAAM;AAEZ,IAAM,OAAO;AAEb,IAAM,UAAU;AAOhB,SAAS,aAAa,IAAY,IAAY,EAAE,SAAS,UAAU,GAAW,GAAW;AACvF,QAAM,IAAI,KAAK,KAAK,SAAS;AAC7B,MAAI,WAAW,EAAG,QAAO,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,KAAK,IAAI,MAAM;AAClE,QAAM,KAAK,IAAI,KAAK,KAAK,IAAI,UAAU,OAAO;AAC9C,SAAO,KAAK,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,KAAM,KAAK,UAAU,IAAI,MAAM,KAAM,KAAK,IAAI,KAAK,CAAC;AAC/G;AAMO,SAAS,WAAW,MAAc,IAAY,UAAkB,QAA0B;AAC/F,QAAM,OAAO,CAAC,IAAI;AAClB,QAAM,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,WAAW,GAAI;AAC5C,WAAS,QAAQ,GAAG,QAAQ,UAAU,KAAK,SAAS;AAClD,UAAM,IAAI,aAAa,IAAI,IAAI,QAAQ,QAAQ,GAAG;AAClD,SAAK,KAAK,KAAK,CAAC;AAChB,QAAI,KAAK,IAAI,CAAC,IAAI,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,QAAQ,CAAC,CAAC,IAAI,KAAM;AAAA,EACvE;AACA,OAAK,KAAK,EAAE;AACZ,SAAO;AACT;AAGO,SAAS,YAAY,IAAa,MAA6B;AACpE,QAAM,QAAQ,iBAAiB,EAAE;AACjC,QAAM,OAAO,CAAC,SAAiB,WAAW,MAAM,iBAAiB,0BAA0B,IAAI,IAAI,IAAI,EAAE,CAAC;AAC1G,QAAM,CAAC,SAAS,SAAS,IAAI,CAAC,KAAK,SAAS,GAAG,KAAK,WAAW,CAAC;AAChE,SAAO,UAAU,KAAK,YAAY,IAAI,EAAE,SAAS,UAAU,IAAI;AACjE;AAGO,SAAS,YAAY,IAAa,UAAkB,MAAgB,OAA6C;AACtH,QAAM,SAAS,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,GAAG,MAAM,KAAK,EAAE,EAAE;AACjE,SAAO,GAAG,QAAQ,QAAQ,EAAE,WAAY,KAAK,SAAS,KAAK,MAAQ,KAAK,QAAQ,SAAS,CAAC;AAC5F;",
+  "names": []
+}