@knpkv/rly 0.8.0 → 0.10.0

package/README.md

@@ -160,10 +160,18 @@ keep the notice mounted and swap its children, because a status region reliably
 announces changes, not its own appearance. An `announce="assertive"` alert may
 announce as soon as it is inserted.
 
+Controls default to tool density. `Button`, `IconButton`, `Select`, and the
+`Field` control share `--rly-control-height-{dense,compact,default,principal}`
+(32/40/48/56px), so mixed controls in one toolbar line up. `dense` is the
+default and sizes a button to its text with a small radius; on coarse pointers
+the dense and compact heights rise to a 44px touch target. Pass
+`size="default"` or `"principal"` where an action needs more presence.
+
 `ToggleGroup` chooses one of a few peer options, such as a range or a measure,
 and is always controlled: exactly one option is on, pressing it again changes
 nothing, and arrow keys move to the next option and choose it. It renders a
-named `radiogroup`; use `size="compact"` beside other filters.
+named `radiogroup`. It is dense by default, an outlined row as tall as the dense
+controls beside it; `compact` and `default` follow the same control heights.
 
 `Tabs` items may set `forceMount: true` to retain inactive content, for example
 when printing both panels. It defaults to unmounting inactive content. Callers
@@ -177,6 +185,44 @@ state, contain and restore focus, lock document scrolling, and become
 full-screen at compact widths. Titles are always visible and required, while
 motion is governed by the central theme tokens.
 
