@thewhatmatters/wmds 0.4.6 → 0.4.7

package/CHANGELOG.md

@@ -7,6 +7,26 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.7
+
+**Carousel: a row of items with a progress scrubber.** New component, built on the open `motion` package. The WhatMatters About page is the first use. See **ADR-0043**.
+
+- **Carousel** (new) with **Carousel.Item** — a horizontal row the visitor drags, scrolls (touch, trackpad, shift-wheel), or steps through with the keyboard. A mouse drag glides on and stops softly at each end; the row does not loop. Name it with `aria-label` or `aria-labelledby` (one is required).
+  - `itemWidth` — a percentage of the row, one number or `{ base, sm, md, lg }`. Default `{ base: 80, sm: 55, lg: 40 }`, so the next item always shows. The gap is the grid gutter.
+  - `snap` (default on) rests the row on an item's leading edge. `bleed` runs it to the page edges while items start on the grid. `fade` (default on) fades clipped items the way `scroll-fade-x` does.
+  - `progress` — the scrubber under the row: `center` (default) or `start` for a shorter track (full width on phones), `full`, or `none`. The filled part's place is the row's progress and its width the share of the row in view. Drag it, or press the track. It hides itself, keeping its space, while every item fits.
+- **Decisions taken** (the request left them open): one component with the scrubber as a prop, not a separate part; the scrubber is hidden from assistive tech and is not a tab stop — the row takes Left, Right, Home, and End, and each item says its place ("2 of 4"); no previous and next buttons in this version.
+- **Also:** a drag never clicks a link inside an item, and images are not picked up by the browser's own drag. Reduced motion moves the row at once, with no glide. Right-to-left flips the direction and the arrow keys. On the server and the first paint the row is at its start with the scrubber at zero; it measures again on resize and when an image loads.
+- New **Components/Carousel → Pattern — image carousel**: rounded outlined **Card** tiles with an image in the body.
+
+### Consumer actions
+
+1. **WhatMatters site, About page: replace the hand-built image strip.** Copy **Components/Carousel → Pattern — image carousel** (`node_modules/@thewhatmatters/wmds/docs/patterns/components-carousel--image-carousel.tsx`) into `components/image-carousel.tsx`, keep its header comment, and render `<ImageCarousel label="Selected work" images={…} />` where the strip is. Delete the scroll-snap list and its classes (`scroll-fade-x`, `snap-x`, `overflow-x-auto`, the per-image **Card** markup) — the pattern has the cards.
+2. **Name the row once.** If a heading already sits over the strip, give the heading an `id` and pass `aria-labelledby` in place of `aria-label` (change the pattern's one prop). Do not also put that `aria-labelledby` on a `section` around it: two landmarks with one name fail the accessibility check.
+3. **`next/image` is fine.** To use it, swap the pattern's `<img>` for `<Image>` with the same `className`, a `width` and `height` (or `fill` inside a sized box), and `sizes="(min-width: 1024px) 40vw, (min-width: 640px) 55vw, 80vw"` to match the default `itemWidth`. Change `sizes` if you change `itemWidth`.
+4. **Page layout.** Place it on the grid like any other block: `className="col-span-full"` inside a `band`. Add `bleed` if the row should run to the page edges. The scrubber's hit area is 44px tall, so drop any margin the old strip had under it.
+5. Other apps: none. Everything here is new.
+
 ## 0.4.6
 
 **TextArea shows one focus ring.** A focused **TextArea** drew two: the ring on its shell, and the browser's own outline on the field inside it.

package/CONSUMING.md

@@ -269,6 +269,7 @@ import {
 | `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
 | `Accordion` | `variant`, `flush` (plain), `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections; **Pattern — flush** for filter groups. Closed panels leave the tab order |
 | `Breadcrumb` | `items` (`{ label, href }`, current page last), `maxItems`, `separator` (`chevron` \| `slash`), `variant` (`sans` \| `mono`), `renderLink`, `labels` | Components/Breadcrumb — **Pattern — path**, **long path**, **router links**, **editorial** |
+| `Carousel` | `aria-label` or `aria-labelledby` (required), `itemWidth` (percentage of the row: a number or `{ base, sm, md, lg }`), `snap`, `bleed`, `fade`, `progress` (`center` \| `start` \| `full` \| `none`), `labels`, `Carousel.Item` | Components/Carousel — **Pattern — image carousel**. Drag, scroll, keys, or the scrubber; no loop. Not a scroll-driven gallery (**ScrollHorizontal**) |
 | `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
 | `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
 | `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |

package/README.md

@@ -47,8 +47,8 @@ npm run validate:composition  # molecules/organisms must compose atoms (CI)
 |------|------------|
 | Atoms | `Avatar`, `Badge`, `Button`, `Checkbox`, `IconButton`, `Input`, `Kbd`, `Radio`, `RiveHand`, `Skeleton`, `Status`, `Switch`, `TextArea`, `TextLink`, `Tooltip` |
 | Molecules | `Accordion`, `CalEmbed`, `Card`, `ChatQa`, `CheckboxGroup`, `Chip`, `DisplayControls`, `Dropdown`, `Field`, `FloatingActionButton`, `HeroIntro`, `IntakeForm`, `NavList`, `PageHeader`, `PillGroup`, `PromptBar`, `RadioGroup`, `Search`, `Select`, `SelectableCard`, `SegmentedControl`, `Stat`, `StepProgress`, `TaskRows`, `TextSequence` |
-| Organisms | `Chart`, `Confetti`, `Dialog`, `FooterReveal`, `HeroTileStack`, `IntakeConfirmation`, `IntakeModal`, `MoreMenu`, `Panel`, `ScrollHorizontal`, `Sheet`, `SiteNav`, `Tab`, `Toast` |
-| Planned, not built | `Carousel`, `Pagination`, `Table` |
+| Organisms | `Carousel`, `Chart`, `Confetti`, `Dialog`, `FooterReveal`, `HeroTileStack`, `IntakeConfirmation`, `IntakeModal`, `MoreMenu`, `Panel`, `ScrollHorizontal`, `Sheet`, `SiteNav`, `Tab`, `Toast` |
+| Planned, not built | `Pagination`, `Table` |
 
 The list is `src/package.manifest.ts`. `npm run build` fails when it and `src/index.ts` disagree.
 

package/dist/components/organisms/Carousel/Carousel.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { type CarouselItemWidth, type CarouselProgressPlacement } from "./carouselStyles";
+export { carouselBreakpoints, carouselDefaultItemWidth, carouselProgressPlacements, type CarouselBreakpoint, type CarouselItemWidth, type CarouselProgressPlacement, } from "./carouselStyles";
+/** Layout-only — width, margin, or grid placement. */
+export type CarouselLayoutClassName = string;
+export interface CarouselLabels {
+    /** Names each item by its place. Default: "2 of 4". */
+    item: (position: number, count: number) => string;
+}
+/** The row is a labelled region: name it, or point at the heading that does. */
+type CarouselName = {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};
+interface CarouselBaseProps {
+    /**
+     * Item width as a percentage of the row — one number, or one per breakpoint
+     * (`{ base, sm, md, lg }`; a breakpoint left out keeps the one below it). Keep it under 100 so
+     * the next item shows. Default: `{ base: 80, sm: 55, lg: 40 }`.
+     */
+    itemWidth?: CarouselItemWidth;
+    /** Rest on an item's leading edge when a drag, a scrub, or a scroll settles. Default: `true`. */
+    snap?: boolean;
+    /** Let the row run to the page edges; items still start on the grid. Default: `false`. */
+    bleed?: boolean;
+    /** Fade items where the row clips them. Default: `true`. */
+    fade?: boolean;
+    /**
+     * The scrubber under the row: a shorter track at the `center` (default) or the `start`, the
+     * `full` row width, or `none`. It hides itself while every item fits.
+     */
+    progress?: CarouselProgressPlacement;
+    labels?: Partial<CarouselLabels>;
+    /** **Carousel.Item** children, one per item. */
+    children?: ReactNode;
+    className?: CarouselLayoutClassName;
+}
+export type CarouselProps = CarouselBaseProps & CarouselName;
+export interface CarouselItemProps {
+    /** Anything — an image tile, a card, a quote. */
+    children?: ReactNode;
+    className?: CarouselLayoutClassName;
+}
+/**
+ * A horizontal row of items the visitor drags, scrolls, or steps through with the keyboard, with
+ * a progress scrubber under it. The row is a native scroller, so touch, trackpad, and
+ * shift-wheel scrolling come from the browser; the pointer drag, the glide, and the scrubber are
+ * built on it.
+ */
+declare function CarouselRoot({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, itemWidth, snap, bleed, fade, progress, labels, children, className, }: CarouselProps): import("react").JSX.Element;
+declare function CarouselItem({ children, className }: CarouselItemProps): import("react").JSX.Element;
+export declare const Carousel: typeof CarouselRoot & {
+    Item: typeof CarouselItem;
+};
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/components/organisms/Carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,OAAO,EAeL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC/B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,GAC/B,MAAM,kBAAkB,CAAC;AAE1B,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnD;AAED,gFAAgF;AAChF,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iGAAiG;IACjG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAkED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAoC,EACpC,IAAW,EACX,KAAa,EACb,IAAW,EACX,QAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BA0Yf;AAOD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAO/D;AAED,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/organisms/Carousel/Carousel.js

@@ -0,0 +1,310 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t } from "../../../lib/motion.js";
+import { carouselClamp as n, carouselMaxScroll as r, carouselNearestSnap as i, carouselOverflows as a, carouselOverscrollOffset as o, carouselProgress as s, carouselProgressAtPointer as c, carouselSnapPoints as l, carouselStep as u, carouselThumbShare as d } from "./carouselMath.js";
+import { carouselBreakpoints as f, carouselDefaultItemWidth as p, carouselExtentClasses as m, carouselFrameClasses as h, carouselItemClasses as g, carouselProgressClasses as ee, carouselProgressPlacementClasses as te, carouselProgressPlacements as _, carouselProgressThumbClasses as ne, carouselProgressTrackClasses as re, carouselRootClasses as ie, carouselTrackClasses as ae, carouselViewportClasses as oe } from "./carouselStyles.js";
+import { Children as se, createContext as v, isValidElement as ce, useCallback as y, useContext as b, useEffect as le, useLayoutEffect as ue, useMemo as x, useRef as S, useState as de } from "react";
+import { jsx as C, jsxs as fe } from "react/jsx-runtime";
+import { animate as pe, motion as me, useMotionValue as he, useMotionValueEvent as ge, useReducedMotion as _e, useTransform as ve } from "motion/react";
+//#region src/components/organisms/Carousel/Carousel.tsx
+var w = v(null), ye = { item: (e, t) => `${e} of ${t}` }, be = 10;
+function T(e, t) {
+	try {
+		e.setPointerCapture(t);
+	} catch {}
+}
+function xe(e) {
+	if (typeof e == "number") return {
+		base: e,
+		sm: e,
+		md: e,
+		lg: e
+	};
+	let t = e.base ?? p.base, n = e.sm ?? t, r = e.md ?? n;
+	return {
+		base: t,
+		sm: n,
+		md: r,
+		lg: e.lg ?? r
+	};
+}
+function E(e, t, n) {
+	n ? e.style.removeProperty(t) : e.style.setProperty(t, "0px");
+}
+function D({ "aria-label": f, "aria-labelledby": g, itemWidth: _ = p, snap: v = !0, bleed: b = !1, fade: x = !0, progress: w = "center", labels: D, children: O, className: k }) {
+	let A = _e() ?? !1, j = S(null), M = S(null), N = S(null), P = S(null), F = S(null), I = S({
+		max: 0,
+		points: [0],
+		direction: 1
+	}), L = S(null), R = S(null), z = S(null), B = S(null), V = S(!1), [H, Ce] = de(null), U = he(0), W = he(0), we = ve(W, (e) => -I.current.direction * o(e)), G = y(() => Math.abs(M.current?.scrollLeft ?? 0), []), K = y(() => {
+		let e = j.current, t = M.current;
+		if (!e || !t) return;
+		let { max: n } = I.current, r = Math.abs(t.scrollLeft);
+		e.style.setProperty("--carousel-progress", String(s(r, n))), E(t, "--scroll-fade-s", r > 1), E(t, "--scroll-fade-e", r < n - 1);
+	}, []), Te = y((e) => {
+		let t = M.current;
+		t && (t.scrollLeft = I.current.direction * e, K());
+	}, [K]);
+	ge(U, "change", (e) => {
+		let t = n(e, 0, I.current.max);
+		Te(t), W.set(A ? 0 : e - t);
+	});
+	function q(e) {
+		let t = M.current;
+		t && (e ? t.dataset.moving = "" : delete t.dataset.moving);
+	}
+	function J() {
+		L.current?.stop(), L.current = null, R.current = null;
+	}
+	function Y() {
+		L.current = null, R.current = null, q(!1);
+	}
+	function Ee() {
+		L.current != null && (J(), U.jump(G()), q(!1));
+	}
+	function X(e, r = !0) {
+		let i = n(e, 0, I.current.max);
+		if (J(), U.jump(G()), A || !r) {
+			q(!1), U.jump(i);
+			return;
+		}
+		R.current = i, q(!0), L.current = pe(U, i, {
+			...t("medium"),
+			onComplete: Y
+		});
+	}
+	function De(e) {
+		let { max: t, points: r } = I.current, a = (e) => i(r, n(e, 0, t));
+		if (J(), A) {
+			X(v ? a(U.get()) : U.get(), !1);
+			return;
+		}
+		let o = U.get(), s = v ? a(o) : n(o, 0, t);
+		if (e === 0 && s === o) {
+			Y();
+			return;
+		}
+		q(!0), L.current = pe(U, s === o ? o + Math.sign(e) : s, {
+			type: "inertia",
+			velocity: e,
+			min: 0,
+			max: t,
+			modifyTarget: v ? a : void 0,
+			onComplete: Y
+		});
+	}
+	let Z = y(() => {
+		let e = j.current, t = M.current, n = N.current;
+		if (!e || !t || !n || W.get() !== 0) return;
+		if (b) {
+			let t = e.getBoundingClientRect(), n = Math.max(0, Math.floor(t.left)), r = Math.max(0, Math.floor(document.documentElement.clientWidth - t.right));
+			e.style.setProperty("--carousel-bleed-left", `${n}px`), e.style.setProperty("--carousel-bleed-right", `${r}px`);
+		} else e.style.removeProperty("--carousel-bleed-left"), e.style.removeProperty("--carousel-bleed-right");
+		let i = getComputedStyle(t).direction === "rtl" ? -1 : 1, o = t.clientWidth, s = t.scrollWidth, c = r(o, s), u = Array.from(n.querySelectorAll(":scope > [data-carousel-item]")), f = u[0]?.getBoundingClientRect(), p = f == null ? [] : u.map((e) => {
+			let t = e.getBoundingClientRect();
+			return i === 1 ? t.left - f.left : f.right - t.right;
+		});
+		I.current = {
+			max: c,
+			direction: i,
+			points: l(p, c)
+		};
+		let m = P.current;
+		m && e.style.setProperty("--carousel-thumb", String(d(o, s, m.clientWidth))), K();
+		let h = a(o, s);
+		Ce((e) => e === h ? e : h);
+	}, [
+		b,
+		W,
+		K
+	]);
+	ue(() => {
+		if (Z(), window.addEventListener("resize", Z), typeof ResizeObserver > "u") return () => window.removeEventListener("resize", Z);
+		let e = new ResizeObserver(Z);
+		for (let t of [
+			j.current,
+			M.current,
+			N.current,
+			P.current
+		]) t && e.observe(t);
+		return () => {
+			e.disconnect(), window.removeEventListener("resize", Z);
+		};
+	}, [Z, w]), le(() => () => L.current?.stop(), []);
+	function Oe(e) {
+		if (e.pointerType !== "mouse" || e.button !== 0 || I.current.max <= 0) return;
+		let t = L.current != null;
+		J(), U.jump(G()), z.current = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startPosition: G(),
+			active: !1,
+			interrupted: t
+		};
+	}
+	function ke(e) {
+		let t = z.current;
+		if (!(!t || t.pointerId !== e.pointerId)) {
+			if (e.buttons === 0) {
+				Q(e);
+				return;
+			}
+			if (!t.active) {
+				if (Math.abs(e.clientX - t.startX) < 4) return;
+				t.active = !0, t.startX = e.clientX, T(e.currentTarget, e.pointerId), e.currentTarget.dataset.dragging = "", q(!0);
+			}
+			U.set(t.startPosition - I.current.direction * (e.clientX - t.startX));
+		}
+	}
+	function Q(e) {
+		let t = z.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		if (z.current = null, !t.active) {
+			t.interrupted && De(0);
+			return;
+		}
+		let n = e.currentTarget;
+		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.dragging, V.current = !0, window.setTimeout(() => {
+			V.current = !1;
+		}, 0), De(e.type === "pointercancel" ? 0 : U.getVelocity());
+	}
+	function Ae(e) {
+		V.current && (V.current = !1, e.preventDefault(), e.stopPropagation());
+	}
+	function je(e) {
+		if (e.target !== e.currentTarget || e.altKey || e.ctrlKey || e.metaKey) return;
+		let { max: t, points: n, direction: r } = I.current, i = R.current ?? G(), a;
+		switch (e.key) {
+			case "ArrowRight":
+				a = u(n, i, r);
+				break;
+			case "ArrowLeft":
+				a = u(n, i, r === 1 ? -1 : 1);
+				break;
+			case "Home":
+				a = 0;
+				break;
+			case "End":
+				a = t;
+				break;
+			default: return;
+		}
+		e.preventDefault(), X(a);
+	}
+	function Me(e) {
+		let t = P.current, n = F.current, { max: r, points: a, direction: o } = I.current;
+		if (!t || !n || r <= 0 || e.button !== 0) return;
+		e.preventDefault();
+		let l = t.getBoundingClientRect(), u = n.getBoundingClientRect();
+		if (e.clientX >= u.left - be && e.clientX <= u.right + be) {
+			J(), U.jump(G()), q(!0), T(e.currentTarget, e.pointerId), e.currentTarget.dataset.scrubbing = "", B.current = {
+				pointerId: e.pointerId,
+				startX: e.clientX,
+				startProgress: s(G(), r),
+				travel: l.width - u.width
+			};
+			return;
+		}
+		let d = o === 1 ? e.clientX - l.left : l.right - e.clientX, f = c(d, l.width, u.width) * r;
+		X(v ? i(a, f) : f);
+	}
+	function Ne(e) {
+		let t = B.current;
+		if (!t || t.pointerId !== e.pointerId || t.travel <= 0) return;
+		let { max: r, direction: i } = I.current, a = i * (e.clientX - t.startX) / t.travel;
+		U.set(n(t.startProgress + a, 0, 1) * r);
+	}
+	function Pe(e) {
+		let t = B.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		B.current = null;
+		let n = e.currentTarget;
+		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.scrubbing, v ? X(i(I.current.points, G())) : q(!1);
+	}
+	let $ = xe(_), Fe = {
+		"--carousel-item": String($.base),
+		"--carousel-item-sm": String($.sm),
+		"--carousel-item-md": String($.md),
+		"--carousel-item-lg": String($.lg)
+	}, Ie = D?.item ?? ye.item, Le = se.toArray(O), Re = H == null ? void 0 : String(H);
+	return /* @__PURE__ */ fe("div", {
+		ref: j,
+		className: e(ie, k),
+		style: Fe,
+		"data-carousel": "",
+		children: [/* @__PURE__ */ C("div", {
+			className: h,
+			children: /* @__PURE__ */ C("div", {
+				ref: M,
+				role: "region",
+				"aria-label": f,
+				"aria-labelledby": g,
+				tabIndex: H === !1 ? void 0 : 0,
+				"data-carousel-viewport": "",
+				"data-overflowing": Re,
+				className: e(oe, v && "snap-x snap-mandatory data-[moving]:snap-none", x && "scroll-fade-x"),
+				style: { "--scroll-fade-s": "0px" },
+				onScroll: K,
+				onKeyDown: je,
+				onPointerDown: Oe,
+				onPointerMove: ke,
+				onPointerUp: Q,
+				onPointerCancel: Q,
+				onClickCapture: Ae,
+				onDragStart: (e) => e.preventDefault(),
+				onWheel: Ee,
+				onTouchStart: Ee,
+				children: /* @__PURE__ */ C("div", {
+					className: m,
+					children: /* @__PURE__ */ C(me.div, {
+						ref: N,
+						className: ae,
+						style: { x: we },
+						children: Le.map((e, t) => /* @__PURE__ */ C(Se, {
+							label: Ie(t + 1, Le.length),
+							children: e
+						}, ce(e) && e.key != null ? e.key : t))
+					})
+				})
+			})
+		}), w === "none" ? null : /* @__PURE__ */ C("div", {
+			"aria-hidden": "true",
+			"data-carousel-progress": "",
+			"data-overflowing": Re,
+			className: e(ee, te[w]),
+			onPointerDown: Me,
+			onPointerMove: Ne,
+			onPointerUp: Pe,
+			onPointerCancel: Pe,
+			children: /* @__PURE__ */ C("div", {
+				ref: P,
+				className: re,
+				children: /* @__PURE__ */ C("div", {
+					ref: F,
+					className: ne,
+					"data-carousel-progress-thumb": ""
+				})
+			})
+		})]
+	});
+}
+function Se({ label: e, children: t }) {
+	let n = x(() => ({ label: e }), [e]);
+	return /* @__PURE__ */ C(w.Provider, {
+		value: n,
+		children: t
+	});
+}
+function O({ children: t, className: n }) {
+	let r = b(w);
+	return /* @__PURE__ */ C("div", {
+		role: "group",
+		"aria-label": r?.label,
+		"data-carousel-item": "",
+		className: e(g, n),
+		children: t
+	});
+}
+var k = Object.assign(D, { Item: O });
+//#endregion
+export { k as Carousel, f as carouselBreakpoints, p as carouselDefaultItemWidth, _ as carouselProgressPlacements };

package/dist/components/organisms/Carousel/carouselMath.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Carousel geometry — positions are logical: `0` is the row's start and the value grows toward
+ * its end, in px, in both writing directions. The component maps them to `scrollLeft`.
+ */
+/** Share of an overscroll the row follows before it springs back. */
+export declare const carouselOverscrollElasticity = 0.5;
+/** Pointer travel, in px, before a press on the row becomes a drag. */
+export declare const carouselDragThreshold = 4;
+/** The filled part of the scrubber never gets narrower than this, in px. */
+export declare const carouselThumbMinWidth = 24;
+export declare function carouselClamp(value: number, min: number, max: number): number;
+/** How far the row can scroll. `0` when every item fits. */
+export declare function carouselMaxScroll(viewWidth: number, contentWidth: number): number;
+/** True when the row has more than it can show. */
+export declare function carouselOverflows(viewWidth: number, contentWidth: number): boolean;
+/**
+ * Where the row rests: each item's leading edge, capped at the end of the row. Items that
+ * share a resting place (those past the last full view) collapse into one point.
+ */
+export declare function carouselSnapPoints(itemOffsets: readonly number[], maxScroll: number): number[];
+/** The resting place closest to `position`. */
+export declare function carouselNearestSnap(points: readonly number[], position: number): number;
+/** One item toward the end (`1`) or the start (`-1`) from `position`; stays put at either end. */
+export declare function carouselStep(points: readonly number[], position: number, direction: 1 | -1): number;
+/** Row progress, 0–1. */
+export declare function carouselProgress(position: number, maxScroll: number): number;
+/**
+ * Width of the scrubber's filled part as a share of its track (0–1): the share of the row in
+ * view, held to `carouselThumbMinWidth` so it stays easy to grab.
+ */
+export declare function carouselThumbShare(viewWidth: number, contentWidth: number, trackWidth: number): number;
+/**
+ * Row progress for a press on the scrubber's track at `pointer` px from the track's start: the
+ * filled part centers on the pointer.
+ */
+export declare function carouselProgressAtPointer(pointer: number, trackWidth: number, thumbWidth: number): number;
+/** How far the row shifts for an overscroll of `overshoot` px. */
+export declare function carouselOverscrollOffset(overshoot: number): number;
+//# sourceMappingURL=carouselMath.d.ts.map

package/dist/components/organisms/Carousel/carouselMath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carouselMath.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/carouselMath.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,qEAAqE;AACrE,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,uEAAuE;AACvE,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,4EAA4E;AAC5E,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE7E;AAED,4DAA4D;AAC5D,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAEjF;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,OAAO,CAElF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAS9F;AAED,+CAA+C;AAC/C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMvF;AAED,kGAAkG;AAClG,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAQnG;AAED,yBAAyB;AACzB,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAItG;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAIzG;AAED,kEAAkE;AAClE,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAElE"}

package/dist/components/organisms/Carousel/carouselMath.js

@@ -0,0 +1,47 @@
+"use client";
+//#region src/components/organisms/Carousel/carouselMath.ts
+var e = .5;
+function t(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function n(e, t) {
+	return Math.max(0, t - e);
+}
+function r(e, t) {
+	return n(e, t) > 1;
+}
+function i(e, n) {
+	let r = [];
+	for (let i of [...e].sort((e, t) => e - t)) {
+		let e = t(i, 0, n), a = r[r.length - 1];
+		(a === void 0 || e - a > 1) && r.push(e);
+	}
+	return r.length === 0 ? [0] : r;
+}
+function a(e, t) {
+	let n = e[0] ?? 0;
+	for (let r of e) Math.abs(r - t) < Math.abs(n - t) && (n = r);
+	return n;
+}
+function o(e, t, n) {
+	if (n === 1) return e.find((e) => e > t + 1) ?? e[e.length - 1] ?? 0;
+	for (let n = e.length - 1; n >= 0; --n) if (e[n] < t - 1) return e[n];
+	return e[0] ?? 0;
+}
+function s(e, n) {
+	return n <= 0 ? 0 : t(e / n, 0, 1);
+}
+function c(e, n, r) {
+	if (n <= 0 || r <= 0) return 1;
+	let i = t(e / n, 0, 1);
+	return t(Math.max(i, 24 / r), 0, 1);
+}
+function l(e, n, r) {
+	let i = n - r;
+	return i <= 0 ? 0 : t((e - r / 2) / i, 0, 1);
+}
+function u(t) {
+	return t * e;
+}
+//#endregion
+export { t as carouselClamp, n as carouselMaxScroll, a as carouselNearestSnap, r as carouselOverflows, e as carouselOverscrollElasticity, u as carouselOverscrollOffset, s as carouselProgress, l as carouselProgressAtPointer, i as carouselSnapPoints, o as carouselStep, c as carouselThumbShare };

package/dist/components/organisms/Carousel/carouselStyles.d.ts

@@ -0,0 +1,49 @@
+export declare const carouselProgressPlacements: readonly ["center", "start", "full", "none"];
+/**
+ * Where the scrubber sits under the row: a shorter track at the `center` (default) or the
+ * `start`, the `full` row width, or `none`. The shorter tracks are full width on phones.
+ */
+export type CarouselProgressPlacement = (typeof carouselProgressPlacements)[number];
+export declare const carouselBreakpoints: readonly ["base", "sm", "md", "lg"];
+export type CarouselBreakpoint = (typeof carouselBreakpoints)[number];
+/** Item width as a percentage of the row, per breakpoint. A breakpoint left out keeps the one below it. */
+export type CarouselItemWidth = number | Partial<Record<CarouselBreakpoint, number>>;
+/** About one item on phones, two from `sm`, two and a half from `lg` — the next one always shows. */
+export declare const carouselDefaultItemWidth: {
+    readonly base: 80;
+    readonly sm: 55;
+    readonly lg: 40;
+};
+/** The root is the size container the item widths are a share of. */
+export declare const carouselRootClasses = "@container/carousel flex w-full min-w-0 flex-col";
+/**
+ * Holds the row and draws its focus ring — the row itself is masked by the edge fade, which would
+ * cut a ring off. With `bleed` it reaches past the root to the page edges.
+ */
+export declare const carouselFrameClasses: string;
+/**
+ * The scroller. Its own scrollbar is hidden — the scrubber stands in for it. The block padding
+ * (taken back by the margins) leaves room for an item's shadow, which the scroller would clip.
+ */
+export declare const carouselViewportClasses: string;
+/** Rest on item edges — off while the pointer or an animation is moving the row. */
+export declare const carouselViewportSnapClasses = "snap-x snap-mandatory data-[moving]:snap-none";
+export declare const carouselViewportFadeClasses = "scroll-fade-x";
+/**
+ * As wide as the items, plus the bleed on either side. It stays put while the track inside it
+ * shifts on an overscroll, so the scroll width does not change under the pointer.
+ */
+export declare const carouselExtentClasses = "w-max min-w-full pl-[var(--carousel-bleed-left,0px)] pr-[var(--carousel-bleed-right,0px)]";
+/** Items in a row on the page grid's gutter. Images and links inside are not picked up by a drag. */
+export declare const carouselTrackClasses: string;
+export declare const carouselItemClasses: string;
+/**
+ * The scrubber's hit area: 44px tall around a slim track. It keeps its place when every item
+ * fits, so the page under it does not move when the row starts to overflow.
+ */
+export declare const carouselProgressClasses = "group/carousel-progress relative flex h-11 w-full cursor-pointer touch-none select-none items-center data-[overflowing=false]:invisible";
+export declare const carouselProgressPlacementClasses: Record<Exclude<CarouselProgressPlacement, "none">, string>;
+export declare const carouselProgressTrackClasses: string;
+/** The filled part: its width is the share of the row in view, its place the row's progress. */
+export declare const carouselProgressThumbClasses: string;
+//# sourceMappingURL=carouselStyles.d.ts.map

package/dist/components/organisms/Carousel/carouselStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carouselStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/carouselStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,8CAA+C,CAAC;AAEvF;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpF,eAAO,MAAM,mBAAmB,qCAAsC,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,2GAA2G;AAC3G,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;AAErF,qGAAqG;AACrG,eAAO,MAAM,wBAAwB;;;;CAAoE,CAAC;AAE1G,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,qDAAqD,CAAC;AAEtF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAMhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAKnC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,2BAA2B,kDAAkD,CAAC;AAE3F,eAAO,MAAM,2BAA2B,kBAAkB,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8FAC2D,CAAC;AAE9F,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,4IACuG,CAAC;AAE5I,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,OAAO,CAAC,yBAAyB,EAAE,MAAM,CAAC,EAAE,MAAM,CAIvG,CAAC;AAEF,eAAO,MAAM,4BAA4B,QAIxC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,4BAA4B,QAMxC,CAAC"}

package/dist/components/organisms/Carousel/carouselStyles.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { focusRingTransitionClasses as t, motionTransition as n } from "../../../lib/motion.js";
+//#region src/components/organisms/Carousel/carouselStyles.ts
+var r = [
+	"center",
+	"start",
+	"full",
+	"none"
+], i = [
+	"base",
+	"sm",
+	"md",
+	"lg"
+], a = {
+	base: 80,
+	sm: 55,
+	lg: 40
+}, o = "@container/carousel flex w-full min-w-0 flex-col", s = e("relative rounded-[var(--radius-card-shell)]", "ml-[calc(var(--carousel-bleed-left,0px)*-1)] mr-[calc(var(--carousel-bleed-right,0px)*-1)]", "has-[>[data-carousel-viewport]:focus-visible]:ring-2 has-[>[data-carousel-viewport]:focus-visible]:ring-focus-ring", "has-[>[data-carousel-viewport]:focus-visible]:ring-offset-2 has-[>[data-carousel-viewport]:focus-visible]:ring-offset-body", t), c = e("-mt-2 -mb-6 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-2 pb-6 outline-none", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", "scroll-pl-[var(--carousel-bleed-left,0px)] scroll-pr-[var(--carousel-bleed-right,0px)]", "data-[overflowing=true]:cursor-grab data-[dragging]:cursor-grabbing data-[dragging]:select-none"), l = "snap-x snap-mandatory data-[moving]:snap-none", u = "scroll-fade-x", d = "w-max min-w-full pl-[var(--carousel-bleed-left,0px)] pr-[var(--carousel-bleed-right,0px)]", f = e("flex w-max min-w-full gap-[var(--grid-column-gap,1.5rem)]", "[&_a]:[-webkit-user-drag:none] [&_img]:[-webkit-user-drag:none]"), p = e("min-w-0 shrink-0 grow-0 snap-start", "basis-[calc(var(--carousel-item)*1cqw)] sm:basis-[calc(var(--carousel-item-sm)*1cqw)]", "md:basis-[calc(var(--carousel-item-md)*1cqw)] lg:basis-[calc(var(--carousel-item-lg)*1cqw)]"), m = "group/carousel-progress relative flex h-11 w-full cursor-pointer touch-none select-none items-center data-[overflowing=false]:invisible", h = {
+	center: "self-center sm:w-60",
+	start: "self-start sm:w-60",
+	full: ""
+}, g = e("relative h-1 w-full rounded-full bg-neutral transition-[height]", "group-data-[scrubbing]/carousel-progress:h-1.5", n("fast")), _ = e("absolute inset-y-0 w-[calc(var(--carousel-thumb,0)*100%)] cursor-grab rounded-full bg-muted", "start-[calc(var(--carousel-progress,0)*(1_-_var(--carousel-thumb,0))*100%)]", "transition-colors group-hover/carousel-progress:bg-fg", "group-data-[scrubbing]/carousel-progress:cursor-grabbing group-data-[scrubbing]/carousel-progress:bg-fg", n("fast"));
+//#endregion
+export { i as carouselBreakpoints, a as carouselDefaultItemWidth, d as carouselExtentClasses, s as carouselFrameClasses, p as carouselItemClasses, m as carouselProgressClasses, h as carouselProgressPlacementClasses, r as carouselProgressPlacements, _ as carouselProgressThumbClasses, g as carouselProgressTrackClasses, o as carouselRootClasses, f as carouselTrackClasses, c as carouselViewportClasses, u as carouselViewportFadeClasses, l as carouselViewportSnapClasses };

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { Stat, statGroupColumns, statGroupGridClasses, statSizes, statTrendDirec
 export { StepProgress, isStepProgressSegmentFilled, stepProgressLabel, type StepProgressLayoutClassName, type StepProgressProps, } from "./components/molecules/StepProgress/StepProgress";
 export { TaskRows, taskRowStatuses, taskRowsDetailLayouts, taskRowsDetailVariants, taskRowsVariants, type TaskRowStatus, type TaskRowsDetailLayout, type TaskRowsDetailProps, type TaskRowsDetailVariant, type TaskRowsItemProps, type TaskRowsLabels, type TaskRowsLayoutClassName, type TaskRowsProps, type TaskRowsVariant, } from "./components/molecules/TaskRows/TaskRows";
 export { TextSequence, sequencePlainText, textSequenceDefaultDelay, textSequenceDefaultStagger, textSequenceEmphases, textSequenceShapeTones, textSequenceShapeVariants, textSequenceTriggers, type TextSequenceEmphasis, type TextSequenceLayoutClassName, type TextSequenceProps, type TextSequenceShapeLayoutClassName, type TextSequenceShapeProps, type TextSequenceShapeTone, type TextSequenceShapeVariant, type TextSequenceTrigger, } from "./components/molecules/TextSequence/TextSequence";
+export { Carousel, carouselBreakpoints, carouselDefaultItemWidth, carouselProgressPlacements, type CarouselBreakpoint, type CarouselItemProps, type CarouselItemWidth, type CarouselLabels, type CarouselLayoutClassName, type CarouselProgressPlacement, type CarouselProps, } from "./components/organisms/Carousel/Carousel";
 export { Chart, ChartCartesian, ChartCartesianNoData, ChartDistributionStrip, ChartHeatmap, ChartLoading, ChartLegend, ChartRankedBars, ChartTooltipContent, ChartUnitGrid, chartCartesianDefinedSegments, chartCartesianGapBands, chartCartesianGapRuns, chartCartesianHasPlottableValues, chartCartesianNoDataLabelDefault, chartFormatPercent, isChartCartesianNumber, isChartCartesianSeriesDefined, resolveChartCartesianGapKeys, resolveChartCartesianNoData, chartKpiHeroRowClasses, chartKpiHeroValueClasses, chartKpiTrendLabelClasses, chartKpiTrendRowClasses, chartKpiTrendValueClasses, chartMaxTicksForWidth, chartSegmentBarWidth, chartSegmentFillVariants, chartSegmentPresets, chartSegmentTickSpec, resolveCapacityBarLayout, resolveSegmentBarConfig, type ChartLayoutClassName, type ChartDistributionItem, type ChartDistributionReference, type ChartDistributionStripLayoutClassName, type ChartDistributionStripProps, type ChartHeatmapAxisItem, type ChartHeatmapCell, type ChartHeatmapLayoutClassName, type ChartHeatmapProps, type ChartRankedBarItem, type ChartRankedBarsAnimate, type ChartRankedBarsLayoutClassName, type ChartRankedBarsProps, type ChartSegmentFillVariant, type ChartSegmentPreset, type ChartSegmentedBarProps, type ChartTone, type ChartUnitGridLayoutClassName, type ChartUnitGridPart, type ChartUnitGridProps, } from "./components/organisms/Chart/Chart";
 export { ChatDock, ChatDockGate, chatDockDefaultLabels, chatDockFollowUpsPlacements, chatDockGateDefaultLabels, chatDockPlacements, type ChatDockFeedback, type ChatDockFollowUpsPlacement, type ChatDockGateLabels, type ChatDockGateProps, type ChatDockLabels, type ChatDockLayoutClassName, type ChatDockMessage, type ChatDockMessageMeta, type ChatDockPlacement, type ChatDockProps, type ChatDockSuggestion, } from "./components/organisms/ChatDock/ChatDock";
 export { ConfettiProvider, confettiDefaultColors, confettiDefaults, useConfetti, useConfettiOnMount, type ConfettiFireOptions, type ConfettiOrigin, type ConfettiProviderProps, } from "./components/organisms/Confetti/Confetti";