@weichenlin/swell-ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Check, ChevronDown, CircleAlert, CircleCheck, CircleDashed, CircleX, Copy, Eye, EyeOff, Info, LoaderCircle, Menu, Moon, Search, Sun, TriangleAlert, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDashed, CircleX, Copy, Eye, EyeOff, Info, LoaderCircle, Menu, Moon, Search, Sun, TriangleAlert, X } from "lucide-react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useEffectEvent, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 //#region src/lib/cn.ts
 const tone = (name) => [
@@ -45,6 +45,8 @@ const twMerge = extendTailwindMerge({ extend: { theme: {
 		"input-halo-invalid-focus",
 		"control-checked",
 		"control-checked-fg",
+		"switch-handle",
+		"switch-handle-checked",
 		"popover-bg",
 		"popover-border",
 		"popover-highlight",
@@ -76,64 +78,592 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-//#region src/components/badge/badge.tsx
-const toneClasses$1 = {
-	neutral: {
-		subtle: ["border-neutral-border bg-neutral-subtle-bg text-neutral-subtle-fg", "text-neutral"],
-		outline: ["border-neutral-border bg-transparent text-neutral-subtle-fg", "text-neutral"],
-		solid: ["border-neutral bg-neutral text-neutral-fg", "text-neutral-fg"]
-	},
-	info: {
-		subtle: ["border-info-border bg-info-subtle-bg text-info-subtle-fg", "text-info"],
-		outline: ["border-info-border bg-transparent text-info-subtle-fg", "text-info"],
-		solid: ["border-info bg-info text-info-fg", "text-info-fg"]
-	},
-	success: {
-		subtle: ["border-success-border bg-success-subtle-bg text-success-subtle-fg", "text-success"],
-		outline: ["border-success-border bg-transparent text-success-subtle-fg", "text-success"],
-		solid: ["border-success bg-success text-success-fg", "text-success-fg"]
-	},
-	warning: {
-		subtle: ["border-warning-border bg-warning-subtle-bg text-warning-subtle-fg", "text-warning"],
-		outline: ["border-warning-border bg-transparent text-warning-subtle-fg", "text-warning"],
-		solid: ["border-warning bg-warning text-warning-fg", "text-warning-fg"]
-	},
-	danger: {
-		subtle: ["border-danger-border bg-danger-subtle-bg text-danger-subtle-fg", "text-danger"],
-		outline: ["border-danger-border bg-transparent text-danger-subtle-fg", "text-danger"],
-		solid: ["border-danger bg-danger text-danger-fg", "text-danger-fg"]
-	}
+//#region src/components/input/field.tsx
+const controlHeight = {
+	sm: "h-[34px]",
+	md: "h-[38px]",
+	lg: "h-[42px]"
 };
-const sizeClasses$3 = {
-	sm: {
-		base: "h-5 px-1.5",
-		withIcon: "ps-1"
+const textSize = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const iconSize$1 = {
+	sm: "[&_svg]:size-4",
+	md: "[&_svg]:size-4",
+	lg: "[&_svg]:size-[18px]"
+};
+const inputPadding = {
+	sm: "px-3",
+	md: "px-3",
+	lg: "px-4"
+};
+const startSlotPadding = {
+	sm: "ps-2",
+	md: "ps-2.5",
+	lg: "ps-3"
+};
+const endSlotPadding = {
+	sm: "pe-2",
+	md: "pe-2.5",
+	lg: "pe-3"
+};
+const actionsPadding = {
+	sm: "pe-[3px]",
+	md: "pe-1",
+	lg: "pe-1"
+};
+/** Compact Button square that fits inside the field's inner height with an even inset. */
+const compactButton = {
+	sm: "size-[26px]",
+	md: "size-7",
+	lg: "size-8"
+};
+const labelStart = {
+	sm: "start-2",
+	md: "start-2",
+	lg: "start-3"
+};
+const floatShift = {
+	sm: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+var(--field-label-shift,17px))]",
+	md: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+var(--field-label-shift,19px))]",
+	lg: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+var(--field-label-shift,21px))]"
+};
+const isText = (node) => typeof node === "string" || typeof node === "number";
+const isPresent = (node) => node != null && node !== false && node !== "";
+function Adornment({ node, side, size }) {
+	const text = isText(node);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": text ? void 0 : true,
+		className: cn("flex shrink-0 items-center self-stretch text-fg-muted [&_svg]:shrink-0", text ? ["whitespace-nowrap select-none pointer-coarse:text-base", textSize[size]] : iconSize$1[size], side === "start" ? startSlotPadding[size] : endSlotPadding[size]),
+		children: node
+	});
+}
+const notchPadding = {
+	border: {
+		sm: "ps-2 pe-2",
+		md: "ps-2 pe-2",
+		lg: "ps-3 pe-1"
 	},
-	md: {
-		base: "h-6 px-2",
-		withIcon: "ps-1.5"
+	halo: {
+		sm: "ps-[9px] pe-[9px]",
+		md: "ps-[9px] pe-[9px]",
+		lg: "ps-[13px] pe-[5px]"
 	}
 };
-function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, busy = false, context, className, children, ...props }) {
-	const [toneClass, iconClass] = toneClasses$1[tone][variant];
-	const hasIcon = busy || icon !== void 0 && icon !== null && icon !== false;
-	return /* @__PURE__ */ jsxs("span", {
+/**
+* MUI-style notched outline: a fieldset draws the ring and an invisible legend holding the label
+* text at its floated size cuts the gap. The legend collapses while the label rests in the field.
+* A legend as tall as the border keeps the border at the fieldset's top edge.
+*/
+function Notch({ ring, size, disabled, children }) {
+	const halo = ring === "halo";
+	return /* @__PURE__ */ jsx("fieldset", {
+		"aria-hidden": true,
+		className: cn("pointer-events-none absolute m-0 min-w-0 p-0", "transition-[border-color] duration-200 ease-in-out motion-reduce:transition-none", notchPadding[ring][size], halo ? ["-inset-1 rounded-[calc(var(--radius-lg)+3px)] border-[3px] border-(--field-halo)", "forced-colors:invisible forced-colors:group-has-[:is(input,select,textarea):is(:focus,:open)]/control:visible forced-colors:border-[Highlight]"] : ["-inset-px rounded-[inherit] border border-(--field-border)", disabled && "forced-colors:border-[GrayText]"]),
+		children: /* @__PURE__ */ jsx("legend", {
+			className: cn("invisible float-none block w-auto max-w-[0.01px] overflow-hidden p-0 text-xs whitespace-nowrap", halo ? "h-0.75" : "h-px", "transition-[max-width] duration-50 ease-out motion-reduce:transition-none", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-full", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:delay-50", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:duration-100"),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "px-1",
+				children
+			})
+		})
+	});
+}
+/** Keeps an internal ref (focus forwarding, clear, reset) alongside the caller's ref. */
+function useMergedRef(ownRef, ref) {
+	return useCallback((node) => {
+		ownRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ownRef, ref]);
+}
+const focusControl = (control) => control.focus();
+/**
+* The frame every field shares (input family, Select): label above or floating with a notched
+* outline, the bordered control with its border/halo/hover states, description and live region.
+* State selectors match `input`, `textarea` or `select`, never the inner buttons, so a focused clear or copy
+* button shows only its own ring. `:open` too: an open base-select picker moves focus onto its
+* options, and the select then matches neither `:focus` nor `:focus-within`. Inside `:is()` an
+* unsupported `:open` is dropped alone instead of invalidating the rule.
+*/
+function FieldShell({ label, floating = false, helperText, error, size, id: idProp, required, disabled, readOnly, "aria-describedby": describedByProp, hasStart = false, multiline = false, footer, className, status = "", controlRef, activate = focusControl, children }) {
+	const autoId = useId();
+	const id = idProp ?? `${autoId}-control`;
+	const descriptionId = `${autoId}-description`;
+	const invalid = Boolean(error);
+	const description = invalid ? error === true ? null : error : helperText;
+	const hasDescription = isPresent(description);
+	const describedBy = [describedByProp, hasDescription ? descriptionId : null].filter(Boolean).join(" ") || void 0;
+	const hasLabel = Boolean(label);
+	const floatingLabel = floating && hasLabel;
+	const asterisk = required ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "text-danger",
+		children: " *"
+	}) : null;
+	const forwardClick = (e) => {
+		const control = controlRef.current;
+		const target = e.target;
+		if (!control || control.contains(target) || target.closest("button")) return;
+		e.preventDefault();
+		activate(control);
+	};
+	const renderFloatingLabel = (restingWidth) => floatingLabel ? /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2 truncate px-1 leading-normal", "text-fg-muted pointer-coarse:text-base", "transition-[translate,font-size,color] duration-150 ease-out motion-reduce:transition-none", multiline && {
+			sm: "top-[18px]",
+			md: "top-5",
+			lg: "top-6"
+		}[size], labelStart[size], textSize[size], restingWidth, floatShift[size], "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-[calc(100%-1rem)]", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:text-xs", invalid ? "text-danger" : ["[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:group-has-[:is(input,select,textarea):not(:is(:focus,:open))]/control:text-fg-strong", "group-has-[:is(input,select,textarea):is(:focus,:open)]/control:text-input-focus"]),
+		children: [label, asterisk]
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-field",
+		className: cn("flex w-full flex-col gap-1.5", disabled && "opacity-50", className),
+		children: [
+			hasLabel && !floating && /* @__PURE__ */ jsxs("label", {
+				htmlFor: id,
+				className: "self-start text-sm font-medium text-fg",
+				children: [label, asterisk]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "input-control",
+				"data-start": hasStart ? "" : void 0,
+				onMouseDown: forwardClick,
+				className: cn("group/control relative isolate flex items-center rounded-lg border", floatingLabel ? "bg-transparent" : "[--field-bg:var(--color-input-bg)] bg-(--field-bg)", "transition-[border-color,box-shadow,background-color] duration-200 ease-in-out motion-reduce:transition-none", multiline ? {
+					sm: "[--field-label-shift:19px]",
+					md: "[--field-label-shift:21px]",
+					lg: "[--field-label-shift:25px]"
+				}[size] : controlHeight[size], invalid ? ["[--field-border:var(--color-danger)] [--field-halo:var(--color-input-halo-invalid)]", "has-[:is(input,select,textarea):is(:focus,:open)]:[--field-halo:var(--color-input-halo-invalid-focus)]"] : ["[--field-border:var(--color-input-border)] [--field-halo:transparent]", "has-[:is(input,select,textarea):is(:focus,:open)]:[--field-border:var(--color-input-focus)] has-[:is(input,select,textarea):is(:focus,:open)]:[--field-halo:var(--color-input-halo)]"], "[--field-lift:0_0_#0000]", !invalid && !disabled && !readOnly && [
+					"hover:not-has-[:is(input,select,textarea):is(:focus,:open)]:[--field-border:var(--color-input-border-hover)]",
+					!floatingLabel && "hover:not-has-[:is(input,select,textarea):is(:focus,:open)]:[--field-bg:var(--color-input-bg-hover)]",
+					"hover:not-has-[:is(input,select,textarea):is(:focus,:open)]:[--field-lift:var(--shadow-input-lift)]"
+				], floatingLabel ? ["border-transparent forced-colors:border-[Canvas]", !readOnly && "[box-shadow:var(--field-lift)]"] : [
+					"border-(--field-border)",
+					readOnly ? "[box-shadow:0_0_0_3px_var(--field-halo)]" : "[box-shadow:var(--shadow-input),var(--field-lift),0_0_0_3px_var(--field-halo)]",
+					"has-[:is(input,select,textarea):is(:focus,:open)]:outline-hidden",
+					disabled && "forced-colors:border-[GrayText]"
+				], readOnly && !floatingLabel && "[--field-bg:var(--color-bg)]", disabled && "cursor-not-allowed", "pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2", "pointer-coarse:before:-z-10 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2"),
+				children: [floatingLabel && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Notch, {
+					size,
+					ring: "halo",
+					disabled,
+					children: [label, asterisk]
+				}), /* @__PURE__ */ jsxs(Notch, {
+					size,
+					ring: "border",
+					disabled,
+					children: [label, asterisk]
+				})] }), children({
+					id,
+					invalid,
+					describedBy,
+					floating: floatingLabel,
+					floatingLabel: renderFloatingLabel
+				})]
+			}),
+			(hasDescription || isPresent(footer)) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [hasDescription && /* @__PURE__ */ jsxs("p", {
+					id: descriptionId,
+					className: cn("m-0 flex min-w-0 flex-1 items-start gap-1 text-xs/snug", invalid ? "text-danger" : "text-fg-muted"),
+					children: [invalid && /* @__PURE__ */ jsx(CircleAlert, {
+						"aria-hidden": true,
+						className: "mt-px size-3.5 shrink-0"
+					}), /* @__PURE__ */ jsx("span", { children: description })]
+				}), footer]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				"aria-atomic": true,
+				className: "sr-only",
+				children: status
+			})
+		]
+	});
+}
+/** The input family's frame: adornments, actions and the input itself inside FieldShell. */
+function FieldFrame({ label, floating = false, helperText, error, size = "md", start, end, mono = false, validating = false, validatingText = "Checking…", className, inputClassName, inputRef: inputRefProp, actions, status, ref, id, required, disabled, readOnly, placeholder, "aria-describedby": describedByProp, "aria-invalid": ariaInvalid, ...props }) {
+	const ownRef = useRef(null);
+	const inputRef = inputRefProp ?? ownRef;
+	const setRef = useMergedRef(inputRef, ref);
+	const hasStart = isPresent(start);
+	const hasEnd = isPresent(end);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		floating,
+		helperText,
+		error,
+		size,
+		id,
+		required,
+		disabled,
+		readOnly,
+		"aria-describedby": describedByProp,
+		hasStart,
+		className,
+		status: validating ? validatingText : status ?? "",
+		controlRef: inputRef,
+		children: (field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			hasStart ? /* @__PURE__ */ jsx(Adornment, {
+				node: start,
+				side: "start",
+				size
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "@container flex min-w-0 flex-1 self-stretch rounded-[inherit]",
+				children: [field.floatingLabel("max-w-[calc(100cqw-1rem)]"), /* @__PURE__ */ jsx("input", {
+					...props,
+					ref: setRef,
+					id: field.id,
+					required,
+					disabled,
+					readOnly,
+					placeholder: field.floating ? placeholder || " " : placeholder,
+					"aria-invalid": field.invalid ? true : ariaInvalid,
+					"aria-describedby": field.describedBy,
+					spellCheck: mono ? false : props.spellCheck,
+					autoCapitalize: mono ? "off" : props.autoCapitalize,
+					autoCorrect: mono ? "off" : props.autoCorrect,
+					className: cn("h-full min-w-0 flex-1 rounded-[inherit] bg-transparent text-fg outline-none", "placeholder:text-input-placeholder pointer-coarse:text-base", "disabled:cursor-not-allowed", "autofill:[transition:background-color_0s_600000s] autofill:[-webkit-text-fill-color:var(--color-fg)]", textSize[size], inputPadding[size], hasStart && (isText(start) ? "ps-1" : "ps-2"), !validating && hasEnd && isText(end) ? "pe-1" : (validating || hasEnd || actions) && "pe-2", mono && "font-mono", field.floating && ["placeholder:opacity-0", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:placeholder:opacity-100"], inputClassName)
+				})]
+			}),
+			validating ? /* @__PURE__ */ jsx("span", {
+				className: cn("flex shrink-0 items-center self-stretch text-fg-muted", iconSize$1[size], endSlotPadding[size]),
+				children: /* @__PURE__ */ jsx(LoaderCircle, {
+					"aria-hidden": true,
+					className: "animate-spin motion-reduce:[animation-duration:2.5s]"
+				})
+			}) : hasEnd ? /* @__PURE__ */ jsx(Adornment, {
+				node: end,
+				side: "end",
+				size
+			}) : null,
+			actions ? /* @__PURE__ */ jsx("span", {
+				className: cn("flex shrink-0 items-center gap-0.5", actionsPadding[size]),
+				children: actions
+			}) : null
+		] })
+	});
+}
+//#endregion
+//#region src/components/accordion/use-accordion-motion.ts
+/** Animate measured heights; never cap content with an arbitrary max-height. */
+function useAccordionMotion(open, itemRef, restoreFocus) {
+	const panelRef = useRef(null);
+	const innerRef = useRef(null);
+	const previousOpen = useRef(open);
+	const [present, setPresent] = useState(open);
+	useLayoutEffect(() => {
+		const panel = panelRef.current;
+		const inner = innerRef.current;
+		if (!panel || !inner) return;
+		const changed = previousOpen.current !== open;
+		previousOpen.current = open;
+		let active = true;
+		let animation;
+		let observer;
+		let target = -1;
+		let settled = false;
+		const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		if (!open && panel.contains(panel.ownerDocument.activeElement) && itemRef.current) restoreFocus(itemRef.current);
+		panel.inert = !open;
+		panel.toggleAttribute("inert", !open);
+		if (open) panel.removeAttribute("aria-hidden");
+		else panel.setAttribute("aria-hidden", "true");
+		const finish = () => {
+			if (!active) return;
+			settled = true;
+			observer?.disconnect();
+			animation?.cancel();
+			animation = void 0;
+			panel.style.removeProperty("height");
+			panel.style.removeProperty("overflow");
+			panel.hidden = !open;
+			setPresent(open);
+		};
+		const run = () => {
+			if (!active || settled) return;
+			const nextTarget = open ? inner.getBoundingClientRect().height : 0;
+			if (nextTarget === target && animation) return;
+			target = nextTarget;
+			const from = panel.getBoundingClientRect().height;
+			animation?.cancel();
+			panel.style.height = `${from}px`;
+			const current = panel.animate([{ height: `${from}px` }, { height: `${target}px` }], {
+				duration: open ? 200 : 160,
+				easing: "cubic-bezier(.16,1,.3,1)",
+				fill: "both"
+			});
+			animation = current;
+			current.finished.then(() => {
+				if (active && animation === current) finish();
+			}, () => {});
+		};
+		if (!changed || reduced?.matches || typeof panel.animate !== "function") finish();
+		else {
+			if (open && !panel.style.height) panel.style.height = "0px";
+			panel.hidden = false;
+			panel.style.overflow = "hidden";
+			setPresent(true);
+			run();
+			if (open && typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver(run);
+				observer.observe(inner);
+			}
+		}
+		const onReducedMotion = () => {
+			if (reduced?.matches) finish();
+		};
+		reduced?.addEventListener("change", onReducedMotion);
+		return () => {
+			active = false;
+			observer?.disconnect();
+			reduced?.removeEventListener("change", onReducedMotion);
+			if (animation) {
+				panel.style.height = `${panel.getBoundingClientRect().height}px`;
+				animation.cancel();
+			}
+		};
+	}, [
+		open,
+		itemRef,
+		restoreFocus
+	]);
+	return {
+		panelRef,
+		innerRef,
+		present
+	};
+}
+//#endregion
+//#region src/components/accordion/accordion.tsx
+const AccordionContext = createContext(null);
+const ItemContext = createContext(null);
+function useAccordionContext(part) {
+	const context = useContext(AccordionContext);
+	if (!context) throw new Error(`${part} must be rendered inside <Accordion>`);
+	return context;
+}
+function useItemContext(part) {
+	const context = useContext(ItemContext);
+	if (!context) throw new Error(`${part} must be rendered inside <AccordionItem>`);
+	return context;
+}
+const valuesOf = (value) => typeof value === "string" ? [value] : [...new Set(value ?? [])];
+const ownTriggers = (root) => [...root.querySelectorAll("[data-slot=\"accordion-trigger\"]")].filter((node) => node.closest("[data-slot=\"accordion\"]") === root);
+/** Vertical disclosure group. Changing type requires a new React key. */
+function Accordion({ type = "single", value, defaultValue, onValueChange, collapsible = true, variant = "line", headingLevel = 3, disabled = false, className, children, ref, onKeyDown, ...props }) {
+	const [initialType] = useState(type);
+	if (initialType !== type) throw new Error("Changing Accordion type requires a new key");
+	const controlled = value !== void 0;
+	const [internal, setInternal] = useState(() => valuesOf(defaultValue));
+	const selected = controlled ? valuesOf(value) : internal;
+	const rootRef = useRef(null);
+	const mergedRef = useMergedRef(rootRef, ref);
+	const items = useRef(/* @__PURE__ */ new Map());
+	const internalRef = useRef(internal);
+	useLayoutEffect(() => {
+		internalRef.current = internal;
+	}, [internal]);
+	const restoreFocus = useCallback((item, removing = false) => {
+		const root = rootRef.current;
+		if (!root) return;
+		const triggers = ownTriggers(root);
+		const own = triggers.find((node) => node.closest("[data-slot=\"accordion-item\"]") === item);
+		const index = own ? triggers.indexOf(own) : -1;
+		const next = (!removing && own && !own.disabled ? own : void 0) ?? triggers.slice(index + 1).find((node) => !node.disabled) ?? triggers.slice(0, Math.max(index, 0)).reverse().find((node) => !node.disabled);
+		if (next) next.focus({ preventScroll: true });
+		else {
+			const previous = root.getAttribute("tabindex");
+			root.tabIndex = -1;
+			root.focus({ preventScroll: true });
+			if (previous === null) root.removeAttribute("tabindex");
+			else root.setAttribute("tabindex", previous);
+		}
+	}, []);
+	const register = useCallback((itemValue, node) => {
+		const members = items.current;
+		if (members.has(itemValue)) throw new Error(`Accordion item values must be unique: "${itemValue}"`);
+		members.set(itemValue, node);
+		const reconcile = () => {
+			queueMicrotask(() => {
+				if (controlled || !rootRef.current) return;
+				if (internalRef.current.every((entry) => members.has(entry))) return;
+				setInternal((current) => {
+					const next = current.filter((entry) => members.has(entry));
+					return next.length === current.length ? current : next;
+				});
+			});
+		};
+		reconcile();
+		return () => {
+			members.delete(itemValue);
+			const focused = node.ownerDocument.activeElement;
+			if (focused && node.contains(focused)) {
+				const root = rootRef.current;
+				const triggers = root ? ownTriggers(root) : [];
+				const index = triggers.findIndex((trigger) => node.contains(trigger));
+				const candidates = [...triggers.slice(index + 1), ...triggers.slice(0, index).reverse()];
+				queueMicrotask(() => {
+					const active = node.ownerDocument.activeElement;
+					if (node.isConnected || !rootRef.current || active !== node.ownerDocument.body && active !== focused) return;
+					const next = candidates.find((trigger) => trigger.isConnected && !trigger.disabled);
+					if (next) next.focus({ preventScroll: true });
+					else restoreFocus(node, true);
+				});
+			}
+			reconcile();
+		};
+	}, [controlled, restoreFocus]);
+	const toggle = (itemValue) => {
+		const open = selected.includes(itemValue);
+		if (disabled || type === "single" && open && !collapsible) return;
+		const next = open ? selected.filter((entry) => entry !== itemValue) : type === "single" ? [itemValue] : [...selected, itemValue];
+		if (!controlled) setInternal(next);
+		if (type === "multiple") onValueChange?.(next);
+		else onValueChange?.(next[0] ?? null);
+	};
+	return /* @__PURE__ */ jsx(AccordionContext, {
+		value: {
+			selected,
+			variant,
+			headingLevel,
+			disabled,
+			collapsible: type === "multiple" || collapsible,
+			toggle,
+			register,
+			restoreFocus
+		},
+		children: /* @__PURE__ */ jsx(ItemContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				ref: mergedRef,
+				"data-slot": "accordion",
+				"data-variant": variant,
+				"data-disabled": disabled || void 0,
+				className: cn("min-w-0", variant === "outline" && "flex flex-col gap-2", className),
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+					if (![
+						"ArrowDown",
+						"ArrowUp",
+						"Home",
+						"End"
+					].includes(event.key)) return;
+					const triggers = ownTriggers(event.currentTarget).filter((node) => !node.disabled);
+					const index = triggers.indexOf(event.target);
+					if (index === -1) return;
+					event.preventDefault();
+					triggers[event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : Math.max(0, Math.min(triggers.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)))]?.focus();
+				},
+				children
+			})
+		})
+	});
+}
+function AccordionItem({ value, disabled = false, className, children, ref, ...props }) {
+	const group = useAccordionContext("AccordionItem");
+	if (!value.trim()) throw new Error("AccordionItem value must be a non-empty string");
+	const id = useId();
+	const itemRef = useRef(null);
+	const mergedRef = useMergedRef(itemRef, ref);
+	const register = group.register;
+	useLayoutEffect(() => {
+		if (itemRef.current) return register(value, itemRef.current);
+	}, [register, value]);
+	const open = group.selected.includes(value);
+	const isDisabled = group.disabled || disabled;
+	return /* @__PURE__ */ jsx(ItemContext, {
+		value: {
+			id,
+			value,
+			open,
+			disabled: isDisabled,
+			itemRef
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref: mergedRef,
+			"data-slot": "accordion-item",
+			"data-state": open ? "open" : "closed",
+			"data-disabled": isDisabled || void 0,
+			className: cn("min-w-0 border-input-border", group.variant === "outline" ? "rounded-xl border bg-surface" : "border-b", className),
+			children
+		})
+	});
+}
+function AccordionTrigger({ children, description, className, onClick, "aria-describedby": describedBy, ...props }) {
+	const group = useAccordionContext("AccordionTrigger");
+	const item = useItemContext("AccordionTrigger");
+	const Heading = `h${group.headingLevel}`;
+	const hasDescription = isPresent(description);
+	const locked = item.open && !group.collapsible;
+	return /* @__PURE__ */ jsx(Heading, {
+		"data-slot": "accordion-heading",
+		className: "m-0 text-inherit",
+		children: /* @__PURE__ */ jsxs("button", {
+			...props,
+			id: `${item.id}-trigger`,
+			type: "button",
+			disabled: item.disabled,
+			"aria-expanded": item.open,
+			"aria-controls": `${item.id}-content`,
+			"aria-disabled": locked || void 0,
+			"aria-labelledby": props["aria-label"] ? void 0 : `${item.id}-title`,
+			"aria-describedby": [describedBy, hasDescription && `${item.id}-description`].filter(Boolean).join(" ") || void 0,
+			"data-slot": "accordion-trigger",
+			"data-state": item.open ? "open" : "closed",
+			className: cn("group/accordion-trigger flex min-h-12 w-full cursor-pointer items-start gap-3 rounded-sm py-3 text-start text-sm/6 font-medium text-fg outline-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-default", "forced-colors:disabled:text-[GrayText]", group.variant === "outline" && "rounded-xl px-4", className),
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented && !item.disabled && !locked) group.toggle(item.value);
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 wrap-anywhere",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: `${item.id}-title`,
+					className: "underline-offset-4 group-enabled/accordion-trigger:group-hover/accordion-trigger:underline",
+					children
+				}), hasDescription && /* @__PURE__ */ jsx("span", {
+					id: `${item.id}-description`,
+					className: "mt-0.5 block text-xs/4.5 font-normal text-fg-muted",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": true,
+				className: cn("mt-1 size-4 shrink-0 text-fg-muted transition-transform duration-200 ease-out motion-reduce:transition-none", item.open && "rotate-180")
+			})]
+		})
+	});
+}
+function AccordionContent({ keepMounted = true, region = false, className, contentClassName, children, ref, ...props }) {
+	const group = useAccordionContext("AccordionContent");
+	const item = useItemContext("AccordionContent");
+	const { panelRef, innerRef, present } = useAccordionMotion(item.open, item.itemRef, group.restoreFocus);
+	const mergedRef = useMergedRef(panelRef, ref);
+	return /* @__PURE__ */ jsx("div", {
 		...props,
-		"data-slot": "badge",
-		className: cn("inline-flex items-center gap-1 rounded-md border text-xs leading-none font-medium whitespace-nowrap", "forced-colors:border-[CanvasText]", sizeClasses$3[size].base, hasIcon && sizeClasses$3[size].withIcon, toneClass, className),
-		children: [hasIcon && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-slot": "badge-icon",
-			className: cn("inline-flex shrink-0 items-center [&_svg]:size-3 [&_svg]:shrink-0", iconClass),
-			children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] }) : icon
-		}), /* @__PURE__ */ jsxs("span", {
-			"data-slot": "badge-label",
-			className: "min-w-0 truncate leading-4",
-			children: [context && /* @__PURE__ */ jsxs("span", {
-				className: "sr-only",
-				children: [context, ": "]
-			}), children]
-		})]
+		ref: mergedRef,
+		id: `${item.id}-content`,
+		role: region ? "region" : void 0,
+		"aria-labelledby": region ? `${item.id}-title` : void 0,
+		hidden: !item.open && !present,
+		inert: !item.open && !present,
+		"aria-hidden": !item.open && !present ? true : void 0,
+		"data-slot": "accordion-content",
+		"data-state": item.open ? "open" : "closed",
+		className: cn("min-w-0", contentClassName),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: innerRef,
+			"data-slot": "accordion-content-inner",
+			className: cn("flow-root min-w-0 pb-4 text-sm/5.5 wrap-anywhere text-fg-muted", group.variant === "outline" ? "ps-4 pe-11" : "pe-7", className),
+			children: (keepMounted || item.open || present) && children
+		})
 	});
 }
 //#endregion
