@cascivo/react 0.16.0 → 0.17.0

package/dist/node/react/src/index.js

@@ -112,26 +112,30 @@ import { ColorPicker as Lt } from "../../color-picker/color-picker.js";
 import { Carousel as Rt } from "../../carousel/carousel.js";
 import { Resizable as zt } from "../../resizable/resizable.js";
 import { Dock as Bt } from "../../dock/dock.js";
-import { Drawer as Vt } from "../../drawer/drawer.js";
-import { NativeSelect as Ht } from "../../native-select/native-select.js";
-import { CodeSnippet as Ut } from "../../code-snippet/code-snippet.js";
-import { Steps as Wt } from "../../steps/steps.js";
-import { Tile as Gt } from "../../tile/tile.js";
-import { Indicator as Kt } from "../../indicator/indicator.js";
-import { Join as qt } from "../../join/join.js";
-import { Stack as Jt } from "../../stack/stack.js";
-import { AppShell as Yt } from "../../app-shell/app-shell.js";
-import { ChatBubble as Xt } from "../../chat-bubble/chat-bubble.js";
-import { RadialProgress as Zt } from "../../radial-progress/radial-progress.js";
-import { Swap as Qt } from "../../swap/swap.js";
-import { SwipeItem as $t } from "../../swipe-item/swipe-item.js";
-import { Grid as en, GridItem as tn } from "../../layouts/src/grid/grid.js";
-import { Flex as nn } from "../../layouts/src/flex/flex.js";
-import { Columns as rn } from "../../layouts/src/columns/columns.js";
-import { Center as an } from "../../layouts/src/center/center.js";
-import { Spacer as on } from "../../layouts/src/spacer/spacer.js";
-import { AutoGrid as sn } from "../../layouts/src/auto-grid/auto-grid.js";
-import { PageHeader as cn } from "../../layouts/src/page-header/page-header.js";
-import { ThemeProvider as ln, applyTheme as un, setTheme as dn, themePreloadScript as fn, themeSignal as pn, useTheme as mn } from "./theme.js";
-import { DismissableLayer as hn, ErrorBoundary as gn, FocusScope as _n, Portal as vn, Presence as yn, Slot as bn, SuspenseBoundary as xn, VisuallyHidden as Sn, batch as Cn, cn as wn, composeRefs as Tn, computePosition as En, computed as Dn, createMachine as On, createScope as kn, createStreamBuffer as An, effect as jn, getLinkComponent as Mn, mergeProps as Nn, setLinkComponent as Pn, signal as Fn, useAnchorPosition as In, useClipboard as Ln, useComputed as Rn, useControllableSignal as zn, useDisclosure as Bn, useEffectPropSignal as Vn, useId as Hn, useMachine as Un, useMediaQuery as Wn, useRovingFocus as Gn, useScope as Kn, useScrollLock as qn, useSignal as Jn, useSignalEffect as Yn, useSignals as Xn, useStreamBuffer as Zn, useTypeahead as Qn } from "@cascivo/core";
-export { M as Accordion, N as AccordionContent, P as AccordionItem, F as AccordionTrigger, I as ActionSheet, d as Alert, ye as AlertDialog, Yt as AppShell, _t as AspectRatio, sn as AutoGrid, f as Avatar, p as AvatarGroup, c as Badge, $e as Blockquote, xe as BottomSheet, z as Breadcrumb, t as Button, dt as ButtonGroup, Ft as Calendar, r as Card, i as CardContent, a as CardFooter, o as CardHeader, s as CardTitle, Rt as Carousel, an as Center, Xt as ChatBubble, v as Checkbox, He as CheckboxCard, Qe as Code, Ut as CodeSnippet, gt as Collapsible, Lt as ColorPicker, rn as Columns, ce as Combobox, ne as CommandMenu, we as Comparison, Tt as ContainedList, Et as ContainedListItem, Se as ContextMenu, Ce as ContextMenuItem, Ue as CopyButton, Dt as DataList, te as DataTable, le as DatePicker, It as DateRangePicker, hn as DismissableLayer, Bt as Dock, Vt as Drawer, w as Dropdown, Ie as Editable, X as EmptyState, gn as ErrorBoundary, Z as Fab, ct as Field, ue as FileUploader, lt as Filter, nn as Flex, _n as FocusScope, ae as Form, en as Grid, tn as GridItem, H as Header, Be as HeaderPanel, Xe as Heading, Te as HoverCard, Ee as HoverCardContent, De as HoverCardTrigger, ut as IconButton, h as Image, Kt as Indicator, pt as InlineLoading, n as Input, Ne as InputGroup, Pe as InputGroupAddon, kt as Item, At as ItemActions, jt as ItemContent, Mt as ItemDescription, Nt as ItemMedia, Pt as ItemTitle, qt as Join, L as Kbd, st as Label, R as Link, et as List, tt as ListItem, nt as LogViewer, he as Menu, vt as MenuButton, ge as MenuItem, _e as MenuSeparator, ve as MenuTrigger, bt as Menubar, l as Modal, ke as MultiSelect, Ht as NativeSelect, xt as NavigationMenu, mt as Notification, ee as NumberInput, je as OtpInput, Q as OverflowMenu, cn as PageHeader, G as Pagination, Oe as PasswordInput, fe as Popover, pe as PopoverContent, me as PopoverTrigger, vn as Portal, yn as Presence, Je as Progress, Y as ProgressBar, Ye as ProgressCircle, K as ProgressIndicator, rt as Prose, it as PullToRefresh, at as QrCode, Zt as RadialProgress, y as Radio, Le as RadioCard, Re as RadioCardGroup, b as RadioGroup, Fe as RatingGroup, ot as RelativeTime, zt as Resizable, ht as ScrollArea, $ as Search, Me as SegmentedControl, _ as Select, u as Separator, be as Sheet, ze as ShellHeader, W as SideNav, J as Skeleton, Ke as SkipNavLink, qe as SkipNavTarget, S as Slider, bn as Slot, on as Spacer, e as Spinner, Jt as Stack, We as Stat, Ge as Status, Wt as Steps, wt as StructuredList, xn as SuspenseBoundary, Qt as Swap, $t as SwipeItem, Ve as Switcher, O as Tabs, k as TabsContent, A as TabsList, j as TabsTrigger, q as Tag, Ae as TagsInput, Ze as Text, g as Textarea, ln as ThemeProvider, Gt as Tile, de as TimePicker, Ot as Timeline, T as ToastProvider, B as Toc, x as Toggle, ft as ToggleGroup, yt as Toggletip, C as Tooltip, St as TreeView, m as User, Sn as VisuallyHidden, un as applyTheme, Cn as batch, wn as cn, Tn as composeRefs, En as computePosition, Dn as computed, oe as createForm, On as createMachine, kn as createScope, An as createStreamBuffer, E as dismissAllToasts, jn as effect, re as fuzzyMatch, ie as fuzzyScore, Mn as getLinkComponent, Nn as mergeProps, Pn as setLinkComponent, dn as setTheme, Fn as signal, fn as themePreloadScript, pn as themeSignal, Ct as treeViewMessages, In as useAnchorPosition, Ln as useClipboard, Rn as useComputed, zn as useControllableSignal, Bn as useDisclosure, Vn as useEffectPropSignal, se as useForm, Hn as useId, Un as useMachine, Wn as useMediaQuery, U as usePopover, Gn as useRovingFocus, Kn as useScope, qn as useScrollLock, Jn as useSignal, Yn as useSignalEffect, Xn as useSignals, Zn as useStreamBuffer, mn as useTheme, D as useToast, V as useTocFromRegion, Qn as useTypeahead };
+import { LargeTitleHeader as Vt } from "../../large-title-header/large-title-header.js";
+import { InfiniteScroll as Ht } from "../../infinite-scroll/infinite-scroll.js";
+import { ReorderList as Ut } from "../../reorder-list/reorder-list.js";
+import { VirtualList as Wt } from "../../virtual-list/virtual-list.js";
+import { WheelPicker as Gt } from "../../wheel-picker/wheel-picker.js";
+import { Drawer as Kt } from "../../drawer/drawer.js";
+import { NativeSelect as qt } from "../../native-select/native-select.js";
+import { CodeSnippet as Jt } from "../../code-snippet/code-snippet.js";
+import { Steps as Yt } from "../../steps/steps.js";
+import { Tile as Xt } from "../../tile/tile.js";
+import { Indicator as Zt } from "../../indicator/indicator.js";
+import { Join as Qt } from "../../join/join.js";
+import { Stack as $t } from "../../stack/stack.js";
+import { AppShell as en } from "../../app-shell/app-shell.js";
+import { ChatBubble as tn } from "../../chat-bubble/chat-bubble.js";
+import { RadialProgress as nn } from "../../radial-progress/radial-progress.js";
+import { Swap as rn } from "../../swap/swap.js";
+import { SwipeItem as an } from "../../swipe-item/swipe-item.js";
+import { Grid as on, GridItem as sn } from "../../layouts/src/grid/grid.js";
+import { Flex as cn } from "../../layouts/src/flex/flex.js";
+import { Columns as ln } from "../../layouts/src/columns/columns.js";
+import { Center as un } from "../../layouts/src/center/center.js";
+import { Spacer as dn } from "../../layouts/src/spacer/spacer.js";
+import { AutoGrid as fn } from "../../layouts/src/auto-grid/auto-grid.js";
+import { PageHeader as pn } from "../../layouts/src/page-header/page-header.js";
+import { DismissableLayer as mn, ErrorBoundary as hn, FocusScope as gn, Portal as _n, Presence as vn, Slot as yn, SuspenseBoundary as bn, ThemeProvider as xn, VisuallyHidden as Sn, applyTheme as Cn, batch as wn, cn as Tn, composeRefs as En, computePosition as Dn, computed as On, createMachine as kn, createScope as An, createStreamBuffer as jn, effect as Mn, getLinkComponent as Nn, mergeProps as Pn, setLinkComponent as Fn, setTheme as In, signal as Ln, themePreloadScript as Rn, themeSignal as zn, useAnchorPosition as Bn, useClipboard as Vn, useComputed as Hn, useControllableSignal as Un, useDisclosure as Wn, useEffectPropSignal as Gn, useId as Kn, useMachine as qn, useMediaQuery as Jn, useRovingFocus as Yn, useScope as Xn, useScrollLock as Zn, useSignal as Qn, useSignalEffect as $n, useSignals as er, useStreamBuffer as tr, useTheme as nr, useTypeahead as rr } from "@cascivo/core";
+export { M as Accordion, N as AccordionContent, P as AccordionItem, F as AccordionTrigger, I as ActionSheet, d as Alert, ye as AlertDialog, en as AppShell, _t as AspectRatio, fn as AutoGrid, f as Avatar, p as AvatarGroup, c as Badge, $e as Blockquote, xe as BottomSheet, z as Breadcrumb, t as Button, dt as ButtonGroup, Ft as Calendar, r as Card, i as CardContent, a as CardFooter, o as CardHeader, s as CardTitle, Rt as Carousel, un as Center, tn as ChatBubble, v as Checkbox, He as CheckboxCard, Qe as Code, Jt as CodeSnippet, gt as Collapsible, Lt as ColorPicker, ln as Columns, ce as Combobox, ne as CommandMenu, we as Comparison, Tt as ContainedList, Et as ContainedListItem, Se as ContextMenu, Ce as ContextMenuItem, Ue as CopyButton, Dt as DataList, te as DataTable, le as DatePicker, It as DateRangePicker, mn as DismissableLayer, Bt as Dock, Kt as Drawer, w as Dropdown, Ie as Editable, X as EmptyState, hn as ErrorBoundary, Z as Fab, ct as Field, ue as FileUploader, lt as Filter, cn as Flex, gn as FocusScope, ae as Form, on as Grid, sn as GridItem, H as Header, Be as HeaderPanel, Xe as Heading, Te as HoverCard, Ee as HoverCardContent, De as HoverCardTrigger, ut as IconButton, h as Image, Zt as Indicator, Ht as InfiniteScroll, pt as InlineLoading, n as Input, Ne as InputGroup, Pe as InputGroupAddon, kt as Item, At as ItemActions, jt as ItemContent, Mt as ItemDescription, Nt as ItemMedia, Pt as ItemTitle, Qt as Join, L as Kbd, st as Label, Vt as LargeTitleHeader, R as Link, et as List, tt as ListItem, nt as LogViewer, he as Menu, vt as MenuButton, ge as MenuItem, _e as MenuSeparator, ve as MenuTrigger, bt as Menubar, l as Modal, ke as MultiSelect, qt as NativeSelect, xt as NavigationMenu, mt as Notification, ee as NumberInput, je as OtpInput, Q as OverflowMenu, pn as PageHeader, G as Pagination, Oe as PasswordInput, fe as Popover, pe as PopoverContent, me as PopoverTrigger, _n as Portal, vn as Presence, Je as Progress, Y as ProgressBar, Ye as ProgressCircle, K as ProgressIndicator, rt as Prose, it as PullToRefresh, at as QrCode, nn as RadialProgress, y as Radio, Le as RadioCard, Re as RadioCardGroup, b as RadioGroup, Fe as RatingGroup, ot as RelativeTime, Ut as ReorderList, zt as Resizable, ht as ScrollArea, $ as Search, Me as SegmentedControl, _ as Select, u as Separator, be as Sheet, ze as ShellHeader, W as SideNav, J as Skeleton, Ke as SkipNavLink, qe as SkipNavTarget, S as Slider, yn as Slot, dn as Spacer, e as Spinner, $t as Stack, We as Stat, Ge as Status, Yt as Steps, wt as StructuredList, bn as SuspenseBoundary, rn as Swap, an as SwipeItem, Ve as Switcher, O as Tabs, k as TabsContent, A as TabsList, j as TabsTrigger, q as Tag, Ae as TagsInput, Ze as Text, g as Textarea, xn as ThemeProvider, Xt as Tile, de as TimePicker, Ot as Timeline, T as ToastProvider, B as Toc, x as Toggle, ft as ToggleGroup, yt as Toggletip, C as Tooltip, St as TreeView, m as User, Wt as VirtualList, Sn as VisuallyHidden, Gt as WheelPicker, Cn as applyTheme, wn as batch, Tn as cn, En as composeRefs, Dn as computePosition, On as computed, oe as createForm, kn as createMachine, An as createScope, jn as createStreamBuffer, E as dismissAllToasts, Mn as effect, re as fuzzyMatch, ie as fuzzyScore, Nn as getLinkComponent, Pn as mergeProps, Fn as setLinkComponent, In as setTheme, Ln as signal, Rn as themePreloadScript, zn as themeSignal, Ct as treeViewMessages, Bn as useAnchorPosition, Vn as useClipboard, Hn as useComputed, Un as useControllableSignal, Wn as useDisclosure, Gn as useEffectPropSignal, se as useForm, Kn as useId, qn as useMachine, Jn as useMediaQuery, U as usePopover, Yn as useRovingFocus, Xn as useScope, Zn as useScrollLock, Qn as useSignal, $n as useSignalEffect, er as useSignals, tr as useStreamBuffer, nr as useTheme, D as useToast, V as useTocFromRegion, rr as useTypeahead };