+## Limits and chart keys
+
+`LimitTrack` shows how full a limit is on a 0–100% track: the fill is the latest
+reading, a two-tone hairline marks the near threshold (80% unless `near` says otherwise),
+a dotted extension shows a `projected` level the application computed, and a
+`stale` reading is hatched. Rly derives only the tone (`limitTrackTone`); it never
+estimates a projection. The track is decorative by default because the number sits
+beside it, so that text must also carry the age and the projection ("61%, old
+reading", "84%, about 103% at reset"). A non-finite `value` is drawn as no reading,
+and a non-finite `near` throws. No reading draws a faint full-width hatch in a dashed edge, so it
+never reads as 0%. Under forced colours the track keeps a `CanvasText` edge. Pass `decorative={false}` with a `label` and the caller's `valueText`
+to expose it as a meter instead. With `value={null}`, it is a named image whose
+accessible label combines `label` and `valueText`, without a numeric range.
+
+`TrackKey` explains the marks the tracks draw, listing only the marks in use.
+`ChartLegend` says which colour is which series, with the swatch before each label.
+Series colours are the tokens `--rly-color-series-1` to `-8` plus
+`--rly-color-series-other` for folded series. Use `rlySeriesColor(series)` in SVG
+fills, and keep an id on the same slot while it is visible. Colour is never the only
+carrier: every chart ships a labelled key and a table equivalent, and forced-colours
+mode collapses the series to `CanvasText`.
+
+```tsx
+import { ChartLegend, LimitTrack, TrackKey } from "@knpkv/rly/primitives"
+
+<p>
+  Weekly <LimitTrack projected={103} value={84} /> 84%, about 103% at reset
+</p>
+<TrackKey
+  label="What the track marks mean"
+  items={[
+    { mark: "near", label: "80%, near the limit" },
+    { mark: "projected", label: "Where it is heading at reset" }
+  ]}
+/>
+<ChartLegend label="Bookings by colour" items={[{ id: "b1", label: "RLY-142", series: 1 }]} />
+```
+
 ## Provenance and collaborators
 
 The first product patterns keep source, freshness, and human responsibility as
@@ -247,8 +293,8 @@ spark, stack, and compass. Reordering or replacing that map is a breaking
 identity change rather than a cosmetic icon update.
 
 `Verdict` stays deliberately large and neutral. The caller supplies its exact
-wording, reason, and semantic tone; tone affects only the redundant icon,
-4px rail, and restrained reason context. Rly does not infer readiness from any
+wording, reason, and semantic tone; tone affects only the redundant icon and
+the reason panel's tint and even border. Rly does not infer readiness from any
 of those values.
 
 ## Delivery stages and relationships

package/dist/{Dialog-_t9OodCK.js → Dialog-B9Ub_gMT.js}

@@ -274,11 +274,12 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	primary: "rly_Button-module__primary",
 	secondary: "rly_Button-module__secondary",
 	quiet: "rly_Button-module__quiet",
+	dense: "rly_Button-module__dense",
+	content: "rly_Button-module__content",
 	compact: "rly_Button-module__compact",
 	defaultSize: "rly_Button-module__defaultSize",
 	principal: "rly_Button-module__principal",
 	stretch: "rly_Button-module__stretch",
-	content: "rly_Button-module__content",
 	label: "rly_Button-module__label",
 	loadingContent: "rly_Button-module__loadingContent",
 	loader: "rly_Button-module__loader"
@@ -301,26 +302,31 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 		}
 	},
 	size: {
+		dense: {
+			className: z("dense"),
+			purpose: "Tool-density action sized to its text; the default",
+			tokens: ["control-height-dense", "radius-tag"]
+		},
 		compact: {
 			className: z("compact"),
 			purpose: "Dense text action",
-			tokens: ["space-40"]
+			tokens: ["control-height-compact"]
 		},
 		default: {
 			className: z("defaultSize"),
 			purpose: "Standard action",
-			tokens: ["space-48"]
+			tokens: ["control-height-default"]
 		},
 		principal: {
 			className: z("principal"),
 			purpose: "Prominent consequential action",
-			tokens: ["space-48", "space-8"]
+			tokens: ["control-height-principal", "space-8"]
 		}
 	}
 }), me = c({
 	variant: "secondary",
-	size: "default"
-}), V = ({ "aria-label": t, "aria-labelledby": n, children: r, className: i, disabled: o, leadingIcon: s, loading: c = !1, size: d = "default", stretch: f = !1, trailingIcon: p, type: m, variant: h = "secondary", ...g }) => {
+	size: "dense"
+}), V = ({ "aria-label": t, "aria-labelledby": n, children: r, className: i, disabled: o, leadingIcon: s, loading: c = !1, size: d = me.size, stretch: f = !1, trailingIcon: p, type: m, variant: h = "secondary", ...g }) => {
 	if (!l(r) && !a(r) || a(r) && r.trim().length === 0) throw Error("Button children must contain visible content");
 	return /* @__PURE__ */ C("button", {
 		...g,
@@ -373,27 +379,27 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 		neutral: {
 			className: H("neutral"),
 			purpose: "Neutral or unavailable state",
-			tokens: ["color-text-2", "color-surface-2"]
+			tokens: ["color-text-2"]
 		},
 		positive: {
 			className: H("positive"),
 			purpose: "Positive state",
-			tokens: ["color-success-ink", "color-success-tint"]
+			tokens: ["color-success-ink"]
 		},
 		critical: {
 			className: H("critical"),
 			purpose: "Critical state",
-			tokens: ["color-blocked-ink", "color-blocked-tint"]
+			tokens: ["color-blocked-ink"]
 		},
 		caution: {
 			className: H("caution"),
 			purpose: "Caution state",
-			tokens: ["color-held-ink", "color-held-tint"]
+			tokens: ["color-held-ink"]
 		},
 		progress: {
 			className: H("progress"),
 			purpose: "Work in progress",
-			tokens: ["color-deploying-ink", "color-deploying-tint"]
+			tokens: ["color-deploying-ink"]
 		}
 	},
 	size: {
@@ -420,7 +426,7 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 }, ve = ({ className: t, icon: n, label: r, size: a = "default", tone: o = "neutral", ...s }) => /* @__PURE__ */ C("span", {
 	...s,
 	className: u(H("root"), U.tone[o].className, U.size[a].className, t),
-	children: [/* @__PURE__ */ S(e, {
+	children: [n === void 0 && o === "neutral" ? null : /* @__PURE__ */ S(e, {
 		decorative: !0,
 		name: n ?? _e[o],
 		size: "small"
@@ -498,6 +504,7 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	primary: "rly_IconButton-module__primary",
 	secondary: "rly_IconButton-module__secondary",
 	quiet: "rly_IconButton-module__quiet",
+	dense: "rly_IconButton-module__dense",
 	compact: "rly_IconButton-module__compact",
 	defaultSize: "rly_IconButton-module__defaultSize",
 	principal: "rly_IconButton-module__principal"
@@ -520,26 +527,31 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 		}
 	},
 	size: {
+		dense: {
+			className: K("dense"),
+			purpose: "Tool-density icon target; the default",
+			tokens: ["control-height-dense", "radius-tag"]
+		},
 		compact: {
 			className: K("compact"),
 			purpose: "Minimum accessible icon target",
-			tokens: ["space-40", "space-4"]
+			tokens: ["control-height-compact"]
 		},
 		default: {
 			className: K("defaultSize"),
 			purpose: "Standard icon target",
-			tokens: ["space-48"]
+			tokens: ["control-height-default"]
 		},
 		principal: {
 			className: K("principal"),
 			purpose: "Prominent icon target",
-			tokens: ["space-48", "space-8"]
+			tokens: ["control-height-principal"]
 		}
 	}
 }), we = c({
 	variant: "secondary",
-	size: "default"
-}), Te = ({ className: t, disabled: n, icon: r, label: a, loading: o = !1, size: s = "default", type: c, variant: l = "secondary", ...d }) => /* @__PURE__ */ S("button", {
+	size: "dense"
+}), Te = ({ className: t, disabled: n, icon: r, label: a, loading: o = !1, size: s = we.size, type: c, variant: l = "secondary", ...d }) => /* @__PURE__ */ S("button", {
 	...d,
 	"aria-busy": o ? "true" : void 0,
 	"aria-label": i(a, "IconButton label"),
@@ -554,6 +566,7 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	})
 }), Ee = /* @__PURE__ */ new WeakSet(), De = (e) => (Ee.add(e), e), Oe = (e) => Ee.has(e), ke = {
 	trigger: "rly_Select-module__trigger",
+	dense: "rly_Select-module__dense",
 	compact: "rly_Select-module__compact",
 	defaultSize: "rly_Select-module__defaultSize",
 	triggerIcon: "rly_Select-module__triggerIcon",
@@ -563,17 +576,22 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	itemIndicator: "rly_Select-module__itemIndicator",
 	scrollButton: "rly_Select-module__scrollButton"
 }, q = (e) => o(ke, e), Ae = c({ size: {
+	dense: {
+		className: q("dense"),
+		purpose: "Tool-density selection control; the default",
+		tokens: ["control-height-dense", "radius-tag"]
+	},
 	compact: {
 		className: q("compact"),
 		purpose: "Dense form rows",
-		tokens: ["space-40", "type-meta"]
+		tokens: ["control-height-compact", "type-meta"]
 	},
 	default: {
 		className: q("defaultSize"),
 		purpose: "Standard selection control",
-		tokens: ["space-48", "type-body"]
+		tokens: ["control-height-default", "type-body"]
 	}
-} }), je = c({ size: "default" }), Me = (e, t) => {
+} }), je = c({ size: "dense" }), Me = (e, t) => {
 	if (!t && !e.some((e) => !e.disabled)) throw Error("Select options must contain at least one enabled option");
 	let n = /* @__PURE__ */ new Set();
 	for (let t of e) {
@@ -722,7 +740,6 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	critical: "rly_StatePanel-module__critical",
 	caution: "rly_StatePanel-module__caution",
 	progress: "rly_StatePanel-module__progress",
-	rail: "rly_StatePanel-module__rail",
 	icon: "rly_StatePanel-module__icon",
 	content: "rly_StatePanel-module__content",
 	title: "rly_StatePanel-module__title",
@@ -732,72 +749,66 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	neutral: {
 		className: Y("neutral"),
 		purpose: "Neutral explanatory state",
-		tokens: ["color-text-2", "color-surface-2"]
+		tokens: ["color-text-2", "color-border-2"]
 	},
 	positive: {
 		className: Y("positive"),
 		purpose: "Positive outcome",
-		tokens: ["color-success-ink", "color-success-tint"]
+		tokens: ["color-success-ink"]
 	},
 	critical: {
 		className: Y("critical"),
 		purpose: "Critical outcome requiring attention",
-		tokens: ["color-blocked-ink", "color-blocked-tint"]
+		tokens: ["color-blocked-ink"]
 	},
 	caution: {
 		className: Y("caution"),
 		purpose: "Held outcome requiring review",
-		tokens: ["color-held-ink", "color-held-tint"]
+		tokens: ["color-held-ink"]
 	},
 	progress: {
 		className: Y("progress"),
 		purpose: "Work currently in progress",
-		tokens: ["color-deploying-ink", "color-deploying-tint"]
+		tokens: ["color-deploying-ink"]
 	}
 } }), Be = c({ tone: "neutral" }), Ve = {
-	neutral: "minus",
+	neutral: void 0,
 	positive: "check",
 	critical: "alert",
 	caution: "clock",
 	progress: "loader"
 }, He = ({ action: t, announce: n = "off", className: r, description: a, icon: o, title: s, tone: c = "neutral", ...l }) => {
-	let d = n === "assertive" ? "alert" : n === "polite" ? "status" : l.role;
+	let d = n === "assertive" ? "alert" : n === "polite" ? "status" : l.role, f = o ?? Ve[c];
 	return /* @__PURE__ */ C("section", {
 		...l,
 		"aria-live": n === "off" ? void 0 : n,
 		className: u(Y("root"), ze.tone[c].className, r),
+		"data-icon": f === void 0 ? "none" : void 0,
 		role: d,
-		children: [
-			/* @__PURE__ */ S("span", {
-				"aria-hidden": "true",
-				className: Y("rail")
-			}),
-			/* @__PURE__ */ S("span", {
-				"aria-hidden": "true",
-				className: Y("icon"),
-				children: /* @__PURE__ */ S(e, {
-					decorative: !0,
-					name: o ?? Ve[c]
-				})
-			}),
-			/* @__PURE__ */ C("div", {
-				className: Y("content"),
-				children: [
-					/* @__PURE__ */ S("strong", {
-						className: Y("title"),
-						children: i(s, "StatePanel title")
-					}),
-					a === void 0 ? null : /* @__PURE__ */ S("div", {
-						className: Y("description"),
-						children: a
-					}),
-					t === void 0 ? null : /* @__PURE__ */ S("div", {
-						className: Y("action"),
-						children: t
-					})
-				]
+		children: [f === void 0 ? null : /* @__PURE__ */ S("span", {
+			"aria-hidden": "true",
+			className: Y("icon"),
+			children: /* @__PURE__ */ S(e, {
+				decorative: !0,
+				name: f
 			})
-		]
+		}), /* @__PURE__ */ C("div", {
+			className: Y("content"),
+			children: [
+				/* @__PURE__ */ S("strong", {
+					className: Y("title"),
+					children: i(s, "StatePanel title")
+				}),
+				a === void 0 ? null : /* @__PURE__ */ S("div", {
+					className: Y("description"),
+					children: a
+				}),
+				t === void 0 ? null : /* @__PURE__ */ S("div", {
+					className: Y("action"),
+					children: t
+				})
+			]
+		})]
 	});
 }, Ue = {
 	root: "rly_Field-module__root",
@@ -807,6 +818,7 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	error: "rly_Field-module__error",
 	controlSlot: "rly_Field-module__controlSlot",
 	control: "rly_Field-module__control",
+	dense: "rly_Field-module__dense",
 	compact: "rly_Field-module__compact",
 	defaultSize: "rly_Field-module__defaultSize"
 }, X = (e) => o(Ue, e), We = [
@@ -823,17 +835,22 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 	"select",
 	"textarea"
 ]), Ke = c({ size: {
+	dense: {
+		className: X("dense"),
+		purpose: "Tool-density form controls; the default",
+		tokens: ["control-height-dense", "radius-tag"]
+	},
 	compact: {
 		className: X("compact"),
 		purpose: "Dense form rows",
-		tokens: ["space-40", "type-meta"]
+		tokens: ["control-height-compact", "type-meta"]
 	},
 	default: {
 		className: X("defaultSize"),
 		purpose: "Standard form controls",
-		tokens: ["space-48", "type-label"]
+		tokens: ["control-height-default", "type-label"]
 	}
-} }), qe = c({ size: "default" }), Je = ({ children: e, className: t, controlId: n, description: o, error: c, label: l, required: d = !1, size: f = qe.size, ...p }) => {
+} }), qe = c({ size: "dense" }), Je = ({ children: e, className: t, controlId: n, description: o, error: c, label: l, required: d = !1, size: f = qe.size, ...p }) => {
 	let m = v(), h = n ?? `rly-field-${m}`, g = `${h}-label`, _ = o === void 0 ? void 0 : `${h}-description`, y = c === void 0 ? void 0 : `${h}-error`, b = {
 		"aria-describedby": [_, y].filter((e) => e !== void 0).join(" ") || void 0,
 		"aria-errormessage": y,
@@ -1015,4 +1032,4 @@ var w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = m(
 //#endregion
 export { fe as A, U as C, B as D, me as E, P as F, F as I, ne as L, re as M, A as N, se as O, ie as P, N as R, ge as S, V as T, we as _, qe as a, be as b, ze as c, Fe as d, Le as f, Te as g, Ne as h, Je as i, j, oe as k, He as l, Ae as m, $e as n, Ke as o, je as p, Qe as r, Be as s, tt as t, Ie as u, Ce as v, ve as w, G as x, xe as y, M as z };
 
-//# sourceMappingURL=Dialog-_t9OodCK.js.map
+//# sourceMappingURL=Dialog-B9Ub_gMT.js.map