@cascivo/react 0.3.3 → 0.3.7

package/dist/search/search.js

@@ -0,0 +1,94 @@
+"use client";
+
+import e from "./search.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l } from "react";
+//#region ../components/src/search/search.tsx
+var u = 0;
+function d() {
+	return /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("circle", {
+			cx: "7",
+			cy: "7",
+			r: "4.5"
+		}), /* @__PURE__ */ s("line", {
+			x1: "10.5",
+			y1: "10.5",
+			x2: "14",
+			y2: "14"
+		})]
+	});
+}
+function f({ value: f, defaultValue: p = "", onChange: m, onSearch: h, debounceMs: g = 300, placeholder: _, size: v = "md", label: y, disabled: b = !1, clearLabel: x, id: S, className: C }) {
+	i();
+	let w = _ ?? o(a.search.placeholder), T = y ?? o(a.search.label), E = x ?? o(a.search.clear), D = l(null), O = l("");
+	O.current === "" && (u += 1, O.current = `cascade-search-${u}`);
+	let k = S ?? O.current, A = f !== void 0, j = n(A ? f : p);
+	A && (j.value = f);
+	let M = l(h);
+	M.current = h;
+	let N = l(null), P = () => {
+		N.current !== null && (clearTimeout(N.current), N.current = null);
+	};
+	r(() => P);
+	let F = (e) => {
+		let t = e.target.value;
+		A || (j.value = t), m?.(t), P(), N.current = setTimeout(() => {
+			N.current = null, M.current?.(t);
+		}, g);
+	}, I = (e) => {
+		e.key === "Enter" && (P(), h?.(j.value));
+	}, L = () => {
+		P(), A || (j.value = ""), m?.(""), h?.(""), D.current?.focus();
+	}, R = j.value !== "";
+	return /* @__PURE__ */ c("div", {
+		className: t(e.root, C),
+		"data-size": v,
+		"data-state": R ? "filled" : "empty",
+		children: [
+			/* @__PURE__ */ s("label", {
+				className: e.label,
+				htmlFor: k,
+				children: T
+			}),
+			/* @__PURE__ */ s("span", {
+				className: e.icon,
+				children: /* @__PURE__ */ s(d, {})
+			}),
+			/* @__PURE__ */ s("input", {
+				ref: D,
+				id: k,
+				type: "search",
+				className: e.input,
+				value: j.value,
+				placeholder: w,
+				disabled: b,
+				onChange: F,
+				onKeyDown: I
+			}),
+			R && /* @__PURE__ */ s("button", {
+				type: "button",
+				className: e.clear,
+				"aria-label": E,
+				disabled: b,
+				onClick: L,
+				children: /* @__PURE__ */ s("span", {
+					"aria-hidden": "true",
+					children: "✕"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { f as Search };

package/dist/search/search.module.js

@@ -0,0 +1,12 @@
+"use client";
+
+import './search.css';
+var e = {
+	root: "_root_22xq7_2",
+	label: "_label_22xq7_28",
+	icon: "_icon_22xq7_41",
+	input: "_input_22xq7_50",
+	clear: "_clear_22xq7_96"
+};
+//#endregion
+export { e as default };

package/dist/segmented-control/segmented-control.css

@@ -0,0 +1 @@
+@layer cascivo.component{._wrapper_196gt_2{gap:var(--cascivo-space-1);padding:var(--cascivo-space-1);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);display:inline-flex}._wrapper_196gt_2[data-size=sm]{--_seg-h:1.75rem;--_seg-font:var(--cascivo-text-xs);--_seg-px:var(--cascivo-space-2)}._wrapper_196gt_2[data-size=md]{--_seg-h:2.25rem;--_seg-font:var(--cascivo-text-sm);--_seg-px:var(--cascivo-space-3)}._wrapper_196gt_2[data-size=lg]{--_seg-h:2.75rem;--_seg-font:var(--cascivo-text-base);--_seg-px:var(--cascivo-space-4)}._wrapper_196gt_2[data-disabled]{opacity:.5}._segment_196gt_33{height:var(--_seg-h,2.25rem);padding-inline:var(--_seg-px,var(--cascivo-space-3));font-family:var(--cascivo-font-sans);font-size:var(--_seg-font,var(--cascivo-text-sm));font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-item);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);white-space:nowrap;background:0 0;border:none}._segment_196gt_33:hover:not(:disabled):not([data-selected]){color:var(--cascivo-color-text);background-color:rgb(from var(--cascivo-color-text) r g b / .05)}._segment_196gt_33:focus-visible{outline:2px solid var(--cascivo-color-accent);outline-offset:1px}._segment_196gt_33[data-selected]{color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-sm)}._segment_196gt_33:disabled{cursor:not-allowed;opacity:.5}}

package/dist/segmented-control/segmented-control.js

@@ -0,0 +1,43 @@
+"use client";
+
+import e from "./segmented-control.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/segmented-control/segmented-control.tsx
+function r({ options: r, value: i, onValueChange: a, size: o = "md", disabled: s = !1, className: c, ...l }) {
+	function u(e, t) {
+		let n = r.filter((e) => !e.disabled), i = n.findIndex((e) => e.value === r[t]?.value);
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			let t = n[(i + 1) % n.length];
+			t && a(t.value);
+		} else if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			let t = n[(i - 1 + n.length) % n.length];
+			t && a(t.value);
+		}
+	}
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		className: t(e.wrapper, c),
+		"data-size": o,
+		"data-disabled": s ? "" : void 0,
+		...l,
+		children: r.map((t, r) => /* @__PURE__ */ n("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": t.value === i,
+			"data-selected": t.value === i ? "" : void 0,
+			"data-size": o,
+			className: e.segment,
+			disabled: s || t.disabled,
+			onClick: () => {
+				t.disabled || a(t.value);
+			},
+			onKeyDown: (e) => u(e, r),
+			children: t.label
+		}, t.value))
+	});
+}
+//#endregion
+export { r as SegmentedControl };

