@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/lib/menu-highlight.js

@@ -0,0 +1,64 @@
+import { useCallback, useRef } from "react";
+//#region src/lib/menu-highlight.ts
+const ROWS = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/**
+* One highlight for a whole menu, drawn by the menu's ::before (the
+* `menu-highlight` utility) and moved from here: it appears in place on the
+* first row, glides between rows after that (pointer and arrow keys alike,
+* because React Aria focuses the row either way), and fades out shortly after
+* focus leaves the rows. A row marked `data-destructive` tints it red. Returns
+* the cleanup.
+*/
+function bindMenuHighlight(menu) {
+	let shown = false;
+	let timer = 0;
+	const hide = () => {
+		menu.removeAttribute("data-hl");
+		menu.removeAttribute("data-glide");
+		shown = false;
+	};
+	const onFocusIn = (event) => {
+		window.clearTimeout(timer);
+		const row = event.target.closest(ROWS);
+		if (!row || !menu.contains(row) || row.hasAttribute("data-disabled")) {
+			timer = window.setTimeout(hide, 70);
+			return;
+		}
+		if (shown) menu.setAttribute("data-glide", "");
+		else menu.removeAttribute("data-glide");
+		menu.style.setProperty("--hl-y", row.offsetTop + "px");
+		menu.style.setProperty("--hl-h", row.offsetHeight + "px");
+		if (row.hasAttribute("data-destructive")) menu.setAttribute("data-hl-tone", "destructive");
+		else menu.removeAttribute("data-hl-tone");
+		menu.setAttribute("data-hl", "");
+		shown = true;
+	};
+	const onFocusOut = (event) => {
+		if (menu.contains(event.relatedTarget)) return;
+		window.clearTimeout(timer);
+		hide();
+	};
+	menu.addEventListener("focusin", onFocusIn);
+	menu.addEventListener("focusout", onFocusOut);
+	return () => {
+		window.clearTimeout(timer);
+		menu.removeEventListener("focusin", onFocusIn);
+		menu.removeEventListener("focusout", onFocusOut);
+	};
+}
+/**
+* A ref callback for the element that carries `menu-highlight`. A menu that
+* mounts only while open (a popover) binds when it appears and unbinds when it
+* goes, so this is a callback ref rather than an effect.
+*/
+function useMenuHighlight() {
+	const unbind = useRef(void 0);
+	return useCallback((node) => {
+		unbind.current?.();
+		unbind.current = node ? bindMenuHighlight(node) : void 0;
+	}, []);
+}
+//#endregion
+export { useMenuHighlight };
+
+//# sourceMappingURL=menu-highlight.js.map

