@cascivo/react 0.13.0 → 0.14.0

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

@@ -1 +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}}
+@layer cascivo.component{._header_6njjo_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_6njjo_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_6njjo_14:focus-visible{clip-path:none;box-shadow:var(--cascivo-focus-ring);outline:none}._menuButton_6njjo_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_6njjo_36:hover{background:var(--cascivo-color-bg-subtle)}._menuButton_6njjo_36:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._brand_6njjo_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_6njjo_69{font-weight:var(--cascivo-font-normal)}._brandName_6njjo_73{font-weight:var(--cascivo-font-semibold)}._nav_6njjo_77{min-inline-size:0}._navList_6njjo_81{align-items:center;gap:var(--cascivo-space-1);margin:0;padding:0;list-style:none;display:flex}._navLink_6njjo_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_6njjo_90:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navLink_6njjo_90:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navLink_6njjo_90[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._navMenuWrapper_6njjo_119{list-style:none;position:relative}._navMenuTrigger_6njjo_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_6njjo_124:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navMenuTrigger_6njjo_124:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navMenuTrigger_6njjo_124[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._chevron_6njjo_156{transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out)}[aria-expanded=true] ._chevron_6njjo_156{transform:rotate(180deg)}._navMenuPanel_6njjo_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_6njjo_164{translate:0 -.5rem}}._navMenuPanel_6njjo_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_6njjo_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_6njjo_197:hover,._navMenuItem_6njjo_197:focus-visible{background:var(--cascivo-color-bg-subtle);outline:none}._navMenuItem_6njjo_197[data-state=active]{background:var(--cascivo-color-active-bg);font-weight:var(--cascivo-font-medium)}._spacer_6njjo_219{flex:1}._center_6njjo_226{min-inline-size:0;padding-inline:var(--cascivo-space-2);flex:1;justify-content:center;align-items:center;display:flex}._actions_6njjo_235{align-items:center;gap:var(--cascivo-space-1);display:flex}._action_6njjo_235{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_6njjo_235:hover{background:var(--cascivo-color-bg-subtle)}._action_6njjo_235:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._action_6njjo_235[data-state=active]{border-block-end-color:var(--cascivo-color-accent);background:var(--cascivo-color-bg-subtle)}._actionIcon_6njjo_269{justify-content:center;align-items:center;block-size:1.25rem;inline-size:1.25rem;display:inline-flex}._end_6njjo_277{align-items:center;gap:var(--cascivo-space-2);padding-inline-start:var(--cascivo-space-2);display:flex}}

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

@@ -76,24 +76,24 @@ function p({ item: n }) {
 		})]
 	});
 }