package/dist/segmented-control/segmented-control.module.js

@@ -0,0 +1,9 @@
+"use client";
+
+import './segmented-control.css';
+var e = {
+	wrapper: "_wrapper_196gt_2",
+	segment: "_segment_196gt_33"
+};
+//#endregion
+export { e as default };

package/dist/select/select.css

@@ -0,0 +1 @@
+@layer cascivo.component{._wrapper_1b5d9_2{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._wrapper_1b5d9_2[data-size=sm]{--_select-height:var(--cascivo-control-height-sm);--_select-font:var(--cascivo-text-sm);--_select-px:var(--cascivo-space-3)}._wrapper_1b5d9_2[data-size=md]{--_select-height:var(--cascivo-control-height-md);--_select-font:var(--cascivo-text-sm);--_select-px:var(--cascivo-space-4)}._wrapper_1b5d9_2[data-size=lg]{--_select-height:var(--cascivo-control-height-lg);--_select-font:var(--cascivo-text-base);--_select-px:var(--cascivo-space-4)}._label_1b5d9_24{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._field_1b5d9_32{display:flex;position:relative}._select_1b5d9_37{appearance:none;width:100%;height:var(--_select-height,2.5rem);font-family:var(--cascivo-font-sans);font-size:var(--_select-font,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);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);cursor:pointer;outline:none;padding-inline-start:var(--_select-px,var(--cascivo-space-4));padding-inline-end:var(--cascivo-space-10)}._select_1b5d9_37:hover:not(:disabled):not(:focus){border-color:var(--cascivo-color-border-strong)}._select_1b5d9_37:focus{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._select_1b5d9_37:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_1b5d9_2[data-state=error] ._select_1b5d9_37{border-color:var(--cascivo-color-destructive)}._wrapper_1b5d9_2[data-state=error] ._select_1b5d9_37:focus{box-shadow:0 0 0 3px rgb(from var(--cascivo-color-destructive) r g b / .3)}._chevron_1b5d9_79{pointer-events:none;background-color:var(--cascivo-color-text-muted);block-size:1rem;inline-size:1rem;position:absolute;inset-block-start:50%;inset-inline-end:var(--cascivo-space-3);translate:0 -50%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._error_1b5d9_92{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-destructive);line-height:var(--cascivo-leading-snug)}._hint_1b5d9_99{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-snug)}@media (pointer:coarse){._wrapper_1b5d9_2[data-size=sm] ._select_1b5d9_37,._wrapper_1b5d9_2[data-size=md] ._select_1b5d9_37{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}}@media (forced-colors:active){._select_1b5d9_37{color:fieldtext;background-color:field;border:1px solid fieldtext}._select_1b5d9_37:focus{outline-offset:2px;outline:2px solid highlight}}

package/dist/select/select.js

@@ -0,0 +1,71 @@
+"use client";
+
+import e from "./select.module.js";
+import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region ../components/src/select/select.tsx
+var o = n({
+	initial: "idle",
+	states: {
+		idle: { on: { FOCUS: "focused" } },
+		focused: { on: { BLUR: "idle" } }
+	}
+});
+function s({ label: n, hint: s, error: c, placeholder: l, options: u, size: d = "md", className: f, id: p, defaultValue: m, value: h, onFocus: g, onBlur: _, ...v }) {
+	let [y, b] = r(o), x = p ?? (n ? `cascade-select-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0), S = h !== void 0, C = l !== void 0;
+	return /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, f),
+		"data-state": c ? "error" : y.value,
+		"data-size": d,
+		children: [
+			n && /* @__PURE__ */ i("label", {
+				className: e.label,
+				htmlFor: x,
+				children: n
+			}),
+			/* @__PURE__ */ a("div", {
+				className: e.field,
+				children: [/* @__PURE__ */ a("select", {
+					id: x,
+					className: e.select,
+					"aria-invalid": c ? !0 : void 0,
+					"aria-describedby": c ? `${x}-error` : s ? `${x}-hint` : void 0,
+					value: h,
+					defaultValue: !S && C ? m ?? "" : m,
+					onFocus: (e) => {
+						b("FOCUS"), g?.(e);
+					},
+					onBlur: (e) => {
+						b("BLUR"), _?.(e);
+					},
+					...v,
+					children: [C && /* @__PURE__ */ i("option", {
+						value: "",
+						disabled: !0,
+						children: l
+					}), u.map((e) => /* @__PURE__ */ i("option", {
+						value: e.value,
+						disabled: e.disabled,
+						children: e.label
+					}, e.value))]
+				}), /* @__PURE__ */ i("span", {
+					className: e.chevron,
+					"aria-hidden": "true"
+				})]
+			}),
+			c && /* @__PURE__ */ i("span", {
+				id: `${x}-error`,
+				className: e.error,
+				role: "alert",
+				children: c
+			}),
+			!c && s && /* @__PURE__ */ i("span", {
+				id: `${x}-hint`,
+				className: e.hint,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { s as Select };

package/dist/select/select.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+import './select.css';
+var e = {
+	wrapper: "_wrapper_1b5d9_2",
+	label: "_label_1b5d9_24",
+	field: "_field_1b5d9_32",
+	select: "_select_1b5d9_37",
+	chevron: "_chevron_1b5d9_79",
+	error: "_error_1b5d9_92",
+	hint: "_hint_1b5d9_99"
+};
+//#endregion
+export { e as default };

package/dist/separator/separator.css

@@ -0,0 +1 @@
+@layer cascivo.component{._separator_fgwc8_2{background-color:var(--cascivo-color-border);border:none;flex-shrink:0;margin:0}._separator_fgwc8_2[data-orientation=horizontal]{block-size:1px;inline-size:100%}._separator_fgwc8_2[data-orientation=vertical]{align-self:stretch;block-size:100%;inline-size:1px}}

package/dist/separator/separator.js

@@ -0,0 +1,21 @@
+"use client";
+
+import e from "./separator.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/separator/separator.tsx
+function r({ orientation: r = "horizontal", decorative: i = !1, className: a, ...o }) {
+	return r === "horizontal" && !i ? /* @__PURE__ */ n("hr", {
+		"data-orientation": "horizontal",
+		className: t(e.separator, a),
+		...o
+	}) : /* @__PURE__ */ n("div", {
+		role: i ? "none" : "separator",
+		"aria-orientation": i ? void 0 : r,
+		"data-orientation": r,
+		className: t(e.separator, a),
+		...o
+	});
+}
+//#endregion
+export { r as Separator };

package/dist/separator/separator.module.js

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

package/dist/sheet/sheet.css

@@ -0,0 +1 @@
+@layer cascivo.component{._sheet_18eks_2{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;border:none;flex-direction:column;margin:0;padding:0;display:flex;position:fixed}._sheet_18eks_2[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._sheet_18eks_2[data-side=end]{border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-end:0;translate:100%}._sheet_18eks_2[data-side=end][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=end][data-state=open]{translate:100%}}._sheet_18eks_2[data-side=start]{border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-start:0;translate:-100%}._sheet_18eks_2[data-side=start][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=start][data-state=open]{translate:-100%}}._sheet_18eks_2[data-side=top]{border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);width:100%;height:auto;max-height:80vh;inset-block-start:0;inset-inline:0;translate:0 -100%}._sheet_18eks_2[data-side=top][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=top][data-state=open]{translate:0 -100%}}._sheet_18eks_2[data-side=bottom]{border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;width:100%;height:auto;max-height:80vh;inset-block-end:0;inset-inline:0;translate:0 100%}._sheet_18eks_2[data-side=bottom][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=bottom][data-state=open]{translate:0 100%}}._sheet_18eks_2::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#0006}@starting-style{._sheet_18eks_2::backdrop{opacity:0}}._sheet_18eks_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._header_18eks_133{padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}._title_18eks_142{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._close_18eks_148{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}._close_18eks_148:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_18eks_148:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._body_18eks_176{padding:var(--cascivo-space-6);flex:1;overflow-y:auto}}

package/dist/sheet/sheet.js

@@ -0,0 +1,50 @@
+"use client";
+
+import e from "./sheet.module.js";
+import { useSignal as t, useSignalEffect as n } from "@cascivo/core";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useId as s, useRef as c } from "react";
+//#region ../components/src/sheet/sheet.tsx
+function l({ open: l, onClose: u, title: d, children: f, side: p = "end" }) {
+	let m = c(null), h = s(), g = t(l);
+	g.value = l;
+	let _ = c(u);
+	return _.current = u, n(() => {
+		let e = m.current;
+		if (e) if (g.value) try {
+			e.showPopover();
+		} catch {}
+		else try {
+			e.hidePopover();
+		} catch {}
+	}), /* @__PURE__ */ o("div", {
+		ref: m,
+		popover: "manual",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": d == null ? void 0 : h,
+		"data-state": l ? "open" : "closed",
+		"data-side": p,
+		className: e.sheet,
+		children: [/* @__PURE__ */ o("div", {
+			className: e.header,
+			children: [d != null && /* @__PURE__ */ a("span", {
+				id: h,
+				className: e.title,
+				children: d
+			}), /* @__PURE__ */ a("button", {
+				type: "button",
+				"aria-label": i(r.sheet.close),
+				onClick: () => _.current(),
+				className: e.close,
+				children: "✕"
+			})]
+		}), /* @__PURE__ */ a("div", {
+			className: e.body,
+			children: f
+		})]
+	});
+}
+//#endregion
+export { l as Sheet };

package/dist/sheet/sheet.module.js

@@ -0,0 +1,12 @@
+"use client";
+
+import './sheet.css';
+var e = {
+	sheet: "_sheet_18eks_2",
+	header: "_header_18eks_133",
+	title: "_title_18eks_142",
+	close: "_close_18eks_148",
+	body: "_body_18eks_176"
+};
+//#endregion
+export { e as default };

package/dist/shell-header/shell-header.css

@@ -0,0 +1 @@
+@layer cascivo.component{._header_80jhs_2{align-items:center;gap:var(--cascivo-space-2);block-size:var(--cascivo-shell-header-block-size);padding-inline:var(--cascivo-space-3);background:var(--cascivo-color-surface);border-block-end:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);display:flex;position:relative}._skipLink_80jhs_14{z-index:100;padding:var(--cascivo-space-2) var(--cascivo-space-3);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);color:var(--cascivo-color-text);font-size:var(--cascivo-text-sm);clip-path:inset(50%);text-decoration:none;position:absolute;inset-block-start:var(--cascivo-space-2);inset-inline-start:var(--cascivo-space-2)}._skipLink_80jhs_14:focus-visible{clip-path:none;box-shadow:var(--cascivo-focus-ring);outline:none}._menuButton_80jhs_36{border-radius:var(--cascivo-radius-control);block-size:2.5rem;inline-size:2.5rem;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._menuButton_80jhs_36:hover{background:var(--cascivo-color-bg-subtle)}._menuButton_80jhs_36:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._brand_80jhs_59{align-items:baseline;gap:var(--cascivo-space-1);color:var(--cascivo-color-text);white-space:nowrap;font-size:var(--cascivo-text-sm);text-decoration:none;display:inline-flex}._brandPrefix_80jhs_69{font-weight:var(--cascivo-font-normal)}._brandName_80jhs_73{font-weight:var(--cascivo-font-semibold)}._nav_80jhs_77{min-inline-size:0}._navList_80jhs_81{align-items:center;gap:var(--cascivo-space-1);margin:0;padding:0;list-style:none;display:flex}._navLink_80jhs_90{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);white-space:nowrap;border-radius:var(--cascivo-radius-control);transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);align-items:center;text-decoration:none;display:inline-flex}._navLink_80jhs_90:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navLink_80jhs_90:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navLink_80jhs_90[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._navMenuWrapper_80jhs_119{list-style:none;position:relative}._navMenuTrigger_80jhs_124{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-control);cursor:pointer;white-space:nowrap;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;display:inline-flex}._navMenuTrigger_80jhs_124:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navMenuTrigger_80jhs_124:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navMenuTrigger_80jhs_124[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._chevron_80jhs_156{transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out)}[aria-expanded=true] ._chevron_80jhs_156{transform:rotate(180deg)}._navMenuPanel_80jhs_164{position-anchor:var(--cascivo-popover-anchor,inherit);margin:var(--cascivo-space-1) 0 0;padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);min-inline-size:12rem;box-shadow:var(--cascivo-shadow-md);transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;list-style:none;position:fixed;inset-block-start:anchor(end);inset-inline-start:anchor(start);translate:0}@starting-style{._navMenuPanel_80jhs_164{translate:0 -.5rem}}._navMenuPanel_80jhs_164[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete;translate:0 -.5rem}._navMenuItem_80jhs_197{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);white-space:nowrap;text-decoration:none;display:block}._navMenuItem_80jhs_197:hover,._navMenuItem_80jhs_197:focus-visible{background:var(--cascivo-color-bg-subtle);outline:none}._navMenuItem_80jhs_197[data-state=active]{background:var(--cascivo-color-active-bg);font-weight:var(--cascivo-font-medium)}._spacer_80jhs_219{flex:1}._actions_80jhs_223{align-items:center;gap:var(--cascivo-space-1);display:flex}._action_80jhs_223{border:none;block-size:2.5rem;inline-size:2.5rem;color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-control);background:0 0;border-block-end:2px solid #0000;justify-content:center;align-items:center;display:inline-flex}._action_80jhs_223:hover{background:var(--cascivo-color-bg-subtle)}._action_80jhs_223:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._action_80jhs_223[data-state=active]{border-block-end-color:var(--cascivo-color-accent);background:var(--cascivo-color-bg-subtle)}._actionIcon_80jhs_257{justify-content:center;align-items:center;block-size:1.25rem;inline-size:1.25rem;display:inline-flex}._end_80jhs_265{align-items:center;gap:var(--cascivo-space-2);padding-inline-start:var(--cascivo-space-2);display:flex}}

package/dist/shell-header/shell-header.js

@@ -0,0 +1,165 @@
+"use client";
+
+import { usePopover as e } from "../popover/use-popover.js";
+import t from "./shell-header.module.js";
+import { cn as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
+import { builtin as o, t as s } from "@cascivo/i18n";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region ../components/src/shell-header/shell-header.tsx
+function u(e) {
+	return typeof e == "object" && !!e && "name" in e;
+}
+function d(e) {
+	return "items" in e;
+}
+function f({ item: n }) {
+	a();
+	let { triggerRef: o, popoverRef: s, isOpen: u, anchorName: d, toggle: f, close: p } = e(), m = n.items.some((e) => e.active), h = r(!1);
+	i(() => {
+		if (!h.value || !u.value) return;
+		h.value = !1;
+		let e = s.current;
+		e && e.querySelector("[role=\"menuitem\"]")?.focus();
+	});
+	function g(e) {
+		e.key === "ArrowDown" ? (e.preventDefault(), u.value ? s.current?.querySelector("[role=\"menuitem\"]")?.focus() : (h.value = !0, f())) : e.key === "Escape" && (e.preventDefault(), p());
+	}
+	function _(e) {
+		let t = Array.from(s.current?.querySelectorAll("[role=\"menuitem\"]") ?? []), n = t.indexOf(document.activeElement);
+		e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Escape" && (p(), o.current?.focus());
+	}
+	return /* @__PURE__ */ l("li", {
+		className: t.navMenuWrapper,
+		children: [/* @__PURE__ */ l("button", {
+			ref: o,
+			type: "button",
+			"aria-haspopup": "menu",
+			"aria-expanded": u.value,
+			"data-state": m ? "active" : void 0,
+			style: { anchorName: d },
+			className: t.navMenuTrigger,
+			onClick: f,
+			onKeyDown: g,
+			children: [n.label, /* @__PURE__ */ c("svg", {
+				viewBox: "0 0 16 16",
+				width: "12",
+				height: "12",
+				"aria-hidden": "true",
+				className: t.chevron,
+				children: /* @__PURE__ */ c("path", {
+					d: "M4 6l4 4 4-4",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
+		}), /* @__PURE__ */ c("div", {
+			ref: s,
+			popover: "auto",
+			role: "menu",
+			"aria-label": n.label,
+			"data-state": u.value ? "open" : "closed",
+			style: { positionAnchor: d },
+			className: t.navMenuPanel,
+			onKeyDown: _,
+			children: n.items.map((e) => /* @__PURE__ */ c("a", {
+				href: e.href,
+				role: "menuitem",
+				"aria-current": e.active ? "page" : void 0,
+				"data-state": e.active ? "active" : void 0,
+				className: t.navMenuItem,
+				onClick: p,
+				children: e.label
+			}, e.href))
+		})]
+	});
+}
+function p({ brand: e, nav: r, actions: i, end: p, onMenuClick: m, menuExpanded: h, skipToContentHref: g = "#cascade-main", labels: _, className: v }) {
+	a();
+	let y = _?.nav ?? s(o.shellHeader.nav), b = h ? _?.closeMenu ?? s(o.shellHeader.closeMenu) : _?.openMenu ?? s(o.shellHeader.openMenu);
+	return /* @__PURE__ */ l("header", {
+		role: "banner",
+		className: n(t.header, v),
+		children: [
+			g !== !1 && /* @__PURE__ */ c("a", {
+				href: g,
+				className: t.skipLink,
+				children: _?.skipToContent ?? s(o.shellHeader.skipToContent)
+			}),
+			m && /* @__PURE__ */ c("button", {
+				type: "button",
+				"aria-label": b,
+				"aria-expanded": h ?? !1,
+				className: t.menuButton,
+				onClick: m,
+				children: /* @__PURE__ */ c("svg", {
+					viewBox: "0 0 16 16",
+					width: "16",
+					height: "16",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ c("path", {
+						d: "M2 4h12M2 8h12M2 12h12",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			}),
+			e != null && (u(e) ? /* @__PURE__ */ l("a", {
+				href: e.href ?? "/",
+				"aria-label": [e.prefix, e.name].filter(Boolean).join(" "),
+				className: t.brand,
+				children: [e.prefix && /* @__PURE__ */ c("span", {
+					className: t.brandPrefix,
+					children: e.prefix
+				}), /* @__PURE__ */ c("span", {
+					className: t.brandName,
+					children: e.name
+				})]
+			}) : /* @__PURE__ */ c("div", {
+				className: t.brand,
+				children: e
+			})),
+			r && r.length > 0 && /* @__PURE__ */ c("nav", {
+				"aria-label": y,
+				className: t.nav,
+				children: /* @__PURE__ */ c("ul", {
+					className: t.navList,
+					children: r.map((e) => d(e) ? /* @__PURE__ */ c(f, { item: e }, e.label) : /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c("a", {
+						href: e.href,
+						"aria-current": e.active ? "page" : void 0,
+						"data-state": e.active ? "active" : void 0,
+						className: t.navLink,
+						children: e.label
+					}) }, e.href))
+				})
+			}),
+			/* @__PURE__ */ c("div", { className: t.spacer }),
+			i && i.length > 0 && /* @__PURE__ */ c("div", {
+				className: t.actions,
+				children: i.map((e) => /* @__PURE__ */ c("button", {
+					type: "button",
+					"aria-label": e.label,
+					"aria-pressed": e.active ?? !1,
+					title: e.label,
+					"data-state": e.active ? "active" : void 0,
+					className: t.action,
+					onClick: e.onClick,
+					children: /* @__PURE__ */ c("span", {
+						className: t.actionIcon,
+						"aria-hidden": "true",
+						children: e.icon
+					})
+				}, e.id))
+			}),
+			p && /* @__PURE__ */ c("div", {
+				className: t.end,
+				children: p
+			})
+		]
+	});
+}
+//#endregion
+export { p as ShellHeader };

package/dist/shell-header/shell-header.module.js

@@ -0,0 +1,26 @@
+"use client";
+
+import './shell-header.css';
+var e = {
+	header: "_header_80jhs_2",
+	skipLink: "_skipLink_80jhs_14",
+	menuButton: "_menuButton_80jhs_36",
+	brand: "_brand_80jhs_59",
+	brandPrefix: "_brandPrefix_80jhs_69",
+	brandName: "_brandName_80jhs_73",
+	nav: "_nav_80jhs_77",
+	navList: "_navList_80jhs_81",
+	navLink: "_navLink_80jhs_90",
+	navMenuWrapper: "_navMenuWrapper_80jhs_119",
+	navMenuTrigger: "_navMenuTrigger_80jhs_124",
+	chevron: "_chevron_80jhs_156",
+	navMenuPanel: "_navMenuPanel_80jhs_164",
+	navMenuItem: "_navMenuItem_80jhs_197",
+	spacer: "_spacer_80jhs_219",
+	actions: "_actions_80jhs_223",
+	action: "_action_80jhs_223",
+	actionIcon: "_actionIcon_80jhs_257",
+	end: "_end_80jhs_265"
+};
+//#endregion
+export { e as default };

package/dist/side-nav/side-nav.css

@@ -0,0 +1 @@
+@layer cascivo.component{._sideNav_1v53b_2{box-sizing:border-box;inline-size:var(--cascivo-sidenav-inline-size,16rem);block-size:100%;max-block-size:100%;padding:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);background-color:var(--cascivo-sidenav-bg,var(--cascivo-color-surface));border-inline-end:1px solid var(--cascivo-color-border);transition:inline-size var(--cascivo-motion-emphasis);flex-direction:column;display:flex;overflow:hidden auto}._sideNav_1v53b_2[data-state=collapsed]{inline-size:var(--cascivo-sidenav-rail-inline-size,4rem)}._sideNav_1v53b_2[data-state=collapsed] ._label_1v53b_24[data-rail-hidden],._sideNav_1v53b_2[data-state=collapsed] ._trailing_1v53b_25[data-rail-hidden],._sideNav_1v53b_2[data-state=collapsed] ._groupIndicator_1v53b_29{display:none}._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]{position:relative}._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within{inline-size:var(--cascivo-sidenav-inline-size,16rem);z-index:10;box-shadow:var(--cascivo-shadow-md);position:absolute;inset-block:0}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._label_1v53b_24[data-rail-hidden],:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._trailing_1v53b_25[data-rail-hidden]{display:initial}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._link_1v53b_50,:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._groupTrigger_1v53b_51{padding-inline:var(--cascivo-space-3);justify-content:flex-start}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._groupIndicator_1v53b_29{display:initial}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._fallbackIcon_1v53b_60{display:none}._list_1v53b_67,._sublistInner_1v53b_68,._groupItems_1v53b_69{gap:var(--cascivo-space-1);padding:0;padding-inline:var(--cascivo-space-2);flex-direction:column;margin:0;list-style:none;display:flex}._group_1v53b_29{display:contents}._group_1v53b_29+._group_1v53b_29>._groupLabel_1v53b_84,._group_1v53b_29+._group_1v53b_29>._groupItems_1v53b_69:first-child{border-block-start:1px solid var(--cascivo-color-border);margin-block-start:var(--cascivo-space-4);padding-block-start:var(--cascivo-space-3)}._groupLabel_1v53b_84{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2) var(--cascivo-space-1);font-size:var(--cascivo-text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--cascivo-color-foreground-muted);margin:0;font-weight:600}._link_1v53b_50,._groupTrigger_1v53b_51{align-items:center;gap:var(--cascivo-space-2);inline-size:100%;padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2);font-family:inherit;font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-tight);text-align:start;white-space:nowrap;color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-item);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;text-decoration:none;display:flex;position:relative}:is(._link_1v53b_50,._groupTrigger_1v53b_51):hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}:is(._link_1v53b_50,._groupTrigger_1v53b_51):focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._link_1v53b_50[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-medium);background-color:var(--cascivo-color-accent-subtle)}._link_1v53b_50[data-state=active]:before{content:"";inset-block:var(--cascivo-radius-item);background:var(--cascivo-color-accent);border-radius:var(--cascivo-radius-full);inline-size:2px;position:absolute;inset-inline-start:0}._link_1v53b_50[data-tone=danger]{color:var(--cascivo-color-destructive)}._link_1v53b_50[data-tone=warning]{color:var(--cascivo-color-warning)}._link_1v53b_50[data-tone=success]{color:var(--cascivo-color-success)}._link_1v53b_50:disabled,._link_1v53b_50[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._trailing_1v53b_25{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);flex-shrink:0;align-items:center;margin-inline-start:auto;display:inline-flex}._checkMark_1v53b_185{color:var(--cascivo-color-accent);flex-shrink:0;margin-inline-start:auto}._icon_1v53b_191{inline-size:var(--cascivo-space-4);block-size:var(--cascivo-space-4);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._fallbackIcon_1v53b_60{background:var(--cascivo-color-bg-subtle);block-size:1.25rem;inline-size:1.25rem;font-size:.6875rem;font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._label_1v53b_24{text-overflow:ellipsis;overflow:hidden}._groupIndicator_1v53b_29{transition:rotate var(--cascivo-motion-emphasis);flex-shrink:0;margin-inline-start:auto}._groupTrigger_1v53b_51[data-state=open] ._groupIndicator_1v53b_29{rotate:180deg}._sublist_1v53b_68{visibility:hidden;transition:grid-template-rows var(--cascivo-motion-exit), visibility var(--cascivo-motion-exit);grid-template-rows:0fr;display:grid}._sublist_1v53b_68[data-state=open]{visibility:visible;transition:grid-template-rows var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);grid-template-rows:1fr}._sublistInner_1v53b_68{min-block-size:0;overflow:hidden}._sublink_1v53b_251{padding-inline-start:calc(var(--cascivo-space-3) + var(--cascivo-space-4) + var(--cascivo-space-2))}._sublink_1v53b_251[data-selected]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-medium)}._subSeparator_1v53b_263{block-size:1px;margin-block:var(--cascivo-space-1);margin-inline:var(--cascivo-space-3);background:var(--cascivo-color-border)}._subGroupLabel_1v53b_270{padding-inline-start:calc(var(--cascivo-space-3) + var(--cascivo-space-4) + var(--cascivo-space-2));padding-block:var(--cascivo-space-1);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--cascivo-color-text-subtle)}._header_1v53b_282{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._footer_1v53b_289{padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._customItem_1v53b_296{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2)}._collapseToggle_1v53b_301{padding-block:var(--cascivo-space-2);color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;margin-block-start:auto;display:flex}._collapseToggle_1v53b_301:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._collapseToggle_1v53b_301:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._collapseIcon_1v53b_327{transition:rotate var(--cascivo-motion-emphasis)}._sideNav_1v53b_2[data-state=collapsed] ._collapseIcon_1v53b_327{rotate:180deg}._railFlyout_1v53b_336{min-inline-size:11rem;padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-md);margin:0;position:absolute;inset-block-start:anchor(start);inset-inline-start:anchor(end)}._railFlyout_1v53b_336:popover-open{flex-direction:column;gap:2px;display:flex}@starting-style{._railFlyout_1v53b_336:popover-open{opacity:0;translate:-4px}}._railFlyout_1v53b_336{transition:opacity var(--cascivo-duration-150) var(--cascivo-ease-out), translate var(--cascivo-duration-150) var(--cascivo-ease-out), display var(--cascivo-duration-150) var(--cascivo-ease-out) allow-discrete, overlay var(--cascivo-duration-150) var(--cascivo-ease-out) allow-discrete}._railFlyoutCaption_1v53b_368{padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text-subtle);text-transform:uppercase;letter-spacing:.05em}._flyoutItem_1v53b_378{border-inline-start:none;padding-inline-start:var(--cascivo-space-3)}._flyoutSeparator_1v53b_383{block-size:1px;margin-block:var(--cascivo-space-1);margin-inline:var(--cascivo-space-2);background:var(--cascivo-color-border)}}