@juwel-development/design-system 3.2.0 → 3.4.0

package/dist/design-system.js

@@ -1,35 +1,35 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useEffect as n, useId as r, useRef as i } from "react";
+import { Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useRef as c } from "react";
 import './index.css';//#region node_modules/clsx/dist/clsx.mjs
-function a(e) {
+function l(e) {
 	var t, n, r = "";
 	if (typeof e == "string" || typeof e == "number") r += e;
 	else if (typeof e == "object") {
 		if (Array.isArray(e)) {
 			var i = e.length;
-			for (t = 0; t < i; t++) e[t] && (n = a(e[t])) && (r && (r += " "), r += n);
+			for (t = 0; t < i; t++) e[t] && (n = l(e[t])) && (r && (r += " "), r += n);
 		} else for (n in e) e[n] && (r && (r += " "), r += n);
 	}
 	return r;
 }
-function o() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = a(e)) && (r && (r += " "), r += t);
+function u() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = l(e)) && (r && (r += " "), r += t);
 	return r;
 }
 //#endregion
 //#region node_modules/class-variance-authority/dist/index.mjs
-var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e, t) => (n) => {
-	if (t?.variants == null) return c(e, n?.class, n?.className);
+var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e, t) => (n) => {
+	if (t?.variants == null) return f(e, n?.class, n?.className);
 	let { variants: r, defaultVariants: i } = t, a = Object.keys(r).map((e) => {
 		let t = n?.[e], a = i?.[e];
 		if (t === null) return null;
-		let o = s(t) || s(a);
+		let o = d(t) || d(a);
 		return r[e][o];
 	}), o = n && Object.entries(n).reduce((e, t) => {
 		let [n, r] = t;
 		return r === void 0 || (e[n] = r), e;
 	}, {});
-	return c(e, a, t?.compoundVariants?.reduce((e, t) => {
+	return f(e, a, t?.compoundVariants?.reduce((e, t) => {
 		let { class: n, className: r, ...a } = t;
 		return Object.entries(a).every((e) => {
 			let [t, n] = e;
@@ -46,7 +46,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			r
 		] : e;
 	}, []), n?.class, n?.className);
-}, u = l("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
+}, m = p("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
 	variants: {
 		gap: {
 			stack: "gap-x-[var(--space-stack)]",
@@ -61,14 +61,14 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		gap: "region",
 		justify: "start"
 	}
-}), d = ({ gap: t, justify: n, children: r, testId: i }) => /* @__PURE__ */ e("div", {
-	className: u({
+}), h = ({ gap: t, justify: n, children: r, testId: i }) => /* @__PURE__ */ e("div", {
+	className: m({
 		gap: t,
 		justify: n
 	}),
 	"data-testid": i,
 	children: r
-}), f = l("flex", {
+}), g = p("flex", {
 	variants: {
 		gap: {
 			stack: "gap-[var(--space-stack)]",
@@ -77,7 +77,11 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		measure: {
 			true: "max-w-[var(--measure)]",
 			false: "",
-			action: "w-full max-w-[var(--measure-action)]"
+			action: "w-[var(--measure-action)] max-w-full mx-auto"
+		},
+		align: {
+			start: "text-start",
+			center: "text-center"
 		},
 		direction: {
 			column: "flex-col",
@@ -89,69 +93,82 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		measure: !1,
 		direction: "column"
 	}
-}), p = ({ gap: t, measure: n, direction: r, children: i, testId: a }) => /* @__PURE__ */ e("div", {
-	className: f({
+}), _ = ({ gap: t, measure: n, direction: r, align: i, children: a, testId: o }) => /* @__PURE__ */ e("div", {
+	className: g({
 		gap: t,
 		measure: n,
-		direction: r
+		direction: r,
+		align: i
 	}),
-	"data-testid": a,
-	children: i
-}), m = l("inline-flex", { variants: { cut: {
+	"data-testid": o,
+	children: a
+}), v = p("inline-flex", { variants: { cut: {
 	full: "",
 	compact: ""
-} } }), h = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
+} } }), y = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
 	"aria-hidden": "true",
 	"data-cut": n,
-	className: m({ cut: n }),
+	className: v({ cut: n }),
 	"data-testid": i,
 	children: r
 }) : /* @__PURE__ */ e("span", {
 	role: "img",
 	"aria-label": t,
 	"data-cut": n,
-	className: m({ cut: n }),
+	className: v({ cut: n }),
 	"data-testid": i,
 	children: r
-}), g = l("m-0 list-none p-0"), _ = l([
+}), b = p("m-0 list-none p-0"), x = p([
 	"flex items-start gap-3 font-primary text-body leading-body text-foreground",
 	"before:mt-[0.35em] before:size-[calc(var(--tick-length)*0.7)] before:shrink-0 before:rotate-45 before:[border-top:var(--tick-thickness)_solid_var(--color-rule)] before:[border-right:var(--tick-thickness)_solid_var(--color-rule)] before:content-['']",
 	"[&:not(:first-child)]:mt-[var(--space-stack)] [&:not(:first-child)]:border-border [&:not(:first-child)]:border-t [&:not(:first-child)]:border-solid [&:not(:first-child)]:pt-[var(--space-stack)]"
-].join(" ")), v = {
+].join(" ")), S = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
-		className: g(),
+		className: b(),
 		role: "list",
 		"data-testid": n,
 		children: t
 	}),
 	Item: ({ children: t }) => /* @__PURE__ */ e("li", {
-		className: _(),
+		className: x(),
+		children: t
+	})
+}, C = p("m-0 list-none p-0"), w = p("py-[var(--space-collection-item)] [&+li]:border-t [&+li]:border-solid [&+li]:border-border"), T = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
+		className: C(),
+		role: "list",
+		"data-testid": n,
+		children: t
+	}),
+	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("li", {
+		className: w(),
+		"data-testid": n,
 		children: t
 	})
