@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,387 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { splitRootProps } from "../../utils/root-props.js";
+import { createStrategy, heroKeylineList, keylinesForScrollOffset, maxScrollOffset, multiBrowseKeylineList, placeItem, snapPositionOffset } from "./carousel-keylines.js";
+import { pressAreaReach } from "./carousel-press-area.js";
+import { carouselStyles } from "./carousel-styles.js";
+import { Children, isValidElement, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import { useNumberFormatter, useObjectRef } from "react-aria";
+//#region src/components/carousel/Carousel.tsx
+const DEFAULT_LABELS = {
+	slide: (position, count) => `${position} of ${count}`,
+	carousel: "carousel",
+	item: "slide"
+};
+/**
+* Variants whose items change size along keylines as they scroll. Uncontained and
+* multi-aspect items keep one size and flow past the end edge (M3: "items are a single size
+* and flow past the edge of the screen"), so they are never masked or cropped.
+*/
+const KEYLINE_VARIANTS = ["multi-browse", "hero"];
+function defaultPadding(variant) {
+	if (variant === "full-screen") return {
+		start: 0,
+		end: 0,
+		cross: 0
+	};
+	if (variant === "uncontained" || variant === "multi-aspect") return {
+		start: 16,
+		end: 0,
+		cross: 8
+	};
+	return {
+		start: 16,
+		end: 16,
+		cross: 8
+	};
+}
+const TABBABLE = "a[href],area[href],button,input,select,textarea,iframe,summary,[contenteditable],[tabindex]";
+/** The next (or previous) element in the tab order outside `container`. */
+function tabbableOutside(container, forward) {
+	const candidates = Array.from(container.ownerDocument.querySelectorAll(TABBABLE)).filter((element) => !container.contains(element) && element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest("[inert],[hidden]"));
+	const isAfter = (element) => Boolean(container.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING);
+	return forward ? candidates.find(isAfter) : candidates.filter((e) => !isAfter(e)).pop();
+}
+/**
+* M3 Expressive carousel: a scrollable row (or column) of items whose sizes follow Compose's
+* keylines as they scroll: multi-browse (large, medium and small items), uncontained,
+* multi-aspect, hero or full-screen. Give it a height (or a width, vertical) with
+* `className`. Tab or the arrow keys move between items; Up and Down (Left and Right when
+* vertical) leave the carousel. Under reduced motion every item keeps the large size.
+*
+* @example
+* <Carousel aria-label="Photos" className="h-[221px]">
+*   {photos.map((photo) => <img key={photo.id} src={photo.src} alt={photo.alt} className="size-full object-cover" />)}
+* </Carousel>
+*/
+function Carousel({ variant = "multi-browse", orientation = variant === "full-screen" ? "vertical" : "horizontal", preferredItemSize, itemSize = 240, itemSpacing = variant === "full-screen" ? 16 : 8, heroAlignment = "start", minSmallItemSize, maxSmallItemSize, contentPadding, snap = "none", onAction, disabledIndexes, labels: labelsProp, children, ref, className, style, classNames, ...rest }) {
+	const { root: data, rest: labelling } = splitRootProps(rest);
+	const { "aria-label": label, "aria-labelledby": labelledBy } = labelling;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const numbers = useNumberFormatter();
+	const items = Children.toArray(children).filter(isValidElement);
+	const count = items.length;
+	const vertical = orientation === "vertical";
+	const reduceMotion = useReducedMotion() ?? false;
+	const padding = {
+		...defaultPadding(variant),
+		...contentPadding
+	};
+	const keylined = KEYLINE_VARIANTS.includes(variant);
+	const masked = keylined && !reduceMotion;
+	const rootRef = useObjectRef(ref);
+	const scrollerRef = useRef(null);
+	const slotRefs = useRef([]);
+	const maskRefs = useRef([]);
+	const hitRefs = useRef([]);
+	const [space, setSpace] = useState(0);
+	const [crossSize, setCrossSize] = useState(0);
+	const strategy = computeStrategy();
+	function computeStrategy() {
+		if (space === 0 || count === 0 || !keylined) return null;
+		const keylines = variant === "hero" ? heroKeylineList(space, preferredItemSize, itemSpacing, count, heroAlignment === "center", minSmallItemSize, maxSmallItemSize) : multiBrowseKeylineList(space, preferredItemSize ?? 186, itemSpacing, count, minSmallItemSize, maxSmallItemSize);
+		const result = masked ? createStrategy(keylines, space, itemSpacing, padding.start, padding.end, maxSmallItemSize ?? 56) : createStrategy(keylines, space, itemSpacing);
+		return result.isValid ? result : null;
+	}
+	const update = () => {
+		const scroller = scrollerRef.current;
+		if (!scroller || !strategy || !masked) return;
+		const rtl = !vertical && getComputedStyle(scroller).direction === "rtl";
+		const scroll = Math.abs(vertical ? scroller.scrollTop : scroller.scrollLeft);
+		const max = maxScrollOffset(strategy, count);
+		const keylines = keylinesForScrollOffset(strategy, scroll, max);
+		const full = strategy.itemMainAxisSize;
+		const round = (value) => Math.round(value * 100) / 100;
+		const places = maskRefs.current.map((_, index) => placeItem(strategy, keylines, index, scroll));
+		const spans = places.map(({ size, translation }, index) => ({
+			start: index * (full + itemSpacing) + translation + (full - size) / 2 - scroll,
+			size
+		}));
+		maskRefs.current.forEach((mask, index) => {
+			if (!mask) return;
+			const { size, translation } = places[index];
+			const inset = round(Math.max(0, (full - size) / 2));
+			const move = round(rtl ? -translation : translation);
+			mask.style.translate = vertical ? `0 ${move}px` : `${move}px 0`;
+			mask.style.clipPath = vertical ? `inset(${inset}px 0 ${inset}px 0 round var(--m3-carousel-item-corner))` : `inset(0 ${inset}px 0 ${inset}px round var(--m3-carousel-item-corner))`;
+			mask.style.setProperty("--m3-carousel-item-size", `${round(size)}px`);
+			const hit = hitRefs.current[index];
+			if (!hit) return;
+			const reach = pressAreaReach(spans, index, itemSpacing, space);
+			const start = round(Math.max(0, inset - reach.start));
+			const end = round(Math.max(0, inset - reach.end));
+			hit.style.translate = mask.style.translate;
+			hit.style.clipPath = vertical ? `inset(${start}px 0 ${end}px 0)` : rtl ? `inset(0 ${start}px 0 ${end}px)` : `inset(0 ${end}px 0 ${start}px)`;
+		});
+	};
+	useLayoutEffect(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller) return;
+		const measure = () => {
+			const computed = getComputedStyle(scroller);
+			const px = (value) => Number.parseFloat(value) || 0;
+			setSpace(vertical ? scroller.clientHeight : scroller.clientWidth);
+			setCrossSize(vertical ? scroller.clientWidth - px(computed.paddingLeft) - px(computed.paddingRight) : scroller.clientHeight - px(computed.paddingTop) - px(computed.paddingBottom));
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(scroller);
+		return () => observer.disconnect();
+	}, [vertical]);
+	useLayoutEffect(() => {
+		if (!masked) [...maskRefs.current, ...hitRefs.current].forEach((layer) => {
+			layer?.style.removeProperty("translate");
+			layer?.style.removeProperty("clip-path");
+			layer?.style.removeProperty("--m3-carousel-item-size");
+		});
+		update();
+		const scroller = scrollerRef.current;
+		if (!scroller || !masked) return;
+		let frame = 0;
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(() => {
+				frame = 0;
+				update();
+			});
+		};
+		scroller.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			scroller.removeEventListener("scroll", onScroll);
+			cancelAnimationFrame(frame);
+		};
+	});
+	const drag = useRef(null);
+	const dragged = useRef(false);
+	const pointerFocus = useRef(false);
+	const onPointerDown = (event) => {
+		pointerFocus.current = true;
+		dragged.current = false;
+		if (event.pointerType !== "mouse" || event.button !== 0) return;
+		const scroller = event.currentTarget;
+		drag.current = {
+			start: vertical ? event.clientY : event.clientX,
+			scroll: vertical ? scroller.scrollTop : scroller.scrollLeft,
+			id: event.pointerId
+		};
+	};
+	const onPointerMove = (event) => {
+		const state = drag.current;
+		if (!state) return;
+		const scroller = event.currentTarget;
+		const delta = (vertical ? event.clientY : event.clientX) - state.start;
+		if (Math.abs(delta) > 3 && !scroller.hasAttribute("data-dragging")) {
+			dragged.current = true;
+			scroller.setAttribute("data-dragging", "");
+			scroller.setPointerCapture?.(state.id);
+		}
+		if (vertical) scroller.scrollTop = state.scroll - delta;
+		else scroller.scrollLeft = state.scroll - delta;
+	};
+	const endDrag = (event) => {
+		drag.current = null;
+		event.currentTarget.removeAttribute("data-dragging");
+	};
+	const reveal = (index) => {
+		const scroller = scrollerRef.current;
+		const slot = slotRefs.current[index];
+		if (!scroller || !slot) return;
+		const behavior = reduceMotion ? "instant" : "smooth";
+		if (strategy && masked) {
+			const step = strategy.itemMainAxisSize + itemSpacing;
+			const max = maxScrollOffset(strategy, count);
+			const target = Math.min(max, Math.max(0, index * step - snapPositionOffset(strategy, index, count)));
+			const rtl = !vertical && getComputedStyle(scroller).direction === "rtl";
+			scroller.scrollTo?.(vertical ? {
+				top: target,
+				behavior
+			} : {
+				left: rtl ? -target : target,
+				behavior
+			});
+		} else slot.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest",
+			behavior
+		});
+	};
+	const onSlotFocus = (index, event) => {
+		if (event.target !== event.currentTarget) return;
+		if (pointerFocus.current) return;
+		reveal(index);
+	};
+	const focusSlot = (index) => {
+		const slot = slotRefs.current[Math.max(0, Math.min(count - 1, index))];
+		if (!slot) return;
+		pointerFocus.current = true;
+		slot.focus({ preventScroll: true });
+		pointerFocus.current = false;
+		reveal(Number(slot.dataset.index));
+	};
+	const onKeyDown = (event) => {
+		pointerFocus.current = false;
+		const target = event.target;
+		const index = slotRefs.current.indexOf(target);
+		if (index < 0) return;
+		const rtl = getComputedStyle(target).direction === "rtl";
+		const [prev, next, leaveBack, leaveForward] = vertical ? [
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		] : rtl ? [
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		] : [
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		];
+		let handled = true;
+		if (event.key === next) focusSlot(index + 1);
+		else if (event.key === prev) focusSlot(index - 1);
+		else if (event.key === "Home") focusSlot(0);
+		else if (event.key === "End") focusSlot(count - 1);
+		else if (event.key === leaveForward || event.key === leaveBack) {
+			const root = rootRef.current;
+			const outside = root && tabbableOutside(root, event.key === leaveForward);
+			if (outside) outside.focus();
+			else handled = false;
+		} else handled = false;
+		if (handled) event.preventDefault();
+	};
+	const styles = carouselStyles({
+		orientation,
+		snapping: variant === "hero" || variant === "full-screen" ? "single" : variant === "multi-browse" || snap === "item" ? "many" : "none",
+		masked,
+		aspect: variant === "multi-aspect",
+		interactive: onAction !== void 0,
+		fullBleed: variant === "full-screen"
+	});
+	const fallbackSize = variant === "uncontained" ? itemSize : preferredItemSize ?? 186;
+	const slotSize = variant === "full-screen" ? space || void 0 : variant === "multi-aspect" ? void 0 : strategy?.itemMainAxisSize ?? fallbackSize;
+	const layoutPadding = masked ? {
+		start: 0,
+		end: 0
+	} : padding;
+	const total = numbers.format(count);
+	const disabled = new Set(disabledIndexes);
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		id: labelling.id,
+		ref: rootRef,
+		role: "region",
+		"aria-roledescription": labels.carousel,
+		"aria-label": label,
+		"aria-labelledby": labelledBy,
+		"data-tokens": mergeDataTokens("md-comp-carousel", data),
+		"data-variant": variant,
+		style,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: scrollerRef,
+			onPointerDownCapture: onPointerDown,
+			onPointerMoveCapture: onPointerMove,
+			onPointerUpCapture: endDrag,
+			onPointerCancelCapture: endDrag,
+			onKeyDown,
+			style: {
+				gap: itemSpacing,
+				[vertical ? "paddingInline" : "paddingBlock"]: padding.cross,
+				[vertical ? "paddingBlockStart" : "paddingInlineStart"]: layoutPadding.start,
+				[vertical ? "paddingBlockEnd" : "paddingInlineEnd"]: layoutPadding.end,
+				[vertical ? "scrollPaddingBlockStart" : "scrollPaddingInlineStart"]: layoutPadding.start,
+				[vertical ? "scrollPaddingBlockEnd" : "scrollPaddingInlineEnd"]: layoutPadding.end,
+				"--m3-carousel-cross-size": `${crossSize}px`
+			},
+			className: styles.scroller({ class: classNames?.scroller }),
+			children: items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, {
+				index,
+				label: labels.slide(numbers.format(index + 1), total),
+				roleDescription: labels.item,
+				disabled: disabled.has(index),
+				onAction: onAction && (() => {
+					if (!dragged.current) onAction(index);
+				}),
+				onFocus: (event) => onSlotFocus(index, event),
+				slotRef: (element) => {
+					slotRefs.current[index] = element;
+				},
+				maskRef: (element) => {
+					maskRefs.current[index] = element;
+				},
+				hitRef: (element) => {
+					hitRefs.current[index] = element;
+				},
+				style: {
+					...slotSize === void 0 ? {} : { [vertical ? "height" : "width"]: slotSize },
+					[vertical ? "scrollMarginBlockStart" : "scrollMarginInlineStart"]: strategy && masked ? snapPositionOffset(strategy, index, count) : 0
+				},
+				styles,
+				classNames,
+				children: item
+			}, item.key ?? index))
+		})
+	});
+}
+function CarouselItem({ index, label, roleDescription, disabled, onAction, onFocus, slotRef, maskRef, hitRef, style, styles, classNames, children }) {
+	const ref = useRef(null);
+	const interactive = onAction !== void 0;
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: disabled || !interactive,
+		onPress: onAction
+	}, ref);
+	const { "data-focus-visible": focusVisible, ...states } = dataAttributes;
+	return /* @__PURE__ */ jsxs("div", {
+		...interactionProps,
+		ref: (element) => {
+			ref.current = element;
+			slotRef(element);
+		},
+		role: "group",
+		"aria-roledescription": roleDescription,
+		"aria-label": label,
+		"aria-disabled": interactive && disabled || void 0,
+		tabIndex: 0,
+		"data-slot": "item",
+		"data-index": index,
+		"data-focus-visible": focusVisible,
+		"data-disabled": interactive && disabled || void 0,
+		onFocus: (event) => {
+			interactionProps.onFocus?.(event);
+			onFocus(event);
+		},
+		style,
+		className: styles.item({ class: classNames?.item }),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			ref: hitRef,
+			"data-slot": "hit-area",
+			className: styles.hitArea()
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: maskRef,
+			...interactive ? states : {},
+			className: styles.mask({ class: classNames?.mask }),
+			children: [children, interactive && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				...states,
+				"data-focus-visible": focusVisible,
+				className: styles.stateLayer({ class: classNames?.stateLayer })
+			})]
+		})]
+	});
+}
+//#endregion
+export { Carousel };
+
+//# sourceMappingURL=Carousel.js.map