-function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded: g, skipToContentHref: _ = "#cascade-main", labels: v, className: y }) {
+function m({ brand: e, nav: i, center: a, actions: m, end: h, onMenuClick: g, menuExpanded: _, skipToContentHref: v = "#cascade-main", labels: y, className: b }) {
 	o();
-	let b = r(), x = v?.nav ?? c(s.shellHeader.nav), S = g ? v?.closeMenu ?? c(s.shellHeader.closeMenu) : v?.openMenu ?? c(s.shellHeader.openMenu);
+	let x = r(), S = y?.nav ?? c(s.shellHeader.nav), C = _ ? y?.closeMenu ?? c(s.shellHeader.closeMenu) : y?.openMenu ?? c(s.shellHeader.openMenu);
 	return /* @__PURE__ */ u("header", {
 		role: "banner",
-		className: n(t.header, y),
+		className: n(t.header, b),
 		children: [
-			_ !== !1 && /* @__PURE__ */ l("a", {
-				href: _,
+			v !== !1 && /* @__PURE__ */ l("a", {
+				href: v,
 				className: t.skipLink,
-				children: v?.skipToContent ?? c(s.shellHeader.skipToContent)
+				children: y?.skipToContent ?? c(s.shellHeader.skipToContent)
 			}),
-			h && /* @__PURE__ */ l("button", {
+			g && /* @__PURE__ */ l("button", {
 				type: "button",
-				"aria-label": S,
-				"aria-expanded": g ?? !1,
+				"aria-label": C,
+				"aria-expanded": _ ?? !1,
 				className: t.menuButton,
-				onClick: h,
+				onClick: g,
 				children: /* @__PURE__ */ l("svg", {
 					viewBox: "0 0 16 16",
 					width: "16",
@@ -107,7 +107,7 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
 					})
 				})
 			}),
-			e != null && (d(e) ? /* @__PURE__ */ u(b, {
+			e != null && (d(e) ? /* @__PURE__ */ u(x, {
 				href: e.href ?? "/",
 				"aria-label": [e.prefix, e.name].filter(Boolean).join(" "),
 				className: t.brand,
@@ -123,11 +123,11 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
 				children: e
 			})),
 			i && i.length > 0 && /* @__PURE__ */ l("nav", {
-				"aria-label": x,
+				"aria-label": S,
 				className: t.nav,
 				children: /* @__PURE__ */ l("ul", {
 					className: t.navList,
-					children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(b, {
+					children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(x, {
 						href: e.href,
 						"aria-current": e.active ? "page" : void 0,
 						"data-state": e.active ? "active" : void 0,
@@ -137,10 +137,13 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
 					}) }, e.id ?? `${n}-${e.href}`))
 				})
 			}),
-			/* @__PURE__ */ l("div", { className: t.spacer }),
-			a && a.length > 0 && /* @__PURE__ */ l("div", {
+			a ? /* @__PURE__ */ l("div", {
+				className: t.center,
+				children: a
+			}) : /* @__PURE__ */ l("div", { className: t.spacer }),
+			m && m.length > 0 && /* @__PURE__ */ l("div", {
 				className: t.actions,
-				children: a.map((e) => /* @__PURE__ */ l("button", {
+				children: m.map((e) => /* @__PURE__ */ l("button", {
 					type: "button",
 					"aria-label": e.label,
 					"aria-pressed": e.active ?? !1,
@@ -155,9 +158,9 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
 					})
 				}, e.id))
 			}),
-			m && /* @__PURE__ */ l("div", {
+			h && /* @__PURE__ */ l("div", {
 				className: t.end,
-				children: m
+				children: h
 			})
 		]
 	});

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

@@ -2,25 +2,26 @@
 
 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"
+	header: "_header_6njjo_2",
+	skipLink: "_skipLink_6njjo_14",
+	menuButton: "_menuButton_6njjo_36",
+	brand: "_brand_6njjo_59",
+	brandPrefix: "_brandPrefix_6njjo_69",
+	brandName: "_brandName_6njjo_73",
+	nav: "_nav_6njjo_77",
+	navList: "_navList_6njjo_81",
+	navLink: "_navLink_6njjo_90",
+	navMenuWrapper: "_navMenuWrapper_6njjo_119",
+	navMenuTrigger: "_navMenuTrigger_6njjo_124",
+	chevron: "_chevron_6njjo_156",
+	navMenuPanel: "_navMenuPanel_6njjo_164",
+	navMenuItem: "_navMenuItem_6njjo_197",
+	spacer: "_spacer_6njjo_219",
+	center: "_center_6njjo_226",
+	actions: "_actions_6njjo_235",
+	action: "_action_6njjo_235",
+	actionIcon: "_actionIcon_6njjo_269",
+	end: "_end_6njjo_277"
 };
 //#endregion
 export { e as default };

package/dist/side-nav/side-nav.js

@@ -3,22 +3,22 @@
 import { Tooltip as e } from "../tooltip/tooltip.js";
 import { usePopover as t } from "../popover/use-popover.js";
 import n from "./side-nav.module.js";
-import { cn as r, getLinkComponent as i, useSignal as a, useSignals as o } from "@cascivo/core";
-import { builtin as s, t as c } from "@cascivo/i18n";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Fragment as f, useId as p } from "react";
+import { cn as r, focusElement as i, getLinkComponent as a, useSignal as o, useSignals as s } from "@cascivo/core";
+import { Fragment as c, useId as l } from "react";
+import { builtin as u, t as d } from "@cascivo/i18n";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/side-nav/side-nav.tsx
-function m(e) {
+function h(e) {
 	return !("type" in e);
 }
-function h() {
-	return /* @__PURE__ */ u("svg", {
+function g() {
+	return /* @__PURE__ */ p("svg", {
 		viewBox: "0 0 16 16",
 		width: "14",
 		height: "14",
 		"aria-hidden": "true",
 		className: n.checkMark,
-		children: /* @__PURE__ */ u("path", {
+		children: /* @__PURE__ */ p("path", {
 			d: "M3.5 8.5l3 3 6-7",
 			fill: "none",
 			stroke: "currentColor",
@@ -28,20 +28,20 @@ function h() {
 		})
 	});
 }
-function g(e, { inMenu: t, onActivate: a, extraClass: o }) {
-	let s = t ? "menuitem" : void 0, c = r(n.link, n.sublink, o), f = /* @__PURE__ */ d(l, { children: [
-		e.icon ? /* @__PURE__ */ u("span", {
+function _(e, { inMenu: t, onActivate: i, extraClass: o }) {
+	let s = t ? "menuitem" : void 0, c = r(n.link, n.sublink, o), l = /* @__PURE__ */ m(f, { children: [
+		e.icon ? /* @__PURE__ */ p("span", {
 			className: n.icon,
 			"aria-hidden": "true",
 			children: e.icon
 		}) : null,
-		/* @__PURE__ */ u("span", {
+		/* @__PURE__ */ p("span", {
 			className: n.label,
 			children: e.label
 		}),
-		e.selected ? /* @__PURE__ */ u(h, {}) : null
+		e.selected ? /* @__PURE__ */ p(g, {}) : null
 	] });
-	return e.onSelect && !e.href ? /* @__PURE__ */ u("button", {
+	return e.onSelect && !e.href ? /* @__PURE__ */ p("button", {
 		type: "button",
 		role: s,
 		"aria-current": e.active ? "page" : void 0,
@@ -50,10 +50,10 @@ function g(e, { inMenu: t, onActivate: a, extraClass: o }) {
 		disabled: e.disabled,
 		className: c,
 		onClick: () => {
-			e.onSelect?.(), a?.();
+			e.onSelect?.(), i?.();
 		},
-		children: f
-	}) : /* @__PURE__ */ u(i(), {
+		children: l
+	}) : /* @__PURE__ */ p(a(), {
 		href: e.disabled ? void 0 : e.href,
 		role: s,
 		"aria-current": e.active ? "page" : void 0,
@@ -67,116 +67,116 @@ function g(e, { inMenu: t, onActivate: a, extraClass: o }) {
 				t.preventDefault();
 				return;
 			}
-			e.onSelect?.(), a?.();
+			e.onSelect?.(), i?.();
 		},
-		children: f
+		children: l
 	});
 }
-function _(e) {
+function v(e) {
 	if (typeof Intl < "u" && "Segmenter" in Intl) {
 		let t = new Intl.Segmenter(void 0, { granularity: "grapheme" });
 		for (let n of t.segment(e)) return n.segment;
 	}
 	return [...e][0] ?? "";
 }
-function v({ item: e }) {
-	let { triggerRef: r, popoverRef: i, isOpen: a, anchorName: o, open: s, close: c, toggle: p } = t(), h = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("button", {
+function y({ item: e }) {
+	let { triggerRef: r, popoverRef: a, isOpen: o, anchorName: s, open: l, close: u, toggle: d } = t(), g = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
 		ref: r,
 		type: "button",
 		"aria-haspopup": "menu",
-		"aria-expanded": a.value,
+		"aria-expanded": o.value,
 		"aria-label": e.label,
-		"data-state": a.value ? "open" : "closed",
-		style: { anchorName: o },
+		"data-state": o.value ? "open" : "closed",
+		style: { anchorName: s },
 		className: n.groupTrigger,
-		onClick: () => p(),
+		onClick: () => d(),
 		onKeyDown: (e) => {
 			if (e.key === "ArrowDown") {
-				e.preventDefault(), a.value || s();
-				let t = i.current;
+				e.preventDefault(), o.value || l();
+				let t = a.current;
 				t && setTimeout(() => {
-					t.querySelector(h)?.focus();
+					t.querySelector(g)?.focus();
 				}, 0);
-			} else e.key === "Escape" && c();
+			} else e.key === "Escape" && u();
 		},
-		children: e.icon ? /* @__PURE__ */ u("span", {
+		children: e.icon ? /* @__PURE__ */ p("span", {
 			className: n.icon,
 			"aria-hidden": "true",
 			children: e.icon
-		}) : /* @__PURE__ */ u("span", {
+		}) : /* @__PURE__ */ p("span", {
 			className: n.fallbackIcon,
 			"data-fallback-icon": !0,
 			"aria-hidden": "true",
-			children: _(e.label)
+			children: v(e.label)
 		})
-	}), /* @__PURE__ */ d("div", {
-		ref: i,
+	}), /* @__PURE__ */ m("div", {
+		ref: a,
 		popover: "auto",
 		role: "menu",
 		"aria-label": e.label,
-		style: { positionAnchor: o },
+		style: { positionAnchor: s },
 		className: n.railFlyout,
 		onKeyDown: (e) => {
-			let t = i.current;
+			let t = a.current;
 			if (!t) return;
-			let n = Array.from(t.querySelectorAll(h)), a = n.indexOf(e.target);
-			e.key === "ArrowDown" ? (e.preventDefault(), n[(a + 1) % n.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), n[(a - 1 + n.length) % n.length]?.focus()) : e.key === "Escape" && (e.preventDefault(), c(), r.current?.focus());
+			let n = Array.from(t.querySelectorAll(g)), o = n.indexOf(e.target);
+			e.key === "ArrowDown" ? (e.preventDefault(), n[(o + 1) % n.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), n[(o - 1 + n.length) % n.length]?.focus()) : e.key === "Escape" && (e.preventDefault(), u(), i(r.current));
 		},
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: n.railFlyoutCaption,
 			"aria-hidden": "true",
 			children: e.label
-		}), e.items.map((e, t) => m(e) ? /* @__PURE__ */ u(f, { children: g(e, {
+		}), e.items.map((e, t) => h(e) ? /* @__PURE__ */ p(c, { children: _(e, {
 			inMenu: !0,
-			onActivate: c,
+			onActivate: u,
 			extraClass: n.flyoutItem
-		}) }, t) : e.type === "separator" ? /* @__PURE__ */ u("div", {
+		}) }, t) : e.type === "separator" ? /* @__PURE__ */ p("div", {
 			role: "separator",
 			className: n.flyoutSeparator
-		}, t) : /* @__PURE__ */ u("div", {
+		}, t) : /* @__PURE__ */ p("div", {
 			className: n.railFlyoutCaption,
 			"aria-hidden": "true",
 			children: e.label
 		}, t))]
 	})] });
 }
-function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onCollapsedChange: b, ariaLabel: x, collapseLabel: S, expandLabel: C, expandOnHover: w = !1, showCollapseToggle: T = !0, header: E, footer: D, className: O }) {
-	o();
-	let k = x ?? c(s.sideNav.nav), A = S ?? c(s.sideNav.collapse), j = C ?? c(s.sideNav.expand), M = p(), N = a(h ?? y);
-	h !== void 0 && (N.value = h);
-	let P = f ?? (t ? [{ items: t }] : [{ items: [] }]), F = a(P.flatMap((e) => e.items).filter((e) => e.items?.some((e) => m(e) && e.active)).map((e) => e.label)), I = (e) => {
+function b({ items: t, groups: i, collapsed: c, defaultCollapsed: g = !1, onCollapsedChange: b, ariaLabel: x, collapseLabel: S, expandLabel: C, expandOnHover: w = !1, showCollapseToggle: T = !0, header: E, footer: D, className: O }) {
+	s();
+	let k = x ?? d(u.sideNav.nav), A = S ?? d(u.sideNav.collapse), j = C ?? d(u.sideNav.expand), M = l(), N = o(c ?? g);
+	c !== void 0 && (N.value = c);
+	let P = i ?? (t ? [{ items: t }] : [{ items: [] }]), F = o(P.flatMap((e) => e.items).filter((e) => e.items?.some((e) => h(e) && e.active)).map((e) => e.label)), I = (e) => {
 		let t = F.value;
 		F.value = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
 	}, L = () => {
 		let e = !N.value;
-		h === void 0 && (N.value = e), b?.(e);
+		c === void 0 && (N.value = e), b?.(e);
 	}, R = N.value;
-	return /* @__PURE__ */ d("nav", {
+	return /* @__PURE__ */ m("nav", {
 		"aria-label": k,
 		"data-state": R ? "collapsed" : "expanded",
 		"data-expand-on-hover": R && w ? "" : void 0,
 		className: r(n.sideNav, O),
 		children: [
-			E && /* @__PURE__ */ u("div", {
+			E && /* @__PURE__ */ p("div", {
 				className: n.header,
 				children: E
 			}),
-			/* @__PURE__ */ u("ul", {
+			/* @__PURE__ */ p("ul", {
 				className: n.list,
-				children: P.map((t, r) => /* @__PURE__ */ d("li", {
+				children: P.map((t, r) => /* @__PURE__ */ m("li", {
 					className: n.group,
-					children: [t.label && /* @__PURE__ */ u("h3", {
+					children: [t.label && /* @__PURE__ */ p("h3", {
 						className: n.groupLabel,
 						children: t.label
-					}), /* @__PURE__ */ u("ul", {
+					}), /* @__PURE__ */ p("ul", {
 						className: n.groupItems,
-						children: t.items.map((t, a) => {
-							let o = `${r}-${a}`;
+						children: t.items.map((t, i) => {
+							let o = `${r}-${i}`;
 							if (t.items) {
-								if (R && !w) return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(v, { item: t }) }, t.id ?? o);
+								if (R && !w) return /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p(y, { item: t }) }, t.id ?? o);
 								let e = F.value.includes(t.label), r = `${M}-group-${o}`;
-								return /* @__PURE__ */ d("li", { children: [/* @__PURE__ */ d("button", {
+								return /* @__PURE__ */ m("li", { children: [/* @__PURE__ */ m("button", {
 									type: "button",
 									"aria-expanded": e,
 									"aria-controls": r,
@@ -185,28 +185,28 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 									className: n.groupTrigger,
 									onClick: () => I(t.label),
 									children: [
-										t.icon ? /* @__PURE__ */ u("span", {
+										t.icon ? /* @__PURE__ */ p("span", {
 											className: n.icon,
 											"aria-hidden": "true",
 											children: t.icon
-										}) : R ? /* @__PURE__ */ u("span", {
+										}) : R ? /* @__PURE__ */ p("span", {
 											className: n.fallbackIcon,
 											"data-fallback-icon": !0,
 											"aria-hidden": "true",
-											children: _(t.label)
+											children: v(t.label)
 										}) : null,
-										/* @__PURE__ */ u("span", {
+										/* @__PURE__ */ p("span", {
 											className: n.label,
 											"data-rail-hidden": R || void 0,
 											children: t.label
 										}),
-										/* @__PURE__ */ u("svg", {
+										/* @__PURE__ */ p("svg", {
 											viewBox: "0 0 16 16",
 											width: "12",
 											height: "12",
 											"aria-hidden": "true",
 											className: n.groupIndicator,
-											children: /* @__PURE__ */ u("path", {
+											children: /* @__PURE__ */ p("path", {
 												d: "M4 6l4 4 4-4",
 												fill: "none",
 												stroke: "currentColor",
@@ -216,44 +216,44 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 											})
 										})
 									]
-								}), /* @__PURE__ */ u("div", {
+								}), /* @__PURE__ */ p("div", {
 									id: r,
 									"data-state": e ? "open" : "closed",
 									className: n.sublist,
-									children: /* @__PURE__ */ u("ul", {
+									children: /* @__PURE__ */ p("ul", {
 										className: n.sublistInner,
-										children: t.items.map((e, t) => m(e) ? /* @__PURE__ */ u("li", { children: g(e, { inMenu: !1 }) }, t) : e.type === "separator" ? /* @__PURE__ */ u("li", {
+										children: t.items.map((e, t) => h(e) ? /* @__PURE__ */ p("li", { children: _(e, { inMenu: !1 }) }, t) : e.type === "separator" ? /* @__PURE__ */ p("li", {
 											role: "separator",
 											className: n.subSeparator
-										}, t) : /* @__PURE__ */ u("li", {
+										}, t) : /* @__PURE__ */ p("li", {
 											className: n.subGroupLabel,
 											children: e.label
 										}, t))
 									})
 								})] }, t.id ?? o);
 							}
-							let s = /* @__PURE__ */ d(l, { children: [
-								t.icon ? /* @__PURE__ */ u("span", {
+							let s = /* @__PURE__ */ m(f, { children: [
+								t.icon ? /* @__PURE__ */ p("span", {
 									className: n.icon,
 									"aria-hidden": "true",
 									children: t.icon
-								}) : R ? /* @__PURE__ */ u("span", {
+								}) : R ? /* @__PURE__ */ p("span", {
 									className: n.fallbackIcon,
 									"data-fallback-icon": !0,
 									"aria-hidden": "true",
-									children: _(t.label)
+									children: v(t.label)
 								}) : null,
-								/* @__PURE__ */ u("span", {
+								/* @__PURE__ */ p("span", {
 									className: n.label,
 									"data-rail-hidden": R || void 0,
 									children: t.label
 								}),
-								t.trailing == null ? null : /* @__PURE__ */ u("span", {
+								t.trailing == null ? null : /* @__PURE__ */ p("span", {
 									className: n.trailing,
 									"data-rail-hidden": R || void 0,
 									children: t.trailing
 								})
-							] }), c = t.tone && t.tone !== "default" ? t.tone : void 0, f = {
+							] }), c = t.tone && t.tone !== "default" ? t.tone : void 0, l = {
 								href: t.disabled ? void 0 : t.href,
 								"aria-current": t.active ? "page" : void 0,
 								"aria-label": R ? t.label : void 0,
@@ -270,15 +270,15 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 									t.onClick?.(e);
 								}
 							};
-							if (t.render) return /* @__PURE__ */ u("li", {
+							if (t.render) return /* @__PURE__ */ p("li", {
 								className: n.customItem,
 								children: t.render({
 									collapsed: R,
 									children: s,
-									linkProps: f
+									linkProps: l
 								})
 							}, t.id ?? o);
-							let p = i(), h = t.onClick && !t.href ? /* @__PURE__ */ u("button", {
+							let u = a(), d = t.onClick && !t.href ? /* @__PURE__ */ p("button", {
 								type: "button",
 								"aria-current": t.active ? "page" : void 0,
 								"aria-label": R ? t.label : void 0,
@@ -288,35 +288,35 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 								disabled: t.disabled,
 								onClick: (e) => t.onClick?.(e),
 								children: s
-							}) : /* @__PURE__ */ u(p, {
-								...f,
+							}) : /* @__PURE__ */ p(u, {
+								...l,
 								children: s
 							});
-							return /* @__PURE__ */ u("li", { children: R && !w ? /* @__PURE__ */ u(e, {
+							return /* @__PURE__ */ p("li", { children: R && !w ? /* @__PURE__ */ p(e, {
 								content: t.label,
 								placement: "right",
-								children: h
-							}) : h }, t.id ?? o);
+								children: d
+							}) : d }, t.id ?? o);
 						})
 					})]
 				}, r))
 			}),
-			D && /* @__PURE__ */ u("div", {
+			D && /* @__PURE__ */ p("div", {
 				className: n.footer,
 				children: D
 			}),
-			T && /* @__PURE__ */ u("button", {
+			T && /* @__PURE__ */ p("button", {
 				type: "button",
 				"aria-label": R ? j : A,
 				className: n.collapseToggle,
 				onClick: L,
-				children: /* @__PURE__ */ u("svg", {
+				children: /* @__PURE__ */ p("svg", {
 					viewBox: "0 0 16 16",
 					width: "14",
 					height: "14",
 					"aria-hidden": "true",
 					className: n.collapseIcon,
-					children: /* @__PURE__ */ u("path", {
+					children: /* @__PURE__ */ p("path", {
 						d: "M10 4l-4 4 4 4",
 						fill: "none",
 						stroke: "currentColor",
@@ -330,4 +330,4 @@ function y({ items: t, groups: f, collapsed: h, defaultCollapsed: y = !1, onColl
 	});
 }
 //#endregion
-export { y as SideNav };
+export { b as SideNav };

package/dist/skip-nav/skip-nav.js

@@ -2,26 +2,26 @@
 
 import e from "./skip-nav.module.js";
 import { cn as t, useSignals as n } from "@cascivo/core";
-import { builtin as r, t as i } from "@cascivo/i18n";
-import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o } from "react/jsx-runtime";
 //#region ../components/src/skip-nav/skip-nav.tsx
-var o = "cascade-skip-target";
-function s({ targetId: s = o, labels: c, className: l, ...u }) {
+var s = "cascade-skip-target", c = r(function({ targetId: r = s, labels: c, className: l, ...u }, d) {
 	n();
-	let d = c?.label ?? i(r.skipNav.label);
-	return /* @__PURE__ */ a("a", {
-		href: `#${s}`,
+	let f = c?.label ?? a(i.skipNav.label);
+	return /* @__PURE__ */ o("a", {
+		href: `#${r}`,
 		className: t(e.link, l),
 		...u,
-		children: d
+		children: f
 	});
-}
-function c({ id: e = o, ...t }) {
-	return /* @__PURE__ */ a("div", {
+});
+function l({ id: e = s, ...t }) {
+	return /* @__PURE__ */ o("div", {
 		id: e,
 		tabIndex: -1,
 		...t
 	});
 }
 //#endregion
-export { s as SkipNavLink, c as SkipNavTarget };
+export { c as SkipNavLink, l as SkipNavTarget };

package/dist/slider/slider.js

@@ -2,28 +2,30 @@
 
 import e from "./slider.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/slider/slider.tsx
-function i({ label: i, className: a, id: o, min: s = 0, max: c = 100, step: l = 1, disabled: u, ...d }) {
-	let f = o ?? (i ? `cascade-slider-${i.toLowerCase().replace(/\s+/g, "-")}` : void 0);
-	return /* @__PURE__ */ r("div", {
+var a = n(function({ label: n, className: a, id: o, min: s = 0, max: c = 100, step: l = 1, disabled: u, ...d }, f) {
+	let p = o ?? (n ? `cascade-slider-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ i("div", {
 		className: t(e.wrapper, a),
 		"data-disabled": u || void 0,
-		children: [i && /* @__PURE__ */ n("label", {
+		children: [n && /* @__PURE__ */ r("label", {
 			className: e.label,
-			htmlFor: f,
-			children: i
-		}), /* @__PURE__ */ n("input", {
-			id: f,
+			htmlFor: p,
+			children: n
+		}), /* @__PURE__ */ r("input", {
+			id: p,
 			type: "range",
 			min: s,
 			max: c,
 			step: l,
 			disabled: u,
 			className: e.slider,
+			ref: f,
 			...d
 		})]
 	});
-}
+});
 //#endregion
-export { i as Slider };
+export { a as Slider };