@once-ui-system/core 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/components/ScrollContainer.js

@@ -1,66 +1,397 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback, forwardRef } from "react";
-import { Column, Row, IconButton } from ".";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Column, Flex, IconButton, Row } from ".";
+import styles from "./ScrollContainer.module.scss";
 const getHorizontalAlignment = (placement) => {
-    if (placement === "top-start" || placement === "bottom-start")
-        return "start";
-    if (placement === "top-end" || placement === "bottom-end")
+    if (placement.endsWith("-end"))
         return "end";
-    if (placement === "top-center" || placement === "bottom-center")
+    if (placement.endsWith("-center"))
         return "center";
-    if (placement === "top-between" || placement === "bottom-between")
+    if (placement.endsWith("-between"))
         return "between";
     return "start";
 };
-const ScrollContainer = forwardRef(({ items, controlPlacement = "top-start", ...flex }, ref) => {
-    const scrollRef = useRef(null);
-    const [canScrollLeft, setCanScrollLeft] = useState(false);
-    const [canScrollRight, setCanScrollRight] = useState(true);
-    const checkScrollPosition = useCallback(() => {
-        const element = scrollRef.current;
-        if (!element)
+/** Past this many pixels a pointer is dragging the track, not clicking a tile. */
+const DRAG_THRESHOLD = 6;
+/** Past this fraction of a tile, let go and the track advances rather than settling back. */
+const COMMIT_RATIO = 0.2;
+/** Past this speed the same is true however short the drag was. */
+const FLICK_VELOCITY = 0.5;
+/** How far a track can be pulled past its own end before it stops following. */
+const RUBBER_BAND = 0.35;
+/** How much smaller each whole step from the front is, when `proximity` is on. */
+const PROXIMITY_FALLOFF = 0.08;
+/** Tiles stop shrinking here, so a long run does not trail off into nothing. */
+const PROXIMITY_FLOOR = 0.72;
+/**
+ * A horizontal run of items with controls, drag, optional wrap-around,
+ * optional proximity scaling and optional markers.
+ *
+ * This moves a track with a transform rather than scrolling a box, which is
+ * the decision the rest of the component follows from. The previous version
+ * was an `overflow-x: auto` row, and a scroll box cannot do any of the three
+ * things asked of a carousel: its contents are clipped at its own edge by
+ * definition, so no tile can peek past it; its scroll range has two hard ends,
+ * so there is nowhere for a wrap-around to go; and the browser owns the
+ * easing, so a drag can only set `scrollLeft` and hope. A transform has none
+ * of those limits — the track is laid out once and moved, tiles paint wherever
+ * they land, the offset is free to run past either end, and the motion is a
+ * CSS transition this component controls.
+ *
+ * What it gives up is the browser's own scrolling: a trackpad's horizontal
+ * gesture no longer moves the track, and that is why `draggable` is on by
+ * default and the controls are never hidden. Both are real affordances rather
+ * than the invisible one a scroll box relies on.
+ *
+ * Tiles are unstyled. The wrapper each item sits in used to arrive with
+ * `aspectRatio="3/4"`, `border`, `radius="xl"` and a width range already set,
+ * so anything that was not a tall bordered portrait card had to override four
+ * properties before it could begin — and any prop passed to override them
+ * landed on every tile, since that is where the rest props go. The wrapper now
+ * contributes only what a track item cannot do without, which is refusing to
+ * shrink. Sizing stays with the caller, through those same rest props.
+ */
+const ScrollContainer = forwardRef(({ items, controlPlacement = "top-start", infinite = false, markers = false, draggable = true, step = 1, clip = false, proximity = false, active, onActiveChange, ...tile }, ref) => {
+    const count = items.length;
+    const viewportRef = useRef(null);
+    const trackRef = useRef(null);
+    const [index, setIndex] = useState(0);
+    const [tileStep, setTileStep] = useState(0);
+    const [perView, setPerView] = useState(1);
+    const [dragPx, setDragPx] = useState(0);
+    const [animated, setAnimated] = useState(true);
+    const [dragging, setDragging] = useState(false);
+    /**
+     * The last index that still fills the viewport.
+     *
+     * Without wrap-around there is no reason to advance into empty space once
+     * the final tile is already in view, so the end of the run is the last
+     * whole screenful rather than the last item.
+     */
+    const maxIndex = infinite ? Number.POSITIVE_INFINITY : Math.max(0, count - perView);
+    /**
+     * Wrap-around is three copies of the run with the real one in the middle.
+     *
+     * Moving off either side of the middle copy lands on a real tile of the
+     * neighbouring copy, so the motion is continuous and in the direction of
+     * travel. `onTransitionEnd` then puts the index back in range with the
+     * transition switched off, which shifts the track by exactly one copy —
+     * the same tiles under the same pixels, so nothing moves on screen.
+     */
+    const rendered = useMemo(() => (infinite && count > 0 ? [...items, ...items, ...items] : items), [infinite, items, count]);
+    const origin = infinite ? count : 0;
+    const measure = useCallback(() => {
+        const viewport = viewportRef.current;
+        const track = trackRef.current;
+        const first = track?.firstElementChild;
+        if (!viewport || !track || !first)
             return;
-        const { scrollLeft, scrollWidth, clientWidth } = element;
-        setCanScrollLeft(scrollLeft > 0);
-        setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+        const gap = Number.parseFloat(getComputedStyle(track).columnGap) || 0;
+        const width = first.offsetWidth + gap;
+        setTileStep(width);
+        setPerView(width > 0 ? Math.max(1, Math.round(viewport.clientWidth / width)) : 1);
     }, []);
     useEffect(() => {
-        const element = scrollRef.current;
-        if (!element)
+        measure();
+        const viewport = viewportRef.current;
+        if (!viewport || typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", measure);
+            return () => window.removeEventListener("resize", measure);
+        }
+        // Watches the track's own box too: a tile sized in percentages changes
+        // with the viewport, but one sized by its content changes when the
+        // content does, and only the track hears about that.
+        const observer = new ResizeObserver(measure);
+        observer.observe(viewport);
+        if (trackRef.current)
+            observer.observe(trackRef.current);
+        return () => observer.disconnect();
+    }, [measure]);
+    // A shorter list can leave the index past the end of it.
+    useEffect(() => {
+        setIndex((current) => Math.min(current, infinite ? current : Math.max(0, count - 1)));
+    }, [count, infinite]);
+    const go = useCallback((delta) => {
+        setAnimated(true);
+        setIndex((current) => {
+            const next = current + delta;
+            return infinite ? next : Math.max(0, Math.min(maxIndex, next));
+        });
+    }, [infinite, maxIndex]);
+    const goTo = useCallback((target) => {
+        setAnimated(true);
+        setIndex((current) => {
+            if (!infinite)
+                return Math.max(0, Math.min(maxIndex, target));
+            // Take whichever way round is shorter, so a marker near the end of
+            // the run does not walk the whole track to reach a neighbour.
+            const here = ((current % count) + count) % count;
+            const forward = (((target - here) % count) + count) % count;
+            return current + (forward <= count - forward ? forward : forward - count);
+        });
+    }, [count, infinite, maxIndex]);
+    /**
+     * Which item is in front, counted in `items` rather than in the track.
+     *
+     * With wrap-around the internal index is free to run past either end —
+     * that is what makes the motion continuous — so it is not a number any
+     * caller could use. This folds it back into the range of the real run,
+     * and it is the only index this component reports or accepts.
+     */
+    const activeIndex = count > 0 ? ((index % count) + count) % count : 0;
+    /**
+     * Report the front item, but never on mount.
+     *
+     * The callback is read through a ref so that a caller passing a fresh
+     * arrow function on every render — which is most of them — does not make
+     * this fire again for an index that has not moved.
+     */
+    const onActiveChangeRef = useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const reportedRef = useRef(activeIndex);
+    useEffect(() => {
+        if (reportedRef.current === activeIndex)
+            return;
+        reportedRef.current = activeIndex;
+        onActiveChangeRef.current?.(activeIndex);
+    }, [activeIndex]);
+    /**
+     * Move when `active` changes.
+     *
+     * Deliberately keyed on `active` alone. Were it to depend on where the run
+     * actually is, every drag would be undone a frame after it finished by an
+     * effect insisting on the last value the caller passed — the run would
+     * fight the pointer. `active` says go here; it does not say stay here.
+     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see above — reacting to the caller's command, not to our own position
+    useEffect(() => {
+        if (active === undefined || count === 0)
+            return;
+        goTo(active);
+    }, [active, count]);
+    /**
+     * Put the index back inside the real copy once the motion has finished.
+     *
+     * Switching the transition off for one frame is what makes the jump
+     * invisible: the index changes by a whole copy and the transform changes
+     * by exactly one copy's width, so the pixels are identical.
+     */
+    const handleTransitionEnd = useCallback((event) => {
+        // `transitionend` bubbles, so a tile animating its own background would
+        // otherwise be read as the track arriving.
+        if (event.target !== trackRef.current || event.propertyName !== "transform")
+            return;
+        if (!infinite || count === 0)
+            return;
+        if (index >= 0 && index < count)
             return;
-        checkScrollPosition();
-        element.addEventListener("scroll", checkScrollPosition);
-        window.addEventListener("resize", checkScrollPosition);
-        return () => {
-            element.removeEventListener("scroll", checkScrollPosition);
-            window.removeEventListener("resize", checkScrollPosition);
+        setAnimated(false);
+        setIndex(((index % count) + count) % count);
+    }, [count, index, infinite]);
+    /**
+     * Put the transition back one frame after the wrap-around jump — but not
+     * while a drag is in progress.
+     *
+     * Without the `dragging` guard this fires for any `animated === false`,
+     * and a drag is the other thing that sets it false. One frame in, the
+     * transition came back on, and every `dragPx` update after that was eased
+     * over `--transition-duration-macro-long` instead of applied: the track
+     * crawled toward the pointer at 0.6s a step and never caught up. Measured
+     * before the guard — a 164px drag moved the track 46px, in increments of
+     * 40, 1, 2, 3. It only looked right on release because the commit works
+     * from the raw pointer delta, not from where the track had got to.
+     */
+    useEffect(() => {
+        if (animated || dragging)
+            return;
+        const frame = requestAnimationFrame(() => setAnimated(true));
+        return () => cancelAnimationFrame(frame);
+    }, [animated, dragging]);
+    const drag = useRef({
+        active: false,
+        axis: null,
+        startX: 0,
+        startY: 0,
+        lastX: 0,
+        lastT: 0,
+        velocity: 0,
+        moved: false,
+    });
+    const onPointerDown = (event) => {
+        if (!draggable || tileStep === 0 || event.button !== 0)
+            return;
+        drag.current = {
+            active: true,
+            axis: null,
+            startX: event.clientX,
+            startY: event.clientY,
+            lastX: event.clientX,
+            lastT: event.timeStamp,
+            velocity: 0,
+            moved: false,
         };
-    }, [checkScrollPosition]);
-    const scroll = (direction) => {
-        const element = scrollRef.current;
-        if (!element)
+    };
+    const onPointerMove = (event) => {
+        const state = drag.current;
+        if (!state.active)
             return;
-        const firstChild = element.firstElementChild;
-        if (!firstChild)
+        const dx = event.clientX - state.startX;
+        const dy = event.clientY - state.startY;
+        /**
+         * Which axis this gesture belongs to is decided once, on the first
+         * movement past the threshold, and never revisited.
+         *
+         * A carousel that takes every gesture takes vertical ones too, and on a
+         * phone that means the page stops scrolling wherever a carousel happens
+         * to be. Deciding once rather than per-event also stops a diagonal drag
+         * from flickering between the two.
+         */
+        if (state.axis === null) {
+            if (Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD)
+                return;
+            state.axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
+            if (state.axis === "y") {
+                state.active = false;
+                return;
+            }
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setAnimated(false);
+            setDragging(true);
+        }
+        const elapsed = event.timeStamp - state.lastT;
+        if (elapsed > 0)
+            state.velocity = (event.clientX - state.lastX) / elapsed;
+        state.lastX = event.clientX;
+        state.lastT = event.timeStamp;
+        state.moved = true;
+        // Past either end there is nothing to show, so the track follows at a
+        // fraction of the pointer and springs back on release.
+        let offset = dx;
+        if (!infinite) {
+            const over = index - dx / tileStep;
+            if (over < 0)
+                offset = dx * RUBBER_BAND;
+            else if (over > maxIndex)
+                offset = dx * RUBBER_BAND;
+        }
+        setDragPx(offset);
+    };
+    const endDrag = (event) => {
+        const state = drag.current;
+        if (!state.active || state.axis !== "x") {
+            drag.current.active = false;
+            setDragging(false);
             return;
-        const gap = parseFloat(getComputedStyle(element).gap) || 0;
-        const tileWidth = firstChild.offsetWidth + gap;
-        const targetScroll = element.scrollLeft + (direction === "right" ? tileWidth : -tileWidth);
-        element.scrollTo({
-            left: targetScroll,
-            behavior: "smooth",
-        });
+        }
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        const dx = event.clientX - state.startX;
+        const travelled = -dx / tileStep;
+        const flicked = Math.abs(state.velocity) > FLICK_VELOCITY;
+        const committed = Math.abs(travelled) > COMMIT_RATIO || flicked;
+        // A flick is a direction, not a distance: it moves one tile whichever
+        // way it was thrown, even if the pointer barely left where it started.
+        const delta = committed
+            ? Math.abs(travelled) < 1
+                ? Math.sign(travelled) || -Math.sign(state.velocity)
+                : Math.round(travelled)
+            : 0;
+        state.active = false;
+        setDragging(false);
+        setDragPx(0);
+        go(delta);
+    };
+    /**
+     * A drag that ends on a tile must not also open it.
+     *
+     * The pointer goes down and up on the same anchor, so the browser fires a
+     * click regardless of how far it travelled in between. This swallows that
+     * one click during the capture phase, before it reaches the tile.
+     */
+    const onClickCapture = (event) => {
+        if (!drag.current.moved)
+            return;
+        drag.current.moved = false;
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            go(-step);
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            go(step);
+        }
     };
+    const canGoBack = infinite || index > 0;
+    const canGoForward = infinite || index < maxIndex;
     const isTopPlacement = controlPlacement.startsWith("top");
-    const horizontalAlignment = getHorizontalAlignment(controlPlacement);
-    return (_jsxs(Column, { fillWidth: true, gap: "8", direction: isTopPlacement ? "column" : "column-reverse", children: [_jsxs(Row, { fillWidth: true, gap: "8", paddingX: "24", horizontal: horizontalAlignment, children: [_jsx(IconButton, { icon: "chevronLeft", "aria-label": "Scroll backward", onClick: () => scroll("left"), disabled: !canScrollLeft, style: { border: "none" } }), _jsx(IconButton, { icon: "chevronRight", "aria-label": "Scroll forward", onClick: () => scroll("right"), disabled: !canScrollRight, style: { border: "none" } })] }), _jsx(Row, { ref: scrollRef, gap: "8", overflowX: "auto", style: {
-                    scrollSnapType: "x mandatory",
-                    scrollbarWidth: "none",
-                }, children: items.map((item, index) => (_jsx(Column, { maxWidth: 48, minWidth: 28, border: true, radius: "xl", overflow: "hidden", gap: "8", aspectRatio: "3/4", style: {
-                        scrollSnapAlign: "start",
-                        flexShrink: 0,
-                    }, ...flex, children: item }, index))) })] }));
+    const markerSide = markers === true ? (isTopPlacement ? "bottom" : "top") : markers;
+    const controls = (_jsxs(Row, { fillWidth: true, gap: "8", horizontal: getHorizontalAlignment(controlPlacement), children: [_jsx(IconButton, { icon: "chevronLeft", "aria-label": "Previous", onClick: () => go(-step), disabled: !canGoBack, style: { border: "none" } }), _jsx(IconButton, { icon: "chevronRight", "aria-label": "Next", onClick: () => go(step), disabled: !canGoForward, style: { border: "none" } })] }));
+    const markerRow = markerSide ? (_jsx(Row, { fillWidth: true, gap: "8", horizontal: "center", vertical: "center", paddingY: "4", children: items.map((_, i) => (_jsx("button", { type: "button", className: styles.marker, "data-active": i === activeIndex ? "true" : undefined, "aria-label": `Go to item ${i + 1} of ${count}`, "aria-current": i === activeIndex ? "true" : undefined, onClick: () => goTo(i) }, i))) })) : null;
+    /**
+     * Where the track really is, between two indices, while it is being moved.
+     *
+     * The settled `index` is a whole number and would step the scaling from
+     * one tile to the next, which is the opposite of what this is for: the
+     * point is that a tile grows as you drag it towards the front rather than
+     * snapping when it arrives. `dragPx` is the live offset, so dividing it by
+     * the tile pitch gives the fraction of a step the track has travelled, and
+     * the sign is negative because dragging right shows earlier items.
+     */
+    const falloff = proximity === true ? PROXIMITY_FALLOFF : typeof proximity === "number" ? proximity : 0;
+    const scaling = falloff > 0 && tileStep > 0;
+    const front = index - (tileStep > 0 ? dragPx / tileStep : 0);
+    const offset = -(index + origin) * tileStep + dragPx;
+    return (_jsxs(Column, { ref: ref, fillWidth: true, gap: "8", "aria-roledescription": "carousel", children: [markerSide === "top" && markerRow, isTopPlacement && controls, _jsx(Flex, { ref: viewportRef, fillWidth: true, className: clip ? styles.viewportClipped : styles.viewport, "data-dragging": dragging ? "true" : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onClickCapture: onClickCapture, onKeyDown: onKeyDown, 
+                // The track is the thing you move, so it is the thing that takes
+                // focus and answers the arrow keys.
+                tabIndex: 0, role: "group", "aria-label": "Items", children: _jsx(Row, { ref: trackRef, gap: "8", className: styles.track, onTransitionEnd: handleTransitionEnd, style: {
+                        transform: `translate3d(${offset}px, 0, 0)`,
+                        // Spread rather than `transition: animated ? undefined : "none"`.
+                        // The style object is passed through before it reaches the DOM
+                        // and an `undefined` value survives that trip as the string
+                        // "undefined", which is not a valid transition and overrides the
+                        // one on the class — so the track moved instantly, no
+                        // `transitionend` ever fired, and the wrap-around never
+                        // normalised. An absent key cannot be stringified.
+                        ...(animated ? {} : { transition: "none" }),
+                    }, children: rendered.map((item, i) => {
+                        const scale = scaling
+                            ? Math.max(PROXIMITY_FLOOR, 1 - falloff * Math.abs(i - origin - front))
+                            : 1;
+                        return (_jsx(Column
+                        // Same as above, and with wrap-around the same item appears in
+                        // three copies, so its own identity would not be unique either.
+                        // biome-ignore lint/suspicious/noArrayIndexKey: no stable id exists
+                        , { className: styles.tile, 
+                            // The one sizing default that stays. A tile with no width of
+                            // its own sizes to its content, which is fine for a card of
+                            // text and collapses to nothing for anything that fills its
+                            // parent — so the out-of-the-box carousel would depend on what
+                            // was put in it. `minWidth` is a floor, not a shape: content
+                            // wider than this still sets the tile's width.
+                            minWidth: 20, "aria-hidden": infinite && (i < origin || i >= origin + count) ? "true" : undefined, ...tile, style: {
+                                ...tile.style,
+                                // Only when asked. Off, a tile carries no transform at all,
+                                // so it never becomes a containing block for whatever the
+                                // caller positioned inside it.
+                                ...(scaling
+                                    ? {
+                                        transform: `scale(${scale})`,
+                                        // Follows the pointer during a drag and eases with the
+                                        // track afterwards, the same rule the track itself
+                                        // uses — and for the same reason, spread rather than
+                                        // set to `undefined`.
+                                        ...(animated ? {} : { transition: "none" }),
+                                    }
+                                    : {}),
+                            }, children: item }, i));
+                    }) }) }), !isTopPlacement && controls, markerSide === "bottom" && markerRow] }));
 });
 ScrollContainer.displayName = "ScrollContainer";
 export { ScrollContainer };

package/dist/components/ScrollContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContainer.js","sourceRoot":"","sources":["../../src/components/ScrollContainer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollContainer.js","sourceRoot":"","sources":["../../src/components/ScrollContainer.tsx"],"names":[],"mappings":"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"}

package/dist/components/ScrollContainer.module.scss

@@ -0,0 +1,131 @@
+/*
+ * The track paints past the viewport by default.
+ *
+ * This is the point of moving a transform instead of scrolling a box: tiles
+ * either side of the ones in front stay visible, so the run reads as something
+ * continuous that has been moved along rather than a window with two hard cuts
+ * in it.
+ *
+ * `overflow: clip` with a large `overflow-clip-margin` rather than
+ * `overflow: visible`, because visible overflow is not confined to the
+ * direction it is wanted in: a track wider than the page would extend the
+ * document's scrollable area and give the whole page a horizontal scrollbar,
+ * which is a page-level bug produced by a component that cannot see the page.
+ * A clip margin is the same effect with a boundary — tiles paint well past the
+ * edges, and nothing reaches far enough to push the document out.
+ *
+ * `clip` is not `hidden`: `hidden` makes the element a scroll container, which
+ * would let a stray focus or a wheel gesture scroll the track sideways and put
+ * the transform and the scroll offset into disagreement about where the track
+ * is. `clip` cannot scroll, which is what this needs.
+ */
+.viewport {
+  overflow: clip;
+  overflow-clip-margin: 100vw;
+}
+
+/* Self-contained: nothing paints outside the component's own box. */
+.viewportClipped {
+  overflow: clip;
+}
+
+.viewport,
+.viewportClipped {
+  /*
+   * Horizontal gestures belong to the track and vertical ones to the page.
+   * Without this the browser claims the whole gesture before the pointer
+   * handler can decide, and a carousel becomes a place where the page stops
+   * scrolling.
+   */
+  touch-action: pan-y;
+  cursor: grab;
+
+  &:focus-visible {
+    outline: var(--static-space-2) solid var(--brand-border-strong);
+    outline-offset: var(--static-space-2);
+    border-radius: var(--radius-m);
+  }
+
+  &[data-dragging="true"] {
+    cursor: grabbing;
+    /* A drag across tiles selects their text otherwise, and the selection
+       highlight follows the pointer across the whole run. */
+    user-select: none;
+  }
+}
+
+.track {
+  /*
+   * `width: max-content` is what makes a transform track possible at all:
+   * the row lays out at the sum of its tiles rather than at the width of its
+   * parent, so there is something to move. Without it the tiles would be
+   * squeezed into one viewport's width and the transform would move an
+   * already-complete layout off the screen.
+   */
+  width: max-content;
+  will-change: transform;
+  transition: transform var(--transition-duration-macro-long) var(--transition-eased);
+}
+
+.tile {
+  /* A track item that can shrink is a track item that has no width of its own
+     once the row is wider than its parent. */
+  flex-shrink: 0;
+
+  /*
+   * For `proximity`. The scale itself is set per tile from the distance to the
+   * front, which only the component can know; the easing belongs here so it
+   * matches the track's, and so a tile settles into its new size on the same
+   * curve the track settles onto its new offset. During a drag the component
+   * turns this off inline and the size follows the pointer.
+   *
+   * `transform-origin: center` keeps a shrinking tile in its own slot instead
+   * of pulling away from one side of the gap.
+   */
+  transform-origin: center;
+  transition: transform var(--transition-duration-macro-long) var(--transition-eased);
+}
+
+.marker {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  width: var(--static-space-8);
+  height: var(--static-space-8);
+  border-radius: var(--radius-full);
+  background: var(--neutral-alpha-medium);
+  cursor: pointer;
+  transition:
+    background var(--transition-duration-micro-medium) var(--transition-eased),
+    width var(--transition-duration-micro-medium) var(--transition-eased);
+
+  &:hover {
+    background: var(--neutral-alpha-strong);
+  }
+
+  &:focus-visible {
+    outline: var(--static-space-2) solid var(--brand-border-strong);
+    outline-offset: var(--static-space-2);
+  }
+
+  /* The one in front is a bar rather than a brighter dot: the difference
+     survives being small, and being colour-blind. */
+  &[data-active="true"] {
+    width: var(--static-space-20);
+    background: var(--brand-solid-strong);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track {
+    transition: none;
+  }
+
+  .tile {
+    transition: none;
+  }
+
+  .marker {
+    transition: none;
+  }
+}

package/dist/components/Select.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { InputProps, OptionProps, DropdownWrapperProps } from ".";
-import { Placement } from "@floating-ui/react-dom";
+import type { Placement } from "../types";
 type SelectOptionType = Omit<OptionProps, "selected">;
 interface SelectProps extends Omit<InputProps, "onSelect" | "value">, Pick<DropdownWrapperProps, "minHeight" | "minWidth" | "maxWidth"> {
     options: SelectOptionType[];

package/dist/components/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,SAAS,EAAS,MAAM,OAAO,CAAC;AAEzF,OAAO,EAML,UAAU,EAEV,WAAW,EACX,oBAAoB,EAIrB,MAAM,GAAG,CAAC;AACX,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,KAAK,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEtD,UAAU,WACR,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC,EAC5C,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;IACnE,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoFD,QAAA,MAAM,MAAM,oFA+QX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,SAAS,EAAS,MAAM,OAAO,CAAC;AAEzF,OAAO,EAML,UAAU,EAEV,WAAW,EACX,oBAAoB,EAIrB,MAAM,GAAG,CAAC;AACX,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,KAAK,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEtD,UAAU,WACR,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC,EAC5C,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;IACnE,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoFD,QAAA,MAAM,MAAM,oFA+QX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Select.js

@@ -7,7 +7,7 @@ import inputStyles from "./Input.module.scss";
 // Inner component that uses the arrow navigation context
 const SearchInput = ({ searchInputId, searchQuery, setSearchQuery, setIsDropdownOpen, handleClearSearch, handleBlur, selectRef, }) => {
     const { handleKeyDown: navKeyDown } = useArrowNavigationContext();
-    return (_jsx(Input, { "data-scaling": "90", id: `select-search-${searchInputId}`, placeholder: "Search", height: "s", suffix: searchQuery ? (_jsx(IconButton, { tooltip: "Clear", tooltipPosition: "left", icon: "close", variant: "ghost", size: "s", onClick: handleClearSearch })) : undefined, prefix: _jsx(Icon, { name: "search", size: "xs" }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => {
+    return (_jsx(Input, { "data-scaling": "90", id: `select-search-${searchInputId}`, placeholder: "Search", size: "s", suffix: searchQuery ? (_jsx(IconButton, { tooltip: "Clear", tooltipPosition: "left", icon: "close", variant: "ghost", size: "s", onClick: handleClearSearch })) : undefined, prefix: _jsx(Icon, { name: "search", size: "xs" }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => {
             e.stopPropagation();
             e.preventDefault();
             setIsDropdownOpen(true);