-}, y = l([
+}, ee = p([
 	"grid gap-[var(--space-stack)] py-6",
 	"border-b border-solid border-border first:border-t",
 	"lg:grid-cols-[16rem_minmax(0,1fr)] lg:items-baseline lg:gap-x-12",
 	"lg:[&>dt]:col-start-1 lg:[&>dd]:col-start-2 lg:[&>dd]:row-start-1"
-].join(" ")), b = l("font-primary text-subtitle leading-subtitle text-foreground"), x = l("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), S = {
+].join(" ")), E = p("font-primary text-subtitle leading-subtitle text-foreground"), te = p("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), ne = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("dl", {
 		"data-testid": n,
 		children: t
 	}),
 	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: y(),
+		className: ee(),
 		"data-testid": n,
 		children: t
 	}),
 	Term: ({ children: t }) => /* @__PURE__ */ e("dt", {
-		className: b(),
+		className: E(),
 		children: t
 	}),
 	Description: ({ children: t }) => /* @__PURE__ */ e("dd", {
-		className: x(),
+		className: te(),
 		children: t
 	})
-}, C = l("block w-full object-cover bg-backing", {
+}, re = p("block w-full object-cover bg-backing", {
 	variants: {
 		ratio: {
 			portrait: "aspect-portrait",
@@ -168,13 +185,13 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		}
 	},
 	defaultVariants: { focus: "center" }
-}), w = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, overlay: u, priority: d, testId: f }) => {
+}), ie = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, overlay: u, priority: d, testId: f }) => {
 	let p = u != null && typeof u != "boolean", m = /* @__PURE__ */ e("img", {
 		src: n,
 		alt: r,
 		width: i,
 		height: a,
-		className: C({
+		className: re({
 			ratio: o,
 			focus: s
 		}),
@@ -197,21 +214,51 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			children: l
 		})]
 	});
-}, T = l(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), E = l("lg:sticky lg:top-6"), ee = l("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), te = l("block pt-1 font-secondary text-label tracking-label text-foreground"), D = {
+}, D = class extends Error {
+	constructor(e) {
+		super(`Meter configuration is invalid: ${e}`), this.name = "MeterConfigurationError";
+	}
+}, ae = p("w-full h-[var(--meter-track-thickness)] bg-meter-track border border-solid border-rule"), oe = p("h-full w-[calc(var(--meter-level)*100%)]", {
+	variants: { treatment: {
+		neutral: "bg-meter-fill",
+		depleting: "bg-[color-mix(in_oklab,var(--color-meter-fill)_calc(var(--meter-level)*100%),var(--color-error))]"
+	} },
+	defaultVariants: { treatment: "neutral" }
+}), se = ({ value: t, min: n = 0, max: r, treatment: i, label: a, valueText: o, testId: s }) => {
+	if (!Number.isFinite(t) || !Number.isFinite(n) || !Number.isFinite(r)) throw new D(`value, min and max must be finite numbers (got value=${t}, min=${n}, max=${r})`);
+	if (n >= r) throw new D(`min must be less than max (got min=${n}, max=${r})`);
+	if (t < n || t > r) throw new D(`value must lie within [min, max] (got value=${t}, min=${n}, max=${r})`);
+	let c = { "--meter-level": (t - n) / (r - n) };
+	return /* @__PURE__ */ e("div", {
+		role: "meter",
+		"aria-valuenow": t,
+		"aria-valuemin": n,
+		"aria-valuemax": r,
+		"aria-label": a,
+		"aria-valuetext": o,
+		"data-testid": s,
+		className: ae(),
+		style: c,
+		children: /* @__PURE__ */ e("div", {
+			"aria-hidden": "true",
+			className: oe({ treatment: i })
+		})
+	});
+}, ce = p(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), le = p("lg:sticky lg:top-6"), ue = p("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), O = p("block pt-1 font-secondary text-label tracking-label text-foreground"), k = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: T(),
+		className: ce(),
 		"data-testid": n,
 		children: t
 	}),
 	Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
-		className: E(),
+		className: le(),
 		"data-testid": i,
 		"aria-hidden": "true",
 		children: [n !== void 0 && /* @__PURE__ */ e("span", {
-			className: ee(),
+			className: ue(),
 			children: n
 		}), /* @__PURE__ */ e("span", {
-			className: te(),
+			className: O(),
 			children: r
 		})]
 	}),
@@ -219,7 +266,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		"data-testid": n,
 		children: t
 	})
-}, O = l([
+}, A = p([
 	"[&:not([data-notes])]:overflow-x-auto",
 	"[&>table]:w-full [&>table]:border-collapse [&>table]:text-left",
 	"[&_caption]:pb-3 [&_caption]:text-left [&_caption]:font-secondary [&_caption]:text-label [&_caption]:tracking-label [&_caption]:text-muted",
@@ -228,7 +275,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (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(" ")), k = l("border-t border-solid border-border"), A = l("px-4 py-2 text-small first:pl-0 last:pr-0", {
+].join(" ")), j = p("border-t border-solid border-border"), M = p("px-4 py-2 text-small first:pl-0 last:pr-0", {
 	variants: {
 		variant: {
 			value: "font-primary text-foreground tabular-nums",
@@ -244,24 +291,24 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		variant: "value",
 		align: "left"
 	}
-}), j = l("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
+}), N = p("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" }
-}), M = {
+}), P = {
 	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", {
-			className: O(),
+			className: A(),
 			"data-testid": a,
 			"aria-label": n,
 			tabIndex: 0,
 			children: o
 		}) : /* @__PURE__ */ e("div", {
-			className: O(),
+			className: A(),
 			"data-notes": r,
 			"data-testid": a,
 			children: o
@@ -271,162 +318,162 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (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: k(),
+		className: j(),
 		"data-testid": n,
 		children: t
 	}),
 	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
 		scope: t,
-		className: j({ align: n }),
+		className: N({ align: n }),
 		children: r
 	}),
 	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
-		className: A({
+		className: M({
 			variant: t,
 			align: n
 		}),
 		"data-variant": t ?? "value",
 		children: r
 	})