@@ -221,11 +751,66 @@ function usePressFeedback(ripple = true) {
 	return ref;
 }
 //#endregion
+//#region src/lib/slot.tsx
+function setRef(ref, node) {
+	if (typeof ref === "function") return ref(node);
+	if (ref) ref.current = node;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		const cleanups = refs.map((ref) => setRef(ref, node));
+		return () => {
+			for (const [i, ref] of refs.entries()) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(ref, null);
+			}
+		};
+	};
+}
+function mergeProps(slot, child) {
+	const merged = {
+		...slot,
+		...child
+	};
+	for (const key of Object.keys(slot)) {
+		const own = slot[key];
+		const theirs = child[key];
+		if (/^on[A-Z]/.test(key) && typeof own === "function" && typeof theirs === "function") merged[key] = (...args) => {
+			theirs(...args);
+			own(...args);
+		};
+		else if (key === "className") merged.className = cn(own, theirs);
+		else if (key === "style") merged.style = {
+			...own,
+			...theirs
+		};
+	}
+	return merged;
+}
+/** Applies `wrap` to an element's children, or to what a render-prop child returns. */
+function wrapChildren(children, wrap) {
+	if (typeof children !== "function") return wrap(children);
+	return (...args) => wrap(children(...args));
+}
+/** Renders its only child with these props merged in (Radix Slot style). */
+function Slot({ children, ref, ...props }) {
+	const child = Children.only(children);
+	const childProps = isValidElement(child) ? child.props : {};
+	const childRef = childProps.ref;
+	const composedRef = useMemo(() => composeRefs(ref, childRef), [ref, childRef]);
+	if (!isValidElement(child)) return null;
+	return cloneElement(child, {
+		...mergeProps(props, childProps),
+		ref: composedRef
+	});
+}
+//#endregion
 //#region src/components/tooltip.tsx
 const OPEN_DELAY_MS = 300;
 const GAP_PX = 6;
 const VIEWPORT_PADDING_PX = 8;
-const opposite = {
+const opposite$1 = {
 	top: "bottom",
 	bottom: "top",
 	left: "right",
@@ -238,7 +823,7 @@ function isFocusVisible$1(el) {
 		return true;
 	}
 }
-function clamp(value, min, max) {
+function clamp$2(value, min, max) {
 	return Math.max(min, Math.min(value, Math.max(min, max)));
 }
 /**
@@ -255,15 +840,15 @@ function place(anchor, width, height, preferred) {
 		right: vw - anchor.right
 	};
 	const need = (s) => (s === "top" || s === "bottom" ? height : width) + GAP_PX + VIEWPORT_PADDING_PX;
-	const side = room[preferred] < need(preferred) && room[opposite[preferred]] > room[preferred] ? opposite[preferred] : preferred;
+	const side = room[preferred] < need(preferred) && room[opposite$1[preferred]] > room[preferred] ? opposite$1[preferred] : preferred;
 	if (side === "top" || side === "bottom") return {
 		side,
-		left: clamp(anchor.left + anchor.width / 2 - width / 2, VIEWPORT_PADDING_PX, vw - width - VIEWPORT_PADDING_PX),
+		left: clamp$2(anchor.left + anchor.width / 2 - width / 2, VIEWPORT_PADDING_PX, vw - width - VIEWPORT_PADDING_PX),
 		top: side === "top" ? anchor.top - height - GAP_PX : anchor.bottom
 	};
 	return {
 		side,
-		top: clamp(anchor.top + anchor.height / 2 - height / 2, VIEWPORT_PADDING_PX, vh - height - VIEWPORT_PADDING_PX),
+		top: clamp$2(anchor.top + anchor.height / 2 - height / 2, VIEWPORT_PADDING_PX, vh - height - VIEWPORT_PADDING_PX),
 		left: side === "left" ? anchor.left - width - GAP_PX : anchor.right
 	};
 }
@@ -456,7 +1041,7 @@ const spinnerSize = {
 	md: 18,
 	lg: 20
 };
-const iconSize$1 = {
+const iconSize = {
 	sm: "[&_svg]:size-4",
 	md: "[&_svg]:size-4",
 	lg: "[&_svg]:size-[18px]"
@@ -474,7 +1059,7 @@ const iconEndPadding = {
 /** Press layer + content + spinner; shared by every button-styled host. */
 function ButtonContent({ size, ripple, loading = false, iconLeft, iconRight, children }) {
 	const layerRef = usePressFeedback(ripple);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("span", {
 			ref: layerRef,
 			"data-ripple": ripple ? "" : void 0,
@@ -482,7 +1067,7 @@ function ButtonContent({ size, ripple, loading = false, iconLeft, iconRight, chi
 			className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] forced-colors:hidden"
 		}),
 		/* @__PURE__ */ jsxs("span", {
-			className: cn("relative inline-flex items-center gap-2 [&_svg]:shrink-0", iconSize$1[size], loading && "opacity-0"),
+			className: cn("relative inline-flex items-center gap-2 [&_svg]:shrink-0", iconSize[size], loading && "opacity-0"),
 			children: [
 				iconLeft && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
@@ -514,395 +1099,292 @@ function stateClass(disabled, loading) {
 	if (loading) return "cursor-progress opacity-70";
 	if (disabled) return "cursor-not-allowed opacity-50 forced-colors:opacity-100 forced-colors:text-[GrayText] forced-colors:after:border-[GrayText]";
 }
-function ButtonImpl({ className, intent, size, tone, fullWidth, square, loading = false, loadingText = "Loading", disabled = false, iconLeft, iconRight, ripple, tooltip, type = "button", onClick, children, ...props }) {
+function blockActivation(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+function ButtonImpl({ asChild = false, className, intent, size, tone, fullWidth, square, loading = false, loadingText = "Loading", disabled = false, iconLeft, iconRight, ripple, tooltip, type = "button", onClick, onClickCapture, onAuxClickCapture, children, ...props }) {
 	const s = size ?? "md";
 	const inert = disabled || loading;
-	const button = /* @__PURE__ */ jsx("button", {
-		...props,
-		type,
-		"data-slot": "button",
-		"aria-disabled": inert || void 0,
-		"aria-busy": loading || void 0,
-		className: cn(buttonVariants({
-			intent,
-			size,
-			tone,
-			fullWidth,
-			square
-		}), iconPadding(s, iconLeft, iconRight), stateClass(disabled, loading), className),
-		onClick: (e) => {
-			if (inert) {
-				e.preventDefault();
-				return;
-			}
-			onClick?.(e);
-		},
-		children: /* @__PURE__ */ jsx(ButtonContent, {
-			size: s,
-			ripple: ripple ?? true,
-			loading,
-			iconLeft,
-			iconRight,
-			children
-		})
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
-		...tooltip,
-		className: fullWidth ? "flex w-full" : void 0,
-		children: button
-	}) : button, /* @__PURE__ */ jsx("span", {
-		"aria-live": "polite",
-		"aria-atomic": true,
-		className: "sr-only",
-		children: loading ? loadingText : ""
-	})] });
-}
-function IconOnlyButton({ icon, tooltip = true, tooltipSide, disabledReason, className, size, ...props }) {
-	const reason = props.disabled ? disabledReason : void 0;
-	const tip = reason ? {
-		content: reason,
-		side: tooltipSide
-	} : tooltip ? {
-		content: props["aria-label"],
-		side: tooltipSide,
-		describe: false
-	} : disabledReason !== void 0 ? { content: void 0 } : void 0;
-	return /* @__PURE__ */ jsx(ButtonImpl, {
-		...props,
+	const classes = cn(buttonVariants({
+		intent,
 		size,
-		tooltip: tip,
-		square: true,
-		className,
-		children: icon
-	});
-}
-function Button(props) {
-	if (props.icon !== void 0) return /* @__PURE__ */ jsx(IconOnlyButton, { ...props });
-	const { disabledReason, ...rest } = props;
-	const tooltip = disabledReason === void 0 ? void 0 : { content: rest.disabled ? disabledReason : void 0 };
-	return /* @__PURE__ */ jsx(ButtonImpl, {
-		...rest,
-		tooltip
+		tone,
+		fullWidth,
+		square
+	}), iconPadding(s, iconLeft, iconRight), stateClass(disabled, loading), className);
+	const content = (inner) => /* @__PURE__ */ jsx(ButtonContent, {
+		size: s,
+		ripple: ripple ?? true,
+		loading,
+		iconLeft,
+		iconRight,
+		children: inner
 	});
-}
-//#endregion
-//#region src/components/card/card.tsx
-const CardContext = createContext({
-	titleId: "",
-	setTitled: () => {}
-});
-/**
-* Bordered surface for a group of related content. No padding of its own: CardHeader and
-* CardContent add it, so full-bleed rows (lists, tables) can sit edge to edge.
-*/
-function Card({ as: Comp = "div", className, ...props }) {
-	const titleId = useId();
-	const [titled, setTitled] = useState(false);
-	return /* @__PURE__ */ jsx(CardContext, {
-		value: {
-			titleId,
-			setTitled
-		},
-		children: /* @__PURE__ */ jsx(Comp, {
-			"aria-labelledby": (Comp === "section" || Comp === "article") && titled && !props["aria-label"] ? titleId : void 0,
+	if (asChild) {
+		const child = Children.only(children);
+		if (!isValidElement(child)) return null;
+		const link = /* @__PURE__ */ jsx(Slot, {
 			...props,
-			"data-slot": "card",
-			className: cn("rounded-xl border border-border-strong bg-surface", className)
-		})
-	});
-}
-function CardHeader({ title, description, action, headingLevel = 2, className, ...props }) {
-	const { titleId, setTitled } = useContext(CardContext);
-	useLayoutEffect(() => {
-		setTitled(true);
-		return () => setTitled(false);
-	}, [setTitled]);
-	const Heading = headingLevel === 2 ? "h2" : "h3";
-	return /* @__PURE__ */ jsxs("div", {
-		...props,
-		"data-slot": "card-header",
-		className: cn("flex items-start justify-between gap-4 px-5 pt-5", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ jsx(Heading, {
-				id: titleId,
-				className: "font-sans text-sm font-medium",
-				children: title
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-fg-muted",
-				children: description
-			})]
-		}), action && /* @__PURE__ */ jsx("div", {
-			className: "shrink-0",
-			children: action
-		})]
+			"data-slot": "button",
+			"aria-disabled": disabled || void 0,
+			className: classes,
+			onClick,
+			onClickCapture: disabled ? blockActivation : onClickCapture,
+			onAuxClickCapture: disabled ? blockActivation : onAuxClickCapture,
+			children: cloneElement(child, { children: wrapChildren(child.props.children, content) })
+		});
+		return tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			...tooltip,
+			className: fullWidth ? "flex w-full" : void 0,
+			children: link
+		}) : link;
+	}
+	const button = /* @__PURE__ */ jsx("button", {
+		...props,
+		type,
+		"data-slot": "button",
+		"aria-disabled": inert || void 0,
+		"aria-busy": loading || void 0,
+		className: classes,
+		onClickCapture,
+		onAuxClickCapture,
+		onClick: (e) => {
+			if (inert) {
+				e.preventDefault();
+				return;
+			}
+			onClick?.(e);
+		},
+		children: content(children)
 	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		...tooltip,
+		className: fullWidth ? "flex w-full" : void 0,
+		children: button
+	}) : button, /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		"aria-atomic": true,
+		className: "sr-only",
+		children: loading ? loadingText : ""
+	})] });
 }
-function CardContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function IconOnlyButton({ icon, tooltip = true, tooltipSide, disabledReason, className, size, children, ...props }) {
+	const reason = props.disabled ? disabledReason : void 0;
+	const tip = reason ? {
+		content: reason,
+		side: tooltipSide
+	} : tooltip ? {
+		content: props["aria-label"],
+		side: tooltipSide,
+		describe: false
+	} : disabledReason !== void 0 ? { content: void 0 } : void 0;
+	const child = Children.toArray(children)[0];
+	return /* @__PURE__ */ jsx(ButtonImpl, {
 		...props,
-		"data-slot": "card-content",
-		className: cn("p-5 [[data-slot=card-header]+&]:pt-4", className)
+		size,
+		tooltip: tip,
+		square: true,
+		className,
+		children: props.asChild && isValidElement(child) ? cloneElement(child, void 0, icon) : icon
 	});
 }
-//#endregion
-//#region src/components/input/field.tsx
-const controlHeight = {
-	sm: "h-[34px]",
-	md: "h-[38px]",
-	lg: "h-[42px]"
-};
-const textSize = {
-	sm: "text-sm",
-	md: "text-sm",
-	lg: "text-base"
-};
-const iconSize = {
-	sm: "[&_svg]:size-4",
-	md: "[&_svg]:size-4",
-	lg: "[&_svg]:size-[18px]"
-};
-const inputPadding = {
-	sm: "px-3",
-	md: "px-3",
-	lg: "px-4"
-};
-const startSlotPadding = {
-	sm: "ps-2",
-	md: "ps-2.5",
-	lg: "ps-3"
-};
-const endSlotPadding = {
-	sm: "pe-2",
-	md: "pe-2.5",
-	lg: "pe-3"
-};
-const actionsPadding = {
-	sm: "pe-[3px]",
-	md: "pe-1",
-	lg: "pe-1"
-};
-/** Compact Button square that fits inside the field's inner height with an even inset. */
-const compactButton = {
-	sm: "size-[26px]",
-	md: "size-7",
-	lg: "size-8"
-};
-const labelStart = {
-	sm: "start-2",
-	md: "start-2",
-	lg: "start-3"
-};
-const floatShift = {
-	sm: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+17px)]",
-	md: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+19px)]",
-	lg: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+21px)]"
-};
-const isText = (node) => typeof node === "string" || typeof node === "number";
-const isPresent = (node) => node != null && node !== false && node !== "";
-function Adornment({ node, side, size }) {
-	const text = isText(node);
-	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": text ? void 0 : true,
-		className: cn("flex shrink-0 items-center self-stretch text-fg-muted [&_svg]:shrink-0", text ? ["whitespace-nowrap select-none pointer-coarse:text-base", textSize[size]] : iconSize[size], side === "start" ? startSlotPadding[size] : endSlotPadding[size]),
-		children: node
+function Button(props) {
+	if (props.icon !== void 0) return /* @__PURE__ */ jsx(IconOnlyButton, { ...props });
+	const { disabledReason, ...rest } = props;
+	const tooltip = disabledReason === void 0 ? void 0 : { content: rest.disabled ? disabledReason : void 0 };
+	return /* @__PURE__ */ jsx(ButtonImpl, {
+		...rest,
+		tooltip
 	});
 }
-const notchPadding = {
-	border: {
-		sm: "ps-2 pe-2",
-		md: "ps-2 pe-2",
-		lg: "ps-3 pe-1"
+//#endregion
+//#region src/components/alert/alert.tsx
+const tones = {
+	neutral: {
+		Icon: Info,
+		iconClass: "text-neutral"
 	},
-	halo: {
-		sm: "ps-[9px] pe-[9px]",
-		md: "ps-[9px] pe-[9px]",
-		lg: "ps-[13px] pe-[5px]"
+	info: {
+		Icon: Info,
+		iconClass: "text-info"
+	},
+	success: {
+		Icon: CircleCheck,
+		iconClass: "text-success"
+	},
+	warning: {
+		Icon: TriangleAlert,
+		iconClass: "text-warning"
+	},
+	danger: {
+		Icon: CircleAlert,
+		iconClass: "text-danger"
 	}
 };
-/**
-* MUI-style notched outline: a fieldset draws the ring and an invisible legend holding the label
-* text at its floated size cuts the gap. The legend collapses while the label rests in the field.
-* A legend as tall as the border keeps the border at the fieldset's top edge.
-*/
-function Notch({ ring, size, disabled, children }) {
-	const halo = ring === "halo";
-	return /* @__PURE__ */ jsx("fieldset", {
-		"aria-hidden": true,
-		className: cn("pointer-events-none absolute m-0 min-w-0 p-0", "transition-[border-color] duration-200 ease-in-out motion-reduce:transition-none", notchPadding[ring][size], halo ? ["-inset-1 rounded-[calc(var(--radius-lg)+3px)] border-[3px] border-(--field-halo)", "forced-colors:invisible forced-colors:group-has-[:is(input,select):is(:focus,:open)]/control:visible forced-colors:border-[Highlight]"] : ["-inset-px rounded-[inherit] border border-(--field-border)", disabled && "forced-colors:border-[GrayText]"]),
-		children: /* @__PURE__ */ jsx("legend", {
-			className: cn("invisible float-none block w-auto max-w-[0.01px] overflow-hidden p-0 text-xs whitespace-nowrap", halo ? "h-0.75" : "h-px", "transition-[max-width] duration-50 ease-out motion-reduce:transition-none", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-full", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:delay-50", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:duration-100"),
-			children: /* @__PURE__ */ jsx("span", {
-				className: "px-1",
-				children
-			})
-		})
+/** A persistent message shown next to the content it describes. Use a live region for updates that need announcing. */
+function Alert({ tone = "neutral", title, action, onDismiss, dismissLabel = "Dismiss alert", className, children, ...props }) {
+	const { Icon, iconClass } = tones[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "alert",
+		"data-tone": tone,
+		className: cn("@container/alert flex items-start gap-3 rounded-xl border border-ring-deep px-4 py-3", "text-sm text-fg forced-colors:border-[CanvasText]", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("grid min-w-0 flex-1 grid-cols-[1rem_minmax(0,1fr)] items-start gap-x-2.5 gap-y-3", action && "@md/alert:grid-cols-[1rem_minmax(0,1fr)_auto]"),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					"data-slot": "alert-icon",
+					className: cn("mt-0.5 size-4", iconClass)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 space-y-0.5 wrap-anywhere",
+					children: [title != null && /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-title",
+						className: "font-medium",
+						children: title
+					}), children != null && /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-description",
+						className: title != null ? "text-fg-muted" : void 0,
+						children
+					})]
+				}),
+				action && /* @__PURE__ */ jsx("div", {
+					"data-slot": "alert-action",
+					className: "col-start-2 justify-self-start @md/alert:col-start-3 @md/alert:self-center",
+					children: action
+				})
+			]
+		}), onDismiss && /* @__PURE__ */ jsx(Button, {
+			"aria-label": dismissLabel,
+			className: "-my-1.5 -me-1.5 shrink-0 text-fg-muted @md/alert:self-center",
+			icon: /* @__PURE__ */ jsx(X, {}),
+			intent: "ghost",
+			size: "sm",
+			onClick: onDismiss
+		})]
 	});
 }
-/** Keeps an internal ref (focus forwarding, clear, reset) alongside the caller's ref. */
-function useMergedRef(ownRef, ref) {
-	return useCallback((node) => {
-		ownRef.current = node;
-		if (typeof ref === "function") return ref(node);
-		if (ref) ref.current = node;
-	}, [ownRef, ref]);
-}
-const focusControl = (control) => control.focus();
-/**
-* The frame every field shares (input family, Select): label above or floating with a notched
-* outline, the bordered control with its border/halo/hover states, description and live region.
-* State selectors match `input` or `select`, never the inner buttons, so a focused clear or copy
-* button shows only its own ring. `:open` too: an open base-select picker moves focus onto its
-* options, and the select then matches neither `:focus` nor `:focus-within`. Inside `:is()` an
-* unsupported `:open` is dropped alone instead of invalidating the rule.
-*/
-function FieldShell({ label, floating = false, helperText, error, size, id: idProp, required, disabled, readOnly, "aria-describedby": describedByProp, hasStart = false, className, status = "", controlRef, activate = focusControl, children }) {
-	const autoId = useId();
-	const id = idProp ?? `${autoId}-control`;
-	const descriptionId = `${autoId}-description`;
-	const invalid = Boolean(error);
-	const description = invalid ? error === true ? null : error : helperText;
-	const hasDescription = isPresent(description);
-	const describedBy = [describedByProp, hasDescription ? descriptionId : null].filter(Boolean).join(" ") || void 0;
-	const hasLabel = Boolean(label);
-	const floatingLabel = floating && hasLabel;
-	const asterisk = required ? /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: "text-danger",
-		children: " *"
-	}) : null;
-	const forwardClick = (e) => {
-		const control = controlRef.current;
-		const target = e.target;
-		if (!control || control.contains(target) || target.closest("button")) return;
-		e.preventDefault();
-		activate(control);
-	};
-	const renderFloatingLabel = (restingWidth) => floatingLabel ? /* @__PURE__ */ jsxs("label", {
-		htmlFor: id,
-		className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2 truncate px-1 leading-normal", "text-fg-muted pointer-coarse:text-base", "transition-[translate,font-size,color] duration-150 ease-out motion-reduce:transition-none", labelStart[size], textSize[size], restingWidth, floatShift[size], "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-[calc(100%-1rem)]", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:text-xs", invalid ? "text-danger" : ["[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:group-has-[:is(input,select):not(:is(:focus,:open))]/control:text-fg-strong", "group-has-[:is(input,select):is(:focus,:open)]/control:text-input-focus"]),
-		children: [label, asterisk]
-	}) : null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "input-field",
-		className: cn("flex w-full flex-col gap-1.5", disabled && "opacity-50", className),
-		children: [
-			hasLabel && !floating && /* @__PURE__ */ jsxs("label", {
-				htmlFor: id,
-				className: "self-start text-sm font-medium text-fg",
-				children: [label, asterisk]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				"data-slot": "input-control",
-				"data-start": hasStart ? "" : void 0,
-				onMouseDown: forwardClick,
-				className: cn("group/control relative isolate flex items-center rounded-lg border", floatingLabel ? "bg-transparent" : "[--field-bg:var(--color-input-bg)] bg-(--field-bg)", "transition-[border-color,box-shadow,background-color] duration-200 ease-in-out motion-reduce:transition-none", controlHeight[size], invalid ? ["[--field-border:var(--color-danger)] [--field-halo:var(--color-input-halo-invalid)]", "has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo-invalid-focus)]"] : ["[--field-border:var(--color-input-border)] [--field-halo:transparent]", "has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-focus)] has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo)]"], "[--field-lift:0_0_#0000]", !invalid && !disabled && !readOnly && [
-					"hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-border-hover)]",
-					!floatingLabel && "hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-bg:var(--color-input-bg-hover)]",
-					"hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-lift:var(--shadow-input-lift)]"
-				], floatingLabel ? ["border-transparent forced-colors:border-[Canvas]", !readOnly && "[box-shadow:var(--field-lift)]"] : [
-					"border-(--field-border)",
-					readOnly ? "[box-shadow:0_0_0_3px_var(--field-halo)]" : "[box-shadow:var(--shadow-input),var(--field-lift),0_0_0_3px_var(--field-halo)]",
-					"has-[:is(input,select):is(:focus,:open)]:outline-hidden",
-					disabled && "forced-colors:border-[GrayText]"
-				], readOnly && !floatingLabel && "[--field-bg:var(--color-bg)]", disabled && "cursor-not-allowed", "pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2", "pointer-coarse:before:-z-10 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2"),
-				children: [floatingLabel && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Notch, {
-					size,
-					ring: "halo",
-					disabled,
-					children: [label, asterisk]
-				}), /* @__PURE__ */ jsxs(Notch, {
-					size,
-					ring: "border",
-					disabled,
-					children: [label, asterisk]
-				})] }), children({
-					id,
-					invalid,
-					describedBy,
-					floating: floatingLabel,
-					floatingLabel: renderFloatingLabel
-				})]
-			}),
-			hasDescription && /* @__PURE__ */ jsxs("p", {
-				id: descriptionId,
-				className: cn("m-0 flex items-start gap-1 text-xs/snug", invalid ? "text-danger" : "text-fg-muted"),
-				children: [invalid && /* @__PURE__ */ jsx(CircleAlert, {
-					"aria-hidden": true,
-					className: "mt-px size-3.5 shrink-0"
-				}), /* @__PURE__ */ jsx("span", { children: description })]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-live": "polite",
-				"aria-atomic": true,
+//#endregion
+//#region src/components/badge/badge.tsx
+const toneClasses$1 = {
+	neutral: {
+		subtle: ["border-neutral-border bg-neutral-subtle-bg text-neutral-subtle-fg", "text-neutral"],
+		outline: ["border-neutral-border bg-transparent text-neutral-subtle-fg", "text-neutral"],
+		solid: ["border-neutral bg-neutral text-neutral-fg", "text-neutral-fg"]
+	},
+	info: {
+		subtle: ["border-info-border bg-info-subtle-bg text-info-subtle-fg", "text-info"],
+		outline: ["border-info-border bg-transparent text-info-subtle-fg", "text-info"],
+		solid: ["border-info bg-info text-info-fg", "text-info-fg"]
+	},
+	success: {
+		subtle: ["border-success-border bg-success-subtle-bg text-success-subtle-fg", "text-success"],
+		outline: ["border-success-border bg-transparent text-success-subtle-fg", "text-success"],
+		solid: ["border-success bg-success text-success-fg", "text-success-fg"]
+	},
+	warning: {
+		subtle: ["border-warning-border bg-warning-subtle-bg text-warning-subtle-fg", "text-warning"],
+		outline: ["border-warning-border bg-transparent text-warning-subtle-fg", "text-warning"],
+		solid: ["border-warning bg-warning text-warning-fg", "text-warning-fg"]
+	},
+	danger: {
+		subtle: ["border-danger-border bg-danger-subtle-bg text-danger-subtle-fg", "text-danger"],
+		outline: ["border-danger-border bg-transparent text-danger-subtle-fg", "text-danger"],
+		solid: ["border-danger bg-danger text-danger-fg", "text-danger-fg"]
+	}
+};
+const sizeClasses$3 = {
+	sm: {
+		base: "h-5 px-1.5",
+		withIcon: "ps-1"
+	},
+	md: {
+		base: "h-6 px-2",
+		withIcon: "ps-1.5"
+	}
+};
+function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, busy = false, context, className, children, ...props }) {
+	const [toneClass, iconClass] = toneClasses$1[tone][variant];
+	const hasIcon = busy || icon !== void 0 && icon !== null && icon !== false;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-slot": "badge",
+		className: cn("inline-flex items-center gap-1 rounded-md border text-xs leading-none font-medium whitespace-nowrap", "forced-colors:border-[CanvasText]", sizeClasses$3[size].base, hasIcon && sizeClasses$3[size].withIcon, toneClass, className),
+		children: [hasIcon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "badge-icon",
+			className: cn("inline-flex shrink-0 items-center [&_svg]:size-3 [&_svg]:shrink-0", iconClass),
+			children: busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] }) : icon
+		}), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "badge-label",
+			className: "min-w-0 truncate leading-4",
+			children: [context && /* @__PURE__ */ jsxs("span", {
 				className: "sr-only",
-				children: status
-			})
-		]
+				children: [context, ": "]
+			}), children]
+		})]
 	});
 }