package/dist/node/reorder-list/reorder-list.js

@@ -0,0 +1,143 @@
+"use client";
+
+import e from "./reorder-list.module.js";
+import { useRef as t } from "react";
+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/reorder-list/reorder-list.tsx
+function u(e) {
+	return e.name ?? (typeof e.label == "string" ? e.label : e.id);
+}
+function d(e, t, n) {
+	let r = e.slice(), [i] = r.splice(t, 1);
+	return i && r.splice(n, 0, i), r;
+}
+function f({ value: f, onValueChange: p, disabled: m = !1, labels: h, className: g }) {
+	a();
+	let _ = t(null), v = r(null), y = r(""), b = t(f);
+	b.current = f;
+	let x = t(p);
+	x.current = p;
+	let S = t(m);
+	S.current = m;
+	let C = t(null), w = (e, t, n) => {
+		y.value = e ? e.replace("{name}", n.name).replace("{position}", String(n.position)).replace("{total}", String(n.total)) : t;
+	}, T = (e, t) => {
+		let n = b.current, r = Math.max(0, Math.min(n.length - 1, t));
+		if (r === e) return;
+		let i = n[e];
+		if (!i) return;
+		x.current(d(n, e, r)), v.value = r;
+		let a = {
+			name: u(i),
+			position: r + 1,
+			total: n.length
+		};
+		w(h?.moved, s(o.reorderList.moved, a), a);
+	}, E = (e) => {
+		let t = b.current, n = t[e];
+		if (!n) return;
+		C.current = t, v.value = e;
+		let r = {
+			name: u(n),
+			position: e + 1,
+			total: t.length
+		};
+		w(h?.grabbed, s(o.reorderList.grabbed, r), r);
+	}, D = () => {
+		let e = v.value;
+		if (e === null) return;
+		let t = b.current, n = t[e];
+		if (C.current = null, v.value = null, !n) return;
+		let r = {
+			name: u(n),
+			position: e + 1,
+			total: t.length
+		};
+		w(h?.dropped, s(o.reorderList.dropped, r), r);
+	}, O = () => {
+		let e = C.current, t = v.value;
+		if (C.current = null, v.value = null, !e) return;
+		x.current(e);
+		let n = t === null ? void 0 : e[t], r = {
+			name: n ? u(n) : "",
+			position: (t ?? 0) + 1,
+			total: e.length
+		};
+		w(h?.cancelled, s(o.reorderList.cancelled, r), r);
+	}, k = (e, t) => {
+		if (m) return;
+		let n = v.value;
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault(), n === t ? D() : E(t);
+			return;
+		}
+		if (e.key === "Escape" && n !== null) {
+			e.preventDefault(), O();
+			return;
+		}
+		n === t && (e.key === "ArrowUp" ? (e.preventDefault(), T(t, t - 1)) : e.key === "ArrowDown" && (e.preventDefault(), T(t, t + 1)));
+	};
+	return i(() => {
+		let e = _.current;
+		if (!e || typeof window > "u") return;
+		let t = (t) => {
+			let n = v.value;
+			if (n === null || S.current) return;
+			let r = [...e.querySelectorAll("[data-reorder-row]")].findIndex((e) => {
+				let n = e.getBoundingClientRect();
+				return t.clientY >= n.top && t.clientY <= n.bottom;
+			});
+			r !== -1 && r !== n && T(n, r);
+		}, n = () => {
+			v.value !== null && C.current && D();
+		};
+		return window.addEventListener("pointermove", t), window.addEventListener("pointerup", n), window.addEventListener("pointercancel", n), () => {
+			window.removeEventListener("pointermove", t), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n);
+		};
+	}), /* @__PURE__ */ l("div", {
+		className: n(e.root, g),
+		children: [/* @__PURE__ */ c("ul", {
+			ref: _,
+			className: e.list,
+			children: f.map((t, n) => /* @__PURE__ */ l("li", {
+				"data-reorder-row": "",
+				"data-active": v.value === n ? "" : void 0,
+				className: e.row,
+				children: [/* @__PURE__ */ c("button", {
+					type: "button",
+					disabled: m,
+					"aria-label": h?.handle ? h.handle.replace("{name}", u(t)) : s(o.reorderList.handle, { name: u(t) }),
+					"aria-pressed": v.value === n,
+					className: e.handle,
+					onKeyDown: (e) => k(e, n),
+					onPointerDown: () => {
+						m || E(n);
+					},
+					children: /* @__PURE__ */ c("svg", {
+						"aria-hidden": "true",
+						viewBox: "0 0 16 16",
+						className: e.grip,
+						children: /* @__PURE__ */ c("path", {
+							d: "M6 4h.01M10 4h.01M6 8h.01M10 8h.01M6 12h.01M10 12h.01",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round"
+						})
+					})
+				}), /* @__PURE__ */ c("span", {
+					className: e.label,
+					children: t.label
+				})]
+			}, t.id))
+		}), /* @__PURE__ */ c("span", {
+			role: "status",
+			"aria-live": "polite",
+			className: e.srOnly,
+			children: y.value
+		})]
+	});
+}
+//#endregion
+export { f as ReorderList };