package/dist/components/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport { useReducedMotion } from 'motion/react';\nimport {\n  Children,\n  isValidElement,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useNumberFormatter, useObjectRef } from 'react-aria';\nimport { useM3Interaction } from '../../primitives/use-m3-interaction';\nimport { cn } from '../../utils/cn';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { splitRootProps, type RootDOMProps } from '../../utils/root-props';\nimport {\n  createStrategy,\n  heroKeylineList,\n  keylinesForScrollOffset,\n  MAX_SMALL_ITEM_SIZE,\n  maxScrollOffset,\n  multiBrowseKeylineList,\n  placeItem,\n  snapPositionOffset,\n  type Strategy,\n} from './carousel-keylines';\nimport { pressAreaReach } from './carousel-press-area';\nimport { carouselStyles } from './carousel-styles';\n\nexport interface CarouselClassNames {\n  /** The outer element, which holds the carousel's name. */\n  root?: string;\n  /** The scrolling track that holds the items. */\n  scroller?: string;\n  /** Each item's slot, sized and placed on its keyline. */\n  item?: string;\n  /** The masked layer of each item (corners, clipping). */\n  mask?: string;\n  /** The state layer painted over an item that can be activated. */\n  stateLayer?: string;\n}\n\n/** Words the carousel announces. */\nexport interface CarouselLabels {\n  /**\n   * Each item's name: its position (from 1) and the number of items, as formatted text.\n   * @default (position, count) => `${position} of ${count}`\n   */\n  slide: (position: string, count: string) => string;\n  /** What the carousel is, read before its name (`aria-roledescription`). @default \"carousel\" */\n  carousel: string;\n  /** What each item is, read before its name (`aria-roledescription`). @default \"slide\" */\n  item: string;\n}\n\nconst DEFAULT_LABELS: CarouselLabels = {\n  slide: (position, count) => `${position} of ${count}`,\n  carousel: 'carousel',\n  item: 'slide',\n};\n\n/** Padding around the items, in px. `start` and `end` run along the carousel. */\nexport interface CarouselContentPadding {\n  /** Before the first item. */\n  start: number;\n  /** After the last item. */\n  end: number;\n  /** Either side across the carousel. */\n  cross: number;\n}\n\nexport type CarouselVariant =\n  'multi-browse' | 'uncontained' | 'multi-aspect' | 'hero' | 'full-screen';\n\n/** A carousel needs a name: `aria-label`, or `aria-labelledby` pointing at a visible title. */\ntype Naming =\n  | {\n      /** Accessible name when there's no visible title. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the visible title that names the carousel. */\n      'aria-labelledby': string;\n    };\n\ninterface CarouselOwnProps extends RootDOMProps {\n  /** The root element's id. */\n  id?: string;\n  /**\n   * `multi-browse` shows large, medium and small items; `uncontained` shows items of one\n   * size that flow past the end edge, never masked or resized; `multi-aspect` is uncontained with items of their own widths\n   * (9:16 to 16:9); `hero` shows one large item with small ones beside it; `full-screen`\n   * shows one edge-to-edge item at a time. @default \"multi-browse\"\n   */\n  variant?: CarouselVariant;\n  /**\n   * The direction the items scroll in.\n   * @default \"horizontal\", or \"vertical\" when full-screen\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Preferred size of the large items along the carousel (multi-browse, hero). Hero defaults\n   * to the whole carousel. @default 186\n   */\n  preferredItemSize?: number;\n  /** Size of the items along the carousel (uncontained). @default 240 */\n  itemSize?: number;\n  /** Space between items, px. @default 8, or 16 when full-screen */\n  itemSpacing?: number;\n  /** Centre the large hero item between small ones. @default \"start\" */\n  heroAlignment?: 'start' | 'center';\n  /** Minimum size of the small items. @default 40 */\n  minSmallItemSize?: number;\n  /** Maximum size of the small items. @default 56 */\n  maxSmallItemSize?: number;\n  /**\n   * Padding around the items. Items scroll over the start and end padding.\n   * @default { start: 16, end: 16, cross: 8 } (uncontained and multi-aspect: no end padding;\n   * full-screen: none)\n   */\n  contentPadding?: Partial<CarouselContentPadding>;\n  /**\n   * Snap uncontained and multi-aspect carousels to their items. Multi-browse, hero and\n   * full-screen carousels always snap. @default \"none\"\n   */\n  snap?: 'none' | 'item';\n  /**\n   * Called when an item is pressed, or activated with Enter or Space. Items then show\n   * hover, focus and pressed states.\n   */\n  onAction?: (index: number) => void;\n  /** Indexes of items that can't be activated. */\n  disabledIndexes?: readonly number[];\n  /** Words the carousel announces, for localisation. */\n  labels?: Partial<CarouselLabels>;\n  /** The items, e.g. images; each fills its slot and is clipped to its keyline. */\n  children: ReactNode;\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: CarouselClassNames;\n  /** `data-*` attributes, like the other DOM attributes, go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport type CarouselProps = CarouselOwnProps & Naming;\n\n/**\n * Variants whose items change size along keylines as they scroll. Uncontained and\n * multi-aspect items keep one size and flow past the end edge (M3: \"items are a single size\n * and flow past the edge of the screen\"), so they are never masked or cropped.\n */\nconst KEYLINE_VARIANTS: readonly CarouselVariant[] = ['multi-browse', 'hero'];\n\nfunction defaultPadding(variant: CarouselVariant): CarouselContentPadding {\n  if (variant === 'full-screen') return { start: 0, end: 0, cross: 0 };\n  if (variant === 'uncontained' || variant === 'multi-aspect')\n    return { start: 16, end: 0, cross: 8 };\n  return { start: 16, end: 16, cross: 8 };\n}\n\nconst TABBABLE =\n  'a[href],area[href],button,input,select,textarea,iframe,summary,[contenteditable],[tabindex]';\n\n/** The next (or previous) element in the tab order outside `container`. */\nfunction tabbableOutside(container: HTMLElement, forward: boolean): HTMLElement | undefined {\n  const candidates = Array.from(\n    container.ownerDocument.querySelectorAll<HTMLElement>(TABBABLE),\n  ).filter(\n    (element) =>\n      !container.contains(element) &&\n      element.tabIndex >= 0 &&\n      !element.matches(':disabled') &&\n      !element.closest('[inert],[hidden]'),\n  );\n  const isAfter = (element: HTMLElement) =>\n    Boolean(container.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING);\n  return forward ? candidates.find(isAfter) : candidates.filter((e) => !isAfter(e)).pop();\n}\n\n/**\n * M3 Expressive carousel: a scrollable row (or column) of items whose sizes follow Compose's\n * keylines as they scroll: multi-browse (large, medium and small items), uncontained,\n * multi-aspect, hero or full-screen. Give it a height (or a width, vertical) with\n * `className`. Tab or the arrow keys move between items; Up and Down (Left and Right when\n * vertical) leave the carousel. Under reduced motion every item keeps the large size.\n *\n * @example\n * <Carousel aria-label=\"Photos\" className=\"h-[221px]\">\n *   {photos.map((photo) => <img key={photo.id} src={photo.src} alt={photo.alt} className=\"size-full object-cover\" />)}\n * </Carousel>\n */\nexport function Carousel({\n  variant = 'multi-browse',\n  orientation = variant === 'full-screen' ? 'vertical' : 'horizontal',\n  preferredItemSize,\n  itemSize = 240,\n  itemSpacing = variant === 'full-screen' ? 16 : 8,\n  heroAlignment = 'start',\n  minSmallItemSize,\n  maxSmallItemSize,\n  contentPadding,\n  snap = 'none',\n  onAction,\n  disabledIndexes,\n  labels: labelsProp,\n  children,\n  ref,\n  className,\n  style,\n  classNames,\n  ...rest\n}: CarouselProps) {\n  const { root: data, rest: labelling } = splitRootProps(rest);\n  const { 'aria-label': label, 'aria-labelledby': labelledBy } = labelling as {\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n  };\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const numbers = useNumberFormatter();\n  const items = Children.toArray(children).filter(isValidElement);\n  const count = items.length;\n  const vertical = orientation === 'vertical';\n  const reduceMotion = useReducedMotion() ?? false;\n  const padding = { ...defaultPadding(variant), ...contentPadding };\n  const keylined = KEYLINE_VARIANTS.includes(variant);\n  // Under reduced motion items keep the large size, unmasked (the spec's reduced motion).\n  const masked = keylined && !reduceMotion;\n  const rootRef = useObjectRef(ref);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const slotRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const maskRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const hitRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  const [space, setSpace] = useState(0);\n  const [crossSize, setCrossSize] = useState(0);\n\n  const strategy = computeStrategy();\n  function computeStrategy(): Strategy | null {\n    if (space === 0 || count === 0 || !keylined) return null;\n    const keylines =\n      variant === 'hero'\n        ? heroKeylineList(\n            space,\n            preferredItemSize,\n            itemSpacing,\n            count,\n            heroAlignment === 'center',\n            minSmallItemSize,\n            maxSmallItemSize,\n          )\n        : multiBrowseKeylineList(\n            space,\n            preferredItemSize ?? 186,\n            itemSpacing,\n            count,\n            minSmallItemSize,\n            maxSmallItemSize,\n          );\n    const result = masked\n      ? createStrategy(\n          keylines,\n          space,\n          itemSpacing,\n          padding.start,\n          padding.end,\n          maxSmallItemSize ?? MAX_SMALL_ITEM_SIZE,\n        )\n      : createStrategy(keylines, space, itemSpacing);\n    return result.isValid ? result : null;\n  }\n\n  // Writes each item's mask and translation for the current scroll position, without\n  // re-rendering (Compose's `carouselItem` layer block).\n  const update = () => {\n    const scroller = scrollerRef.current;\n    if (!scroller || !strategy || !masked) return;\n    const rtl = !vertical && getComputedStyle(scroller).direction === 'rtl';\n    const scroll = Math.abs(vertical ? scroller.scrollTop : scroller.scrollLeft);\n    const max = maxScrollOffset(strategy, count);\n    const keylines = keylinesForScrollOffset(strategy, scroll, max);\n    const full = strategy.itemMainAxisSize;\n    const round = (value: number) => Math.round(value * 100) / 100;\n    const places = maskRefs.current.map((_, index) => placeItem(strategy, keylines, index, scroll));\n    // Each item's visible part, from the viewport's start edge (slots are `full` apart plus\n    // the spacing; the mask is centred in its slot and moved by its translation).\n    const spans = places.map(({ size, translation }, index) => ({\n      start: index * (full + itemSpacing) + translation + (full - size) / 2 - scroll,\n      size,\n    }));\n    maskRefs.current.forEach((mask, index) => {\n      if (!mask) return;\n      const { size, translation } = places[index]!;\n      const inset = round(Math.max(0, (full - size) / 2));\n      const move = round(rtl ? -translation : translation);\n      mask.style.translate = vertical ? `0 ${move}px` : `${move}px 0`;\n      mask.style.clipPath = vertical\n        ? `inset(${inset}px 0 ${inset}px 0 round var(--m3-carousel-item-corner))`\n        : `inset(0 ${inset}px 0 ${inset}px round var(--m3-carousel-item-corner))`;\n      mask.style.setProperty('--m3-carousel-item-size', `${round(size)}px`);\n      // The press area follows the mask, widened to M3's 48px touch target for a small item.\n      const hit = hitRefs.current[index];\n      if (!hit) return;\n      const reach = pressAreaReach(spans, index, itemSpacing, space);\n      const start = round(Math.max(0, inset - reach.start));\n      const end = round(Math.max(0, inset - reach.end));\n      hit.style.translate = mask.style.translate;\n      hit.style.clipPath = vertical\n        ? `inset(${start}px 0 ${end}px 0)`\n        : rtl\n          ? `inset(0 ${start}px 0 ${end}px)`\n          : `inset(0 ${end}px 0 ${start}px)`;\n    });\n  };\n\n  useLayoutEffect(() => {\n    const scroller = scrollerRef.current;\n    if (!scroller) return;\n    const measure = () => {\n      const computed = getComputedStyle(scroller);\n      const px = (value: string) => Number.parseFloat(value) || 0;\n      // The keylines span the scroller's padding box along the carousel: Compose handles\n      // the start and end padding in the keylines, not in the layout.\n      setSpace(vertical ? scroller.clientHeight : scroller.clientWidth);\n      setCrossSize(\n        vertical\n          ? scroller.clientWidth - px(computed.paddingLeft) - px(computed.paddingRight)\n          : scroller.clientHeight - px(computed.paddingTop) - px(computed.paddingBottom),\n      );\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(scroller);\n    return () => observer.disconnect();\n  }, [vertical]);\n\n  useLayoutEffect(() => {\n    // Leaving the masked layout (reduced motion) clears what `update` wrote.\n    if (!masked)\n      [...maskRefs.current, ...hitRefs.current].forEach((layer) => {\n        layer?.style.removeProperty('translate');\n        layer?.style.removeProperty('clip-path');\n        layer?.style.removeProperty('--m3-carousel-item-size');\n      });\n    update();\n    const scroller = scrollerRef.current;\n    if (!scroller || !masked) return;\n    let frame = 0;\n    const onScroll = () => {\n      if (!frame)\n        frame = requestAnimationFrame(() => {\n          frame = 0;\n          update();\n        });\n    };\n    scroller.addEventListener('scroll', onScroll, { passive: true });\n    return () => {\n      scroller.removeEventListener('scroll', onScroll);\n      cancelAnimationFrame(frame);\n    };\n  });\n\n  // Mouse drag scrolls the carousel (touch and trackpads scroll natively); snapping is\n  // paused while dragging and resumes on release. A drag never activates an item. The\n  // handlers run in the capture phase: an actionable item's press handler stops the\n  // pointer events' propagation and focuses the item on pointer down, so in the bubble\n  // phase the scroller never saw the press (the focus then read as keyboard focus and\n  // scrolled the item to its snap position, and a drag neither scrolled nor was ignored).\n  const drag = useRef<{ start: number; scroll: number; id: number } | null>(null);\n  const dragged = useRef(false);\n  const pointerFocus = useRef(false);\n  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    pointerFocus.current = true;\n    dragged.current = false;\n    if (event.pointerType !== 'mouse' || event.button !== 0) return;\n    const scroller = event.currentTarget;\n    drag.current = {\n      start: vertical ? event.clientY : event.clientX,\n      scroll: vertical ? scroller.scrollTop : scroller.scrollLeft,\n      id: event.pointerId,\n    };\n  };\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const state = drag.current;\n    if (!state) return;\n    const scroller = event.currentTarget;\n    const delta = (vertical ? event.clientY : event.clientX) - state.start;\n    if (Math.abs(delta) > 3 && !scroller.hasAttribute('data-dragging')) {\n      dragged.current = true;\n      scroller.setAttribute('data-dragging', '');\n      scroller.setPointerCapture?.(state.id);\n    }\n    if (vertical) scroller.scrollTop = state.scroll - delta;\n    else scroller.scrollLeft = state.scroll - delta;\n  };\n  const endDrag = (event: PointerEvent<HTMLDivElement>) => {\n    drag.current = null;\n    event.currentTarget.removeAttribute('data-dragging');\n  };\n\n  // Brings a focused item into view: keylined carousels scroll it to its snap position\n  // (the focal keyline); the others just far enough to show it.\n  const reveal = (index: number) => {\n    const scroller = scrollerRef.current;\n    const slot = slotRefs.current[index];\n    if (!scroller || !slot) return;\n    const behavior: ScrollBehavior = reduceMotion ? 'instant' : 'smooth';\n    if (strategy && masked) {\n      const step = strategy.itemMainAxisSize + itemSpacing;\n      const max = maxScrollOffset(strategy, count);\n      const target = Math.min(\n        max,\n        Math.max(0, index * step - snapPositionOffset(strategy, index, count)),\n      );\n      const rtl = !vertical && getComputedStyle(scroller).direction === 'rtl';\n      scroller.scrollTo?.(\n        vertical ? { top: target, behavior } : { left: rtl ? -target : target, behavior },\n      );\n    } else {\n      slot.scrollIntoView?.({ block: 'nearest', inline: 'nearest', behavior });\n    }\n  };\n\n  const onSlotFocus = (index: number, event: FocusEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return;\n    // A press focuses the item without moving the carousel.\n    if (pointerFocus.current) return;\n    reveal(index);\n  };\n\n  const focusSlot = (index: number) => {\n    const slot = slotRefs.current[Math.max(0, Math.min(count - 1, index))];\n    if (!slot) return;\n    pointerFocus.current = true;\n    slot.focus({ preventScroll: true });\n    pointerFocus.current = false;\n    reveal(Number(slot.dataset.index));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    pointerFocus.current = false;\n    const target = event.target as HTMLElement;\n    const index = slotRefs.current.indexOf(target as HTMLDivElement);\n    if (index < 0) return;\n    const rtl = getComputedStyle(target).direction === 'rtl';\n    const [prev, next, leaveBack, leaveForward] = vertical\n      ? ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n      : rtl\n        ? ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']\n        : ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];\n    let handled = true;\n    if (event.key === next) focusSlot(index + 1);\n    else if (event.key === prev) focusSlot(index - 1);\n    else if (event.key === 'Home') focusSlot(0);\n    else if (event.key === 'End') focusSlot(count - 1);\n    else if (event.key === leaveForward || event.key === leaveBack) {\n      const root = rootRef.current;\n      const outside = root && tabbableOutside(root, event.key === leaveForward);\n      if (outside) outside.focus();\n      else handled = false;\n    } else handled = false;\n    if (handled) event.preventDefault();\n  };\n\n  const snapping =\n    variant === 'hero' || variant === 'full-screen'\n      ? 'single'\n      : variant === 'multi-browse' || snap === 'item'\n        ? 'many'\n        : 'none';\n  const styles = carouselStyles({\n    orientation,\n    snapping,\n    masked,\n    aspect: variant === 'multi-aspect',\n    interactive: onAction !== undefined,\n    fullBleed: variant === 'full-screen',\n  });\n  const fallbackSize = variant === 'uncontained' ? itemSize : (preferredItemSize ?? 186);\n  const slotSize =\n    variant === 'full-screen'\n      ? space || undefined\n      : variant === 'multi-aspect'\n        ? undefined\n        : (strategy?.itemMainAxisSize ?? fallbackSize);\n  // The scroller pads the items itself only when the keylines don't.\n  const layoutPadding = masked ? { start: 0, end: 0 } : padding;\n  const total = numbers.format(count);\n  const disabled = new Set(disabledIndexes);\n\n  return (\n    <div\n      {...data}\n      id={(labelling as { id?: string }).id}\n      ref={rootRef}\n      role=\"region\"\n      aria-roledescription={labels.carousel}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      // The component token's hooks (carousel-tokens.ts), also public styling hooks for apps.\n      data-tokens={mergeDataTokens('md-comp-carousel', data)}\n      data-variant={variant}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <div\n        ref={scrollerRef}\n        onPointerDownCapture={onPointerDown}\n        onPointerMoveCapture={onPointerMove}\n        onPointerUpCapture={endDrag}\n        onPointerCancelCapture={endDrag}\n        onKeyDown={onKeyDown}\n        style={\n          {\n            gap: itemSpacing,\n            [vertical ? 'paddingInline' : 'paddingBlock']: padding.cross,\n            [vertical ? 'paddingBlockStart' : 'paddingInlineStart']: layoutPadding.start,\n            [vertical ? 'paddingBlockEnd' : 'paddingInlineEnd']: layoutPadding.end,\n            [vertical ? 'scrollPaddingBlockStart' : 'scrollPaddingInlineStart']:\n              layoutPadding.start,\n            [vertical ? 'scrollPaddingBlockEnd' : 'scrollPaddingInlineEnd']: layoutPadding.end,\n            '--m3-carousel-cross-size': `${crossSize}px`,\n          } as CSSProperties\n        }\n        className={styles.scroller({ class: classNames?.scroller })}\n      >\n        {items.map((item, index) => (\n          <CarouselItem\n            key={item.key ?? index}\n            index={index}\n            label={labels.slide(numbers.format(index + 1), total)}\n            roleDescription={labels.item}\n            disabled={disabled.has(index)}\n            onAction={\n              onAction &&\n              (() => {\n                if (!dragged.current) onAction(index);\n              })\n            }\n            onFocus={(event) => onSlotFocus(index, event)}\n            slotRef={(element) => {\n              slotRefs.current[index] = element;\n            }}\n            maskRef={(element) => {\n              maskRefs.current[index] = element;\n            }}\n            hitRef={(element) => {\n              hitRefs.current[index] = element;\n            }}\n            style={{\n              ...(slotSize === undefined ? {} : { [vertical ? 'height' : 'width']: slotSize }),\n              [vertical ? 'scrollMarginBlockStart' : 'scrollMarginInlineStart']:\n                strategy && masked ? snapPositionOffset(strategy, index, count) : 0,\n            }}\n            styles={styles}\n            classNames={classNames}\n          >\n            {item}\n          </CarouselItem>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction CarouselItem({\n  index,\n  label,\n  roleDescription,\n  disabled,\n  onAction,\n  onFocus,\n  slotRef,\n  maskRef,\n  hitRef,\n  style,\n  styles,\n  classNames,\n  children,\n}: {\n  index: number;\n  label: string;\n  roleDescription: string;\n  disabled: boolean;\n  onAction?: () => void;\n  onFocus: (event: FocusEvent<HTMLDivElement>) => void;\n  slotRef: (element: HTMLDivElement | null) => void;\n  maskRef: (element: HTMLDivElement | null) => void;\n  hitRef: (element: HTMLSpanElement | null) => void;\n  style: CSSProperties;\n  styles: ReturnType<typeof carouselStyles>;\n  classNames?: CarouselClassNames;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const interactive = onAction !== undefined;\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled || !interactive, onPress: onAction },\n    ref,\n  );\n  const { 'data-focus-visible': focusVisible, ...states } = dataAttributes;\n  return (\n    <div\n      {...interactionProps}\n      ref={(element) => {\n        ref.current = element;\n        slotRef(element);\n      }}\n      role=\"group\"\n      aria-roledescription={roleDescription}\n      aria-label={label}\n      aria-disabled={(interactive && disabled) || undefined}\n      tabIndex={0}\n      data-slot=\"item\"\n      data-index={index}\n      data-focus-visible={focusVisible}\n      data-disabled={(interactive && disabled) || undefined}\n      onFocus={(event) => {\n        interactionProps.onFocus?.(event);\n        onFocus(event);\n      }}\n      style={style}\n      className={styles.item({ class: classNames?.item })}\n    >\n      {/* Where the item takes presses: under the mask, clipped to it or a little wider. */}\n      <span aria-hidden=\"true\" ref={hitRef} data-slot=\"hit-area\" className={styles.hitArea()} />\n      <div\n        ref={maskRef}\n        {...(interactive ? states : {})}\n        className={styles.mask({ class: classNames?.mask })}\n      >\n        {children}\n        {interactive && (\n          <span\n            aria-hidden=\"true\"\n            {...states}\n            data-focus-visible={focusVisible}\n            className={styles.stateLayer({ class: classNames?.stateLayer })}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}