-}, N = l("font-secondary text-label tracking-label font-medium", {
+}, F = p("font-secondary text-label tracking-label font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "muted" }
-}), P = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: N({ color: n }),
+}), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: F({ color: n }),
 	"data-testid": r,
 	children: t
-}), F = l("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
+}), L = p("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
-	className: F({ color: n }),
+}), R = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
+	className: L({ color: n }),
 	"data-testid": r,
 	children: t
-}), L = l("font-primary text-title leading-title tracking-optical", {
+}), z = p("font-primary text-title leading-title tracking-optical", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), R = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
-	className: L({ color: n }),
+}), B = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
+	className: z({ color: n }),
 	"data-testid": r,
 	children: t
-}), z = l("font-primary text-subtitle leading-subtitle", {
+}), V = p("font-primary text-subtitle leading-subtitle", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), B = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
-	className: z({ color: n }),
+}), H = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
+	className: V({ color: n }),
 	"data-testid": r,
 	children: t
-}), V = l("font-primary text-body leading-body font-bold", {
+}), U = p("font-primary text-body leading-body font-bold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), H = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
-	className: V({ color: n }),
+}), de = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
+	className: U({ color: n }),
 	"data-testid": r,
 	children: t
-}), U = l("font-primary text-body leading-body font-semibold", {
+}), fe = p("font-primary text-body leading-body font-semibold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), W = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
-	className: U({ color: n }),
+}), pe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
+	className: fe({ color: n }),
 	"data-testid": r,
 	children: t
-}), G = l("font-primary text-body leading-body font-medium", {
+}), me = p("font-primary text-body leading-body font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), K = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
-	className: G({ color: n }),
+}), he = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
+	className: me({ color: n }),
 	"data-testid": r,
 	children: t
-}), q = l("font-secondary text-small", {
+}), ge = p("font-secondary text-small", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), J = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: q({ color: n }),
+}), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: ge({ color: n }),
 	"data-testid": r,
 	children: t
-}), Y = l("font-primary text-body leading-body", {
+}), ve = p("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), X = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: Y({ color: n }),
+}), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: ve({ color: n }),
 	"data-testid": r,
 	children: t
-}), Z = l("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), Q = l("font-primary text-lede leading-lede text-foreground"), ne = l("font-primary text-body leading-body", {
+}), be = p("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), xe = p("font-primary text-lede leading-lede text-foreground"), Se = p("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), re = l("font-primary text-small text-muted"), ie = {
+}), Ce = p("font-primary text-small text-muted"), we = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: Z(),
+		className: be(),
 		"data-testid": n,
 		children: t
 	}),
 	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: Q(),
+		className: xe(),
 		children: t
 	}),
 	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
-		className: ne({ color: t }),
+		className: Se({ color: t }),
 		children: n
 	}),
 	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: re(),
+		className: Ce(),
 		children: t
 	})
-}, ae = l("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)]", {
+}, Te = p("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" }
-}), oe = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
+}), Ee = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
 	type: s,
 	"data-testid": r,
-	className: ae({ variant: i }),
+	className: Te({ variant: i }),
 	onClick: () => a?.next(),
 	disabled: n,
 	"aria-label": o,
 	children: t
