@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/side-nav/SideNav.d.ts

@@ -1,6 +1,3 @@
 import type { SideNavProps } from './side-nav-types.js';
-/** NAV-001: Figma715:12/145. Width208/56, pearl100, inset12, 28px rows; rail labels use Tooltip.
- * NAV-003: App owns active route, persistence and links. Collapsing the rail preserves section/group state.
- * NAV-004: Overflow fades derive from scroll geometry. No cookies, global shortcuts, or private app dependencies.
- */
-export declare function SideNav({ label, sections, activeId, collapseConfig, expansionConfig, header, footer, modeConfig, renderLink, className, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+/** Mobile navigation uses the existing modal Sheet for focus trapping and dismissal. */
+export declare function SideNav(props: SideNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,110 +3,152 @@ import { IconButton as e } from "../icon-button/IconButton.js";
 import { ChevronDownIcon as t } from "../icons/ChevronDownIcon.js";
 import { SegmentedControl as n } from "../segmented-control/SegmentedControl.js";
 import { LayoutLeftIcon as r } from "../icons/LayoutLeftIcon.js";
-import { SideNavItemView as i } from "./SideNavItemView.js";
-import { useNavScroll as a } from "./useNavScroll.js";
-import o from "clsx";
-import { useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Sheet as i } from "../sheet/Sheet.js";
+import { SideNavItemView as a } from "./SideNavItemView.js";
+import { useNavScroll as o } from "./useNavScroll.js";
+import s from "clsx";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/side-nav/SideNav.tsx
-function u({ label: u, sections: d, activeId: f, collapseConfig: p, expansionConfig: m, header: h, footer: g, modeConfig: _, renderLink: v, className: y }) {
-	let [b, x] = s(p?.defaultValue ?? !1), S = p?.value ?? b, [C, w] = s(m?.defaultValue ?? d.filter((e) => e.collapsible).map((e) => e.id)), T = m?.value ?? C, E = new Set(T), { viewport: D, content: O, edges: k } = a(), A = (e) => {
-		x(e), p?.onValueChange?.(e);
-	}, j = (e) => {
-		let t = T.includes(e) ? T.filter((t) => t !== e) : [...T, e];
-		w(t), m?.onValueChange?.(t);
+function p({ label: i, sections: c, activeId: p, collapseConfig: m, expansionConfig: h, header: g, footer: _, modeConfig: v, renderLink: y, className: b, mobile: x = !1 }) {
+	let [S, C] = u(m?.defaultValue ?? !1), w = !x && (m?.value ?? S), T = l(null), [E, D] = u(h?.defaultValue ?? c.filter((e) => e.collapsible).map((e) => e.id)), O = h?.value ?? E, k = new Set(O), { viewport: A, content: j, edges: M } = o(), N = (e) => {
+		C(e), m?.onValueChange?.(e);
+	}, P = (e) => {
+		let t = O.includes(e) ? O.filter((t) => t !== e) : [...O, e];
+		D(t), h?.onValueChange?.(t);
 	};
-	return /* @__PURE__ */ l("nav", {
-		"aria-label": u,
-		"data-collapsed": S,
-		className: o("pf:box-border pf:flex pf:shrink-0 pf:flex-col pf:gap-3xl pf:h-full pf:min-h-0 pf:max-w-full pf:p-lg pf:bg-soft-pearl-100 pf:font-body pf:text-label-13", S ? "pf:w-[56px]" : "pf:w-[208px]", y),
+	return /* @__PURE__ */ f("nav", {
+		ref: T,
+		onPointerDownCapture: () => {
+			T.current?.setAttribute("data-motion", "pointer");
+		},
+		onKeyDownCapture: () => {
+			T.current?.removeAttribute("data-motion");
+		},
+		"aria-label": i,
+		"data-collapsed": w,
+		className: s("pf:box-border pf:flex pf:shrink-0 pf:flex-col pf:gap-3xl pf:h-full pf:min-h-0 pf:max-w-full pf:overflow-x-clip pf:transition-none pf:motion-safe:data-[motion=pointer]:transition-[width] pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:p-lg pf:bg-soft-pearl-100 pf:font-body pf:text-label-13", x ? "pf:w-full" : w ? "pf:w-[56px]" : "pf:w-[208px] pf:[&>*]:min-w-[184px]", b),
 		children: [
-			/* @__PURE__ */ l("header", {
-				className: o("pf:shrink-0 pf:flex pf:gap-lg pf:items-center", S ? "pf:flex-col" : "pf:justify-between"),
-				children: [/* @__PURE__ */ c("div", {
-					className: "pf:min-w-0 pf:overflow-hidden",
-					children: typeof h == "function" ? h(S) : h
-				}), /* @__PURE__ */ c(e, {
-					label: S ? "Expand sidebar" : "Collapse sidebar",
+			/* @__PURE__ */ f("header", {
+				className: s("pf:shrink-0 pf:flex pf:gap-lg pf:items-center", w ? "pf:flex-col" : "pf:justify-between"),
+				children: [/* @__PURE__ */ d("div", {
+					className: "pf:min-w-0 pf:overflow-hidden pf:whitespace-nowrap",
+					children: typeof g == "function" ? g(w) : g
+				}), !x && /* @__PURE__ */ d(e, {
+					label: w ? "Expand sidebar" : "Collapse sidebar",
 					size: "xs",
 					onClick: () => {
-						A(!S);
+						N(!w);
 					},
-					children: /* @__PURE__ */ c(r, {})
+					children: /* @__PURE__ */ d(r, {})
 				})]
 			}),
-			_ && /* @__PURE__ */ c(n, {
-				..._,
+			v && /* @__PURE__ */ d(n, {
+				...v,
 				size: "sm",
-				className: o(S ? "pf:flex-col" : "pf:w-full", _.className),
-				options: S ? _.options.map((e) => ({
+				className: s(w ? "pf:flex-col" : "pf:w-full pf:[&_.pf-segment]:flex-1 pf:[&_.pf-segment]:basis-0", v.className),
+				options: w ? v.options.map((e) => ({
 					...e,
 					iconOnly: !0,
-					leadingIcon: /* @__PURE__ */ c("span", {
+					leadingIcon: /* @__PURE__ */ d("span", {
 						className: "pf:inline-flex pf:size-[16px] pf:items-center pf:justify-center",
 						children: e.leadingIcon ?? e.label.slice(0, 1)
 					})
-				})) : _.options
+				})) : v.options
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ f("div", {
 				className: "pf:relative pf:flex-1 pf:min-h-0",
 				children: [
-					/* @__PURE__ */ c("div", {
-						ref: D,
+					/* @__PURE__ */ d("div", {
+						ref: A,
 						className: "pf:h-full pf:overflow-y-auto pf:overscroll-contain pf:[scrollbar-width:none]",
-						children: /* @__PURE__ */ c("div", {
-							ref: O,
+						children: /* @__PURE__ */ d("div", {
+							ref: j,
 							className: "pf:flex pf:flex-col pf:gap-3xl",
-							children: d.map((e) => /* @__PURE__ */ l("section", {
+							children: c.map((e) => /* @__PURE__ */ f("section", {
 								"aria-label": e.label,
 								className: "pf:min-w-0",
-								children: [e.label && !S && (e.collapsible ? /* @__PURE__ */ l("button", {
+								children: [e.label && !w && (e.collapsible ? /* @__PURE__ */ f("button", {
 									type: "button",
-									"aria-expanded": E.has(e.id),
+									"aria-expanded": k.has(e.id),
 									onClick: () => {
-										j(e.id);
+										P(e.id);
 									},
 									className: "pf:flex pf:items-center pf:gap-xs pf:w-full pf:min-h-[28px] pf:px-md pf:py-xs pf:mb-sm pf:border-0 pf:rounded-sm pf:bg-transparent pf:text-label-12 pf:font-body pf:text-soft-pearl-800 pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
-									children: [e.label, /* @__PURE__ */ c(t, {
+									children: [e.label, /* @__PURE__ */ d(t, {
 										size: 12,
-										className: E.has(e.id) ? "" : "pf:-rotate-90"
+										className: k.has(e.id) ? "" : "pf:-rotate-90"
 									})]
-								}) : /* @__PURE__ */ c("h2", {
+								}) : /* @__PURE__ */ d("h2", {
 									className: "pf:m-0 pf:mb-sm pf:px-md pf:py-sm pf:text-label-12 pf:font-normal pf:text-soft-pearl-800",
 									children: e.label
-								})), (S || !e.collapsible || E.has(e.id)) && /* @__PURE__ */ c("ul", {
+								})), (w || !e.collapsible || k.has(e.id)) && /* @__PURE__ */ d("ul", {
 									className: "pf:m-0 pf:p-0 pf:list-none pf:flex pf:flex-col pf:gap-xxs",
-									children: e.items.map((e) => /* @__PURE__ */ c(i, {
+									children: e.items.map((e) => /* @__PURE__ */ d(a, {
 										item: e,
-										collapsed: S,
-										activeId: f,
-										expanded: E,
-										toggle: j,
+										collapsed: w,
+										activeId: p,
+										expanded: k,
+										toggle: P,
 										expandRail: () => {
-											A(!1);
+											N(!1);
 										},
-										renderLink: v
+										renderLink: y
 									}, e.id))
 								})]
 							}, e.id))
 						})
 					}),
-					k.top && /* @__PURE__ */ c("div", {
+					M.top && /* @__PURE__ */ d("div", {
 						"aria-hidden": "true",
 						className: "pf:pointer-events-none pf:absolute pf:inset-x-0 pf:top-0 pf:h-[48px] pf:bg-[linear-gradient(to_bottom,var(--pf-color-soft-pearl-100),transparent)]"
 					}),
-					k.bottom && /* @__PURE__ */ c("div", {
+					M.bottom && /* @__PURE__ */ d("div", {
 						"aria-hidden": "true",
 						className: "pf:pointer-events-none pf:absolute pf:inset-x-0 pf:bottom-0 pf:h-[48px] pf:bg-[linear-gradient(to_top,var(--pf-color-soft-pearl-100),transparent)]"
 					})
 				]
 			}),
-			g && /* @__PURE__ */ c("footer", {
-				className: "pf:shrink-0 pf:min-w-0",
-				children: typeof g == "function" ? g(S) : g
+			_ && /* @__PURE__ */ d("footer", {
+				className: "pf:shrink-0 pf:min-w-0 pf:whitespace-nowrap",
+				children: typeof _ == "function" ? _(w) : _
 			})
 		]
 	});
 }
+function m(t) {
+	let [n, a] = u(!1), [o, s] = u(!1);
+	return c(() => {
+		if (typeof matchMedia != "function") return;
+		let e = matchMedia("(max-width: 639px)"), t = () => {
+			a(e.matches), e.matches || s(!1);
+		};
+		return t(), e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t);
+		};
+	}, []), n ? /* @__PURE__ */ d(i, {
+		title: t.label,
+		modal: !0,
+		size: "sm",
+		open: o,
+		onOpenChange: s,
+		dismissConfig: { outsidePress: !0 },
+		trigger: /* @__PURE__ */ d(e, {
+			label: `Open ${t.label} sidebar`,
+			children: /* @__PURE__ */ d(r, {})
+		}),
+		children: /* @__PURE__ */ d("div", {
+			role: "presentation",
+			className: "pf:h-full",
+			onClick: (e) => {
+				e.target.closest("a[href]:not([aria-disabled=\"true\"])") && s(!1);
+			},
+			children: /* @__PURE__ */ d(p, {
+				...t,
+				mobile: !0
+			})
+		})
+	}) : /* @__PURE__ */ d(p, { ...t });
+}
 //#endregion
-export { u as SideNav };
+export { m as SideNav };

package/dist/components/side-nav/SideNavItemView.d.ts

@@ -10,6 +10,6 @@ interface ItemViewProps {
     renderLink?: NavigationLinkConfig['render'];
     depth?: number;
 }
-/** NAV-002: Figma714:15 selected pearl300, icon blue700; weight never changes. One row surface; distinct link/expansion targets. */
+/** NAV-002: Figma714:15 selected pearl300, icon blue700; weight never changes. One row surface; group rows toggle expansion. */
 export declare function SideNavItemView({ item, collapsed, activeId, expanded, toggle, expandRail, renderLink, depth, }: ItemViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,133 +2,118 @@ import { Tooltip as e } from "../tooltip/Tooltip.js";
 import { ControlIcon as t } from "../controls/ControlIcon.js";
 import { IconButton as n } from "../icon-button/IconButton.js";
 import { NavigationLink as r } from "../controls/NavigationLink.js";
-import { ChevronRightIcon as i } from "../icons/ChevronRightIcon.js";
-import { Dropdown as a } from "../dropdown/Dropdown.js";
-import { DotsHorizontalIcon as o } from "../icons/DotsHorizontalIcon.js";
-import { ChevronDownIcon as s } from "../icons/ChevronDownIcon.js";
-import { RunActivity as c } from "../run-list/RunActivity.js";
-import { Badge as l } from "../badge/Badge.js";
-import u from "clsx";
-import { useId as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Dropdown as i } from "../dropdown/Dropdown.js";
+import { DotsHorizontalIcon as a } from "../icons/DotsHorizontalIcon.js";
+import { ChevronDownIcon as o } from "../icons/ChevronDownIcon.js";
+import { RunActivity as s } from "../run-list/RunActivity.js";
+import { Badge as c } from "../badge/Badge.js";
+import l from "clsx";
+import { useId as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/side-nav/SideNavItemView.tsx
-function h({ item: g, collapsed: _, activeId: v, expanded: y, toggle: b, expandRail: x, renderLink: S, depth: C = 0 }) {
-	let w = d(), T = g.kind === "group", E = T && y.has(g.id), D = v === g.id, O = g.disableConfig?.isDisabled === !0, k = () => {
-		O || (_ && x(), (!E || !_) && b(g.id));
-	}, A = [
-		g.label,
-		g.activityConfig?.label,
-		g.count === void 0 ? "" : String(g.count),
-		g.unread ? "Unread" : "",
-		O ? g.disableConfig?.reason : ""
-	].filter(Boolean).join(" · "), j = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("span", {
-		className: u("pf:relative pf:shrink-0 pf:inline-flex pf:items-center pf:justify-center pf:size-[16px]", D ? "pf:text-blue-700" : "pf:text-soft-pearl-800"),
-		children: [g.presentation === "conversation" ? /* @__PURE__ */ p(c, { item: {
-			status: g.activityConfig?.status === "idle" || !g.activityConfig ? "completed" : g.activityConfig.status,
-			unread: g.unread
-		} }) : /* @__PURE__ */ p(t, {
+function m({ item: h, collapsed: g, activeId: _, expanded: v, toggle: y, expandRail: b, renderLink: x, depth: S = 0 }) {
+	let C = u(), w = h.kind === "group", T = w && v.has(h.id), E = _ === h.id, D = h.disableConfig?.isDisabled === !0, O = () => {
+		D || (g && b(), (!T || !g) && y(h.id));
+	}, k = [
+		h.label,
+		h.activityConfig?.label,
+		h.count === void 0 ? "" : String(h.count),
+		h.unread ? "Unread" : "",
+		D ? h.disableConfig?.reason : ""
+	].filter(Boolean).join(" · "), A = /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("span", {
+		className: l("pf:relative pf:shrink-0 pf:inline-flex pf:items-center pf:justify-center pf:size-[16px]", E ? "pf:text-blue-700" : "pf:text-soft-pearl-800"),
+		children: [h.presentation === "conversation" ? /* @__PURE__ */ f(s, { item: {
+			status: h.activityConfig?.status === "idle" || !h.activityConfig ? "completed" : h.activityConfig.status,
+			unread: h.unread && (g || h.count === void 0)
+		} }) : /* @__PURE__ */ f(t, {
 			size: 16,
-			children: g.icon
-		}), _ && g.presentation !== "conversation" && g.unread && /* @__PURE__ */ p("span", { className: "pf:absolute pf:-end-xs pf:-top-xs pf:size-[5px] pf:rounded-full pf:bg-blue-700" })]
-	}), !_ && /* @__PURE__ */ m(f, { children: [
-		/* @__PURE__ */ p("span", {
+			children: h.icon
+		}), g && h.presentation !== "conversation" && h.unread && /* @__PURE__ */ f("span", { className: "pf:absolute pf:-end-xs pf:-top-xs pf:size-[5px] pf:rounded-full pf:bg-blue-700" })]
+	}), !g && /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ f("span", {
 			className: "pf:flex-1 pf:min-w-0 pf:truncate",
-			children: g.label
+			children: h.label
 		}),
-		g.count !== void 0 && /* @__PURE__ */ p("span", {
+		h.count !== void 0 && /* @__PURE__ */ f("span", {
 			className: "pf:shrink-0 pf:max-w-[48px] pf:truncate pf:text-label-12 pf:text-soft-pearl-800",
-			title: String(g.count),
-			children: g.presentation === "conversation" ? /* @__PURE__ */ p(l, { label: `${String(g.count)} new` }) : g.count
+			title: String(h.count),
+			children: h.presentation === "conversation" ? /* @__PURE__ */ f(c, { label: `${String(h.count)} new` }) : h.count
 		}),
-		g.presentation !== "conversation" && g.unread && /* @__PURE__ */ p("span", { className: "pf:size-[5px] pf:shrink-0 pf:rounded-full pf:bg-blue-700" })
-	] })] }), M = u("pf:box-border pf:flex pf:items-center pf:gap-lg pf:min-w-0 pf:min-h-[28px] pf:rounded-sm pf:border-0 pf:font-body pf:text-label-13 pf:font-normal pf:no-underline pf:text-start pf:cursor-pointer pf:bg-transparent pf:group-hover/nav-item:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700", _ ? "pf:size-[28px] pf:justify-center pf:p-0" : "pf:flex-1 pf:px-md pf:py-xs", g.presentation === "conversation" && !_ && "pf:min-h-[32px]", D ? "pf:text-soft-pearl-1000" : "pf:text-soft-pearl-900", O && "pf:opacity-50 pf:cursor-not-allowed"), N = g.linkConfig ? /* @__PURE__ */ p(r, {
+		h.presentation !== "conversation" && h.unread && h.count === void 0 && /* @__PURE__ */ f("span", { className: "pf:size-[5px] pf:shrink-0 pf:rounded-full pf:bg-blue-700" })
+	] })] }), j = l("pf:box-border pf:flex pf:items-center pf:gap-lg pf:min-w-0 pf:min-h-[28px] pf:rounded-sm pf:border-0 pf:font-body pf:text-label-13 pf:font-normal pf:no-underline pf:text-start pf:cursor-pointer pf:bg-transparent pf:group-hover/nav-item:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700", g ? "pf:size-[28px] pf:justify-center pf:p-0" : "pf:flex-1 pf:px-md pf:py-xs", h.presentation === "conversation" && !g && "pf:min-h-[32px]", E ? "pf:text-soft-pearl-1000" : "pf:text-soft-pearl-900", D && "pf:opacity-50 pf:cursor-not-allowed"), M = h.linkConfig && !w ? /* @__PURE__ */ f(r, {
 		linkConfig: {
-			...g.linkConfig,
-			render: g.linkConfig.render ?? S
+			...h.linkConfig,
+			render: h.linkConfig.render ?? x
 		},
-		className: M,
-		"aria-label": g.label,
-		"aria-describedby": A === g.label ? void 0 : w,
-		"aria-current": D ? "page" : void 0,
-		"aria-disabled": O || void 0,
+		className: j,
+		"aria-label": h.label,
+		"aria-describedby": k === h.label ? void 0 : C,
+		"aria-current": E ? "page" : void 0,
+		"aria-disabled": D || void 0,
 		onClick: (e) => {
-			O && e.preventDefault();
+			D && e.preventDefault();
 		},
-		children: j
-	}) : /* @__PURE__ */ m("button", {
+		children: A
+	}) : /* @__PURE__ */ p("button", {
 		type: "button",
-		className: M,
-		"aria-label": g.label,
-		"aria-describedby": A === g.label ? void 0 : w,
-		"aria-disabled": O || void 0,
-		"aria-expanded": T ? E : void 0,
+		className: j,
+		"aria-label": h.label,
+		"aria-describedby": k === h.label ? void 0 : C,
+		"aria-disabled": D || void 0,
+		"aria-expanded": w ? T : void 0,
 		onClick: () => {
-			T ? k() : O || g.onAction();
+			w ? O() : D || h.onAction();
 		},
-		children: [j, T && !_ && /* @__PURE__ */ p(s, {
+		children: [A, w && !g && /* @__PURE__ */ f(o, {
 			size: 12,
-			className: E ? "" : "pf:-rotate-90"
+			className: T ? "" : "pf:-rotate-90"
 		})]
 	});
-	return /* @__PURE__ */ m("li", {
+	return /* @__PURE__ */ p("li", {
 		className: "pf:min-w-0",
 		children: [
-			/* @__PURE__ */ p("span", {
-				id: w,
+			/* @__PURE__ */ f("span", {
+				id: C,
 				className: "pf:sr-only",
-				children: A
+				children: k
 			}),
-			/* @__PURE__ */ m("div", {
-				className: u("pf:group/nav-item pf:flex pf:items-center pf:min-w-0 pf:rounded-sm", _ && "pf:w-[28px]", D ? "pf:bg-soft-pearl-300" : !O && "pf:hover:bg-soft-pearl-200"),
-				style: _ ? void 0 : { paddingInlineStart: Math.min(C, 4) * 16 },
-				children: [
-					/* @__PURE__ */ p(e, {
-						trigger: N,
-						content: A,
-						disabled: !_ && !O,
-						side: "right"
-					}),
-					g.menuConfig && !_ && /* @__PURE__ */ p("span", {
-						className: "pf:shrink-0 pf:pe-xs pf:[@media(hover:hover)]:opacity-0 pf:group-hover/nav-item:opacity-100 pf:group-focus-within/nav-item:opacity-100",
-						children: /* @__PURE__ */ p(a, {
-							disabled: O,
-							menu: g.menuConfig,
-							trigger: /* @__PURE__ */ p(n, {
-								size: "xs",
-								label: `Actions for ${g.label}`,
-								children: /* @__PURE__ */ p(o, {})
-							})
-						})
-					}),
-					T && g.linkConfig && !_ && /* @__PURE__ */ p("button", {
-						type: "button",
-						"aria-label": `${E ? "Collapse" : "Expand"} ${g.label}`,
-						"aria-expanded": E,
-						"aria-disabled": O || void 0,
-						onClick: k,
-						className: "pf:flex pf:items-center pf:justify-center pf:size-[28px] pf:shrink-0 pf:border-0 pf:rounded-sm pf:bg-transparent pf:text-soft-pearl-800 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
-						children: E ? /* @__PURE__ */ p(s, { size: 12 }) : /* @__PURE__ */ p(i, {
-							size: 12,
-							className: "pf:rtl:rotate-180"
+			/* @__PURE__ */ p("div", {
+				className: l("pf:group/nav-item pf:flex pf:items-center pf:min-w-0 pf:rounded-sm", g && "pf:w-[28px]", E ? "pf:bg-soft-pearl-300" : !D && "pf:hover:bg-soft-pearl-200"),
+				style: g ? void 0 : { paddingInlineStart: Math.min(S, 4) * 16 },
+				children: [/* @__PURE__ */ f(e, {
+					trigger: M,
+					content: k,
+					disabled: !g && !D,
+					side: "right",
+					showArrow: !0
+				}), h.menuConfig && !g && /* @__PURE__ */ f("span", {
+					className: "pf:shrink-0 pf:pe-xs pf:[@media(hover:hover)]:opacity-0 pf:group-hover/nav-item:opacity-100 pf:group-focus-within/nav-item:opacity-100",
+					children: /* @__PURE__ */ f(i, {
+						disabled: D,
+						menu: h.menuConfig,
+						trigger: /* @__PURE__ */ f(n, {
+							size: "xs",
+							label: `Actions for ${h.label}`,
+							children: /* @__PURE__ */ f(a, {})
 						})
 					})
-				]
+				})]
 			}),
-			T && E && !_ && /* @__PURE__ */ p("ul", {
+			w && T && !g && /* @__PURE__ */ f("ul", {
 				className: "pf:m-0 pf:p-0 pf:list-none pf:flex pf:flex-col pf:gap-xxs",
-				children: g.children.map((e) => /* @__PURE__ */ p(h, {
+				children: h.children.map((e) => /* @__PURE__ */ f(m, {
 					item: e,
 					collapsed: !1,
-					activeId: v,
-					expanded: y,
-					toggle: b,
-					expandRail: x,
-					renderLink: S,
-					depth: C + 1
+					activeId: _,
+					expanded: v,
+					toggle: y,
+					expandRail: b,
+					renderLink: x,
+					depth: S + 1
 				}, e.id))
 			})
 		]
 	});
 }
 //#endregion
-export { h as SideNavItemView };
+export { m as SideNavItemView };

package/dist/components/side-nav/index.d.ts

@@ -1,2 +1,4 @@
 export type { SideNavItem, SideNavProps, SideNavSection, } from './side-nav-types.js';
 export { SideNav } from './SideNav.js';
+export { SideNav as Sidebar } from './SideNav.js';
+export type { SideNavProps as SidebarProps, SideNavItem as SidebarItem, SideNavSection as SidebarSection, } from './side-nav-types.js';

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

@@ -1 +1 @@
-export { SideNav } from "./SideNav.js";
+export { SideNav, SideNav as Sidebar } from "./SideNav.js";

package/dist/components/split-button/SplitButton.js

@@ -20,6 +20,7 @@ var c = a(({ label: a, variant: c = "primary", size: l = "md", menuConfig: u, di
 		children: [/* @__PURE__ */ o(e, {
 			..._,
 			ref: v,
+			className: "pf:scale-none!",
 			variant: c,
 			size: l,
 			disabled: d,
@@ -34,13 +35,13 @@ var c = a(({ label: a, variant: c = "primary", size: l = "md", menuConfig: u, di
 			portalContainer: u.portalContainer,
 			disabled: y,
 			trigger: /* @__PURE__ */ o(t, {
-				className: i("pf-split-trigger pf:rounded-s-none! pf:h-auto!", c === "primary" ? "pf:border-s pf:border-s-blue-100" : "pf:border-s-0"),
+				className: i("pf-split-trigger pf:rounded-s-none! pf:h-auto!", "pf:scale-none!", c === "primary" ? "pf:border-s pf:border-s-blue-100" : "pf:border-s-0"),
 				label: u.label ?? `More options for ${a}`,
 				variant: c,
 				size: l,
 				disabled: y,
 				disabledReason: b,
-				children: /* @__PURE__ */ o(r, {})
+				children: /* @__PURE__ */ o(r, { size: l === "lg" ? 20 : 16 })
 			})
 		})]
 	});

package/dist/components/stepper/StepMarker.js

@@ -1,30 +1,34 @@
-"use client";
-import { CheckIcon as e } from "../icons/CheckIcon.js";
-import t from "clsx";
-import { useState as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/stepper/StepMarker.tsx
-var i = ({ state: i, number: a }) => {
-	let [o, s] = n(i), [c, l] = n(!1);
-	return o !== i && (s(i), l(i === "done")), /* @__PURE__ */ r("span", {
-		"aria-hidden": "true",
-		className: t("pf:flex pf:size-[20px] pf:shrink-0 pf:items-center pf:justify-center pf:rounded-full pf:box-border pf:font-body pf:text-label-12-strong pf:transition-colors pf:duration-(--pf-duration-base) pf:motion-reduce:transition-none", {
-			"pf:bg-soft-pearl-300 pf:text-soft-pearl-900": i === "upcoming",
-			"pf:bg-blue-700 pf:text-background": i === "current",
-			"pf:bg-green-700 pf:text-background": i === "done",
-			"pf:bg-soft-pearl-100 pf:text-soft-pearl-600 pf:border pf:border-solid pf:border-soft-pearl-300": i === "disabled"
-		}),
-		children: i === "done" ? /* @__PURE__ */ r("span", {
-			onAnimationEnd: () => {
-				l(!1);
-			},
-			className: t("pf:flex", c && "pf:motion-safe:animate-[pf-step-check_200ms_ease-out]"),
-			children: /* @__PURE__ */ r(e, {
-				size: 12,
-				tone: "inherit"
-			})
-		}) : a
-	});
-};
+var r = ({ state: r, number: i }) => /* @__PURE__ */ n("span", {
+	"aria-hidden": "true",
+	"data-done": r === "done" ? "" : void 0,
+	className: e("pf:group/marker pf:relative pf:flex pf:size-[20px] pf:shrink-0 pf:items-center pf:justify-center pf:rounded-full pf:box-border pf:font-body pf:text-label-12-strong", {
+		"pf:bg-soft-pearl-300 pf:text-soft-pearl-900": r === "upcoming",
+		"pf:bg-blue-700 pf:text-background": r === "current",
+		"pf:bg-green-700 pf:text-background": r === "done",
+		"pf:bg-soft-pearl-100 pf:text-soft-pearl-600 pf:border pf:border-solid pf:border-soft-pearl-300": r === "disabled"
+	}),
+	children: [/* @__PURE__ */ t("span", {
+		className: r === "done" ? "pf:invisible" : void 0,
+		children: i
+	}), /* @__PURE__ */ t("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		className: "pf:absolute pf:inset-0 pf:m-auto pf:opacity-0 pf:group-data-done/marker:opacity-100",
+		children: /* @__PURE__ */ t("path", {
+			d: "M2.5 6L5 8.5L9.5 3.5",
+			pathLength: "1",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "pf:[stroke-dasharray:1] pf:[stroke-dashoffset:1] pf:group-data-done/marker:[stroke-dashoffset:0] pf:transition-none pf:motion-safe:group-data-[motion=pointer]/stepper:transition-[stroke-dashoffset] pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]"
+		})
+	})]
+});
 //#endregion
-export { i as StepMarker };
+export { r as StepMarker };