@cascivo/react 0.17.1 → 1.0.0

package/dist/tags-input/tags-input.js

@@ -6,22 +6,22 @@ import { cn as n, focusElement as r, useSignal as i, useSignals as a } from "@ca
 import { builtin as o, t as s } from "@cascivo/i18n";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region ../components/src/tags-input/tags-input.tsx
-function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, disabled: h = !1, className: g, ..._ }) {
+function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, disabled: h = !1, className: g, id: _, ariaLabel: v, label: y, "aria-labelledby": b, "aria-describedby": x, "aria-invalid": S, ...C }) {
 	a();
-	let v = i(""), y = t(null);
-	function b(e) {
+	let w = i(""), T = t(null), E = v ?? y ?? (b === void 0 ? s(o.tagsInput.label) : void 0);
+	function D(e) {
 		let t = e.trim();
-		t && (m !== void 0 && u.length >= m || u.includes(t) || p && !p(t) || (d([...u, t]), v.value = ""));
+		t && (m !== void 0 && u.length >= m || u.includes(t) || p && !p(t) || (d([...u, t]), w.value = ""));
 	}
-	function x(e) {
+	function O(e) {
 		d(u.filter((t, n) => n !== e));
 	}
-	let S = f ?? s(o.tagsInput.placeholder);
+	let k = f ?? s(o.tagsInput.placeholder);
 	return /* @__PURE__ */ l("div", {
 		className: n(e.wrapper, g),
 		"data-disabled": h ? "" : void 0,
-		onClick: () => r(y.current),
-		..._,
+		onClick: () => r(T.current),
+		...C,
 		children: [u.map((t, n) => {
 			let r = p ? !p(t) : !1;
 			return /* @__PURE__ */ l("span", {
@@ -33,7 +33,7 @@ function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, di
 					"aria-label": s(o.tagsInput.remove, { tag: t }),
 					disabled: h,
 					onClick: (e) => {
-						e.stopPropagation(), x(n);
+						e.stopPropagation(), O(n);
 					},
 					children: /* @__PURE__ */ c("span", {
 						"aria-hidden": "true",
@@ -42,20 +42,24 @@ function u({ value: u, onValueChange: d, placeholder: f, validate: p, max: m, di
 				})]
 			}, n);
 		}), /* @__PURE__ */ c("input", {
-			ref: y,
+			ref: T,
 			className: e.input,
-			value: v.value,
-			"aria-label": s(o.tagsInput.label),
-			placeholder: u.length === 0 ? S : void 0,
+			value: w.value,
+			id: _,
+			"aria-labelledby": b,
+			"aria-describedby": x,
+			"aria-invalid": S,
+			"aria-label": E,
+			placeholder: u.length === 0 ? k : void 0,
 			disabled: h,
 			onChange: (e) => {
-				v.value = e.currentTarget.value;
+				w.value = e.currentTarget.value;
 			},
 			onKeyDown: (e) => {
-				e.key === "Enter" || e.key === "," ? (e.preventDefault(), b(v.value)) : e.key === "Backspace" && !v.value && x(u.length - 1);
+				e.key === "Enter" || e.key === "," ? (e.preventDefault(), D(w.value)) : e.key === "Backspace" && !w.value && O(u.length - 1);
 			},
 			onBlur: () => {
-				v.value && b(v.value);
+				w.value && D(w.value);
 			}
 		})]
 	});

package/dist/textarea/textarea.js

@@ -11,42 +11,43 @@ var s = r({
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-}), c = t(function({ label: t, hint: r, error: c, resize: l = "vertical", rows: u = 4, className: d, id: f, onFocus: p, onBlur: m, ...h }, g) {
-	let [_, v] = i(s), y = f ?? (t ? `cascade-textarea-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+}), c = t(function({ label: t, hint: r, error: c, resize: l = "vertical", rows: u = 4, ariaLabel: d, className: f, id: p, onFocus: m, onBlur: h, ...g }, _) {
+	let [v, y] = i(s), b = p ?? (t ? `cascade-textarea-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ o("div", {
-		className: n(e.wrapper, d),
-		"data-state": c ? "error" : _.value,
+		className: n(e.wrapper, f),
+		"data-state": c ? "error" : v.value,
 		"data-resize": l,
 		children: [
 			t && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: y,
+				htmlFor: b,
 				children: t
 			}),
 			/* @__PURE__ */ a("textarea", {
-				ref: g,
-				id: y,
+				ref: _,
+				id: b,
 				rows: u,
 				"aria-multiline": "true",
 				className: e.textarea,
 				"aria-invalid": c ? !0 : void 0,
-				"aria-describedby": c ? `${y}-error` : r ? `${y}-hint` : void 0,
+				"aria-describedby": c ? `${b}-error` : r ? `${b}-hint` : void 0,
 				onFocus: (e) => {
-					v("FOCUS"), p?.(e);
+					y("FOCUS"), m?.(e);
 				},
 				onBlur: (e) => {
-					v("BLUR"), m?.(e);
+					y("BLUR"), h?.(e);
 				},
-				...h
+				...g,
+				"aria-label": g["aria-label"] ?? d
 			}),
 			c && /* @__PURE__ */ a("span", {
-				id: `${y}-error`,
+				id: `${b}-error`,
 				className: e.error,
 				role: "alert",
 				children: c
 			}),
 			!c && r && /* @__PURE__ */ a("span", {
-				id: `${y}-hint`,
+				id: `${b}-hint`,
 				className: e.hint,
 				children: r
 			})

package/dist/time-picker/time-picker.js

@@ -11,18 +11,18 @@ var c = r({
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-}), l = t(function({ value: t, defaultValue: r, onValueChange: l, onChange: u, min: d, max: f, step: p, label: m, hint: h, error: g, size: _ = "md", className: v, id: y, onFocus: b, onBlur: x, ...S }, C) {
+}), l = t(function({ value: t, defaultValue: r, onValueChange: l, min: u, max: d, step: f, label: p, hint: m, error: h, size: g = "md", className: _, id: v, onFocus: y, onBlur: b, ariaLabel: x, ...S }, C) {
 	a();
-	let [w, T] = i(c), E = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	let [w, T] = i(c), E = v ?? (p ? `cascade-time-picker-${p.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ s("div", {
-		className: n(e.wrapper, v),
-		"data-state": g ? "error" : w.value,
-		"data-size": _,
+		className: n(e.wrapper, _),
+		"data-state": h ? "error" : w.value,
+		"data-size": g,
 		children: [
-			m && /* @__PURE__ */ o("label", {
+			p && /* @__PURE__ */ o("label", {
 				className: e.label,
 				htmlFor: E,
-				children: m
+				children: p
 			}),
 			/* @__PURE__ */ o("input", {
 				id: E,
@@ -30,31 +30,32 @@ var c = r({
 				className: e.input,
 				value: t,
 				defaultValue: r,
-				min: d,
-				max: f,
-				step: p,
-				"aria-invalid": g ? !0 : void 0,
-				"aria-describedby": g ? `${E}-error` : h ? `${E}-hint` : void 0,
-				onChange: (e) => (l ?? u)?.(e.target.value),
+				min: u,
+				max: d,
+				step: f,
+				"aria-invalid": h ? !0 : void 0,
+				"aria-describedby": h ? `${E}-error` : m ? `${E}-hint` : void 0,
+				onChange: (e) => l?.(e.target.value),
 				onFocus: (e) => {
-					T("FOCUS"), b?.(e);
+					T("FOCUS"), y?.(e);
 				},
 				onBlur: (e) => {
-					T("BLUR"), x?.(e);
+					T("BLUR"), b?.(e);
 				},
 				ref: C,
-				...S
+				...S,
+				"aria-label": S["aria-label"] ?? x
 			}),
-			g && /* @__PURE__ */ o("span", {
+			h && /* @__PURE__ */ o("span", {
 				id: `${E}-error`,
 				className: e.error,
 				role: "alert",
-				children: g
+				children: h
 			}),
-			!g && h && /* @__PURE__ */ o("span", {
+			!h && m && /* @__PURE__ */ o("span", {
 				id: `${E}-hint`,
 				className: e.hint,
-				children: h
+				children: m
 			})
 		]
 	});

package/dist/toggle/toggle.js

@@ -5,7 +5,7 @@ import { forwardRef as t } from "react";
 import { cn as n, createMachine as r, useMachine as i, useSignals as a } from "@cascivo/core";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/toggle/toggle.tsx
-var c = t(function({ checked: t, defaultChecked: c = !1, onValueChange: l, onChange: u, label: d, size: f = "md", className: p, disabled: m, ...h }, g) {
+var c = t(function({ checked: t, defaultChecked: c = !1, onValueChange: l, label: u, size: d = "md", className: f, disabled: p, ariaLabel: m, ...h }, g) {
 	a();
 	let [_, v] = i(r({
 		initial: c ? "on" : "off",
@@ -19,21 +19,22 @@ var c = t(function({ checked: t, defaultChecked: c = !1, onValueChange: l, onCha
 		role: "switch",
 		"aria-checked": b,
 		"data-state": b ? "on" : "off",
-		"data-size": f,
-		disabled: m,
-		className: n(e.toggle, p),
+		"data-size": d,
+		disabled: p,
+		className: n(e.toggle, f),
 		onClick: () => {
-			y || v("TOGGLE"), (l ?? u)?.(!b);
+			y || v("TOGGLE"), l?.(!b);
 		},
 		ref: g,
 		...h,
+		"aria-label": h["aria-label"] ?? m,
 		children: [/* @__PURE__ */ o("span", {
 			className: e.track,
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ o("span", { className: e.thumb })
-		}), d && /* @__PURE__ */ o("span", {
+		}), u && /* @__PURE__ */ o("span", {
 			className: e.label,
-			children: d
+			children: u
 		})]
 	});
 });

package/dist/tree-view/tree-view.js

@@ -24,88 +24,88 @@ function u(e, t) {
 function d(e) {
 	return e === void 0 ? [] : Array.isArray(e) ? e : e === "" ? [] : [e];
 }
-function f({ items: o, selectionMode: s = "single", selected: l, defaultSelected: f, onSelectChange: h, expanded: g, defaultExpanded: _, onExpandedChange: v, className: y, "aria-label": b, ariaLabel: x }) {
+function f({ items: o, selectionMode: s = "single", selected: l, defaultSelected: f, onSelectChange: h, expanded: g, defaultExpanded: _, onExpandedChange: v, className: y, "aria-label": b, ariaLabel: x, label: S }) {
 	a();
-	let [S, C] = r({
+	let [C, w] = r({
 		value: g,
 		defaultValue: _ ?? [],
 		onChange: v
-	}), [w, T] = r({
+	}), [T, E] = r({
 		value: l,
 		defaultValue: f ?? (s === "multi" ? [] : ""),
 		onChange: h
-	}), E = i(null), D = t(/* @__PURE__ */ new Map()), O = new Set(S.value), k = u(o, O), A = new Map(k.map((e, t) => [e.id, t])), j = d(w.value), M = new Set(j), N = E.value ?? j[0] ?? k[0]?.id ?? null, P = (e) => C([...e]), F = (e) => {
-		if (O.has(e)) return;
-		let t = new Set(O);
-		t.add(e), P(t);
-	}, I = (e) => {
-		if (!O.has(e)) return;
-		let t = new Set(O);
-		t.delete(e), P(t);
+	}), D = i(null), O = t(/* @__PURE__ */ new Map()), k = new Set(C.value), A = u(o, k), j = new Map(A.map((e, t) => [e.id, t])), M = d(T.value), N = new Set(M), P = D.value ?? M[0] ?? A[0]?.id ?? null, F = (e) => w([...e]), I = (e) => {
+		if (k.has(e)) return;
+		let t = new Set(k);
+		t.add(e), F(t);
 	}, L = (e) => {
-		E.value = e, D.current.get(e)?.focus();
+		if (!k.has(e)) return;
+		let t = new Set(k);
+		t.delete(e), F(t);
 	}, R = (e) => {
+		D.value = e, O.current.get(e)?.focus();
+	}, z = (e) => {
 		if (s === "multi") {
-			let t = new Set(M);
-			t.has(e) ? t.delete(e) : t.add(e), T([...t]);
-		} else T(e);
-	}, z = t({
+			let t = new Set(N);
+			t.has(e) ? t.delete(e) : t.add(e), E([...t]);
+		} else E(e);
+	}, B = t({
 		buffer: "",
 		at: 0
-	}), B = (e, t) => {
-		let n = A.get(t.id);
+	}), V = (e, t) => {
+		let n = j.get(t.id);
 		if (n === void 0) return;
-		let { hasChildren: r, level: i, parentId: a, expanded: s } = k[n];
+		let { hasChildren: r, level: i, parentId: a, expanded: s } = A[n];
 		switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
-				let t = k[n + 1];
-				t && L(t.id);
+				let t = A[n + 1];
+				t && R(t.id);
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
-				let t = k[n - 1];
-				t && L(t.id);
+				let t = A[n - 1];
+				t && R(t.id);
 				break;
 			}
 			case "ArrowRight":
-				if (e.preventDefault(), r && !s) F(t.id);
+				if (e.preventDefault(), r && !s) I(t.id);
 				else if (r && s) {
-					let e = k[n + 1];
-					e && e.level > i && L(e.id);
+					let e = A[n + 1];
+					e && e.level > i && R(e.id);
 				}
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), r && s ? I(t.id) : a && L(a);
+				e.preventDefault(), r && s ? L(t.id) : a && R(a);
 				break;
 			case "Home":
-				e.preventDefault(), k[0] && L(k[0].id);
+				e.preventDefault(), A[0] && R(A[0].id);
 				break;
 			case "End": {
 				e.preventDefault();
-				let t = k[k.length - 1];
-				t && L(t.id);
+				let t = A[A.length - 1];
+				t && R(t.id);
 				break;
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), R(t.id);
+				e.preventDefault(), z(t.id);
 				break;
 			default:
 				if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
-					let t = z.current, r = Date.now();
+					let t = B.current, r = Date.now();
 					t.buffer = r - t.at > 500 ? e.key : t.buffer + e.key, t.at = r;
-					let i = t.buffer.toLowerCase(), a = (e) => typeof e.label == "string" && e.label.toLowerCase().startsWith(i), s = p(o, O), c = [...k.slice(n + 1), ...k.slice(0, n + 1)].find((e) => {
+					let i = t.buffer.toLowerCase(), a = (e) => typeof e.label == "string" && e.label.toLowerCase().startsWith(i), s = p(o, k), c = [...A.slice(n + 1), ...A.slice(0, n + 1)].find((e) => {
 						let t = s.get(e.id);
 						return t ? a(t) : !1;
 					});
-					c && L(c.id);
+					c && R(c.id);
 				}
 				break;
 		}
-	}, V = (e, t, n, r) => {
-		let i = !!e.children && e.children.length > 0, a = O.has(e.id), o = M.has(e.id), s = N === e.id, l = e.children?.length ?? 0;
+	}, H = (e, t, n, r) => {
+		let i = !!e.children && e.children.length > 0, a = k.has(e.id), o = N.has(e.id), s = P === e.id, l = e.children?.length ?? 0;
 		return /* @__PURE__ */ c(m, {
 			node: e,
 			level: t,
@@ -115,20 +115,20 @@ function f({ items: o, selectionMode: s = "single", selected: l, defaultSelected
 			isExpanded: a,
 			isSelected: o,
 			isTabbable: s,
-			itemRefs: D,
-			onFocusNode: () => E.value = e.id,
-			onKeyDown: (t) => B(t, e),
+			itemRefs: O,
+			onFocusNode: () => D.value = e.id,
+			onKeyDown: (t) => V(t, e),
 			onActivate: () => {
-				L(e.id), i && (a ? I : F)(e.id), R(e.id);
+				R(e.id), i && (a ? L : I)(e.id), z(e.id);
 			},
-			children: i && e.children.map((e, n) => V(e, t + 1, n + 1, l))
+			children: i && e.children.map((e, n) => H(e, t + 1, n + 1, l))
 		}, e.id);
 	};
 	return /* @__PURE__ */ c("ul", {
 		role: "tree",
-		"aria-label": x ?? b,
+		"aria-label": x ?? b ?? S,
 		className: n(e.tree, y),
-		children: o.map((e, t) => V(e, 1, t + 1, o.length))
+		children: o.map((e, t) => H(e, 1, t + 1, o.length))
 	});
 }
 function p(e, t) {

package/dist/virtual-list/virtual-list.js

@@ -4,23 +4,23 @@ import e from "./virtual-list.module.js";
 import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region ../components/src/virtual-list/virtual-list.tsx
-function a({ items: a, itemHeight: o, height: s, renderItem: c, overscan: l = 3, ariaLabel: u, className: d }) {
+function a({ items: a, itemHeight: o, height: s, renderItem: c, overscan: l = 3, ariaLabel: u, label: d, className: f }) {
 	r();
-	let f = n(0), p = Math.ceil(s / o), m = Math.floor(f.value / o), h = Math.max(0, m - l), g = Math.min(a.length, m + p + l), _ = a.slice(h, g), v = (e) => {
-		f.value = e.currentTarget.scrollTop;
-	}, y = { blockSize: `${s}px` };
+	let p = n(0), m = Math.ceil(s / o), h = Math.floor(p.value / o), g = Math.max(0, h - l), _ = Math.min(a.length, h + m + l), v = a.slice(g, _), y = (e) => {
+		p.value = e.currentTarget.scrollTop;
+	}, b = { blockSize: `${s}px` };
 	return /* @__PURE__ */ i("div", {
-		className: t(e.viewport, d),
-		style: y,
-		onScroll: v,
+		className: t(e.viewport, f),
+		style: b,
+		onScroll: y,
 		role: "list",
-		"aria-label": u,
+		"aria-label": u ?? d,
 		tabIndex: 0,
 		children: /* @__PURE__ */ i("div", {
 			className: e.canvas,
 			style: { blockSize: `${a.length * o}px` },
-			children: _.map((t, n) => {
-				let r = h + n;
+			children: v.map((t, n) => {
+				let r = g + n;
 				return /* @__PURE__ */ i("div", {
 					role: "listitem",
 					"aria-setsize": a.length,

package/dist/wheel-picker/wheel-picker.js

@@ -6,71 +6,71 @@ import { cn as n, useEffectPropSignal as r, useId as i, useSignalEffect as a } f
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/wheel-picker/wheel-picker.tsx
 var c = 120;
-function l({ options: l, value: u, onValueChange: d, visibleCount: f = 5, itemHeight: p = 36, ariaLabel: m, className: h }) {
-	let g = t(null), _ = i(), v = Math.max(0, l.findIndex((e) => e.value === u)), y = t(l);
-	y.current = l;
-	let b = t(d);
-	b.current = d;
-	let x = t(p);
-	x.current = p;
-	let S = t(u);
-	S.current = u;
-	let C = (e, t) => {
-		let n = g.current;
+function l({ options: l, value: u, onValueChange: d, visibleCount: f = 5, itemHeight: p = 36, ariaLabel: m, label: h, className: g }) {
+	let _ = t(null), v = i(), y = Math.max(0, l.findIndex((e) => e.value === u)), b = t(l);
+	b.current = l;
+	let x = t(d);
+	x.current = d;
+	let S = t(p);
+	S.current = p;
+	let C = t(u);
+	C.current = u;
+	let w = (e, t) => {
+		let n = _.current;
 		n && n.scrollTo({
-			top: e * x.current,
+			top: e * S.current,
 			behavior: t ? "smooth" : "instant"
 		});
-	}, w = r(u);
+	}, T = r(u);
 	a(() => {
-		let e = w.value, t = y.current.findIndex((t) => t.value === e);
-		t >= 0 && C(t, !1);
+		let e = T.value, t = b.current.findIndex((t) => t.value === e);
+		t >= 0 && w(t, !1);
 	}), a(() => {
-		let e = g.current;
+		let e = _.current;
 		if (!e) return;
 		let t, n = () => {
 			clearTimeout(t), t = setTimeout(() => {
-				let t = Math.round(e.scrollTop / x.current), n = y.current[t];
-				n && n.value !== S.current && b.current(n.value);
+				let t = Math.round(e.scrollTop / S.current), n = b.current[t];
+				n && n.value !== C.current && x.current(n.value);
 			}, c);
 		};
 		return e.addEventListener("scroll", n, { passive: !0 }), () => {
 			clearTimeout(t), e.removeEventListener("scroll", n);
 		};
 	});
-	let T = (e) => {
+	let E = (e) => {
 		let t = Math.max(0, Math.min(l.length - 1, e)), n = l[t];
-		!n || n.value === u || (d(n.value), C(t, !0));
-	}, E = (e) => {
+		!n || n.value === u || (d(n.value), w(t, !0));
+	}, D = (e) => {
 		let t = {
-			ArrowDown: v + 1,
-			ArrowUp: v - 1,
+			ArrowDown: y + 1,
+			ArrowUp: y - 1,
 			Home: 0,
 			End: l.length - 1,
-			PageDown: v + f,
-			PageUp: v - f
+			PageDown: y + f,
+			PageUp: y - f
 		}[e.key];
-		t !== void 0 && (e.preventDefault(), T(t));
-	}, D = (f - 1) / 2 * p, O = {
+		t !== void 0 && (e.preventDefault(), E(t));
+	}, O = (f - 1) / 2 * p, k = {
 		"--_item-height": `${p}px`,
-		"--_pad": `${D}px`,
+		"--_pad": `${O}px`,
 		"--_column-height": `${f * p}px`
 	};
 	return /* @__PURE__ */ s("div", {
-		className: n(e.root, h),
-		style: O,
+		className: n(e.root, g),
+		style: k,
 		children: [/* @__PURE__ */ o("div", {
-			ref: g,
+			ref: _,
 			role: "listbox",
 			tabIndex: 0,
-			"aria-label": m,
-			"aria-activedescendant": `${_}-${v}`,
+			"aria-label": m ?? h,
+			"aria-activedescendant": `${v}-${y}`,
 			className: e.column,
-			onKeyDown: E,
+			onKeyDown: D,
 			children: l.map((t, n) => /* @__PURE__ */ o("div", {
-				id: `${_}-${n}`,
+				id: `${v}-${n}`,
 				role: "option",
-				"aria-selected": n === v,
+				"aria-selected": n === y,
 				className: e.option,
 				children: t.label
 			}, t.value))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.17.1",
+  "version": "1.0.0",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source. @cascivo/themes installs with it; pair with @cascivo/charts (data-viz) and @cascivo/icons. Docs offline: npx @cascivo/docs",
   "keywords": [
@@ -51,9 +51,9 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.17.1",
-    "@cascivo/i18n": "^0.17.1",
-    "@cascivo/themes": "^0.4.12"
+    "@cascivo/core": "^1.0.0",
+    "@cascivo/i18n": "^1.0.0",
+    "@cascivo/themes": "^1.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/readme.body.md

@@ -42,7 +42,7 @@ grayscale (`ThemeProvider` warns in dev when that happens).
 In a Server Component file (e.g. `app/layout.tsx`), import the themes once:
 
 ```tsx
-import '@cascivo/themes/all.css'
+import '@cascivo/themes/light-dark.css'
 ```
 
 Component CSS ships **per component** and is pulled in automatically when you
@@ -85,7 +85,8 @@ RSC without any extra wrapper.
 
 ```tsx
 // once, in your entry file — themes are the only global import
-import '@cascivo/themes/all.css' // tokens (once) + base typography + light & dark
+import '@cascivo/themes/light-dark.css' // tokens (once) + base typography + light & dark
+// swap for '@cascivo/themes/all.css' only if you ship a theme picker (all twelve, ~2x)
 
 // anywhere — each component brings its own CSS along
 import { Button, Card, CardContent, Toggle } from '@cascivo/react'
@@ -378,7 +379,7 @@ routing break after adding one of these, check that the import resolves to
 - **SideNav** — Collapsible sidebar navigation with optional icons and one level of grouping
 - **SkipNav** — Skip link that jumps keyboard users past the navigation to the main content
 - **Steps** — Visual progress indicator for multi-step flows with horizontal and vertical orientations
-- **Switcher** — App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers
+- **Switcher** — Always-visible app/product switcher LIST — every entry is rendered at once, it does not collapse. Lives inside HeaderPanel; renders links with an active indicator and optional dividers. For a collapsed trigger with a menu, use Dropdown.
 - **Tabs** — Switch between related panels of content
 - **Toc** — Table of contents with scroll-spy highlighting of the active section