@cssints/headless 0.15.0 → 0.18.0

package/dist/index.mjs

@@ -54,7 +54,7 @@ const toggled = (a, index) => {
 	else next.add(index);
 	return next;
 };
-const sameSet = (a, b) => a.size === b.size && [...a].every((index) => b.has(index));
+const sameSet$1 = (a, b) => a.size === b.size && [...a].every((index) => b.has(index));
 /** The only member, or -1. */
 const sole = (a) => a.size === 1 ? [...a][0] ?? -1 : -1;
 const at = (values, index) => values[index] ?? 0;
@@ -477,7 +477,7 @@ const createCanvas = (options) => {
 		annSel: ann,
 		annText: prefs.announce ? messages().selection([...ann].sort((a, b) => a - b).map((i) => labelAt(s, i))) : ""
 	});
-	const announced = (s, sel) => sameSet(sel, s.annSel) ? {
+	const announced = (s, sel) => sameSet$1(sel, s.annSel) ? {
 		...s,
 		sel
 	} : announcing({
@@ -1296,7 +1296,7 @@ const createPlayer = (options) => {
 const HEADING_LEVELS = 6;
 const count = (expanded) => expanded.filter(Boolean).length;
 /** Re-establish the mode's constraints, exactly as the spec's `normExpanded`. */
-const normalize$1 = (expanded, multiple, collapsible) => {
+const normalize$2 = (expanded, multiple, collapsible) => {
 	if (!collapsible && count(expanded) === 0) return expanded.map((_, index) => index === 0);
 	if (multiple) return expanded;
 	const first = expanded.findIndex(Boolean);
@@ -1328,7 +1328,7 @@ const createAccordion = (options = {}) => {
 	const controlled = () => options.value !== void 0;
 	const [indices, request] = createControllable({
 		value: () => options.value,
-		initial: indicesOf(normalize$1(Array.from({ length: items }, (_, index) => (options.defaultValue ?? []).includes(index)), multiple(), collapsible())),
+		initial: indicesOf(normalize$2(Array.from({ length: items }, (_, index) => (options.defaultValue ?? []).includes(index)), multiple(), collapsible())),
 		onChange: () => options.onValueChange
 	});
 	const expanded = () => Array.from({ length: items }, (_, index) => indices().includes(index));
@@ -1361,11 +1361,11 @@ const createAccordion = (options = {}) => {
 		toggle,
 		setMultiple: (value) => {
 			setMultipleOverride(value);
-			if (!controlled()) commit(normalize$1(expanded(), value, collapsible()));
+			if (!controlled()) commit(normalize$2(expanded(), value, collapsible()));
 		},
 		setCollapsible: (value) => {
 			setCollapsibleOverride(value);
-			if (!controlled()) commit(normalize$1(expanded(), multiple(), value));
+			if (!controlled()) commit(normalize$2(expanded(), multiple(), value));
 		},
 		setHeadingLevel: (level) => {
 			setHeadingLevelSignal(Math.min(Math.max(level, 1), HEADING_LEVELS));
@@ -2584,28 +2584,85 @@ const createDialogModal = (options = {}) => {
 		}
 	};
 };
-// src/confirm.ts
-var ConfirmPendingError = class extends Error {
-	name = "ConfirmPendingError";
-	constructor() {
-		super("a confirmation is already pending");
+// src/overlay-shell.ts
+/**
+* The page-wide half of a modal overlay: one scroll lock, one stack of open
+* overlays, the tabbables of a panel and the Tab cycle over them. Shared by
+* `createConfirm` and `createDrawer` so that a confirm opened over a drawer (or
+* the reverse) takes Escape and Tab first, and the scroll lock outlives the
+* first of them to close.
+*/
+const TABBABLE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
+/** The visible, tabbable elements of `root`, in document order. */
+const tabbables = (root) => Array.from(root.querySelectorAll(TABBABLE)).filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0);
+/** The first tabbable element of `root`, if any. */
+const firstFocusable$1 = (root) => tabbables(root)[0];
+/**
+* Wraps Tab / Shift+Tab inside `root` and pulls a focus that escaped back in
+* on the next Tab. With nothing tabbable the panel itself (which is
+* `tabindex="-1"`) keeps the focus.
+*/
+const cycleFocus = (event, root) => {
+	const items = tabbables(root);
+	const first = items[0];
+	const last = items.at(-1);
+	const active = document.activeElement;
+	const inside = root.contains(active);
+	if (first === void 0 || last === void 0) {
+		event.preventDefault();
+		root.focus();
+	} else if (event.shiftKey && (!inside || active === first || active === root)) {
+		event.preventDefault();
+		last.focus();
+	} else if (!event.shiftKey && (!inside || active === last)) {
+		event.preventDefault();
+		first.focus();
 	}
 };
-const openDialogs = [];
 let scrollLocks = 0;
 let scrollBefore = "";
+/**
+* `overflow: hidden` on the document element, counted: the first holder takes
+* it, the last to release restores what `overflow` was. The returned release is
+* idempotent.
+*/
 const lockScroll = () => {
 	const root = document.documentElement;
 	if (scrollLocks++ === 0) {
 		scrollBefore = root.style.overflow;
 		root.style.overflow = "hidden";
 	}
+	let released = false;
 	return () => {
+		if (released) return;
+		released = true;
 		if (--scrollLocks === 0) root.style.overflow = scrollBefore;
 	};
 };
-const TABBABLE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
-const tabbables = (root) => Array.from(root.querySelectorAll(TABBABLE)).filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0);
+const openOverlays = [];
+/**
+* Joins the open overlays; the last one to claim takes Escape and Tab. Returns
+* the release (idempotent), which may be called in any order.
+*/
+const claimOverlay = (self) => {
+	openOverlays.push(self);
+	let claimed = true;
+	return () => {
+		if (!claimed) return;
+		claimed = false;
+		const at = openOverlays.indexOf(self);
+		if (at !== -1) openOverlays.splice(at, 1);
+	};
+};
+/** Whether `self` is the overlay that takes Escape and Tab (the one opened last). */
+const isTopOverlay = (self) => openOverlays.at(-1) === self;
+// src/confirm.ts
+var ConfirmPendingError = class extends Error {
+	name = "ConfirmPendingError";
+	constructor() {
+		super("a confirmation is already pending");
+	}
+};
 /**
 * A promise-based confirmation over `createDialogModal({ role: "alertdialog" })`
 * (APG Alert Dialog: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
@@ -2627,7 +2684,9 @@ const tabbables = (root) => Array.from(root.querySelectorAll(TABBABLE)).filter((
 * Nesting: confirms from different `createConfirm` calls may be open together;
 * only the last one opened gets Escape and Tab (and Escape does not reach a
 * dialog it sits in), and the scroll lock is counted: the first takes it, the
-* last to close restores what `overflow` was. One confirm still has one request.
+* last to close restores what `overflow` was. `createDrawer` claims the same
+* page-wide stack and lock, so a confirm over a drawer (or the reverse) nests
+* the same way. One confirm still has one request.
 *
 * One request at a time: a second `confirm()` while one is pending is rejected,
 * not queued. Queued, a double click on "Delete" would ask twice and a stale
@@ -2661,7 +2720,7 @@ const createConfirm = (options = {}) => {
 	});
 	const self = Symbol(base);
 	const onDocumentKeyDown = (event) => {
-		if (openDialogs.at(-1) !== self) return;
+		if (!isTopOverlay(self)) return;
 		if (event.key === "Escape") {
 			event.preventDefault();
 			event.stopPropagation();
@@ -2670,31 +2729,17 @@ const createConfirm = (options = {}) => {
 		}
 		const root = document.getElementById(dialog.dialogProps.id);
 		if (event.key !== "Tab" || root === null) return;
-		const items = tabbables(root);
-		const first = items[0];
-		const last = items.at(-1);
-		const active = document.activeElement;
-		const inside = root.contains(active);
-		if (first === void 0 || last === void 0) {
-			event.preventDefault();
-			root.focus();
-		} else if (event.shiftKey && (!inside || active === first || active === root)) {
-			event.preventDefault();
-			last.focus();
-		} else if (!event.shiftKey && (!inside || active === last)) {
-			event.preventDefault();
-			first.focus();
-		}
+		cycleFocus(event, root);
 	};
 	createEffect(() => dialog.open(), (isOpen) => {
 		if (!isOpen) return;
 		document.getElementById(cancelId)?.focus();
 		const unlock = lockScroll();
-		openDialogs.push(self);
+		const release = claimOverlay(self);
 		document.addEventListener("keydown", onDocumentKeyDown, true);
 		return () => {
 			document.removeEventListener("keydown", onDocumentKeyDown, true);
-			openDialogs.splice(openDialogs.indexOf(self), 1);
+			release();
 			unlock();
 		};
 	});
@@ -2752,6 +2797,148 @@ const createConfirm = (options = {}) => {
 		}
 	};
 };
+// src/drawer.ts
+/**
+* The shell for a drawer / bottom sheet: an edge-anchored panel over the
+* Dialog (Modal) semantics (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/),
+* with the same shell as `createConfirm` — focus into the panel on open and back
+* to the trigger on close, Tab cycling while modal, Escape read from the
+* document (so it closes wherever focus is), a counted scroll lock and an
+* outside dismissal.
+*
+* **Compose, do not add a sheet primitive.** [docs/bottom-sheet.md](../docs/bottom-sheet.md)
+* settled it: the semantics are Dialog (Modal), the position, the slide and the
+* snap points are the host's CSS (native scroll snap), and the panel that both
+* need is this shell. `side` and `modal` are the whole presentation API: a sheet
+* is `{ side: "bottom", modal: true }`, a side rail is `{ side: "right" }` and a
+* non-modal rail is `{ side: "right", modal: false }`.
+*
+* **No drag-to-dismiss.** A drag is not a dialog interaction, it is a scroll
+* snap the platform runs off the main thread, and it belongs to the host's
+* scroll-snap CSS (see bottom-sheet.md: `scroll-snap-type: y mandatory`, snap
+* markers, `scrollsnapchange`). Mirroring a native snap in JS would be the
+* gesture re-implementation that the platform research forbids, and a pointer
+* gesture would exist on top of the snap that already moved the panel. So the
+* handle is decoration (`aria-hidden`, no pointer handlers): the ways out are
+* the backdrop, Escape, the close control the host puts in the panel, and the
+* trigger. Swipe-to-dismiss is a separate decision with its own oracle.
+*
+* The panel is edge-anchored, so there is **no `attach`**: nothing is measured
+* and no placement is computed. Focus and Tab find the panel through
+* `contentProps.id`, like `createConfirm` does, so the host only spreads
+* attributes onto its own elements.
+*
+* Not checked against a Quint spec: the dialog is, and this is its shell, so
+* `test/drawer.browser.test.tsx` is the oracle. A pointerdown outside the panel
+* closes it when `dismissable` (that is the backdrop click too, and the only
+* dismissal a non-modal drawer has); closing returns focus to the trigger.
+*/
+const createDrawer = (options = {}) => {
+	const base = options.id ?? createUniqueId();
+	const triggerId = `${base}-trigger`;
+	const contentId = `${base}-content`;
+	const backdropId = `${base}-backdrop`;
+	const self = Symbol(base);
+	let wasOpen = false;
+	const isModal = () => options.modal ?? true;
+	const dismissable = () => options.dismissable ?? true;
+	const content = () => document.getElementById(contentId);
+	const trigger = () => document.getElementById(triggerId);
+	const [open, requestOpen] = createControllable({
+		value: () => options.open,
+		initial: options.defaultOpen ?? false,
+		onChange: () => options.onOpenChange
+	});
+	const onDocumentKeyDown = (event) => {
+		if (!isTopOverlay(self) || !open()) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			requestOpen(false);
+			return;
+		}
+		if (event.key !== "Tab" || !isModal()) return;
+		const panel = content();
+		if (panel !== null) cycleFocus(event, panel);
+	};
+	createEffect(() => open(), (isOpen) => {
+		if (isOpen) {
+			wasOpen = true;
+			const panel = content();
+			if (panel !== null) (firstFocusable$1(panel) ?? panel).focus();
+			const release = claimOverlay(self);
+			document.addEventListener("keydown", onDocumentKeyDown, true);
+			return () => {
+				document.removeEventListener("keydown", onDocumentKeyDown, true);
+				release();
+			};
+		}
+		if (wasOpen) {
+			wasOpen = false;
+			const back = trigger();
+			if (back !== null && back.isConnected) back.focus();
+		}
+	});
+	createEffect(() => open() && isModal(), (locked) => {
+		if (locked) return lockScroll();
+	});
+	const onPointerDown = (event) => {
+		if (!open() || !dismissable()) return;
+		const target = event.target;
+		if (!(target instanceof Node)) return;
+		if (content()?.contains(target) === true || trigger()?.contains(target) === true) return;
+		requestOpen(false);
+	};
+	document.addEventListener("pointerdown", onPointerDown, true);
+	onCleanup(() => document.removeEventListener("pointerdown", onPointerDown, true));
+	return {
+		open,
+		side: () => options.side ?? "right",
+		triggerProps: {
+			id: triggerId,
+			"aria-haspopup": "dialog",
+			get "aria-expanded"() {
+				return open() ? "true" : "false";
+			},
+			"aria-controls": contentId,
+			onClick: () => requestOpen(!open()),
+			onKeyDown: (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					requestOpen(true);
+				}
+			}
+		},
+		backdropProps: {
+			id: backdropId,
+			get hidden() {
+				return !open() || !isModal();
+			},
+			onClick: () => {
+				if (dismissable()) requestOpen(false);
+			}
+		},
+		contentProps: {
+			id: contentId,
+			role: "dialog",
+			get "aria-modal"() {
+				return isModal() && open() ? "true" : void 0;
+			},
+			"aria-labelledby": options.labelledby,
+			tabindex: -1,
+			get hidden() {
+				return !open();
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && open()) {
+					event.preventDefault();
+					requestOpen(false);
+				}
+			}
+		},
+		handleProps: { "aria-hidden": "true" }
+	};
+};
 // src/feed.ts
 /**
 * APG Feed (https://www.w3.org/WAI/ARIA/apg/patterns/feed/): state plus prop
@@ -3079,6 +3266,304 @@ const createPagination = (options) => {
 		}
 	};
 };
+// src/panzoom.ts
+/** Arrow-key pan distance, in CSS px; Shift multiplies it. */
+const PAN_STEP = 24;
+const PAN_SHIFT = 4;
+/** A ctrl/meta wheel notch. */
+const WHEEL_FACTOR = 1.1;
+const axis = (value, limit) => Math.min(limit, Math.max(-limit, value));
+/**
+* Pan and zoom for one image in a viewport: scale, offset and the prop objects
+* for a focusable viewport, the transformed image and a live value.
+*
+* **There is no APG pattern for pan-zoom.** The accessible contract is the three
+* parts this returns: a viewport that takes focus (`role=group`, `tabindex=0`,
+* `aria-roledescription="zoomable image"`), keyboard operations that stand in
+* for every pointer gesture (`+` / `=` / `-` zoom, arrows pan, `0` resets), and a
+* polite live region (`aria-describedby` of the viewport) that carries the
+* current scale. The pointer gestures are an addition for mouse and touch, never
+* the only way in. That contract is this module's own: the case it replaces
+* (kocharin-art-3's `Zoomable`, ~110 lines of pointer maths) had no keyboard path
+* and no ARIA at all, and `createCanvas` is the wrong model here — an infinite
+* canvas moves a camera over a world, while this is one image fitted to its
+* viewport.
+*
+* Wheel is zoom-with-a-modifier only: `ctrl` / `meta` (the browser's own pinch
+* arrives as `ctrl+wheel`) zooms about the cursor; a bare wheel is never
+* `preventDefault`ed, so the page keeps scrolling. Trackpad gestures differ per
+* platform and a swallowed wheel is the one thing that is never acceptable.
+*
+* Pointer: a drag pans, a second pointer pinches (about its midpoint), a double
+* click resets. Capture is best-effort (a synthetic pointer cannot be captured).
+*
+* `bounds: "clamp"` bounds the offset by half the viewport's scaled overflow, so
+* the image is expected to fill the viewport at `min` (the usual
+* `width: 100%; height: 100%` / `object-fit: cover` box). A letterboxed image
+* smaller than its viewport cannot be held gap-free; give it a viewport of its
+* own or `bounds: "free"`.
+*
+* Request/commit (`rt1p`): uncontrolled by default (`defaultScale`); pass `scale`
+* + `onScaleChange` to own the value. The offset has no controlled prop, so a
+* hosting page that rejects a scale request also gets the offset resolved for the
+* scale it refused — accept the request, or pass `bounds: "free"` and own the
+* pan elsewhere.
+*
+* The host owns the box and the looks: size the viewport, put `touch-action:
+* none` on it if a touch drag should pan, centre the image
+* (`transform-origin: 50% 50%` is the default this maths assumes), and hide the
+* live region visually rather than with `hidden` (a `hidden` live region is not
+* announced).
+*/
+const createPanZoom = (options = {}) => {
+	const min = options.min ?? 1;
+	const max = options.max ?? 4;
+	const step = options.step ?? .25;
+	const bounds = () => options.bounds ?? "clamp";
+	const valueId = createUniqueId();
+	const clamp = (next) => Math.min(max, Math.max(min, next));
+	const [scale, requestScale] = createControllable({
+		value: () => options.scale,
+		initial: clamp(options.defaultScale ?? min),
+		onChange: () => options.onScaleChange
+	});
+	const [version, setVersion] = createSignal(0);
+	let last = {
+		x: 0,
+		y: 0
+	};
+	const offset = () => {
+		version();
+		return last;
+	};
+	const setOffset = (next) => {
+		last = next;
+		setVersion((count) => count + 1);
+	};
+	let box = {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	};
+	const measure = (event) => {
+		if (!(event.currentTarget instanceof Element)) return;
+		const rect = event.currentTarget.getBoundingClientRect();
+		box = {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height: rect.height
+		};
+	};
+	const limits = (at) => ({
+		x: Math.max(0, box.width * (at - 1) / 2),
+		y: Math.max(0, box.height * (at - 1) / 2)
+	});
+	const move = (next, at = scale()) => {
+		const allowed = limits(at);
+		const target = bounds() === "free" ? next : {
+			x: axis(next.x, allowed.x),
+			y: axis(next.y, allowed.y)
+		};
+		const previous = offset();
+		if (target.x === previous.x && target.y === previous.y) return;
+		setOffset(target);
+		options.onPanChange?.(target);
+	};
+	const setScale = (next, origin) => {
+		const before = scale();
+		const target = clamp(next);
+		if (target === before) return;
+		requestScale(target);
+		const at = origin ?? {
+			x: box.width / 2,
+			y: box.height / 2
+		};
+		const o = {
+			x: at.x - box.width / 2,
+			y: at.y - box.height / 2
+		};
+		const ratio = before > 0 ? target / before : 1;
+		const current = offset();
+		move({
+			x: o.x - (o.x - current.x) * ratio,
+			y: o.y - (o.y - current.y) * ratio
+		}, target);
+	};
+	const zoomIn = () => setScale(scale() + step);
+	const zoomOut = () => setScale(scale() - step);
+	const reset = () => {
+		requestScale(min);
+		move({
+			x: 0,
+			y: 0
+		}, min);
+	};
+	const pointers = /* @__PURE__ */ new Map();
+	let drag;
+	let pinch;
+	const distance = () => {
+		const [a, b] = [...pointers.values()];
+		return a === void 0 || b === void 0 ? 0 : Math.hypot(a.x - b.x, a.y - b.y);
+	};
+	const midpoint = () => {
+		const [a, b] = [...pointers.values()];
+		if (a === void 0 || b === void 0) return {
+			x: box.left + box.width / 2,
+			y: box.top + box.height / 2
+		};
+		return {
+			x: (a.x + b.x) / 2,
+			y: (a.y + b.y) / 2
+		};
+	};
+	const local = (point) => ({
+		x: point.x - box.left,
+		y: point.y - box.top
+	});
+	const pointerDown = (event) => {
+		measure(event);
+		if (event.button !== 0) return;
+		try {
+			if (event.currentTarget instanceof Element) event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		const at = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		pointers.set(event.pointerId, at);
+		drag = {
+			at,
+			from: offset()
+		};
+		if (pointers.size === 2) pinch = {
+			distance: distance(),
+			scale: scale()
+		};
+	};
+	const pointerMove = (event) => {
+		if (!pointers.has(event.pointerId)) return;
+		pointers.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (pointers.size === 2 && pinch !== void 0) {
+			if (pinch.distance > 0) setScale(pinch.scale * (distance() / pinch.distance), local(midpoint()));
+			return;
+		}
+		if (drag !== void 0) move({
+			x: drag.from.x + event.clientX - drag.at.x,
+			y: drag.from.y + event.clientY - drag.at.y
+		});
+	};
+	const pointerUp = (event) => {
+		pointers.delete(event.pointerId);
+		pinch = void 0;
+		const rest = [...pointers.values()][0];
+		drag = rest === void 0 ? void 0 : {
+			at: rest,
+			from: offset()
+		};
+	};
+	const wheel = (event) => {
+		if (!event.ctrlKey && !event.metaKey) return;
+		event.preventDefault();
+		measure(event);
+		const factor = event.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+		setScale(scale() * factor, {
+			x: event.clientX - box.left,
+			y: event.clientY - box.top
+		});
+	};
+	const keyDown = (event) => {
+		measure(event);
+		const by = PAN_STEP * (event.shiftKey ? PAN_SHIFT : 1);
+		const current = offset();
+		switch (event.key) {
+			case "+":
+			case "=":
+				zoomIn();
+				break;
+			case "-":
+			case "_":
+				zoomOut();
+				break;
+			case "0":
+				reset();
+				break;
+			case "ArrowLeft":
+				move({
+					x: current.x - by,
+					y: current.y
+				});
+				break;
+			case "ArrowRight":
+				move({
+					x: current.x + by,
+					y: current.y
+				});
+				break;
+			case "ArrowUp":
+				move({
+					x: current.x,
+					y: current.y - by
+				});
+				break;
+			case "ArrowDown":
+				move({
+					x: current.x,
+					y: current.y + by
+				});
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	};
+	return {
+		scale,
+		offset,
+		reset,
+		zoomIn,
+		zoomOut,
+		setScale,
+		value: () => `${Math.round(scale() * 100)}%`,
+		viewportProps: {
+			tabindex: 0,
+			role: "group",
+			"aria-roledescription": "zoomable image",
+			get "aria-label"() {
+				return options.labels?.viewport ?? "Image";
+			},
+			get "aria-describedby"() {
+				return valueId;
+			},
+			onKeyDown: keyDown,
+			onWheel: wheel,
+			onPointerDown: pointerDown,
+			onPointerMove: pointerMove,
+			onPointerUp: pointerUp,
+			onPointerCancel: pointerUp,
+			onDblClick: (event) => {
+				measure(event);
+				reset();
+			}
+		},
+		imageProps: {
+			draggable: false,
+			get style() {
+				const at = offset();
+				return { transform: `translate(${at.x}px, ${at.y}px) scale(${scale()})` };
+			}
+		},
+		valueProps: {
+			id: valueId,
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	};
+};
 // src/popover.ts
 const FLIPPED = {
 	"bottom-start": "top-start",
@@ -3646,6 +4131,109 @@ const createGrid = (options = {}) => {
 		}
 	};
 };
+// src/hotkeys.ts
+const MODIFIERS = /* @__PURE__ */ new Set([
+	"mod",
+	"ctrl",
+	"alt",
+	"shift",
+	"meta"
+]);
+const SHIFTED = /* @__PURE__ */ new Set("~!@#$%^&*()_+{}|:\"<>?");
+const detectsApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+const parse = (keys, isApple) => {
+	const parts = keys.toLowerCase().split("+");
+	const key = parts.pop() ?? "";
+	if (key === "" || MODIFIERS.has(key)) throw new TypeError(`hotkeys: "${keys}" ends with no key`);
+	const chord = {
+		ctrl: false,
+		meta: false,
+		alt: false,
+		shift: SHIFTED.has(key),
+		key
+	};
+	for (const part of parts) switch (part) {
+		case "mod":
+			if (isApple) chord.meta = true;
+			else chord.ctrl = true;
+			break;
+		case "ctrl":
+			chord.ctrl = true;
+			break;
+		case "meta":
+			chord.meta = true;
+			break;
+		case "alt":
+			chord.alt = true;
+			break;
+		case "shift":
+			chord.shift = true;
+			break;
+		default: throw new TypeError(`hotkeys: "${part}" in "${keys}" is not a modifier`);
+	}
+	return chord;
+};
+const matches = (chord, event) => event.key.toLowerCase() === chord.key && event.ctrlKey === chord.ctrl && event.metaKey === chord.meta && event.altKey === chord.alt && event.shiftKey === chord.shift;
+const editable = (target) => target instanceof HTMLElement && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable);
+const inScope = (scope, target) => scope === void 0 || target instanceof Node && scope.contains(target);
+/**
+* One `keydown` listener in the capture phase, one list of chords. A chord
+* fires when its modifiers match exactly, its `when` holds, its scope contains
+* the event's target, and the focus is not in a text field (unless
+* `allowInEditable`). The most recently bound match is the only one that fires,
+* so a modal's `"/"` overrides the page's and unbinding it brings the page's
+* back; `preventDefault` is on by default for the bindings whose chord the
+* browser would otherwise act on (Cmd/Ctrl+S, Cmd/Ctrl+K).
+*/
+const createHotkeys = (options = {}) => {
+	const isApple = options.isApple ?? detectsApple();
+	const bindings = [];
+	let listening = false;
+	let disposed = false;
+	const onKeyDown = (event) => {
+		for (let i = bindings.length - 1; i >= 0; i--) {
+			const entry = bindings[i];
+			if (entry === void 0) continue;
+			const { chord, binding } = entry;
+			if (!matches(chord, event) || binding.when?.() === false) continue;
+			if (!inScope(binding.scope, event.target)) continue;
+			if (binding.allowInEditable !== true && editable(event.target)) continue;
+			if (binding.preventDefault !== false) event.preventDefault();
+			binding.onTrigger(event);
+			return;
+		}
+	};
+	const stop = () => {
+		if (!listening) return;
+		listening = false;
+		document.removeEventListener("keydown", onKeyDown, true);
+	};
+	return {
+		bind: (binding) => {
+			if (disposed) return () => {};
+			const entry = {
+				chord: parse(binding.keys, isApple),
+				binding
+			};
+			bindings.push(entry);
+			if (!listening) {
+				listening = true;
+				document.addEventListener("keydown", onKeyDown, true);
+			}
+			return () => {
+				const at = bindings.indexOf(entry);
+				if (at === -1) return;
+				bindings.splice(at, 1);
+				if (bindings.length === 0) stop();
+			};
+		},
+		dispose: () => {
+			disposed = true;
+			bindings.length = 0;
+			stop();
+		}
+	};
+};
 // src/link.ts
 /**
 * APG Link (https://www.w3.org/WAI/ARIA/apg/patterns/link/): a native `<a href>`
@@ -5262,6 +5850,69 @@ const createResizablePanels = (options) => {
 		separatorProps
 	};
 };
+// src/scrollspy.ts
+/**
+* A scrollspy: a table of contents whose current entry is the last heading that
+* has reached the top of the scrollport, marked `aria-current="location"` on
+* its link (and nowhere else: exactly one link is current).
+*
+* **No APG pattern exists for a scrollspy**, so there is no Quint spec and no
+* ported scenarios: the contract is WAI-ARIA (`aria-current="location"`, the
+* `list` / `listitem` roles, the navigation landmark and its name) and HTML,
+* and `test/scrollspy.browser.test.tsx` is its oracle.
+*
+* **A scroll listener, not an `IntersectionObserver`.** "The last heading at or
+* above the offset" is a total order over every heading, while an observer only
+* reports what crossed its band: a band observer has to rebuild the order from
+* its enter/leave state, and it misreports after a jump (an anchor click, a
+* restored scroll position). The listener is passive, the measurements are
+* reads only (no writes, so no layout thrash), and a docs page has a dozen
+* headings — the same cost as the listener the page already keeps.
+*
+* Smooth scrolling is the host's (`scroll-behavior: smooth`): the links are
+* plain `#id` targets and nothing here moves the scrollport, so no
+* `prefers-reduced-motion` branch is needed either.
+*/
+const createScrollspy = (options) => {
+	const offset = options.offset ?? 0;
+	const first = options.entries[0]?.id;
+	const [active, setActive] = createSignal(first);
+	const at = () => {
+		const container = options.root?.()?.getBoundingClientRect().top ?? 0;
+		let id = first;
+		for (const entry of options.entries) {
+			const element = document.getElementById(entry.id);
+			if (element === null) continue;
+			if (element.getBoundingClientRect().top - container <= offset) id = entry.id;
+		}
+		return id;
+	};
+	const commit = () => {
+		const next = at();
+		if (next === active()) return;
+		setActive(next);
+		options.onChange?.(next);
+	};
+	return {
+		active,
+		navProps: { "aria-label": "On this page" },
+		listProps: { role: "list" },
+		itemProps: () => ({ role: "listitem" }),
+		linkProps: (id) => ({
+			href: `#${id}`,
+			get "aria-current"() {
+				return id === active() ? "location" : void 0;
+			}
+		}),
+		attach: () => {
+			const target = options.root?.() ?? document;
+			const listener = () => commit();
+			target.addEventListener("scroll", listener, { passive: true });
+			commit();
+			return () => target.removeEventListener("scroll", listener);
+		}
+	};
+};
 // src/slider.ts
 const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
 /**
@@ -5822,6 +6473,171 @@ const createSwitch = (options = {}) => {
 		}
 	};
 };
+// src/table.ts
+const normalize$1 = (ids) => [...new Set(ids)];
+const sameSet = (a, b) => a.length === b.length && a.every((id) => b.includes(id));
+const sameSort = (a, b) => a === null || b === null ? a === b : a.key === b.key && a.direction === b.direction;
+const isToggleKey = (event) => event.key === " " || event.key === "Spacebar" || event.key === "Enter";
+/**
+* Every option is read when an attribute is read, so pass props/getters, never a
+* destructured snapshot. `id` is captured once: it is the base of the caption id.
+*/
+const createTable = (options) => {
+	const base = options.id ?? createUniqueId();
+	const selectionMode = () => options.selection ?? "none";
+	const selectable = () => selectionMode() !== "none";
+	const columnOf = (key) => options.columns.find((column) => column.key === key);
+	const isSortable = (key) => columnOf(key)?.sortable !== false;
+	const [rawSort, requestSort] = createControllable({
+		value: () => options.sort,
+		initial: options.defaultSort ?? null,
+		onChange: () => (next) => options.onSortChange?.(next ?? void 0),
+		same: sameSort
+	});
+	const sort = () => rawSort() ?? void 0;
+	const [rawSelected, requestSelection] = createControllable({
+		value: () => options.selected,
+		initial: normalize$1(options.defaultSelected ?? []),
+		onChange: () => options.onSelectionChange,
+		same: sameSet
+	});
+	const selected = () => normalize$1(rawSelected());
+	const isSelected = (id) => selected().includes(id);
+	const nextSort = (key) => {
+		const current = rawSort();
+		if (current === null || current.key !== key) return {
+			key,
+			direction: "ascending"
+		};
+		if (current.direction === "ascending") return {
+			key,
+			direction: "descending"
+		};
+		return (options.sortCycle ?? "tri-state") === "toggle" ? {
+			key,
+			direction: "ascending"
+		} : null;
+	};
+	const toggleRow = (id) => {
+		const mode = selectionMode();
+		if (mode === "none") return;
+		const current = selected();
+		const has = current.includes(id);
+		requestSelection(mode === "single" ? has ? [] : [id] : has ? current.filter((value) => value !== id) : [...current, id]);
+	};
+	const rows = () => options.rows;
+	const allSelected = () => {
+		const every = rows();
+		return every.length > 0 && every.every(isSelected);
+	};
+	const someSelected = () => rows().some(isSelected);
+	const toggleAll = () => {
+		if (selectionMode() !== "multiple") return;
+		const current = selected();
+		if (allSelected()) {
+			requestSelection(current.filter((id) => !rows().includes(id)));
+			return;
+		}
+		requestSelection(normalize$1([...current, ...rows()]));
+	};
+	const keyedToggle = (toggle) => (event) => {
+		if (!isToggleKey(event)) return;
+		event.preventDefault();
+		toggle();
+	};
+	const selectAll = () => {
+		if (selectionMode() !== "multiple") return;
+		return {
+			role: "checkbox",
+			get "aria-checked"() {
+				return allSelected() ? "true" : someSelected() ? "mixed" : "false";
+			},
+			get "aria-label"() {
+				return options.labels?.selectAll ?? "Select all rows";
+			},
+			tabindex: 0,
+			onClick: () => {
+				toggleAll();
+			},
+			onKeyDown: keyedToggle(toggleAll)
+		};
+	};
+	const rowCheckbox = (id) => {
+		if (!selectable()) return;
+		return {
+			role: "checkbox",
+			get "aria-checked"() {
+				return isSelected(id) ? "true" : "false";
+			},
+			get "aria-label"() {
+				return options.labels?.selectRow?.(id) ?? `Select row ${id}`;
+			},
+			tabindex: 0,
+			onClick: (event) => {
+				event.stopPropagation();
+				toggleRow(id);
+			},
+			onKeyDown: keyedToggle(() => toggleRow(id))
+		};
+	};
+	return {
+		selectionMode,
+		sort,
+		selected,
+		isSelected,
+		tableProps: {
+			get "aria-label"() {
+				return options.labels?.table;
+			},
+			get "aria-rowcount"() {
+				return options.rowCount;
+			},
+			get "aria-colcount"() {
+				return options.columnCount;
+			}
+		},
+		captionProps: { id: `${base}-caption` },
+		headerCellProps: (key) => ({
+			scope: "col",
+			get "aria-sort"() {
+				const current = rawSort();
+				return current !== null && current.key === key && isSortable(key) ? current.direction : void 0;
+			},
+			get abbr() {
+				return columnOf(key)?.abbr;
+			}
+		}),
+		headerButtonProps: (key) => {
+			if (!isSortable(key)) return;
+			return {
+				type: "button",
+				onClick: () => {
+					requestSort(nextSort(key));
+				}
+			};
+		},
+		rowProps: (id) => ({
+			get "aria-selected"() {
+				if (!selectable()) return;
+				return isSelected(id) ? "true" : "false";
+			},
+			get onClick() {
+				return selectable() ? () => toggleRow(id) : void 0;
+			}
+		}),
+		cellProps: (_rowId, key) => ({ get "aria-colindex"() {
+			if (options.columnCount === void 0) return;
+			const index = options.columns.findIndex((column) => column.key === key);
+			return index < 0 ? void 0 : index + 1;
+		} }),
+		get selectAllProps() {
+			return selectAll();
+		},
+		rowCheckboxProps: (id) => rowCheckbox(id),
+		toggleAll,
+		toggleRow
+	};
+};
 // src/textbox.ts
 const control = (field, options) => ({
 	...field.controlProps,
@@ -8009,4 +8825,4 @@ const createRearrangeableListbox = (options) => {
 		})
 	};
 };
-export { ConfirmPendingError, DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createConfirm, createDialogModal, createDisclosure, createFeed, createField, createGrid, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, createSlider, createSliderMultiThumb, createSpinbutton, createStatus, createSwitch, createTabs, createTextArea, createTextInput, createTimeline, createToast, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };
+export { ConfirmPendingError, DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createConfirm, createDialogModal, createDisclosure, createDrawer, createFeed, createField, createGrid, createHotkeys, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPanZoom, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, createScrollspy, createSlider, createSliderMultiThumb, createSpinbutton, createStatus, createSwitch, createTable, createTabs, createTextArea, createTextInput, createTimeline, createToast, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };