@juwel-development/design-system 3.6.0 → 3.7.0

package/dist/design-system.js

@@ -275,7 +275,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	"[&[data-notes=content]>table]:max-md:block",
 	"[&[data-notes=content]_thead]:max-md:block [&[data-notes=content]_tbody]:max-md:block [&[data-notes=content]_tfoot]:max-md:block",
 	"[&[data-notes=content]_tr]:max-md:block [&[data-notes=content]_td]:max-md:block [&[data-notes=content]_th]:max-md:block"
-].join(" ")), O = h("border-t border-solid border-border"), k = h("px-4 py-2 text-small first:pl-0 last:pr-0", {
+].join(" ")), ge = h("border-t border-solid border-border"), O = h("px-4 py-2 text-small first:pl-0 last:pr-0", {
 	variants: {
 		variant: {
 			value: "font-primary text-foreground tabular-nums",
@@ -291,14 +291,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		variant: "value",
 		align: "left"
 	}
-}), A = h("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
+}), k = h("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
 	variants: { align: {
 		left: "text-left",
 		right: "text-right",
 		center: "text-center"
 	} },
 	defaultVariants: { align: "left" }
-}), j = {
+}), A = {
 	Root: ({ caption: n, notes: r, children: i, testId: a }) => {
 		let o = /* @__PURE__ */ t("table", { children: [/* @__PURE__ */ e("caption", { children: n }), i] });
 		return r === void 0 ? /* @__PURE__ */ e("section", {
@@ -318,24 +318,24 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	Body: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
 	Footer: ({ children: t }) => /* @__PURE__ */ e("tfoot", { children: t }),
 	Row: ({ children: t, testId: n }) => /* @__PURE__ */ e("tr", {
-		className: O(),
+		className: ge(),
 		"data-testid": n,
 		children: t
 	}),
 	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
 		scope: t,
-		className: A({ align: n }),
+		className: k({ align: n }),
 		children: r
 	}),
 	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
-		className: k({
+		className: O({
 			variant: t,
 			align: n
 		}),
 		"data-variant": t ?? "value",
 		children: r
 	})
-}, M = h("font-secondary text-label tracking-label font-medium", {
+}, j = h("font-secondary text-label tracking-label font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -345,11 +345,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "muted" }
-}), N = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: M({ color: n }),
+}), M = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: j({ color: n }),
 	"data-testid": r,
 	children: t
-}), P = h("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
+}), N = h("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -359,11 +359,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), F = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
-	className: P({ color: n }),
+}), P = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
+	className: N({ color: n }),
 	"data-testid": r,
 	children: t
-}), I = h("font-primary text-title leading-title tracking-optical", {
+}), F = h("font-primary text-title leading-title tracking-optical", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -373,11 +373,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), L = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
-	className: I({ color: n }),
+}), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
+	className: F({ color: n }),
 	"data-testid": r,
 	children: t
-}), R = h("font-primary text-subtitle leading-subtitle", {
+}), L = h("font-primary text-subtitle leading-subtitle", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -387,11 +387,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), ge = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
-	className: R({ color: n }),
+}), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
+	className: L({ color: n }),
 	"data-testid": r,
 	children: t
-}), _e = h("font-primary text-body leading-body font-bold", {
+}), ve = h("font-primary text-body leading-body font-bold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -401,11 +401,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), ve = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
-	className: _e({ color: n }),
+}), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
+	className: ve({ color: n }),
 	"data-testid": r,
 	children: t
-}), ye = h("font-primary text-body leading-body font-semibold", {
+}), be = h("font-primary text-body leading-body font-semibold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -415,11 +415,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), be = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
-	className: ye({ color: n }),
+}), xe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
+	className: be({ color: n }),
 	"data-testid": r,
 	children: t
-}), xe = h("font-primary text-body leading-body font-medium", {
+}), Se = h("font-primary text-body leading-body font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -429,11 +429,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Se = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
-	className: xe({ color: n }),
+}), Ce = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
+	className: Se({ color: n }),
 	"data-testid": r,
 	children: t
-}), Ce = h("font-secondary text-small", {
+}), we = h("font-secondary text-small", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -443,11 +443,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), we = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: Ce({ color: n }),
+}), Te = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: we({ color: n }),
 	"data-testid": r,
 	children: t
-}), Te = h("font-primary text-body leading-body", {
+}), Ee = h("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -457,11 +457,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Ee = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: Te({ color: n }),
+}), De = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: Ee({ color: n }),
 	"data-testid": r,
 	children: t