-}), se = l("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", {
+}), De = p("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" }
-}), ce = ({ label: a, name: o, variant: s, required: c, optionalLabel: l, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
-	let b = r(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, u ? C : void 0].filter(Boolean).join(" ") || void 0, T = i(null);
-	return n(() => {
+}), Oe = ({ label: n, name: r, variant: i, required: a, optionalLabel: l, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
+	let b = s(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, u ? C : void 0].filter(Boolean).join(" ") || void 0, T = c(null);
+	return o(() => {
 		let e = v?.subscribe(() => {
 			T.current && (T.current.value = "");
 		});
@@ -437,15 +484,15 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			/* @__PURE__ */ e("label", {
 				htmlFor: x,
 				className: "font-secondary font-medium text-body text-foreground",
-				children: a
+				children: n
 			}),
 			/* @__PURE__ */ e("input", {
 				ref: T,
 				id: x,
-				name: o,
-				type: s ?? "text",
-				className: se({ variant: s }),
-				required: c,
+				name: r,
+				type: i ?? "text",
+				className: De({ variant: i }),
+				required: a,
 				disabled: d,
 				defaultValue: f,
 				placeholder: p,
@@ -455,7 +502,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 				"data-testid": y,
 				onInput: (e) => _?.next(e.currentTarget.value)
 			}),
-			!c && l && /* @__PURE__ */ e("span", {
+			!a && l && /* @__PURE__ */ e("span", {
 				className: "font-secondary text-muted text-small",
 				children: l
 			}),
@@ -471,7 +518,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			})
 		]
 	});
-}, le = l("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+}, ke = p("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",
@@ -479,17 +526,149 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		graphic: "text-inherit no-underline"
 	} },
 	defaultVariants: { treatment: "prose" }
-}), ue = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
+}), Ae = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
 	href: t,
-	className: le({ treatment: r }),
+	className: ke({ treatment: r }),
 	target: i ? "_blank" : void 0,
 	rel: i ? "noopener noreferrer" : void 0,
 	"aria-current": a ? "page" : void 0,
 	"data-testid": o,
 	children: n
-}), de = l("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"), fe = ({ label: a, name: o, required: s, optionalLabel: c, invalid: l, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
-	let y = r(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, l ? S : void 0].filter(Boolean).join(" ") || void 0, w = i(null);
-	return n(() => {
+}), W = class extends Error {
+	constructor(e) {
+		super(`Slider configuration: ${e}`), this.name = "SliderConfigurationError";
+	}
+}, je = p([
+	"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)]",
+	"[&::-webkit-slider-runnable-track]:h-[var(--slider-track-thickness)] [&::-webkit-slider-runnable-track]:rounded-[var(--radius-control)] [&::-webkit-slider-runnable-track]:bg-control-border",
+	"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-[var(--slider-thumb-size)] [&::-webkit-slider-thumb]:rounded-[var(--radius-control)] [&::-webkit-slider-thumb]:bg-foreground",
+	"[&::-webkit-slider-thumb]:mt-[calc((var(--slider-track-thickness)-var(--slider-thumb-size))/2)]",
+	"[&:disabled::-webkit-slider-runnable-track]:bg-disabled [&:disabled::-webkit-slider-thumb]:bg-disabled",
+	"[&::-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(" ")), Me = (e) => {
+	for (let [t, n] of Object.entries(e)) if (!Number.isFinite(n)) throw new W(`\`${t}\` must be a finite number, got ${n}`);
+	if (e.min >= e.max) throw new W(`\`min\` (${e.min}) must be below \`max\` (${e.max})`);
+	if (e.step <= 0) throw new W(`\`step\` (${e.step}) must be positive`);
+	if (e.value < e.min || e.value > e.max) throw new W(`\`value\` (${e.value}) must lie within [${e.min}, ${e.max}]`);
+}, Ne = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (Me({
+	min: t,
+	max: n,
+	step: r,
+	value: i
+}), /* @__PURE__ */ e("input", {
+	type: "range",
+	className: je(),
+	min: t,
+	max: n,
+	step: r,
+	value: i,
+	disabled: c,
+	"aria-label": o,
+	"aria-valuetext": s,
+	"data-testid": l,
+	onChange: (e) => a.next(e.currentTarget.valueAsNumber)
+})), Pe = class extends Error {
+	constructor(e) {
+		super(`Tabs.${e} must be composed inside Tabs.Root`), this.name = "TabsCompositionError";
+	}
+}, Fe = p([
+	"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(" ")), Ie = p([
+	"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(" ")), Le = p("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), G = r(void 0), K = (e) => {
+	let t = a(G);
+	if (t === void 0) throw new Pe(e);
+	return t;
+}, q = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), Re = (e) => {
+	e.currentTarget.scrollIntoView({
+		block: "nearest",
+		inline: "nearest"
+	});
+}, J = (e, t) => `${e}tab-${q(t)}`, Y = (e, t) => `${e}panel-${q(t)}`, ze = (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];
+}, Be = {
+	Root: ({ active: t, onSelect$: n, label: r, children: i, testId: a }) => {
+		let o = s();
+		return /* @__PURE__ */ e(G.Provider, {
+			value: {
+				active: t,
+				onSelect$: n,
+				label: r,
+				baseId: o
+			},
+			children: /* @__PURE__ */ e("div", {
+				"data-testid": a,
+				children: i
+			})
+		});
+	},
+	List: ({ children: t, testId: n }) => {
+		let { label: r } = K("List");
+		return /* @__PURE__ */ e("div", {
+			role: "tablist",
+			"aria-label": r,
+			className: Fe(),
+			"data-testid": n,
+			children: t
+		});
+	},
+	Tab: ({ value: t, children: n, testId: r }) => {
+		let { active: i, onSelect$: a, baseId: o } = K("Tab"), s = i === t;
+		return /* @__PURE__ */ e("button", {
+			type: "button",
+			role: "tab",
+			id: J(o, t),
+			"aria-selected": s,
+			"aria-controls": Y(o, t),
+			tabIndex: s ? 0 : -1,
+			"data-value": t,
+			"data-testid": r,
+			className: Ie(),
+			onClick: () => a.next(t),
+			onKeyDown: (e) => {
+				if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+				e.preventDefault();
+				let t = ze(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: Re,
+			children: n
+		});
+	},
+	Panel: ({ value: t, children: n, testId: r }) => {
+		let { active: i, baseId: a } = K("Panel"), o = i === t;
+		return /* @__PURE__ */ e("div", {
+			role: "tabpanel",
+			id: Y(a, t),
+			"aria-labelledby": J(a, t),
+			hidden: !o,
+			tabIndex: o ? 0 : void 0,
+			className: Le(),
+			"data-testid": r,
+			children: o ? n : void 0
+		});
+	}
+}, Ve = p("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"), He = ({ label: n, name: r, required: i, optionalLabel: a, invalid: l, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
+	let y = s(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, l ? S : void 0].filter(Boolean).join(" ") || void 0, w = c(null);
+	return o(() => {
 		let e = _?.subscribe(() => {
 			w.current && (w.current.value = "");
 		});
@@ -500,14 +679,14 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			/* @__PURE__ */ e("label", {
 				htmlFor: b,
 				className: "font-secondary font-medium text-body text-foreground",
-				children: a
+				children: n
 			}),
 			/* @__PURE__ */ e("textarea", {
 				ref: w,
 				id: b,
-				name: o,
-				className: de(),
-				required: s,
+				name: r,
+				className: Ve(),
+				required: i,
 				disabled: u,
 				defaultValue: d,
 				placeholder: f,
@@ -517,9 +696,9 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 				"data-testid": v,
 				onInput: (e) => g?.next(e.currentTarget.value)
 			}),
-			!s && c && /* @__PURE__ */ e("span", {
+			!i && a && /* @__PURE__ */ e("span", {
 				className: "font-secondary text-muted text-small",
-				children: c
+				children: a
 			}),
 			m && /* @__PURE__ */ e("p", {
 				id: x,
@@ -533,31 +712,31 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			})
 		]
 	});
-}, pe = l([
+}, Ue = p([
 	"flex flex-col items-center",
 	"min-h-[var(--cover-height)]",
 	"px-[var(--gutter)] py-[var(--space-region)]"
-].join(" ")), me = "my-auto", he = ({ children: n, foot: r, testId: i }) => {
+].join(" ")), We = "my-auto max-w-full", Ge = ({ children: n, foot: r, testId: i }) => {
 	let a = r != null && typeof r != "boolean";
 	return /* @__PURE__ */ t("div", {
-		className: pe(),
+		className: Ue(),
 		"data-testid": i,
 		children: [/* @__PURE__ */ e("div", {
-			className: me,
+			className: We,
 			children: n
 		}), a && /* @__PURE__ */ e("div", { children: r })]
 	});
-}, ge = l("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+}, Ke = p("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" }
-}), _e = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
-	className: ge({ edge: t }),
+}), qe = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
+	className: Ke({ edge: t }),
 	"data-testid": r,
 	children: n
-}), ve = l("font-secondary text-small", {
+}), Je = p("font-secondary text-small", {
 	variants: { state: {
 		idle: "text-muted",
 		sending: "text-muted",
@@ -565,13 +744,13 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		failed: "text-error"
 	} },
 	defaultVariants: { state: "idle" }
-}), ye = {
+}), Ye = {
 	sent: "status",
 	failed: "alert"
-}, be = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+}, Xe = ({ 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 = ye[i];
+	let u = i !== "sent", d = Ye[i];
 	return /* @__PURE__ */ t("form", {
 		action: n,
 		method: r,
@@ -589,12 +768,12 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			}),
 			l && /* @__PURE__ */ e("p", {
 				role: d,
-				className: ve({ state: i }),
+				className: Je({ state: i }),
 				children: s
 			})
 		]
 	});
-}, xe = l([
+}, Ze = p([
 	"flex items-baseline justify-between",
 	"font-secondary text-label leading-label tracking-label text-muted",
 	"py-[var(--space-region)] px-[var(--gutter)]",
@@ -605,50 +784,50 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		rule: "border-b border-solid border-rule"
 	} },
 	defaultVariants: { edge: "rule" }
-}), Se = [
+}), Qe = [
 	"inline-flex shrink-0 items-center",
 	"min-h-[calc(var(--text-label)*var(--leading-label))]",
 	"min-w-[var(--standing-min-width)]"
-].join(" "), Ce = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
-	className: xe({ edge: n }),
+].join(" "), $e = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
+	className: Ze({ edge: n }),
 	"data-testid": o,
 	children: [/* @__PURE__ */ e("div", {
-		className: Se,
+		className: Qe,
 		children: r
 	}), /* @__PURE__ */ e("nav", {
 		"aria-label": i,
 		className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
 		children: a
 	})]
-}), we = l("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
+}), et = p("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" }
-}), Te = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
-	className: we({ place: t }),
+}), tt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
+	className: et({ place: t }),
 	"data-testid": r,
 	children: n
-}), Ee = l("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), De = l("font-primary text-title leading-title tracking-optical text-foreground"), $ = l("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), Oe = l("font-primary text-small text-muted max-w-[var(--measure)]"), ke = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
-	className: Ee(),
+}), nt = p("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), rt = p("font-primary text-title leading-title tracking-optical text-foreground"), it = p("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), X = p("font-primary text-small text-muted max-w-[var(--measure)]"), at = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
+	className: nt(),
 	"data-testid": a,
 	children: [
 		/* @__PURE__ */ e("h1", {
-			className: De(),
+			className: rt(),
 			children: n
 		}),
 		r !== void 0 && /* @__PURE__ */ e("p", {
-			className: $(),
+			className: it(),
 			children: r
 		}),
 		i !== void 0 && /* @__PURE__ */ e("p", {
-			className: Oe(),
+			className: X(),
 			children: i
 		})
 	]
-}), Ae = l([
+}), ot = p([
 	"relative",
 	"py-[var(--space-band)]",
 	"[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
@@ -658,13 +837,82 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		full: ""
 	} },
 	defaultVariants: { bleed: "inset" }
-}), je = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
+}), st = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
 	"data-section": "",
-	className: Ae({ bleed: t }),
+	className: ot({ bleed: t }),
 	"aria-label": n,
 	"data-testid": i,
 	children: r
-}), Me = {
+}), ct = p([
+	"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(" ")), lt = (e) => {
+	if (!e) return;
+	let t = [];
+	for (let n = e.parentElement; n && n !== e.ownerDocument.documentElement; n = n.parentElement) t.push(n);
+	let n = () => {
+		let n = t.find((e) => /^(auto|scroll|hidden|overlay)$/.test(getComputedStyle(e).overflowY));
+		n ? e.style.setProperty("--sidebar-scrollport-height", `${n.clientHeight}px`) : e.style.removeProperty("--sidebar-scrollport-height");
+	};
+	n();
+	let r = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(n);
+	for (let e of t) r?.observe(e);
+	return window.addEventListener("resize", n), () => {
+		r?.disconnect(), window.removeEventListener("resize", n), e.style.removeProperty("--sidebar-scrollport-height");
+	};
+}, ut = p([
+	"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)]"
+].join(" "), {
+	variants: { state: {
+		active: "text-foreground underline decoration-[length:var(--underline-thickness)] cursor-pointer",
+		usable: "text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] cursor-pointer",
+		inert: "text-muted cursor-not-allowed"
+	} },
+	defaultVariants: { state: "usable" }
+}), Z = r(void 0), Q = ({ entryKey: t, children: n, inert: r, testId: i }) => {
+	let o = a(Z), s = o !== void 0 && o.active === t;
+	return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("button", {
+		type: "button",
+		className: ut({ state: r ? "inert" : s ? "active" : "usable" }),
+		disabled: r,
+		"aria-current": s ? "true" : void 0,
+		"data-testid": i,
+		onClick: () => {
+			s || o?.onSelect$.next(t);
+		},
+		children: n
+	}) });
+}, $ = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+	"data-testid": n,
+	children: t
+}), dt = {
+	Root: ({ active: r, label: a, onSelect$: o, children: s, testId: c }) => {
+		let l = n.toArray(s).filter(i);
+		return /* @__PURE__ */ t("div", {
+			className: ct(),
+			"data-testid": c,
+			children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
+				ref: lt,
+				"aria-label": a,
+				children: /* @__PURE__ */ e(Z, {
+					value: {
+						active: r,
+						onSelect$: o
+					},
+					children: /* @__PURE__ */ e("ul", { children: l.filter((e) => e.type === Q) })
+				})
+			}) }), l.filter((e) => e.type === $)]
+		});
+	},
+	Item: Q,
+	Content: $
+}, ft = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
@@ -672,6 +920,8 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	controlBorder: "#64748b",
 	rule: "#808fa3",
 	backing: "#f1f5f9",
+	meterFill: "#0f172a",
+	meterTrack: "#e2e8f0",
 	primary: "#7c3aed",
 	primaryHover: "#6d28d9",
 	primaryForeground: "#f8fafc",
@@ -686,7 +936,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	warning: "#f59e0b",
 	error: "#d63384",
 	info: "#06b6d4"
-}, Ne = {
+}, pt = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
@@ -694,6 +944,8 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	controlBorder: "#94a3b8",
 	rule: "#5b6a80",
 	backing: "#1e293b",
+	meterFill: "#f8fafc",
+	meterTrack: "#334155",
 	primary: "#8b5cf6",
 	primaryHover: "#a78bfa",
 	primaryForeground: "#020617",
@@ -710,4 +962,4 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	info: "#22d3ee"
 };
 //#endregion
-export { h as Brandmark, oe as Button, v as Checklist, d as Cluster, he as Cover, S as DefinitionList, P as Eyebrow, w as Figure, _e as Footer, be as Form, I as H1, R as H2, B as H3, H as H4, W as H5, K as H6, Ce as Header, Te as Hero, ce as Input, ue as Link, J as Note, X as P, ke as PageHead, ie as Prose, D as Rail, je as Section, p as Stack, M as Table, fe as TextArea, Ne as dark, Me as light };
+export { y as Brandmark, Ee as Button, S as Checklist, h as Cluster, T as Collection, Ge as Cover, ne as DefinitionList, I as Eyebrow, ie as Figure, qe as Footer, Xe as Form, R as H1, B as H2, H as H3, de as H4, pe as H5, he as H6, $e as Header, tt as Hero, Oe as Input, Ae as Link, se as Meter, _e as Note, ye as P, at as PageHead, we as Prose, k as Rail, st as Section, dt as Sidebar, Ne as Slider, _ as Stack, P as Table, Be as Tabs, He as TextArea, pt as dark, ft as light };