@cssints/headless 0.5.2 → 0.6.0

package/README.md

@@ -65,7 +65,7 @@ A primitive that has a seam honours an optional `prefs` entry (a `Partial<Prefs>
 - **menu / menubar** — `typeaheadDelayMs` (the typeahead buffer timeout).
 - **tooltip** — `tooltipShowDelayMs` / `tooltipHideDelayMs`, exposed as `showDelayMs()` / `hideDelayMs()` for the host to wire its `setTimeout` from (the spec keeps timers as events).
 
-Everything else **ignores** prefs: accordion, alert, alertdialog, breadcrumb, button, carousel, checkbox, checkbox-group, combobox, dialog-modal, disclosure, feed, grid, link, listbox, meter, player, radio, slider, slider-multithumb, spinbutton, switch, tabs, timeline, toolbar, treegrid, treeview, windowsplitter — they expose no timing / motion / live-region / camera seam. `listbox` / `treeview` / `timeline` typeahead timeouts are host-driven via their reset methods, so they take no delay here either.
+Everything else **ignores** prefs: accordion, alert, alertdialog, breadcrumb, button, carousel, checkbox, checkbox-group, combobox, dialog-modal, disclosure, feed, grid, link, listbox, meter, player, radio, resizable-panels, slider, slider-multithumb, spinbutton, switch, tabs, timeline, toolbar, treegrid, treeview, windowsplitter — they expose no timing / motion / live-region / camera seam. `listbox` / `treeview` / `timeline` typeahead timeouts are host-driven via their reset methods, so they take no delay here either.
 
 `motionDurationMs` is **not consumed**: canvas tweens are tick-driven, not millisecond-driven, and the look layer owns durations. It stays in `Prefs` only so a host's preference record fits the type.
 
@@ -89,6 +89,40 @@ Membership, sizes and z-order are **not modelled** in `pointer.qnt` (its node se
 
 **Nested canvases** are two instances the host composes: a `#canvas` node holds a second `createCanvas`, and the inner viewport stops propagation of its own pointer, wheel and key events. The innermost canvas under the pointer owns the event, so a press or zoom inside it never starts an outer gesture or moves the outer camera. A nested canvas is a single tab stop in its parent.
 
+## Resizable panels
+
+`createResizablePanels` is a group of N panes and N-1 separators: react-resizable-panels' layout on the APG window splitter's keyboard. Its behaviour is `packages/apg-specs/specs/patterns/resizable-panels.qnt` — not an APG pattern, so it lives under `patterns/` — and the DOM is checked against it by the differential walk. The spec is the three-pane instance (10/80 bounds, 10% steps, pane 0 collapsible at 0); the primitive takes N panes and any bounds.
+
+**The contract.** Sizes are percentages of the group and always sum to 100. Each pane has `min` / `max`; a `collapsible` pane sits at `collapsedSize` (0) while collapsed. A move — an arrow, Home/End, a drag — changes only the two panes around the separator, clamped by both bounds. Collapsing hands the pane's space to the nearest pane that can take it and cascades outward; restoring takes it back in the same order, so a restore always returns the remembered size.
+
+**The separator is the widget**: `role=separator`, `tabindex=0`, `aria-orientation`, `aria-valuenow` = the size of the pane it resizes, `aria-valuemin` / `-max` that pane's bounds, `aria-controls` it. Arrows move by `step` (10%), Home/End jump the pair to its bounds, Enter collapses and restores. A separator next to a collapsed pane is inert (only Enter restores).
+
+**The drag is snapshot + delta**: pointerdown remembers the layout, every move re-solves from it, so dragging back past a clamp recovers exactly. It uses pointer capture and ends on pointerup / pointercancel; a host write of `sizes` ends it too. Keyboard input is a no-op while a drag runs.
+
+```tsx
+const panels = createResizablePanels({
+  panes: [{ label: "Sidebar", collapsible: true }, { label: "Content" }, { label: "Inspector" }],
+  defaultSizes: [20, 40, 40],
+  storageKey: "app-layout",
+  onSizesChange: (sizes) => save(sizes), // ignored while uncontrolled
+});
+
+<div {...panels.groupProps} style={{ display: "flex" }}>
+  {[0, 1, 2].map((index) => (
+    <>
+      <div {...panels.paneProps(index)} style={{ flex: `${panels.sizes()[index]}%` }}>
+        …
+      </div>
+      {index < 2 && <div {...panels.separatorProps(index)} />}
+    </>
+  ))}
+</div>;
+```
+
+Controlled is `sizes` + `onSizesChange` (the request), like every other primitive. `storageKey` persists the layout in localStorage — host storage, so the key belongs to the host's namespace.
+
+Left to the host: pane bounds in pixels (percent only), nested groups, and F6 (with three panes a Tab is enough). Not modelled: react-resizable-panels' collapse-on-drag threshold (a pane collapses on Enter or a host write, never by dragging through MIN) and restoring a pane that was mounted already collapsed (it returns to its own `min`).
+
 ## Commands
 
 ```sh
@@ -104,7 +138,7 @@ The specs, bridges and scenarios the tests replay are [`@cssints/apg-specs`](../
 
 ## Status
 
-Not on npm yet: the package is in the Changesets `ignore` list until it joins the `fixed` group (RELEASING.md). Its manifest follows the other packages (`development` condition on `src`, `dist` for consumers, `publishConfig.directory`).
+Published with the Changesets `fixed` group (one version with the other packages, RELEASING.md). Its manifest follows the other packages (`development` condition on `src`, `dist` for consumers, `publishConfig.directory`).
 
 Solid 2 reminders: setters apply on the microtask flush (the DOM driver waits a frame after each step); pass props objects/getters, never destructure options.
 

package/dist/index.d.mts

@@ -2076,6 +2076,101 @@ export interface RadioGroup<T = unknown> {
  */
 export declare const createRadioGroup: <T = unknown>(options: RadioGroupOptions<T>) => RadioGroup<T>;
 //#endregion
+//#region src/resizable-panels.d.ts
+export type PanelsOrientation = "vertical" | "horizontal";
+/** One pane of the group. Sizes are percentages of the group (0..100). */
+export interface ResizablePaneOptions {
+  readonly id?: string;
+  /** Smallest expanded size, in percent. */
+  readonly min?: number;
+  /** Largest size, in percent. */
+  readonly max?: number;
+  /** The uncontrolled start; defaults to an equal split. */
+  readonly defaultSize?: number;
+  /** Collapses to `collapsedSize` on Enter and restores the remembered size. */
+  readonly collapsible?: boolean;
+  readonly collapsedSize?: number;
+  /** Accessible name fragment: the separator becomes "Resize <label>". */
+  readonly label?: string;
+}
+/** Options are read lazily: pass an object with getters, never destructured values. */
+export interface ResizablePanelsOptions {
+  readonly panes: ReadonlyArray<ResizablePaneOptions>;
+  readonly orientation?: PanelsOrientation;
+  /** Controlled: the host owns the layout. A new array per change. */
+  readonly sizes?: ReadonlyArray<number> | undefined;
+  /** The uncontrolled start; ignored while `sizes` is set. */
+  readonly defaultSizes?: ReadonlyArray<number>;
+  /** Keyboard step, in percent. */
+  readonly step?: number;
+  /** Base for the generated group / pane / separator ids. */
+  readonly id?: string;
+  /** Accessible name of the group. */
+  readonly label?: string | undefined;
+  /** Persist the layout in localStorage under this key (host storage, not modelled). */
+  readonly storageKey?: string | undefined;
+  /** A request to change the layout the host may ignore. */
+  readonly onSizesChange?: (sizes: ReadonlyArray<number>) => void;
+}
+export interface ResizablePanelsGroupProps {
+  readonly role: "group";
+  readonly "aria-label": string | undefined;
+}
+export interface ResizablePaneProps {
+  readonly id: string;
+}
+/** Spread onto the focusable `role=separator` bar between pane `index` and `index + 1`. */
+export interface ResizableSeparatorProps {
+  readonly id: string;
+  readonly role: "separator";
+  readonly "aria-orientation": PanelsOrientation;
+  readonly "aria-valuenow": number;
+  readonly "aria-valuemin": number;
+  readonly "aria-valuemax": number;
+  /** The pane this separator resizes (the one on its left). */
+  readonly "aria-controls": string;
+  readonly "aria-label": string;
+  readonly tabindex: 0;
+  readonly onKeyDown: (event: KeyboardEvent) => void;
+  readonly onFocus: () => void;
+  readonly onBlur: () => void;
+  readonly onPointerDown: (event: PointerEvent) => void;
+  readonly onPointerMove: (event: PointerEvent) => void;
+  readonly onPointerUp: (event: PointerEvent) => void;
+  readonly onPointerCancel: (event: PointerEvent) => void;
+}
+export interface ResizablePanels {
+  /** The committed layout, in percent; always sums to 100. */
+  readonly sizes: Accessor<ReadonlyArray<number>>;
+  readonly collapsed: (index: number) => boolean;
+  /** The separator being dragged, or `null`. */
+  readonly resizing: Accessor<number | null>;
+  readonly focusSeparator: Accessor<number | null>;
+  readonly setFocusSeparator: (index: number | null) => void;
+  readonly keyDown: (index: number, key: string) => void;
+  readonly groupProps: ResizablePanelsGroupProps;
+  readonly paneProps: (index: number) => ResizablePaneProps;
+  readonly separatorProps: (index: number) => ResizableSeparatorProps;
+}
+/**
+ * A group of N panes and N-1 separators, react-resizable-panels' model on the
+ * APG window splitter's keyboard: sizes in percent of the group, always summing
+ * to 100, each pane within `min..max`, a collapsible pane landing on
+ * `collapsedSize`. The separator is the focusable widget (`role=separator`,
+ * its `aria-valuenow` is the pane on its left); arrows/Home/End move the pair
+ * around a separator and Enter collapses / restores, all as requests.
+ *
+ * A move only ever changes the separator's two neighbours, clamped by both
+ * bounds. Collapsing hands the pane's space to the nearest pane that can take
+ * it and cascades outward; restoring takes it back in the same order. The drag
+ * is snapshot + delta: pointerdown remembers the layout, every move re-solves
+ * from it, so dragging back past a clamp recovers exactly.
+ *
+ * Behaviour is `packages/apg-specs/specs/patterns/resizable-panels.qnt`; the
+ * DOM is checked against it by the differential walk.
+ */
+export declare const createResizablePanels: (options: ResizablePanelsOptions) => ResizablePanels;
+//#endregion
 //#region src/slider.d.ts
 export type SliderOrientation = "horizontal" | "vertical";
 export type SliderDirection = "ltr" | "rtl";

package/dist/index.mjs

@@ -131,7 +131,7 @@ const DEFAULT_VIEWPORT = {
 	width: 800,
 	height: 600
 };
-const DEFAULT_STEP = 10;
+const DEFAULT_STEP$1 = 10;
 const DEFAULT_SHIFT_MULTIPLIER = 5;
 const PRIMARY_BUTTON = 0;
 const DEFAULT_MESSAGES = {
@@ -761,7 +761,7 @@ const createCanvas = (options) => {
 		const arrow = ARROWS.get(event.key);
 		if (arrow !== void 0) {
 			event.preventDefault();
-			const step = (options.keyboardStep ?? DEFAULT_STEP) * (event.shiftKey ? options.keyboardShiftMultiplier ?? DEFAULT_SHIFT_MULTIPLIER : 1);
+			const step = (options.keyboardStep ?? DEFAULT_STEP$1) * (event.shiftKey ? options.keyboardShiftMultiplier ?? DEFAULT_SHIFT_MULTIPLIER : 1);
 			moveFrom(index, arrow[0] * step, arrow[1] * step, arrow[2]);
 		} else if (event.key === "Enter") {
 			event.preventDefault();
@@ -982,8 +982,9 @@ const createControllable = (options) => {
 		version();
 		return options.value() ?? local;
 	};
+	const same = options.same ?? Object.is;
 	const request = (next) => {
-		if (next === current()) return;
+		if (same(next, current())) return;
 		if (options.value() === void 0) {
 			local = next;
 			setVersion((count) => count + 1);
@@ -1052,7 +1053,7 @@ const RATE_PERCENTS = [
 const SURFACE_SEEK_SECONDS = 5;
 const SEEK_STEP_SECONDS = 1;
 const SEEK_PAGE_SECONDS = 15;
-const clamp$1 = (value, max) => value < 0 ? 0 : value > max ? max : value;
+const clamp$2 = (value, max) => value < 0 ? 0 : value > max ? max : value;
 const mss = (seconds) => `${Math.floor(seconds / 60)}:${String(Math.floor(seconds) % 60).padStart(2, "0")}`;
 /**
 * APG media player primitive on Solid 2: playback state + attribute objects.
@@ -1089,7 +1090,7 @@ const createPlayer = (options) => {
 	const isActive = () => stage() === "playing" || stage() === "buffering";
 	const canPlay = () => stage() === "ready" || stage() === "paused" || stage() === "ended" || stage() === "buffering";
 	const moveTo = (seconds) => {
-		setPosition(clamp$1(seconds, duration()));
+		setPosition(clamp$2(seconds, duration()));
 	};
 	const play = () => {
 		if (!canPlay()) return;
@@ -1110,14 +1111,14 @@ const createPlayer = (options) => {
 	};
 	const commit = (seconds) => {
 		if (!known()) return;
-		const target = clamp$1(seconds, duration());
+		const target = clamp$2(seconds, duration());
 		if (stage() === "ended") setStage("paused");
 		moveTo(target);
 		options.onSeek?.(target);
 		options.adapter.seek(target);
 	};
 	const setVolume = (value) => {
-		requestVolume(clamp$1(value, 100));
+		requestVolume(clamp$2(value, 100));
 	};
 	const toggleMute = () => {
 		requestMuted(!muted());
@@ -4249,7 +4250,7 @@ const createMenubar = (options) => {
 };
 //#endregion
 //#region src/meter.ts
-const clamp = (value, lo, hi) => value < lo ? lo : value > hi ? hi : value;
+const clamp$1 = (value, lo, hi) => value < lo ? lo : value > hi ? hi : value;
 /**
 * APG Meter (https://www.w3.org/WAI/ARIA/apg/patterns/meter/): a graphical
 * display of a numeric value within a range. Platform: native (`<meter>`), so
@@ -4262,7 +4263,7 @@ const createMeter = (options = {}) => {
 	const value = () => {
 		const lo = min();
 		const hi = max();
-		return hi <= lo ? lo : clamp(options.value ?? 0, lo, hi);
+		return hi <= lo ? lo : clamp$1(options.value ?? 0, lo, hi);
 	};
 	const percent = () => {
 		const width = span();
@@ -4484,6 +4485,289 @@ const createRadioGroup = (options) => {
 	};
 };
 //#endregion
+//#region src/resizable-panels.ts
+const DEFAULT_MIN = 10;
+const DEFAULT_MAX = 80;
+const DEFAULT_STEP = 10;
+const FULL = 100;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** Percentages are reported at a hundredth: a pointer delta is never exact. */
+const round2 = (value) => Math.round(value * 100) / 100;
+const sameSizes = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+const KEY_TAGS$1 = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"Enter"
+]);
+const capture = (element, pointerId) => {
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+};
+const release = (element, pointerId) => {
+	try {
+		element.releasePointerCapture(pointerId);
+	} catch {}
+};
+const readStored = (key, count) => {
+	if (typeof localStorage === "undefined") return;
+	try {
+		const raw = localStorage.getItem(key);
+		if (raw === null) return;
+		const parsed = JSON.parse(raw);
+		if (Array.isArray(parsed) && parsed.length === count && parsed.every((value) => typeof value === "number" && Number.isFinite(value))) return parsed;
+	} catch {}
+};
+const writeStored = (key, sizes) => {
+	if (typeof localStorage === "undefined") return;
+	try {
+		localStorage.setItem(key, JSON.stringify(sizes));
+	} catch {}
+};
+/**
+* A group of N panes and N-1 separators, react-resizable-panels' model on the
+* APG window splitter's keyboard: sizes in percent of the group, always summing
+* to 100, each pane within `min..max`, a collapsible pane landing on
+* `collapsedSize`. The separator is the focusable widget (`role=separator`,
+* its `aria-valuenow` is the pane on its left); arrows/Home/End move the pair
+* around a separator and Enter collapses / restores, all as requests.
+*
+* A move only ever changes the separator's two neighbours, clamped by both
+* bounds. Collapsing hands the pane's space to the nearest pane that can take
+* it and cascades outward; restoring takes it back in the same order. The drag
+* is snapshot + delta: pointerdown remembers the layout, every move re-solves
+* from it, so dragging back past a clamp recovers exactly.
+*
+* Behaviour is `packages/apg-specs/specs/patterns/resizable-panels.qnt`; the
+* DOM is checked against it by the differential walk.
+*/
+const createResizablePanels = (options) => {
+	const panes = () => options.panes;
+	const count = () => panes().length;
+	const orientation = () => options.orientation ?? "vertical";
+	const step = () => options.step ?? DEFAULT_STEP;
+	const base = options.id ?? createUniqueId();
+	const paneId = (index) => panes()[index]?.id ?? `${base}-pane-${index}`;
+	const collapsedSize = (index) => panes()[index]?.collapsible === true ? panes()[index]?.collapsedSize ?? 0 : 0;
+	/** The smallest expanded size (a move never collapses through it). */
+	const minOf = (index) => panes()[index]?.min ?? DEFAULT_MIN;
+	/** The smallest committed size (a collapsible pane may sit at collapsedSize). */
+	const lowOf = (index) => panes()[index]?.collapsible === true ? collapsedSize(index) : minOf(index);
+	const highOf = (index) => panes()[index]?.max ?? DEFAULT_MAX;
+	/** Clamp every pane, then push the residual into the panes in order. */
+	const fit = (raw) => {
+		const next = panes().map((_, index) => clamp(round2(raw[index] ?? FULL / Math.max(count(), 1)), lowOf(index), highOf(index)));
+		let residual = round2(FULL - next.reduce((sum, value) => sum + value, 0));
+		for (let index = 0; index < next.length && residual !== 0; index += 1) {
+			const room = residual > 0 ? highOf(index) - (next[index] ?? 0) : (next[index] ?? 0) - lowOf(index);
+			const move = residual > 0 ? Math.min(residual, room) : Math.max(residual, -room);
+			next[index] = round2((next[index] ?? 0) + move);
+			residual = round2(residual - move);
+		}
+		return next;
+	};
+	/** Move `amount` percent into pane `index` (negative: out of it), taking from or
+	* giving to its neighbours nearest-first (right, then left), each within bounds. */
+	const shift = (sizes, index, amount) => {
+		const next = [...sizes];
+		let left = round2(amount);
+		const order = [];
+		for (let other = index + 1; other < next.length; other += 1) order.push(other);
+		for (let other = index - 1; other >= 0; other -= 1) order.push(other);
+		for (const other of order) {
+			if (left === 0) break;
+			const value = next[other] ?? 0;
+			const room = left > 0 ? Math.max(0, value - minOf(other)) : Math.max(0, highOf(other) - value);
+			const move = left > 0 ? Math.min(left, room) : Math.max(left, -room);
+			next[other] = round2(value - move);
+			left = round2(left - move);
+		}
+		next[index] = round2((next[index] ?? 0) + (round2(amount) - left));
+		return next;
+	};
+	/** Move the boundary between pane `index` and `index + 1` by `delta`. */
+	const movePair = (sizes, index, delta) => {
+		const a = sizes[index] ?? 0;
+		const b = sizes[index + 1] ?? 0;
+		const low = Math.max(minOf(index), round2(a + b - highOf(index + 1)));
+		const high = Math.min(highOf(index), round2(a + b - minOf(index + 1)));
+		const nextA = round2(clamp(a + delta, low, high));
+		const next = [...sizes];
+		next[index] = nextA;
+		next[index + 1] = round2(a + b - nextA);
+		return next;
+	};
+	const initialSizes = () => {
+		const stored = options.storageKey === void 0 ? void 0 : readStored(options.storageKey, count());
+		return fit(stored ?? options.defaultSizes ?? panes().map((pane) => pane.defaultSize ?? round2(FULL / Math.max(count(), 1))));
+	};
+	const start = initialSizes();
+	const [sizes, request] = createControllable({
+		value: () => options.sizes,
+		initial: start,
+		onChange: () => options.onSizesChange,
+		same: sameSizes
+	});
+	const [focusSeparator, setFocusSeparator] = createSignal(null);
+	const [resizing, setResizing] = createSignal(null);
+	const lastExpanded = start.map((value, index) => Math.max(value, minOf(index)));
+	createEffect(() => sizes(), (now) => {
+		now.forEach((value, index) => {
+			if (value > collapsedSize(index)) lastExpanded[index] = value;
+		});
+	});
+	const collapsed = (index) => panes()[index]?.collapsible === true && (sizes()[index] ?? 0) <= collapsedSize(index);
+	const movable = (index) => index >= 0 && index + 1 < count() && !collapsed(index) && !collapsed(index + 1);
+	let asked;
+	const commit = (next) => {
+		const fitted = fit(next);
+		asked = fitted;
+		request(fitted);
+	};
+	const move = (index, delta) => {
+		if (drag !== void 0 || !movable(index)) return;
+		commit(movePair(sizes(), index, delta));
+	};
+	const toggle = (index) => {
+		const pane = panes()[index];
+		if (drag !== void 0 || pane?.collapsible !== true) return;
+		if (collapsed(index)) commit(shift(sizes(), index, (lastExpanded[index] ?? lowOf(index)) - (sizes()[index] ?? 0)));
+		else commit(shift(sizes(), index, collapsedSize(index) - (sizes()[index] ?? 0)));
+	};
+	const keyDown = (index, key) => {
+		if (!KEY_TAGS$1.has(key)) return;
+		const vertical = orientation() === "vertical";
+		switch (key) {
+			case "ArrowLeft":
+				if (vertical) move(index, 0 - step());
+				break;
+			case "ArrowRight":
+				if (vertical) move(index, step());
+				break;
+			case "ArrowUp":
+				if (!vertical) move(index, 0 - step());
+				break;
+			case "ArrowDown":
+				if (!vertical) move(index, step());
+				break;
+			case "Home":
+				move(index, -100);
+				break;
+			case "End":
+				move(index, FULL);
+				break;
+			default: toggle(index);
+		}
+	};
+	let drag;
+	const axisOf = (event, axis) => axis === "x" ? event.clientX : event.clientY;
+	const lengthOf = (element) => {
+		const group = element.parentElement;
+		if (group === null) return 0;
+		const rect = group.getBoundingClientRect();
+		return orientation() === "vertical" ? rect.width : rect.height;
+	};
+	const onPointerDown = (index, event) => {
+		if (event.button !== 0) return;
+		if (drag !== void 0) {
+			release(drag.element, drag.pointerId);
+			drag = void 0;
+			setResizing(null);
+		}
+		setFocusSeparator(index);
+		if (!movable(index)) return;
+		const length = lengthOf(event.currentTarget);
+		if (length <= 0) return;
+		const axis = orientation() === "vertical" ? "x" : "y";
+		drag = {
+			separator: index,
+			element: event.currentTarget,
+			pointerId: event.pointerId,
+			start: axisOf(event, axis),
+			axis,
+			from: sizes(),
+			length
+		};
+		setResizing(index);
+		capture(event.currentTarget, event.pointerId);
+		event.preventDefault();
+	};
+	const onPointerMove = (event) => {
+		if (drag === void 0 || drag.pointerId !== event.pointerId) return;
+		const delta = (axisOf(event, drag.axis) - drag.start) / drag.length * FULL;
+		commit(movePair(drag.from, drag.separator, delta));
+	};
+	const onPointerEnd = (event) => {
+		if (drag === void 0 || drag.pointerId !== event.pointerId) return;
+		drag = void 0;
+		setResizing(null);
+		release(event.currentTarget, event.pointerId);
+	};
+	createEffect(() => options.sizes, (now) => {
+		if (now === void 0 || asked !== void 0 && sameSizes(now, asked)) return;
+		drag = void 0;
+		setResizing(null);
+	});
+	if (options.storageKey !== void 0) {
+		const storageKey = options.storageKey;
+		createEffect(() => sizes(), (now) => writeStored(storageKey, now));
+	}
+	const separatorProps = (index) => ({
+		id: `${base}-separator-${index}`,
+		role: "separator",
+		get "aria-orientation"() {
+			return orientation();
+		},
+		get "aria-valuenow"() {
+			return round2(sizes()[index] ?? 0);
+		},
+		get "aria-valuemin"() {
+			return panes()[index]?.min ?? DEFAULT_MIN;
+		},
+		get "aria-valuemax"() {
+			return highOf(index);
+		},
+		get "aria-controls"() {
+			return paneId(index);
+		},
+		get "aria-label"() {
+			const label = panes()[index]?.label;
+			return label === void 0 ? "Resize" : `Resize ${label}`;
+		},
+		tabindex: 0,
+		onKeyDown: (event) => {
+			if (KEY_TAGS$1.has(event.key)) event.preventDefault();
+			keyDown(index, event.key);
+		},
+		onFocus: () => setFocusSeparator(index),
+		onBlur: () => setFocusSeparator(null),
+		onPointerDown: (event) => onPointerDown(index, event),
+		onPointerMove,
+		onPointerUp: onPointerEnd,
+		onPointerCancel: onPointerEnd
+	});
+	return {
+		sizes,
+		collapsed,
+		resizing,
+		focusSeparator,
+		setFocusSeparator,
+		keyDown,
+		groupProps: {
+			role: "group",
+			get "aria-label"() {
+				return options.label;
+			}
+		},
+		paneProps: (index) => ({ id: paneId(index) }),
+		separatorProps
+	};
+};
+//#endregion
 //#region src/slider.ts
 const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
 /**
@@ -6991,4 +7275,4 @@ const createRearrangeableListbox = (options) => {
 	};
 };
 //#endregion
-export { 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, createDialogModal, createDisclosure, createFeed, createGrid, createLink, createListbox, createMenu, createMenubar, createMeter, createPlayer, createRadioGroup, createRearrangeableListbox, createSlider, createSliderMultiThumb, createSpinbutton, createSwitch, createTabs, createTimeline, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };
+export { 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, createDialogModal, createDisclosure, createFeed, createGrid, createLink, createListbox, createMenu, createMenubar, createMeter, createPlayer, createRadioGroup, createRearrangeableListbox, createResizablePanels, createSlider, createSliderMultiThumb, createSpinbutton, createSwitch, createTabs, createTimeline, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssints/headless",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Headless APG widgets on Solid 2: state plus attribute objects, no elements, no styling, each conformance-checked against its Quint spec",
   "license": "MIT",
   "repository": {