package/dist/lib/menu-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-highlight.js","names":[],"sources":["../../src/lib/menu-highlight.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\n\nconst ROWS = '[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]';\n\n/**\n * One highlight for a whole menu, drawn by the menu's ::before (the\n * `menu-highlight` utility) and moved from here: it appears in place on the\n * first row, glides between rows after that (pointer and arrow keys alike,\n * because React Aria focuses the row either way), and fades out shortly after\n * focus leaves the rows. A row marked `data-destructive` tints it red. Returns\n * the cleanup.\n */\nfunction bindMenuHighlight(menu: HTMLElement) {\n  let shown = false;\n  let timer = 0;\n  const hide = () => {\n    menu.removeAttribute(\"data-hl\");\n    menu.removeAttribute(\"data-glide\");\n    shown = false;\n  };\n  const onFocusIn = (event: FocusEvent) => {\n    window.clearTimeout(timer);\n    const row = (event.target as Element).closest<HTMLElement>(ROWS);\n    // Between rows (a gap, the separator, the menu itself) it waits a moment, so it can glide across.\n    if (!row || !menu.contains(row) || row.hasAttribute(\"data-disabled\")) {\n      timer = window.setTimeout(hide, 70);\n      return;\n    }\n    if (shown) menu.setAttribute(\"data-glide\", \"\");\n    else menu.removeAttribute(\"data-glide\");\n    menu.style.setProperty(\"--hl-y\", row.offsetTop + \"px\");\n    menu.style.setProperty(\"--hl-h\", row.offsetHeight + \"px\");\n    if (row.hasAttribute(\"data-destructive\")) menu.setAttribute(\"data-hl-tone\", \"destructive\");\n    else menu.removeAttribute(\"data-hl-tone\");\n    menu.setAttribute(\"data-hl\", \"\");\n    shown = true;\n  };\n  const onFocusOut = (event: FocusEvent) => {\n    if (menu.contains(event.relatedTarget as Node | null)) return;\n    window.clearTimeout(timer);\n    hide();\n  };\n  menu.addEventListener(\"focusin\", onFocusIn);\n  menu.addEventListener(\"focusout\", onFocusOut);\n  return () => {\n    window.clearTimeout(timer);\n    menu.removeEventListener(\"focusin\", onFocusIn);\n    menu.removeEventListener(\"focusout\", onFocusOut);\n  };\n}\n\n/**\n * A ref callback for the element that carries `menu-highlight`. A menu that\n * mounts only while open (a popover) binds when it appears and unbinds when it\n * goes, so this is a callback ref rather than an effect.\n */\nexport function useMenuHighlight() {\n  const unbind = useRef<(() => void) | undefined>(undefined);\n  return useCallback((node: HTMLElement | null) => {\n    unbind.current?.();\n    unbind.current = node ? bindMenuHighlight(node) : undefined;\n  }, []);\n}\n"],"mappings":";;AAEA,MAAM,OAAO;;;;;;;;;AAUb,SAAS,kBAAkB,MAAmB;CAC5C,IAAI,QAAQ;CACZ,IAAI,QAAQ;CACZ,MAAM,aAAa;EACjB,KAAK,gBAAgB,SAAS;EAC9B,KAAK,gBAAgB,YAAY;EACjC,QAAQ;CACV;CACA,MAAM,aAAa,UAAsB;EACvC,OAAO,aAAa,KAAK;EACzB,MAAM,MAAO,MAAM,OAAmB,QAAqB,IAAI;EAE/D,IAAI,CAAC,OAAO,CAAC,KAAK,SAAS,GAAG,KAAK,IAAI,aAAa,eAAe,GAAG;GACpE,QAAQ,OAAO,WAAW,MAAM,EAAE;GAClC;EACF;EACA,IAAI,OAAO,KAAK,aAAa,cAAc,EAAE;OACxC,KAAK,gBAAgB,YAAY;EACtC,KAAK,MAAM,YAAY,UAAU,IAAI,YAAY,IAAI;EACrD,KAAK,MAAM,YAAY,UAAU,IAAI,eAAe,IAAI;EACxD,IAAI,IAAI,aAAa,kBAAkB,GAAG,KAAK,aAAa,gBAAgB,aAAa;OACpF,KAAK,gBAAgB,cAAc;EACxC,KAAK,aAAa,WAAW,EAAE;EAC/B,QAAQ;CACV;CACA,MAAM,cAAc,UAAsB;EACxC,IAAI,KAAK,SAAS,MAAM,aAA4B,GAAG;EACvD,OAAO,aAAa,KAAK;EACzB,KAAK;CACP;CACA,KAAK,iBAAiB,WAAW,SAAS;CAC1C,KAAK,iBAAiB,YAAY,UAAU;CAC5C,aAAa;EACX,OAAO,aAAa,KAAK;EACzB,KAAK,oBAAoB,WAAW,SAAS;EAC7C,KAAK,oBAAoB,YAAY,UAAU;CACjD;AACF;;;;;;AAOA,SAAgB,mBAAmB;CACjC,MAAM,SAAS,OAAiC,KAAA,CAAS;CACzD,OAAO,aAAa,SAA6B;EAC/C,OAAO,UAAU;EACjB,OAAO,UAAU,OAAO,kBAAkB,IAAI,IAAI,KAAA;CACpD,GAAG,CAAC,CAAC;AACP"}

package/dist/lib/motion.js

@@ -1,8 +1,15 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 //#region src/lib/motion.ts
 /** useLayoutEffect warns when rendered on the server in React 18, which this package supports; there it falls back to useEffect. */
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const subscribeReducedMotion = (notify) => {
+	const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+	query.addEventListener("change", notify);
+	return () => query.removeEventListener("change", notify);
+};
+/** Whether the visitor prefers reduced motion, kept current. False on the server and until hydrated. */
+const useReducedMotion = () => useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
 /**
 * Springs the slot to the natural width of the incoming label when it changes,
 * so a new label never snaps the button's size. Only a resize within 700ms of a
@@ -157,6 +164,6 @@ function useAriaBusy(pending) {
 	return ref;
 }
 //#endregion
-export { anchorsLayer, prefersReducedMotion, pressScaleFor, useAriaBusy, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems, useMorphWidth };
+export { anchorsLayer, prefersReducedMotion, pressScaleFor, useAriaBusy, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems, useMorphWidth, useReducedMotion };
 
 //# sourceMappingURL=motion.js.map

package/dist/lib/motion.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion.js","names":[],"sources":["../../src/lib/motion.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\n\n/*\n * Motion helpers shared by every component with button-like motion: the press\n * depth, the width that springs to fit new content, and the backstop for an\n * exit animation that never ends. Plain React and CSS, no animation library;\n * the animations themselves are keyframes and transitions in\n * @seekalfred/styles motion.css and the button-* utilities in styles.css.\n */\n\n/** useLayoutEffect warns when rendered on the server in React 18, which this package supports; there it falls back to useEffect. */\nexport const useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nexport const prefersReducedMotion = () =>\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n/**\n * Springs the slot to the natural width of the incoming label when it changes,\n * so a new label never snaps the button's size. Only a resize within 700ms of a\n * label change morphs; any other resize (a late web font, a parent reflow),\n * the first measurement and reduced motion jump straight to the new width, so\n * nothing wobbles on first paint. data-morphing turns on the slot's width\n * transition and its clip-path (button-slot).\n */\nexport function useMorphWidth(content: RefObject<HTMLElement | null>, key: string, enabled = true) {\n  const lastKey = useRef(key);\n  const armedUntil = useRef(0);\n  useIsomorphicLayoutEffect(() => {\n    if (lastKey.current === key) return;\n    lastKey.current = key;\n    armedUntil.current = performance.now() + 700;\n  }, [key]);\n  useEffect(() => {\n    const node = content.current;\n    const slot = node?.parentElement;\n    if (!enabled || !node || !slot || typeof ResizeObserver === \"undefined\") return;\n    let measured = false;\n    let settle: ReturnType<typeof setTimeout> | undefined;\n    const done = () => {\n      clearTimeout(settle);\n      delete slot.dataset.morphing;\n    };\n    const onEnd = (event: TransitionEvent) => {\n      if (event.target === slot && event.propertyName === \"width\") done();\n    };\n    slot.addEventListener(\"transitionend\", onEnd);\n    const apply = (next: number, at: number) => {\n      if (!next || !measured || prefersReducedMotion() || at > armedUntil.current) {\n        measured = next > 0;\n        slot.style.width = next ? next + \"px\" : \"\";\n        done();\n        return;\n      }\n      slot.dataset.morphing = \"\";\n      slot.style.width = next + \"px\";\n      // A morph that ends without a width transition (nothing to animate) would\n      // leave the clip-path on; this is the backstop.\n      clearTimeout(settle);\n      settle = setTimeout(done, 900);\n    };\n    // The write is deferred a frame. Setting the slot's width resizes whatever\n    // contains it, and if that is observed too (a segment in a button group) doing\n    // it inside this notification reports a ResizeObserver loop error.\n    let frame = 0;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const next = entry.contentRect.width;\n      const at = performance.now();\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => apply(next, at));\n    });\n    observer.observe(node);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n      slot.removeEventListener(\"transitionend\", onEnd);\n      clearTimeout(settle);\n    };\n  }, [content, enabled]);\n}\n\n/**\n * Runs remove after a backstop delay, in case an exit animation never ends (a\n * consumer who disables animation). The delay must outlast the animation:\n * 600ms covers the quick exits, a spring that settles in 736ms needs more.\n */\nexport function useExitBackstop(active: boolean, remove: () => void, delay = 600) {\n  useEffect(() => {\n    if (!active) return;\n    const timer = setTimeout(remove, delay);\n    return () => clearTimeout(timer);\n  }, [active, remove, delay]);\n}\n\n/** A press goes a little deeper on an icon button and a little less on a wide one, so every size reads as the same push. */\nexport function pressScaleFor(width: number) {\n  return width > 220 ? \"0.985\" : width && width <= 48 ? \"0.96\" : \"0.97\";\n}\n\n/** True for a trigger that anchors a menu, popover or dialog; those never scale. */\nexport function anchorsLayer(props: object) {\n  const { \"aria-haspopup\": popup, role, \"data-state\": state } = props as Record<string, unknown>;\n  return (\n    (popup !== undefined && popup !== false && popup !== \"false\") ||\n    role === \"combobox\" ||\n    state !== undefined\n  );\n}\n\n/** Where a node sat inside its offset parent, in px. */\nexport interface Rect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\nexport interface LeavingItem<T> {\n  id: number;\n  value: T;\n  /** The place the node last occupied, so it can be popped out of flow right there. */\n  rect: Rect;\n}\n\n/**\n * Keeps the outgoing version of something on screen while its replacement\n * enters, which CSS alone cannot do: a node React unmounts is gone.\n *\n * `key` says when it has changed. On a change the previous `value` joins\n * `leaving`, stamped with the place it last occupied (read from `measure`,\n * the CURRENT node, after every commit); the caller renders each leaving item\n * out of flow at that rect with an exit animation and calls `remove` when it\n * ends. `changed` turns true on the first change, so nothing animates on first\n * mount. It must be a layout effect: the old node's position is DOM state that\n * only exists until the next paint.\n */\nexport function useLeavingItems<T>(key: string, value: T, measure: () => HTMLElement | null) {\n  const previous = useRef({ key, value });\n  const rect = useRef<Rect>({ left: 0, top: 0, width: 0, height: 0 });\n  const nextId = useRef(0);\n  const [leaving, setLeaving] = useState<LeavingItem<T>[]>([]);\n  const [changed, setChanged] = useState(false);\n\n  // Declared before the effect below, which overwrites the record this reads.\n  useIsomorphicLayoutEffect(() => {\n    const old = previous.current;\n    if (old.key === key) return;\n    setLeaving((list) => [...list, { id: nextId.current++, value: old.value, rect: rect.current }]);\n    setChanged(true);\n  }, [key]);\n\n  useIsomorphicLayoutEffect(() => {\n    previous.current = { key, value };\n    const node = measure();\n    if (node)\n      rect.current = {\n        left: node.offsetLeft,\n        top: node.offsetTop,\n        width: node.offsetWidth,\n        height: node.offsetHeight,\n      };\n  });\n\n  const remove = useCallback(\n    (id: number) => setLeaving((list) => list.filter((item) => item.id !== id)),\n    [],\n  );\n  return { leaving, changed, remove };\n}\n\n/**\n * React Aria sets aria-disabled and data-pending on a pending button but\n * forwards no aria-busy, so a pending button was not announced as busy. Put the\n * returned ref on the button (merge it with any other); nothing else manages\n * this attribute on the element.\n */\nexport function useAriaBusy(pending: boolean) {\n  const ref = useRef<HTMLElement | null>(null);\n  useIsomorphicLayoutEffect(() => {\n    if (pending) ref.current?.setAttribute(\"aria-busy\", \"true\");\n    else ref.current?.removeAttribute(\"aria-busy\");\n  }, [pending]);\n  return ref;\n}\n"],"mappings":"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"}
+{"version":3,"file":"motion.js","names":[],"sources":["../../src/lib/motion.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type RefObject } from \"react\";\n\n/*\n * Motion helpers shared by every component with button-like motion: the press\n * depth, the width that springs to fit new content, and the backstop for an\n * exit animation that never ends. Plain React and CSS, no animation library;\n * the animations themselves are keyframes and transitions in\n * @seekalfred/styles motion.css and the button-* utilities in styles.css.\n */\n\n/** useLayoutEffect warns when rendered on the server in React 18, which this package supports; there it falls back to useEffect. */\nexport const useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nexport const prefersReducedMotion = () =>\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst subscribeReducedMotion = (notify: () => void) => {\n  const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  query.addEventListener(\"change\", notify);\n  return () => query.removeEventListener(\"change\", notify);\n};\n\n/** Whether the visitor prefers reduced motion, kept current. False on the server and until hydrated. */\nexport const useReducedMotion = () =>\n  useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);\n\n/**\n * Springs the slot to the natural width of the incoming label when it changes,\n * so a new label never snaps the button's size. Only a resize within 700ms of a\n * label change morphs; any other resize (a late web font, a parent reflow),\n * the first measurement and reduced motion jump straight to the new width, so\n * nothing wobbles on first paint. data-morphing turns on the slot's width\n * transition and its clip-path (button-slot).\n */\nexport function useMorphWidth(content: RefObject<HTMLElement | null>, key: string, enabled = true) {\n  const lastKey = useRef(key);\n  const armedUntil = useRef(0);\n  useIsomorphicLayoutEffect(() => {\n    if (lastKey.current === key) return;\n    lastKey.current = key;\n    armedUntil.current = performance.now() + 700;\n  }, [key]);\n  useEffect(() => {\n    const node = content.current;\n    const slot = node?.parentElement;\n    if (!enabled || !node || !slot || typeof ResizeObserver === \"undefined\") return;\n    let measured = false;\n    let settle: ReturnType<typeof setTimeout> | undefined;\n    const done = () => {\n      clearTimeout(settle);\n      delete slot.dataset.morphing;\n    };\n    const onEnd = (event: TransitionEvent) => {\n      if (event.target === slot && event.propertyName === \"width\") done();\n    };\n    slot.addEventListener(\"transitionend\", onEnd);\n    const apply = (next: number, at: number) => {\n      if (!next || !measured || prefersReducedMotion() || at > armedUntil.current) {\n        measured = next > 0;\n        slot.style.width = next ? next + \"px\" : \"\";\n        done();\n        return;\n      }\n      slot.dataset.morphing = \"\";\n      slot.style.width = next + \"px\";\n      // A morph that ends without a width transition (nothing to animate) would\n      // leave the clip-path on; this is the backstop.\n      clearTimeout(settle);\n      settle = setTimeout(done, 900);\n    };\n    // The write is deferred a frame. Setting the slot's width resizes whatever\n    // contains it, and if that is observed too (a segment in a button group) doing\n    // it inside this notification reports a ResizeObserver loop error.\n    let frame = 0;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const next = entry.contentRect.width;\n      const at = performance.now();\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => apply(next, at));\n    });\n    observer.observe(node);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n      slot.removeEventListener(\"transitionend\", onEnd);\n      clearTimeout(settle);\n    };\n  }, [content, enabled]);\n}\n\n/**\n * Runs remove after a backstop delay, in case an exit animation never ends (a\n * consumer who disables animation). The delay must outlast the animation:\n * 600ms covers the quick exits, a spring that settles in 736ms needs more.\n */\nexport function useExitBackstop(active: boolean, remove: () => void, delay = 600) {\n  useEffect(() => {\n    if (!active) return;\n    const timer = setTimeout(remove, delay);\n    return () => clearTimeout(timer);\n  }, [active, remove, delay]);\n}\n\n/** A press goes a little deeper on an icon button and a little less on a wide one, so every size reads as the same push. */\nexport function pressScaleFor(width: number) {\n  return width > 220 ? \"0.985\" : width && width <= 48 ? \"0.96\" : \"0.97\";\n}\n\n/** True for a trigger that anchors a menu, popover or dialog; those never scale. */\nexport function anchorsLayer(props: object) {\n  const { \"aria-haspopup\": popup, role, \"data-state\": state } = props as Record<string, unknown>;\n  return (\n    (popup !== undefined && popup !== false && popup !== \"false\") ||\n    role === \"combobox\" ||\n    state !== undefined\n  );\n}\n\n/** Where a node sat inside its offset parent, in px. */\nexport interface Rect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\nexport interface LeavingItem<T> {\n  id: number;\n  value: T;\n  /** The place the node last occupied, so it can be popped out of flow right there. */\n  rect: Rect;\n}\n\n/**\n * Keeps the outgoing version of something on screen while its replacement\n * enters, which CSS alone cannot do: a node React unmounts is gone.\n *\n * `key` says when it has changed. On a change the previous `value` joins\n * `leaving`, stamped with the place it last occupied (read from `measure`,\n * the CURRENT node, after every commit); the caller renders each leaving item\n * out of flow at that rect with an exit animation and calls `remove` when it\n * ends. `changed` turns true on the first change, so nothing animates on first\n * mount. It must be a layout effect: the old node's position is DOM state that\n * only exists until the next paint.\n */\nexport function useLeavingItems<T>(key: string, value: T, measure: () => HTMLElement | null) {\n  const previous = useRef({ key, value });\n  const rect = useRef<Rect>({ left: 0, top: 0, width: 0, height: 0 });\n  const nextId = useRef(0);\n  const [leaving, setLeaving] = useState<LeavingItem<T>[]>([]);\n  const [changed, setChanged] = useState(false);\n\n  // Declared before the effect below, which overwrites the record this reads.\n  useIsomorphicLayoutEffect(() => {\n    const old = previous.current;\n    if (old.key === key) return;\n    setLeaving((list) => [...list, { id: nextId.current++, value: old.value, rect: rect.current }]);\n    setChanged(true);\n  }, [key]);\n\n  useIsomorphicLayoutEffect(() => {\n    previous.current = { key, value };\n    const node = measure();\n    if (node)\n      rect.current = {\n        left: node.offsetLeft,\n        top: node.offsetTop,\n        width: node.offsetWidth,\n        height: node.offsetHeight,\n      };\n  });\n\n  const remove = useCallback(\n    (id: number) => setLeaving((list) => list.filter((item) => item.id !== id)),\n    [],\n  );\n  return { leaving, changed, remove };\n}\n\n/**\n * React Aria sets aria-disabled and data-pending on a pending button but\n * forwards no aria-busy, so a pending button was not announced as busy. Put the\n * returned ref on the button (merge it with any other); nothing else manages\n * this attribute on the element.\n */\nexport function useAriaBusy(pending: boolean) {\n  const ref = useRef<HTMLElement | null>(null);\n  useIsomorphicLayoutEffect(() => {\n    if (pending) ref.current?.setAttribute(\"aria-busy\", \"true\");\n    else ref.current?.removeAttribute(\"aria-busy\");\n  }, [pending]);\n  return ref;\n}\n"],"mappings":"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"}

package/dist/lib/rolling-value.js

@@ -19,7 +19,7 @@ function RollingValue({ srValue, swapKey, dir, instanceKey, children }) {
 				swapKey,
 				dir,
 				motion: "roll",
-				className: "block [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate",
+				className: "flex items-center [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate",
 				children
 			}, instanceKey)
 		})]