-/** The input family's frame: adornments, actions and the input itself inside FieldShell. */
-function FieldFrame({ label, floating = false, helperText, error, size = "md", start, end, mono = false, validating = false, validatingText = "Checking…", className, inputClassName, inputRef: inputRefProp, actions, status, ref, id, required, disabled, readOnly, placeholder, "aria-describedby": describedByProp, "aria-invalid": ariaInvalid, ...props }) {
-	const ownRef = useRef(null);
-	const inputRef = inputRefProp ?? ownRef;
-	const setRef = useMergedRef(inputRef, ref);
-	const hasStart = isPresent(start);
-	const hasEnd = isPresent(end);
-	return /* @__PURE__ */ jsx(FieldShell, {
-		label,
-		floating,
-		helperText,
-		error,
-		size,
-		id,
-		required,
-		disabled,
-		readOnly,
-		"aria-describedby": describedByProp,
-		hasStart,
-		className,
-		status: validating ? validatingText : status ?? "",
-		controlRef: inputRef,
-		children: (field) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			hasStart ? /* @__PURE__ */ jsx(Adornment, {
-				node: start,
-				side: "start",
-				size
-			}) : null,
-			/* @__PURE__ */ jsxs("span", {
-				className: "@container flex min-w-0 flex-1 self-stretch rounded-[inherit]",
-				children: [field.floatingLabel("max-w-[calc(100cqw-1rem)]"), /* @__PURE__ */ jsx("input", {
-					...props,
-					ref: setRef,
-					id: field.id,
-					required,
-					disabled,
-					readOnly,
-					placeholder: field.floating ? placeholder || " " : placeholder,
-					"aria-invalid": field.invalid ? true : ariaInvalid,
-					"aria-describedby": field.describedBy,
-					spellCheck: mono ? false : props.spellCheck,
-					autoCapitalize: mono ? "off" : props.autoCapitalize,
-					autoCorrect: mono ? "off" : props.autoCorrect,
-					className: cn("h-full min-w-0 flex-1 rounded-[inherit] bg-transparent text-fg outline-none", "placeholder:text-input-placeholder pointer-coarse:text-base", "disabled:cursor-not-allowed", "autofill:[transition:background-color_0s_600000s] autofill:[-webkit-text-fill-color:var(--color-fg)]", textSize[size], inputPadding[size], hasStart && (isText(start) ? "ps-1" : "ps-2"), !validating && hasEnd && isText(end) ? "pe-1" : (validating || hasEnd || actions) && "pe-2", mono && "font-mono", field.floating && ["placeholder:opacity-0", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:placeholder:opacity-100"], inputClassName)
-				})]
-			}),
-			validating ? /* @__PURE__ */ jsx("span", {
-				className: cn("flex shrink-0 items-center self-stretch text-fg-muted", iconSize[size], endSlotPadding[size]),
-				children: /* @__PURE__ */ jsx(LoaderCircle, {
-					"aria-hidden": true,
-					className: "animate-spin motion-reduce:[animation-duration:2.5s]"
-				})
-			}) : hasEnd ? /* @__PURE__ */ jsx(Adornment, {
-				node: end,
-				side: "end",
-				size
-			}) : null,
-			actions ? /* @__PURE__ */ jsx("span", {
-				className: cn("flex shrink-0 items-center gap-0.5", actionsPadding[size]),
-				children: actions
-			}) : null
-		] })
+//#endregion
+//#region src/components/card/card.tsx
+const CardContext = createContext({
+	titleId: "",
+	setTitled: () => {}
+});
+/**
+* Bordered surface for a group of related content. No padding of its own: CardHeader and
+* CardContent add it, so full-bleed rows (lists, tables) can sit edge to edge.
+*/
+function Card({ as: Comp = "div", className, ...props }) {
+	const titleId = useId();
+	const [titled, setTitled] = useState(false);
+	return /* @__PURE__ */ jsx(CardContext, {
+		value: {
+			titleId,
+			setTitled
+		},
+		children: /* @__PURE__ */ jsx(Comp, {
+			"aria-labelledby": (Comp === "section" || Comp === "article") && titled && !props["aria-label"] ? titleId : void 0,
+			...props,
+			"data-slot": "card",
+			className: cn("rounded-xl border border-border-strong bg-surface", className)
+		})
+	});
+}
+function CardHeader({ title, description, action, headingLevel = 2, className, ...props }) {
+	const { titleId, setTitled } = useContext(CardContext);
+	useLayoutEffect(() => {
+		setTitled(true);
+		return () => setTitled(false);
+	}, [setTitled]);
+	const Heading = headingLevel === 2 ? "h2" : "h3";
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "card-header",
+		className: cn("flex items-start justify-between gap-4 px-5 pt-5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				id: titleId,
+				className: "font-sans text-sm font-medium",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-fg-muted",
+				children: description
+			})]
+		}), action && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: action
+		})]
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "card-content",
+		className: cn("p-5 [[data-slot=card-header]+&]:pt-4", className)
 	});
 }
 //#endregion
@@ -960,7 +1442,7 @@ function ChoiceRow({ slot, label, description, error, labelPosition = "end", gap
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": slot,
 		className: cn("relative isolate flex min-h-6 min-w-6 items-start text-sm/6 text-fg", "cursor-pointer has-[input:disabled]:cursor-not-allowed has-[input[aria-busy=true]]:cursor-progress", "has-[input:disabled]:opacity-50", "forced-colors:has-[input:disabled]:text-[GrayText] forced-colors:has-[input:disabled]:opacity-100", "pointer-coarse:before:absolute pointer-coarse:before:top-1/2 pointer-coarse:before:left-1/2", "pointer-coarse:before:-z-10 pointer-coarse:before:size-full pointer-coarse:before:min-h-11", "pointer-coarse:before:min-w-11 pointer-coarse:before:-translate-1/2", gap, labelPosition === "start" ? "w-full justify-between" : "w-fit max-w-full", className),
-		children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [text, controlSlot] }) : /* @__PURE__ */ jsxs(Fragment, { children: [controlSlot, text] })
+		children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [text, controlSlot] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [controlSlot, text] })
 	});
 }
 //#endregion
@@ -1034,52 +1516,561 @@ function Checkbox({ label, description, error, indeterminate = false, className,
 			]
 		})
 	});
-}
-//#endregion
-//#region src/components/checkbox/checkbox-group.tsx
-/** A `<fieldset>` + `<legend>` around related checkboxes; holds no value of its own. */
-function CheckboxGroup({ legend, description, error, orientation = "vertical", className, "aria-describedby": describedByProp, children, ...props }) {
-	const id = useId();
-	const descriptionId = `${id}-description`;
-	const errorId = `${id}-error`;
-	const hasDescription = isPresent(description);
-	const hasError = Boolean(error) && error !== true && isPresent(error);
-	const describedBy = [
-		describedByProp,
-		hasDescription && descriptionId,
-		hasError && errorId
-	].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ jsxs("fieldset", {
-		...props,
-		"data-slot": "checkbox-group",
-		"aria-describedby": describedBy,
-		className: cn("group/checkbox-group m-0 min-w-0 border-0 p-0", className),
-		children: [/* @__PURE__ */ jsx("legend", {
-			className: "float-start mb-1.5 w-full p-0 text-sm font-medium text-fg group-disabled/checkbox-group:opacity-50",
-			children: legend
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "clear-both flex flex-col",
-			children: [
-				hasDescription && /* @__PURE__ */ jsx("p", {
-					id: descriptionId,
-					className: "m-0 -mt-1 mb-2.5 text-xs/snug text-fg-muted group-disabled/checkbox-group:opacity-50",
-					children: description
-				}),
-				/* @__PURE__ */ jsx("div", {
-					"data-orientation": orientation,
-					className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-x-6 gap-y-2"),
-					children
-				}),
-				hasError && /* @__PURE__ */ jsxs("p", {
-					id: errorId,
-					className: "m-0 mt-2 flex items-start gap-1 text-xs/snug text-danger",
-					children: [/* @__PURE__ */ jsx(CircleAlert, {
+}
+//#endregion
+//#region src/components/checkbox/checkbox-group.tsx
+/** A `<fieldset>` + `<legend>` around related checkboxes; holds no value of its own. */
+function CheckboxGroup({ legend, description, error, orientation = "vertical", className, "aria-describedby": describedByProp, children, ...props }) {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const hasDescription = isPresent(description);
+	const hasError = Boolean(error) && error !== true && isPresent(error);
+	const describedBy = [
+		describedByProp,
+		hasDescription && descriptionId,
+		hasError && errorId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		"data-slot": "checkbox-group",
+		"aria-describedby": describedBy,
+		className: cn("group/checkbox-group m-0 min-w-0 border-0 p-0", className),
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "float-start mb-1.5 w-full p-0 text-sm font-medium text-fg group-disabled/checkbox-group:opacity-50",
+			children: legend
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "clear-both flex flex-col",
+			children: [
+				hasDescription && /* @__PURE__ */ jsx("p", {
+					id: descriptionId,
+					className: "m-0 -mt-1 mb-2.5 text-xs/snug text-fg-muted group-disabled/checkbox-group:opacity-50",
+					children: description
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-orientation": orientation,
+					className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-x-6 gap-y-2"),
+					children
+				}),
+				hasError && /* @__PURE__ */ jsxs("p", {
+					id: errorId,
+					className: "m-0 mt-2 flex items-start gap-1 text-xs/snug text-danger",
+					children: [/* @__PURE__ */ jsx(CircleAlert, {
+						"aria-hidden": true,
+						className: "mt-px size-3.5 shrink-0"
+					}), /* @__PURE__ */ jsx("span", { children: error })]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/combobox/types.ts
+const isGroup$1 = (item) => "options" in item;
+const normalize = (text) => text.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLocaleLowerCase();
+const defaultFilter = (option, query) => normalize([option.label, ...option.keywords ?? []].join(" ")).includes(normalize(query));
+//#endregion
+//#region src/components/combobox/use-combobox-position.ts
+const clamp$1 = (n, min, max) => Math.max(min, Math.min(n, Math.max(min, max)));
+/** Top-layer positioning only: unlike Menu, a combobox never transfers focus into the list. */
+function useComboboxPosition(open, inputRef, contentRef) {
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		const anchor = inputRef.current?.closest("[data-slot=\"input-control\"]");
+		if (!open || !content || !anchor) return;
+		content.showPopover?.();
+		const update = () => {
+			const rect = anchor.getBoundingClientRect();
+			const viewport = window.visualViewport;
+			const left = viewport?.offsetLeft ?? 0;
+			const top = viewport?.offsetTop ?? 0;
+			const width = viewport?.width ?? document.documentElement.clientWidth;
+			const height = viewport?.height ?? document.documentElement.clientHeight;
+			content.style.width = `${Math.min(rect.width, Math.max(0, width - 16))}px`;
+			const below = top + height - rect.bottom - 12;
+			const above = rect.top - top - 12;
+			const side = below < Math.min(content.scrollHeight, 280) && above > below ? "top" : "bottom";
+			content.style.maxHeight = `${Math.max(0, Math.min(280, side === "top" ? above : below))}px`;
+			const w = content.offsetWidth;
+			const h = content.offsetHeight;
+			const rtl = getComputedStyle(anchor).direction === "rtl";
+			content.style.left = `${Math.round(clamp$1(rtl ? rect.right - w : rect.left, left + 8, left + width - w - 8))}px`;
+			content.style.top = `${Math.round(clamp$1(side === "top" ? rect.top - h - 4 : rect.bottom + 4, top + 8, top + height - h - 8))}px`;
+			content.dataset.side = side;
+		};
+		update();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		observer?.observe(anchor);
+		observer?.observe(content);
+		const mutation = new MutationObserver(update);
+		mutation.observe(content, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		window.visualViewport?.addEventListener("resize", update);
+		window.visualViewport?.addEventListener("scroll", update);
+		return () => {
+			observer?.disconnect();
+			mutation.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+			window.visualViewport?.removeEventListener("resize", update);
+			window.visualViewport?.removeEventListener("scroll", update);
+			content.hidePopover?.();
+		};
+	}, [
+		open,
+		inputRef,
+		contentRef
+	]);
+}
+//#endregion
+//#region src/components/combobox/combobox.tsx
+const resultsText = (count) => `${count} ${count === 1 ? "option" : "options"} available.`;
+function Combobox({ options, value, defaultValue = null, onValueChange, inputValue, onInputValueChange, open: openProp, defaultOpen = false, onOpenChange, filter = defaultFilter, selectedOption, loading = false, loadingText = "Loading…", searchError, onRetry, retryText = "Retry", emptyText = "No matching options.", clearable = true, openOnFocus = false, clearLabel = "Clear selection", openLabel = "Open options", closeLabel = "Close options", requiredText = "Choose an option from the list.", unresolvedText = "The selected option is unavailable.", getResultsText = resultsText, label, floating, helperText, error, size = "md", start, mono, inputClassName, contentClassName, className, name, form, disabled, readOnly, required, ref, id: idProp, onClick, onFocus, onBlur, onKeyDown, onCompositionStart, onCompositionEnd, onInvalid, ...props }) {
+	const autoId = useId();
+	const id = idProp ?? `${autoId}-input`;
+	const listId = `${autoId}-list`;
+	const rootRef = useRef(null);
+	const inputRef = useRef(null);
+	const contentRef = useRef(null);
+	const hiddenRef = useRef(null);
+	const composing = useRef(false);
+	const skipFocusOpen = useRef(false);
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [draft, setDraft] = useState(null);
+	const [dirty, setDirty] = useState(false);
+	const [compositionText, setCompositionText] = useState(null);
+	const [active, setActive] = useState(null);
+	const [nativeInvalid, setNativeInvalid] = useState(false);
+	const selectedValue = value === void 0 ? internalValue : value;
+	const open = !disabled && !readOnly && (openProp ?? internalOpen);
+	const flat = useMemo(() => {
+		const items = options.flatMap((item) => isGroup$1(item) ? [...item.options] : [item]);
+		const seen = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (!item.value || seen.has(item.value)) throw new Error("Combobox option values must be unique, non-empty strings");
+			seen.add(item.value);
+		}
+		return items;
+	}, [options]);
+	const resolved = flat.find((item) => item.value === selectedValue) ?? (selectedOption?.value === selectedValue ? selectedOption : null);
+	const [cached, setCached] = useState(resolved);
+	const selected = resolved ?? (cached?.value === selectedValue ? cached : null);
+	const [initialOption, setInitialOption] = useState(resolved?.value === defaultValue ? resolved : null);
+	if (resolved?.value === defaultValue && resolved !== initialOption) setInitialOption(resolved);
+	const text = compositionText !== null ? draft ?? inputValue ?? selected?.label ?? "" : inputValue ?? draft ?? selected?.label ?? "";
+	const query = dirty ? compositionText ?? text : "";
+	const blocked = loading || Boolean(searchError);
+	const [previousResults, setPreviousResults] = useState({
+		options,
+		blocked,
+		filter
+	});
+	if (previousResults.options !== options || previousResults.blocked !== blocked || previousResults.filter !== filter) {
+		setPreviousResults({
+			options,
+			blocked,
+			filter
+		});
+		setActive(null);
+	}
+	const visible = flat.filter((item) => filter === false || !query || filter(item, query));
+	const activeItem = !blocked && active?.options === options && active.query === query ? visible.find((item) => item.value === active.value && !item.disabled) : void 0;
+	const optionId = (item) => `${autoId}-option-${encodeURIComponent(item.value)}`;
+	const activeId = open && activeItem ? optionId(activeItem) : void 0;
+	const invalidMessage = selectedValue !== null && !selected ? unresolvedText : required && selectedValue === null ? requiredText : "";
+	const fieldError = error || (nativeInvalid && invalidMessage ? invalidMessage : void 0);
+	const count = visible.filter((item) => !item.disabled).length;
+	const status = open ? searchError ? typeof searchError === "string" ? searchError : "Unable to load options." : loading ? loadingText : getResultsText(count) : "";
+	const [previousSelection, setPreviousSelection] = useState({
+		value: selectedValue,
+		label: selected?.label
+	});
+	if (resolved && resolved !== cached) setCached(resolved);
+	if (previousSelection.value !== selectedValue || previousSelection.label !== selected?.label) {
+		setPreviousSelection({
+			value: selectedValue,
+			label: selected?.label
+		});
+		setDraft(null);
+		setDirty(false);
+		setActive(null);
+	}
+	if (nativeInvalid && !invalidMessage) setNativeInvalid(false);
+	useLayoutEffect(() => {
+		inputRef.current?.setCustomValidity(disabled || readOnly ? "" : invalidMessage);
+	}, [
+		invalidMessage,
+		disabled,
+		readOnly
+	]);
+	useComboboxPosition(open, inputRef, contentRef);
+	useLayoutEffect(() => {
+		if (activeId) document.getElementById(activeId)?.scrollIntoView?.({ block: "nearest" });
+	}, [activeId]);
+	const updateText = (next, reason, fallback = false) => {
+		setDraft(fallback ? null : next);
+		if (next !== text || reason === "input") onInputValueChange?.(next, { reason });
+	};
+	const changeOpen = (next, reason) => {
+		if (openProp === void 0) setInternalOpen(next);
+		if (next !== open) onOpenChange?.(next, { reason });
+	};
+	const close = (reason) => {
+		changeOpen(false, reason);
+		updateText(selected?.label ?? "", "revert", true);
+		setDirty(false);
+		setActive(null);
+	};
+	const show = (reason, direction) => {
+		if (disabled || readOnly) return;
+		changeOpen(true, reason);
+		setDirty(false);
+		const items = flat.filter((item) => !item.disabled);
+		const initial = items.find((item) => item.value === selectedValue) ?? (direction === 1 ? items[0] : direction === -1 ? items.at(-1) : void 0);
+		setActive(initial ? {
+			value: initial.value,
+			options,
+			query: ""
+		} : null);
+	};
+	const focusInput = () => {
+		skipFocusOpen.current = true;
+		inputRef.current?.focus({ preventScroll: true });
+		skipFocusOpen.current = false;
+	};
+	const clear = (reason) => {
+		if (value === void 0) setInternalValue(null);
+		if (selectedValue !== null) onValueChange?.(null, {
+			reason: "clear",
+			option: null
+		});
+		updateText("", reason);
+		setDirty(true);
+		setActive(null);
+		changeOpen(true, "clear");
+	};
+	const edit = (next) => {
+		if (disabled || readOnly) return;
+		if (next === "") clear("input");
+		else {
+			updateText(next, "input");
+			setDirty(true);
+			setActive(null);
+			changeOpen(true, "input");
+		}
+	};
+	const choose = (item) => {
+		if (blocked || disabled || readOnly || item.disabled) return;
+		setCached(item);
+		if (value === void 0) setInternalValue(item.value);
+		if (selectedValue !== item.value) onValueChange?.(item.value, {
+			reason: "select",
+			option: item
+		});
+		updateText(item.label, "selection", true);
+		setDirty(false);
+		setActive(null);
+		changeOpen(false, "select");
+		focusInput();
+	};
+	const dismiss = useEffectEvent(close);
+	useLayoutEffect(() => {
+		if (!open) return;
+		const outside = (event) => {
+			if (!event.composedPath().includes(rootRef.current)) dismiss("outside");
+		};
+		document.addEventListener("pointerdown", outside, true);
+		return () => {
+			document.removeEventListener("pointerdown", outside, true);
+		};
+	}, [open]);
+	const wasOpen = useRef(open);
+	const settle = useEffectEvent(() => {
+		updateText(selected?.label ?? "", "revert", true);
+		setDirty(false);
+		setActive(null);
+	});
+	useLayoutEffect(() => {
+		if (wasOpen.current && !open) settle();
+		wasOpen.current = open;
+	}, [open]);
+	const reset = useEffectEvent(() => {
+		const nextValue = value === void 0 ? defaultValue : value;
+		const nextOption = flat.find((item) => item.value === nextValue) ?? (selectedOption?.value === nextValue ? selectedOption : null) ?? (cached?.value === nextValue ? cached : null) ?? (initialOption?.value === nextValue ? initialOption : null);
+		if (nextOption) setCached(nextOption);
+		const nextText = inputValue ?? nextOption?.label ?? "";
+		if (value === void 0) setInternalValue(nextValue);
+		if (openProp === void 0) setInternalOpen(false);
+		updateText(nextText, "reset", true);
+		setDirty(false);
+		setCompositionText(null);
+		composing.current = false;
+		setActive(null);
+		setNativeInvalid(false);
+		if (inputRef.current) inputRef.current.value = nextText;
+		if (hiddenRef.current) hiddenRef.current.value = nextValue ?? "";
+	});
+	useLayoutEffect(() => {
+		const owner = inputRef.current?.form;
+		if (!owner) return;
+		let timer;
+		const handleReset = (event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (!event.defaultPrevented) reset();
+			}, 0);
+		};
+		owner.addEventListener("reset", handleReset);
+		return () => {
+			clearTimeout(timer);
+			owner.removeEventListener("reset", handleReset);
+		};
+	}, [form]);
+	const renderOption = (item) => /* @__PURE__ */ jsxs("div", {
+		id: optionId(item),
+		role: "option",
+		"aria-selected": item.value === selectedValue,
+		"aria-disabled": item.disabled || void 0,
+		"aria-labelledby": `${optionId(item)}-label`,
+		"aria-describedby": item.description ? `${optionId(item)}-description` : void 0,
+		"data-slot": "combobox-option",
+		"data-active": activeItem?.value === item.value ? "" : void 0,
+		className: cn("flex min-h-8.5 cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm/5 text-fg outline-none select-none pointer-coarse:min-h-11", "data-active:bg-popover-highlight data-active:outline-1 data-active:-outline-offset-1 data-active:outline-input-border", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 forced-colors:data-active:outline-[Highlight]"),
+		onPointerMove: (event) => {
+			if (event.pointerType !== "touch" && !item.disabled) setActive({
+				value: item.value,
+				options,
+				query
+			});
+		},
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: () => choose(item),
+		children: [
+			item.icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "shrink-0 text-fg-muted [&_svg]:size-4",
+				children: item.icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 wrap-anywhere",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: `${optionId(item)}-label`,
+					children: item.label
+				}), item.description && /* @__PURE__ */ jsx("span", {
+					id: `${optionId(item)}-description`,
+					className: "mt-0.5 block text-xs/snug text-fg-muted",
+					children: item.description
+				})]
+			}),
+			/* @__PURE__ */ jsx(Check, {
+				"aria-hidden": true,
+				className: cn("size-4 shrink-0", item.value !== selectedValue && "invisible")
+			})
+		]
+	}, item.value);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		onBlur: (event) => {
+			if ((open || dirty) && !rootRef.current?.contains(event.relatedTarget)) close("blur");
+		},
+		"data-slot": "combobox",
+		"data-state": open ? "open" : "closed",
+		className: cn("w-full", className),
+		children: [
+			/* @__PURE__ */ jsx(FieldFrame, {
+				...props,
+				ref,
+				inputRef,
+				id,
+				type: "text",
+				form,
+				label,
+				floating,
+				helperText,
+				error: fieldError,
+				required,
+				disabled,
+				readOnly,
+				size,
+				start,
+				mono,
+				value: text,
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": open,
+				"aria-controls": open ? listId : void 0,
+				"aria-activedescendant": activeId,
+				autoComplete: props.autoComplete ?? "off",
+				status,
+				inputClassName,
+				className: "pointer-coarse:**:data-[slot=input-control]:min-h-11",
+				onChange: (event) => {
+					if (composing.current) setDraft(event.currentTarget.value);
+					else edit(event.currentTarget.value);
+				},
+				onCompositionStart: (event) => {
+					onCompositionStart?.(event);
+					composing.current = true;
+					setCompositionText(query);
+				},
+				onCompositionEnd: (event) => {
+					onCompositionEnd?.(event);
+					composing.current = false;
+					setCompositionText(null);
+					edit(event.currentTarget.value);
+				},
+				onClick: (event) => {
+					onClick?.(event);
+					if (!event.defaultPrevented && !open) show("trigger");
+				},
+				onFocus: (event) => {
+					onFocus?.(event);
+					if (!event.defaultPrevented && openOnFocus && !open && !skipFocusOpen.current) show("input");
+				},
+				onBlur,
+				onInvalid: (event) => {
+					setNativeInvalid(true);
+					onInvalid?.(event);
+				},
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented || disabled || readOnly || composing.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+					if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+						event.preventDefault();
+						const direction = event.key === "ArrowDown" ? 1 : -1;
+						if (!open) {
+							show("keyboard", direction);
+							return;
+						}
+						if (blocked) return;
+						const enabled = visible.filter((item) => !item.disabled);
+						const index = enabled.findIndex((item) => item.value === activeItem?.value);
+						const next = index < 0 ? direction === 1 ? enabled[0] : enabled.at(-1) : enabled[index + direction];
+						if (next) setActive({
+							value: next.value,
+							options,
+							query
+						});
+					} else if (event.key === "Enter" && open) {
+						event.preventDefault();
+						if (activeItem) choose(activeItem);
+					} else if (event.key === "Escape" && open) {
+						event.preventDefault();
+						event.stopPropagation();
+						close("escape");
+					} else if (event.key === "Tab" && !(searchError && onRetry)) close("blur");
+				},
+				actions: !readOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [clearable && (text !== "" || selectedValue !== null) && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					"aria-label": clearLabel,
+					intent: "ghost",
+					size,
+					disabled,
+					className: cn(compactButton[size], "pointer-coarse:size-11 pointer-coarse:before:hidden"),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => {
+						clear("clear");
+						focusInput();
+					}
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+					tabIndex: -1,
+					"aria-label": open ? closeLabel : openLabel,
+					"aria-expanded": open,
+					"aria-controls": open ? listId : void 0,
+					disabled,
+					intent: "ghost",
+					size,
+					className: cn(compactButton[size], "pointer-coarse:size-11 pointer-coarse:before:hidden"),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => {
+						focusInput();
+						if (open) close("trigger");
+						else show("trigger");
+					}
+				})] })
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				ref: hiddenRef,
+				type: "hidden",
+				name,
+				form,
+				disabled,
+				value: selectedValue ?? ""
+			}),
+			open && /* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				popover: "manual",
+				"data-slot": "combobox-content",
+				className: cn("fixed inset-auto z-50 m-0 box-border max-h-70 overflow-y-auto rounded-xl border border-popover-border bg-popover-bg p-1 font-sans text-sm text-fg shadow-popover outline-none scrollbar-subtle", "transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none", contentClassName),
+				onKeyDown: (event) => {
+					if (event.key === "Escape") {
+						event.preventDefault();
+						event.stopPropagation();
+						close("escape");
+						focusInput();
+					}
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					id: listId,
+					role: "listbox",
+					"aria-label": label ?? props["aria-label"],
+					"aria-busy": loading || void 0,
+					children: !blocked && options.map((item, index) => {
+						if (!isGroup$1(item)) return visible.includes(item) ? renderOption(item) : null;
+						const members = item.options.filter((option) => visible.includes(option));
+						if (!members.length) return null;
+						return /* @__PURE__ */ jsxs("div", {
+							role: "group",
+							"aria-labelledby": `${autoId}-group-${index}`,
+							"data-slot": "combobox-group",
+							className: "not-first:mt-1 not-first:border-t not-first:border-popover-border not-first:pt-1",
+							children: [/* @__PURE__ */ jsx("div", {
+								id: `${autoId}-group-${index}`,
+								className: "px-2 pt-1.5 pb-1 text-xs font-medium text-fg-muted",
+								children: item.label
+							}), members.map(renderOption)]
+						}, `${item.label}-${index}`);
+					})
+				}), searchError ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2 p-3 text-xs text-danger",
+					children: [
+						/* @__PURE__ */ jsx(CircleAlert, {
+							"aria-hidden": true,
+							className: "mt-px size-3.5 shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: searchError
+						}),
+						onRetry && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							intent: "secondary",
+							onClick: onRetry,
+							children: retryText
+						})
+					]
+				}) : loading ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-2 p-4 text-sm text-fg-muted",
+					children: [/* @__PURE__ */ jsx(LoaderCircle, {
 						"aria-hidden": true,
-						className: "mt-px size-3.5 shrink-0"
-					}), /* @__PURE__ */ jsx("span", { children: error })]
-				})
-			]
-		})]
+						className: "size-4 animate-spin motion-reduce:[animation-duration:2.5s]"
+					}), loadingText]
+				}) : visible.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "p-4 text-center text-sm text-fg-muted",
+					children: emptyText
+				}) : null]
+			})
+		]
 	});
 }
 //#endregion
@@ -1257,7 +2248,7 @@ function ModalShell({ kind, open, onOpenChange, alert = false, dismissible = tru
 			onMouseDown: handleMouseDown,
 			onClick: handleClick,
 			className,
-			children: rendered && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			children: rendered && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				hidden: true,
 				ref: showOnAttach
 			}, closeCount), children] })
@@ -1493,6 +2484,326 @@ function DrawerClose({ size = "sm", icon, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+const MenuContext = createContext(null);
+function useMenu() {
+	const value = use(MenuContext);
+	if (!value) throw new Error("DropdownMenu parts must be inside DropdownMenu");
+	return value;
+}
+function DropdownMenu({ children, open: controlled, defaultOpen = false, onOpenChange }) {
+	const [internal, setInternal] = useState(defaultOpen);
+	const id = useId();
+	const trigger = useRef(null);
+	const content = useRef(null);
+	const initialFocus = useRef("first");
+	const reason = useRef("trigger");
+	return /* @__PURE__ */ jsx(MenuContext, {
+		value: {
+			open: controlled ?? internal,
+			triggerId: `${id}-trigger`,
+			contentId: `${id}-menu`,
+			trigger,
+			content,
+			initialFocus,
+			reason,
+			change(next, why, focus = "first") {
+				if (next) initialFocus.current = focus;
+				reason.current = why;
+				if (controlled === void 0) setInternal(next);
+				onOpenChange?.(next, why);
+			}
+		},
+		children
+	});
+}
+function DropdownMenuTrigger({ asChild = false, ref, onClick, onClickCapture, onKeyDown, disabled, ...props }) {
+	const menu = useMenu();
+	const mergedRef = useMergedRef(menu.trigger, ref);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		...props,
+		ref: mergedRef,
+		id: menu.triggerId,
+		type: "button",
+		"data-slot": "dropdown-menu-trigger",
+		"data-state": menu.open ? "open" : "closed",
+		disabled: asChild ? disabled : void 0,
+		"aria-haspopup": "menu",
+		"aria-expanded": menu.open,
+		"aria-controls": menu.open ? menu.contentId : void 0,
+		"aria-disabled": disabled || props["aria-disabled"] || void 0,
+		onClickCapture: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClickCapture?.(event);
+		},
+		onClick: (event) => {
+			onClick?.(event);
+			if (disabled || event.defaultPrevented || event.currentTarget.getAttribute("aria-disabled") === "true") return;
+			menu.change(!menu.open, "trigger");
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (disabled || event.defaultPrevented || event.currentTarget.getAttribute("aria-disabled") === "true") return;
+			if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+				event.preventDefault();
+				menu.change(true, "trigger", event.key === "ArrowUp" ? "last" : "first");
+			}
+		}
+	});
+}
+const opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+const clamp = (value, low, high) => Math.max(low, Math.min(value, Math.max(low, high)));
+function items(content) {
+	return Array.from(content.querySelectorAll("[role=\"menuitem\"]")).filter((item) => !item.hidden && item.getAttribute("aria-hidden") !== "true");
+}
+function DropdownMenuContent(props) {
+	const { open } = useMenu();
+	return open ? /* @__PURE__ */ jsx(OpenContent, { ...props }) : null;
+}
+function OpenContent({ side = "bottom", align = "end", sideOffset = 6, className, ref, onKeyDown, style, ...props }) {
+	const menu = useMenu();
+	const { content: contentRef, trigger: triggerRef, initialFocus, reason: closeReason } = menu;
+	const mergedRef = useMergedRef(contentRef, ref);
+	const query = useRef({
+		text: "",
+		time: 0
+	});
+	const dismiss = useEffectEvent((reason) => menu.change(false, reason));
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		const trigger = triggerRef.current;
+		if (!content || !trigger) return;
+		content.showPopover?.();
+		const entries = items(content);
+		((initialFocus.current === "last" ? entries.at(-1) : entries[0]) ?? content).focus({ preventScroll: true });
+		const outside = (event) => {
+			const path = event.composedPath();
+			if (!path.includes(content) && !path.includes(trigger)) dismiss("outside");
+		};
+		const focusOutside = (event) => {
+			if (closeReason.current === "tab") return;
+			if (!content.contains(event.target) && !trigger.contains(event.target)) dismiss("outside");
+		};
+		const reasonRef = closeReason;
+		document.addEventListener("pointerdown", outside, true);
+		document.addEventListener("focusin", focusOutside);
+		return () => {
+			document.removeEventListener("pointerdown", outside, true);
+			document.removeEventListener("focusin", focusOutside);
+			const restore = content.contains(document.activeElement) && !["outside", "tab"].includes(reasonRef.current);
+			content.hidePopover?.();
+			if (restore && trigger.isConnected) trigger.focus({ preventScroll: true });
+		};
+	}, [
+		contentRef,
+		triggerRef,
+		initialFocus,
+		closeReason
+	]);
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		const trigger = triggerRef.current;
+		if (!content || !trigger) return;
+		const update = () => {
+			const rect = trigger.getBoundingClientRect();
+			const viewport = window.visualViewport;
+			const left = viewport?.offsetLeft ?? 0;
+			const top = viewport?.offsetTop ?? 0;
+			const width = viewport?.width ?? document.documentElement.clientWidth;
+			const height = viewport?.height ?? document.documentElement.clientHeight;
+			const gap = Math.max(0, sideOffset);
+			content.style.maxWidth = `${Math.max(0, width - 16)}px`;
+			content.style.maxHeight = `${Math.max(0, height - 16)}px`;
+			const room = {
+				top: rect.top - top,
+				bottom: top + height - rect.bottom,
+				left: rect.left - left,
+				right: left + width - rect.right
+			};
+			const vertical = side === "top" || side === "bottom";
+			const needed = (vertical ? content.scrollHeight : content.offsetWidth) + gap + 8;
+			const actual = room[side] < needed && room[opposite[side]] > room[side] ? opposite[side] : side;
+			if (vertical) content.style.maxHeight = `${Math.max(0, room[actual] - gap - 8)}px`;
+			else content.style.maxWidth = `${Math.max(0, room[actual] - gap - 8)}px`;
+			const w = content.offsetWidth;
+			const h = content.offsetHeight;
+			const rtl = getComputedStyle(trigger).direction === "rtl";
+			const fraction = {
+				start: 0,
+				center: .5,
+				end: 1
+			}[align];
+			const horizontalFraction = rtl ? 1 - fraction : fraction;
+			const x = vertical ? rect.left + (rect.width - w) * horizontalFraction : actual === "left" ? rect.left - w - gap : rect.right + gap;
+			const y = vertical ? actual === "top" ? rect.top - h - gap : rect.bottom + gap : rect.top + (rect.height - h) * fraction;
+			content.style.left = `${Math.round(clamp(x, left + 8, left + width - w - 8))}px`;
+			content.style.top = `${Math.round(clamp(y, top + 8, top + height - h - 8))}px`;
+			content.dataset.side = actual;
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(trigger);
+		observer.observe(content);
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		window.visualViewport?.addEventListener("resize", update);
+		window.visualViewport?.addEventListener("scroll", update);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+			window.visualViewport?.removeEventListener("resize", update);
+			window.visualViewport?.removeEventListener("scroll", update);
+		};
+	}, [
+		side,
+		align,
+		sideOffset,
+		contentRef,
+		triggerRef
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: mergedRef,
+		id: menu.contentId,
+		role: "menu",
+		tabIndex: -1,
+		"aria-labelledby": props["aria-label"] ? void 0 : menu.triggerId,
+		popover: "manual",
+		"data-slot": "dropdown-menu-content",
+		"data-state": "open",
+		style,
+		className: cn("fixed inset-auto z-50 m-0 box-border w-max min-w-50 overflow-y-auto rounded-lg border border-popover-border bg-popover-bg p-1 font-sans text-sm text-fg shadow-popover outline-none", "transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none", className),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			const entries = items(event.currentTarget);
+			const index = entries.indexOf(document.activeElement);
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				menu.change(false, "escape");
+			} else if (event.key === "Tab") {
+				event.preventDefault();
+				const trigger = menu.trigger.current;
+				if (!trigger) return;
+				const scope = trigger.closest("dialog[open]") ?? document.body;
+				const tabbables = Array.from(scope.querySelectorAll("a[href], button, input, select, textarea, [tabindex]")).filter((el) => el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[inert]") && !event.currentTarget.contains(el) && el.getClientRects().length > 0);
+				const target = tabbables[tabbables.indexOf(trigger) + (event.shiftKey ? -1 : 1)];
+				menu.change(false, "tab");
+				(target ?? trigger).focus();
+			} else if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Home",
+				"End"
+			].includes(event.key)) {
+				event.preventDefault();
+				entries[event.key === "Home" ? 0 : event.key === "End" ? entries.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + entries.length) % entries.length]?.focus();
+			} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+				event.preventDefault();
+				const now = Date.now();
+				query.current.text = (now - query.current.time > 500 ? "" : query.current.text) + event.key.toLocaleLowerCase();
+				query.current.time = now;
+				const text = query.current.text;
+				const term = Array.from(text).every((char) => char === text[0]) ? text[0] : text;
+				[...entries.slice(index + 1), ...entries.slice(0, index + 1)].find((item) => (item.dataset.textValue ?? item.textContent ?? "").trim().toLocaleLowerCase().startsWith(term))?.focus();
+			}
+		}
+	});
+}
+function DropdownMenuItem({ asChild = false, iconLeft, tone = "default", textValue, disabled, onSelect, onClick, onClickCapture, onAuxClickCapture, onKeyDown, onPointerMove, children, className, ...props }) {
+	const menu = useMenu();
+	const Component = asChild ? Slot : "button";
+	const renderContent = (label) => /* @__PURE__ */ jsxs(Fragment$1, { children: [iconLeft && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		children: iconLeft
+	}), label] });
+	const child = asChild ? Children.only(children) : null;
+	const content = isValidElement(child) ? cloneElement(child, { children: wrapChildren(child.props.children, renderContent) }) : renderContent(children);
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		type: asChild ? void 0 : "button",
+		role: "menuitem",
+		tabIndex: -1,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "dropdown-menu-item",
+		"data-tone": tone,
+		"data-text-value": textValue,
+		className: cn("flex min-h-8 w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm/snug outline-none select-none pointer-coarse:min-h-10", "focus:bg-popover-highlight focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0", tone === "danger" ? "text-danger-subtle-fg focus:bg-danger-subtle-bg" : "text-fg [&_svg]:text-fg-muted", className),
+		onClickCapture: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClickCapture?.(event);
+		},
+		onAuxClickCapture: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onAuxClickCapture?.(event);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (!event.defaultPrevented && event.pointerType !== "touch") event.currentTarget.focus({ preventScroll: true });
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				event.currentTarget.click();
+			}
+		},
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+			const selection = new Event("select", { cancelable: true });
+			onSelect?.(selection);
+			if (!selection.defaultPrevented) menu.change(false, "item-select");
+		},
+		children: content
+	});
+}
+function DropdownMenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "group",
+		"data-slot": "dropdown-menu-group",
+		className
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "dropdown-menu-label",
+		className: cn("px-2 py-1.5 text-xs text-fg-muted", className)
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		...props,
+		"data-slot": "dropdown-menu-separator",
+		className: cn("my-1 h-px border-0 bg-popover-border", className)
+	});
+}
+//#endregion
 //#region src/components/input/copy-input.tsx
 const RESET_MS = 1500;
 function CopyInput({ value, mono = true, size = "md", onFocus, onClick, ...props }) {
@@ -1677,6 +2988,197 @@ function Meter({ label, summary, segments, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/radio-group/radio-group.tsx
+const RadioContext = createContext(null);
+function RadioGroup({ name, legend, description, error, value, defaultValue, onValueChange, variant = "default", orientation = "vertical", itemsClassName, children, className, disabled, required, form, ref, "aria-invalid": ariaInvalid, "aria-describedby": describedByProp, ...props }) {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const legendId = `${id}-legend`;
+	const invalid = Boolean(error) || ariaInvalid === true || ariaInvalid === "true";
+	const hasDescription = isPresent(description);
+	const hasError = Boolean(error) && error !== true && isPresent(error);
+	const describedBy = [
+		describedByProp,
+		hasDescription && descriptionId,
+		hasError && errorId
+	].filter(Boolean).join(" ") || void 0;
+	const controlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+	const selected = controlled ? value : internalValue;
+	const groupRef = useRef(null);
+	const mergedRef = useMergedRef(groupRef, ref);
+	const inputs = useRef(/* @__PURE__ */ new Set());
+	const currentSelection = useRef(selected);
+	useLayoutEffect(() => {
+		currentSelection.current = selected;
+	}, [selected]);
+	const register = useCallback((node) => {
+		const members = inputs.current;
+		if ([...members].some((input) => input.value === node.value)) throw new Error(`Radio values must be unique within a RadioGroup: "${node.value}"`);
+		members.add(node);
+		const reconcile = () => {
+			queueMicrotask(() => {
+				if (controlled || !groupRef.current) return;
+				setInternalValue((current) => [...members].some((input) => input.value === current) ? current : null);
+			});
+		};
+		reconcile();
+		return () => {
+			members.delete(node);
+			reconcile();
+		};
+	}, [controlled]);
+	useLayoutEffect(() => {
+		const owner = groupRef.current?.form;
+		if (!owner) return;
+		let timer;
+		const reset = (event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				const next = controlled ? currentSelection.current : defaultValue ?? null;
+				const members = [...inputs.current];
+				if (!controlled) setInternalValue(members.some((input) => input.value === next) ? next : null);
+				for (const input of members) input.checked = input.value === next;
+			}, 0);
+		};
+		owner.addEventListener("reset", reset);
+		return () => {
+			clearTimeout(timer);
+			owner.removeEventListener("reset", reset);
+		};
+	}, [
+		controlled,
+		defaultValue,
+		form
+	]);
+	return /* @__PURE__ */ jsx(RadioContext, {
+		value: {
+			name,
+			form,
+			selected,
+			disabled,
+			required,
+			invalid,
+			describedBy,
+			variant,
+			orientation,
+			register,
+			select: (event) => {
+				if (!event.currentTarget.checked) return;
+				const next = event.currentTarget.value;
+				if (!controlled) setInternalValue(next);
+				onValueChange?.(next, event);
+			}
+		},
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			...props,
+			ref: mergedRef,
+			name,
+			form,
+			disabled,
+			"data-slot": "radio-group",
+			"data-variant": variant,
+			role: "radiogroup",
+			"aria-labelledby": props["aria-labelledby"] ?? legendId,
+			"aria-describedby": describedBy,
+			"aria-invalid": invalid ? true : ariaInvalid,
+			"aria-required": required || void 0,
+			"aria-orientation": orientation,
+			className: cn("group/radio-group m-0 min-w-0 border-0 p-0", className),
+			children: [/* @__PURE__ */ jsxs("legend", {
+				id: legendId,
+				className: "float-start mb-1.5 w-full p-0 text-sm font-medium text-fg group-disabled/radio-group:opacity-50",
+				children: [legend, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "text-danger",
+					children: " *"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "clear-both flex flex-col",
+				children: [
+					hasDescription && /* @__PURE__ */ jsx("p", {
+						id: descriptionId,
+						className: "m-0 -mt-1 mb-2.5 text-xs/snug text-fg-muted group-disabled/radio-group:opacity-50",
+						children: description
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "radio-group-items",
+						"data-orientation": orientation,
+						className: cn("flex gap-2", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap gap-x-6", variant === "card" && orientation === "horizontal" && "gap-3", itemsClassName),
+						children
+					}),
+					hasError && /* @__PURE__ */ jsxs("p", {
+						id: errorId,
+						className: "m-0 mt-2 flex items-start gap-1 text-xs/snug text-danger",
+						children: [/* @__PURE__ */ jsx(CircleAlert, {
+							"aria-hidden": true,
+							className: "mt-px size-3.5 shrink-0"
+						}), /* @__PURE__ */ jsx("span", { children: error })]
+					})
+				]
+			})]
+		})
+	});
+}
+function Radio({ value, label, description, disabled, className, inputClassName, ref, onChange, "aria-describedby": describedBy, ...props }) {
+	const group = useContext(RadioContext);
+	if (!group) throw new Error("Radio must be rendered inside <RadioGroup>");
+	if (value === "") throw new Error("Radio value must be a non-empty string");
+	const ownRef = useRef(null);
+	const mergedRef = useMergedRef(ownRef, ref);
+	const register = group.register;
+	useLayoutEffect(() => {
+		if (ownRef.current) return register(ownRef.current);
+	}, [register, value]);
+	const card = group.variant === "card";
+	const invalid = group.invalid;
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		slot: "radio",
+		label,
+		description,
+		gap: card ? "gap-3" : "gap-2",
+		controlOffset: "mt-1",
+		"aria-describedby": [describedBy, group.describedBy].filter(Boolean).join(" ") || void 0,
+		className: cn("group/radio wrap-anywhere motion-reduce:**:transition-none", "pointer-coarse:min-h-11 pointer-coarse:py-2.5", card && [
+			"w-full rounded-lg border bg-surface p-3 pointer-coarse:p-3",
+			"transition-[border-color,background-color] duration-150 ease-out",
+			"[&>span:last-child>span:first-child]:font-medium",
+			"has-[input:checked]:bg-[color-mix(in_oklab,var(--color-control-checked)_4%,var(--color-surface))]",
+			"has-[input:focus-visible]:outline-solid has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2",
+			invalid ? "border-danger has-[input:focus-visible]:outline-danger" : "border-input-border has-[input:checked]:border-control-checked has-[input:enabled]:hover:border-input-border-hover has-[input:focus-visible]:outline-control-checked",
+			"forced-colors:has-[input:checked]:border-[Highlight] forced-colors:has-[input:focus-visible]:outline-[Highlight]",
+			group.orientation === "horizontal" && "flex-[1_1_14rem]"
+		], className),
+		control: (row) => /* @__PURE__ */ jsxs("span", {
+			className: "relative inline-grid size-4 place-items-center transition-[scale] duration-100 ease-out has-[input:enabled:active]:scale-[0.92]",
+			children: [/* @__PURE__ */ jsx("input", {
+				...props,
+				ref: mergedRef,
+				"data-slot": "radio-input",
+				type: "radio",
+				name: group.name,
+				form: group.form,
+				value,
+				checked: group.selected === value,
+				disabled: group.disabled || disabled,
+				required: group.required,
+				"aria-labelledby": props["aria-labelledby"] ?? row.labelledBy,
+				"aria-describedby": row.describedBy,
+				onChange: (event) => {
+					onChange?.(event);
+					group.select(event);
+				},
+				className: cn("peer col-start-1 row-start-1 m-0 size-4 cursor-pointer appearance-none rounded-full border outline-hidden disabled:cursor-not-allowed", "bg-input-bg checked:bg-control-checked", "transition-[border-color,background-color,box-shadow] duration-150 ease-out", invalid ? "border-danger [box-shadow:0_0_0_3px_var(--color-input-halo-invalid)]" : "border-input-border checked:border-control-checked group-hover/radio:enabled:not-checked:border-input-border-hover", !card && [invalid ? "focus-visible:[box-shadow:0_0_0_3px_var(--color-input-halo-invalid-focus)] not-forced-colors:focus-visible:outline-danger" : "focus-visible:border-input-focus focus-visible:[box-shadow:0_0_0_3px_var(--color-input-halo)] not-forced-colors:focus-visible:outline-control-checked", "checked:focus-visible:shadow-none checked:focus-visible:outline-solid checked:focus-visible:outline-2 checked:focus-visible:outline-offset-2"], card && "focus-visible:outline-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]", "forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]", "forced-colors:disabled:border-[GrayText] forced-colors:disabled:checked:bg-[GrayText]", !card && "forced-colors:focus-visible:outline-[Highlight]", inputClassName)
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none col-start-1 row-start-1 size-1.5 scale-0 rounded-full bg-control-checked-fg transition-[scale] duration-150 ease-out peer-checked:scale-100 forced-colors:forced-color-adjust-none forced-colors:bg-[HighlightText] forced-colors:peer-disabled:bg-[Canvas]"
+			})]
+		})
+	});
+}
+//#endregion
 //#region src/components/select/select.tsx
 const selectPadding = {
 	sm: "px-3",
@@ -1761,7 +3263,7 @@ function Select({ options, placeholder, helperText, error, size = "md", start, m
 		className,
 		controlRef: selectRef,
 		activate: openPicker,
-		children: (field) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		children: (field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			field.floatingLabel(labelRestingWidth[size]),
 			/* @__PURE__ */ jsxs("select", {
 				...props,
@@ -1790,73 +3292,18 @@ function Select({ options, placeholder, helperText, error, size = "md", start, m
 			}),
 			hasLeading && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("pointer-events-none absolute inset-y-0 inset-s-0 flex items-center text-fg-muted [&_svg]:shrink-0", iconSize[size], startSlotPadding[size]),
+				className: cn("pointer-events-none absolute inset-y-0 inset-s-0 flex items-center text-fg-muted [&_svg]:shrink-0", iconSize$1[size], startSlotPadding[size]),
 				children: leading
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("pointer-events-none absolute inset-y-0 inset-e-0 flex items-center text-fg-muted", iconSize[size], endSlotPadding[size]),
+				className: cn("pointer-events-none absolute inset-y-0 inset-e-0 flex items-center text-fg-muted", iconSize$1[size], endSlotPadding[size]),
 				children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-150 ease-out group-has-[select:open]/control:rotate-180 motion-reduce:transition-none" })
 			})
 		] })
 	});
 }
 //#endregion
-//#region src/lib/slot.tsx
-function setRef(ref, node) {
-	if (typeof ref === "function") return ref(node);
-	if (ref) ref.current = node;
-}
-function composeRefs(...refs) {
-	return (node) => {
-		const cleanups = refs.map((ref) => setRef(ref, node));
-		return () => {
-			for (const [i, ref] of refs.entries()) {
-				const cleanup = cleanups[i];
-				if (typeof cleanup === "function") cleanup();
-				else setRef(ref, null);
-			}
-		};
-	};
-}
-function mergeProps(slot, child) {
-	const merged = {
-		...slot,
-		...child
-	};
-	for (const key of Object.keys(slot)) {
-		const own = slot[key];
-		const theirs = child[key];
-		if (/^on[A-Z]/.test(key) && typeof own === "function" && typeof theirs === "function") merged[key] = (...args) => {
-			theirs(...args);
-			own(...args);
-		};
-		else if (key === "className") merged.className = cn(own, theirs);
-		else if (key === "style") merged.style = {
-			...own,
-			...theirs
-		};
-	}
-	return merged;
-}
-/** Applies `wrap` to an element's children, or to what a render-prop child returns. */
-function wrapChildren(children, wrap) {
-	if (typeof children !== "function") return wrap(children);
-	return (...args) => wrap(children(...args));
-}
-/** Renders its only child with these props merged in (Radix Slot style). */
-function Slot({ children, ref, ...props }) {
-	const child = Children.only(children);
-	const childProps = isValidElement(child) ? child.props : {};
-	const childRef = childProps.ref;
-	const composedRef = useMemo(() => composeRefs(ref, childRef), [ref, childRef]);
-	if (!isValidElement(child)) return null;
-	return cloneElement(child, {
-		...mergeProps(props, childProps),
-		ref: composedRef
-	});
-}
-//#endregion
 //#region src/components/tabs/shared.tsx
 const listBase = [
 	"relative isolate max-w-full overflow-x-auto overscroll-x-contain scroll-px-6",
@@ -1965,7 +3412,7 @@ function TabContent({ icon, badge, children }) {
 					children
 				})]
 			}),
-			badge != null && badge !== false && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+			badge != null && badge !== false && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
 				"data-slot": "tab-badge",
 				className: "inline-flex",
 				children: badge
@@ -2153,7 +3600,7 @@ function SidebarProvider({ children }) {
 function Sidebar({ className, children, ...props }) {
 	const { open, setOpen, drawerId } = useSidebarContext("Sidebar");
 	const label = props["aria-label"] ? { "aria-label": props["aria-label"] } : { "aria-labelledby": props["aria-labelledby"] };
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PanelContext, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PanelContext, {
 		value: { drawer: false },
 		children: /* @__PURE__ */ jsx("nav", {
 			...props,
@@ -2373,13 +3820,586 @@ function SidebarIcon({ className, ...props }) {
 }
 /** Count at the end of a SidebarItem, as a small neutral Badge; part of the name ("Projects 8"). */
 function SidebarBadge({ className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Badge, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(Badge, {
 		size: "sm",
 		...props,
 		className: cn("shrink-0", className)
 	})] });
 }
 //#endregion
+//#region src/components/slider/scale.ts
+const fail = (message) => {
+	throw new Error(`Slider: ${message}`);
+};
+const close = (value, integer) => Math.abs(value - integer) <= 1e-7;
+const decimals = (value) => {
+	const [digits, exponent = "0"] = String(value).toLowerCase().split("e");
+	return Math.max(0, (digits.split(".")[1]?.length ?? 0) - Number(exponent));
+};
+/** Work in integer ticks, not repeated floating point additions. */
+function createScale(min, max, step, gap) {
+	if (![
+		min,
+		max,
+		step,
+		gap
+	].every(Number.isFinite)) fail("bounds, step and gap must be finite");
+	if (min >= max || step <= 0) fail("min must be less than max and step must be positive");
+	if (!Number.isInteger(gap) || gap < 0) fail("minStepsBetweenThumbs must be a non-negative integer");
+	const factor = 10 ** Math.max(decimals(min), decimals(max), decimals(step));
+	const start = Math.round(min * factor), end = Math.round(max * factor), increment = Math.round(step * factor);
+	if (![
+		start,
+		end,
+		increment,
+		end - start
+	].every(Number.isSafeInteger) || increment < 1) fail("bounds and step exceed safe numeric precision");
+	const count = (end - start) / increment;
+	if (!Number.isSafeInteger(count)) fail("(max - min) must be evenly divisible by step");
+	if (gap > count) fail("minimum thumb distance exceeds the available range");
+	const fromTick = (tick) => (start + tick * increment) / factor;
+	const toTick = (value) => (value * factor - start) / increment;
+	const validate = (values, length) => {
+		if (values.length !== length) fail(`expected ${length} value${length === 1 ? "" : "s"}`);
+		const ticks = values.map((value) => {
+			if (!Number.isFinite(value)) fail("values must be finite");
+			const tick = toTick(value), rounded = Math.round(tick);
+			if (!close(tick, rounded) || rounded < 0 || rounded > count) fail("values must be on a step within min and max");
+			return rounded;
+		});
+		if (ticks.length === 2 && ticks[1] - ticks[0] < gap) fail("range values must be ordered and satisfy the minimum distance");
+		return ticks.map(fromTick);
+	};
+	const normalize = (values) => {
+		const ticks = values.map((value) => Math.max(0, Math.min(count, Math.round(toTick(value)))));
+		if (ticks.length === 2) {
+			ticks[0] = Math.min(ticks[0], count - gap);
+			ticks[1] = Math.max(ticks[1], ticks[0] + gap);
+		}
+		return ticks.map(fromTick);
+	};
+	const limits = (values, index) => values.length === 1 ? [0, count] : index === 0 ? [0, Math.round(toTick(values[1])) - gap] : [Math.round(toTick(values[0])) + gap, count];
+	const move = (values, index, tick) => {
+		const [low, high] = limits(values, index);
+		return values.map((value, i) => i === index ? fromTick(Math.max(low, Math.min(high, Math.round(tick)))) : value);
+	};
+	return {
+		min,
+		max,
+		step,
+		gap,
+		count,
+		fromTick,
+		toTick,
+		validate,
+		normalize,
+		limits,
+		move,
+		key: `${min}/${max}/${step}/${gap}`
+	};
+}
+const sameValues = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+//#endregion
+//#region src/components/slider/use-slider.ts
+const keys = [
+	"ArrowRight",
+	"ArrowLeft",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+];
+function useSlider(options) {
+	const { scale, value, defaultValue, disabled, form } = options;
+	const controlled = value !== void 0;
+	const [internal, setInternal] = useState(() => [...defaultValue]);
+	const values = controlled ? value : scale.normalize(internal);
+	if (!controlled && !sameValues(internal, values)) setInternal([...values]);
+	const [dragging, setDragging] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const inputs = useRef([]);
+	const controlRef = useRef(null);
+	const railRef = useRef(null);
+	const session = useRef(null);
+	const lastIndex = useRef(0);
+	const mounted = useRef(false);
+	const generation = useRef(0);
+	const latest = useRef({
+		...options,
+		values,
+		controlled
+	});
+	function release() {
+		const current = session.current;
+		session.current = null;
+		if (!current) return null;
+		current.removeListeners?.();
+		if (current.pointerId !== void 0 && current.control?.hasPointerCapture?.(current.pointerId)) current.control.releasePointerCapture(current.pointerId);
+		if (mounted.current) setDragging(false);
+		return current;
+	}
+	function canUse(index) {
+		return !latest.current.disabled && !!inputs.current[index] && !inputs.current[index].matches(":disabled");
+	}
+	function publish(next, details) {
+		const state = latest.current;
+		if (sameValues(state.values, next)) return;
+		if (session.current) session.current.expected = next;
+		if (!state.controlled) {
+			latest.current = {
+				...state,
+				values: next
+			};
+			setInternal(next);
+		}
+		state.onValueChange?.(next, details);
+	}
+	function commit(start, expected, details, key, defer = false) {
+		const token = generation.current;
+		const notify = () => {
+			const state = latest.current;
+			if (!mounted.current || token !== generation.current || state.scale.key !== key || !canUse(details.thumbIndex)) return;
+			if (!sameValues(state.values, expected) || sameValues(start, state.values)) return;
+			state.onValueCommit?.([...state.values], details);
+		};
+		if (defer) queueMicrotask(notify);
+		else notify();
+	}
+	function finish(canceled = false) {
+		const current = release();
+		if (!current) return;
+		if (canceled) {
+			generation.current++;
+			publish(current.start, {
+				thumbIndex: current.index,
+				reason: "cancel"
+			});
+		} else commit(current.start, current.expected, {
+			thumbIndex: current.index,
+			reason: current.reason
+		}, current.scaleKey);
+	}
+	function begin(index, reason) {
+		const state = latest.current;
+		const current = {
+			index,
+			reason,
+			start: [...state.values],
+			expected: [...state.values],
+			scaleKey: state.scale.key,
+			keys: /* @__PURE__ */ new Set(),
+			offset: 0,
+			startX: 0,
+			pending: false
+		};
+		session.current = current;
+		return current;
+	}
+	function move(index, tick, reason) {
+		if (!canUse(index)) {
+			release();
+			return;
+		}
+		const state = latest.current;
+		publish(state.scale.move(state.values, index, tick), {
+			thumbIndex: index,
+			reason
+		});
+	}
+	function direction() {
+		const node = controlRef.current;
+		return node ? getComputedStyle(node).direction || node.closest("[dir]")?.getAttribute("dir") || "ltr" : "ltr";
+	}
+	function tickAt(clientX) {
+		const rect = railRef.current?.getBoundingClientRect();
+		if (!rect || rect.width <= 0) return null;
+		let ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+		if (direction() === "rtl") ratio = 1 - ratio;
+		return ratio * latest.current.scale.count;
+	}
+	function focus(index) {
+		lastIndex.current = index;
+		setActiveIndex(index);
+		inputs.current[index]?.focus({ preventScroll: true });
+	}
+	function onPointerDown(event) {
+		if (event.defaultPrevented || event.button !== 0 || event.isPrimary === false || session.current?.reason === "pointer") return;
+		if (!canUse(0)) return;
+		const tick = tickAt(event.clientX);
+		if (tick === null) return;
+		if (session.current) finish();
+		const state = latest.current;
+		const distances = state.values.map((v) => Math.abs(state.scale.toTick(v) - tick));
+		const index = distances.length === 1 ? 0 : distances[0] === distances[1] ? lastIndex.current : distances[0] < distances[1] ? 0 : 1;
+		event.preventDefault();
+		focus(index);
+		const current = begin(index, "pointer");
+		current.pointerId = event.pointerId;
+		current.control = event.currentTarget;
+		current.startX = event.clientX;
+		const rect = railRef.current.getBoundingClientRect();
+		const ratio = state.scale.toTick(state.values[index]) / state.scale.count;
+		const center = rect.left + (direction() === "rtl" ? 1 - ratio : ratio) * rect.width;
+		const grabbed = Math.abs(event.clientX - center) <= 22;
+		current.offset = grabbed ? event.clientX - center : 0;
+		current.pending = state.values.length === 2 && state.values[0] === state.values[1] && grabbed;
+		setDragging(true);
+		const owner = event.currentTarget.ownerDocument.defaultView;
+		const pointerMove = (next) => {
+			if (session.current !== current || next.pointerId !== current.pointerId) return;
+			const target = tickAt(next.clientX - current.offset);
+			if (target === null) return;
+			if (current.pending) {
+				if (Math.abs(next.clientX - current.startX) < 2) return;
+				current.index = target < latest.current.scale.toTick(current.start[0]) ? 0 : 1;
+				current.pending = false;
+				focus(current.index);
+			}
+			move(current.index, target, "pointer");
+		};
+		const pointerEnd = (next) => {
+			if (session.current === current && next.pointerId === current.pointerId) finish(next.type !== "pointerup");
+		};
+		owner.addEventListener("pointermove", pointerMove);
+		owner.addEventListener("pointerup", pointerEnd);
+		owner.addEventListener("pointercancel", pointerEnd);
+		current.control.addEventListener("lostpointercapture", pointerEnd);
+		current.removeListeners = () => {
+			owner.removeEventListener("pointermove", pointerMove);
+			owner.removeEventListener("pointerup", pointerEnd);
+			owner.removeEventListener("pointercancel", pointerEnd);
+			current.control?.removeEventListener("lostpointercapture", pointerEnd);
+		};
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		if (!grabbed) move(index, tick, "pointer");
+	}
+	function onKeyDown(event, index) {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || !keys.includes(event.key) || !canUse(index)) return;
+		event.preventDefault();
+		if (session.current?.reason === "pointer") return;
+		(session.current ?? begin(index, "keyboard")).keys.add(event.key);
+		const state = latest.current;
+		const right = direction() === "rtl" ? -1 : 1;
+		const deltas = {
+			ArrowRight: right,
+			ArrowLeft: -right,
+			ArrowUp: 1,
+			ArrowDown: -1,
+			PageUp: 10,
+			PageDown: -10
+		};
+		const [low, high] = state.scale.limits(state.values, index);
+		move(index, event.key === "Home" ? low : event.key === "End" ? high : state.scale.toTick(state.values[index]) + deltas[event.key], "keyboard");
+	}
+	function onKeyUp(event) {
+		const current = session.current;
+		if (current?.reason !== "keyboard" || !current.keys.has(event.key)) return;
+		current.keys.delete(event.key);
+		if (!current.keys.size) finish();
+	}
+	function onInput(value, index) {
+		if (session.current || !canUse(index) || !Number.isFinite(value)) return;
+		const state = latest.current, start = [...state.values];
+		const next = state.scale.move(start, index, state.scale.toTick(value));
+		publish(next, {
+			thumbIndex: index,
+			reason: "input"
+		});
+		commit(start, next, {
+			thumbIndex: index,
+			reason: "input"
+		}, state.scale.key, true);
+	}
+	useLayoutEffect(() => {
+		latest.current = {
+			...options,
+			values,
+			controlled
+		};
+		const current = session.current;
+		if (current && (current.scaleKey !== scale.key || disabled || !sameValues(values, current.expected))) {
+			generation.current++;
+			release();
+		}
+	});
+	const cancelRef = useRef(() => {});
+	useLayoutEffect(() => {
+		cancelRef.current = () => finish(true);
+	});
+	useLayoutEffect(() => {
+		mounted.current = true;
+		const owner = controlRef.current?.ownerDocument.defaultView;
+		const blur = () => cancelRef.current();
+		owner?.addEventListener("blur", blur);
+		return () => {
+			mounted.current = false;
+			generation.current++;
+			release();
+			owner?.removeEventListener("blur", blur);
+		};
+	}, []);
+	useLayoutEffect(() => {
+		const owner = inputs.current[0]?.form;
+		if (!owner) return;
+		let timer;
+		const reset = (event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				generation.current++;
+				release();
+				const state = latest.current;
+				const next = state.controlled ? state.values : state.defaultValue;
+				if (!state.controlled) {
+					latest.current = {
+						...state,
+						values: next
+					};
+					setInternal([...next]);
+				}
+				inputs.current.forEach((input, index) => {
+					if (!input) return;
+					const [low, high] = state.scale.limits(next, index);
+					input.min = String(state.scale.fromTick(low));
+					input.max = String(state.scale.fromTick(high));
+					input.value = String(next[index]);
+				});
+			}, 0);
+		};
+		owner.addEventListener("reset", reset);
+		return () => {
+			clearTimeout(timer);
+			owner.removeEventListener("reset", reset);
+		};
+	}, [form]);
+	return {
+		values,
+		dragging,
+		activeIndex,
+		inputs,
+		controlRef,
+		railRef,
+		onPointerDown,
+		onKeyDown,
+		onKeyUp,
+		onInput,
+		onFocus: (index) => {
+			lastIndex.current = index;
+			setActiveIndex(index);
+		},
+		onBlur: () => {
+			if (session.current?.reason === "keyboard") finish(!controlRef.current?.ownerDocument.hasFocus());
+		}
+	};
+}
+//#endregion
+//#region src/components/slider/slider.tsx
+function SliderControl({ values, defaults, names, thumbLabels, range = false, minStepsBetweenThumbs = 0, min = 0, max = 100, step = 1, disabled = false, form, label, helperText, error, showValue = true, formatValue = String, getValueText, marks, change, commit, className, ref, onPointerDown, onKeyDown, onKeyUp, onBlur, onFocus, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const id = useId();
+	const scale = createScale(min, max, step, minStepsBetweenThumbs);
+	const length = range ? 2 : 1;
+	const initial = scale.validate(defaults ?? (range ? [min, max] : [min]), length);
+	const selected = values === void 0 ? void 0 : scale.validate(values, length);
+	const hasLabel = isPresent(label);
+	if (!hasLabel && !ariaLabel?.trim()) throw new Error("Slider requires a label or aria-label");
+	if (range && (!thumbLabels || thumbLabels.length !== 2 || thumbLabels.some((text) => !text.trim()))) throw new Error("RangeSlider requires two non-empty thumbLabels");
+	if (names && (names.length !== length || names.some((name) => !name.trim()))) throw new Error("Slider requires one non-empty name per thumb");
+	if (marks) {
+		const seen = /* @__PURE__ */ new Set();
+		for (const mark of marks) {
+			const normalized = scale.validate([mark.value], 1)[0];
+			if (seen.has(normalized)) throw new Error("Slider mark values must be unique");
+			seen.add(normalized);
+		}
+	}
+	const { inputs, controlRef, railRef, ...slider } = useSlider({
+		scale,
+		value: selected,
+		defaultValue: initial,
+		disabled,
+		form,
+		onValueChange: change,
+		onValueCommit: commit
+	});
+	const mergedRef = useMergedRef(useRef(null), ref);
+	const invalid = Boolean(error) || ariaInvalid === true || ariaInvalid === "true";
+	const message = error && error !== true ? error : helperText;
+	const description = [describedBy, isPresent(message) && `${id}-description`].filter(Boolean).join(" ") || void 0;
+	const percentages = slider.values.map((value) => scale.toTick(value) / scale.count * 100);
+	const start = range ? percentages[0] : 0;
+	const end = percentages.at(-1);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref: mergedRef,
+		role: "group",
+		"aria-label": hasLabel ? void 0 : ariaLabel,
+		"aria-labelledby": hasLabel ? `${id}-label` : void 0,
+		"data-slot": "slider",
+		"data-range": range || void 0,
+		"data-disabled": disabled || void 0,
+		"data-invalid": invalid || void 0,
+		"data-dragging": slider.dragging || void 0,
+		className: cn("min-w-0 has-[input:disabled]:opacity-50 forced-colors:has-[input:disabled]:opacity-100", className),
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (!event.defaultPrevented && controlRef.current?.contains(event.target)) slider.onPointerDown(event);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			const index = inputs.current.indexOf(event.target);
+			if (!event.defaultPrevented && index !== -1) slider.onKeyDown(event, index);
+		},
+		onKeyUp: (event) => {
+			onKeyUp?.(event);
+			if (inputs.current.includes(event.target)) slider.onKeyUp(event);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (inputs.current.includes(event.target)) slider.onBlur();
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			const index = inputs.current.indexOf(event.target);
+			if (index !== -1) slider.onFocus(index);
+		},
+		children: [
+			(hasLabel || showValue) && /* @__PURE__ */ jsxs("div", {
+				className: "mb-0.5 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1",
+				children: [hasLabel && /* @__PURE__ */ jsx("span", {
+					id: `${id}-label`,
+					className: "min-w-0 text-sm font-medium wrap-anywhere text-fg",
+					children: label
+				}), showValue && /* @__PURE__ */ jsx("span", {
+					"data-slot": "slider-value",
+					"aria-hidden": true,
+					className: "ms-auto text-sm font-medium wrap-anywhere text-fg tabular-nums",
+					children: /* @__PURE__ */ jsx("bdi", {
+						dir: "ltr",
+						children: slider.values.map(formatValue).join(" – ")
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: controlRef,
+				"data-slot": "slider-control",
+				className: cn("group/slider-control relative h-11 touch-pan-y touch-pinch-zoom select-none", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: railRef,
+					className: "pointer-events-none absolute inset-x-5.5 top-0 h-full",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": true,
+							"data-slot": "slider-track",
+							className: "absolute inset-x-0 top-5 h-1 rounded-full border border-input-border bg-surface-muted forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": true,
+							"data-slot": "slider-range",
+							className: cn("absolute top-5 h-1 rounded-full forced-colors:forced-color-adjust-none forced-colors:bg-[Highlight]", invalid ? "bg-danger" : "bg-control-checked", disabled && "forced-colors:bg-[GrayText]"),
+							style: {
+								insetInlineStart: `${start}%`,
+								width: `${end - start}%`
+							}
+						}),
+						slider.values.map((value, i) => {
+							const index = i;
+							const [low, high] = scale.limits(slider.values, index);
+							return /* @__PURE__ */ jsxs(Fragment, { children: [range && /* @__PURE__ */ jsx("span", {
+								id: `${id}-thumb-label-${index}`,
+								className: "sr-only",
+								children: thumbLabels[index]
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "absolute top-0 size-11 -translate-x-1/2 rtl:translate-x-1/2",
+								style: {
+									insetInlineStart: `${percentages[index]}%`,
+									zIndex: slider.activeIndex === index ? 2 : 1
+								},
+								children: [/* @__PURE__ */ jsx("input", {
+									ref: (node) => {
+										inputs.current[index] = node;
+									},
+									type: "range",
+									"data-slot": "slider-input",
+									name: names?.[index],
+									form,
+									min: scale.fromTick(low),
+									max: scale.fromTick(high),
+									step,
+									value,
+									disabled,
+									"aria-label": hasLabel ? void 0 : [ariaLabel, thumbLabels?.[index]].filter(Boolean).join(" "),
+									"aria-labelledby": hasLabel ? [`${id}-label`, range && `${id}-thumb-label-${index}`].filter(Boolean).join(" ") : void 0,
+									"aria-describedby": description,
+									"aria-invalid": invalid ? true : ariaInvalid,
+									"aria-valuetext": getValueText?.(value, index) ?? formatValue(value),
+									className: "peer pointer-events-none absolute inset-0 m-0 size-full opacity-0",
+									onChange: (event) => slider.onInput(event.currentTarget.valueAsNumber, index)
+								}), /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									"data-slot": "slider-thumb",
+									"data-active": slider.dragging && slider.activeIndex === index || void 0,
+									className: cn("pointer-events-none absolute inset-s-3.25 top-3.25 size-4.5 rounded-full border bg-surface-raised", "peer-focus-visible:outline-solid peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-focus", "transition-[border-color,box-shadow] duration-100 ease-out motion-reduce:transition-none", "data-active:[box-shadow:0_0_0_4px_var(--color-input-halo)]", invalid ? "border-danger" : "border-control-checked peer-enabled:group-hover/slider-control:border-input-border-hover", "forced-colors:forced-color-adjust-none forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:shadow-none", "forced-colors:peer-focus-visible:outline-[Highlight] forced-colors:peer-disabled:border-[GrayText]")
+								})]
+							})] }, index);
+						})
+					]
+				})
+			}),
+			marks?.length ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-slot": "slider-marks",
+				className: "relative mx-5.5 min-h-6 text-xs text-fg-muted tabular-nums",
+				children: marks.map((mark) => {
+					const fraction = scale.toTick(mark.value) / scale.count;
+					return /* @__PURE__ */ jsxs("span", {
+						className: "absolute top-0 w-0",
+						style: { insetInlineStart: `${fraction * 100}%` },
+						children: [/* @__PURE__ */ jsx("span", { className: "block h-1 w-px bg-input-border forced-colors:bg-[CanvasText]" }), /* @__PURE__ */ jsx("span", {
+							className: cn("mt-0.5 inline-block whitespace-nowrap", fraction === 1 ? "-translate-x-full rtl:translate-x-full" : fraction !== 0 && "-translate-x-1/2 rtl:translate-x-1/2"),
+							children: mark.label
+						})]
+					}, mark.value);
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: "mx-5.5 flex justify-between gap-2 text-xs text-fg-muted tabular-nums",
+				children: [/* @__PURE__ */ jsx("span", { children: formatValue(min) }), /* @__PURE__ */ jsx("span", { children: formatValue(max) })]
+			}),
+			isPresent(message) && /* @__PURE__ */ jsxs("p", {
+				id: `${id}-description`,
+				className: cn("mt-2 mb-0 flex items-start gap-1 text-xs/relaxed", invalid ? "text-danger" : "text-fg-muted"),
+				children: [invalid && /* @__PURE__ */ jsx(CircleAlert, {
+					"aria-hidden": true,
+					className: "mt-0.5 size-3.5 shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: message })]
+			})
+		]
+	});
+}
+function Slider({ value, defaultValue, name, onValueChange, onValueCommit, ...props }) {
+	return /* @__PURE__ */ jsx(SliderControl, {
+		...props,
+		values: value === void 0 ? void 0 : [value],
+		defaults: defaultValue === void 0 ? void 0 : [defaultValue],
+		names: name === void 0 ? void 0 : [name],
+		change: (next, details) => onValueChange?.(next[0], details),
+		commit: (next, details) => onValueCommit?.(next[0], details)
+	});
+}
+function RangeSlider({ value, defaultValue, name, onValueChange, onValueCommit, ...props }) {
+	return /* @__PURE__ */ jsx(SliderControl, {
+		...props,
+		range: true,
+		values: value,
+		defaults: defaultValue,
+		names: name,
+		change: (next, details) => onValueChange?.([next[0], next[1]], details),
+		commit: (next, details) => onValueCommit?.([next[0], next[1]], details)
+	});
+}
+//#endregion
 //#region src/components/switch/switch.tsx
 const sizeClasses = {
 	sm: {
@@ -2432,13 +4452,240 @@ function Switch({ label, description, error, size = "md", loading = false, label
 				], "checked:focus-visible:[--switch-ring:transparent] checked:focus-visible:[--switch-halo:transparent]", "checked:focus-visible:outline-solid checked:focus-visible:outline-2 checked:focus-visible:outline-offset-2", row.invalid && "not-forced-colors:checked:focus-visible:outline-danger", "forced-colors:forced-color-adjust-none forced-colors:[box-shadow:none]", "forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]", "forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]", "forced-colors:disabled:border-[GrayText] forced-colors:disabled:checked:bg-[GrayText]", "forced-colors:focus-visible:outline-[CanvasText]", inputClassName)
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("pointer-events-none absolute inset-s-0.5 top-0.5 grid place-items-center rounded-full", "h-(--switch-thumb) w-(--switch-thumb-w) bg-control-checked-fg text-control-checked shadow-switch-thumb", "[--switch-dir:1] rtl:[--switch-dir:-1] [translate:calc(var(--switch-x)*var(--switch-dir))_0]", "[--switch-x:0px] [--switch-thumb-w:var(--switch-thumb)] peer-checked:[--switch-x:var(--switch-travel)]", "transition-[translate,width] duration-150 ease-in-out", pressable && ["peer-active:[--switch-thumb-w:calc(var(--switch-thumb)+var(--switch-stretch))]", "peer-checked:peer-active:[--switch-x:calc(var(--switch-travel)-var(--switch-stretch))]"], "peer-disabled:shadow-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none", "forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]", "forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-checked:text-[Highlight]", "forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-disabled:peer-checked:bg-[Canvas]", s.icon),
-				children: loading && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] })
+				className: cn("pointer-events-none absolute inset-s-0.5 top-0.5 grid place-items-center rounded-full", "h-(--switch-thumb) w-(--switch-thumb-w) bg-switch-handle peer-checked:bg-switch-handle-checked text-control-checked shadow-switch-thumb", "[--switch-dir:1] rtl:[--switch-dir:-1] [translate:calc(var(--switch-x)*var(--switch-dir))_0]", "[--switch-x:0px] [--switch-thumb-w:var(--switch-thumb)] peer-checked:[--switch-x:var(--switch-travel)]", "transition-[translate,width] duration-150 ease-in-out", pressable && ["peer-active:[--switch-thumb-w:calc(var(--switch-thumb)+var(--switch-stretch))]", "peer-checked:peer-active:[--switch-x:calc(var(--switch-travel)-var(--switch-stretch))]"], "peer-disabled:shadow-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none", "forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]", "forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-checked:text-[Highlight]", "forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-disabled:peer-checked:bg-[Canvas]", s.icon),
+				children: loading && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] })
 			})]
 		})
 	});
 }
 //#endregion
