@cssints/headless 0.19.0 → 0.20.0

package/dist/index.mjs

@@ -2051,6 +2051,90 @@ const createCheckbox = (options = {}) => {
 		}
 	};
 };
+// src/field.ts
+const text = (value) => value === void 0 || value === "" ? void 0 : value;
+const external = (value) => (value === void 0 ? [] : typeof value === "string" ? [value] : value).filter((id) => id !== "");
+/**
+* The ARIA contract of a form field: a label, a control, a hint and an error.
+* There is no APG pattern for it (APG has no "form field"; the nearest is the
+* label and description rules of the accessible name computation), so the
+* contract comes from WAI-ARIA 1.2 (`aria-describedby`, `aria-invalid`,
+* `aria-required`) and HTML (`label[for]`, `required`), and from the
+* majority of Base UI Field, react-aria TextField and ariakit FormControl,
+* which list the description and the error message together. It is not checked
+* against a Quint spec; `test/field.browser.test.tsx` is its oracle.
+*
+* Decisions: the error does not replace the hint, both are listed, hint first
+* (the hint is what tells the user how to fix the error); an error implies
+* invalid and `invalid: false` overrides it; a hidden message is never
+* referenced, so `aria-describedby` has no dangling id. The error element is
+* `role="alert"` only while it is shown (a hidden element announces nothing, and
+* one that appears is announced); the hint is never an alert.
+*
+* `describedby` lists host-owned ids after the field's own: one refusal that
+* belongs to two controls is one form-level element (with its own `role`), named
+* by both. The field cannot know whether that element is shown: the host
+* passes the id only while it is.
+*
+* Options are read when an attribute is read: pass getters, never destructure.
+*/
+const createField = (options = {}) => {
+	const base = options.id ?? createUniqueId();
+	const controlId = `${base}-control`;
+	const labelId = `${base}-label`;
+	const hintId = `${base}-hint`;
+	const errorId = `${base}-error`;
+	const hint = () => text(options.hint);
+	const message = () => text(options.error) ?? (typeof options.invalid === "string" ? text(options.invalid) : void 0);
+	const invalid = () => options.invalid === false ? false : options.invalid === true || message() !== void 0;
+	const error = () => invalid() ? message() : void 0;
+	const describedIds = () => [
+		...hint() === void 0 ? [] : [hintId],
+		...error() === void 0 ? [] : [errorId],
+		...external(options.describedby)
+	];
+	return {
+		invalid,
+		hint,
+		error,
+		describedIds,
+		controlProps: {
+			id: controlId,
+			get "aria-describedby"() {
+				const ids = describedIds();
+				return ids.length === 0 ? void 0 : ids.join(" ");
+			},
+			get "aria-invalid"() {
+				return invalid() ? "true" : void 0;
+			},
+			get "aria-required"() {
+				return options.required === true ? "true" : void 0;
+			},
+			get required() {
+				return options.required === true ? true : void 0;
+			}
+		},
+		labelProps: {
+			id: labelId,
+			for: controlId
+		},
+		hintProps: {
+			id: hintId,
+			get hidden() {
+				return hint() === void 0;
+			}
+		},
+		errorProps: {
+			id: errorId,
+			get hidden() {
+				return error() === void 0;
+			},
+			get role() {
+				return error() === void 0 ? void 0 : "alert";
+			}
+		}
+	};
+};
 // src/checkbox-group.ts
 const CHILDREN = [
 	"c0",
@@ -2089,7 +2173,17 @@ const nextFocus = (focus) => {
 * pass `value` + `onValueChange` to own the checked subset. The checked set is
 * packed internally so it rides the scalar `createControllable`.
 *
-* Behaviour is checked against `specs/apg/checkbox-group.qnt` by the bridge.
+* The name, the description and the error are `createField`'s contract on the
+* `role="group"` element (`aria-label` / `aria-labelledby`, `aria-describedby`,
+* `aria-invalid`, an error element that is `role="alert"` while it is shown), so
+* a group reads like the fields around it. The group is not a `<label for>`
+* target: a host names a visible label element's id with `labelledby`, or passes
+* `label` without one.
+*
+* Behaviour is checked against `specs/apg/checkbox-group.qnt` by the bridge. That
+* model leaves labelling out on purpose ("shift+Tab, accessible names,
+* fieldset/legend or role=group labelling" in its header), so the field contract
+* is checked by plain assertions in `test/checkbox-group.browser.test.tsx`.
 */
 const createCheckboxGroup = (options) => {
 	const values = options.values;
@@ -2100,6 +2194,18 @@ const createCheckboxGroup = (options) => {
 		initial: packedOf(options.defaultValue ?? []),
 		onChange: () => (next) => options.onValueChange?.(labelsOf(next))
 	});
+	const field = createField({
+		id: options.id,
+		get invalid() {
+			return options.invalid;
+		},
+		get error() {
+			return options.error;
+		},
+		get describedby() {
+			return options.describedby;
+		}
+	});
 	const [memory, setMemory] = createSignal(normalizeChildren([]));
 	const [remember, setRememberSignal] = createSignal(options.remember === true);
 	const [focused, setFocused] = createSignal("none");
@@ -2157,6 +2263,9 @@ const createCheckboxGroup = (options) => {
 		focused,
 		parentChecked,
 		checkedValues: () => selectedValues(children()),
+		error: field.error,
+		invalid: field.invalid,
+		describedIds: field.describedIds,
 		click: (target) => {
 			activate(target);
 		},
@@ -2179,7 +2288,20 @@ const createCheckboxGroup = (options) => {
 			requestPacked(packed(normalizeChildren(next)));
 		},
 		groupProps: {
+			id: field.controlProps.id,
 			role: "group",
+			get "aria-label"() {
+				return options.label;
+			},
+			get "aria-labelledby"() {
+				return options.labelledby;
+			},
+			get "aria-describedby"() {
+				return field.controlProps["aria-describedby"];
+			},
+			get "aria-invalid"() {
+				return field.controlProps["aria-invalid"];
+			},
 			onKeyDown: (event) => {
 				if (event.key === "Tab") {
 					event.preventDefault();
@@ -2190,6 +2312,7 @@ const createCheckboxGroup = (options) => {
 				}
 			}
 		},
+		errorProps: field.errorProps,
 		parentProps: {
 			role: "checkbox",
 			get "aria-checked"() {
@@ -2506,81 +2629,481 @@ const createCombobox = (options) => {
 			}
 		}
 	};
-};
-// src/dialog-modal.ts
-/**
-* APG Dialog (Modal) on Solid 2. `modal` adds `aria-modal`. Focus moves into
-* the dialog on open and is the host's to restore on close (the fixture does,
-* for dismiss / Escape). The full stack/focus-trap machine lives in
-* `specs/apg/dialog-modal.qnt`; the generated model is the oracle in tests, not
-* loaded here.
-*
-* Request/commit (map ticket `rt1p`): uncontrolled by default (`defaultOpen`);
-* pass `value` + `onOpenChange` to own the open state. `openDialog` / `close`
-* are requests the host may ignore.
-*/
-const createDialogModal = (options = {}) => {
-	const base = options.id ?? createUniqueId();
-	const modal = options.modal ?? true;
-	const role = options.role ?? "dialog";
-	const [open, requestOpen] = createControllable({
-		value: () => options.value,
-		initial: options.defaultOpen ?? false,
-		onChange: () => options.onOpenChange
+};
+// src/dialog-modal.ts
+/**
+* APG Dialog (Modal) on Solid 2. `modal` adds `aria-modal`. Focus moves into
+* the dialog on open and is the host's to restore on close (the fixture does,
+* for dismiss / Escape). The full stack/focus-trap machine lives in
+* `specs/apg/dialog-modal.qnt`; the generated model is the oracle in tests, not
+* loaded here.
+*
+* Request/commit (map ticket `rt1p`): uncontrolled by default (`defaultOpen`);
+* pass `value` + `onOpenChange` to own the open state. `openDialog` / `close`
+* are requests the host may ignore.
+*/
+const createDialogModal = (options = {}) => {
+	const base = options.id ?? createUniqueId();
+	const modal = options.modal ?? true;
+	const role = options.role ?? "dialog";
+	const [open, requestOpen] = createControllable({
+		value: () => options.value,
+		initial: options.defaultOpen ?? false,
+		onChange: () => options.onOpenChange
+	});
+	const openDialog = () => requestOpen(true);
+	const close = () => requestOpen(false);
+	return {
+		open,
+		openDialog,
+		close,
+		triggerProps: {
+			id: `${base}-trigger`,
+			"aria-haspopup": "dialog",
+			get "aria-expanded"() {
+				return open() ? "true" : "false";
+			},
+			"aria-controls": `${base}-dialog`,
+			onClick: () => openDialog(),
+			onKeyDown: (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					openDialog();
+				} else if (event.key === "Escape" && open()) close();
+			}
+		},
+		dialogProps: {
+			id: `${base}-dialog`,
+			role,
+			get "aria-modal"() {
+				return modal && open() ? "true" : void 0;
+			},
+			"aria-labelledby": options.labelledby,
+			"aria-describedby": options.describedby ?? (role === "alertdialog" ? "description" : void 0),
+			tabindex: -1,
+			get hidden() {
+				return !open();
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && !options.keyboardDismissDisabled) {
+					event.preventDefault();
+					close();
+				}
+			}
+		},
+		backdropProps: {
+			id: `${base}-backdrop`,
+			get hidden() {
+				return !open();
+			},
+			onClick: () => {
+				if (options.dismissable ?? true) close();
+			}
+		},
+		dismissProps: {
+			id: `${base}-dismiss`,
+			type: "button",
+			onClick: () => close()
+		}
+	};
+};
+// 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/status.ts
+/**
+* APG Alert's polite sibling: one `role=status` live region whose text the host
+* replaces ("Link copied", "Saved"). It is not a queue: a second message shows
+* in place of the first, so a burst reads as the last state, not as N alerts.
+* The region is rendered once and stays mounted, which is what makes a change
+* of its text announced.
+*
+* A status is never for errors: an error that needs attention now is
+* `createAlert` (`role=alert`, assertive), and a message with a title, a
+* description and a timeout is `createToast`.
+*/
+const createStatus = (options = {}) => {
+	const id = options.id ?? createUniqueId();
+	const [message, setMessage] = createSignal();
+	return {
+		message,
+		show: (text) => {
+			setMessage(text);
+		},
+		clear: () => {
+			setMessage(void 0);
+		},
+		statusProps: {
+			id,
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	};
+};
+// src/textbox.ts
+const control = (field, options) => ({
+	...field.controlProps,
+	get type() {
+		return options.type ?? "text";
+	},
+	get autoComplete() {
+		return options.autoComplete;
+	},
+	get spellcheck() {
+		if (options.spellCheck === void 0) return;
+		return options.spellCheck ? "true" : "false";
+	},
+	get autocapitalize() {
+		return options.autoCapitalize;
+	},
+	get inputmode() {
+		return options.inputMode;
+	},
+	get maxlength() {
+		return options.maxLength;
+	},
+	get readOnly() {
+		return options.readOnly === true ? true : void 0;
+	},
+	get disabled() {
+		return options.disabled === true ? true : void 0;
+	},
+	get name() {
+		return options.name;
+	},
+	get dir() {
+		return options.dir;
+	},
+	get placeholder() {
+		return options.placeholder;
+	},
+	onInput: (event) => {
+		options.onValueChange?.(event.currentTarget.value);
+	}
+});
+/**
+* A text input with the field contract attached: label, hint, error (announced),
+* `aria-describedby` and `aria-invalid` come from `createField`; this adds the
+* props a host forgets — autofill tokens, spellcheck, inputmode, maxlength, the
+* disabled/readOnly pair. Platform: native (`input` is its own APG-equivalent;
+* no primitive re-implements text editing, which is why there is no key
+* handling here).
+*
+* Both `required` and `aria-required` are emitted: the native attribute is what
+* the browser enforces, the ARIA one is what a custom widget reading the same
+* props needs. A host that validates itself passes `noValidate` on the form
+* rather than dropping the attribute.
+*/
+const createTextInput = (options = {}) => {
+	const field = createField(options);
+	return {
+		...field,
+		controlProps: control(field, options)
+	};
+};
+/**
+* The same contract for a textarea, plus rows, wrap and resize. `resize` is a
+* style because CSS has no attribute for it; `none` is the value a layout that
+* owns its own height wants.
+*/
+const createTextArea = (options = {}) => {
+	const field = createField(options);
+	return {
+		...field,
+		controlProps: {
+			...control(field, options),
+			get rows() {
+				return options.rows;
+			},
+			get wrap() {
+				return options.wrap;
+			},
+			get style() {
+				return options.resize === void 0 ? void 0 : { resize: options.resize };
+			}
+		}
+	};
+};
+// src/command-palette.ts
+const countLabel = (count) => count === 0 ? "No commands" : count === 1 ? "1 command" : `${count} commands`;
+/**
+* A command palette: `createDialogModal` (a modal dialog, announced as one),
+* `createTextInput` (a `searchbox`, not a combobox — choosing runs a command,
+* it does not complete the field) and one filtered list. Focus stays in the
+* field; `aria-activedescendant` names the highlighted option, and ↓ on the
+* last / ↑ on the first return the highlight to the field. Home/End are menu
+* keys only while the field is empty, so the caret keeps them while typing.
+* Filtering is a plain case-insensitive substring match on the label and the
+* keywords, no fuzzy scoring: a palette is short and stable, and ranking
+* (recency, scopes) is a policy the host owns.
+*
+* The host's: rendering and grouping (the `group` field, headings, the CSS),
+* async commands (a rejected `run` is the host's to report), and any close
+* other than Escape / a command. `runActive` closes before it runs.
+*/
+const createCommandPalette = (options) => {
+	const corpus = options.commands;
+	const base = createUniqueId();
+	const titleId = `${base}-title`;
+	const listId = `${base}-list`;
+	const optionId = (id) => `${base}-option-${id}`;
+	const labels = {
+		title: options.labels?.title ?? "Command palette",
+		placeholder: options.labels?.placeholder ?? "Type a command",
+		empty: options.labels?.empty ?? "No commands found",
+		results: options.labels?.results ?? countLabel
+	};
+	const filter = (text) => {
+		const needle = text.toLowerCase();
+		return corpus.filter((command) => command.label.toLowerCase().includes(needle) || (command.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle))).map(({ id, label, group }) => ({
+			id,
+			label,
+			group
+		}));
+	};
+	const [query, setQueryRaw] = createSignal("");
+	const [active, setActiveRaw] = createSignal(0);
+	const results = () => filter(query());
+	const dialog = createDialogModal({
+		id: base,
+		role: "dialog",
+		labelledby: titleId,
+		value: options.open,
+		onOpenChange: (open) => options.onOpenChange?.(open)
+	});
+	const status = createStatus();
+	const setQuery = (text) => {
+		setQueryRaw(text);
+		setActiveRaw(filter(text).length > 0 ? 0 : -1);
+	};
+	const run = (id) => {
+		const chosen = corpus.find((command) => command.id === id);
+		if (chosen === void 0) return;
+		dialog.close();
+		return chosen.run();
+	};
+	const runActive = () => {
+		const current = results()[active()];
+		return current === void 0 ? void 0 : run(current.id);
+	};
+	const onKeyDown = (event) => {
+		if (event.isComposing) return;
+		const last = results().length - 1;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				setActiveRaw(active() < last ? active() + 1 : -1);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				setActiveRaw(active() > 0 ? active() - 1 : last);
+				return;
+			case "Home":
+			case "End":
+				if (query() !== "") return;
+				event.preventDefault();
+				setActiveRaw(event.key === "Home" ? last >= 0 ? 0 : -1 : last);
+				return;
+			case "Enter":
+				event.preventDefault();
+				runActive();
+				return;
+			default: return;
+		}
+	};
+	let returnFocus = null;
+	createEffect(() => dialog.open(), (isOpen) => {
+		if (isOpen) {
+			returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			document.getElementById(`${base}-control`)?.focus();
+			return;
+		}
+		setQueryRaw("");
+		setActiveRaw(0);
+		const back = returnFocus;
+		returnFocus = null;
+		if (back !== null && back.isConnected) back.focus();
+	});
+	createEffect(() => [dialog.open(), results().length], ([isOpen, count]) => {
+		if (isOpen) status.show(labels.results(count));
+		else status.clear();
+	});
+	const input = createTextInput({
+		id: base,
+		type: "text",
+		autoComplete: "off",
+		spellCheck: false,
+		placeholder: labels.placeholder,
+		onValueChange: setQuery
 	});
-	const openDialog = () => requestOpen(true);
-	const close = () => requestOpen(false);
 	return {
-		open,
-		openDialog,
-		close,
-		triggerProps: {
-			id: `${base}-trigger`,
-			"aria-haspopup": "dialog",
-			get "aria-expanded"() {
-				return open() ? "true" : "false";
-			},
-			"aria-controls": `${base}-dialog`,
-			onClick: () => openDialog(),
-			onKeyDown: (event) => {
-				if (event.key === "Enter" || event.key === " ") {
-					event.preventDefault();
-					openDialog();
-				} else if (event.key === "Escape" && open()) close();
-			}
-		},
-		dialogProps: {
-			id: `${base}-dialog`,
-			role,
-			get "aria-modal"() {
-				return modal && open() ? "true" : void 0;
+		open: dialog.open,
+		openPalette: dialog.openDialog,
+		closePalette: dialog.close,
+		query,
+		setQuery,
+		active,
+		setActive: (index) => setActiveRaw(Math.max(-1, Math.min(index, results().length - 1))),
+		results,
+		labels,
+		status: status.message,
+		inputProps: {
+			...input.controlProps,
+			role: "searchbox",
+			get value() {
+				return query();
 			},
-			"aria-labelledby": options.labelledby,
-			"aria-describedby": options.describedby ?? (role === "alertdialog" ? "description" : void 0),
-			tabindex: -1,
-			get hidden() {
-				return !open();
+			"aria-controls": listId,
+			get "aria-activedescendant"() {
+				const current = results()[active()];
+				return current === void 0 ? void 0 : optionId(current.id);
 			},
-			onKeyDown: (event) => {
-				if (event.key === "Escape" && !options.keyboardDismissDisabled) {
-					event.preventDefault();
-					close();
-				}
-			}
+			onKeyDown
 		},
-		backdropProps: {
-			id: `${base}-backdrop`,
-			get hidden() {
-				return !open();
+		listProps: {
+			id: listId,
+			role: "listbox",
+			"aria-labelledby": titleId,
+			onMouseDown: (event) => event.preventDefault()
+		},
+		optionProps: (id) => ({
+			id: optionId(id),
+			role: "option",
+			get "aria-selected"() {
+				return results()[active()]?.id === id ? "true" : "false";
 			},
+			tabindex: -1,
 			onClick: () => {
-				if (options.dismissable ?? true) close();
+				if (results().some((result) => result.id === id)) run(id);
+			},
+			onMouseEnter: () => {
+				const index = results().findIndex((result) => result.id === id);
+				if (index >= 0) setActiveRaw(index);
 			}
-		},
-		dismissProps: {
-			id: `${base}-dismiss`,
-			type: "button",
-			onClick: () => close()
+		}),
+		emptyProps: { get hidden() {
+			return results().length > 0;
+		} },
+		statusProps: status.statusProps,
+		dialogProps: dialog.dialogProps,
+		backdropProps: dialog.backdropProps,
+		titleProps: { id: titleId },
+		runActive,
+		attach: () => {
+			const hotkeys = createHotkeys();
+			const unbind = hotkeys.bind({
+				keys: options.hotkey ?? "mod+k",
+				allowInEditable: true,
+				onTrigger: () => {
+					if (dialog.open()) dialog.close();
+					else dialog.openDialog();
+				}
+			});
+			return () => {
+				unbind();
+				hotkeys.dispose();
+			};
 		}
 	};
 };
@@ -3233,90 +3756,6 @@ const createFeed = (options = {}) => {
 		}
 	};
 };
-// src/field.ts
-const text = (value) => value === void 0 || value === "" ? void 0 : value;
-const external = (value) => (value === void 0 ? [] : typeof value === "string" ? [value] : value).filter((id) => id !== "");
-/**
-* The ARIA contract of a form field: a label, a control, a hint and an error.
-* There is no APG pattern for it (APG has no "form field"; the nearest is the
-* label and description rules of the accessible name computation), so the
-* contract comes from WAI-ARIA 1.2 (`aria-describedby`, `aria-invalid`,
-* `aria-required`) and HTML (`label[for]`, `required`), and from the
-* majority of Base UI Field, react-aria TextField and ariakit FormControl,
-* which list the description and the error message together. It is not checked
-* against a Quint spec; `test/field.browser.test.tsx` is its oracle.
-*
-* Decisions: the error does not replace the hint, both are listed, hint first
-* (the hint is what tells the user how to fix the error); an error implies
-* invalid and `invalid: false` overrides it; a hidden message is never
-* referenced, so `aria-describedby` has no dangling id. The error element is
-* `role="alert"` only while it is shown (a hidden element announces nothing, and
-* one that appears is announced); the hint is never an alert.
-*
-* `describedby` lists host-owned ids after the field's own: one refusal that
-* belongs to two controls is one form-level element (with its own `role`), named
-* by both. The field cannot know whether that element is shown: the host
-* passes the id only while it is.
-*
-* Options are read when an attribute is read: pass getters, never destructure.
-*/
-const createField = (options = {}) => {
-	const base = options.id ?? createUniqueId();
-	const controlId = `${base}-control`;
-	const labelId = `${base}-label`;
-	const hintId = `${base}-hint`;
-	const errorId = `${base}-error`;
-	const hint = () => text(options.hint);
-	const message = () => text(options.error) ?? (typeof options.invalid === "string" ? text(options.invalid) : void 0);
-	const invalid = () => options.invalid === false ? false : options.invalid === true || message() !== void 0;
-	const error = () => invalid() ? message() : void 0;
-	const describedIds = () => [
-		...hint() === void 0 ? [] : [hintId],
-		...error() === void 0 ? [] : [errorId],
-		...external(options.describedby)
-	];
-	return {
-		invalid,
-		hint,
-		error,
-		describedIds,
-		controlProps: {
-			id: controlId,
-			get "aria-describedby"() {
-				const ids = describedIds();
-				return ids.length === 0 ? void 0 : ids.join(" ");
-			},
-			get "aria-invalid"() {
-				return invalid() ? "true" : void 0;
-			},
-			get "aria-required"() {
-				return options.required === true ? "true" : void 0;
-			},
-			get required() {
-				return options.required === true ? true : void 0;
-			}
-		},
-		labelProps: {
-			id: labelId,
-			for: controlId
-		},
-		hintProps: {
-			id: hintId,
-			get hidden() {
-				return hint() === void 0;
-			}
-		},
-		errorProps: {
-			id: errorId,
-			get hidden() {
-				return error() === void 0;
-			},
-			get role() {
-				return error() === void 0 ? void 0 : "alert";
-			}
-		}
-	};
-};
 // src/pagination.ts
 const clamp$2 = (value, min, max) => Math.min(Math.max(value, min), max);
 /**
@@ -4289,107 +4728,219 @@ const createGrid = (options = {}) => {
 			if (!flag) requestSort(-1);
 		}
 	};
-};
-// 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).
+};
+// src/knob.ts
+/** The pointer must travel this far before the drag picks a mode. */
+const LOCK_PX = 6;
+/** A slide is only locked while the other axis stays this small a share of the movement. */
+const SLIDE_VARIANCE = .35;
+/** The radius (px) at which a full turn sweeps the whole range; farther out is finer. */
+const REFERENCE_RADIUS = 100;
+/** The radius floor of the spin sensitivity, so a grab at the centre is not wildly coarse. */
+const MIN_SPIN_RADIUS = 25;
+/** Pixels of slide that move the value by the whole range. */
+const SLIDE_PX_PER_RANGE = 200;
+const angleOf = (x, y) => Math.atan2(y, x) * 180 / Math.PI;
+const angleDelta = (from, to) => {
+	const diff = (to - from) % 360;
+	return diff > 180 ? diff - 360 : diff < -180 ? diff + 360 : diff;
+};
+/**
+* A virtual knob after GarageBand's (https://jherrm.github.io/knobs/): one
+* control turned three ways — spun around its centre, or slid vertically or
+* horizontally, one gesture locked per drag. Plain Solid signals, no elements,
+* no styling. **No ARIA role exists for a dial**, so the knob is a `role=slider`
+* with `aria-valuenow` / `aria-valuetext`; the value the host renders in
+* `valueProps` is the live announcement (`role=status`), and a numeric field
+* must sit next to the dial, because a dial is never the only control.
+*
+* Request/commit (map ticket `rt1p`): uncontrolled by default (`defaultValue`);
+* pass `value` + `onValueChange` to own the value. A key, a wheel, a drag and
+* `setValue`/`stepBy` are requests the host may ignore.
+*
+* Gestures (`gesture`, default "both"), decided once on the first meaningful
+* movement so a drag never switches modes:
+* - a movement that stays on one axis (the other axis under `SLIDE_VARIANCE` of
+*   it) locks a slide — the reference's "slide in a straight line";
+* - any other movement is a turn around the centre: the angle the pointer
+*   covers is the value, and the farther from the centre the finer it is;
+* - `gesture: "spin"` / `"slide"` disable the other.
+*
+* A vertical slide turns the knob the way the grabbed side would turn a real
+* one: down on the right half is clockwise (up in value), down on the left half
+* counter-clockwise. A horizontal slide uses the same left/right side (the
+* reference picks top/bottom for this one; one rule for both is simpler to
+* learn). `wrap` makes the dial continuous instead of clamped.
+*
+* ponytail: no momentum/inertia and no `disabled` — the reference has a
+* deceleration tail, and no host here has asked for one; add inertia in the
+* host's rAF loop if a look needs it.
 */
-const createHotkeys = (options = {}) => {
-	const isApple = options.isApple ?? detectsApple();
-	const bindings = [];
-	let listening = false;
-	let disposed = false;
+const createKnob = (options = {}) => {
+	const min = options.min ?? 0;
+	const max = options.max ?? 100;
+	const step = options.step ?? 1;
+	const span = max - min;
+	const base = options.id ?? createUniqueId();
+	const wrap = () => options.wrap === true;
+	const bound = (next) => {
+		if (span <= 0) return min;
+		if (wrap()) return min + ((next - min) % span + span) % span;
+		return Math.max(min, Math.min(max, next));
+	};
+	const quantize = (next) => {
+		const stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;
+		return bound(Number(stepped.toPrecision(12)));
+	};
+	const [value, request] = createControllable({
+		value: () => options.value,
+		initial: quantize(options.defaultValue ?? min + span / 2),
+		onChange: () => options.onValueChange
+	});
+	const commit = (next) => request(quantize(next));
+	const percentOf = (at) => {
+		if (span <= 0) return 0;
+		const fraction = (at - min) / span;
+		return wrap() ? fraction - Math.floor(fraction) : Math.max(0, Math.min(1, fraction));
+	};
+	const stepBy = (delta) => commit(value() + delta);
 	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;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowRight":
+				stepBy(step);
+				break;
+			case "ArrowDown":
+			case "ArrowLeft":
+				stepBy(-step);
+				break;
+			case "PageUp":
+				stepBy(step * 10);
+				break;
+			case "PageDown":
+				stepBy(-step * 10);
+				break;
+			case "Home":
+				commit(min);
+				break;
+			case "End":
+				commit(max);
+				break;
+			default: return;
 		}
+		event.preventDefault();
 	};
-	const stop = () => {
-		if (!listening) return;
-		listening = false;
-		document.removeEventListener("keydown", onKeyDown, true);
+	let drag;
+	const modeFor = (current, event) => {
+		if (options.gesture === "spin") return "spin";
+		const dx = event.clientX - current.fromX;
+		const dy = event.clientY - current.fromY;
+		const vertical = Math.abs(dy);
+		const horizontal = Math.abs(dx);
+		const straight = Math.min(vertical, horizontal) <= Math.max(vertical, horizontal) * SLIDE_VARIANCE;
+		if (options.gesture !== "slide" && !straight) return "spin";
+		return vertical >= horizontal ? "vertical" : "horizontal";
 	};
-	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);
+	const pointerDown = (event) => {
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		const element = event.currentTarget;
+		if (!(element instanceof Element)) return;
+		try {
+			element.setPointerCapture(event.pointerId);
+		} catch {}
+		const rect = element.getBoundingClientRect();
+		const centreX = rect.left + rect.width / 2;
+		const centreY = rect.top + rect.height / 2;
+		const startAngle = angleOf(event.clientX - centreX, event.clientY - centreY);
+		drag = {
+			pointerId: event.pointerId,
+			centreX,
+			centreY,
+			side: event.clientX >= centreX ? 1 : -1,
+			fromX: event.clientX,
+			fromY: event.clientY,
+			startAngle,
+			raw: value(),
+			mode: void 0,
+			lastAngle: startAngle,
+			lastX: event.clientX,
+			lastY: event.clientY
+		};
+	};
+	const pointerMove = (event) => {
+		const current = drag;
+		if (current === void 0 || current.pointerId !== event.pointerId) return;
+		if (current.mode === void 0) {
+			if (Math.hypot(event.clientX - current.fromX, event.clientY - current.fromY) < LOCK_PX) return;
+			current.mode = modeFor(current, event);
+			if (current.mode === "spin") current.lastAngle = current.startAngle;
+			else {
+				current.lastX = current.fromX;
+				current.lastY = current.fromY;
 			}
-			return () => {
-				const at = bindings.indexOf(entry);
-				if (at === -1) return;
-				bindings.splice(at, 1);
-				if (bindings.length === 0) stop();
-			};
+		}
+		if (current.mode === "spin") {
+			const angle = angleOf(event.clientX - current.centreX, event.clientY - current.centreY);
+			const delta = angleDelta(current.lastAngle, angle);
+			current.lastAngle = angle;
+			const radius = Math.hypot(event.clientX - current.centreX, event.clientY - current.centreY);
+			const perDegree = span / 360 * (REFERENCE_RADIUS / Math.max(radius, MIN_SPIN_RADIUS));
+			current.raw = bound(current.raw + delta * perDegree);
+		} else {
+			const pixels = current.mode === "vertical" ? event.clientY - current.lastY : event.clientX - current.lastX;
+			current.lastX = event.clientX;
+			current.lastY = event.clientY;
+			current.raw = bound(current.raw + pixels * (span / SLIDE_PX_PER_RANGE) * current.side);
+		}
+		commit(current.raw);
+	};
+	const pointerUp = (event) => {
+		const current = drag;
+		if (current === void 0 || current.pointerId !== event.pointerId) return;
+		drag = void 0;
+		const target = event.currentTarget;
+		if (target instanceof Element) try {
+			target.releasePointerCapture(event.pointerId);
+		} catch {}
+	};
+	const onWheel = (event) => {
+		if (event.deltaY === 0) return;
+		event.preventDefault();
+		stepBy(event.deltaY < 0 ? step : -step);
+	};
+	return {
+		value,
+		setValue: commit,
+		percentOf,
+		stepBy,
+		knobProps: {
+			role: "slider",
+			get tabindex() {
+				return 0;
+			},
+			"aria-valuemin": String(min),
+			"aria-valuemax": String(max),
+			get "aria-valuenow"() {
+				return String(value());
+			},
+			get "aria-valuetext"() {
+				const format = options.format;
+				return format === void 0 ? String(value()) : format(value());
+			},
+			get "aria-label"() {
+				return options.labels?.knob ?? "Knob";
+			},
+			onKeyDown,
+			onPointerDown: pointerDown,
+			onPointerMove: pointerMove,
+			onPointerUp: pointerUp,
+			onPointerCancel: pointerUp,
+			onWheel
 		},
-		dispose: () => {
-			disposed = true;
-			bindings.length = 0;
-			stop();
+		valueProps: {
+			id: `${base}-value`,
+			role: "status",
+			"aria-live": "polite"
 		}
 	};
 };
@@ -4820,9 +5371,11 @@ const createMenu = (options) => {
 	const disabled = new Set(options.disabled ?? []);
 	for (const [index, item] of items.entries()) if (item.disabled) disabled.add(index);
 	const held = (options.triggerMode ?? "outside") === "held";
-	let level = 0;
-	let index = -1;
-	let open = options.defaultOpen ?? false;
+	const [isOpen, requestOpen] = createControllable({
+		value: () => options.open,
+		initial: options.defaultOpen === true,
+		onChange: () => options.onOpenChange
+	});
 	let checked = new Set(options.defaultChecked ?? []);
 	const variantChoice = () => {
 		if (options.variant === "mixed") return 1;
@@ -4858,57 +5411,80 @@ const createMenu = (options) => {
 		version();
 		return read();
 	};
-	if (open) {
-		level = 2;
-		index = 0;
-	} else if (held) level = 1;
+	let closed = held ? 1 : 0;
+	let index = 0;
+	let seenOpen = isOpen();
 	const isDisabled = (i) => disabled.has(i);
-	const setFocus = (nextLevel, nextIndex) => {
-		level = nextLevel;
-		index = nextIndex;
+	const sync = () => {
+		const now = isOpen();
+		if (now === seenOpen) return;
+		seenOpen = now;
+		index = now ? 0 : -1;
+		closed = now ? closed : 1;
+	};
+	const level = () => {
+		sync();
+		return isOpen() ? 2 : closed;
+	};
+	const focusedIndex = () => {
+		sync();
+		return index;
+	};
+	const focusItem = (next) => {
+		index = next;
 		bump();
 	};
+	const move = (want, nextIndex, nextClosed) => {
+		const apply = () => {
+			seenOpen = isOpen();
+			index = want ? nextIndex : -1;
+			closed = nextClosed;
+			bump();
+		};
+		if (isOpen() === want) {
+			apply();
+			return;
+		}
+		requestOpen(want);
+		if (options.open === void 0) {
+			apply();
+			return;
+		}
+		queueMicrotask(() => {
+			if (isOpen() === want) apply();
+		});
+	};
 	const openOn = (target) => {
-		level = 2;
-		index = target;
-		open = true;
-		bump();
-		options.onOpenChange?.(true);
+		move(true, target, 1);
 	};
 	const closeToTrigger = () => {
-		level = 1;
-		index = -1;
-		open = false;
-		bump();
-		options.onOpenChange?.(false);
+		move(false, -1, 1);
 	};
 	const focusTrigger = () => {
-		if (level === 0) setFocus(1, -1);
+		if (level() === 0) {
+			closed = 1;
+			bump();
+		}
 	};
 	const leave = () => {
-		const wasOpen = open;
-		level = held ? 1 : 0;
-		index = -1;
-		open = false;
-		bump();
-		if (wasOpen) options.onOpenChange?.(false);
+		move(false, -1, held ? 1 : 0);
 	};
 	const clickTrigger = () => {
-		if (open) closeToTrigger();
+		if (isOpen()) closeToTrigger();
 		else openOn(0);
 	};
 	const openMenu = () => {
-		if (!open) openOn(0);
+		if (!isOpen()) openOn(0);
 	};
 	const closeMenu = () => {
-		if (open) closeToTrigger();
+		if (isOpen()) closeToTrigger();
 	};
 	const activate = (close) => {
-		if (level === 1) {
+		if (level() === 1) {
 			openOn(0);
 			return;
 		}
-		if (level !== 2 || index < 0 || isDisabled(index)) return;
+		if (level() !== 2 || index < 0 || isDisabled(index)) return;
 		const item = items[index];
 		if (item === void 0) return;
 		if (item.kind === "checkbox") {
@@ -4949,23 +5525,23 @@ const createMenu = (options) => {
 				activate(false);
 				break;
 			case "ArrowDown":
-				if (level === 1) openOn(0);
-				else if (level === 2) setFocus(2, wrapNext(index));
+				if (level() === 1) openOn(0);
+				else if (level() === 2) focusItem(wrapNext(focusedIndex()));
 				break;
 			case "ArrowUp":
-				if (level === 1) openOn(count - 1);
-				else if (level === 2) setFocus(2, wrapPrev(index));
+				if (level() === 1) openOn(count - 1);
+				else if (level() === 2) focusItem(wrapPrev(focusedIndex()));
 				break;
 			case "Home":
-				if (level === 2) setFocus(2, 0);
+				if (level() === 2) focusItem(0);
 				break;
 			case "End":
-				if (level === 2) setFocus(2, count - 1);
+				if (level() === 2) focusItem(count - 1);
 				break;
 			case "Escape":
-				if (level === 2) closeToTrigger();
+				if (level() === 2) closeToTrigger();
 				break;
-			case "Tab": if (level !== 0) leave();
+			case "Tab": if (level() !== 0) leave();
 		}
 	};
 	const search = (from, text) => {
@@ -4976,36 +5552,36 @@ const createMenu = (options) => {
 		}
 	};
 	const type = (text) => {
-		if (!open || text.length === 0) return;
+		if (!isOpen() || text.length === 0) return;
 		buffer += text;
 		if (bufferTimer !== void 0) clearTimeout(bufferTimer);
 		bufferTimer = setTimeout(() => {
 			buffer = "";
 		}, prefs.typeaheadDelayMs);
-		const match = search(index >= 0 ? index : 0, buffer);
-		if (match !== void 0) setFocus(2, match);
+		const from = focusedIndex() >= 0 ? focusedIndex() : 0;
+		const match = search(from, buffer);
+		if (match !== void 0) focusItem(match);
 	};
 	const codeOf = (i) => i % 2 === 0 ? 1 : 2;
 	const typeaheadCode = (code) => {
-		if (!open) return;
-		const from = index >= 0 ? index : 0;
+		if (!isOpen()) return;
+		const from = focusedIndex() >= 0 ? focusedIndex() : 0;
 		for (let offset = 1; offset < count; offset += 1) {
 			const candidate = (from + offset) % count;
 			if (codeOf(candidate) === code) {
-				setFocus(2, candidate);
+				focusItem(candidate);
 				return;
 			}
 		}
 	};
 	const setFocusItem = (i) => {
 		if (i < 0 || i >= count) return;
-		open = true;
-		setFocus(2, i);
+		move(true, i, 1);
 	};
 	return {
-		open: track(() => open),
-		focusLevel: track(() => level),
-		focusIndex: track(() => index),
+		open: track(isOpen),
+		focusLevel: track(level),
+		focusIndex: track(focusedIndex),
 		items,
 		checked: track(() => [...currentChecked()].sort((a, b) => a - b)),
 		choice: track(() => currentChoice()),
@@ -5024,7 +5600,7 @@ const createMenu = (options) => {
 			"aria-haspopup": "menu",
 			get "aria-expanded"() {
 				version();
-				return open ? "true" : "false";
+				return isOpen() ? "true" : "false";
 			},
 			"aria-controls": menuId,
 			get disabled() {
@@ -5046,7 +5622,7 @@ const createMenu = (options) => {
 			role: "menu",
 			get hidden() {
 				version();
-				return !open;
+				return !isOpen();
 			},
 			onKeyDown: (event) => {
 				if (event.key === "Tab" || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") event.preventDefault();
@@ -5072,7 +5648,7 @@ const createMenu = (options) => {
 			},
 			get tabindex() {
 				version();
-				return level === 2 && index === i ? 0 : -1;
+				return level() === 2 && index === i ? 0 : -1;
 			},
 			onClick: () => {
 				if (isDisabled(i)) return;
@@ -6530,37 +7106,6 @@ const createSpinbutton = (options = {}) => {
 		}
 	};
 };
-// src/status.ts
-/**
-* APG Alert's polite sibling: one `role=status` live region whose text the host
-* replaces ("Link copied", "Saved"). It is not a queue: a second message shows
-* in place of the first, so a burst reads as the last state, not as N alerts.
-* The region is rendered once and stays mounted, which is what makes a change
-* of its text announced.
-*
-* A status is never for errors: an error that needs attention now is
-* `createAlert` (`role=alert`, assertive), and a message with a title, a
-* description and a timeout is `createToast`.
-*/
-const createStatus = (options = {}) => {
-	const id = options.id ?? createUniqueId();
-	const [message, setMessage] = createSignal();
-	return {
-		message,
-		show: (text) => {
-			setMessage(text);
-		},
-		clear: () => {
-			setMessage(void 0);
-		},
-		statusProps: {
-			id,
-			role: "status",
-			"aria-live": "polite",
-			"aria-atomic": "true"
-		}
-	};
-};
 // src/switch.ts
 /**
 * APG Switch (https://www.w3.org/WAI/ARIA/apg/patterns/switch/): a binary on/off
@@ -6815,90 +7360,6 @@ const createTable = (options) => {
 		toggleRow
 	};
 };
-// src/textbox.ts
-const control = (field, options) => ({
-	...field.controlProps,
-	get type() {
-		return options.type ?? "text";
-	},
-	get autoComplete() {
-		return options.autoComplete;
-	},
-	get spellcheck() {
-		if (options.spellCheck === void 0) return;
-		return options.spellCheck ? "true" : "false";
-	},
-	get autocapitalize() {
-		return options.autoCapitalize;
-	},
-	get inputmode() {
-		return options.inputMode;
-	},
-	get maxlength() {
-		return options.maxLength;
-	},
-	get readOnly() {
-		return options.readOnly === true ? true : void 0;
-	},
-	get disabled() {
-		return options.disabled === true ? true : void 0;
-	},
-	get name() {
-		return options.name;
-	},
-	get dir() {
-		return options.dir;
-	},
-	get placeholder() {
-		return options.placeholder;
-	},
-	onInput: (event) => {
-		options.onValueChange?.(event.currentTarget.value);
-	}
-});
-/**
-* A text input with the field contract attached: label, hint, error (announced),
-* `aria-describedby` and `aria-invalid` come from `createField`; this adds the
-* props a host forgets — autofill tokens, spellcheck, inputmode, maxlength, the
-* disabled/readOnly pair. Platform: native (`input` is its own APG-equivalent;
-* no primitive re-implements text editing, which is why there is no key
-* handling here).
-*
-* Both `required` and `aria-required` are emitted: the native attribute is what
-* the browser enforces, the ARIA one is what a custom widget reading the same
-* props needs. A host that validates itself passes `noValidate` on the form
-* rather than dropping the attribute.
-*/
-const createTextInput = (options = {}) => {
-	const field = createField(options);
-	return {
-		...field,
-		controlProps: control(field, options)
-	};
-};
-/**
-* The same contract for a textarea, plus rows, wrap and resize. `resize` is a
-* style because CSS has no attribute for it; `none` is the value a layout that
-* owns its own height wants.
-*/
-const createTextArea = (options = {}) => {
-	const field = createField(options);
-	return {
-		...field,
-		controlProps: {
-			...control(field, options),
-			get rows() {
-				return options.rows;
-			},
-			get wrap() {
-				return options.wrap;
-			},
-			get style() {
-				return options.resize === void 0 ? void 0 : { resize: options.resize };
-			}
-		}
-	};
-};
 // src/tabs.ts
 /**
 * APG Tabs (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): state plus prop
@@ -9274,4 +9735,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, createDrawer, createDropZone, 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 };
+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, createCommandPalette, createConfirm, createDialogModal, createDisclosure, createDrawer, createDropZone, createFeed, createField, createGrid, createHotkeys, createKnob, 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 };