package/dist/lib/rolling-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"rolling-value.js","names":[],"sources":["../../src/lib/rolling-value.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { SwapText } from \"./swap-text.js\";\n\n/**\n * The value shown in a picker's trigger. The caller's own text stays, visually\n * hidden, as what a screen reader reads (`srValue`); the copy the eye sees rolls\n * when it changes: a later value rises in from below, an earlier one drops in from\n * above, and the old one lifts away. Nothing animates on first mount. Long text is\n * cut with an ellipsis. `instanceKey` remounts the swap, which is how a caller whose\n * first value arrives a render late makes that arrival the first mount.\n */\nexport function RollingValue({\n  srValue,\n  swapKey,\n  dir,\n  instanceKey,\n  children,\n}: {\n  srValue: ReactNode;\n  swapKey: string;\n  dir: number;\n  instanceKey?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span className=\"grid min-w-0 flex-1\">\n      {srValue}\n      <span aria-hidden=\"true\" className=\"min-w-0 overflow-hidden whitespace-nowrap\">\n        <SwapText\n          key={instanceKey}\n          swapKey={swapKey}\n          dir={dir}\n          motion=\"roll\"\n          className=\"block [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate\"\n        >\n          {children}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,aAAa,EAC3B,SACA,SACA,KACA,aACA,YAOC;CACD,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,SACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA,oBAAC,UAAD;IAEW;IACJ;IACL,QAAO;IACP,WAAU;IAET;GACO,GAPH,WAOG;EACN,CAAA,CACF;;AAEV"}
+{"version":3,"file":"rolling-value.js","names":[],"sources":["../../src/lib/rolling-value.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { SwapText } from \"./swap-text.js\";\n\n/**\n * The value shown in a picker's trigger. The caller's own text stays, visually\n * hidden, as what a screen reader reads (`srValue`); the copy the eye sees rolls\n * when it changes: a later value rises in from below, an earlier one drops in from\n * above, and the old one lifts away. Nothing animates on first mount. Long text is\n * cut with an ellipsis. `instanceKey` remounts the swap, which is how a caller whose\n * first value arrives a render late makes that arrival the first mount.\n */\nexport function RollingValue({\n  srValue,\n  swapKey,\n  dir,\n  instanceKey,\n  children,\n}: {\n  srValue: ReactNode;\n  swapKey: string;\n  dir: number;\n  instanceKey?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span className=\"grid min-w-0 flex-1\">\n      {srValue}\n      <span aria-hidden=\"true\" className=\"min-w-0 overflow-hidden whitespace-nowrap\">\n        <SwapText\n          key={instanceKey}\n          swapKey={swapKey}\n          dir={dir}\n          motion=\"roll\"\n          // A flex row, not a block of inline boxes: a truncated inline-block sits on the\n          // line's baseline, which stretches the line and leaves the text above centre.\n          className=\"flex items-center [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate\"\n        >\n          {children}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,aAAa,EAC3B,SACA,SACA,KACA,aACA,YAOC;CACD,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,SACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA,oBAAC,UAAD;IAEW;IACJ;IACL,QAAO;IAGP,WAAU;IAET;GACO,GATH,WASG;EACN,CAAA,CACF;;AAEV"}

package/dist/lib/spring-tween.js

@@ -0,0 +1,500 @@
+import { prefersReducedMotion } from "./motion.js";
+//#region src/lib/spring-tween.ts
+/** visualDuration .26s, bounce .12: presses, toggles, cursors and small indicators. */
+const SNAPPY = {
+	curve: [
+		0,
+		.043,
+		.1426,
+		.2664,
+		.3943,
+		.5144,
+		.6206,
+		.7107,
+		.7845,
+		.8433,
+		.889,
+		.9236,
+		.9492,
+		.9678,
+		.9808,
+		.9897,
+		.9956,
+		.9992,
+		1.0014,
+		1.0025,
+		1.0029,
+		1
+	],
+	ms: 336
+};
+/** visualDuration .4s, no bounce: shapes and layout that move while on screen. */
+const SMOOTH = {
+	curve: [
+		0,
+		.0191,
+		.0667,
+		.1313,
+		.2048,
+		.2816,
+		.3577,
+		.4308,
+		.4991,
+		.562,
+		.6189,
+		.67,
+		.7154,
+		.7554,
+		.7905,
+		.821,
+		.8475,
+		.8704,
+		.89,
+		.9069,
+		.9213,
+		.9336,
+		.9441,
+		.9529,
+		.9605,
+		.9668,
+		.9722,
+		.9767,
+		.9805,
+		.9837,
+		.9864,
+		.9887,
+		.9905,
+		.9921,
+		.9934,
+		.9945,
+		.9955,
+		.9962,
+		.9969,
+		.9974,
+		.9978,
+		.9982,
+		.9985,
+		.9988,
+		.999,
+		1
+	],
+	ms: 720
+};
+/** visualDuration .72s, no bounce: a first sweep that opens slowly and settles long. */
+const REVEAL = {
+	curve: [
+		0,
+		.0063,
+		.0232,
+		.0484,
+		.0799,
+		.1159,
+		.1552,
+		.1964,
+		.2388,
+		.2816,
+		.3242,
+		.366,
+		.4069,
+		.4464,
+		.4844,
+		.5207,
+		.5553,
+		.588,
+		.6189,
+		.648,
+		.6753,
+		.7009,
+		.7248,
+		.747,
+		.7676,
+		.7868,
+		.8046,
+		.821,
+		.8362,
+		.8502,
+		.8631,
+		.875,
+		.8859,
+		.8959,
+		.9052,
+		.9136,
+		.9213,
+		.9284,
+		.9349,
+		.9408,
+		.9462,
+		.9511,
+		.9556,
+		.9597,
+		.9634,
+		.9668,
+		.9699,
+		.9727,
+		.9753,
+		.9776,
+		.9797,
+		.9816,
+		.9834,
+		.985,
+		.9864,
+		.9877,
+		.9889,
+		.9899,
+		.9909,
+		.9918,
+		.9926,
+		.9933,
+		.994,
+		.9945,
+		.9951,
+		.9956,
+		.996,
+		.9964,
+		.9967,
+		.9971,
+		.9973,
+		.9976,
+		.9978,
+		.9981,
+		.9982,
+		.9984,
+		1
+	],
+	ms: 1232
+};
+/** visualDuration .5s, no bounce: parts of a whole moving to a new share. */
+const SETTLE = {
+	curve: [
+		0,
+		.0126,
+		.045,
+		.091,
+		.1455,
+		.2048,
+		.2662,
+		.3275,
+		.3874,
+		.4448,
+		.4991,
+		.5499,
+		.5969,
+		.6401,
+		.6796,
+		.7154,
+		.7478,
+		.777,
+		.8032,
+		.8266,
+		.8475,
+		.8661,
+		.8825,
+		.8971,
+		.91,
+		.9213,
+		.9313,
+		.9401,
+		.9478,
+		.9545,
+		.9605,
+		.9656,
+		.9701,
+		.9741,
+		.9775,
+		.9805,
+		.9831,
+		.9854,
+		.9873,
+		.9891,
+		.9905,
+		.9918,
+		.9929,
+		.9939,
+		.9947,
+		.9955,
+		.9961,
+		.9966,
+		.9971,
+		.9975,
+		.9978,
+		.9981,
+		.9984,
+		.9986,
+		.9988,
+		1
+	],
+	ms: 880
+};
+/** visualDuration .42s, bounce .16: things that grow into place (a bar, a width that follows new content). */
+const MORPH = {
+	curve: [
+		0,
+		.0178,
+		.0636,
+		.1279,
+		.2033,
+		.2841,
+		.366,
+		.4459,
+		.5218,
+		.5921,
+		.6562,
+		.7136,
+		.7643,
+		.8086,
+		.8466,
+		.879,
+		.9063,
+		.9289,
+		.9475,
+		.9626,
+		.9746,
+		.9841,
+		.9914,
+		.9969,
+		1.001,
+		1.0038,
+		1.0058,
+		1.0069,
+		1.0075,
+		1.0077,
+		1.0076,
+		1.0072,
+		1.0067,
+		1.0062,
+		1.0055,
+		1.0049,
+		1.0043,
+		1.0037,
+		1.0032,
+		1.0027,
+		1.0022,
+		1.0018,
+		1.0015,
+		1.0012,
+		1.0009,
+		1.0007,
+		1
+	],
+	ms: 736
+};
+/** visualDuration .9s, no bounce: the stream swells out of its centre the first time it is seen. */
+const SWELL = {
+	curve: [
+		0,
+		.0041,
+		.0153,
+		.0324,
+		.0543,
+		.0799,
+		.1084,
+		.1392,
+		.1715,
+		.2048,
+		.2388,
+		.273,
+		.3072,
+		.341,
+		.3743,
+		.4069,
+		.4386,
+		.4694,
+		.4991,
+		.5278,
+		.5553,
+		.5816,
+		.6068,
+		.6308,
+		.6536,
+		.6753,
+		.6959,
+		.7154,
+		.7338,
+		.7512,
+		.7676,
+		.7831,
+		.7976,
+		.8113,
+		.8242,
+		.8362,
+		.8475,
+		.8581,
+		.868,
+		.8773,
+		.8859,
+		.894,
+		.9016,
+		.9086,
+		.9152,
+		.9213,
+		.927,
+		.9323,
+		.9373,
+		.9419,
+		.9462,
+		.9501,
+		.9538,
+		.9573,
+		.9605,
+		.9634,
+		.9662,
+		.9687,
+		.9711,
+		.9733,
+		.9753,
+		.9772,
+		.9789,
+		.9805,
+		.982,
+		.9834,
+		.9847,
+		.9858,
+		.9869,
+		.9879,
+		.9889,
+		.9897,
+		.9905,
+		.9913,
+		.992,
+		.9926,
+		.9932,
+		.9937,
+		.9942,
+		.9947,
+		.9951,
+		.9955,
+		.9958,
+		.9962,
+		.9965,
+		.9967,
+		.997,
+		.9972,
+		.9975,
+		.9977,
+		.9978,
+		.998,
+		1
+	],
+	ms: 1472
+};
+/** visualDuration .58s, no bounce: segments of a meter growing into place once seen. */
+const FILL = {
+	curve: [
+		0,
+		.0095,
+		.0345,
+		.0707,
+		.1146,
+		.1636,
+		.2153,
+		.2683,
+		.3212,
+		.3732,
+		.4234,
+		.4715,
+		.517,
+		.5599,
+		.6,
+		.6372,
+		.6717,
+		.7034,
+		.7326,
+		.7593,
+		.7836,
+		.8058,
+		.8259,
+		.8441,
+		.8605,
+		.8754,
+		.8888,
+		.9008,
+		.9116,
+		.9213,
+		.93,
+		.9378,
+		.9447,
+		.9509,
+		.9565,
+		.9614,
+		.9658,
+		.9697,
+		.9732,
+		.9763,
+		.979,
+		.9815,
+		.9836,
+		.9855,
+		.9872,
+		.9887,
+		.9901,
+		.9912,
+		.9923,
+		.9932,
+		.994,
+		.9947,
+		.9953,
+		.9959,
+		.9964,
+		.9968,
+		.9972,
+		.9975,
+		.9978,
+		.9981,
+		.9983,
+		.9985,
+		.9987,
+		1
+	],
+	ms: 1008
+};
+const sample = ({ curve, ms }, t) => {
+	const at = t * ms / 16;
+	const i = Math.min(Math.floor(at), curve.length - 2);
+	return curve[i] + (curve[i + 1] - curve[i]) * (at - i);
+};
+/**
+* Runs `onFrame` with spring progress (0 to 1, may overshoot a little) every
+* frame until it settles (after `delay` ms), then `onDone`. Returns a cancel function. Under
+* reduced motion it jumps: one frame at 1, then done.
+*/
+function tween(spring, onFrame, onDone, delay = 0) {
+	if (prefersReducedMotion()) {
+		onFrame(1);
+		onDone?.();
+		return () => {};
+	}
+	const start = performance.now() + delay;
+	let frame = 0;
+	const tick = (now) => {
+		const t = Math.min(Math.max((now - start) / spring.ms, 0), 1);
+		onFrame(t < 1 ? sample(spring, t) : 1);
+		if (t < 1) frame = requestAnimationFrame(tick);
+		else onDone?.();
+	};
+	frame = requestAnimationFrame(tick);
+	return () => cancelAnimationFrame(frame);
+}
+const live = (value) => ({
+	value,
+	stop: () => {}
+});
+/**
+* Moves `target` to `to` on `spring`, starting from wherever it is now, so a
+* change mid-flight never jumps. `onFrame` repaints; `done` runs when it settles.
+*/
+function retarget(target, to, spring, onFrame, delay = 0, done) {
+	target.stop();
+	const from = target.value;
+	if (from === to) {
+		done?.();
+		return;
+	}
+	target.stop = tween(spring, (p) => {
+		target.value = from + (to - from) * p;
+		onFrame();
+	}, done, delay);
+}
+//#endregion
+export { FILL, MORPH, REVEAL, SETTLE, SMOOTH, SNAPPY, SWELL, live, retarget, tween };
+
+//# sourceMappingURL=spring-tween.js.map

package/dist/lib/spring-tween.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring-tween.js","names":[],"sources":["../../src/lib/spring-tween.ts"],"sourcesContent":["import { prefersReducedMotion } from \"./motion.js\";\n\n/**\n * A spring sampled every 16ms from Motion's solver, for values a script has to\n * drive frame by frame (an SVG shape, a cursor riding a line) where a CSS\n * transition cannot reach. The same curves back the --ease-snappy and\n * --ease-smooth tokens, so scripted and CSS motion agree.\n */\nexport interface Spring {\n  readonly curve: readonly number[];\n  readonly ms: number;\n}\n\n/** visualDuration .26s, bounce .12: presses, toggles, cursors and small indicators. */\nexport const SNAPPY: Spring = {\n  curve: [\n    0, 0.043, 0.1426, 0.2664, 0.3943, 0.5144, 0.6206, 0.7107, 0.7845, 0.8433, 0.889, 0.9236, 0.9492,\n    0.9678, 0.9808, 0.9897, 0.9956, 0.9992, 1.0014, 1.0025, 1.0029, 1,\n  ],\n  ms: 336,\n};\n\n/** visualDuration .4s, no bounce: shapes and layout that move while on screen. */\nexport const SMOOTH: Spring = {\n  curve: [\n    0, 0.0191, 0.0667, 0.1313, 0.2048, 0.2816, 0.3577, 0.4308, 0.4991, 0.562, 0.6189, 0.67, 0.7154,\n    0.7554, 0.7905, 0.821, 0.8475, 0.8704, 0.89, 0.9069, 0.9213, 0.9336, 0.9441, 0.9529, 0.9605,\n    0.9668, 0.9722, 0.9767, 0.9805, 0.9837, 0.9864, 0.9887, 0.9905, 0.9921, 0.9934, 0.9945, 0.9955,\n    0.9962, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9988, 0.999, 1,\n  ],\n  ms: 720,\n};\n\n/** visualDuration .72s, no bounce: a first sweep that opens slowly and settles long. */\nexport const REVEAL: Spring = {\n  curve: [\n    0, 0.0063, 0.0232, 0.0484, 0.0799, 0.1159, 0.1552, 0.1964, 0.2388, 0.2816, 0.3242, 0.366, 0.4069,\n    0.4464, 0.4844, 0.5207, 0.5553, 0.588, 0.6189, 0.648, 0.6753, 0.7009, 0.7248, 0.747, 0.7676,\n    0.7868, 0.8046, 0.821, 0.8362, 0.8502, 0.8631, 0.875, 0.8859, 0.8959, 0.9052, 0.9136, 0.9213,\n    0.9284, 0.9349, 0.9408, 0.9462, 0.9511, 0.9556, 0.9597, 0.9634, 0.9668, 0.9699, 0.9727, 0.9753,\n    0.9776, 0.9797, 0.9816, 0.9834, 0.985, 0.9864, 0.9877, 0.9889, 0.9899, 0.9909, 0.9918, 0.9926,\n    0.9933, 0.994, 0.9945, 0.9951, 0.9956, 0.996, 0.9964, 0.9967, 0.9971, 0.9973, 0.9976, 0.9978,\n    0.9981, 0.9982, 0.9984, 1,\n  ],\n  ms: 1232,\n};\n\n/** visualDuration .5s, no bounce: parts of a whole moving to a new share. */\nexport const SETTLE: Spring = {\n  curve: [\n    0, 0.0126, 0.045, 0.091, 0.1455, 0.2048, 0.2662, 0.3275, 0.3874, 0.4448, 0.4991, 0.5499, 0.5969,\n    0.6401, 0.6796, 0.7154, 0.7478, 0.777, 0.8032, 0.8266, 0.8475, 0.8661, 0.8825, 0.8971, 0.91,\n    0.9213, 0.9313, 0.9401, 0.9478, 0.9545, 0.9605, 0.9656, 0.9701, 0.9741, 0.9775, 0.9805, 0.9831,\n    0.9854, 0.9873, 0.9891, 0.9905, 0.9918, 0.9929, 0.9939, 0.9947, 0.9955, 0.9961, 0.9966, 0.9971,\n    0.9975, 0.9978, 0.9981, 0.9984, 0.9986, 0.9988, 1,\n  ],\n  ms: 880,\n};\n\n/** visualDuration .42s, bounce .16: things that grow into place (a bar, a width that follows new content). */\nexport const MORPH: Spring = {\n  curve: [\n    0, 0.0178, 0.0636, 0.1279, 0.2033, 0.2841, 0.366, 0.4459, 0.5218, 0.5921, 0.6562, 0.7136, 0.7643,\n    0.8086, 0.8466, 0.879, 0.9063, 0.9289, 0.9475, 0.9626, 0.9746, 0.9841, 0.9914, 0.9969, 1.001,\n    1.0038, 1.0058, 1.0069, 1.0075, 1.0077, 1.0076, 1.0072, 1.0067, 1.0062, 1.0055, 1.0049, 1.0043,\n    1.0037, 1.0032, 1.0027, 1.0022, 1.0018, 1.0015, 1.0012, 1.0009, 1.0007, 1,\n  ],\n  ms: 736,\n};\n\n/** visualDuration .9s, no bounce: the stream swells out of its centre the first time it is seen. */\nexport const SWELL: Spring = {\n  curve: [\n    0, 0.0041, 0.0153, 0.0324, 0.0543, 0.0799, 0.1084, 0.1392, 0.1715, 0.2048, 0.2388, 0.273,\n    0.3072, 0.341, 0.3743, 0.4069, 0.4386, 0.4694, 0.4991, 0.5278, 0.5553, 0.5816, 0.6068, 0.6308,\n    0.6536, 0.6753, 0.6959, 0.7154, 0.7338, 0.7512, 0.7676, 0.7831, 0.7976, 0.8113, 0.8242, 0.8362,\n    0.8475, 0.8581, 0.868, 0.8773, 0.8859, 0.894, 0.9016, 0.9086, 0.9152, 0.9213, 0.927, 0.9323,\n    0.9373, 0.9419, 0.9462, 0.9501, 0.9538, 0.9573, 0.9605, 0.9634, 0.9662, 0.9687, 0.9711, 0.9733,\n    0.9753, 0.9772, 0.9789, 0.9805, 0.982, 0.9834, 0.9847, 0.9858, 0.9869, 0.9879, 0.9889, 0.9897,\n    0.9905, 0.9913, 0.992, 0.9926, 0.9932, 0.9937, 0.9942, 0.9947, 0.9951, 0.9955, 0.9958, 0.9962,\n    0.9965, 0.9967, 0.997, 0.9972, 0.9975, 0.9977, 0.9978, 0.998, 1,\n  ],\n  ms: 1472,\n};\n\n/** visualDuration .58s, no bounce: segments of a meter growing into place once seen. */\nexport const FILL: Spring = {\n  curve: [\n    0, 0.0095, 0.0345, 0.0707, 0.1146, 0.1636, 0.2153, 0.2683, 0.3212, 0.3732, 0.4234, 0.4715, 0.517,\n    0.5599, 0.6, 0.6372, 0.6717, 0.7034, 0.7326, 0.7593, 0.7836, 0.8058, 0.8259, 0.8441, 0.8605,\n    0.8754, 0.8888, 0.9008, 0.9116, 0.9213, 0.93, 0.9378, 0.9447, 0.9509, 0.9565, 0.9614, 0.9658,\n    0.9697, 0.9732, 0.9763, 0.979, 0.9815, 0.9836, 0.9855, 0.9872, 0.9887, 0.9901, 0.9912, 0.9923,\n    0.9932, 0.994, 0.9947, 0.9953, 0.9959, 0.9964, 0.9968, 0.9972, 0.9975, 0.9978, 0.9981, 0.9983,\n    0.9985, 0.9987, 1,\n  ],\n  ms: 1008,\n};\n\nconst sample = ({ curve, ms }: Spring, t: number) => {\n  const at = (t * ms) / 16;\n  const i = Math.min(Math.floor(at), curve.length - 2);\n  return curve[i]! + (curve[i + 1]! - curve[i]!) * (at - i);\n};\n\n/**\n * Runs `onFrame` with spring progress (0 to 1, may overshoot a little) every\n * frame until it settles (after `delay` ms), then `onDone`. Returns a cancel function. Under\n * reduced motion it jumps: one frame at 1, then done.\n */\nexport function tween(\n  spring: Spring,\n  onFrame: (progress: number) => void,\n  onDone?: () => void,\n  delay = 0,\n) {\n  if (prefersReducedMotion()) {\n    onFrame(1);\n    onDone?.();\n    return () => {};\n  }\n  const start = performance.now() + delay;\n  let frame = 0;\n  const tick = (now: number) => {\n    // A frame's timestamp can precede `start`; clamp so the curve is never indexed below 0.\n    const t = Math.min(Math.max((now - start) / spring.ms, 0), 1);\n    onFrame(t < 1 ? sample(spring, t) : 1);\n    if (t < 1) frame = requestAnimationFrame(tick);\n    else onDone?.();\n  };\n  frame = requestAnimationFrame(tick);\n  return () => cancelAnimationFrame(frame);\n}\n\n/** A value driven by `retarget`. Read `.value` when painting; it is never React state. */\nexport interface Live {\n  value: number;\n  stop: () => void;\n}\n\nexport const live = (value: number): Live => ({ value, stop: () => {} });\n\n/**\n * Moves `target` to `to` on `spring`, starting from wherever it is now, so a\n * change mid-flight never jumps. `onFrame` repaints; `done` runs when it settles.\n */\nexport function retarget(\n  target: Live,\n  to: number,\n  spring: Spring,\n  onFrame: () => void,\n  delay = 0,\n  done?: () => void,\n) {\n  target.stop();\n  const from = target.value;\n  if (from === to) {\n    done?.();\n    return;\n  }\n  target.stop = tween(\n    spring,\n    (p) => {\n      target.value = from + (to - from) * p;\n      onFrame();\n    },\n    done,\n    delay,\n  );\n}\n"],"mappings":";;;AAcA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EACzF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;CAClE;CACA,IAAI;AACN;;AAGA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAM;EACxF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAM;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACrF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;CACjE;CACA,IAAI;AACN;;AAGA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAC1F;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAO;EACrF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EACtF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACtF;EAAQ;EAAQ;EAAQ;CAC1B;CACA,IAAI;AACN;;AAGA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAQ;EAAO;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACzF;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;CAClD;CACA,IAAI;AACN;;AAGA,MAAa,QAAgB;CAC3B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAC1F;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;CAC1E;CACA,IAAI;AACN;;AAGA,MAAa,QAAgB;CAC3B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACnF;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EACrF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;CAChE;CACA,IAAI;AACN;;AAGA,MAAa,OAAe;CAC1B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAC3F;EAAQ;EAAK;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACrF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAM;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACtF;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;CAClB;CACA,IAAI;AACN;AAEA,MAAM,UAAU,EAAE,OAAO,MAAc,MAAc;CACnD,MAAM,KAAM,IAAI,KAAM;CACtB,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC;CACnD,OAAO,MAAM,MAAO,MAAM,IAAI,KAAM,MAAM,OAAQ,KAAK;AACzD;;;;;;AAOA,SAAgB,MACd,QACA,SACA,QACA,QAAQ,GACR;CACA,IAAI,qBAAqB,GAAG;EAC1B,QAAQ,CAAC;EACT,SAAS;EACT,aAAa,CAAC;CAChB;CACA,MAAM,QAAQ,YAAY,IAAI,IAAI;CAClC,IAAI,QAAQ;CACZ,MAAM,QAAQ,QAAgB;EAE5B,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC;EAC5D,QAAQ,IAAI,IAAI,OAAO,QAAQ,CAAC,IAAI,CAAC;EACrC,IAAI,IAAI,GAAG,QAAQ,sBAAsB,IAAI;OACxC,SAAS;CAChB;CACA,QAAQ,sBAAsB,IAAI;CAClC,aAAa,qBAAqB,KAAK;AACzC;AAQA,MAAa,QAAQ,WAAyB;CAAE;CAAO,YAAY,CAAC;AAAE;;;;;AAMtE,SAAgB,SACd,QACA,IACA,QACA,SACA,QAAQ,GACR,MACA;CACA,OAAO,KAAK;CACZ,MAAM,OAAO,OAAO;CACpB,IAAI,SAAS,IAAI;EACf,OAAO;EACP;CACF;CACA,OAAO,OAAO,MACZ,SACC,MAAM;EACL,OAAO,QAAQ,QAAQ,KAAK,QAAQ;EACpC,QAAQ;CACV,GACA,MACA,KACF;AACF"}