-}), De = h("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), Oe = h("font-primary text-lede leading-lede text-foreground"), ke = h("font-primary text-body leading-body", {
+}), Oe = h("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), ke = h("font-primary text-lede leading-lede text-foreground"), Ae = h("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -471,47 +471,134 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Ae = h("font-primary text-small text-muted"), je = {
+}), je = h("font-primary text-small text-muted"), Me = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: De(),
+		className: Oe(),
 		"data-testid": n,
 		children: t
 	}),
 	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: Oe(),
+		className: ke(),
 		children: t
 	}),
 	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
-		className: ke({ color: t }),
+		className: Ae({ color: t }),
 		children: n
 	}),
 	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: Ae(),
+		className: je(),
 		children: t
 	})
-}, Me = h("font-primary text-body transition-colors duration-[var(--motion-duration-color)] rounded-[var(--radius-control)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+}, Ne = h("font-primary text-body transition-colors duration-[var(--motion-duration-color)] rounded-[var(--radius-control)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
 	variants: { variant: {
 		primary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-primary text-primary-foreground hover:bg-primary-hover",
 		secondary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-secondary text-secondary-foreground hover:bg-secondary-hover",
 		ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] hover:underline-offset-[var(--underline-offset)]"
 	} },
 	defaultVariants: { variant: "primary" }
-}), Ne = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
+}), Pe = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
 	type: s,
 	"data-testid": r,
-	className: Me({ variant: i }),
+	className: Ne({ variant: i }),
 	onClick: () => a?.next(),
 	disabled: n,
 	"aria-label": o,
 	children: t
-}), Pe = h("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted", {
+}), Fe = class extends Error {
+	constructor(e) {
+		super(`Choices.${e} must be composed inside Choices.Root`), this.name = "ChoicesCompositionError";
+	}
+}, Ie = h("flex flex-col gap-[var(--space-stack)]"), Le = h([
+	"group/choice flex w-full flex-row items-start gap-3 text-left",
+	"rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent aria-checked:border-foreground",
+	"px-3 py-2",
+	"cursor-pointer disabled:cursor-not-allowed",
+	"transition-colors duration-[var(--motion-duration-color)]",
+	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
+].join(" ")), R = r(void 0), Re = (e) => {
+	let t = o(R);
+	if (t === void 0) throw new Fe(e);
+	return t;
+}, ze = (e, t) => {
+	let n = e.closest("[role=\"radiogroup\"]");
+	if (n === null) return;
+	let r = Array.from(n.querySelectorAll(":scope > [role=\"radio\"]"));
+	return r[(r.indexOf(e) + t + r.length) % r.length];
+}, Be = {
+	ArrowDown: 1,
+	ArrowRight: 1,
+	ArrowUp: -1,
+	ArrowLeft: -1
+}, Ve = {
+	Root: ({ selected: t, onSelect$: n, label: r, inert: i, children: a, testId: o }) => /* @__PURE__ */ e(R.Provider, {
+		value: {
+			selected: t,
+			onSelect$: n,
+			inert: i === !0
+		},
+		children: /* @__PURE__ */ e("div", {
+			role: "radiogroup",
+			"aria-label": r,
+			"aria-disabled": i === !0 ? "true" : void 0,
+			className: Ie(),
+			"data-testid": o,
+			children: a
+		})
+	}),
+	Choice: ({ value: n, children: r, description: i, testId: a }) => {
+		let { selected: o, onSelect$: s, inert: l } = Re("Choice"), u = o === n, d = c(), f = `${d}-name`, p = `${d}-description`;
+		return /* @__PURE__ */ t("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": u,
+			"aria-labelledby": f,
+			"aria-describedby": p,
+			tabIndex: u && !l ? 0 : -1,
+			disabled: l,
+			"data-value": n,
+			"data-testid": a,
+			className: Le(),
+			onClick: () => {
+				u || s.next(n);
+			},
+			onKeyDown: (e) => {
+				let t = Be[e.key];
+				if (t === void 0 || l) return;
+				e.preventDefault();
+				let n = ze(e.currentTarget, t);
+				if (n === void 0) return;
+				n.focus();
+				let r = n.dataset.value;
+				r !== void 0 && r !== o && s.next(r);
+			},
+			children: [/* @__PURE__ */ e("span", {
+				className: "mt-[0.3rem] flex size-[var(--choice-marker-size)] shrink-0 items-center justify-center rounded-[var(--radius-control)] border border-solid border-control-border",
+				children: u && /* @__PURE__ */ e("span", {
+					"data-choice-marker-dot": !0,
+					className: "size-[var(--choice-marker-dot-size)] rounded-[var(--radius-control)] bg-foreground"
+				})
+			}), /* @__PURE__ */ t("span", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ e("span", {
+					id: f,
+					className: "font-secondary font-medium text-body text-foreground group-disabled/choice:text-muted",
+					children: r
+				}), /* @__PURE__ */ e("span", {
+					id: p,
+					className: "font-secondary text-muted text-small",
+					children: i
+				})]
+			})]
+		});
+	}
+}, He = h("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted", {
 	variants: { variant: {
 		text: "",
 		email: "",
 		url: ""
 	} },
 	defaultVariants: { variant: "text" }
-}), Fe = ({ label: n, name: r, variant: i, required: a, optionalLabel: o, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
+}), Ue = ({ label: n, name: r, variant: i, required: a, optionalLabel: o, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
 	let b = c(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, u ? C : void 0].filter(Boolean).join(" ") || void 0, T = l(null);
 	return s(() => {
 		let e = v?.subscribe(() => {
@@ -531,7 +618,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				id: x,
 				name: r,
 				type: i ?? "text",
-				className: Pe({ variant: i }),
+				className: He({ variant: i }),
 				required: a,
 				disabled: d,
 				defaultValue: f,
@@ -558,7 +645,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			})
 		]
 	});
-}, Ie = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+}, We = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
 	variants: { treatment: {
 		prose: "text-link underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] hover:decoration-[length:var(--underline-thickness-hover)]",
 		quiet: "font-secondary text-muted no-underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] transition-colors duration-[var(--motion-duration-color)] hover:text-foreground hover:underline",
@@ -566,9 +653,9 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		graphic: "text-inherit no-underline"
 	} },
 	defaultVariants: { treatment: "prose" }
-}), Le = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
+}), Ge = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
 	href: t,
-	className: Ie({ treatment: r }),
+	className: We({ treatment: r }),
 	target: i ? "_blank" : void 0,
 	rel: i ? "noopener noreferrer" : void 0,
 	"aria-current": a ? "page" : void 0,
@@ -578,7 +665,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	constructor(e) {
 		super(`Slider configuration: ${e}`), this.name = "SliderConfigurationError";
 	}
-}, Re = h([
+}, Ke = h([
 	"block h-[var(--slider-thumb-size)] w-full cursor-pointer appearance-none bg-transparent",
 	"disabled:cursor-not-allowed",
 	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]",
@@ -589,19 +676,19 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	"[&::-moz-range-track]:h-[var(--slider-track-thickness)] [&::-moz-range-track]:rounded-[var(--radius-control)] [&::-moz-range-track]:bg-control-border",
 	"[&::-moz-range-thumb]:size-[var(--slider-thumb-size)] [&::-moz-range-thumb]:rounded-[var(--radius-control)] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-foreground",
 	"[&:disabled::-moz-range-track]:bg-disabled [&:disabled::-moz-range-thumb]:bg-disabled"
-].join(" ")), ze = (e) => {
+].join(" ")), qe = (e) => {
 	for (let [t, n] of Object.entries(e)) if (!Number.isFinite(n)) throw new z(`\`${t}\` must be a finite number, got ${n}`);
 	if (e.min >= e.max) throw new z(`\`min\` (${e.min}) must be below \`max\` (${e.max})`);
 	if (e.step <= 0) throw new z(`\`step\` (${e.step}) must be positive`);
 	if (e.value < e.min || e.value > e.max) throw new z(`\`value\` (${e.value}) must lie within [${e.min}, ${e.max}]`);
-}, Be = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (ze({
+}, Je = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (qe({
 	min: t,
 	max: n,
 	step: r,
 	value: i
 }), /* @__PURE__ */ e("input", {
 	type: "range",
-	className: Re(),
+	className: Ke(),
 	min: t,
 	max: n,
 	step: r,
@@ -611,37 +698,37 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	"aria-valuetext": s,
 	"data-testid": l,
 	onChange: (e) => a.next(e.currentTarget.valueAsNumber)
-})), Ve = class extends Error {
+})), Ye = class extends Error {
 	constructor(e) {
 		super(`Tabs.${e} must be composed inside Tabs.Root`), this.name = "TabsCompositionError";
 	}
-}, He = h([
+}, Xe = h([
 	"flex flex-row overflow-x-auto",
 	"p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
 	"m-[calc(-1*(var(--focus-ring-width)+var(--focus-ring-offset)))]",
 	"scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]"
-].join(" ")), Ue = h([
+].join(" ")), Ze = h([
 	"font-secondary text-label tracking-label",
 	"text-muted hover:text-foreground aria-selected:text-foreground",
 	"border-b-[length:var(--tab-marker-thickness)] border-solid border-transparent aria-selected:border-foreground",
 	"shrink-0 cursor-pointer select-none text-nowrap px-[var(--tab-inset-inline)] py-[var(--tab-inset-block)]",
 	"transition-colors duration-[var(--motion-duration-color)]",
 	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
-].join(" ")), We = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), B = r(void 0), V = (e) => {
+].join(" ")), Qe = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), B = r(void 0), V = (e) => {
 	let t = o(B);
-	if (t === void 0) throw new Ve(e);
+	if (t === void 0) throw new Ye(e);
 	return t;
-}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), Ge = (e) => {
+}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), $e = (e) => {
 	e.currentTarget.scrollIntoView({
 		block: "nearest",
 		inline: "nearest"
 	});
-}, U = (e, t) => `${e}tab-${H(t)}`, W = (e, t) => `${e}panel-${H(t)}`, Ke = (e, t) => {
+}, U = (e, t) => `${e}tab-${H(t)}`, W = (e, t) => `${e}panel-${H(t)}`, et = (e, t) => {
 	let n = e.closest("[role=\"tablist\"]");
 	if (n === null) return;
 	let r = Array.from(n.querySelectorAll(":scope > [role=\"tab\"]"));
 	return r[(r.indexOf(e) + t + r.length) % r.length];
-}, qe = {
+}, tt = {
 	Root: ({ active: t, onSelect$: n, label: r, children: i, testId: a }) => {
 		let o = c();
 		return /* @__PURE__ */ e(B.Provider, {
@@ -662,7 +749,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		return /* @__PURE__ */ e("div", {
 			role: "tablist",
 			"aria-label": r,
-			className: He(),
+			className: Xe(),
 			"data-testid": n,
 			children: t
 		});
@@ -678,18 +765,18 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			tabIndex: s ? 0 : -1,
 			"data-value": t,
 			"data-testid": r,
-			className: Ue(),
+			className: Ze(),
 			onClick: () => a.next(t),
 			onKeyDown: (e) => {
 				if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 				e.preventDefault();
-				let t = Ke(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
+				let t = et(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
 				if (t === void 0) return;
 				t.focus();
 				let n = t.dataset.value;
 				n !== void 0 && a.next(n);
 			},
-			onFocus: Ge,
+			onFocus: $e,
 			children: n
 		});
 	},
@@ -701,12 +788,12 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			"aria-labelledby": U(a, t),
 			hidden: !o,
 			tabIndex: o ? 0 : void 0,
-			className: We(),
+			className: Qe(),
 			"data-testid": r,
 			children: o ? n : void 0
 		});
 	}
-}, Je = h("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted"), Ye = ({ label: n, name: r, required: i, optionalLabel: a, invalid: o, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
+}, nt = h("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted"), rt = ({ label: n, name: r, required: i, optionalLabel: a, invalid: o, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
 	let y = c(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, o ? S : void 0].filter(Boolean).join(" ") || void 0, w = l(null);
 	return s(() => {
 		let e = _?.subscribe(() => {
@@ -725,7 +812,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				ref: w,
 				id: b,
 				name: r,
-				className: Je(),
+				className: nt(),
 				required: i,
 				disabled: u,
 				defaultValue: d,
@@ -752,29 +839,29 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			})
 		]
 	});
-}, Xe = h([
+}, it = h([
 	"flex flex-col items-center",
 	"min-h-[var(--cover-height)]",
 	"px-[var(--gutter)] py-[var(--space-region)]"
-].join(" ")), Ze = "my-auto max-w-full", Qe = ({ children: n, foot: r, testId: i }) => {
+].join(" ")), at = "my-auto max-w-full", ot = ({ children: n, foot: r, testId: i }) => {
 	let a = r != null && typeof r != "boolean";
 	return /* @__PURE__ */ t("div", {
-		className: Xe(),
+		className: it(),
 		"data-testid": i,
 		children: [/* @__PURE__ */ e("div", {
-			className: Ze,
+			className: at,
 			children: n
 		}), a && /* @__PURE__ */ e("div", { children: r })]
 	});
-}, $e = class extends Error {
+}, st = class extends Error {
 	constructor(e) {
 		super(`Dialog.${e} must be composed inside Dialog.Root`), this.name = "DialogCompositionError";
 	}
-}, et = class extends Error {
+}, ct = class extends Error {
 	constructor() {
 		super("A Dialog takes exactly one accessible naming source: a visible Dialog.Title or ariaLabel on Dialog.Root, never both"), this.name = "DialogNamingError";
 	}
-}, tt = h([
+}, lt = h([
 	"open:flex open:flex-col m-auto p-0 overflow-hidden",
 	"bg-surface text-foreground",
 	"rounded-[var(--radius-dialog)] shadow-[var(--elevation-floating)]",
@@ -785,17 +872,17 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		content: ["w-[32rem] max-w-[calc(100vw-2*var(--gutter))]", "max-h-[calc(100dvh-2*var(--space-region))]"].join(" ")
 	} },
 	defaultVariants: { extent: "screen" }
-}), nt = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), rt = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[[data-dialog-member=title]+&]:mt-[var(--space-stack)] [[data-dialog-member=title]+&]:pt-0"].join(" ")), it = h([
+}), ut = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), dt = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[[data-dialog-member=title]+&]:mt-[var(--space-stack)] [[data-dialog-member=title]+&]:pt-0"].join(" ")), ft = h([
 	"grow shrink min-h-0 overflow-y-auto",
 	"px-[var(--space-region)] py-[var(--space-region)]",
 	"[&:not(:first-child)]:border-t [&:not(:first-child)]:border-border"
-].join(" ")), at = h([
+].join(" ")), pt = h([
 	"flex flex-row flex-wrap items-center justify-end gap-[var(--space-stack)] shrink-0",
 	"px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]",
 	"[[data-dialog-member=content]+&]:border-t [[data-dialog-member=content]+&]:border-border"
 ].join(" ")), G = r(void 0), K = (e) => {
 	let t = o(G);
-	if (t === void 0) throw new $e(e);
+	if (t === void 0) throw new st(e);
 	return t;
 }, q = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", J = (e, { presented: t, opener: n }) => {
 	if (e === void 0 || e.open) return;
@@ -803,7 +890,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	n.current = r instanceof HTMLElement && r !== document.body ? r : void 0, e.showModal(), t.current = !0, e.querySelector(q)?.focus();
 }, Y = (e, { presented: t }) => {
 	t.current = !1, e?.open && e.close();
-}, ot = {
+}, mt = {
 	Root: ({ children: t, onDismiss$: n, showDialog$: r, extent: i, ariaLabel: o, testId: d }) => {
 		let f = c(), p = l(void 0), m = l(!1), h = l(void 0), [g] = u(() => ({
 			presented: m,
@@ -839,7 +926,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				ref: (e) => {
 					p.current = e ?? void 0, e?.setAttribute("headingreset", "");
 				},
-				className: tt({ extent: i }),
+				className: lt({ extent: i }),
 				"aria-label": o,
 				"aria-labelledby": o === void 0 && _.title ? b.titleId : void 0,
 				"aria-describedby": _.description ? b.descriptionId : void 0,
@@ -864,10 +951,10 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	},
 	Title: ({ children: t, testId: n }) => {
 		let { titleId: r, isLabelled: i, registerNamePart: a } = K("Title");
-		if (s(() => a("title"), [a]), i) throw new et();
+		if (s(() => a("title"), [a]), i) throw new ct();
 		return /* @__PURE__ */ e("div", {
 			"data-dialog-member": "title",
-			className: nt(),
+			className: ut(),
 			"data-testid": n,
 			children: /* @__PURE__ */ e("h1", {
 				id: r,
@@ -880,7 +967,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		let { descriptionId: r, registerNamePart: i } = K("Description");
 		return s(() => i("description"), [i]), /* @__PURE__ */ e("div", {
 			"data-dialog-member": "description",
-			className: rt(),
+			className: dt(),
 			"data-testid": n,
 			children: /* @__PURE__ */ e("p", {
 				id: r,
@@ -891,27 +978,27 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	},
 	Content: ({ children: t, testId: n }) => (K("Content"), /* @__PURE__ */ e("div", {
 		"data-dialog-member": "content",
-		className: it(),
+		className: ft(),
 		"data-testid": n,
 		children: t
 	})),
 	Actions: ({ children: t, testId: n }) => (K("Actions"), /* @__PURE__ */ e("div", {
 		"data-dialog-member": "actions",
-		className: at(),
+		className: pt(),
 		"data-testid": n,
 		children: t
 	}))
-}, st = h("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+}, ht = h("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
 	variants: { edge: {
 		none: "",
 		rule: "border-t border-solid border-rule"
 	} },
 	defaultVariants: { edge: "rule" }
-}), ct = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
-	className: st({ edge: t }),
+}), gt = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
+	className: ht({ edge: t }),
 	"data-testid": r,
 	children: n
-}), lt = h("font-secondary text-small", {
+}), _t = h("font-secondary text-small", {
 	variants: { state: {
 		idle: "text-muted",
 		sending: "text-muted",
@@ -919,13 +1006,13 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		failed: "text-error"
 	} },
 	defaultVariants: { state: "idle" }
-}), ut = {
+}), vt = {
 	sent: "status",
 	failed: "alert"
-}, dt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+}, yt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
 	let l = s != null && typeof s != "boolean";
 	if (i === "sent" && !l) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
-	let u = i !== "sent", d = ut[i];
+	let u = i !== "sent", d = vt[i];
 	return /* @__PURE__ */ t("form", {
 		action: n,
 		method: r,
@@ -943,12 +1030,12 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			}),
 			l && /* @__PURE__ */ e("p", {
 				role: d,
-				className: lt({ state: i }),
+				className: _t({ state: i }),
 				children: s
 			})
 		]
 	});
-}, ft = h([
+}, bt = h([
 	"flex items-baseline justify-between",
 	"font-secondary text-label leading-label tracking-label text-muted",
 	"py-[var(--space-region)] px-[var(--gutter)]",
@@ -959,50 +1046,50 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		rule: "border-b border-solid border-rule"
 	} },
 	defaultVariants: { edge: "rule" }
-}), pt = [
+}), xt = [
 	"inline-flex shrink-0 items-center",
 	"min-h-[calc(var(--text-label)*var(--leading-label))]",
 	"min-w-[var(--standing-min-width)]"
-].join(" "), mt = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
-	className: ft({ edge: n }),
+].join(" "), St = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
+	className: bt({ edge: n }),
 	"data-testid": o,
 	children: [/* @__PURE__ */ e("div", {
-		className: pt,
+		className: xt,
 		children: r
 	}), /* @__PURE__ */ e("nav", {
 		"aria-label": i,
 		className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
 		children: a
 	})]
-}), ht = h("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
+}), Ct = h("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
 	variants: { place: {
 		start: "justify-start",
 		center: "justify-center",
 		between: "justify-between"
 	} },
 	defaultVariants: { place: "center" }
-}), gt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
-	className: ht({ place: t }),
+}), wt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
+	className: Ct({ place: t }),
 	"data-testid": r,
 	children: n
-}), _t = h("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), vt = h("font-primary text-title leading-title tracking-optical text-foreground"), yt = h("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), bt = h("font-primary text-small text-muted max-w-[var(--measure)]"), xt = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
-	className: _t(),
+}), Tt = h("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), Et = h("font-primary text-title leading-title tracking-optical text-foreground"), Dt = h("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), Ot = h("font-primary text-small text-muted max-w-[var(--measure)]"), kt = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
+	className: Tt(),
 	"data-testid": a,
 	children: [
 		/* @__PURE__ */ e("h1", {
-			className: vt(),
+			className: Et(),
 			children: n
 		}),
 		r !== void 0 && /* @__PURE__ */ e("p", {
-			className: yt(),
+			className: Dt(),
 			children: r
 		}),
 		i !== void 0 && /* @__PURE__ */ e("p", {
-			className: bt(),
+			className: Ot(),
 			children: i
 		})
 	]
-}), St = h([
+}), X = h([
 	"relative",
 	"py-[var(--space-band)]",
 	"[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
@@ -1012,20 +1099,20 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		full: ""
 	} },
 	defaultVariants: { bleed: "inset" }
-}), X = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
+}), At = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
 	"data-section": "",
-	className: St({ bleed: t }),
+	className: X({ bleed: t }),
 	"aria-label": n,
 	"data-testid": i,
 	children: r
-}), Ct = h([
+}), jt = h([
 	"grid gap-[var(--space-region)] lg:grid-cols-[12rem_minmax(0,1fr)]",
 	"[&>div:first-child]:border-solid [&>div:first-child]:border-border [&>div:first-child]:border-b [&>div:first-child]:pb-[var(--space-stack)]",
 	"lg:[&>div:first-child]:border-b-0 lg:[&>div:first-child]:border-r lg:[&>div:first-child]:pb-0 lg:[&>div:first-child]:pr-[var(--space-stack)]",
 	"lg:[&>div:first-child>nav]:sticky lg:[&>div:first-child>nav]:top-0 lg:[&>div:first-child>nav]:max-h-[min(100dvh,var(--sidebar-scrollport-height,100dvh))] lg:[&>div:first-child>nav]:overflow-y-auto",
 	"[&>div:first-child>nav]:p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] lg:[&>div:first-child>nav]:scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
 	"[&>div:first-child>nav>ul]:flex [&>div:first-child>nav>ul]:flex-col [&>div:first-child>nav>ul]:gap-[var(--space-stack)]"
-].join(" ")), wt = (e) => {
+].join(" ")), Mt = (e) => {
 	if (!e) return;
 	let t = [];
 	for (let n = e.parentElement; n && n !== e.ownerDocument.documentElement; n = n.parentElement) t.push(n);
@@ -1039,7 +1126,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	return window.addEventListener("resize", n), () => {
 		r?.disconnect(), window.removeEventListener("resize", n), e.style.removeProperty("--sidebar-scrollport-height");
 	};
-}, Tt = h([
+}, Nt = h([
 	"w-full text-left font-secondary text-label tracking-label",
 	"underline-offset-[var(--underline-offset)]",
 	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
@@ -1054,7 +1141,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	let a = o(Z), s = a !== void 0 && a.active === t;
 	return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("button", {
 		type: "button",
-		className: Tt({ state: r ? "inert" : s ? "active" : "usable" }),
+		className: Nt({ state: r ? "inert" : s ? "active" : "usable" }),
 		disabled: r,
 		"aria-current": s ? "true" : void 0,
 		"data-testid": i,
@@ -1066,14 +1153,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 }, $ = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
 	"data-testid": n,
 	children: t
-}), Et = {
+}), Pt = {
 	Root: ({ active: r, label: a, onSelect$: o, children: s, testId: c }) => {
 		let l = n.toArray(s).filter(i);
 		return /* @__PURE__ */ t("div", {
-			className: Ct(),
+			className: jt(),
 			"data-testid": c,
 			children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
-				ref: wt,
+				ref: Mt,
 				"aria-label": a,
 				children: /* @__PURE__ */ e(Z, {
 					value: {
@@ -1087,7 +1174,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	},
 	Item: Q,
 	Content: $
-}, Dt = {
+}, Ft = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
@@ -1112,7 +1199,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	warning: "#b45309",
 	error: "#d63384",
 	info: "#0e7490"
-}, Ot = {
+}, It = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
@@ -1139,4 +1226,4 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	info: "#22d3ee"
 };
 //#endregion
-export { x as Brandmark, Ne as Button, w as Checklist, _ as Cluster, te as Collection, Qe as Cover, ae as DefinitionList, ot as Dialog, N as Eyebrow, se as Figure, ct as Footer, dt as Form, F as H1, L as H2, ge as H3, ve as H4, be as H5, Se as H6, mt as Header, gt as Hero, Fe as Input, Le as Link, ue as Meter, we as Note, Ee as P, xt as PageHead, je as Prose, he as Rail, X as Section, Et as Sidebar, Be as Slider, y as Stack, j as Table, qe as Tabs, Ye as TextArea, Ot as dark, Dt as light };
+export { x as Brandmark, Pe as Button, w as Checklist, Ve as Choices, _ as Cluster, te as Collection, ot as Cover, ae as DefinitionList, mt as Dialog, M as Eyebrow, se as Figure, gt as Footer, yt as Form, P as H1, I as H2, _e as H3, ye as H4, xe as H5, Ce as H6, St as Header, wt as Hero, Ue as Input, Ge as Link, ue as Meter, Te as Note, De as P, kt as PageHead, Me as Prose, he as Rail, At as Section, Pt as Sidebar, Je as Slider, y as Stack, A as Table, tt as Tabs, rt as TextArea, It as dark, Ft as light };