@studiometa/js-toolkit 3.9.0-beta.2 → 4.0.0-alpha.0

package/dist/utils/random.d.ts

@@ -1,26 +1,24 @@
+//#region src/utils/random.d.ts
+/** Random values, in the ranges a component describes. */
 /**
- * Get a random number between given bounds.
- * @param  {number} a   First bound.
- * @param  {number} [b] Second bound, defaults to 0.
- * @return {number} A number between `a` and `b`.
- * @link https://js-toolkit.studiometa.dev/utils/random.html
+ * A random number between the two bounds, the second defaulting to `0`.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#random
  */
-export declare function random(a: number, b?: number): number;
+declare function random(a: number, b?: number): number;
 /**
- * Get a random integer between bounds
+ * A random integer between the two bounds, both included and the second
+ * defaulting to `0`.
  *
- * @param {number} a First bound.
- * @param {number} b Second bound.
- * @return {number} An integer between `a` and `b`;
- * @link https://js-toolkit.studiometa.dev/utils/randomInt.html
+ * Every integer in the range is equally likely. Rounding a random float
+ * instead — which is what v3 did — gives the two bounds half a chance each.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#randomint
  */
-export declare function randomInt(a: number, b?: number): number;
+declare function randomInt(a: number, b?: number): number;
 /**
- * Get a random item of an array or a random character of a string
- *
- * @param {T[] | string} items Array or string
- * @return {T | undefined}
- * @throws {Error} Throws an error if `items` is not an array or a string.
- * @link https://js-toolkit.studiometa.dev/utils/randomItem.html
+ * A random item of an array, or a random character of a string.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#randomitem
  */
-export declare function randomItem<T>(items: T[] | string): T | string | undefined;
+declare function randomItem<T>(items: readonly T[]): T | undefined;
+declare function randomItem(items: string): string | undefined;
+//#endregion
+export { random, randomInt, randomItem };

package/dist/utils/random.js

@@ -1,19 +1,28 @@
-import { isArray, isString } from "./is.js";
+//#region src/utils/random.ts
+/** Random values, in the ranges a component describes. */
+/**
+* A random number between the two bounds, the second defaulting to `0`.
+* @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#random
+*/
 function random(a, b = 0) {
-  return Math.random() * (b - a) + a;
+	return Math.random() * (b - a) + a;
 }
+/**
+* A random integer between the two bounds, both included and the second
+* defaulting to `0`.
+*
+* Every integer in the range is equally likely. Rounding a random float
+* instead — which is what v3 did — gives the two bounds half a chance each.
+* @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#randomint
+*/
 function randomInt(a, b = 0) {
-  return Math.round(random(a, b));
+	const min = Math.ceil(Math.min(a, b));
+	return min + Math.floor(Math.random() * (Math.floor(Math.max(a, b)) - min + 1));
 }
 function randomItem(items) {
-  if (!isArray(items) && !isString(items)) {
-    throw new Error("randomItem() expects an array or a string as argument.");
-  }
-  return items.length > 0 ? items[randomInt(items.length - 1)] : void 0;
+	return items.length > 0 ? items[randomInt(0, items.length - 1)] : void 0;
 }
-export {
-  random,
-  randomInt,
-  randomItem
-};
-//# sourceMappingURL=random.js.map
+//#endregion
+export { random, randomInt, randomItem };
+
+//# sourceMappingURL=random.js.map

package/dist/utils/random.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/random.ts"],
-  "sourcesContent": ["import { isArray, isString } from './is.js';\n\n/**\n * Get a random number between given bounds.\n * @param  {number} a   First bound.\n * @param  {number} [b] Second bound, defaults to 0.\n * @return {number} A number between `a` and `b`.\n * @link https://js-toolkit.studiometa.dev/utils/random.html\n */\nexport function random(a: number, b = 0): number {\n  return Math.random() * (b - a) + a;\n}\n\n/**\n * Get a random integer between bounds\n *\n * @param {number} a First bound.\n * @param {number} b Second bound.\n * @return {number} An integer between `a` and `b`;\n * @link https://js-toolkit.studiometa.dev/utils/randomInt.html\n */\nexport function randomInt(a: number, b = 0): number {\n  return Math.round(random(a, b));\n}\n\n/**\n * Get a random item of an array or a random character of a string\n *\n * @param {T[] | string} items Array or string\n * @return {T | undefined}\n * @throws {Error} Throws an error if `items` is not an array or a string.\n * @link https://js-toolkit.studiometa.dev/utils/randomItem.html\n */\nexport function randomItem<T>(items: T[] | string): T | string | undefined {\n  if (!isArray(items) && !isString(items)) {\n    throw new Error('randomItem() expects an array or a string as argument.');\n  }\n  return items.length > 0 ? items[randomInt(items.length - 1)] : undefined;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,gBAAgB;AAS3B,SAAS,OAAO,GAAW,IAAI,GAAW;AAC/C,SAAO,KAAK,OAAO,KAAK,IAAI,KAAK;AACnC;AAUO,SAAS,UAAU,GAAW,IAAI,GAAW;AAClD,SAAO,KAAK,MAAM,OAAO,GAAG,CAAC,CAAC;AAChC;AAUO,SAAS,WAAc,OAA6C;AACzE,MAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,SAAS,KAAK,GAAG;AACvC,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACA,SAAO,MAAM,SAAS,IAAI,MAAM,UAAU,MAAM,SAAS,CAAC,CAAC,IAAI;AACjE;",
-  "names": []
-}
+{"version":3,"file":"random.js","names":[],"sources":["../../src/utils/random.ts"],"sourcesContent":["/** Random values, in the ranges a component describes. */\n\n/**\n * A random number between the two bounds, the second defaulting to `0`.\n * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#random\n */\nexport function random(a: number, b = 0): number {\n  return Math.random() * (b - a) + a;\n}\n\n/**\n * A random integer between the two bounds, both included and the second\n * defaulting to `0`.\n *\n * Every integer in the range is equally likely. Rounding a random float\n * instead — which is what v3 did — gives the two bounds half a chance each.\n * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#randomint\n */\nexport function randomInt(a: number, b = 0): number {\n  const min = Math.ceil(Math.min(a, b));\n  const max = Math.floor(Math.max(a, b));\n  return min + Math.floor(Math.random() * (max - min + 1));\n}\n\n/**\n * A random item of an array, or a random character of a string.\n * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#randomitem\n */\nexport function randomItem<T>(items: readonly T[]): T | undefined;\nexport function randomItem(items: string): string | undefined;\nexport function randomItem<T>(items: readonly T[] | string): T | string | undefined {\n  return items.length > 0 ? items[randomInt(0, items.length - 1)] : undefined;\n}\n"],"mappings":";;;;;;AAMA,SAAgB,OAAO,GAAW,IAAI,GAAW;CAC/C,OAAO,KAAK,OAAO,KAAK,IAAI,KAAK;AACnC;;;;;;;;;AAUA,SAAgB,UAAU,GAAW,IAAI,GAAW;CAClD,MAAM,MAAM,KAAK,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC;CAEpC,OAAO,MAAM,KAAK,MAAM,KAAK,OAAO,KADxB,KAAK,MAAM,KAAK,IAAI,GAAG,CAAC,CACO,IAAI,MAAM,EAAE;AACzD;AAQA,SAAgB,WAAc,OAAsD;CAClF,OAAO,MAAM,SAAS,IAAI,MAAM,UAAU,GAAG,MAAM,SAAS,CAAC,KAAK,KAAA;AACpE"}

package/dist/utils/scroll-lock.d.ts

@@ -0,0 +1,27 @@
+//#region src/utils/scroll-lock.d.ts
+/**
+ * Stop an element scrolling until every holder releases it.
+ *
+ * A modal surface is not alone on the page: a dialog opened from inside a
+ * drawer means two holders, and the one that closes first must not put the
+ * scroll back under the one still open. Counting is the whole point — the
+ * first lock saves the inline value it found, the last release puts exactly
+ * that value back, and the ones in between only move the count.
+ *
+ * The release is idempotent, so a surface may call it on close and again on
+ * unmount without counting twice.
+ *
+ * @param target What stops scrolling. Defaults to the document element.
+ * @returns Release this holder's lock.
+ *
+ * @example
+ * ```js
+ * const release = lockScroll();
+ * // …later, whichever comes first
+ * release();
+ * ```
+ * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#lockscroll
+ */
+declare function lockScroll(target?: HTMLElement): () => void;
+//#endregion
+export { lockScroll };

package/dist/utils/scroll-lock.js

@@ -0,0 +1,58 @@
+import { getSharedRuntimeSlot } from "../shared-runtime.js";
+//#region src/utils/scroll-lock.ts
+/**
+* One counter per locked element, shared across evaluated copies of the
+* package: there is one scroll per document, so two copies must count the same
+* holders or the second release puts the page back while a surface is still
+* open.
+*/
+const state = /* @__PURE__ */ getSharedRuntimeSlot("scroll-lock", 1, () => ({ locks: /* @__PURE__ */ new WeakMap() }));
+/**
+* Stop an element scrolling until every holder releases it.
+*
+* A modal surface is not alone on the page: a dialog opened from inside a
+* drawer means two holders, and the one that closes first must not put the
+* scroll back under the one still open. Counting is the whole point — the
+* first lock saves the inline value it found, the last release puts exactly
+* that value back, and the ones in between only move the count.
+*
+* The release is idempotent, so a surface may call it on close and again on
+* unmount without counting twice.
+*
+* @param target What stops scrolling. Defaults to the document element.
+* @returns Release this holder's lock.
+*
+* @example
+* ```js
+* const release = lockScroll();
+* // …later, whichever comes first
+* release();
+* ```
+* @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#lockscroll
+*/
+function lockScroll(target = document.documentElement) {
+	const lock = state.locks.get(target);
+	if (lock) lock.holders += 1;
+	else {
+		state.locks.set(target, {
+			holders: 1,
+			restore: target.style.overflow
+		});
+		target.style.overflow = "hidden";
+	}
+	let isReleased = false;
+	return () => {
+		if (isReleased) return;
+		isReleased = true;
+		const current = state.locks.get(target);
+		if (!current) return;
+		current.holders -= 1;
+		if (current.holders > 0) return;
+		state.locks.delete(target);
+		target.style.overflow = current.restore;
+	};
+}
+//#endregion
+export { lockScroll };
+
+//# sourceMappingURL=scroll-lock.js.map

package/dist/utils/scroll-lock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-lock.js","names":[],"sources":["../../src/utils/scroll-lock.ts"],"sourcesContent":["import { getSharedRuntimeSlot } from '../shared-runtime.js';\n\n/** What one target's lock knows: how many holders it has, and what to put back. */\ninterface Lock {\n  holders: number;\n  restore: string;\n}\n\n/**\n * One counter per locked element, shared across evaluated copies of the\n * package: there is one scroll per document, so two copies must count the same\n * holders or the second release puts the page back while a surface is still\n * open.\n */\nconst state = /* @__PURE__ */ getSharedRuntimeSlot('scroll-lock', 1, () => ({\n  locks: new WeakMap<HTMLElement, Lock>(),\n}));\n\n/**\n * Stop an element scrolling until every holder releases it.\n *\n * A modal surface is not alone on the page: a dialog opened from inside a\n * drawer means two holders, and the one that closes first must not put the\n * scroll back under the one still open. Counting is the whole point — the\n * first lock saves the inline value it found, the last release puts exactly\n * that value back, and the ones in between only move the count.\n *\n * The release is idempotent, so a surface may call it on close and again on\n * unmount without counting twice.\n *\n * @param target What stops scrolling. Defaults to the document element.\n * @returns Release this holder's lock.\n *\n * @example\n * ```js\n * const release = lockScroll();\n * // …later, whichever comes first\n * release();\n * ```\n * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#lockscroll\n */\nexport function lockScroll(target: HTMLElement = document.documentElement): () => void {\n  const lock = state.locks.get(target);\n\n  if (lock) {\n    lock.holders += 1;\n  } else {\n    // Save the inline value rather than assuming it was empty: a page may set\n    // `overflow` for its own reasons, and it owns it again on the last release.\n    state.locks.set(target, { holders: 1, restore: target.style.overflow });\n    target.style.overflow = 'hidden';\n  }\n\n  let isReleased = false;\n\n  return () => {\n    if (isReleased) {\n      return;\n    }\n    isReleased = true;\n\n    const current = state.locks.get(target);\n    if (!current) {\n      return;\n    }\n\n    current.holders -= 1;\n    if (current.holders > 0) {\n      return;\n    }\n\n    state.locks.delete(target);\n    target.style.overflow = current.restore;\n  };\n}\n"],"mappings":";;;;;;;;AAcA,MAAM,QAAwB,qCAAqB,eAAe,UAAU,EAC1E,uBAAO,IAAI,QAA2B,EACxC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;AAyBF,SAAgB,WAAW,SAAsB,SAAS,iBAA6B;CACrF,MAAM,OAAO,MAAM,MAAM,IAAI,MAAM;CAEnC,IAAI,MACF,KAAK,WAAW;MACX;EAGL,MAAM,MAAM,IAAI,QAAQ;GAAE,SAAS;GAAG,SAAS,OAAO,MAAM;EAAS,CAAC;EACtE,OAAO,MAAM,WAAW;CAC1B;CAEA,IAAI,aAAa;CAEjB,aAAa;EACX,IAAI,YACF;EAEF,aAAa;EAEb,MAAM,UAAU,MAAM,MAAM,IAAI,MAAM;EACtC,IAAI,CAAC,SACH;EAGF,QAAQ,WAAW;EACnB,IAAI,QAAQ,UAAU,GACpB;EAGF,MAAM,MAAM,OAAO,MAAM;EACzB,OAAO,MAAM,WAAW,QAAQ;CAClC;AACF"}

package/dist/utils/scrollTo.d.ts

@@ -1,34 +1,87 @@
-import { type TweenOptions } from './tween.js';
-export interface ScrollPosition {
-    left: number;
-    top: number;
+//#region src/utils/scrollTo.d.ts
+/** Where a scroller stands on both axes, in pixels from the start. */
+interface ScrollPosition {
+  left: number;
+  top: number;
 }
-export type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;
-export interface ScrollToOptions extends TweenOptions {
-    /**
-     * Root element that will be scrolled.
-     */
-    rootElement?: HTMLElement | typeof window;
-    /**
-     * Scroll direction.
-     */
-    axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];
-    /**
-     * Distance from the target.
-     */
-    offset?: number;
+/** What a scroll can be aimed at. */
+type ScrollToTarget = string | Element | number | Partial<ScrollPosition>;
+/**
+ * The axes a scroll is allowed to move.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scroll-axes
+ */
+declare const SCROLL_AXES: Readonly<{
+  readonly x: 'x';
+  readonly y: 'y';
+  readonly both: 'both';
+}>;
+type ScrollAxis = (typeof SCROLL_AXES)[keyof typeof SCROLL_AXES];
+/**
+ * Where an element comes to rest inside the scroller.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scroll-alignments
+ */
+declare const SCROLL_ALIGNMENTS: Readonly<{
+  readonly start: 'start';
+  readonly center: 'center';
+  readonly end: 'end';
+}>;
+type ScrollAlign = (typeof SCROLL_ALIGNMENTS)[keyof typeof SCROLL_ALIGNMENTS];
+interface ScrollPositionOptions {
+  /** What scrolls. Defaults to the window. */
+  rootElement?: Element | Window;
+  /** Which axes a target that names none may move. Defaults to `'y'`. */
+  axis?: ScrollAxis;
+  /** Pixels to stop short of the target. Defaults to `0`. */
+  offset?: number;
+  /**
+   * Where an **element** target comes to rest, per axis. Defaults to `'start'`.
+   *
+   * The names are physical, like `axis`: this is `x` and `y`, not the
+   * platform's `inline` and `block`, because nothing here maps a writing mode.
+   * A number or a position target names its own destination, so it has nothing
+   * to align.
+   */
+  align?: ScrollAlign | {
+    x?: ScrollAlign;
+    y?: ScrollAlign;
+  };
+}
+interface ScrollToOptions extends ScrollPositionOptions {
+  /** Defaults to `'smooth'`, or to `'instant'` when the reader asked for less motion. */
+  behavior?: ScrollBehavior;
 }
 /**
- * Scroll to an element.
+ * Where a scroll would land, without scrolling.
+ *
+ * The measurement half of {@link scrollTo}, split out because a caller often
+ * needs the number rather than the move: which slide is nearest, how far a
+ * control has to travel, whether the destination is where the scroller
+ * already stands. A target the document does not contain gives the current
+ * position back, so the answer is always a position.
  *
- * @return {Promise<ScrollPosition>} A promising resolving with the scroll position.
- * @link https://js-toolkit.studiometa.dev/utils/scrollTo.html
+ * @example
+ * ```js
+ * const { left } = scrollPosition(slide, { rootElement: track, axis: 'x', align: 'center' });
+ * ```
+ * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scrollposition
  */
-export declare function scrollTo(target: string | HTMLElement | number | Partial<ScrollPosition>, { rootElement, axis, offset, ...tweenOptions }?: ScrollToOptions): Promise<ScrollPosition>;
-export declare namespace scrollTo {
-    var axis: {
-        x: symbol;
-        y: symbol;
-        both: symbol;
-    };
-}
+declare function scrollPosition(target: ScrollToTarget, options?: ScrollPositionOptions): ScrollPosition;
+/**
+ * Scroll to an element, a selector, a distance or a position, and get the
+ * destination back. A target the document does not contain is a no-op.
+ *
+ * The browser owns the animation — this asks for it and returns. Smooth
+ * scrolling is the default and becomes instant for a reader who asked for less
+ * motion, which is read live rather than captured at load.
+ *
+ * @example
+ * ```js
+ * scrollTo('#section', { offset: 80 });
+ * scrollTo({ left: 0 }, { rootElement: carousel });
+ * scrollTo(slide, { rootElement: track, axis: 'x', align: 'center' });
+ * ```
+ * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scrollto
+ */
+declare function scrollTo(target: ScrollToTarget, options?: ScrollToOptions): ScrollPosition;
+//#endregion
+export { SCROLL_ALIGNMENTS, SCROLL_AXES, ScrollAlign, ScrollAxis, ScrollPosition, ScrollPositionOptions, ScrollToOptions, ScrollToTarget, scrollPosition, scrollTo };

package/dist/utils/scrollTo.js

@@ -1,111 +1,163 @@
-import { isDefined, isFunction, isNumber, isString } from "./is.js";
-import { lerp } from "./math/lerp.js";
-import { tween } from "./tween.js";
-const xAxis = Symbol(0);
-const yAxis = Symbol(1);
-const bothAxis = Symbol(2);
-function isHtmlElement(rootElement) {
-  return rootElement instanceof HTMLElement;
+import { clamp } from "./maths.js";
+import { usePrefersReducedMotion } from "../services/media.js";
+import { isNumber, isString } from "./is.js";
+//#region src/utils/scrollTo.ts
+/**
+* The axes a scroll is allowed to move.
+* @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scroll-axes
+*/
+const SCROLL_AXES = /* @__PURE__ */ Object.freeze({
+	x: "x",
+	y: "y",
+	both: "both"
+});
+/**
+* Where an element comes to rest inside the scroller.
+* @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scroll-alignments
+*/
+const SCROLL_ALIGNMENTS = /* @__PURE__ */ Object.freeze({
+	start: "start",
+	center: "center",
+	end: "end"
+});
+function currentPositionOf(root) {
+	return root instanceof Window ? {
+		left: root.scrollX,
+		top: root.scrollY
+	} : {
+		left: root.scrollLeft,
+		top: root.scrollTop
+	};
 }
-function getCurrentScrollPosition(rootElement) {
-  return {
-    left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,
-    top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY
-  };
+function maxPositionOf(root) {
+	const scroller = root instanceof Window ? document.scrollingElement ?? document.body : root;
+	const [width, height] = root instanceof Window ? [root.innerWidth, root.innerHeight] : [root.clientWidth, root.clientHeight];
+	return {
+		left: Math.max(0, scroller.scrollWidth - width),
+		top: Math.max(0, scroller.scrollHeight - height)
+	};
 }
-function getMaxScrollPosition(rootElement) {
-  return {
-    left: isHtmlElement(rootElement) ? rootElement.scrollWidth - rootElement.offsetWidth : document.documentElement.scrollWidth - window.innerWidth,
-    top: isHtmlElement(rootElement) ? rootElement.scrollHeight - rootElement.offsetHeight : document.documentElement.scrollHeight - window.innerHeight
-  };
+function pixels(value) {
+	return Number.parseFloat(value) || 0;
 }
-function getTargetScrollPosition(initialScrollPosition, maxScrollPosition, target, axis, offset) {
-  let { top, left } = initialScrollPosition;
-  if (target instanceof HTMLElement || isString(target)) {
-    const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);
-    if (!targetElement) {
-      return { top, left };
-    }
-    const sizes = targetElement.getBoundingClientRect();
-    const styles = getComputedStyle(targetElement);
-    const scrollMargin = {
-      left: Number.parseInt(styles.scrollMarginLeft || "0", 10),
-      top: Number.parseInt(styles.scrollMarginTop || "0", 10)
-    };
-    left = sizes.left + initialScrollPosition.left - scrollMargin.left;
-    top = sizes.top + initialScrollPosition.top - scrollMargin.top;
-  } else if (isNumber(target)) {
-    left = target;
-    top = target;
-  } else {
-    left = target.left ?? left;
-    top = target.top ?? top;
-  }
-  left -= offset;
-  top -= offset;
-  if (axis !== bothAxis) {
-    if (axis !== xAxis && !isDefined(target.left)) {
-      left = initialScrollPosition.left;
-    }
-    if (axis !== yAxis) {
-      top = initialScrollPosition.top;
-    }
-  }
-  return {
-    left: Math.min(left, maxScrollPosition.left),
-    top: Math.min(top, maxScrollPosition.top)
-  };
+/** What the scroller shows at once, scrollbars excluded on both axes. */
+function viewportOf(root) {
+	return root instanceof Window ? {
+		width: root.innerWidth,
+		height: root.innerHeight
+	} : {
+		width: root.clientWidth,
+		height: root.clientHeight
+	};
 }
-function scrollTo(target, { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions } = {}) {
-  const initialScrollPosition = getCurrentScrollPosition(rootElement);
-  const maxScrollPosition = getMaxScrollPosition(rootElement);
-  const targetScrollPosition = getTargetScrollPosition(
-    initialScrollPosition,
-    maxScrollPosition,
-    target,
-    axis,
-    offset
-  );
-  return new Promise((resolve) => {
-    function eventHandler() {
-      tw.pause();
-      stop();
-    }
-    function stop() {
-      rootElement.removeEventListener("wheel", eventHandler);
-      rootElement.removeEventListener("touchmove", eventHandler);
-      resolve(getCurrentScrollPosition(rootElement));
-    }
-    const tw = tween(
-      (progress) => {
-        rootElement.scrollTo({
-          left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),
-          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),
-          behavior: "instant"
-        });
-      },
-      {
-        smooth: 0.2,
-        ...tweenOptions,
-        onFinish(progress) {
-          if (isFunction(tweenOptions.onFinish)) {
-            tweenOptions.onFinish(progress);
-          }
-          stop();
-        }
-      }
-    );
-    rootElement.addEventListener("wheel", eventHandler, { passive: true });
-    rootElement.addEventListener("touchmove", eventHandler, { passive: true });
-    tw.start();
-  });
+/**
+* How far past the start of the viewport the element rests.
+*
+* `start` is zero, which is why a caller that never asks for alignment pays
+* nothing and reads the same numbers it always did.
+*/
+function alignmentShift(align, viewport, size) {
+	if (align === SCROLL_ALIGNMENTS.center) return (viewport - size) / 2;
+	if (align === SCROLL_ALIGNMENTS.end) return viewport - size;
+	return 0;
 }
-scrollTo.axis = {
-  x: xAxis,
-  y: yAxis,
-  both: bothAxis
-};
-export {
-  scrollTo
-};
-//# sourceMappingURL=scrollTo.js.map
+/**
+* Where an element sits inside the root's scrolled content.
+*
+* `scroll-margin` is how a document asks to be stopped short of an element,
+* and it is honored here as `scrollIntoView()` honors it.
+*/
+function positionOfElement(element, root, current, align) {
+	const rect = element.getBoundingClientRect();
+	const styles = getComputedStyle(element);
+	const viewport = viewportOf(root);
+	const alignX = isString(align) ? align : align?.x;
+	const alignY = isString(align) ? align : align?.y;
+	let left = rect.left + current.left - pixels(styles.scrollMarginLeft) - alignmentShift(alignX, viewport.width, rect.width);
+	let top = rect.top + current.top - pixels(styles.scrollMarginTop) - alignmentShift(alignY, viewport.height, rect.height);
+	if (!(root instanceof Window)) {
+		const rootRect = root.getBoundingClientRect();
+		const rootStyles = getComputedStyle(root);
+		left -= rootRect.left + pixels(rootStyles.borderLeftWidth);
+		top -= rootRect.top + pixels(rootStyles.borderTopWidth);
+	}
+	return {
+		left,
+		top
+	};
+}
+/** The axes the target asks for, `undefined` on an axis it leaves alone. */
+function requestedPosition(target, root, current, axis, align) {
+	if (!isString(target) && !isNumber(target) && !(target instanceof Element)) return {
+		left: target.left,
+		top: target.top
+	};
+	let position;
+	if (isNumber(target)) position = {
+		left: target,
+		top: target
+	};
+	else {
+		const element = isString(target) ? document.querySelector(target) : target;
+		if (!element) return null;
+		position = positionOfElement(element, root, current, align);
+	}
+	if (axis === SCROLL_AXES.x) return { left: position.left };
+	if (axis === SCROLL_AXES.y) return { top: position.top };
+	return position;
+}
+/**
+* Where a scroll would land, without scrolling.
+*
+* The measurement half of {@link scrollTo}, split out because a caller often
+* needs the number rather than the move: which slide is nearest, how far a
+* control has to travel, whether the destination is where the scroller
+* already stands. A target the document does not contain gives the current
+* position back, so the answer is always a position.
+*
+* @example
+* ```js
+* const { left } = scrollPosition(slide, { rootElement: track, axis: 'x', align: 'center' });
+* ```
+* @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scrollposition
+*/
+function scrollPosition(target, options = {}) {
+	const { rootElement = window, axis = SCROLL_AXES.y, offset = 0, align } = options;
+	const current = currentPositionOf(rootElement);
+	const requested = requestedPosition(target, rootElement, current, axis, align);
+	if (!requested) return current;
+	const max = maxPositionOf(rootElement);
+	return {
+		left: requested.left === void 0 ? current.left : clamp(requested.left - offset, 0, max.left),
+		top: requested.top === void 0 ? current.top : clamp(requested.top - offset, 0, max.top)
+	};
+}
+/**
+* Scroll to an element, a selector, a distance or a position, and get the
+* destination back. A target the document does not contain is a no-op.
+*
+* The browser owns the animation — this asks for it and returns. Smooth
+* scrolling is the default and becomes instant for a reader who asked for less
+* motion, which is read live rather than captured at load.
+*
+* @example
+* ```js
+* scrollTo('#section', { offset: 80 });
+* scrollTo({ left: 0 }, { rootElement: carousel });
+* scrollTo(slide, { rootElement: track, axis: 'x', align: 'center' });
+* ```
+* @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scrollto
+*/
+function scrollTo(target, options = {}) {
+	const { rootElement = window, behavior } = options;
+	const destination = scrollPosition(target, options);
+	rootElement.scrollTo({
+		...destination,
+		behavior: behavior ?? (usePrefersReducedMotion().props().matches ? "instant" : "smooth")
+	});
+	return destination;
+}
+//#endregion
+export { SCROLL_ALIGNMENTS, SCROLL_AXES, scrollPosition, scrollTo };
+
+//# sourceMappingURL=scrollTo.js.map

package/dist/utils/scrollTo.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/scrollTo.ts"],
-  "sourcesContent": ["import { isDefined, isFunction, isNumber, isString } from './is.js';\nimport { lerp } from './math/lerp.js';\nimport { tween, type TweenOptions } from './tween.js';\n\nexport interface ScrollPosition {\n  left: number;\n  top: number;\n}\n\nexport type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;\n\nexport interface ScrollToOptions extends TweenOptions {\n  /**\n   * Root element that will be scrolled.\n   */\n  rootElement?: HTMLElement | typeof window;\n  /**\n   * Scroll direction.\n   */\n  axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];\n  /**\n   * Distance from the target.\n   */\n  offset?: number;\n}\n\nconst xAxis = Symbol(0);\nconst yAxis = Symbol(1);\nconst bothAxis = Symbol(2);\n\nfunction isHtmlElement(rootElement: ScrollToOptions['rootElement']): rootElement is HTMLElement {\n  return rootElement instanceof HTMLElement;\n}\n\n/**\n * Get the current root element or window scroll position.\n */\nfunction getCurrentScrollPosition(rootElement: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,\n    top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY,\n  };\n}\n\n/**\n * Get the maximum scroll position values.\n */\nfunction getMaxScrollPosition(rootElement?: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement)\n      ? rootElement.scrollWidth - rootElement.offsetWidth\n      : document.documentElement.scrollWidth - window.innerWidth,\n    top: isHtmlElement(rootElement)\n      ? rootElement.scrollHeight - rootElement.offsetHeight\n      : document.documentElement.scrollHeight - window.innerHeight,\n  };\n}\n\n/**\n * Get the target scroll position.\n */\nfunction getTargetScrollPosition(\n  initialScrollPosition: ScrollPosition,\n  maxScrollPosition: ScrollPosition,\n  target: ScrollTarget,\n  axis: ScrollToOptions['axis'],\n  offset: number,\n): ScrollPosition {\n  let { top, left } = initialScrollPosition;\n\n  if (target instanceof HTMLElement || isString(target)) {\n    const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);\n\n    if (!targetElement) {\n      return { top, left };\n    }\n\n    const sizes = targetElement.getBoundingClientRect();\n    const styles = getComputedStyle(targetElement);\n    const scrollMargin = {\n      left: Number.parseInt(styles.scrollMarginLeft || '0', 10),\n      top: Number.parseInt(styles.scrollMarginTop || '0', 10),\n    };\n\n    // Set the scroll position of the target element.\n    left = sizes.left + initialScrollPosition.left - scrollMargin.left;\n    top = sizes.top + initialScrollPosition.top - scrollMargin.top;\n  } else if (isNumber(target)) {\n    left = target;\n    top = target;\n  } else {\n    left = target.left ?? left;\n    top = target.top ?? top;\n  }\n\n  left -= offset;\n  top -= offset;\n\n  if (axis !== bothAxis) {\n    if (axis !== xAxis && !isDefined((target as Partial<ScrollPosition>).left)) {\n      left = initialScrollPosition.left;\n    }\n\n    if (axis !== yAxis) {\n      top = initialScrollPosition.top;\n    }\n  }\n\n  return {\n    left: Math.min(left, maxScrollPosition.left),\n    top: Math.min(top, maxScrollPosition.top),\n  };\n}\n\n/**\n * Scroll to an element.\n *\n * @return {Promise<ScrollPosition>} A promising resolving with the scroll position.\n * @link https://js-toolkit.studiometa.dev/utils/scrollTo.html\n */\nexport function scrollTo(\n  target: string | HTMLElement | number | Partial<ScrollPosition>,\n  { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions }: ScrollToOptions = {},\n): Promise<ScrollPosition> {\n  const initialScrollPosition = getCurrentScrollPosition(rootElement);\n  const maxScrollPosition = getMaxScrollPosition(rootElement);\n  const targetScrollPosition = getTargetScrollPosition(\n    initialScrollPosition,\n    maxScrollPosition,\n    target,\n    axis,\n    offset,\n  );\n\n  return new Promise((resolve) => {\n    function eventHandler() {\n      /* eslint-disable @typescript-eslint/no-use-before-define */\n      tw.pause();\n      stop();\n      /* eslint-enable @typescript-eslint/no-use-before-define */\n    }\n\n    function stop() {\n      rootElement.removeEventListener('wheel', eventHandler);\n      rootElement.removeEventListener('touchmove', eventHandler);\n\n      // Resolve the promise on animation finish.\n      resolve(getCurrentScrollPosition(rootElement));\n    }\n\n    // Setup tween.\n    const tw = tween(\n      (progress) => {\n        rootElement.scrollTo({\n          left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),\n          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),\n          behavior: 'instant',\n        });\n      },\n      {\n        smooth: 0.2,\n        ...tweenOptions,\n        onFinish(progress) {\n          if (isFunction(tweenOptions.onFinish)) {\n            tweenOptions.onFinish(progress);\n          }\n\n          stop();\n        },\n      },\n    );\n\n    rootElement.addEventListener('wheel', eventHandler, { passive: true });\n    rootElement.addEventListener('touchmove', eventHandler, { passive: true });\n    tw.start();\n  });\n}\n\nscrollTo.axis = {\n  x: xAxis,\n  y: yAxis,\n  both: bothAxis,\n};\n"],
-  "mappings": "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",
-  "names": []
-}
+{"version":3,"file":"scrollTo.js","names":[],"sources":["../../src/utils/scrollTo.ts"],"sourcesContent":["import { usePrefersReducedMotion } from '../services/media.js';\nimport { isNumber, isString } from './is.js';\nimport { clamp } from './maths.js';\n\n/** Where a scroller stands on both axes, in pixels from the start. */\nexport interface ScrollPosition {\n  left: number;\n  top: number;\n}\n\n/** What a scroll can be aimed at. */\nexport type ScrollToTarget = string | Element | number | Partial<ScrollPosition>;\n\n/**\n * The axes a scroll is allowed to move.\n * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scroll-axes\n */\nexport const SCROLL_AXES = /* @__PURE__ */ Object.freeze({\n  x: 'x',\n  y: 'y',\n  both: 'both',\n} as const);\n\nexport type ScrollAxis = (typeof SCROLL_AXES)[keyof typeof SCROLL_AXES];\n\n/**\n * Where an element comes to rest inside the scroller.\n * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scroll-alignments\n */\nexport const SCROLL_ALIGNMENTS = /* @__PURE__ */ Object.freeze({\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const);\n\nexport type ScrollAlign = (typeof SCROLL_ALIGNMENTS)[keyof typeof SCROLL_ALIGNMENTS];\n\nexport interface ScrollPositionOptions {\n  /** What scrolls. Defaults to the window. */\n  rootElement?: Element | Window;\n  /** Which axes a target that names none may move. Defaults to `'y'`. */\n  axis?: ScrollAxis;\n  /** Pixels to stop short of the target. Defaults to `0`. */\n  offset?: number;\n  /**\n   * Where an **element** target comes to rest, per axis. Defaults to `'start'`.\n   *\n   * The names are physical, like `axis`: this is `x` and `y`, not the\n   * platform's `inline` and `block`, because nothing here maps a writing mode.\n   * A number or a position target names its own destination, so it has nothing\n   * to align.\n   */\n  align?: ScrollAlign | { x?: ScrollAlign; y?: ScrollAlign };\n}\n\nexport interface ScrollToOptions extends ScrollPositionOptions {\n  /** Defaults to `'smooth'`, or to `'instant'` when the reader asked for less motion. */\n  behavior?: ScrollBehavior;\n}\n\nfunction currentPositionOf(root: Element | Window): ScrollPosition {\n  return root instanceof Window\n    ? { left: root.scrollX, top: root.scrollY }\n    : { left: root.scrollLeft, top: root.scrollTop };\n}\n\nfunction maxPositionOf(root: Element | Window): ScrollPosition {\n  // The window scrolls the document, so its extents come from the scroller.\n  const scroller = root instanceof Window ? (document.scrollingElement ?? document.body) : root;\n  const [width, height] =\n    root instanceof Window\n      ? [root.innerWidth, root.innerHeight]\n      : [root.clientWidth, root.clientHeight];\n\n  return {\n    // Classic scrollbars and fractional zoom can make the difference negative.\n    left: Math.max(0, scroller.scrollWidth - width),\n    top: Math.max(0, scroller.scrollHeight - height),\n  };\n}\n\nfunction pixels(value: string): number {\n  return Number.parseFloat(value) || 0;\n}\n\n/** What the scroller shows at once, scrollbars excluded on both axes. */\nfunction viewportOf(root: Element | Window): { width: number; height: number } {\n  return root instanceof Window\n    ? { width: root.innerWidth, height: root.innerHeight }\n    : { width: root.clientWidth, height: root.clientHeight };\n}\n\n/**\n * How far past the start of the viewport the element rests.\n *\n * `start` is zero, which is why a caller that never asks for alignment pays\n * nothing and reads the same numbers it always did.\n */\nfunction alignmentShift(align: ScrollAlign | undefined, viewport: number, size: number): number {\n  if (align === SCROLL_ALIGNMENTS.center) {\n    return (viewport - size) / 2;\n  }\n  if (align === SCROLL_ALIGNMENTS.end) {\n    return viewport - size;\n  }\n  return 0;\n}\n\n/**\n * Where an element sits inside the root's scrolled content.\n *\n * `scroll-margin` is how a document asks to be stopped short of an element,\n * and it is honored here as `scrollIntoView()` honors it.\n */\nfunction positionOfElement(\n  element: Element,\n  root: Element | Window,\n  current: ScrollPosition,\n  align: ScrollPositionOptions['align'],\n): ScrollPosition {\n  const rect = element.getBoundingClientRect();\n  const styles = getComputedStyle(element);\n  const viewport = viewportOf(root);\n  const alignX = isString(align) ? align : align?.x;\n  const alignY = isString(align) ? align : align?.y;\n  let left =\n    rect.left +\n    current.left -\n    pixels(styles.scrollMarginLeft) -\n    alignmentShift(alignX, viewport.width, rect.width);\n  let top =\n    rect.top +\n    current.top -\n    pixels(styles.scrollMarginTop) -\n    alignmentShift(alignY, viewport.height, rect.height);\n\n  if (!(root instanceof Window)) {\n    // A viewport coordinate is not a content coordinate for a scrolling\n    // element: subtract where its padding box starts, borders included.\n    const rootRect = root.getBoundingClientRect();\n    const rootStyles = getComputedStyle(root);\n    left -= rootRect.left + pixels(rootStyles.borderLeftWidth);\n    top -= rootRect.top + pixels(rootStyles.borderTopWidth);\n  }\n\n  return { left, top };\n}\n\n/** The axes the target asks for, `undefined` on an axis it leaves alone. */\nfunction requestedPosition(\n  target: ScrollToTarget,\n  root: Element | Window,\n  current: ScrollPosition,\n  axis: ScrollAxis,\n  align: ScrollPositionOptions['align'],\n): Partial<ScrollPosition> | null {\n  // A position object names its own axes, so `axis` has nothing left to pick.\n  if (!isString(target) && !isNumber(target) && !(target instanceof Element)) {\n    return { left: target.left, top: target.top };\n  }\n\n  let position: ScrollPosition;\n\n  if (isNumber(target)) {\n    position = { left: target, top: target };\n  } else {\n    const element = isString(target) ? document.querySelector(target) : target;\n    if (!element) {\n      return null;\n    }\n    position = positionOfElement(element, root, current, align);\n  }\n\n  if (axis === SCROLL_AXES.x) {\n    return { left: position.left };\n  }\n  if (axis === SCROLL_AXES.y) {\n    return { top: position.top };\n  }\n  return position;\n}\n\n/**\n * Where a scroll would land, without scrolling.\n *\n * The measurement half of {@link scrollTo}, split out because a caller often\n * needs the number rather than the move: which slide is nearest, how far a\n * control has to travel, whether the destination is where the scroller\n * already stands. A target the document does not contain gives the current\n * position back, so the answer is always a position.\n *\n * @example\n * ```js\n * const { left } = scrollPosition(slide, { rootElement: track, axis: 'x', align: 'center' });\n * ```\n * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scrollposition\n */\nexport function scrollPosition(\n  target: ScrollToTarget,\n  options: ScrollPositionOptions = {},\n): ScrollPosition {\n  const { rootElement = window, axis = SCROLL_AXES.y, offset = 0, align } = options;\n\n  const current = currentPositionOf(rootElement);\n  const requested = requestedPosition(target, rootElement, current, axis, align);\n\n  if (!requested) {\n    return current;\n  }\n\n  const max = maxPositionOf(rootElement);\n  return {\n    left: requested.left === undefined ? current.left : clamp(requested.left - offset, 0, max.left),\n    top: requested.top === undefined ? current.top : clamp(requested.top - offset, 0, max.top),\n  };\n}\n\n/**\n * Scroll to an element, a selector, a distance or a position, and get the\n * destination back. A target the document does not contain is a no-op.\n *\n * The browser owns the animation — this asks for it and returns. Smooth\n * scrolling is the default and becomes instant for a reader who asked for less\n * motion, which is read live rather than captured at load.\n *\n * @example\n * ```js\n * scrollTo('#section', { offset: 80 });\n * scrollTo({ left: 0 }, { rootElement: carousel });\n * scrollTo(slide, { rootElement: track, axis: 'x', align: 'center' });\n * ```\n * @link https://js-toolkit-v4.studiometa.dev/utils/scroll.html#scrollto\n */\nexport function scrollTo(target: ScrollToTarget, options: ScrollToOptions = {}): ScrollPosition {\n  const { rootElement = window, behavior } = options;\n  const destination = scrollPosition(target, options);\n\n  rootElement.scrollTo({\n    ...destination,\n    // Reading the media query does not start the service.\n    behavior: behavior ?? (usePrefersReducedMotion().props().matches ? 'instant' : 'smooth'),\n  });\n\n  return destination;\n}\n"],"mappings":"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"}