@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/sheet/sheet-tokens.js

@@ -0,0 +1,115 @@
+import { color, corner, defineComponentTokens, elevation } from "../../tokens/component.js";
+//#region src/components/sheet/sheet-tokens.ts
+const paintsContainer = { property: "background-color" };
+const paintsElevation = { property: "box-shadow" };
+/** The tokens of {@link BottomSheet}: `--md-comp-sheet-bottom-docked-[<variant>-]<part>`. */
+const bottomSheetTokenSet = defineComponentTokens({
+	name: "md-comp-sheet-bottom-docked",
+	tokens: {
+		"container-color": {
+			value: color("surface-container-low"),
+			description: "The sheet.",
+			compose: "SheetBottomTokens.DockedContainerColor",
+			paints: paintsContainer
+		},
+		"container-shape": {
+			value: corner("extra-large"),
+			description: "The sheet's top corners.",
+			compose: "SheetBottomTokens.DockedContainerShape",
+			paints: { property: "border-top-left-radius" }
+		},
+		"drag-handle-color": {
+			value: color("on-surface-variant"),
+			description: "The drag handle.",
+			compose: "SheetBottomTokens.DockedDragHandleColor",
+			paints: {
+				property: "background-color",
+				slot: "drag-handle"
+			}
+		}
+	},
+	scopes: { variant: {
+		modal: {
+			prefix: "md-comp-sheet-bottom-docked-modal",
+			tokens: { "container-elevation": {
+				value: elevation(1),
+				description: "The shadow of a modal sheet.",
+				compose: "SheetBottomTokens.DockedModalContainerElevation",
+				paints: paintsElevation
+			} }
+		},
+		standard: {
+			prefix: "md-comp-sheet-bottom-docked-standard",
+			tokens: { "container-elevation": {
+				value: elevation(1),
+				description: "The shadow of a standard sheet.",
+				compose: "SheetBottomTokens.DockedStandardContainerElevation",
+				paints: paintsElevation
+			} }
+		}
+	} }
+});
+/**
+* The tokens of {@link SideSheet}: `--md-comp-sheet-side-docked-<variant>-<part>`, and
+* `--md-comp-sheet-side-detached-container-shape` for a detached sheet.
+*/
+const sideSheetTokenSet = defineComponentTokens({
+	name: "md-comp-sheet-side",
+	tokens: {},
+	scopes: {
+		variant: {
+			modal: {
+				prefix: "md-comp-sheet-side-docked-modal",
+				tokens: {
+					"container-color": {
+						value: color("surface-container-low"),
+						description: "A modal sheet.",
+						compose: "m3_comp_sheet_side_docked_modal_container_color",
+						paints: paintsContainer
+					},
+					"container-elevation": {
+						value: elevation(1),
+						description: "The shadow of a modal sheet.",
+						compose: "m3_comp_sheet_side_docked_modal_container_elevation",
+						paints: paintsElevation
+					},
+					"container-shape": {
+						value: corner("large"),
+						description: "A docked modal sheet's corners on its free edge.",
+						compose: "m3_comp_sheet_side_docked_modal_container_shape",
+						paints: { property: "border-top-left-radius" }
+					}
+				}
+			},
+			standard: {
+				prefix: "md-comp-sheet-side-docked-standard",
+				tokens: { "container-color": {
+					value: color("surface"),
+					description: "A standard sheet, beside the content.",
+					compose: "m3_comp_sheet_side_docked_standard_container_color",
+					paints: {
+						property: "background-color",
+						slot: "panel"
+					}
+				} },
+				fixed: {
+					"container-elevation": elevation(0),
+					"container-shape": "0px"
+				}
+			}
+		},
+		detached: { true: {
+			prefix: "md-comp-sheet-side-detached",
+			tokens: { "container-shape": {
+				value: corner("large"),
+				description: "A detached sheet's corners, all round.",
+				compose: "m3_comp_sheet_side_detached_container_shape",
+				paints: { property: "border-top-left-radius" }
+			} }
+		} }
+	}
+});
+//#endregion
+export { bottomSheetTokenSet, sideSheetTokenSet };
+
+//# sourceMappingURL=sheet-tokens.js.map