package/dist/node/reorder-list/reorder-list.module.js

@@ -0,0 +1,11 @@
+var e = {
+	root: "_root_1tie9_4",
+	list: "_list_1tie9_8",
+	row: "_row_1tie9_16",
+	handle: "_handle_1tie9_34",
+	grip: "_grip_1tie9_69",
+	label: "_label_1tie9_74",
+	srOnly: "_srOnly_1tie9_79"
+};
+//#endregion
+export { e as default };

package/dist/node/search/search.js

@@ -2,7 +2,7 @@
 
 import e from "./search.module.js";
 import { useRef as t } from "react";
-import { cn as n, focusElement as r, useId as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { cn as n, focusElement as r, useControllableSignal as i, useId as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/search/search.tsx
@@ -30,9 +30,10 @@ function f() {
 }
 function p({ value: p, defaultValue: m = "", onValueChange: h, onChange: g, onSearch: _, debounceMs: v = 300, placeholder: y, size: b = "md", label: x, disabled: S = !1, clearLabel: C, id: w, className: T }) {
 	s();
-	let E = y ?? l(c.search.placeholder), D = x ?? l(c.search.label), O = C ?? l(c.search.clear), k = t(null), A = i("cascade-search"), j = w ?? A, M = p !== void 0, N = a(M ? p : m);
-	M && (N.value = p);
-	let P = t(_);
+	let E = y ?? l(c.search.placeholder), D = x ?? l(c.search.label), O = C ?? l(c.search.clear), k = t(null), A = a("cascade-search"), j = w ?? A, M = p !== void 0, [N] = i({
+		value: p,
+		defaultValue: m
+	}), P = t(_);
 	P.current = _;
 	let F = t(null), I = () => {
 		F.current !== null && (clearTimeout(F.current), F.current = null);

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

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

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

@@ -10,6 +10,7 @@ var s = "cascade-skip-target", c = t(function({ targetId: t = s, labels: c, clas
 	r();
 	let f = c?.label ?? a(i.skipNav.label);
 	return /* @__PURE__ */ o("a", {
+		ref: d,
 		href: `#${t}`,
 		className: n(e.link, l),
 		...u,