@cascivo/react 0.11.1 → 0.13.0

package/README.md

@@ -407,7 +407,7 @@ routing break after adding one of these, check that the import resolves to
 - **Cta** — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
-- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
+- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row.
 - **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child

package/dist/alert-dialog/alert-dialog.js

@@ -1,15 +1,13 @@
 "use client";
 
 import e from "./alert-dialog.module.js";
-import { useId as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { useEffectPropSignal as t, useId as n, useSignalEffect as r } from "@cascivo/core";
 import { builtin as i, t as a } from "@cascivo/i18n";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { useRef as c } from "react";
 //#region ../components/src/alert-dialog/alert-dialog.tsx
 function l({ open: l, title: u, description: d, onConfirm: f, onCancel: p, labels: m, variant: h = "default" }) {
-	let g = c(null), _ = t("cascivo-alert-dialog-title"), v = t("cascivo-alert-dialog-desc"), y = n(l);
-	y.value = l;
-	let b = c(null), x = c(p);
+	let g = c(null), _ = n("cascivo-alert-dialog-title"), v = n("cascivo-alert-dialog-desc"), y = t(l), b = c(null), x = c(p);
 	x.current = p;
 	let S = c(f);
 	return S.current = f, r(() => {

package/dist/app-shell/app-shell.js

@@ -5,52 +5,53 @@ import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 import { cloneElement as c, isValidElement as l, useRef as u } from "react";
 //#region ../components/src/app-shell/app-shell.tsx
-function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g, onOpenChange: _, className: v }) {
+function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g, onOpenChange: _, className: v, ...y }) {
 	i();
-	let y = h !== void 0, b = n(h ?? g ?? !0);
-	y && (b.value = h);
-	let x = u(null), S = u(null);
-	function C(e) {
-		y || (b.value = e), _?.(e);
+	let b = h !== void 0, x = n(h ?? g ?? !0);
+	b && (x.value = h);
+	let S = u(null), C = u(null);
+	function w(e) {
+		b || (x.value = e), _?.(e);
 	}
-	function w() {
-		typeof document < "u" && (S.current = document.activeElement), C(!b.value);
+	function T() {
+		typeof document < "u" && (C.current = document.activeElement), w(!x.value);
 	}
 	r(() => {
-		y || g !== void 0 || typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(max-width: 63.999rem)").matches && (b.value = !1);
+		b || g !== void 0 || typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(max-width: 63.999rem)").matches && (x.value = !1);
 	}), r(() => {
-		if (!b.value || typeof document > "u") return;
+		if (!x.value || typeof document > "u") return;
 		let e = (e) => {
-			e.key === "Escape" && C(!1);
+			e.key === "Escape" && w(!1);
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}), r(() => {
-		let e = x.current;
-		if (e) if (b.value) e.removeAttribute("inert");
+		let e = S.current;
+		if (e) if (x.value) e.removeAttribute("inert");
 		else {
 			e.setAttribute("inert", "");
-			let t = S.current;
+			let t = C.current;
 			t && e.contains(document.activeElement) && t.focus();
 		}
 	});
-	let T = l(d) && f ? c(d, {
-		onMenuClick: w,
-		menuExpanded: b.value
+	let E = l(d) && f ? c(d, {
+		onMenuClick: T,
+		menuExpanded: x.value
 	}) : d;
 	return /* @__PURE__ */ s("div", {
 		className: t(e.shell, v),
-		"data-open": b.value,
+		"data-open": x.value,
+		...y,
 		children: [
 			/* @__PURE__ */ o("div", {
 				className: e.header,
-				children: T
+				children: E
 			}),
 			/* @__PURE__ */ s("div", {
 				className: e.body,
 				children: [f && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-					ref: x,
+					ref: S,
 					className: e.navWrapper,
-					"data-open": b.value,
+					"data-open": x.value,
 					"data-testid": "app-shell-nav",
 					children: /* @__PURE__ */ o("div", {
 						className: e.navInner,
@@ -58,10 +59,10 @@ function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g,
 					})
 				}), /* @__PURE__ */ o("div", {
 					className: e.scrim,
-					"data-open": b.value,
+					"data-open": x.value,
 					"data-testid": "app-shell-scrim",
 					"aria-hidden": "true",
-					onClick: () => C(!1)
+					onClick: () => w(!1)
 				})] }), /* @__PURE__ */ o("main", {
 					id: "cascade-main",
 					tabIndex: -1,

package/dist/badge/badge.js

@@ -1,17 +1,24 @@
 "use client";
 
 import e from "./badge.module.js";
-import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
+import { cn as t, normalizeTone as n } from "@cascivo/core";
+import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/badge/badge.tsx
-function r({ variant: r = "default", size: i = "md", className: a, children: o, ...s }) {
-	return /* @__PURE__ */ n("span", {
-		"data-variant": r,
-		"data-size": i,
-		className: t(e.badge, a),
-		...s,
-		children: o
+var i = {
+	neutral: "default",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "destructive"
+};
+function a({ variant: a = "default", size: o = "md", className: s, children: c, ...l }) {
+	return /* @__PURE__ */ r("span", {
+		"data-variant": i[n(a)] ?? a,
+		"data-size": o,
+		className: t(e.badge, s),
+		...l,
+		children: c
 	});
 }
 //#endregion
-export { r as Badge };
+export { a as Badge };

package/dist/button/button.css

@@ -1 +1 @@
-@layer cascivo.component{._button_11p57_2{justify-content:center;align-items:center;gap:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-weight:var(--cascivo-font-medium);line-height:var(--cascivo-leading-none);white-space:nowrap;cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);border-radius:var(--cascivo-button-radius,var(--cascivo-radius-control));border:1px solid #0000;display:inline-flex}._button_11p57_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._button_11p57_2:disabled{opacity:.5;opacity:var(--cascivo-disabled-opacity,.5);cursor:not-allowed;pointer-events:none}._button_11p57_2[data-size=sm]{height:var(--cascivo-control-height-sm);padding-inline:var(--cascivo-space-3);font-size:var(--cascivo-text-ui)}._button_11p57_2[data-size=md]{height:var(--cascivo-control-height-md);padding-inline:var(--cascivo-space-4);padding-block:.5rem;padding-block:--cascivo-step(2);font-size:var(--cascivo-text-ui)}._button_11p57_2[data-size=lg]{height:var(--cascivo-control-height-lg);padding-inline:var(--cascivo-space-6);font-size:var(--cascivo-text-body)}@media (pointer:coarse){._button_11p57_2[data-size=sm],._button_11p57_2[data-size=md]{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._button_11p57_2[data-variant=primary]{background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._button_11p57_2[data-variant=primary]:hover:not(:disabled){background-color:var(--cascivo-color-primary-hover)}._button_11p57_2[data-variant=primary]:active:not(:disabled){background-color:var(--cascivo-color-primary-active)}._button_11p57_2[data-variant=secondary]{background-color:var(--cascivo-color-secondary);color:var(--cascivo-color-secondary-content)}._button_11p57_2[data-variant=secondary]:hover:not(:disabled){background-color:var(--cascivo-color-secondary-hover)}._button_11p57_2[data-variant=ghost]{color:var(--cascivo-color-text);background-color:#0000}._button_11p57_2[data-variant=ghost]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._button_11p57_2[data-variant=destructive]{background-color:var(--cascivo-color-destructive);color:var(--cascivo-color-text-on-destructive)}._button_11p57_2[data-variant=destructive]:hover:not(:disabled){background-color:var(--cascivo-color-destructive-hover)}}@media (forced-colors:active){._button_11p57_2{border:1px solid buttontext}._button_11p57_2:focus-visible{outline-offset:2px;outline:2px solid highlight}._button_11p57_2:disabled{color:graytext;border-color:graytext}}
+@layer cascivo.component{._button_131qn_2{justify-content:center;align-items:center;gap:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-weight:var(--cascivo-font-medium);line-height:var(--cascivo-leading-none);white-space:nowrap;cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);border-radius:var(--cascivo-button-radius,var(--cascivo-radius-control));border:1px solid #0000;text-decoration:none;display:inline-flex}._button_131qn_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._button_131qn_2:disabled,._button_131qn_2[aria-disabled=true]{opacity:.5;opacity:var(--cascivo-disabled-opacity,.5);cursor:not-allowed;pointer-events:none}._button_131qn_2[data-size=sm]{height:var(--cascivo-control-height-sm);padding-inline:var(--cascivo-space-3);font-size:var(--cascivo-text-ui)}._button_131qn_2[data-size=md]{height:var(--cascivo-control-height-md);padding-inline:var(--cascivo-space-4);padding-block:.5rem;padding-block:--cascivo-step(2);font-size:var(--cascivo-text-ui)}._button_131qn_2[data-size=lg]{height:var(--cascivo-control-height-lg);padding-inline:var(--cascivo-space-6);font-size:var(--cascivo-text-body)}@media (pointer:coarse){._button_131qn_2[data-size=sm],._button_131qn_2[data-size=md]{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._button_131qn_2[data-variant=primary]{background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._button_131qn_2[data-variant=primary]:hover:not(:disabled){background-color:var(--cascivo-color-primary-hover)}._button_131qn_2[data-variant=primary]:active:not(:disabled){background-color:var(--cascivo-color-primary-active)}._button_131qn_2[data-variant=secondary]{background-color:var(--cascivo-color-secondary);color:var(--cascivo-color-secondary-content)}._button_131qn_2[data-variant=secondary]:hover:not(:disabled){background-color:var(--cascivo-color-secondary-hover)}._button_131qn_2[data-variant=ghost]{color:var(--cascivo-color-text);background-color:#0000}._button_131qn_2[data-variant=ghost]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._button_131qn_2[data-variant=destructive]{background-color:var(--cascivo-color-destructive);color:var(--cascivo-color-text-on-destructive)}._button_131qn_2[data-variant=destructive]:hover:not(:disabled){background-color:var(--cascivo-color-destructive-hover)}}@media (forced-colors:active){._button_131qn_2{border:1px solid buttontext}._button_131qn_2:focus-visible{outline-offset:2px;outline:2px solid highlight}._button_131qn_2:disabled{color:graytext;border-color:graytext}}

package/dist/button/button.module.js

@@ -1,6 +1,6 @@
 "use client";
 
 import './button.css';
-var e = { button: "_button_11p57_2" };
+var e = { button: "_button_131qn_2" };
 //#endregion
 export { e as default };

package/dist/card/card.css

@@ -1 +1 @@
-@layer cascivo.component{._card_16415_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_16415_2[data-padding=none]{--_card-p:0}._card_16415_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_16415_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_16415_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_16415_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_16415_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_16415_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_16415_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._title_16415_46{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_16415_55{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_16415_63{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_16415_63>*{min-inline-size:0}}
+@layer cascivo.component{._card_ssezx_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_ssezx_2:has(>._header_ssezx_12,>._content_ssezx_12,>._footer_ssezx_12){padding:0}._card_ssezx_2[data-padding=none]{--_card-p:0}._card_ssezx_2[data-padding=sm]{--_card-p:var(--cascivo-space-4);--_card-inner-p:var(--cascivo-space-4)}._card_ssezx_2[data-padding=md]{--_card-p:var(--cascivo-space-6);--_card-inner-p:var(--cascivo-space-6)}._card_ssezx_2[data-padding=lg]{--_card-p:var(--cascivo-space-8);--_card-inner-p:var(--cascivo-space-8)}._card_ssezx_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_ssezx_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_ssezx_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_ssezx_12{padding:var(--_card-inner-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._headerRow_ssezx_67{justify-content:space-between;align-items:flex-start;gap:var(--cascivo-space-3);flex-direction:row}._headerRow_ssezx_67 ._headerMain_ssezx_75{gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;display:flex}._headerRow_ssezx_67 ._headerActions_ssezx_82{align-items:center;gap:var(--cascivo-space-1);flex-shrink:0;display:flex}._title_ssezx_90{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_ssezx_12{padding:var(--_card-inner-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_ssezx_12{padding:var(--_card-inner-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_ssezx_12>*{min-inline-size:0}}

package/dist/card/card.js

@@ -2,9 +2,9 @@
 
 import e from "./card.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/card/card.tsx
-function r({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {
+function i({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {
 	return /* @__PURE__ */ n("div", {
 		"data-variant": r,
 		"data-padding": i,
@@ -13,28 +13,38 @@ function r({ variant: r = "default", padding: i = "md", className: a, children:
 		children: o
 	});
 }
-function i({ className: r, children: i, ...a }) {
-	return /* @__PURE__ */ n("div", {
-		className: t(e.header, r),
-		...a,
-		children: i
+function a({ actions: i, className: a, children: o, ...s }) {
+	return i === void 0 ? /* @__PURE__ */ n("div", {
+		className: t(e.header, a),
+		...s,
+		children: o
+	}) : /* @__PURE__ */ r("div", {
+		className: t(e.header, e.headerRow, a),
+		...s,
+		children: [/* @__PURE__ */ n("div", {
+			className: e.headerMain,
+			children: o
+		}), /* @__PURE__ */ n("div", {
+			className: e.headerActions,
+			children: i
+		})]
 	});
 }
-function a({ className: r, children: i, ...a }) {
+function o({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("h3", {
 		className: t(e.title, r),
 		...a,
 		children: i
 	});
 }
-function o({ className: r, children: i, ...a }) {
+function s({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("div", {
 		className: t(e.content, r),
 		...a,
 		children: i
 	});
 }
-function s({ className: r, children: i, ...a }) {
+function c({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ n("div", {
 		className: t(e.footer, r),
 		...a,
@@ -42,4 +52,4 @@ function s({ className: r, children: i, ...a }) {
 	});
 }
 //#endregion
-export { r as Card, o as CardContent, s as CardFooter, i as CardHeader, a as CardTitle };
+export { i as Card, s as CardContent, c as CardFooter, a as CardHeader, o as CardTitle };

package/dist/card/card.module.js

@@ -2,11 +2,14 @@
 
 import './card.css';
 var e = {
-	card: "_card_16415_2",
-	header: "_header_16415_35",
-	title: "_title_16415_46",
-	content: "_content_16415_55",
-	footer: "_footer_16415_63"
+	card: "_card_ssezx_2",
+	header: "_header_ssezx_12",
+	content: "_content_ssezx_12",
+	footer: "_footer_ssezx_12",
+	headerRow: "_headerRow_ssezx_67",
+	headerMain: "_headerMain_ssezx_75",
+	headerActions: "_headerActions_ssezx_82",
+	title: "_title_ssezx_90"
 };
 //#endregion
 export { e as default };

package/dist/checkbox/checkbox.js

@@ -1,13 +1,13 @@
 "use client";
 
 import e from "./checkbox.module.js";
-import { cn as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { cn as t, useEffectPropSignal as n, useSignalEffect as r } from "@cascivo/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useRef as o } from "react";
 //#region ../components/src/checkbox/checkbox.tsx
 function s({ label: s, indeterminate: c = !1, className: l, id: u, disabled: d, ...f }) {
 	let p = o(null), m = n(c);
-	m.value = c, r(() => {
+	r(() => {
 		p.current && (p.current.indeterminate = m.value);
 	});
 	let h = u ?? (s ? `cascade-checkbox-${s.toLowerCase().replace(/\s+/g, "-")}` : void 0);

package/dist/combobox/combobox.css

@@ -1 +1 @@
-@layer cascivo.component{._wrapper_bi94t_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex;position:relative}._label_bi94t_10{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._field_bi94t_16{align-items:center;display:flex;position:relative}._trigger_bi94t_22{inline-size:100%;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;justify-content:space-between;align-items:center;display:flex}._trigger_bi94t_22:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_bi94t_22:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_bi94t_22:disabled{opacity:.5;cursor:not-allowed}._wrapper_bi94t_2[data-size=sm] ._trigger_bi94t_22{block-size:2rem}._wrapper_bi94t_2[data-size=md] ._trigger_bi94t_22{block-size:2.5rem}._wrapper_bi94t_2[data-size=lg] ._trigger_bi94t_22{block-size:3rem}._wrapper_bi94t_2[data-state=error] ._trigger_bi94t_22{border-color:var(--cascivo-color-danger)}._value_bi94t_70{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._placeholder_bi94t_76{color:var(--cascivo-color-text-subtle)}._chevron_bi94t_80{border-inline-end:2px solid var(--cascivo-color-text-muted);border-block-end:2px solid var(--cascivo-color-text-muted);block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);display:inline-block;transform:rotate(45deg)}._wrapper_bi94t_2[data-state=open] ._chevron_bi94t_80{transform:rotate(-135deg)}._clear_bi94t_96{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_bi94t_96:hover{color:var(--cascivo-color-text)}._clear_bi94t_96:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._listbox_bi94t_122{inline-size:100%;z-index:var(--cascivo-z-dropdown);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);max-block-size:16rem;box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;overflow-y:auto;translate:0 -.25rem}._listbox_bi94t_122[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._listbox_bi94t_122[data-state=open]{opacity:0;translate:0 -.25rem}}._searchWrapper_bi94t_156{padding:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border)}._search_bi94t_156{inline-size:100%;padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);outline:none}._search_bi94t_156:focus-visible{border-color:var(--cascivo-color-accent)}._option_bi94t_178{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-item)}._option_bi94t_178[data-state=active]{background-color:var(--cascivo-color-bg-subtle)}._option_bi94t_178[aria-selected=true]{background-color:color-mix(in srgb, var(--cascivo-color-accent) 12%, transparent);color:var(--cascivo-color-accent)}._option_bi94t_178[data-disabled]{opacity:.4;cursor:not-allowed}._empty_bi94t_201{padding:var(--cascivo-space-4);text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted)}._error_bi94t_208{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_bi94t_213{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}
+@layer cascivo.component{._wrapper_11nor_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex;position:relative}._label_11nor_14{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._field_11nor_20{align-items:center;display:flex;position:relative}._trigger_11nor_26{inline-size:100%;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;justify-content:space-between;align-items:center;display:flex}._trigger_11nor_26:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_11nor_26:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_11nor_26:disabled{opacity:.5;cursor:not-allowed}._wrapper_11nor_2[data-size=sm] ._trigger_11nor_26{block-size:2rem}._wrapper_11nor_2[data-size=md] ._trigger_11nor_26{block-size:2.5rem}._wrapper_11nor_2[data-size=lg] ._trigger_11nor_26{block-size:3rem}._wrapper_11nor_2[data-state=error] ._trigger_11nor_26{border-color:var(--cascivo-color-danger)}._value_11nor_74{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._placeholder_11nor_80{color:var(--cascivo-color-text-subtle)}._chevron_11nor_84{border-inline-end:2px solid var(--cascivo-color-text-muted);border-block-end:2px solid var(--cascivo-color-text-muted);block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);display:inline-block;transform:rotate(45deg)}._wrapper_11nor_2[data-state=open] ._chevron_11nor_84{transform:rotate(-135deg)}._clear_11nor_100{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_11nor_100:hover{color:var(--cascivo-color-text)}._clear_11nor_100:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._listbox_11nor_126{inline-size:100%;z-index:var(--cascivo-z-dropdown);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);max-block-size:16rem;box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;overflow-y:auto;translate:0 -.25rem}._listbox_11nor_126[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._listbox_11nor_126[data-state=open]{opacity:0;translate:0 -.25rem}}._searchWrapper_11nor_160{padding:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border)}._search_11nor_160{inline-size:100%;padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);outline:none}._search_11nor_160:focus-visible{border-color:var(--cascivo-color-accent)}._option_11nor_182{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-item)}._option_11nor_182[data-state=active]{background-color:var(--cascivo-color-bg-subtle)}._option_11nor_182[aria-selected=true]{background-color:color-mix(in srgb, var(--cascivo-color-accent) 12%, transparent);color:var(--cascivo-color-accent)}._option_11nor_182[data-disabled]{opacity:.4;cursor:not-allowed}._empty_11nor_205{padding:var(--cascivo-space-4);text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted)}._error_11nor_212{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_11nor_217{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

package/dist/combobox/combobox.module.js

@@ -2,21 +2,21 @@
 
 import './combobox.css';
 var e = {
-	wrapper: "_wrapper_bi94t_2",
-	label: "_label_bi94t_10",
-	field: "_field_bi94t_16",
-	trigger: "_trigger_bi94t_22",
-	value: "_value_bi94t_70",
-	placeholder: "_placeholder_bi94t_76",
-	chevron: "_chevron_bi94t_80",
-	clear: "_clear_bi94t_96",
-	listbox: "_listbox_bi94t_122",
-	searchWrapper: "_searchWrapper_bi94t_156",
-	search: "_search_bi94t_156",
-	option: "_option_bi94t_178",
-	empty: "_empty_bi94t_201",
-	error: "_error_bi94t_208",
-	hint: "_hint_bi94t_213"
+	wrapper: "_wrapper_11nor_2",
+	label: "_label_11nor_14",
+	field: "_field_11nor_20",
+	trigger: "_trigger_11nor_26",
+	value: "_value_11nor_74",
+	placeholder: "_placeholder_11nor_80",
+	chevron: "_chevron_11nor_84",
+	clear: "_clear_11nor_100",
+	listbox: "_listbox_11nor_126",
+	searchWrapper: "_searchWrapper_11nor_160",
+	search: "_search_11nor_160",
+	option: "_option_11nor_182",
+	empty: "_empty_11nor_205",
+	error: "_error_11nor_212",
+	hint: "_hint_11nor_217"
 };
 //#endregion
 export { e as default };

package/dist/command-menu/command-menu.js

@@ -3,10 +3,10 @@
 import { Spinner as e } from "../spinner/spinner.js";
 import { Kbd as t } from "../kbd/kbd.js";
 import n from "./command-menu.module.js";
-import { batch as r, cn as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { batch as r, cn as i, useEffectPropSignal as a, useSignal as o, useSignalEffect as s, useSignals as ee } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useId as ee, useRef as f } from "react";
+import { useId as te, useRef as f } from "react";
 //#region ../components/src/command-menu/command-menu.tsx
 function p(e, t) {
 	if (e.length === 0) return {
@@ -66,46 +66,42 @@ function _(e, t) {
 	}
 	return null;
 }
-function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b, hotkey: x = !0, label: S, loading: C = !1, onQueryChange: w, scopes: T = [], className: E }) {
-	s();
-	let D = S ?? l(c.commandMenu.label), ne = b ?? l(c.commandMenu.empty), O = ee(), k = `${O}-listbox`, A = f(null), j = f(null), M = f([]), N = f(v);
-	N.current = v;
-	let P = f(w);
-	P.current = w;
-	let F = a(m);
-	F.value = m;
-	let I = a(x);
-	I.value = x;
-	let L = a(""), R = a(0), z = a([]), B = a(null), re = z.value.at(-1)?.groups ?? te, ie = y ?? z.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = T.find((e) => e.id === B.value) ?? null, H = re.filter((e) => !B.value || !e.scope || e.scope === B.value).map((e) => ({
+function v({ open: m, onOpenChange: v, groups: ne, placeholder: re, emptyLabel: ie, hotkey: y = !0, label: b, loading: x = !1, onQueryChange: S, scopes: C = [], className: ae }) {
+	ee();
+	let w = b ?? l(c.commandMenu.label), T = ie ?? l(c.commandMenu.empty), E = te(), D = `${E}-listbox`, O = f(null), k = f(null), A = f([]), j = f(v);
+	j.current = v;
+	let M = f(S);
+	M.current = S;
+	let N = a(m), P = a(y), F = o(""), I = o(0), L = o([]), R = o(null), z = L.value.at(-1)?.groups ?? ne, B = re ?? L.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = C.find((e) => e.id === R.value) ?? null, H = z.filter((e) => !R.value || !e.scope || e.scope === R.value).map((e) => ({
 		heading: e.heading,
 		items: e.items.map((e) => ({
 			item: e,
-			score: h(L.value, e)
+			score: h(F.value, e)
 		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => ({
 			item: e,
-			indices: p(L.value, e.label)?.indices ?? []
+			indices: p(F.value, e.label)?.indices ?? []
 		}))
-	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(R.value) ? R.value : W[0] ?? -1, K = (e) => `${O}-option-${e}`;
-	o(() => {
-		let e = A.current;
-		e && (F.value ? e.open || (r(() => {
-			L.value = "", R.value = 0, z.value = [], B.value = null;
-		}), typeof e.showModal == "function" && e.showModal(), j.current?.focus()) : e.open && (z.value = [], e.close()));
-	}), o(() => {
-		let e = A.current;
+	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(I.value) ? I.value : W[0] ?? -1, K = (e) => `${E}-option-${e}`;
+	s(() => {
+		let e = O.current;
+		e && (N.value ? e.open || (r(() => {
+			F.value = "", I.value = 0, L.value = [], R.value = null;
+		}), typeof e.showModal == "function" && e.showModal(), k.current?.focus()) : e.open && (L.value = [], e.close()));
+	}), s(() => {
+		let e = O.current;
 		if (!e) return;
-		let t = () => N.current(!1);
+		let t = () => j.current(!1);
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
-	}), o(() => {
-		if (!I.value) return;
+	}), s(() => {
+		if (!P.value) return;
 		let e = (e) => {
-			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), N.current(!F.value));
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), j.current(!N.value));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	});
 	let q = (e) => {
-		R.value = e;
-		let t = M.current[e];
+		I.value = e;
+		let t = A.current[e];
 		t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
 	}, J = (e) => {
 		if (W.length === 0) return;
@@ -118,7 +114,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 			if (e.page) {
 				if (t === "secondary") return;
 				r(() => {
-					z.value = [...z.value, e.page], L.value = "", R.value = 0;
+					L.value = [...L.value, e.page], F.value = "", I.value = 0;
 				});
 				return;
 			}
@@ -129,21 +125,21 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 			}
 			t !== "secondary" && (e.onSelect?.(), v(!1));
 		}
-	}, ae = (e) => {
-		if (T.length === 0) return;
-		let t = [null, ...T.map((e) => e.id)], n = t[(t.indexOf(B.value) + e + t.length) % t.length];
+	}, oe = (e) => {
+		if (C.length === 0) return;
+		let t = [null, ...C.map((e) => e.id)], n = t[(t.indexOf(R.value) + e + t.length) % t.length];
 		r(() => {
-			B.value = n ?? null, R.value = 0;
+			R.value = n ?? null, I.value = 0;
 		});
 	}, Z = () => {
 		r(() => {
-			B.value = null, R.value = 0;
-		}), j.current?.focus();
+			R.value = null, I.value = 0;
+		}), k.current?.focus();
 	}, Q = () => {
 		r(() => {
-			z.value = z.value.slice(0, -1), L.value = "", R.value = 0;
+			L.value = L.value.slice(0, -1), F.value = "", I.value = 0;
 		});
-	}, oe = (e) => {
+	}, se = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), J(1);
@@ -152,7 +148,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 				e.preventDefault(), J(-1);
 				break;
 			case "Tab":
-				T.length > 0 && (e.preventDefault(), ae(e.shiftKey ? -1 : 1));
+				C.length > 0 && (e.preventDefault(), oe(e.shiftKey ? -1 : 1));
 				break;
 			case "Home":
 				e.preventDefault(), W[0] !== void 0 && q(W[0]);
@@ -167,20 +163,20 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 				e.preventDefault(), G >= 0 && X(U[G], e.metaKey || e.ctrlKey ? "secondary" : "primary");
 				break;
 			case "Backspace":
-				L.value === "" && (z.value.length > 0 ? (e.preventDefault(), Q()) : B.value && (e.preventDefault(), Z()));
+				F.value === "" && (L.value.length > 0 ? (e.preventDefault(), Q()) : R.value && (e.preventDefault(), Z()));
 				break;
 		}
-	}, se = (e) => {
-		e.key === "Escape" && (e.preventDefault(), z.value.length > 0 ? Q() : A.current?.close());
 	}, ce = (e) => {
-		e.target === A.current && A.current?.close();
+		e.key === "Escape" && (e.preventDefault(), L.value.length > 0 ? Q() : O.current?.close());
+	}, le = (e) => {
+		e.target === O.current && O.current?.close();
 	}, $ = -1;
 	return /* @__PURE__ */ u("dialog", {
-		ref: A,
-		"aria-label": D,
-		className: i(n.dialog, E),
-		onClick: ce,
-		onKeyDown: se,
+		ref: O,
+		"aria-label": w,
+		className: i(n.dialog, ae),
+		onClick: le,
+		onKeyDown: ce,
 		children: /* @__PURE__ */ d("div", {
 			className: n.panel,
 			children: [
@@ -231,44 +227,44 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 							})]
 						}),
 						/* @__PURE__ */ u("input", {
-							ref: j,
+							ref: k,
 							type: "text",
 							role: "combobox",
 							"aria-expanded": "true",
-							"aria-controls": k,
+							"aria-controls": D,
 							"aria-activedescendant": G >= 0 ? K(G) : void 0,
 							"aria-autocomplete": "list",
-							"aria-label": D,
+							"aria-label": w,
 							autoComplete: "off",
 							spellCheck: !1,
 							className: n.input,
-							placeholder: ie,
-							value: L.value,
+							placeholder: B,
+							value: F.value,
 							onChange: (e) => {
 								let t = e.target.value;
-								if (!B.value && T.length > 0) {
-									let e = _(t, T);
-									e && (B.value = e.scope.id, t = e.rest);
+								if (!R.value && C.length > 0) {
+									let e = _(t, C);
+									e && (R.value = e.scope.id, t = e.rest);
 								}
-								L.value = t, R.value = 0, P.current?.(t);
+								F.value = t, I.value = 0, M.current?.(t);
 							},
-							onKeyDown: oe
+							onKeyDown: se
 						})
 					]
 				}),
-				T.length > 0 && /* @__PURE__ */ d("div", {
+				C.length > 0 && /* @__PURE__ */ d("div", {
 					className: n.scopes,
 					children: [/* @__PURE__ */ u("span", {
 						className: n.scopesLabel,
 						children: l(c.commandMenu.scopeLabel)
-					}), T.map((e) => /* @__PURE__ */ d("button", {
+					}), C.map((e) => /* @__PURE__ */ d("button", {
 						type: "button",
 						className: n.scopePill,
-						"data-active": e.id === B.value || void 0,
+						"data-active": e.id === R.value || void 0,
 						onClick: () => {
 							r(() => {
-								B.value = B.value === e.id ? null : e.id, R.value = 0;
-							}), j.current?.focus();
+								R.value = R.value === e.id ? null : e.id, I.value = 0;
+							}), k.current?.focus();
 						},
 						children: [e.prefix && /* @__PURE__ */ u("span", {
 							className: n.scopePrefix,
@@ -280,8 +276,8 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 					className: n.list,
 					children: [/* @__PURE__ */ u("div", {
 						role: "listbox",
-						id: k,
-						"aria-label": S,
+						id: D,
+						"aria-label": b,
 						tabIndex: 0,
 						children: H.map((e, r) => /* @__PURE__ */ d("div", {
 							role: "group",
@@ -290,7 +286,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 							children: [e.heading && /* @__PURE__ */ d("div", {
 								className: n.heading,
 								"aria-hidden": "true",
-								children: [/* @__PURE__ */ u("span", { children: e.heading }), L.value !== "" && /* @__PURE__ */ u("span", {
+								children: [/* @__PURE__ */ u("span", { children: e.heading }), F.value !== "" && /* @__PURE__ */ u("span", {
 									className: n.count,
 									children: l(c.commandMenu.matches, { count: e.items.length })
 								})]
@@ -300,7 +296,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								let a = $;
 								return /* @__PURE__ */ d("div", {
 									ref: (e) => {
-										M.current[a] = e;
+										A.current[a] = e;
 									},
 									id: K(a),
 									role: "option",
@@ -310,7 +306,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 									"data-disabled": r.disabled || void 0,
 									className: n.option,
 									onMouseEnter: () => {
-										r.disabled || (R.value = a);
+										r.disabled || (I.value = a);
 									},
 									onClick: () => X(r, "primary"),
 									children: [
@@ -366,14 +362,14 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								}, r.id);
 							})]
 						}, e.heading ?? `group-${r}`))
-					}), U.length === 0 && (C ? /* @__PURE__ */ d("div", {
+					}), U.length === 0 && (x ? /* @__PURE__ */ d("div", {
 						role: "status",
 						className: n.empty,
 						children: [/* @__PURE__ */ u(e, { size: "sm" }), l(c.commandMenu.loading)]
 					}) : /* @__PURE__ */ u("div", {
 						role: "status",
 						className: n.empty,
-						children: ne
+						children: T
 					}))]
 				}),
 				/* @__PURE__ */ d("div", {
@@ -401,7 +397,7 @@ function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b
 								children: "↵"
 							}), " open"]
 						}),
-						T.length > 0 && /* @__PURE__ */ d("span", {
+						C.length > 0 && /* @__PURE__ */ d("span", {
 							className: n.hint,
 							children: [/* @__PURE__ */ u(t, {
 								size: "sm",