package/dist/components/sheet/sheet-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-tokens.js","names":[],"sources":["../../../src/components/sheet/sheet-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, elevation } from '../../tokens/component';\n\n/*\n * The sheets' component tokens, M3's `md.comp.sheet.bottom.*` and `md.comp.sheet.side.*`\n * names (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * SheetBottomTokens defaults and Material Components Android's `m3_comp_sheet_side_*` values\n * (side sheets aren't in Compose). Each sheet's root carries its set's `data-tokens` and\n * `data-variant` (and a detached side sheet `data-detached`), and `sheet-styles.ts` reads one\n * private variable per part. No scrim token: M3 has none, so scrims stay on\n * `--md-sys-color-scrim`. Sizes, margins and dividers stay classes.\n */\n\nconst paintsContainer = { property: 'background-color' } as const;\nconst paintsElevation = { property: 'box-shadow' } as const;\n\n/** The tokens of {@link BottomSheet}: `--md-comp-sheet-bottom-docked-[<variant>-]<part>`. */\nexport const bottomSheetTokenSet = defineComponentTokens({\n  name: 'md-comp-sheet-bottom-docked',\n  tokens: {\n    'container-color': {\n      value: color('surface-container-low'),\n      description: 'The sheet.',\n      compose: 'SheetBottomTokens.DockedContainerColor',\n      paints: paintsContainer,\n    },\n    'container-shape': {\n      value: corner('extra-large'),\n      description: \"The sheet's top corners.\",\n      compose: 'SheetBottomTokens.DockedContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n    'drag-handle-color': {\n      value: color('on-surface-variant'),\n      description: 'The drag handle.',\n      compose: 'SheetBottomTokens.DockedDragHandleColor',\n      paints: { property: 'background-color', slot: 'drag-handle' },\n    },\n  },\n  scopes: {\n    variant: {\n      modal: {\n        prefix: 'md-comp-sheet-bottom-docked-modal',\n        tokens: {\n          'container-elevation': {\n            value: elevation(1),\n            description: 'The shadow of a modal sheet.',\n            compose: 'SheetBottomTokens.DockedModalContainerElevation',\n            paints: paintsElevation,\n          },\n        },\n      },\n      standard: {\n        prefix: 'md-comp-sheet-bottom-docked-standard',\n        tokens: {\n          'container-elevation': {\n            value: elevation(1),\n            description: 'The shadow of a standard sheet.',\n            compose: 'SheetBottomTokens.DockedStandardContainerElevation',\n            paints: paintsElevation,\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The tokens of {@link SideSheet}: `--md-comp-sheet-side-docked-<variant>-<part>`, and\n * `--md-comp-sheet-side-detached-container-shape` for a detached sheet.\n */\nexport const sideSheetTokenSet = defineComponentTokens({\n  name: 'md-comp-sheet-side',\n  tokens: {},\n  scopes: {\n    variant: {\n      modal: {\n        prefix: 'md-comp-sheet-side-docked-modal',\n        tokens: {\n          'container-color': {\n            value: color('surface-container-low'),\n            description: 'A modal sheet.',\n            compose: 'm3_comp_sheet_side_docked_modal_container_color',\n            paints: paintsContainer,\n          },\n          'container-elevation': {\n            value: elevation(1),\n            description: 'The shadow of a modal sheet.',\n            compose: 'm3_comp_sheet_side_docked_modal_container_elevation',\n            paints: paintsElevation,\n          },\n          'container-shape': {\n            value: corner('large'),\n            description: \"A docked modal sheet's corners on its free edge.\",\n            compose: 'm3_comp_sheet_side_docked_modal_container_shape',\n            paints: { property: 'border-top-left-radius' },\n          },\n        },\n      },\n      standard: {\n        prefix: 'md-comp-sheet-side-docked-standard',\n        tokens: {\n          'container-color': {\n            value: color('surface'),\n            description: 'A standard sheet, beside the content.',\n            compose: 'm3_comp_sheet_side_docked_standard_container_color',\n            paints: { property: 'background-color', slot: 'panel' },\n          },\n        },\n        fixed: { 'container-elevation': elevation(0), 'container-shape': '0px' },\n      },\n    },\n    // After `variant`, so a detached sheet's corners win over the docked ones.\n    detached: {\n      true: {\n        prefix: 'md-comp-sheet-side-detached',\n        tokens: {\n          'container-shape': {\n            value: corner('large'),\n            description: \"A detached sheet's corners, all round.\",\n            compose: 'm3_comp_sheet_side_detached_container_shape',\n            paints: { property: 'border-top-left-radius' },\n          },\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;AAYA,MAAM,kBAAkB,EAAE,UAAU,mBAAmB;AACvD,MAAM,kBAAkB,EAAE,UAAU,aAAa;;AAGjD,MAAa,sBAAsB,sBAAsB;CACvD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,uBAAuB;GACpC,aAAa;GACb,SAAS;GACT,QAAQ;EACV;EACA,mBAAmB;GACjB,OAAO,OAAO,aAAa;GAC3B,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,yBAAyB;EAC/C;EACA,qBAAqB;GACnB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAc;EAC9D;CACF;CACA,QAAQ,EACN,SAAS;EACP,OAAO;GACL,QAAQ;GACR,QAAQ,EACN,uBAAuB;IACrB,OAAO,UAAU,CAAC;IAClB,aAAa;IACb,SAAS;IACT,QAAQ;GACV,EACF;EACF;EACA,UAAU;GACR,QAAQ;GACR,QAAQ,EACN,uBAAuB;IACrB,OAAO,UAAU,CAAC;IAClB,aAAa;IACb,SAAS;IACT,QAAQ;GACV,EACF;EACF;CACF,EACF;AACF,CAAC;;;;;AAMD,MAAa,oBAAoB,sBAAsB;CACrD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ;EACN,SAAS;GACP,OAAO;IACL,QAAQ;IACR,QAAQ;KACN,mBAAmB;MACjB,OAAO,MAAM,uBAAuB;MACpC,aAAa;MACb,SAAS;MACT,QAAQ;KACV;KACA,uBAAuB;MACrB,OAAO,UAAU,CAAC;MAClB,aAAa;MACb,SAAS;MACT,QAAQ;KACV;KACA,mBAAmB;MACjB,OAAO,OAAO,OAAO;MACrB,aAAa;MACb,SAAS;MACT,QAAQ,EAAE,UAAU,yBAAyB;KAC/C;IACF;GACF;GACA,UAAU;IACR,QAAQ;IACR,QAAQ,EACN,mBAAmB;KACjB,OAAO,MAAM,SAAS;KACtB,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;KAAQ;IACxD,EACF;IACA,OAAO;KAAE,uBAAuB,UAAU,CAAC;KAAG,mBAAmB;IAAM;GACzE;EACF;EAEA,UAAU,EACR,MAAM;GACJ,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO,OAAO,OAAO;IACrB,aAAa;IACb,SAAS;IACT,QAAQ,EAAE,UAAU,yBAAyB;GAC/C,EACF;EACF,EACF;CACF;AACF,CAAC"}

package/dist/components/sheet/side-swipe-gesture.js

@@ -0,0 +1,22 @@
+//#region src/components/sheet/side-swipe-gesture.ts
+/**
+* Decides what a touch on a modal side sheet does, from how far it has moved (`dx`, `dy`,
+* px; `dx` positive rightwards), the sheet's `edge` and the layout `direction`. Until it
+* moves past {@link DRAG_SLOP} it is undecided; then a move more vertical than sideways is
+* the browser's (`scroll`: the content scrolls natively), a sideways move toward the sheet's
+* edge drags the sheet, and one away from it is ignored. The end edge is the right in LTR
+* and the left in RTL. Callers keep the first decision until the pointer lifts.
+*/
+function sideSwipeGesture(dx, dy, edge, direction) {
+	if (Math.max(Math.abs(dx), Math.abs(dy)) <= 4) return "undecided";
+	if (Math.abs(dy) > Math.abs(dx)) return "scroll";
+	return Math.sign(dx) === edgeSign(edge, direction) ? "drag" : "ignore";
+}
+/** The physical sign (+1 right, -1 left) of the way toward a side sheet's `edge`. */
+function edgeSign(edge, direction) {
+	return edge === "end" === (direction === "ltr") ? 1 : -1;
+}
+//#endregion
+export { edgeSign, sideSwipeGesture };
+
+//# sourceMappingURL=side-swipe-gesture.js.map

package/dist/components/sheet/side-swipe-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-swipe-gesture.js","names":[],"sources":["../../../src/components/sheet/side-swipe-gesture.ts"],"sourcesContent":["import { DRAG_SLOP } from './sheet-gesture';\n\n/** What a touch on a modal side sheet does once it moves. */\nexport type SwipeGesture = 'undecided' | 'drag' | 'scroll' | 'ignore';\n\n/**\n * Decides what a touch on a modal side sheet does, from how far it has moved (`dx`, `dy`,\n * px; `dx` positive rightwards), the sheet's `edge` and the layout `direction`. Until it\n * moves past {@link DRAG_SLOP} it is undecided; then a move more vertical than sideways is\n * the browser's (`scroll`: the content scrolls natively), a sideways move toward the sheet's\n * edge drags the sheet, and one away from it is ignored. The end edge is the right in LTR\n * and the left in RTL. Callers keep the first decision until the pointer lifts.\n */\nexport function sideSwipeGesture(\n  dx: number,\n  dy: number,\n  edge: 'start' | 'end',\n  direction: 'ltr' | 'rtl',\n): SwipeGesture {\n  if (Math.max(Math.abs(dx), Math.abs(dy)) <= DRAG_SLOP) return 'undecided';\n  if (Math.abs(dy) > Math.abs(dx)) return 'scroll';\n  return Math.sign(dx) === edgeSign(edge, direction) ? 'drag' : 'ignore';\n}\n\n/** The physical sign (+1 right, -1 left) of the way toward a side sheet's `edge`. */\nexport function edgeSign(edge: 'start' | 'end', direction: 'ltr' | 'rtl'): 1 | -1 {\n  return (edge === 'end') === (direction === 'ltr') ? 1 : -1;\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,iBACd,IACA,IACA,MACA,WACc;CACd,IAAI,KAAK,IAAI,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,KAAA,GAAgB,OAAO;CAC9D,IAAI,KAAK,IAAI,EAAE,IAAI,KAAK,IAAI,EAAE,GAAG,OAAO;CACxC,OAAO,KAAK,KAAK,EAAE,MAAM,SAAS,MAAM,SAAS,IAAI,SAAS;AAChE;;AAGA,SAAgB,SAAS,MAAuB,WAAkC;CAChF,OAAQ,SAAS,WAAY,cAAc,SAAS,IAAI;AAC1D"}

package/dist/components/sheet/use-peek-inert.js

@@ -0,0 +1,32 @@
+"use client";
+import { useLayoutEffect } from "react";
+//#region src/components/sheet/use-peek-inert.ts
+/**
+* Makes the parts of a collapsed standard bottom sheet that lie below its peek `inert`, so
+* Tab and screen readers reach only what's on screen (WCAG 2.4.11 Focus Not Obscured). The
+* content's top-level children are measured against the panel's top: one that doesn't fit
+* entirely within `peekHeight` is inert until the sheet expands. With the default 56px peek
+* that's all the content, leaving the drag handle, which expands the sheet; a taller peek
+* keeps a summary row that fits in it reachable. `collapsed` comes from the panel's
+* `data-detent`. If focus is in a part that becomes inert (Escape collapsed the sheet),
+* it moves to `fallback` (the handle, or the panel) instead of falling to the page.
+*/
+function usePeekInert(panelRef, contentRef, collapsed, peekHeight, fallback) {
+	useLayoutEffect(() => {
+		const panel = panelRef.current;
+		const content = contentRef.current;
+		if (!collapsed || !panel || !content) return;
+		const top = panel.getBoundingClientRect().top;
+		const active = panel.ownerDocument.activeElement;
+		const hidden = [...content.children].filter((child) => !child.hasAttribute("inert") && child.getBoundingClientRect().bottom - top > peekHeight + .5);
+		for (const child of hidden) child.setAttribute("inert", "");
+		if (active && hidden.some((child) => child.contains(active))) fallback()?.focus();
+		return () => {
+			for (const child of hidden) child.removeAttribute("inert");
+		};
+	});
+}
+//#endregion
+export { usePeekInert };
+
+//# sourceMappingURL=use-peek-inert.js.map

package/dist/components/sheet/use-peek-inert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-peek-inert.js","names":[],"sources":["../../../src/components/sheet/use-peek-inert.ts"],"sourcesContent":["'use client';\n\nimport { useLayoutEffect, type RefObject } from 'react';\n\n/**\n * Makes the parts of a collapsed standard bottom sheet that lie below its peek `inert`, so\n * Tab and screen readers reach only what's on screen (WCAG 2.4.11 Focus Not Obscured). The\n * content's top-level children are measured against the panel's top: one that doesn't fit\n * entirely within `peekHeight` is inert until the sheet expands. With the default 56px peek\n * that's all the content, leaving the drag handle, which expands the sheet; a taller peek\n * keeps a summary row that fits in it reachable. `collapsed` comes from the panel's\n * `data-detent`. If focus is in a part that becomes inert (Escape collapsed the sheet),\n * it moves to `fallback` (the handle, or the panel) instead of falling to the page.\n */\nexport function usePeekInert(\n  panelRef: RefObject<HTMLElement | null>,\n  contentRef: RefObject<HTMLElement | null>,\n  collapsed: boolean,\n  peekHeight: number,\n  fallback: () => HTMLElement | null,\n) {\n  useLayoutEffect(() => {\n    const panel = panelRef.current;\n    const content = contentRef.current;\n    if (!collapsed || !panel || !content) return;\n    const top = panel.getBoundingClientRect().top;\n    const active = panel.ownerDocument.activeElement;\n    // Children the consumer made inert themselves are left alone.\n    const hidden = [...content.children].filter(\n      (child) =>\n        !child.hasAttribute('inert') &&\n        child.getBoundingClientRect().bottom - top > peekHeight + 0.5,\n    );\n    for (const child of hidden) child.setAttribute('inert', '');\n    if (active && hidden.some((child) => child.contains(active))) fallback()?.focus();\n    return () => {\n      for (const child of hidden) child.removeAttribute('inert');\n    };\n  });\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,aACd,UACA,YACA,WACA,YACA,UACA;CACA,sBAAsB;EACpB,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS;EACtC,MAAM,MAAM,MAAM,sBAAsB,CAAC,CAAC;EAC1C,MAAM,SAAS,MAAM,cAAc;EAEnC,MAAM,SAAS,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,QAClC,UACC,CAAC,MAAM,aAAa,OAAO,KAC3B,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,aAAa,EAC9D;EACA,KAAK,MAAM,SAAS,QAAQ,MAAM,aAAa,SAAS,EAAE;EAC1D,IAAI,UAAU,OAAO,MAAM,UAAU,MAAM,SAAS,MAAM,CAAC,GAAG,SAAS,CAAC,EAAE,MAAM;EAChF,aAAa;GACX,KAAK,MAAM,SAAS,QAAQ,MAAM,gBAAgB,OAAO;EAC3D;CACF,CAAC;AACH"}

package/dist/components/sheet/use-side-swipe.js

@@ -0,0 +1,174 @@
+"use client";
+import { useThemeScope } from "../../theme/context.js";
+import { ownsGesture } from "./sheet-gesture.js";
+import { EXIT_DISTANCE, releaseMotion, releaseVelocity, settleTarget } from "./sheet-settle.js";
+import { edgeSign, sideSwipeGesture } from "./side-swipe-gesture.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/sheet/use-side-swipe.ts
+/** The share of the sheet's width a slow swipe must pass to close it (Compose's rail). */
+const POSITIONAL_SHARE = .5;
+/**
+* Swipe to dismiss for a modal side sheet (touch and pen only; a mouse drag selects text).
+* A touch on the panel is decided past the 4px slop (`sideSwipeGesture`): a vertical move is
+* left to the browser, which scrolls the content; a sideways move away from the edge is
+* ignored; one toward it drags the sheet, unless the content under it owns that drag (a
+* field, a horizontal slider, a scroller that can still scroll that way). The sheet follows
+* the finger with no transition, clamped at its open position, and on release settles as
+* Compose's anchored drag does: a fling over 125px/s toward the edge or a drag past half its
+* width closes it, anything else springs back, both continuing at the release speed. A
+* close the app refuses (a controlled `open` left `true`) springs back too.
+*
+* Returns the panel's capture-phase pointer handlers, and the moving layer's attributes.
+*/
+function useSideSwipe({ enabled, edge, isOpen, close, panelRef, motionRef, contentRef }) {
+	const { motion: scheme } = useThemeScope();
+	const [offset, setOffset] = useState(0);
+	const [sign, setSign] = useState(1);
+	const [dragging, setDragging] = useState(false);
+	const [settleMotion, setSettleMotion] = useState(null);
+	const [closing, setClosing] = useState(false);
+	const pointer = useRef({
+		pending: false,
+		gesture: "undecided",
+		id: 0,
+		x: 0,
+		y: 0,
+		sign: 1,
+		direction: "ltr",
+		width: 0,
+		offset: 0,
+		target: null,
+		root: null,
+		samples: []
+	});
+	if (closing && isOpen) {
+		setClosing(false);
+		setSettleMotion(null);
+		setOffset(0);
+	}
+	useEffect(() => {
+		const panel = panelRef.current;
+		if (!panel || !enabled) return;
+		const onTouchMove = (event) => {
+			const current = pointer.current;
+			if (current.pending && current.gesture === "drag" && event.cancelable) event.preventDefault();
+		};
+		panel.addEventListener("touchmove", onTouchMove, { passive: false });
+		return () => panel.removeEventListener("touchmove", onTouchMove);
+	}, [enabled, panelRef]);
+	const settle = (velocity) => {
+		const current = pointer.current;
+		const { width } = current;
+		const target = settleTarget([0, width], 0, current.offset, velocity, width * POSITIONAL_SHARE);
+		const closes = width > 0 && target >= width - .5;
+		const end = closes ? width * EXIT_DISTANCE : 0;
+		setDragging(false);
+		setSettleMotion(releaseMotion(scheme, closes, velocity, end - current.offset));
+		if (closes) {
+			setClosing(true);
+			close();
+		} else setOffset(0);
+	};
+	const reset = () => {
+		pointer.current.pending = false;
+		setDragging(false);
+		setSettleMotion(null);
+		setOffset(0);
+	};
+	return {
+		panelHandlers: {
+			onPointerDownCapture: (event) => {
+				const panel = panelRef.current;
+				const target = event.target;
+				if (!enabled || event.button !== 0 || event.pointerType === "mouse") return;
+				if (!panel?.contains(target)) return;
+				const content = contentRef.current;
+				const root = content?.contains(target) ? content : panel;
+				if (ownsGesture(target, root, "x")) return;
+				const direction = getComputedStyle(panel).direction === "rtl" ? "rtl" : "ltr";
+				setSettleMotion(null);
+				pointer.current = {
+					pending: true,
+					gesture: "undecided",
+					id: event.pointerId,
+					x: event.clientX,
+					y: event.clientY,
+					sign: edgeSign(edge, direction),
+					direction,
+					width: motionRef.current?.offsetWidth ?? 0,
+					offset: 0,
+					target,
+					root,
+					samples: [{
+						position: 0,
+						time: event.timeStamp
+					}]
+				};
+			},
+			onPointerMoveCapture: (event) => {
+				const current = pointer.current;
+				if (!current.pending || event.pointerId !== current.id) return;
+				const dx = event.clientX - current.x;
+				if (current.gesture === "undecided") {
+					let gesture = sideSwipeGesture(dx, event.clientY - current.y, edge, current.direction);
+					if (gesture === "undecided") return;
+					if (gesture === "drag" && current.target && current.root) {
+						if (ownsGesture(current.target, current.root, "x", dx)) gesture = "ignore";
+					}
+					current.gesture = gesture;
+					if (gesture !== "drag") {
+						current.pending = false;
+						return;
+					}
+					panelRef.current?.setPointerCapture?.(current.id);
+					setSign(current.sign);
+					setDragging(true);
+				}
+				const travelled = dx * current.sign;
+				current.samples = [...current.samples, {
+					position: travelled,
+					time: event.timeStamp
+				}];
+				current.offset = Math.min(current.width, Math.max(0, travelled));
+				setOffset(current.offset);
+			},
+			onPointerUpCapture: (event) => {
+				const current = pointer.current;
+				if (!current.pending || event.pointerId !== current.id) return;
+				current.pending = false;
+				if (current.gesture !== "drag") return;
+				const travelled = (event.clientX - current.x) * current.sign;
+				current.offset = Math.min(current.width, Math.max(0, travelled));
+				settle(releaseVelocity([...current.samples, {
+					position: travelled,
+					time: event.timeStamp
+				}]));
+			},
+			onPointerCancelCapture: (event) => {
+				const current = pointer.current;
+				if (!current.pending || event.pointerId !== current.id) return;
+				if (current.gesture === "drag") reset();
+				else current.pending = false;
+			}
+		},
+		motionProps: {
+			"data-dragging": dragging || void 0,
+			"data-settling": settleMotion ? "" : void 0,
+			style: {
+				"--m3-side-sheet-offset": `${offset * sign}px`,
+				...settleMotion && {
+					transitionDuration: `${settleMotion.duration}ms`,
+					transitionTimingFunction: settleMotion.easing
+				}
+			},
+			onTransitionEnd: (event) => {
+				if (event.target === event.currentTarget && event.propertyName === "translate") setSettleMotion(null);
+			}
+		},
+		dragging
+	};
+}
+//#endregion
+export { useSideSwipe };
+
+//# sourceMappingURL=use-side-swipe.js.map

package/dist/components/sheet/use-side-swipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-side-swipe.js","names":[],"sources":["../../../src/components/sheet/use-side-swipe.ts"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type PointerEvent,\n  type RefObject,\n  type TransitionEvent,\n} from 'react';\nimport { useThemeScope } from '../../theme/context';\nimport { ownsGesture } from './sheet-gesture';\nimport {\n  EXIT_DISTANCE,\n  releaseMotion,\n  releaseVelocity,\n  settleTarget,\n  type DragSample,\n  type ReleaseMotion,\n} from './sheet-settle';\nimport { edgeSign, sideSwipeGesture, type SwipeGesture } from './side-swipe-gesture';\n\ninterface SideSwipeOptions {\n  /** Whether a swipe may close the sheet (`swipeable`, and `closedBy` isn't `none`). */\n  enabled: boolean;\n  edge: 'start' | 'end';\n  /** Whether the sheet is open; a close the app refuses leaves it `true`. */\n  isOpen: boolean;\n  close: () => void;\n  /** The panel, which takes the pointer once a swipe drags it. */\n  panelRef: RefObject<HTMLElement | null>;\n  /** The layer that moves, whose width is the distance to closed. */\n  motionRef: RefObject<HTMLElement | null>;\n  /** The scrolling content, whose own `touch-action` isn't the content's. */\n  contentRef: RefObject<HTMLElement | null>;\n}\n\n/** The share of the sheet's width a slow swipe must pass to close it (Compose's rail). */\nconst POSITIONAL_SHARE = 0.5;\n\n/**\n * Swipe to dismiss for a modal side sheet (touch and pen only; a mouse drag selects text).\n * A touch on the panel is decided past the 4px slop (`sideSwipeGesture`): a vertical move is\n * left to the browser, which scrolls the content; a sideways move away from the edge is\n * ignored; one toward it drags the sheet, unless the content under it owns that drag (a\n * field, a horizontal slider, a scroller that can still scroll that way). The sheet follows\n * the finger with no transition, clamped at its open position, and on release settles as\n * Compose's anchored drag does: a fling over 125px/s toward the edge or a drag past half its\n * width closes it, anything else springs back, both continuing at the release speed. A\n * close the app refuses (a controlled `open` left `true`) springs back too.\n *\n * Returns the panel's capture-phase pointer handlers, and the moving layer's attributes.\n */\nexport function useSideSwipe({\n  enabled,\n  edge,\n  isOpen,\n  close,\n  panelRef,\n  motionRef,\n  contentRef,\n}: SideSwipeOptions) {\n  const { motion: scheme } = useThemeScope();\n  // How far the sheet has moved toward its edge (px, 0 = open) and that way's physical sign.\n  const [offset, setOffset] = useState(0);\n  const [sign, setSign] = useState<1 | -1>(1);\n  const [dragging, setDragging] = useState(false);\n  // A settle continues at the release speed: a spring with that velocity as a `linear()`\n  // easing and duration, on the moving layer until its move ends (as the bottom sheet's).\n  const [settleMotion, setSettleMotion] = useState<ReleaseMotion | null>(null);\n  // A swipe asked to close; if the sheet is still open after that render, the app refused.\n  const [closing, setClosing] = useState(false);\n  const pointer = useRef({\n    pending: false,\n    gesture: 'undecided' as SwipeGesture,\n    id: 0,\n    x: 0,\n    y: 0,\n    sign: 1 as 1 | -1,\n    direction: 'ltr' as 'ltr' | 'rtl',\n    width: 0,\n    offset: 0,\n    target: null as Element | null,\n    root: null as Element | null,\n    samples: [] as DragSample[],\n  });\n\n  if (closing && isOpen) {\n    // Refused (adjusted while rendering, before it paints): back to the open position on the\n    // default spatial spring (instant under reduced motion), from where the swipe let go.\n    setClosing(false);\n    setSettleMotion(null);\n    setOffset(0);\n  }\n\n  // Browsers that ignore `touch-action: pan-y` for a gesture already moving (and scrollers\n  // inside, which give panning back to their content) are stopped from panning once the\n  // swipe drags the sheet.\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (!panel || !enabled) return;\n    const onTouchMove = (event: TouchEvent) => {\n      const current = pointer.current;\n      if (current.pending && current.gesture === 'drag' && event.cancelable) event.preventDefault();\n    };\n    panel.addEventListener('touchmove', onTouchMove, { passive: false });\n    return () => panel.removeEventListener('touchmove', onTouchMove);\n  }, [enabled, panelRef]);\n\n  const settle = (velocity: number) => {\n    const current = pointer.current;\n    const { width } = current;\n    const target = settleTarget([0, width], 0, current.offset, velocity, width * POSITIONAL_SHARE);\n    const closes = width > 0 && target >= width - 0.5;\n    const end = closes ? width * EXIT_DISTANCE : 0;\n    setDragging(false);\n    setSettleMotion(releaseMotion(scheme, closes, velocity, end - current.offset));\n    if (closes) {\n      // The offset stays: the exit leaves from it (and, under reduced motion, fades there).\n      setClosing(true);\n      close();\n    } else {\n      setOffset(0);\n    }\n  };\n\n  const reset = () => {\n    pointer.current.pending = false;\n    setDragging(false);\n    setSettleMotion(null);\n    setOffset(0);\n  };\n\n  const panelHandlers = {\n    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => {\n      const panel = panelRef.current;\n      const target = event.target as Element;\n      if (!enabled || event.button !== 0 || event.pointerType === 'mouse') return;\n      if (!panel?.contains(target)) return;\n      // The content scrolls and sets its own `touch-action`, so it's the root of a touch on it.\n      const content = contentRef.current;\n      const root = content?.contains(target) ? content : panel;\n      if (ownsGesture(target, root, 'x')) return;\n      const direction = getComputedStyle(panel).direction === 'rtl' ? 'rtl' : 'ltr';\n      setSettleMotion(null);\n      pointer.current = {\n        pending: true,\n        gesture: 'undecided',\n        id: event.pointerId,\n        x: event.clientX,\n        y: event.clientY,\n        sign: edgeSign(edge, direction),\n        direction,\n        width: motionRef.current?.offsetWidth ?? 0,\n        offset: 0,\n        target,\n        root,\n        samples: [{ position: 0, time: event.timeStamp }],\n      };\n    },\n    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {\n      const current = pointer.current;\n      if (!current.pending || event.pointerId !== current.id) return;\n      const dx = event.clientX - current.x;\n      if (current.gesture === 'undecided') {\n        let gesture = sideSwipeGesture(dx, event.clientY - current.y, edge, current.direction);\n        if (gesture === 'undecided') return;\n        if (gesture === 'drag' && current.target && current.root) {\n          if (ownsGesture(current.target, current.root, 'x', dx)) gesture = 'ignore';\n        }\n        current.gesture = gesture;\n        if (gesture !== 'drag') {\n          current.pending = false;\n          return;\n        }\n        // Taking the pointer cancels the press underneath, so a swipe that starts on a\n        // button never activates it.\n        panelRef.current?.setPointerCapture?.(current.id);\n        setSign(current.sign);\n        setDragging(true);\n      }\n      const travelled = dx * current.sign;\n      current.samples = [...current.samples, { position: travelled, time: event.timeStamp }];\n      current.offset = Math.min(current.width, Math.max(0, travelled));\n      setOffset(current.offset);\n    },\n    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => {\n      const current = pointer.current;\n      if (!current.pending || event.pointerId !== current.id) return;\n      current.pending = false;\n      if (current.gesture !== 'drag') return;\n      const travelled = (event.clientX - current.x) * current.sign;\n      current.offset = Math.min(current.width, Math.max(0, travelled));\n      settle(releaseVelocity([...current.samples, { position: travelled, time: event.timeStamp }]));\n    },\n    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => {\n      const current = pointer.current;\n      if (!current.pending || event.pointerId !== current.id) return;\n      if (current.gesture === 'drag') reset();\n      else current.pending = false;\n    },\n  };\n\n  const motionProps = {\n    'data-dragging': dragging || undefined,\n    'data-settling': settleMotion ? '' : undefined,\n    style: {\n      '--m3-side-sheet-offset': `${offset * sign}px`,\n      ...(settleMotion && {\n        transitionDuration: `${settleMotion.duration}ms`,\n        transitionTimingFunction: settleMotion.easing,\n      }),\n    } as CSSProperties,\n    onTransitionEnd: (event: TransitionEvent<HTMLElement>) => {\n      if (event.target === event.currentTarget && event.propertyName === 'translate')\n        setSettleMotion(null);\n    },\n  };\n\n  return { panelHandlers, motionProps, dragging };\n}\n"],"mappings":"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"}

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,129 @@
+import { RootDOMProps } from "../../utils/root-props.js";
+import { SliderOrientation, SliderSize } from "./slider-styles.js";
+import { CSSProperties, ReactNode, Ref } from "react";
+//#region src/components/slider/Slider.d.ts
+export interface SliderClassNames {
+  /** The outer element. */
+  root?: string;
+  /** The track, holding the active and inactive segments and the stop indicators. */
+  track?: string;
+  /** Each active track segment (the filled part, from the start or the centre). */
+  activeTrack?: string;
+  /** Each inactive track segment. */
+  inactiveTrack?: string;
+  /** The stop indicators: at the track's ends, and at every step with `ticks`. */
+  stop?: string;
+  /** The inset icons (`leadingIcon`, `trailingIcon`). */
+  icon?: string;
+  /** Each thumb, the pressable area around its handle. */
+  thumb?: string;
+  /** The handle bar drawn inside each thumb. */
+  handle?: string;
+  /** The value indicator above a thumb (`valueLabel`). */
+  label?: string;
+}
+/** A slider needs a name: `aria-label`, or `aria-labelledby` pointing at a visible label. */
+type Naming = {
+  /** Accessible name when there's no visible label. */
+  'aria-label': string;
+} | {
+  /** The id of the visible label that names the slider. */
+  'aria-labelledby': string;
+};
+interface SliderCommonProps extends RootDOMProps {
+  /** The track's thickness, from XS (a 16px track) to XL. @default "xs" */
+  size?: SliderSize;
+  /**
+   * The direction the slider runs. Vertical sliders run bottom to top and default to 240px
+   * tall. @default "horizontal"
+   */
+  orientation?: SliderOrientation;
+  /** The lowest value. @default 0 */
+  min?: number;
+  /** The highest value. @default 100 */
+  max?: number;
+  /** The amount the value changes by in one step. @default 1 */
+  step?: number;
+  /** Discrete: show a stop indicator at every step (use a coarse `step`). @default false */
+  ticks?: boolean;
+  /** Turns the slider off: it can't be moved or focused. @default false */
+  disabled?: boolean;
+  /** Show the value above the thumb while it is dragged or keyboard-focused. @default false */
+  valueLabel?: boolean;
+  /** Formats the value for the value indicator and assistive tech. */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Form field name (one hidden input per thumb). */
+  name?: string;
+  /** The id of the slider's root, its `group` (an error summary can link to it). */
+  id?: string;
+  /** Ref to the root `<div>` element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: SliderClassNames;
+  /** `data-*` attributes, like the other DOM attributes, go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+export type SliderProps = SliderCommonProps & Naming & {
+  /** The value (controlled). */
+  value?: number;
+  /** The initial value when uncontrolled. @default min */
+  defaultValue?: number;
+  /** Called as the value changes, while dragging too. */
+  onChange?: (value: number) => void;
+  /** Called when the user stops dragging or releases a key. */
+  onChangeEnd?: (value: number) => void;
+  /**
+   * Fill the track from its centre (for values around a midpoint). M3 doesn't use inset
+   * icons on centred sliders, so `leadingIcon` and `trailingIcon` are ignored. @default false
+   */
+  centered?: boolean;
+  /**
+   * An icon inside the active track at its start (sizes md and up; ignored, with a dev
+   * warning, on xs and sm). When the active track is too short for it, it moves to the
+   * start of the inactive track.
+   */
+  leadingIcon?: ReactNode;
+  /** An icon inside the inactive track at its end (sizes md and up; ignored on xs and sm). */
+  trailingIcon?: ReactNode;
+};
+export interface RangeSliderLabels {
+  /** Name of the start thumb. @default "Minimum" */
+  start: string;
+  /** Name of the end thumb. @default "Maximum" */
+  end: string;
+}
+export type RangeSliderProps = SliderCommonProps & Naming & {
+  /** The range, as `[start, end]` (controlled). */
+  value?: [number, number];
+  /** The initial range when uncontrolled. @default [min, max] */
+  defaultValue?: [number, number];
+  /** Called as the range changes, while dragging too. */
+  onChange?: (value: [number, number]) => void;
+  /** Called when the user stops dragging or releases a key. */
+  onChangeEnd?: (value: [number, number]) => void;
+  /** Words the range slider announces (its thumbs' names), with English defaults. */
+  labels?: Partial<RangeSliderLabels>;
+};
+/**
+ * M3 Expressive slider: XS–XL sizes, horizontal or vertical, continuous or discrete with
+ * stop indicators, optionally centred, with inset icons and a value indicator. Arrow keys,
+ * Page Up / Down and Home / End adjust it (mirrored in RTL).
+ *
+ * @example
+ * <Slider aria-label="Volume" size="md" leadingIcon={<VolumeIcon />} defaultValue={40} />
+ */
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
+/**
+ * M3 Expressive range slider: two thumbs selecting a range, with the same sizes,
+ * orientations and discrete stops as {@link Slider}.
+ *
+ * @example
+ * <RangeSlider aria-label="Price" defaultValue={[20, 80]} />
+ */
+export declare function RangeSlider(props: RangeSliderProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Slider.d.ts.map