+//#region src/components/table/table.tsx
+const labels = {
+	search: "Search rows",
+	clearSelection: "Clear selection",
+	selectPage: "Select all rows on this page",
+	selectRow: (id) => `Select row ${id}`,
+	selectionCount: (count) => `${count} selected`,
+	scrollRegion: "Table",
+	pagination: "Pagination",
+	previousPage: "Previous page",
+	nextPage: "Next page",
+	page: (page, count) => `${page} / ${count}`,
+	range: (first, last, total) => total === 0 ? "0 rows" : `${first}–${last} of ${total}`,
+	emptyState: "No rows yet",
+	noResults: "No matching rows"
+};
+const alignClasses = {
+	start: "text-start",
+	center: "text-center",
+	end: "text-end"
+};
+const sortIcons = {
+	asc: ArrowUp,
+	desc: ArrowDown
+};
+function Table({ data, columns, getRowId, title, emptyState, noResults, filtered = false, search, sorting, pagination, selection, className, tableClassName, labels: labelOverrides, ...props }) {
+	const titleId = useId();
+	const scrollRef = useRef(null);
+	const searchRef = useRef(null);
+	const emptyRef = useRef(null);
+	const text = {
+		...labels,
+		...labelOverrides
+	};
+	const tableName = props["aria-labelledby"] ?? (title != null && !props["aria-label"] ? titleId : void 0);
+	const showEmpty = data.length === 0 && !filtered && !search?.value.trim() && (!pagination || pagination.rowCount === 0);
+	const showSearch = !showEmpty && search != null;
+	const hasControls = showSearch || !!selection?.ids.size;
+	const hasToolbar = title != null || hasControls;
+	const rows = data.map((row) => ({
+		row,
+		id: getRowId(row),
+		canSelect: selection?.canSelectRow?.(row) ?? true
+	}));
+	const selectableIds = selection ? rows.filter((row) => row.canSelect).map((row) => row.id) : [];
+	const selectedOnPage = selectableIds.filter((id) => selection?.ids.has(id)).length;
+	const allOnPageSelected = selectableIds.length > 0 && selectedOnPage === selectableIds.length;
+	const updateSelection = (ids, checked) => {
+		if (!selection) return;
+		const next = new Set(selection.ids);
+		for (const id of ids) if (checked) next.add(id);
+		else next.delete(id);
+		selection.onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-root",
+		className: cn("w-full min-w-0 bg-surface text-fg", className),
+		children: [hasToolbar && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "table-toolbar",
+			className: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3",
+			children: [title != null && /* @__PURE__ */ jsx("span", {
+				id: titleId,
+				className: "text-sm font-semibold",
+				children: title
+			}), hasControls && /* @__PURE__ */ jsxs("div", {
+				className: "ms-auto flex min-w-0 flex-wrap items-center justify-end gap-x-3 gap-y-2",
+				children: [
+					selection && /* @__PURE__ */ jsx("output", {
+						className: "text-xs text-fg-muted",
+						children: selection.ids.size > 0 && text.selectionCount(selection.ids.size)
+					}),
+					!!selection?.ids.size && /* @__PURE__ */ jsx(Button, {
+						intent: "ghost",
+						size: "sm",
+						ripple: false,
+						onClick: () => {
+							selection.onChange(/* @__PURE__ */ new Set());
+							(searchRef.current ?? scrollRef.current ?? emptyRef.current)?.focus();
+						},
+						children: text.clearSelection
+					}),
+					showSearch && /* @__PURE__ */ jsx(SearchInput, {
+						ref: searchRef,
+						"aria-label": text.search,
+						placeholder: `${text.search}…`,
+						size: "sm",
+						className: "w-48 max-w-full",
+						value: search.value,
+						onChange: (event) => search.onChange(event.currentTarget.value)
+					})
+				]
+			})]
+		}), showEmpty ? /* @__PURE__ */ jsx("div", {
+			ref: emptyRef,
+			"data-slot": "table-empty",
+			tabIndex: -1,
+			className: "grid min-h-48 place-items-center px-4 py-8 text-center text-sm text-fg-muted outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+			children: emptyState === void 0 ? text.emptyState : emptyState
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("section", {
+			ref: scrollRef,
+			"data-slot": "table-scroll",
+			"aria-labelledby": tableName,
+			"aria-label": tableName ? void 0 : props["aria-label"] ?? text.scrollRegion,
+			tabIndex: 0,
+			className: "relative w-full overflow-x-auto outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+			children: /* @__PURE__ */ jsxs("table", {
+				...props,
+				"aria-labelledby": tableName,
+				"data-slot": "table",
+				className: cn("w-full border-separate border-spacing-0 text-sm", tableClassName),
+				children: [/* @__PURE__ */ jsx("thead", {
+					"data-slot": "table-header",
+					children: /* @__PURE__ */ jsxs("tr", { children: [selection && /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "w-12 border-b border-border px-3",
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							"aria-label": text.selectPage,
+							checked: allOnPageSelected,
+							indeterminate: selectedOnPage > 0 && !allOnPageSelected,
+							disabled: selectableIds.length === 0,
+							onChange: (event) => updateSelection(selectableIds, event.currentTarget.checked),
+							className: "mx-auto justify-center"
+						})
+					}), columns.map((column) => {
+						const direction = sorting?.value?.id === column.id ? sorting.value.direction : void 0;
+						const SortIcon = direction ? sortIcons[direction] : ArrowUpDown;
+						const align = column.align ?? (column.numeric ? "end" : "start");
+						return /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							"aria-sort": direction ? direction === "asc" ? "ascending" : "descending" : void 0,
+							className: cn("h-10 border-b border-border px-4 text-xs font-medium whitespace-nowrap text-fg-muted", alignClasses[align], column.headerClassName),
+							children: sorting && column.sortable ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: cn("inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-sm hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:min-h-11", direction && "text-fg"),
+								onClick: () => sorting.onChange(direction === "desc" ? null : {
+									id: column.id,
+									direction: direction === "asc" ? "desc" : "asc"
+								}),
+								children: [column.header, /* @__PURE__ */ jsx(SortIcon, {
+									"aria-hidden": true,
+									className: "size-3.5 shrink-0"
+								})]
+							}) : column.header
+						}, column.id);
+					})] })
+				}), /* @__PURE__ */ jsxs("tbody", {
+					"data-slot": "table-body",
+					className: "[&>tr:not(:last-child)>*]:border-b [&>tr>*]:border-border",
+					children: [rows.map(({ row, id, canSelect }) => {
+						const selected = selection?.ids.has(id) ?? false;
+						return /* @__PURE__ */ jsxs("tr", {
+							"data-slot": "table-row",
+							"data-selected": selected || void 0,
+							className: "hover:bg-surface-muted data-selected:bg-surface-muted",
+							children: [selection && /* @__PURE__ */ jsx("td", {
+								className: "w-12 px-3",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									"aria-label": text.selectRow(id),
+									checked: selected,
+									disabled: !canSelect,
+									onChange: (event) => updateSelection([id], event.currentTarget.checked),
+									className: "mx-auto justify-center"
+								})
+							}), columns.map((column) => {
+								const Cell = column.rowHeader ? "th" : "td";
+								const align = column.align ?? (column.numeric ? "end" : "start");
+								return /* @__PURE__ */ jsx(Cell, {
+									scope: column.rowHeader ? "row" : void 0,
+									className: cn("h-13 px-4 py-2 align-middle", alignClasses[align], column.numeric && "tabular-nums", column.rowHeader && "font-medium", column.className),
+									children: column.cell(row)
+								}, column.id);
+							})]
+						}, id);
+					}), rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						colSpan: Math.max(1, columns.length + Number(Boolean(selection))),
+						children: /* @__PURE__ */ jsx("div", {
+							"data-slot": "table-no-results",
+							className: "sticky inset-s-0 w-max max-w-[min(100%,18rem)] px-4 py-12 text-sm text-fg-muted",
+							children: noResults === void 0 ? /* @__PURE__ */ jsx("output", { children: text.noResults }) : noResults
+						})
+					}) })]
+				})]
+			})
+		}), pagination && /* @__PURE__ */ jsx(TablePagination, {
+			...pagination,
+			visibleCount: rows.length,
+			text
+		})] })]
+	});
+}
+function TablePagination({ pageIndex, pageSize, rowCount, visibleCount, onPageChange, text }) {
+	const count = Math.ceil(rowCount / pageSize);
+	const first = visibleCount ? pageIndex * pageSize + 1 : 0;
+	const last = first ? first + visibleCount - 1 : 0;
+	const canGoBack = pageIndex > 0;
+	const canGoForward = pageIndex + 1 < count;
+	return /* @__PURE__ */ jsxs("nav", {
+		"data-slot": "table-pagination",
+		"aria-label": text.pagination,
+		className: "flex min-h-12 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-border px-4 py-1 text-xs text-fg-muted tabular-nums",
+		children: [/* @__PURE__ */ jsx("output", { children: text.range(first, last, rowCount) }), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(ChevronLeft, { className: "rtl:rotate-180" }),
+					"aria-label": text.previousPage,
+					intent: "ghost",
+					size: "sm",
+					ripple: false,
+					disabled: !canGoBack,
+					onClick: () => onPageChange(pageIndex - 1)
+				}),
+				/* @__PURE__ */ jsx("span", { children: count === 0 ? "—" : text.page(pageIndex + 1, count) }),
+				/* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180" }),
+					"aria-label": text.nextPage,
+					intent: "ghost",
+					size: "sm",
+					ripple: false,
+					disabled: !canGoForward,
+					onClick: () => onPageChange(pageIndex + 1)
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region src/components/tabs/tab-nav.tsx
 const TabNavContext = createContext(null);
 /**
@@ -2645,6 +4892,155 @@ function TabPanel({ value, keepMounted = false, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/textarea/use-auto-resize.ts
+/** Measure the native control so wrapping, fonts and IME text keep their browser behavior. */
+function useAutoResize(ref, enabled, minRows, maxRows) {
+	const resize = useCallback(() => {
+		const node = ref.current;
+		if (!enabled || !node || node.getClientRects().length === 0) return;
+		const style = getComputedStyle(node);
+		const lineHeight = Number.parseFloat(style.lineHeight);
+		if (!Number.isFinite(lineHeight)) return;
+		const padding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+		const border = Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
+		const min = minRows * lineHeight + padding;
+		const max = maxRows == null ? Infinity : maxRows * lineHeight + padding;
+		const scrollTop = node.scrollTop;
+		node.style.overflowY = "hidden";
+		node.style.height = "0px";
+		const contentHeight = node.scrollHeight;
+		const height = Math.max(min, Math.min(max, contentHeight));
+		node.style.height = `${height + (style.boxSizing === "border-box" ? border : -padding)}px`;
+		node.style.overflowY = contentHeight > max ? "auto" : "hidden";
+		node.scrollTop = scrollTop;
+	}, [
+		enabled,
+		ref,
+		minRows,
+		maxRows
+	]);
+	useLayoutEffect(resize);
+	useLayoutEffect(() => {
+		if (!enabled) return;
+		const node = ref.current;
+		if (!node) return;
+		let width = node.getBoundingClientRect().width;
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
+			const nextWidth = node.getBoundingClientRect().width;
+			if (nextWidth !== width) {
+				width = nextWidth;
+				resize();
+			}
+		});
+		observer?.observe(node);
+		window.addEventListener("resize", resize);
+		document.fonts?.addEventListener("loadingdone", resize);
+		let active = true;
+		document.fonts?.ready.then(() => {
+			if (active) resize();
+		});
+		return () => {
+			active = false;
+			observer?.disconnect();
+			window.removeEventListener("resize", resize);
+			document.fonts?.removeEventListener("loadingdone", resize);
+			node.style.removeProperty("height");
+			node.style.removeProperty("overflow-y");
+		};
+	}, [
+		enabled,
+		ref,
+		resize
+	]);
+	return resize;
+}
+//#endregion
+//#region src/components/textarea/textarea.tsx
+const sizes = {
+	sm: "px-3 py-2 text-sm/5",
+	md: "px-3 py-2.5 text-sm/5",
+	lg: "px-4 py-3 text-base/6"
+};
+function positiveRows(value, name) {
+	if (!Number.isInteger(value) || value < 1) throw new RangeError(`Textarea ${name} must be a positive integer.`);
+	return value;
+}
+const textLength = (value) => String(value ?? "").replace(/\r\n?/g, "\n").length;
+function Textarea({ label, floating = false, helperText, error, size = "md", autoResize = false, rows = 3, minRows = 3, maxRows, resize = "vertical", showCount = false, mono = false, className, textareaClassName, ref, id, required, disabled, readOnly, placeholder, value, defaultValue, maxLength, onChange, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const nativeRows = positiveRows(autoResize ? minRows : rows, autoResize ? "minRows" : "rows");
+	if (autoResize && maxRows != null && positiveRows(maxRows, "maxRows") < nativeRows) throw new RangeError("Textarea maxRows must be greater than or equal to minRows.");
+	const controlRef = useRef(null);
+	const mergedRef = useMergedRef(controlRef, ref);
+	const [uncontrolledLength, setUncontrolledLength] = useState(() => textLength(defaultValue));
+	const length = value == null ? uncontrolledLength : textLength(value);
+	const overLimit = maxLength != null && maxLength >= 0 && length > maxLength;
+	const countId = `${useId()}-count`;
+	const resizeToContent = useAutoResize(controlRef, autoResize, nativeRows, maxRows);
+	useLayoutEffect(() => {
+		const node = controlRef.current;
+		const form = node?.form;
+		if (!form || !node) return;
+		let resetTimer;
+		const reset = (event) => {
+			clearTimeout(resetTimer);
+			resetTimer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				setUncontrolledLength(node.value.length);
+				resizeToContent();
+			}, 0);
+		};
+		form.addEventListener("reset", reset);
+		return () => {
+			clearTimeout(resetTimer);
+			form.removeEventListener("reset", reset);
+		};
+	}, [props.form, resizeToContent]);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		multiline: true,
+		label,
+		floating,
+		helperText,
+		error: error || overLimit,
+		size,
+		id,
+		required,
+		disabled,
+		readOnly,
+		"aria-describedby": [describedBy, showCount ? countId : null].filter(Boolean).join(" ") || void 0,
+		className,
+		controlRef,
+		footer: showCount ? /* @__PURE__ */ jsxs("span", {
+			id: countId,
+			className: cn("ms-auto shrink-0 text-xs/snug tabular-nums", overLimit ? "text-danger" : "text-fg-muted"),
+			children: [length, maxLength != null && maxLength >= 0 ? ` / ${maxLength}` : ""]
+		}) : void 0,
+		children: (field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [field.floatingLabel("max-w-[calc(100%-1rem)]"), /* @__PURE__ */ jsx("textarea", {
+			...props,
+			ref: mergedRef,
+			id: field.id,
+			rows: nativeRows,
+			value,
+			defaultValue,
+			maxLength,
+			required,
+			disabled,
+			readOnly,
+			placeholder: field.floating ? placeholder || " " : placeholder,
+			"aria-invalid": field.invalid ? true : ariaInvalid,
+			"aria-describedby": field.describedBy,
+			spellCheck: mono ? false : props.spellCheck,
+			autoCapitalize: mono ? "off" : props.autoCapitalize,
+			autoCorrect: mono ? "off" : props.autoCorrect,
+			onChange: (event) => {
+				setUncontrolledLength(event.currentTarget.value.length);
+				resizeToContent();
+				onChange?.(event);
+			},
+			className: cn("block w-full min-w-0 flex-1 rounded-[inherit] border-0 bg-transparent text-fg outline-none", "placeholder:text-input-placeholder disabled:cursor-not-allowed pointer-coarse:text-base", sizes[size], autoResize || resize === "none" ? "resize-none" : "resize-y", mono && "font-mono", field.floating && "placeholder:opacity-0 focus:placeholder:opacity-100", textareaClassName)
+		})] })
+	});
+}
+//#endregion
 //#region src/components/theme-switcher/theme-switcher.tsx
 const systemThemeQuery = "(prefers-color-scheme: dark)";
 function subscribeSystemTheme(onChange) {
@@ -3113,7 +5509,7 @@ function Viewport({ id, position = "bottom-right", visibleToasts = 3, host }) {
 	};
 	const [y, x] = position.split("-");
 	const directions = x === "center" ? [y] : [y, x];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("section", {
 			ref: viewportRef,
 			popover: "manual",
@@ -3450,4 +5846,4 @@ function ToastCard({ record, layout, total, expanded, paused, frontHeight, ownHe
 	});
 }
 //#endregion
-export { Badge, Button, Card, CardContent, CardHeader, Checkbox, CheckboxGroup, CopyInput, Dialog, DialogBody, DialogFooter, DialogHeader, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, Input, Meter, PasswordInput, SearchInput, Select, Sidebar, SidebarBadge, SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarIcon, SidebarItem, SidebarProvider, SidebarTrigger, Switch, Tab, TabList, TabNav, TabNavLink, TabPanel, Tabs, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Badge, Button, Card, CardContent, CardHeader, Checkbox, CheckboxGroup, Combobox, CopyInput, Dialog, DialogBody, DialogFooter, DialogHeader, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, Meter, PasswordInput, Radio, RadioGroup, RangeSlider, SearchInput, Select, Sidebar, SidebarBadge, SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarIcon, SidebarItem, SidebarProvider, SidebarTrigger, Slider, Switch, Tab, TabList, TabNav, TabNavLink, TabPanel, Table, Tabs, Textarea, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };