@knpkv/rly 0.8.0 → 0.9.0

package/dist/primitives/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "../Dialog-_t9OodCK.js";
-import { _ as A, a as j, c as M, d as N, f as P, g as F, h as I, i as L, l as R, m as z, n as B, o as V, p as H, r as U, s as W, t as G, u as K, v as q, y as J } from "../primitives-CjQX0eVM.js";
-export { k as Avatar, o as Button, w as Dialog, A as Divider, h as Field, p as IconButton, z as Notice, l as RLY_AVATAR_DEFAULT_VARIANTS, O as RLY_AVATAR_VARIANTS, r as RLY_BUTTON_DEFAULT_VARIANTS, n as RLY_BUTTON_VARIANTS, y as RLY_DIALOG_DEFAULT_VARIANTS, S as RLY_DIALOG_VARIANTS, q as RLY_DIVIDER_DEFAULT_VARIANTS, J as RLY_DIVIDER_VARIANTS, c as RLY_FIELD_DEFAULT_VARIANTS, b as RLY_FIELD_VARIANTS, s as RLY_ICON_BUTTON_DEFAULT_VARIANTS, E as RLY_ICON_BUTTON_VARIANTS, I as RLY_NOTICE_DEFAULT_VARIANTS, F as RLY_NOTICE_VARIANTS, x as RLY_SELECT_DEFAULT_VARIANTS, v as RLY_SELECT_VARIANTS, i as RLY_SHEET_DEFAULT_VARIANTS, g as RLY_SHEET_VARIANTS, T as RLY_SKELETON_DEFAULT_VARIANTS, d as RLY_SKELETON_VARIANTS, a as RLY_STATE_LABEL_DEFAULT_VARIANTS, t as RLY_STATE_LABEL_VARIANTS, C as RLY_STATE_PANEL_DEFAULT_VARIANTS, u as RLY_STATE_PANEL_VARIANTS, N as RLY_SURFACE_DEFAULT_VARIANTS, P as RLY_SURFACE_VARIANTS, M as RLY_TABS_DEFAULT_VARIANTS, R as RLY_TABS_VARIANTS, j as RLY_TEXT_DEFAULT_VARIANTS, V as RLY_TEXT_VARIANTS, G as RLY_TOGGLE_GROUP_DEFAULT_VARIANTS, B as RLY_TOGGLE_GROUP_VARIANTS, m as Select, e as Sheet, f as Skeleton, D as StateLabel, _ as StatePanel, H as Surface, K as Tabs, W as Text, L as ThemeSelect, U as ToggleGroup };
+import { C as A, D as j, E as M, O as N, S as P, T as F, _ as I, a as L, b as R, c as z, d as B, f as V, g as H, h as U, i as W, l as G, m as K, n as q, o as J, p as Y, r as X, s as Z, t as Q, u as $, v as ee, w as te, x as ne, y as re } from "../primitives-Dj-qYrUZ.js";
+export { k as Avatar, o as Button, M as ChartLegend, w as Dialog, A as Divider, h as Field, p as IconButton, re as LimitTrack, H as Notice, l as RLY_AVATAR_DEFAULT_VARIANTS, O as RLY_AVATAR_VARIANTS, r as RLY_BUTTON_DEFAULT_VARIANTS, n as RLY_BUTTON_VARIANTS, y as RLY_DIALOG_DEFAULT_VARIANTS, S as RLY_DIALOG_VARIANTS, te as RLY_DIVIDER_DEFAULT_VARIANTS, F as RLY_DIVIDER_VARIANTS, c as RLY_FIELD_DEFAULT_VARIANTS, b as RLY_FIELD_VARIANTS, s as RLY_ICON_BUTTON_DEFAULT_VARIANTS, E as RLY_ICON_BUTTON_VARIANTS, R as RLY_LIMIT_TRACK_DEFAULT_VARIANTS, ne as RLY_LIMIT_TRACK_VARIANTS, I as RLY_NOTICE_DEFAULT_VARIANTS, ee as RLY_NOTICE_VARIANTS, x as RLY_SELECT_DEFAULT_VARIANTS, v as RLY_SELECT_VARIANTS, j as RLY_SERIES, i as RLY_SHEET_DEFAULT_VARIANTS, g as RLY_SHEET_VARIANTS, T as RLY_SKELETON_DEFAULT_VARIANTS, d as RLY_SKELETON_VARIANTS, a as RLY_STATE_LABEL_DEFAULT_VARIANTS, t as RLY_STATE_LABEL_VARIANTS, C as RLY_STATE_PANEL_DEFAULT_VARIANTS, u as RLY_STATE_PANEL_VARIANTS, Y as RLY_SURFACE_DEFAULT_VARIANTS, K as RLY_SURFACE_VARIANTS, $ as RLY_TABS_DEFAULT_VARIANTS, B as RLY_TABS_VARIANTS, Z as RLY_TEXT_DEFAULT_VARIANTS, z as RLY_TEXT_VARIANTS, X as RLY_TOGGLE_GROUP_DEFAULT_VARIANTS, W as RLY_TOGGLE_GROUP_VARIANTS, Q as RLY_TRACK_KEY_MARKS, m as Select, e as Sheet, f as Skeleton, D as StateLabel, _ as StatePanel, U as Surface, V as Tabs, G as Text, J as ThemeSelect, L as ToggleGroup, q as TrackKey, P as limitTrackTone, N as rlySeriesColor };
 
 //# sourceMappingURL=index.js.map

package/dist/{primitives-CjQX0eVM.js → primitives-Dj-qYrUZ.js}

@@ -6,40 +6,75 @@ import { RadioGroup as l, Tabs as u } from "radix-ui";
 import { createElement as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 var h = {
+	root: "rly_ChartLegend-module__root",
+	item: "rly_ChartLegend-module__item",
+	swatch: "rly_ChartLegend-module__swatch"
+}, g = (e) => i(h, e), _ = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	"other"
+], v = (e) => `var(--rly-color-series-${e})`, y = (e) => {
+	let t = /* @__PURE__ */ new Set();
+	for (let n of e) {
+		let e = r(n.id, "ChartLegend item id");
+		if (t.has(e)) throw Error(`ChartLegend item ids must be unique: ${e}`);
+		t.add(e);
+	}
+}, b = ({ className: e, items: t, label: n, ...i }) => (y(t), t.length === 0 ? null : /* @__PURE__ */ p("ul", {
+	...i,
+	"aria-label": r(n, "ChartLegend label"),
+	className: o(g("root"), e),
+	role: "list",
+	children: t.map((e) => /* @__PURE__ */ m("li", {
+		className: g("item"),
+		children: [/* @__PURE__ */ p("span", {
+			"aria-hidden": "true",
+			className: g("swatch"),
+			"data-series": String(e.series),
+			style: { background: v(e.series) }
+		}), r(e.label, "ChartLegend item label")]
+	}, e.id))
+})), x = {
 	root: "rly_Divider-module__root",
 	horizontal: "rly_Divider-module__horizontal",
 	vertical: "rly_Divider-module__vertical",
 	subtle: "rly_Divider-module__subtle",
 	strong: "rly_Divider-module__strong"
-}, g = (e) => i(h, e), _ = a({
+}, S = (e) => i(x, e), C = a({
 	orientation: {
 		horizontal: {
-			className: g("horizontal"),
+			className: S("horizontal"),
 			purpose: "Separate stacked content",
 			tokens: ["space-0"]
 		},
 		vertical: {
-			className: g("vertical"),
+			className: S("vertical"),
 			purpose: "Separate adjacent content",
 			tokens: ["space-0"]
 		}
 	},
 	strength: {
 		subtle: {
-			className: g("subtle"),
+			className: S("subtle"),
 			purpose: "Quiet structural boundary",
 			tokens: ["color-border-1"]
 		},
 		strong: {
-			className: g("strong"),
+			className: S("strong"),
 			purpose: "Explicit structural boundary",
 			tokens: ["color-border-2"]
 		}
 	}
-}), v = a({
+}), ee = a({
 	orientation: "horizontal",
 	strength: "subtle"
-}), y = ({ className: e, decorative: t = !0, label: n, orientation: i = "horizontal", strength: a = "subtle", ...s }) => {
+}), te = ({ className: e, decorative: t = !0, label: n, orientation: i = "horizontal", strength: a = "subtle", ...s }) => {
 	if (!t && n === void 0) throw Error("Semantic Divider label must contain visible text");
 	let c = t || n === void 0 ? void 0 : r(n, "Semantic Divider label");
 	return /* @__PURE__ */ p("div", {
@@ -47,10 +82,72 @@ var h = {
 		"aria-hidden": t ? "true" : void 0,
 		"aria-label": c,
 		"aria-orientation": t ? void 0 : i,
-		className: o(g("root"), _.orientation[i].className, _.strength[a].className, e),
+		className: o(S("root"), C.orientation[i].className, C.strength[a].className, e),
 		role: t ? "presentation" : "separator"
 	});
-}, b = {
+}, w = {
+	root: "rly_LimitTrack-module__root",
+	defaultSize: "rly_LimitTrack-module__defaultSize",
+	slim: "rly_LimitTrack-module__slim",
+	fill: "rly_LimitTrack-module__fill",
+	projection: "rly_LimitTrack-module__projection",
+	near: "rly_LimitTrack-module__near"
+}, T = (e) => i(w, e), E = a({ size: {
+	default: {
+		className: T("defaultSize"),
+		purpose: "A limit beside its numbers",
+		tokens: ["space-12", "radius-tag"]
+	},
+	slim: {
+		className: T("slim"),
+		purpose: "A limit inside a dense row",
+		tokens: ["space-6", "radius-tag"]
+	}
+} }), D = a({ size: "default" }), O = (e) => e !== null && Number.isFinite(e) ? e : null, k = (e, t) => {
+	if (!Number.isFinite(e)) throw Error(`${t} must be a finite number`);
+	return e;
+}, A = (e, t) => {
+	let n = k(t, "limitTrackTone near"), r = O(e);
+	return r === null ? "unknown" : r >= 100 ? "full" : r >= n ? "near" : "ok";
+}, j = (e) => Math.min(100, Math.max(0, e)), M = ({ className: e, decorative: t = !0, label: n, near: i = 80, projected: a, size: s = D.size, stale: c = !1, value: l, valueText: u, ...d }) => {
+	let f = O(l), h = k(i, "LimitTrack near"), g = !t, _ = g ? r(n ?? "", "LimitTrack label") : void 0, v = g ? r(u ?? "", "LimitTrack valueText") : void 0, y = g && f !== null, b = f !== null && a !== void 0 && Number.isFinite(a) && a > f ? {
+		start: j(f),
+		length: j(a) - j(f)
+	} : null;
+	return /* @__PURE__ */ m("span", {
+		...d,
+		"aria-hidden": g ? void 0 : "true",
+		"aria-label": g && !y ? `${_}: ${v}` : _,
+		"aria-valuemax": y ? 100 : void 0,
+		"aria-valuemin": y ? 0 : void 0,
+		"aria-valuenow": y && f !== null ? j(f) : void 0,
+		"aria-valuetext": y ? v : void 0,
+		className: o(T("root"), E.size[s].className, e),
+		"data-stale": c ? "true" : void 0,
+		"data-tone": A(f, h),
+		role: g ? y ? "meter" : "img" : void 0,
+		children: [
+			f === null ? null : /* @__PURE__ */ p("span", {
+				className: T("fill"),
+				"data-part": "fill",
+				style: { inlineSize: `${j(f)}%` }
+			}),
+			b === null ? null : /* @__PURE__ */ p("span", {
+				className: T("projection"),
+				"data-part": "projection",
+				style: {
+					inlineSize: `${b.length}%`,
+					insetInlineStart: `${b.start}%`
+				}
+			}),
+			/* @__PURE__ */ p("span", {
+				className: T("near"),
+				"data-part": "near",
+				style: { insetInlineStart: `min(${j(h)}%, 100% - 1px)` }
+			})
+		]
+	});
+}, ne = {
 	root: "rly_Notice-module__root",
 	neutral: "rly_Notice-module__neutral",
 	positive: "rly_Notice-module__positive",
@@ -61,9 +158,9 @@ var h = {
 	lead: "rly_Notice-module__lead",
 	message: "rly_Notice-module__message",
 	action: "rly_Notice-module__action"
-}, x = (e) => i(b, e), S = a({ tone: {
+}, N = (e) => i(ne, e), P = a({ tone: {
 	neutral: {
-		className: x("neutral"),
+		className: N("neutral"),
 		purpose: "Neutral context",
 		tokens: [
 			"color-text-2",
@@ -72,58 +169,58 @@ var h = {
 		]
 	},
 	positive: {
-		className: x("positive"),
+		className: N("positive"),
 		purpose: "Completed outcome",
 		tokens: ["color-success-ink", "color-success-tint"]
 	},
 	critical: {
-		className: x("critical"),
+		className: N("critical"),
 		purpose: "Failure that needs attention",
 		tokens: ["color-blocked-ink", "color-blocked-tint"]
 	},
 	caution: {
-		className: x("caution"),
+		className: N("caution"),
 		purpose: "Limitation or warning",
 		tokens: ["color-held-ink", "color-held-tint"]
 	},
 	progress: {
-		className: x("progress"),
+		className: N("progress"),
 		purpose: "Work in progress",
 		tokens: ["color-deploying-ink", "color-deploying-tint"]
 	}
-} }), C = a({ tone: "neutral" }), w = {
+} }), F = a({ tone: "neutral" }), I = {
 	neutral: void 0,
 	positive: "check",
 	critical: "alert",
 	caution: "clock",
 	progress: "loader"
-}, T = ({ action: e, announce: t = "off", children: r, className: i, icon: a, tone: s = "neutral", ...c }) => {
-	let l = a ?? w[s], u = t === "assertive" ? "alert" : t === "polite" ? "status" : c.role;
+}, re = ({ action: e, announce: t = "off", children: r, className: i, icon: a, tone: s = "neutral", ...c }) => {
+	let l = a ?? I[s], u = t === "assertive" ? "alert" : t === "polite" ? "status" : c.role;
 	return /* @__PURE__ */ m("div", {
 		...c,
 		"aria-live": t === "off" ? void 0 : t,
-		className: o(x("root"), S.tone[s].className, i),
+		className: o(N("root"), P.tone[s].className, i),
 		role: u,
 		children: [/* @__PURE__ */ m("div", {
-			className: x("lead"),
+			className: N("lead"),
 			children: [l === void 0 ? null : /* @__PURE__ */ p("span", {
 				"aria-hidden": "true",
-				className: x("icon"),
+				className: N("icon"),
 				children: /* @__PURE__ */ p(n, {
 					decorative: !0,
 					name: l,
 					size: "small"
 				})
 			}), /* @__PURE__ */ p("div", {
-				className: x("message"),
+				className: N("message"),
 				children: r
 			})]
 		}), e === void 0 ? null : /* @__PURE__ */ p("div", {
-			className: x("action"),
+			className: N("action"),
 			children: e
 		})]
 	});
-}, E = {
+}, ie = {
 	root: "rly_Surface-module__root",
 	tonePrimary: "rly_Surface-module__tonePrimary",
 	toneSecondary: "rly_Surface-module__toneSecondary",
@@ -134,76 +231,76 @@ var h = {
 	paddingCompact: "rly_Surface-module__paddingCompact",
 	paddingDefault: "rly_Surface-module__paddingDefault",
 	paddingSpacious: "rly_Surface-module__paddingSpacious"
-}, D = (e) => i(E, e), O = a({
+}, L = (e) => i(ie, e), R = a({
 	tone: {
 		primary: {
-			className: D("tonePrimary"),
+			className: L("tonePrimary"),
 			purpose: "Primary bordered surface",
 			tokens: ["color-surface-1", "color-border-1"]
 		},
 		secondary: {
-			className: D("toneSecondary"),
+			className: L("toneSecondary"),
 			purpose: "Quiet secondary surface",
 			tokens: ["color-surface-2"]
 		},
 		tertiary: {
-			className: D("toneTertiary"),
+			className: L("toneTertiary"),
 			purpose: "Inset tertiary surface",
 			tokens: ["color-surface-3"]
 		}
 	},
 	form: {
 		card: {
-			className: D("shapeCard"),
+			className: L("shapeCard"),
 			purpose: "Standard card geometry",
 			tokens: ["radius-control"]
 		},
 		grouped: {
-			className: D("shapeGrouped"),
+			className: L("shapeGrouped"),
 			purpose: "Grouped content geometry",
 			tokens: ["radius-group"]
 		}
 	},
 	padding: {
 		none: {
-			className: D("paddingNone"),
+			className: L("paddingNone"),
 			purpose: "Caller-owned internal layout",
 			tokens: ["space-0"]
 		},
 		compact: {
-			className: D("paddingCompact"),
+			className: L("paddingCompact"),
 			purpose: "Dense supporting content",
 			tokens: ["space-16"]
 		},
 		default: {
-			className: D("paddingDefault"),
+			className: L("paddingDefault"),
 			purpose: "Standard content",
 			tokens: ["space-24"]
 		},
 		spacious: {
-			className: D("paddingSpacious"),
+			className: L("paddingSpacious"),
 			purpose: "Prominent grouped content",
 			tokens: ["space-32"]
 		}
 	}
-}), k = a({
+}), ae = a({
 	tone: "primary",
 	form: "card",
 	padding: "default"
-}), A = ({ as: e, children: t, className: n, form: r = "card", padding: i = "default", ref: a, tone: s = "primary", ...c }) => d(e ?? "div", {
+}), z = ({ as: e, children: t, className: n, form: r = "card", padding: i = "default", ref: a, tone: s = "primary", ...c }) => d(e ?? "div", {
 	...c,
-	className: o(D("root"), O.tone[s].className, O.form[r].className, O.padding[i].className, n),
+	className: o(L("root"), R.tone[s].className, R.form[r].className, R.padding[i].className, n),
 	ref: a
-}, t), j = {
+}, t), B = {
 	root: "rly_Tabs-module__root",
 	list: "rly_Tabs-module__list",
 	trigger: "rly_Tabs-module__trigger",
 	defaultSize: "rly_Tabs-module__defaultSize",
 	large: "rly_Tabs-module__large",
 	panel: "rly_Tabs-module__panel"
-}, M = (e) => i(j, e), N = a({ size: {
+}, V = (e) => i(B, e), H = a({ size: {
 	default: {
-		className: M("defaultSize"),
+		className: V("defaultSize"),
 		purpose: "Standard section navigation",
 		tokens: [
 			"type-label",
@@ -212,11 +309,11 @@ var h = {
 		]
 	},
 	large: {
-		className: M("large"),
+		className: V("large"),
 		purpose: "Prominent page-level navigation",
 		tokens: ["type-body", "space-48"]
 	}
-} }), P = a({ size: "default" }), F = (e) => {
+} }), U = a({ size: "default" }), W = (e) => {
 	if (e.length === 0) throw Error("Tabs items must contain at least one enabled tab");
 	let t = /* @__PURE__ */ new Set(), n;
 	for (let i of e) {
@@ -226,8 +323,8 @@ var h = {
 	}
 	if (n === void 0) throw Error("Tabs items must contain at least one enabled tab");
 	return n;
-}, I = ({ "aria-label": e, className: t, defaultValue: n, direction: i, items: a, onValueChange: s, ref: c, size: l = "default", value: f, ...h }) => {
-	let g = r(e, "Tabs aria-label"), _ = F(a), v = f ?? n ?? _.value, y = a.find((e) => e.value === v);
+}, G = ({ "aria-label": e, className: t, defaultValue: n, direction: i, items: a, onValueChange: s, ref: c, size: l = "default", value: f, ...h }) => {
+	let g = r(e, "Tabs aria-label"), _ = W(a), v = f ?? n ?? _.value, y = a.find((e) => e.value === v);
 	if (y === void 0 || y.disabled) throw Error(`Tabs selected value must identify an enabled tab: ${v}`);
 	let b = f === void 0 ? s === void 0 ? { defaultValue: v } : {
 		defaultValue: v,
@@ -241,28 +338,28 @@ var h = {
 		...b,
 		...x,
 		activationMode: "automatic",
-		className: o(M("root"), N.size[l].className, t),
+		className: o(V("root"), H.size[l].className, t),
 		orientation: "horizontal",
 		ref: c,
 		children: [/* @__PURE__ */ p(u.List, {
 			"aria-label": g,
-			className: M("list"),
+			className: V("list"),
 			loop: !0,
 			children: a.map((e) => /* @__PURE__ */ p(u.Trigger, {
-				className: M("trigger"),
+				className: V("trigger"),
 				"data-tab-value": e.value,
 				disabled: e.disabled,
 				value: e.value,
 				children: e.label
 			}, e.value))
 		}), a.map((e) => /* @__PURE__ */ d(u.Content, {
-			className: M("panel"),
+			className: V("panel"),
 			...e.forceMount === void 0 ? {} : { forceMount: e.forceMount },
 			key: e.value,
 			value: e.value
 		}, e.content))]
 	});
-}, L = {
+}, K = {
 	root: "rly_Text-module__root",
 	verdict: "rly_Text-module__verdict",
 	pageTitle: "rly_Text-module__pageTitle",
@@ -277,100 +374,100 @@ var h = {
 	toneSecondary: "rly_Text-module__toneSecondary",
 	toneTertiary: "rly_Text-module__toneTertiary",
 	toneInherit: "rly_Text-module__toneInherit"
-}, R = (e) => i(L, e), z = a({
+}, q = (e) => i(K, e), J = a({
 	variant: {
 		verdict: {
-			className: R("verdict"),
+			className: q("verdict"),
 			purpose: "One restrained verdict thesis",
 			tokens: ["type-verdict"]
 		},
 		"page-title": {
-			className: R("pageTitle"),
+			className: q("pageTitle"),
 			purpose: "Primary page title",
 			tokens: ["type-page-title"]
 		},
 		"section-title": {
-			className: R("sectionTitle"),
+			className: q("sectionTitle"),
 			purpose: "Section heading",
 			tokens: ["type-section-title"]
 		},
 		"card-title": {
-			className: R("cardTitle"),
+			className: q("cardTitle"),
 			purpose: "Card or panel heading",
 			tokens: ["type-card-title"]
 		},
 		"body-large": {
-			className: R("bodyLarge"),
+			className: q("bodyLarge"),
 			purpose: "Leading explanatory copy",
 			tokens: ["type-body-large"]
 		},
 		body: {
-			className: R("body"),
+			className: q("body"),
 			purpose: "Default interface copy",
 			tokens: ["type-body"]
 		},
 		label: {
-			className: R("label"),
+			className: q("label"),
 			purpose: "Control and metadata labels",
 			tokens: ["type-label"]
 		},
 		meta: {
-			className: R("meta"),
+			className: q("meta"),
 			purpose: "Supporting metadata",
 			tokens: ["type-meta"]
 		},
 		code: {
-			className: R("code"),
+			className: q("code"),
 			purpose: "Code and tabular data",
 			tokens: ["type-code"]
 		}
 	},
 	tone: {
 		primary: {
-			className: R("tonePrimary"),
+			className: q("tonePrimary"),
 			purpose: "Primary readable text",
 			tokens: ["color-text-1"]
 		},
 		secondary: {
-			className: R("toneSecondary"),
+			className: q("toneSecondary"),
 			purpose: "Supporting text",
 			tokens: ["color-text-2"]
 		},
 		tertiary: {
-			className: R("toneTertiary"),
+			className: q("toneTertiary"),
 			purpose: "Restricted tertiary text",
 			tokens: ["color-text-3"]
 		},
 		inherit: {
-			className: R("toneInherit"),
+			className: q("toneInherit"),
 			purpose: "Inherit semantic context",
 			tokens: []
 		}
 	}
-}), B = a({
+}), Y = a({
 	variant: "body",
 	tone: "primary"
-}), V = (e) => e === "code" ? "code" : e === "verdict" ? "p" : e === "label" || e === "meta" ? "span" : "p", H = ({ as: e, children: t, className: n, ref: r, tone: i = B.tone, variant: a = B.variant, ...s }) => d(e ?? V(a), {
+}), oe = (e) => e === "code" ? "code" : e === "verdict" ? "p" : e === "label" || e === "meta" ? "span" : "p", se = ({ as: e, children: t, className: n, ref: r, tone: i = Y.tone, variant: a = Y.variant, ...s }) => d(e ?? oe(a), {
 	...s,
-	className: o(R("root"), z.variant[a].className, z.tone[i].className, n),
+	className: o(q("root"), J.variant[a].className, J.tone[i].className, n),
 	ref: r
-}, t), U = { intrinsic: "rly_ThemeSelect-module__intrinsic" }, W = {
+}, t), ce = { intrinsic: "rly_ThemeSelect-module__intrinsic" }, le = {
 	system: "System",
 	light: "Light",
 	dark: "Dark"
-}, G = t.map((e) => ({
-	label: W[e],
+}, X = t.map((e) => ({
+	label: le[e],
 	value: e
-})), K = ({ className: t, label: n = "Appearance", labelVisibility: r = "visible", onValueChange: a, size: l = "compact", value: u }) => {
+})), ue = ({ className: t, label: n = "Appearance", labelVisibility: r = "visible", onValueChange: a, size: l = "compact", value: u }) => {
 	let d = (t) => {
 		let n = e(t);
 		n !== void 0 && a(n);
 	};
 	return r === "hidden" ? /* @__PURE__ */ p(s, {
 		"aria-label": n,
-		className: o(i(U, "intrinsic"), t),
+		className: o(i(ce, "intrinsic"), t),
 		onValueChange: d,
-		options: G,
+		options: X,
 		size: l,
 		value: u
 	}) : /* @__PURE__ */ p(c, {
@@ -380,19 +477,19 @@ var h = {
 		children: (e) => /* @__PURE__ */ p(s, {
 			...e,
 			onValueChange: d,
-			options: G,
+			options: X,
 			size: l,
 			value: u
 		})
 	});
-}, q = {
+}, de = {
 	root: "rly_ToggleGroup-module__root",
 	item: "rly_ToggleGroup-module__item",
 	defaultSize: "rly_ToggleGroup-module__defaultSize",
 	compact: "rly_ToggleGroup-module__compact"
-}, J = (e) => i(q, e), Y = a({ size: {
+}, Z = (e) => i(de, e), Q = a({ size: {
 	compact: {
-		className: J("compact"),
+		className: Z("compact"),
 		purpose: "Dense filter rows beside other controls",
 		tokens: [
 			"type-meta",
@@ -401,7 +498,7 @@ var h = {
 		]
 	},
 	default: {
-		className: J("defaultSize"),
+		className: Z("defaultSize"),
 		purpose: "Standard view and filter choices",
 		tokens: [
 			"type-label",
@@ -409,7 +506,7 @@ var h = {
 			"space-2"
 		]
 	}
-} }), X = a({ size: "default" }), Z = (e) => e === "ArrowLeft" || e === "ArrowUp" ? -1 : e === "ArrowRight" || e === "ArrowDown" ? 1 : null, Q = (e, t) => {
+} }), fe = a({ size: "default" }), pe = (e) => e === "ArrowLeft" || e === "ArrowUp" ? -1 : e === "ArrowRight" || e === "ArrowDown" ? 1 : null, me = (e, t) => {
 	let n = /* @__PURE__ */ new Set();
 	for (let t of e) {
 		let e = r(t.value, "ToggleGroup item value");
@@ -417,11 +514,11 @@ var h = {
 		n.add(e);
 	}
 	if (!n.has(t)) throw Error(`ToggleGroup value must identify an option: ${t}`);
-}, $ = ({ "aria-label": e, className: t, items: n, onValueChange: i, ref: a, size: s = "default", value: c, ...u }) => {
+}, he = ({ "aria-label": e, className: t, items: n, onValueChange: i, ref: a, size: s = "default", value: c, ...u }) => {
 	let d = r(e, "ToggleGroup aria-label");
-	Q(n, c);
+	me(n, c);
 	let m = f(/* @__PURE__ */ new Map()), h = (e, t) => {
-		let r = Z(e.key);
+		let r = pe(e.key);
 		if (r === null) return;
 		e.preventDefault();
 		let a = n[(t + r + n.length) % n.length];
@@ -430,14 +527,14 @@ var h = {
 	return /* @__PURE__ */ p(l.Root, {
 		...u,
 		"aria-label": d,
-		className: o(J("root"), Y.size[s].className, t),
+		className: o(Z("root"), Q.size[s].className, t),
 		loop: !0,
 		onValueChange: i,
 		orientation: "horizontal",
 		ref: a,
 		value: c,
 		children: n.map((e, t) => /* @__PURE__ */ p(l.Item, {
-			className: J("item"),
+			className: Z("item"),
 			onKeyDown: (e) => h(e, t),
 			ref: (t) => {
 				t === null ? m.current.delete(e.value) : m.current.set(e.value, t);
@@ -446,8 +543,41 @@ var h = {
 			children: e.label
 		}, e.value))
 	});
+}, ge = {
+	root: "rly_TrackKey-module__root",
+	item: "rly_TrackKey-module__item",
+	near: "rly_TrackKey-module__near",
+	projected: "rly_TrackKey-module__projected",
+	stale: "rly_TrackKey-module__stale",
+	unknown: "rly_TrackKey-module__unknown"
+}, $ = (e) => i(ge, e), _e = [
+	"near",
+	"projected",
+	"stale",
+	"unknown"
+], ve = ({ className: e, items: t, label: n, ...i }) => {
+	if (t.length === 0) throw Error("TrackKey needs at least one mark to explain");
+	let a = /* @__PURE__ */ new Set();
+	for (let e of t) {
+		if (a.has(e.mark)) throw Error(`TrackKey marks must be unique: ${e.mark}`);
+		a.add(e.mark);
+	}
+	return /* @__PURE__ */ p("ul", {
+		...i,
+		"aria-label": r(n, "TrackKey label"),
+		className: o($("root"), e),
+		role: "list",
+		children: t.map((e) => /* @__PURE__ */ m("li", {
+			className: $("item"),
+			children: [/* @__PURE__ */ p("span", {
+				"aria-hidden": "true",
+				className: $(e.mark),
+				"data-mark": e.mark
+			}), r(e.label, "TrackKey item label")]
+		}, e.mark))
+	});
 };
 //#endregion
-export { y as _, B as a, P as c, k as d, O as f, S as g, C as h, K as i, N as l, T as m, Y as n, z as o, A as p, $ as r, H as s, X as t, I as u, v, _ as y };
+export { te as C, _ as D, b as E, v as O, A as S, C as T, F as _, he as a, D as b, J as c, H as d, G as f, re as g, z as h, Q as i, se as l, R as m, ve as n, ue as o, ae as p, fe as r, Y as s, _e as t, U as u, P as v, ee as w, E as x, M as y };
 
-//# sourceMappingURL=primitives-CjQX0eVM.js.map
+//# sourceMappingURL=primitives-Dj-qYrUZ.js.map