@anyknown/axis 0.1.0 → 0.2.1

package/README.md

@@ -140,6 +140,7 @@ Do not pass type arguments together with a selector: `useAxis<HTMLDivElement>(un
 | ---------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | `axis`     | `"x"`   | `"x"` drags horizontally and ignores vertical mouse movement, `"y"` drags vertically, `"both"` pans freely in 2D.                   |
 | `momentum` | `true`  | Keep gliding after a fast mouse drag is released, along the release velocity vector. Never applied under `prefers-reduced-motion`.  |
+| `maxGlide` | `Infinity` | The farthest a momentum glide may travel after one release, in px. A faster fling is slowed to land within it, so one gesture never moves more than this. |
 | `wheel`    | `false` | Translate vertical mouse-wheel scrolling into horizontal scrolling. **Only used with `axis: "x"`**; see below.                       |
 | `cursor`   | `true`  | Set `cursor: grab` while the container can be dragged and `grabbing` while dragging.                                                |
 

package/dist/axis/constants.d.ts

@@ -0,0 +1,12 @@
+import type { Vector } from "../utils/index.js";
+import type { AxisOptions, AxisScrollState, AxisState } from "./types.js";
+export declare const AXES: readonly ["x", "y"];
+export declare const EDGE = 1;
+export declare const WHEEL_SETTLE_MS = 150;
+export declare const DRAGGING_ATTR = "data-axis-dragging";
+export declare const ZERO: Vector;
+export declare const MAX_FRAME_MS = 64;
+export declare const PAGE_FRACTION = 0.9;
+export declare const EMPTY_AXIS: AxisState;
+export declare const INITIAL_STATE: AxisScrollState;
+export declare const DEFAULTS: Required<AxisOptions>;

package/dist/axis/constants.js

@@ -0,0 +1,27 @@
+export const AXES = ["x", "y"];
+export const EDGE = 1;
+export const WHEEL_SETTLE_MS = 150;
+export const DRAGGING_ATTR = "data-axis-dragging";
+export const ZERO = { x: 0, y: 0 };
+export const MAX_FRAME_MS = 64;
+export const PAGE_FRACTION = 0.9;
+export const EMPTY_AXIS = {
+    scroll: 0,
+    maxScroll: 0,
+    progress: 0,
+    canScrollPrev: false,
+    canScrollNext: false,
+};
+export const INITIAL_STATE = {
+    x: EMPTY_AXIS,
+    y: EMPTY_AXIS,
+    isDragging: false,
+    isMomentum: false,
+};
+export const DEFAULTS = {
+    axis: "x",
+    momentum: true,
+    maxGlide: Infinity,
+    wheel: false,
+    cursor: true,
+};

package/dist/axis/create-axis.d.ts

@@ -0,0 +1,10 @@
+import type { AxisInstance, AxisOptions } from "./types.js";
+/**
+ * Enhances a scroll container (`overflow: auto`) with mouse drag-scrolling, momentum, snap-aware release,
+ * optional wheel translation and an observable scroll state.
+ *
+ * Native scrolling stays the source of truth: touch, trackpad, keyboard and scrollbar input are untouched,
+ * and only a primary-button mouse drag is taken over (by writing `scrollLeft` / `scrollTop`). Nested instances
+ * share the drag: the innermost instance that can scroll in the drag's direction takes it.
+ */
+export declare function createAxis(el: HTMLElement, options?: AxisOptions): AxisInstance;

package/dist/axis/create-axis.js

@@ -0,0 +1,212 @@
+import { register } from "../coordinator/index.js";
+import { adjacentSnap, clamp, isScrollKey, measureSnaps } from "../utils/index.js";
+import { AXES, DEFAULTS, DRAGGING_ATTR, INITIAL_STATE, PAGE_FRACTION, ZERO } from "./constants.js";
+import { createDragClient } from "./create-drag-client.js";
+import { createGeometry } from "./create-geometry.js";
+import { createHold } from "./create-hold.js";
+import { createScrollDriver } from "./create-scroll-driver.js";
+import { createSnapSuspension } from "./create-snap-suspension.js";
+import { createStyleOverrides } from "./create-style-overrides.js";
+import { createWheel } from "./create-wheel.js";
+import { dragsAlong } from "./drags-along.js";
+import { mergeOptions } from "./merge-options.js";
+import { nextAxisState } from "./next-axis-state.js";
+import { resolveAxis } from "./resolve-axis.js";
+/**
+ * Enhances a scroll container (`overflow: auto`) with mouse drag-scrolling, momentum, snap-aware release,
+ * optional wheel translation and an observable scroll state.
+ *
+ * Native scrolling stays the source of truth: touch, trackpad, keyboard and scrollbar input are untouched,
+ * and only a primary-button mouse drag is taken over (by writing `scrollLeft` / `scrollTop`). Nested instances
+ * share the drag: the innermost instance that can scroll in the drag's direction takes it.
+ */
+export function createAxis(el, options = {}) {
+    const win = el.ownerDocument.defaultView ?? window;
+    let opts = mergeOptions(DEFAULTS, options);
+    let motion = "idle";
+    let destroyed = false;
+    let state = INITIAL_STATE;
+    const listeners = new Set();
+    const hadStyleAttr = el.hasAttribute("style");
+    const mutationObserver = new MutationObserver((records) => onLayoutMutations(records));
+    const styles = createStyleOverrides(el, mutationObserver, (records) => onLayoutMutations(records));
+    const { override, restore } = styles;
+    const geometry = createGeometry(win, el);
+    const { rtl, scrollRange, position } = geometry;
+    let snapCache = null;
+    const invalidate = () => {
+        snapCache = null;
+    };
+    const snapPoints = () => (snapCache ??= measureSnaps(win, el));
+    const allows = (axis) => dragsAlong(opts.axis, axis);
+    const syncCursor = (max) => {
+        if (!opts.cursor)
+            restore("cursor");
+        else if (motion === "dragging")
+            override("cursor", "grabbing");
+        else if ((allows("x") && max.x > 0) || (allows("y") && max.y > 0))
+            override("cursor", "grab");
+        else
+            restore("cursor");
+    };
+    const update = () => {
+        if (destroyed)
+            return;
+        const max = scrollRange();
+        const current = position(rtl(), max);
+        const x = nextAxisState(current.x, max.x, state.x);
+        const y = nextAxisState(current.y, max.y, state.y);
+        const isDragging = motion === "dragging";
+        const isMomentum = motion === "momentum";
+        syncCursor(max);
+        const unchanged = x === state.x && y === state.y && isDragging === state.isDragging;
+        if (unchanged && isMomentum === state.isMomentum)
+            return;
+        state = { x, y, isDragging, isMomentum };
+        for (const listener of listeners)
+            listener(state);
+    };
+    const setMotion = (next) => {
+        motion = next;
+        update();
+    };
+    const core = {
+        ...geometry,
+        el,
+        win,
+        options: () => opts,
+        motion: () => motion,
+        setMotion,
+        isDestroyed: () => destroyed,
+        snapPoints,
+    };
+    const snap = createSnapSuspension(win, el, styles);
+    const hold = createHold(el);
+    const driver = createScrollDriver(core, snap, hold);
+    const { stop, interrupt, glideTo } = driver;
+    const drag = createDragClient(core, snap, hold, driver, styles);
+    const wheel = createWheel(core, snap, driver);
+    const resizeObserver = new ResizeObserver(() => {
+        invalidate();
+        update();
+    });
+    resizeObserver.observe(el);
+    for (const child of el.children)
+        resizeObserver.observe(child);
+    const observeCurrentChildren = (record) => {
+        for (const node of [...record.addedNodes, ...record.removedNodes]) {
+            if (node.nodeType !== 1)
+                continue;
+            if (node.parentElement === el)
+                resizeObserver.observe(node);
+            else
+                resizeObserver.unobserve(node);
+        }
+    };
+    const onLayoutMutations = (records) => {
+        if (destroyed)
+            return;
+        invalidate();
+        for (const record of records)
+            if (record.target === el)
+                observeCurrentChildren(record);
+        update();
+    };
+    mutationObserver.observe(el, {
+        childList: true,
+        attributes: true,
+        attributeFilter: ["class", "style", "dir"],
+        subtree: true,
+    });
+    const root = el.ownerDocument.documentElement;
+    const watchAncestorDirection = () => mutationObserver.observe(root, { attributes: true, attributeFilter: ["dir"], subtree: true });
+    if (el !== root)
+        watchAncestorDirection();
+    const onKeyDown = (event) => {
+        if (isScrollKey(event))
+            interrupt();
+    };
+    const holdAgainstSafariAutoscroll = () => {
+        hold.undoAutoscroll();
+        update();
+    };
+    const passive = { passive: true };
+    el.addEventListener("scroll", holdAgainstSafariAutoscroll, passive);
+    el.addEventListener("wheel", interrupt, passive);
+    el.addEventListener("touchstart", interrupt, passive);
+    el.addEventListener("keydown", onKeyDown);
+    const unregister = register(drag.client);
+    wheel.sync();
+    update();
+    const step = (axis, direction) => {
+        if (destroyed || motion === "dragging")
+            return;
+        const visible = axis === "x" ? el.clientWidth : el.clientHeight;
+        const max = scrollRange();
+        const heading = motion === "glide" ? driver.glideTarget()[axis] : position(rtl(), max)[axis];
+        const target = snap.snapAxes()[axis]
+            ? (adjacentSnap(snapPoints()[axis], heading, direction) ?? (direction === 1 ? max[axis] : 0))
+            : heading + direction * visible * PAGE_FRACTION;
+        glideTo({ [axis]: clamp(target, 0, max[axis]) }, ZERO, "glide");
+    };
+    return {
+        getState: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        scrollPrev: (axis) => step(resolveAxis("scrollPrev", axis, opts.axis), -1),
+        scrollNext: (axis) => step(resolveAxis("scrollNext", axis, opts.axis), 1),
+        scrollTo(target, { animate = true } = {}) {
+            if (destroyed || motion === "dragging")
+                return;
+            const max = scrollRange();
+            const clamped = {};
+            for (const axis of AXES) {
+                const value = target[axis];
+                if (value !== undefined)
+                    clamped[axis] = clamp(value, 0, max[axis]);
+            }
+            if (animate)
+                glideTo(clamped, ZERO, "glide");
+            else
+                driver.jump(clamped);
+        },
+        setOptions(patch) {
+            if (destroyed)
+                return;
+            opts = mergeOptions(opts, patch);
+            invalidate();
+            wheel.sync();
+            update();
+        },
+        refresh() {
+            if (destroyed)
+                return;
+            invalidate();
+            update();
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            stop();
+            unregister();
+            drag.endDragIfActive();
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            el.removeEventListener("scroll", holdAgainstSafariAutoscroll);
+            el.removeEventListener("wheel", interrupt);
+            el.removeEventListener("touchstart", interrupt);
+            el.removeEventListener("keydown", onKeyDown);
+            wheel.remove();
+            el.removeAttribute(DRAGGING_ATTR);
+            styles.restoreAll();
+            if (!hadStyleAttr && !el.getAttribute("style"))
+                el.removeAttribute("style");
+            destroyed = true;
+            listeners.clear();
+        },
+    };
+}

package/dist/axis/create-drag-client.d.ts

@@ -0,0 +1,6 @@
+import type { DragClient } from "../coordinator/index.js";
+import type { AxisCore, Hold, ScrollDriver, SnapSuspension, StyleOverrides } from "./types.js";
+export declare function createDragClient(core: AxisCore, snap: SnapSuspension, hold: Hold, driver: ScrollDriver, styles: StyleOverrides): {
+    client: DragClient;
+    endDragIfActive: () => void;
+};

package/dist/axis/create-drag-client.js

@@ -0,0 +1,95 @@
+import { isOnScrollbar, supportedUserSelect, toLogical, tryCapturePointer, tryReleasePointer, } from "../utils/index.js";
+import { AXES, DRAGGING_ATTR, EDGE, ZERO } from "./constants.js";
+import { dragsAlong } from "./drags-along.js";
+export function createDragClient(core, snap, hold, driver, styles) {
+    const { el, win, rtl, scrollRange, position, options, motion, setMotion, isDestroyed } = core;
+    const { stop, fling } = driver;
+    const userSelect = supportedUserSelect(el.style);
+    let pointerId = -1;
+    let pressScroll = { x: 0, y: 0 };
+    const allows = (axis) => dragsAlong(options().axis, axis);
+    const endDrag = () => {
+        tryReleasePointer(el, pointerId);
+        pointerId = -1;
+        el.removeAttribute(DRAGGING_ATTR);
+        styles.restore(userSelect);
+    };
+    const freezeMomentum = () => {
+        stop();
+        setMotion("pressed");
+    };
+    const client = {
+        el,
+        onScrollbar: (event) => isOnScrollbar(el, event),
+        accepts(axis) {
+            if (!allows(axis))
+                return false;
+            const max = scrollRange();
+            return options().axis === "both" ? max.x > 0 || max.y > 0 : max[axis] > 0;
+        },
+        canScroll(delta) {
+            const isRtlNow = rtl();
+            const max = scrollRange();
+            const current = position(isRtlNow, max);
+            const againstPointer = { x: toLogical(-delta.x, isRtlNow), y: -delta.y };
+            return AXES.some((axis) => allows(axis) &&
+                ((againstPointer[axis] > 0 && current[axis] < max[axis] - EDGE) ||
+                    (againstPointer[axis] < 0 && current[axis] > EDGE)));
+        },
+        press() {
+            if (motion() === "momentum")
+                freezeMomentum();
+            else if (motion() === "idle")
+                setMotion("pressed");
+        },
+        yield() {
+            hold.yieldDrag(motion() === "glide" || motion() === "wheel");
+        },
+        start(id) {
+            stop();
+            pressScroll = { x: el.scrollLeft, y: el.scrollTop };
+            hold.holdCurrent();
+            pointerId = id;
+            snap.suspend();
+            tryCapturePointer(el, id);
+            el.setAttribute(DRAGGING_ATTR, "");
+            styles.override(userSelect, "none");
+            win.getSelection()?.removeAllRanges();
+            setMotion("dragging");
+        },
+        move(delta) {
+            if (isDestroyed())
+                return;
+            if (allows("x")) {
+                el.scrollLeft = pressScroll.x - delta.x;
+                hold.follow("x");
+            }
+            if (allows("y")) {
+                el.scrollTop = pressScroll.y - delta.y;
+                hold.follow("y");
+            }
+        },
+        pass() {
+            hold.undoAutoscroll();
+            hold.reset();
+            const pressFroze = motion() === "pressed";
+            if (!pressFroze)
+                return;
+            if (snap.isSuspended())
+                fling(ZERO);
+            else
+                setMotion("idle");
+        },
+        end(pointerVelocity) {
+            endDrag();
+            hold.undoAutoscroll();
+            fling(pointerVelocity ? { x: toLogical(-pointerVelocity.x, rtl()), y: -pointerVelocity.y } : ZERO);
+        },
+        interrupt: driver.interrupt,
+    };
+    const endDragIfActive = () => {
+        if (pointerId !== -1)
+            endDrag();
+    };
+    return { client, endDragIfActive };
+}

package/dist/axis/create-geometry.d.ts

@@ -0,0 +1,2 @@
+import type { Geometry } from "./types.js";
+export declare function createGeometry(win: Window, el: HTMLElement): Geometry;

package/dist/axis/create-geometry.js

@@ -0,0 +1,11 @@
+import { isRtl, maxScroll, readScroll, writeScroll } from "../utils/index.js";
+export function createGeometry(win, el) {
+    const rtl = () => isRtl(win, el);
+    const scrollRange = () => maxScroll(el);
+    return {
+        rtl,
+        scrollRange,
+        position: (isRtlNow = rtl(), range = scrollRange()) => readScroll(el, isRtlNow, range),
+        writePosition: (position, isRtlNow = rtl()) => writeScroll(el, position, isRtlNow),
+    };
+}

package/dist/axis/create-hold.d.ts

@@ -0,0 +1,2 @@
+import type { Hold } from "./types.js";
+export declare function createHold(el: HTMLElement): Hold;

package/dist/axis/create-hold.js

@@ -0,0 +1,38 @@
+export function createHold(el) {
+    let held = null;
+    let yielded = false;
+    const holdCurrent = () => {
+        held = { x: el.scrollLeft, y: el.scrollTop };
+    };
+    return {
+        holdCurrent,
+        release() {
+            held = null;
+        },
+        reset() {
+            held = null;
+            yielded = false;
+        },
+        yieldDrag(glideHoldsAtItsEnd) {
+            yielded = true;
+            if (!glideHoldsAtItsEnd)
+                holdCurrent();
+        },
+        holdIfYielded() {
+            if (yielded)
+                holdCurrent();
+        },
+        follow(axis) {
+            if (held)
+                held[axis] = axis === "x" ? el.scrollLeft : el.scrollTop;
+        },
+        undoAutoscroll() {
+            if (!held)
+                return;
+            if (Math.abs(el.scrollLeft - held.x) >= 1)
+                el.scrollLeft = held.x;
+            if (Math.abs(el.scrollTop - held.y) >= 1)
+                el.scrollTop = held.y;
+        },
+    };
+}

package/dist/axis/create-scroll-driver.d.ts

@@ -0,0 +1,2 @@
+import type { AxisCore, Hold, ScrollDriver, SnapSuspension } from "./types.js";
+export declare function createScrollDriver(core: AxisCore, snap: SnapSuspension, hold: Hold): ScrollDriver;

package/dist/axis/create-scroll-driver.js

@@ -0,0 +1,139 @@
+import { clamp, easeOutCubic, glideDuration, MIN_VELOCITY, capVelocity, momentumDistance, momentumStep, nearestSnap, prefersReducedMotion, } from "../utils/index.js";
+import { AXES, MAX_FRAME_MS, WHEEL_SETTLE_MS } from "./constants.js";
+import { dragsAlong } from "./drags-along.js";
+export function createScrollDriver(core, snap, hold) {
+    const { win, rtl, scrollRange, position, writePosition, options, motion, setMotion, isDestroyed } = core;
+    const { suspend, resume, snapAxes } = snap;
+    let frame = 0;
+    let wheelTimer = 0;
+    let glideTarget = { x: 0, y: 0 };
+    const stop = () => {
+        hold.release();
+        if (frame)
+            win.cancelAnimationFrame(frame);
+        frame = 0;
+        win.clearTimeout(wheelTimer);
+        wheelTimer = 0;
+    };
+    const settle = () => {
+        stop();
+        hold.holdIfYielded();
+        resume();
+        setMotion("idle");
+    };
+    const jump = (target) => {
+        stop();
+        suspend();
+        writePosition(target);
+        settle();
+    };
+    const glideTo = (target, velocity, kind) => {
+        stop();
+        const isRtlNow = rtl();
+        const from = position(isRtlNow);
+        const moving = AXES.filter((axis) => target[axis] !== undefined && Math.abs(target[axis] - from[axis]) >= 0.5);
+        if (moving.length === 0 || prefersReducedMotion(win)) {
+            jump(target);
+            return;
+        }
+        suspend();
+        glideTarget = { x: target.x ?? from.x, y: target.y ?? from.y };
+        const distance = { x: glideTarget.x - from.x, y: glideTarget.y - from.y };
+        const duration = Math.max(...moving.map((axis) => glideDuration(distance[axis], velocity[axis])));
+        const start = win.performance.now();
+        setMotion(kind);
+        if (isDestroyed())
+            return;
+        const tick = (now) => {
+            if (isDestroyed())
+                return;
+            const eased = easeOutCubic(clamp((now - start) / duration, 0, 1));
+            const next = {};
+            for (const axis of moving)
+                next[axis] = from[axis] + distance[axis] * eased;
+            writePosition(next, isRtlNow);
+            if (eased < 1)
+                frame = win.requestAnimationFrame(tick);
+            else
+                settle();
+        };
+        frame = win.requestAnimationFrame(tick);
+    };
+    const runMomentum = (velocity) => {
+        stop();
+        suspend();
+        setMotion("momentum");
+        if (isDestroyed())
+            return;
+        const isRtlNow = rtl();
+        const max = scrollRange();
+        const current = position(isRtlNow, max);
+        const speed = { ...velocity };
+        let last = win.performance.now();
+        const tick = (now) => {
+            if (isDestroyed())
+                return;
+            const dt = clamp(now - last, 0, MAX_FRAME_MS);
+            last = now;
+            const next = {};
+            for (const axis of AXES) {
+                if (speed[axis] === 0)
+                    continue;
+                const advance = momentumStep(speed[axis], dt);
+                current[axis] = clamp(current[axis] + advance.distance, 0, max[axis]);
+                speed[axis] = current[axis] <= 0 || current[axis] >= max[axis] ? 0 : advance.velocity;
+                next[axis] = current[axis];
+            }
+            writePosition(next, isRtlNow);
+            if (Math.hypot(speed.x, speed.y) < MIN_VELOCITY)
+                settle();
+            else
+                frame = win.requestAnimationFrame(tick);
+        };
+        frame = win.requestAnimationFrame(tick);
+    };
+    const nearestSnapToLanding = (speed, snaps) => {
+        const max = scrollRange();
+        const from = position(rtl(), max);
+        const positions = core.snapPoints();
+        const target = {};
+        for (const axis of AXES) {
+            const landing = clamp(from[axis] + momentumDistance(speed[axis]), 0, max[axis]);
+            target[axis] = snaps[axis] ? nearestSnap(positions[axis], landing) : landing;
+        }
+        return target;
+    };
+    return {
+        stop,
+        settle,
+        jump,
+        glideTo,
+        interrupt() {
+            hold.reset();
+            if (motion() === "momentum" || motion() === "glide")
+                settle();
+        },
+        fling(scrollVelocity) {
+            const { momentum, axis, maxGlide } = options();
+            const allowed = momentum && !prefersReducedMotion(win);
+            const speed = {
+                x: allowed && dragsAlong(axis, "x") ? capVelocity(scrollVelocity.x, maxGlide) : 0,
+                y: allowed && dragsAlong(axis, "y") ? capVelocity(scrollVelocity.y, maxGlide) : 0,
+            };
+            const snaps = snapAxes();
+            if (snaps.x || snaps.y)
+                glideTo(nearestSnapToLanding(speed, snaps), speed, "momentum");
+            else if (Math.hypot(speed.x, speed.y) > MIN_VELOCITY)
+                runMomentum(speed);
+            else
+                settle();
+        },
+        afterWheelPause(settleWheel) {
+            wheelTimer = win.setTimeout(() => {
+                wheelTimer = 0;
+                settleWheel();
+            }, WHEEL_SETTLE_MS);
+        },
+        glideTarget: () => glideTarget,
+    };
+}

package/dist/axis/create-snap-suspension.d.ts

@@ -0,0 +1,2 @@
+import type { SnapSuspension, StyleOverrides } from "./types.js";
+export declare function createSnapSuspension(win: Window, el: HTMLElement, styles: StyleOverrides): SnapSuspension;

package/dist/axis/create-snap-suspension.js

@@ -0,0 +1,23 @@
+import { parseSnapType } from "../utils/index.js";
+export function createSnapSuspension(win, el, styles) {
+    const { override, restore } = styles;
+    let suspendedSnapType = null;
+    return {
+        suspend() {
+            if (suspendedSnapType !== null)
+                return;
+            suspendedSnapType = win.getComputedStyle(el).scrollSnapType;
+            override("scroll-snap-type", "none", true);
+            override("scroll-behavior", "auto", true);
+        },
+        resume() {
+            if (suspendedSnapType === null)
+                return;
+            suspendedSnapType = null;
+            restore("scroll-snap-type");
+            restore("scroll-behavior");
+        },
+        snapAxes: () => parseSnapType(suspendedSnapType ?? win.getComputedStyle(el).scrollSnapType),
+        isSuspended: () => suspendedSnapType !== null,
+    };
+}

package/dist/axis/create-style-overrides.d.ts

@@ -0,0 +1,2 @@
+import type { StyleOverrides } from "./types.js";
+export declare function createStyleOverrides(el: HTMLElement, observer: MutationObserver, onMutations: (records: MutationRecord[]) => void): StyleOverrides;

package/dist/axis/create-style-overrides.js

@@ -0,0 +1,35 @@
+export function createStyleOverrides(el, observer, onMutations) {
+    const saved = new Map();
+    const writeUnobserved = (write) => {
+        const pendingRecords = observer.takeRecords();
+        write();
+        observer.takeRecords();
+        if (pendingRecords.length > 0)
+            queueMicrotask(() => onMutations(pendingRecords));
+    };
+    const override = (prop, value, important = false) => {
+        if (!saved.has(prop)) {
+            saved.set(prop, [el.style.getPropertyValue(prop), el.style.getPropertyPriority(prop)]);
+        }
+        else if (el.style.getPropertyValue(prop) === value)
+            return;
+        writeUnobserved(() => el.style.setProperty(prop, value, important ? "important" : ""));
+    };
+    const restore = (prop) => {
+        const original = saved.get(prop);
+        if (!original)
+            return;
+        saved.delete(prop);
+        writeUnobserved(() => {
+            if (original[0])
+                el.style.setProperty(prop, original[0], original[1]);
+            else
+                el.style.removeProperty(prop);
+        });
+    };
+    const restoreAll = () => {
+        for (const prop of saved.keys())
+            restore(prop);
+    };
+    return { override, restore, restoreAll };
+}

package/dist/axis/create-wheel.d.ts

@@ -0,0 +1,5 @@
+import type { AxisCore, ScrollDriver, SnapSuspension } from "./types.js";
+export declare function createWheel(core: AxisCore, snap: SnapSuspension, driver: ScrollDriver): {
+    sync: () => void;
+    remove: () => void;
+};