@devalok/shilp-sutra 0.51.0 → 0.53.0

package/dist/shell/bottom-navbar.d.ts

@@ -1,29 +1,55 @@
 "use client";
 import { IconInput } from '../ui/lib/icon-input';
 import * as React from 'react';
+export interface BottomNavbarUser {
+    name: string;
+    role?: string;
+}
 export interface BottomNavItem {
     title: string;
     href: string;
     /** Icon for this nav item. Accepts any `IconInput`. */
     icon: IconInput;
+    /** Icon shown when the item is active — e.g. a filled variant. Falls back to `icon`. */
+    activeIcon?: IconInput;
     /** When true, the route matches only when the path is exactly equal */
     exact?: boolean;
     /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = "99+" */
     badge?: number;
+    /**
+     * Roles allowed to see this item, matched against `user.role`. Omit to show
+     * it to everyone. For arbitrary logic, use `canView` instead.
+     */
+    roles?: string[];
+    /**
+     * Visibility predicate — full control over whether this item renders.
+     * Receives the current `user` (or `null`). Takes precedence over `roles`.
+     */
+    canView?: (user: BottomNavbarUser | null) => boolean;
 }
-export interface BottomNavbarUser {
-    name: string;
-    role?: string;
-}
+/**
+ * Active-item indicator, animated between items on selection:
+ * - `pill` (default) — Material-3 tonal pill behind the icon
+ * - `underline` — top accent bar (Material-2 tab style)
+ * - `tint` — subtle background tint on the whole active cell
+ * - `none` — no shape; rely on the filled `activeIcon` + accent color (iOS)
+ */
+export type BottomNavIndicator = 'pill' | 'underline' | 'tint' | 'none';
+/** Show labels always (default) or only for the selected item (narrow viewports). */
+export type BottomNavLabelVisibility = 'always' | 'selected';
 export interface BottomNavbarProps extends React.HTMLAttributes<HTMLElement> {
     /** Currently active pathname */
     currentPath?: string;
-    /** User information (used to determine admin status, presence) */
+    /** Current user. Drives per-item role gating via `item.roles` / `item.canView`. */
     user?: BottomNavbarUser | null;
     /** Primary nav items shown directly in the bottom bar (max 4 recommended) */
     primaryItems?: BottomNavItem[];
-    /** Additional items shown in the "More" overflow menu */
+    /** Additional items shown in the "More" overflow sheet */
     moreItems?: BottomNavItem[];
+    /** Active-indicator style. @default 'pill' */
+    indicator?: BottomNavIndicator;
+    /** Label visibility. @default 'always' */
+    labelVisibility?: BottomNavLabelVisibility;
     /** Additional className for the nav element */
     className?: string;
 }

package/dist/shell/bottom-navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.d.ts","sourceRoot":"","sources":["../../src/shell/bottom-navbar.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAUrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAA;IACf,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4ED,QAAA,MAAM,YAAY,uFA6JjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"bottom-navbar.d.ts","sourceRoot":"","sources":["../../src/shell/bottom-navbar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAWrD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAA;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,KAAK,OAAO,CAAA;CACrD;AAED;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA;AACvE,qFAAqF;AACrF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,UAAU,CAAA;AAE5D,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC1E,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mFAAmF;IACnF,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;IAC3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,0CAA0C;IAC1C,eAAe,CAAC,EAAE,wBAAwB,CAAA;IAC1C,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwID,QAAA,MAAM,YAAY,uFA0HjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/shell/bottom-navbar.js

@@ -4,158 +4,185 @@ import { springs as t } from "../ui/lib/motion.js";
 import { cn as n } from "../ui/lib/utils.js";
 import { Icon as r } from "../ui/icon.js";
 import { normalizeIcon as i } from "../_chunks/normalize-icon.js";
-import { useLink as a } from "../_chunks/link-context.js";
+import { BadgeCompound as a } from "../_chunks/badge-group.js";
+import { Sheet as o, SheetContent as s, SheetHeader as c, SheetTitle as l, SheetTrigger as u } from "../ui/sheet.js";
+import { useLink as d } from "../_chunks/link-context.js";
 import "./link-context.js";
-import * as o from "react";
-import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { IconDots as m, IconX as h } from "@tabler/icons-react";
-import { AnimatePresence as g, motion as _, useReducedMotion as v } from "framer-motion";
+import * as f from "react";
+import { useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IconDots as g } from "@tabler/icons-react";
+import { motion as _, useReducedMotion as v } from "framer-motion";
 //#region src/shell/bottom-navbar.tsx
-function y({ count: e }) {
+function y(e, t) {
+	return e.canView ? e.canView(t) : e.roles && e.roles.length > 0 ? !!t?.role && e.roles.includes(t.role) : !0;
+}
+function b({ count: e }) {
 	if (!e || e <= 0) return null;
-	let t = e > 99 ? "99+" : String(e), r = e >= 10;
-	return /* @__PURE__ */ f("span", {
+	let t = e > 99 ? "99+" : String(e);
+	return /* @__PURE__ */ m(a, {
+		color: "error",
+		variant: "solid",
+		size: "xs",
 		"aria-label": `${e} notifications`,
-		className: n("absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75", r ? "px-0.5" : ""),
+		className: "pointer-events-none absolute -end-1 -top-1 justify-center px-ds-01 tabular-nums motion-safe:animate-in motion-safe:zoom-in-75",
 		children: t
 	});
 }
-function b({ item: r, isActive: o, onClick: s }) {
-	let c = a(), l = v();
-	return /* @__PURE__ */ f(_.div, {
+function x({ indicator: e, layoutId: n, reduced: r }) {
+	if (e === "none") return null;
+	let i = {
+		layoutId: n,
+		"aria-hidden": !0,
+		transition: r ? { duration: 0 } : t.snappy,
+		initial: !r && { opacity: 0 },
+		animate: { opacity: 1 }
+	};
+	return e === "underline" ? /* @__PURE__ */ m(_.span, {
+		...i,
+		className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9"
+	}) : e === "tint" ? /* @__PURE__ */ m(_.span, {
+		...i,
+		className: "absolute inset-0 rounded-control bg-accent-3"
+	}) : /* @__PURE__ */ m(_.span, {
+		...i,
+		className: "absolute inset-0 rounded-pill bg-accent-3"
+	});
+}
+var S = "relative flex h-16 w-full min-w-0 cursor-pointer flex-col items-center justify-center gap-ds-02 px-ds-01 pt-0 text-body-sm transition-colors duration-fast-02 ease-productive-standard";
+function C({ item: r, isActive: a, indicator: o, indicatorId: s, showLabel: c, reduced: l }) {
+	let u = d();
+	return /* @__PURE__ */ m(_.div, {
 		whileTap: l ? void 0 : { scale: .96 },
 		transition: l ? { duration: 0 } : t.snappy,
-		className: "flex max-w-[70px] flex-1",
-		children: /* @__PURE__ */ f(c, {
+		className: "flex min-w-0 flex-1 basis-0",
+		children: /* @__PURE__ */ h(u, {
 			href: r.href,
-			onClick: s,
 			"aria-label": r.title,
-			"aria-current": o ? "page" : void 0,
-			className: n("flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-body-sm transition-colors duration-fast-02 ease-productive-standard", o ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
-			children: /* @__PURE__ */ p("div", {
-				className: "relative flex w-full flex-col items-center gap-ds-02",
+			"aria-current": a ? "page" : void 0,
+			className: n(S, a ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
+			children: [a && o === "tint" && /* @__PURE__ */ m(x, {
+				indicator: "tint",
+				layoutId: s,
+				reduced: l
+			}), /* @__PURE__ */ h("div", {
+				className: "relative flex w-full min-w-0 flex-col items-center gap-ds-02",
 				children: [
-					o && /* @__PURE__ */ f(_.div, {
-						layoutId: "bottom-nav-indicator",
-						className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0",
-						"aria-hidden": "true",
-						transition: l ? { duration: 0 } : t.snappy
+					a && o === "underline" && /* @__PURE__ */ m(x, {
+						indicator: "underline",
+						layoutId: s,
+						reduced: l
 					}),
-					/* @__PURE__ */ p("div", {
-						className: "relative p-ds-03",
-						children: [/* @__PURE__ */ f("span", {
-							className: "[&>svg]:h-ico-md [&>svg]:w-ico-md",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ f(e, {
-								size: "md",
-								children: i(r.icon)
-							})
-						}), r.badge != null && /* @__PURE__ */ f(y, { count: r.badge })]
+					/* @__PURE__ */ h("div", {
+						className: "relative px-ds-04 py-ds-01",
+						children: [
+							a && o === "pill" && /* @__PURE__ */ m(x, {
+								indicator: "pill",
+								layoutId: s,
+								reduced: l
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "relative [&>svg]:h-ico-md [&>svg]:w-ico-md",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ m(e, {
+									size: "md",
+									children: i(a && r.activeIcon ? r.activeIcon : r.icon)
+								})
+							}),
+							r.badge != null && /* @__PURE__ */ m(b, { count: r.badge })
+						]
 					}),
-					/* @__PURE__ */ f("span", {
-						className: "text-center",
+					c && /* @__PURE__ */ m("span", {
+						className: "max-w-full truncate text-center",
 						children: r.title
 					})
 				]
-			})
+			})]
 		})
 	});
 }
-var x = o.forwardRef(({ currentPath: o = "/", user: y, primaryItems: x = [], moreItems: S = [], className: C, ...w }, T) => {
-	let E = a(), D = v(), [O, k] = u(!1), A = l(null), j = s(() => k(!1), []);
-	c(() => {
-		O && A.current && A.current.querySelector("a, button")?.focus();
-	}, [O]);
-	let M = (e, t = !1) => t || e === "/" ? o === e : o.startsWith(e), N = S.some((e) => M(e.href, e.exact));
-	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(g, { children: O && /* @__PURE__ */ p("div", {
-		className: "fixed inset-0 z-overlay md:hidden",
-		onClick: () => k(!1),
-		children: [/* @__PURE__ */ f("div", { className: "absolute inset-0 bg-overlay" }), /* @__PURE__ */ p(_.div, {
-			ref: A,
-			role: "dialog",
-			"aria-label": "More navigation",
-			initial: { y: "100%" },
-			animate: { y: 0 },
-			exit: { y: "100%" },
-			transition: D ? { duration: 0 } : t.smooth,
-			className: "absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03",
-			onClick: (e) => e.stopPropagation(),
-			onKeyDown: (e) => {
-				e.stopPropagation(), e.key === "Escape" && j();
-			},
-			children: [/* @__PURE__ */ p("div", {
-				className: "mb-ds-04 flex items-center justify-between",
-				children: [/* @__PURE__ */ f("span", {
-					className: "text-body-md font-semibold text-surface-fg",
-					children: "More"
-				}), /* @__PURE__ */ f("button", {
-					onClick: () => k(!1),
-					"aria-label": "Close more menu",
-					className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover",
-					children: /* @__PURE__ */ f(r, {
-						icon: h,
-						size: "sm",
-						className: "text-surface-fg-muted"
-					})
-				})]
-			}), /* @__PURE__ */ f("div", {
-				className: "grid grid-cols-4 gap-ds-03",
-				children: S.map((t) => /* @__PURE__ */ p(E, {
-					href: t.href,
-					onClick: () => k(!1),
-					className: n("flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-body-sm transition-colors ease-productive-standard", M(t.href, t.exact) ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"),
-					children: [/* @__PURE__ */ f("span", {
-						className: "[&>svg]:h-ico-md [&>svg]:w-ico-md",
-						children: /* @__PURE__ */ f(e, {
-							size: "md",
-							children: i(t.icon)
-						})
-					}), /* @__PURE__ */ f("span", {
-						className: "text-center",
-						children: t.title
-					})]
-				}, t.href))
-			})]
-		})]
-	}) }), /* @__PURE__ */ p("nav", {
-		...w,
-		ref: T,
+var w = f.forwardRef(({ currentPath: a = "/", user: b = null, primaryItems: w = [], moreItems: T = [], indicator: E = "pill", labelVisibility: D = "always", className: O, ...k }, A) => {
+	let j = d(), M = v() ?? !1, [N, P] = p(!1), F = `${f.useId()}-nav-indicator`, I = (e, t = !1) => t || e === "/" ? a === e : a.startsWith(e), L = w.filter((e) => y(e, b)), R = T.filter((e) => y(e, b)), z = R.some((e) => I(e.href, e.exact)), B = N || z, V = D === "always" || B;
+	return /* @__PURE__ */ h("nav", {
+		...k,
+		ref: A,
 		"aria-label": "Mobile navigation",
-		className: n("fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden", C),
-		children: [x.map((e) => /* @__PURE__ */ f(b, {
+		className: n("fixed bottom-0 start-0 end-0 z-sticky flex w-full flex-row items-stretch justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden", O),
+		children: [L.map((e) => /* @__PURE__ */ m(C, {
 			item: e,
-			isActive: M(e.href, e.exact)
-		}, e.href)), S.length > 0 && /* @__PURE__ */ f(_.button, {
-			type: "button",
-			onClick: () => k(!O),
-			"aria-label": "More navigation options",
-			"aria-expanded": O,
-			whileTap: D ? void 0 : { y: -2 },
-			transition: D ? { duration: 0 } : t.snappy,
-			className: n("flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-body-sm", O || N ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
-			children: /* @__PURE__ */ p("div", {
-				className: "relative flex w-full flex-col items-center gap-ds-02",
-				children: [
-					(O || N) && /* @__PURE__ */ f(_.div, {
-						layoutId: "bottom-nav-indicator",
-						className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0",
-						"aria-hidden": "true",
-						transition: D ? { duration: 0 } : t.snappy
-					}),
-					/* @__PURE__ */ f("div", {
-						className: "p-ds-03",
-						children: /* @__PURE__ */ f(r, { icon: m })
-					}),
-					/* @__PURE__ */ f("span", {
-						className: "text-center",
-						children: "More"
+			isActive: I(e.href, e.exact),
+			indicator: E,
+			indicatorId: F,
+			showLabel: D === "always" || I(e.href, e.exact),
+			reduced: M
+		}, e.href)), R.length > 0 && /* @__PURE__ */ h(o, {
+			open: N,
+			onOpenChange: P,
+			children: [/* @__PURE__ */ m(u, {
+				asChild: !0,
+				children: /* @__PURE__ */ h(_.button, {
+					type: "button",
+					"aria-label": "More navigation options",
+					whileTap: M ? void 0 : { scale: .96 },
+					transition: M ? { duration: 0 } : t.snappy,
+					className: n(S, "min-w-0 flex-1 basis-0", B ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
+					children: [B && E === "tint" && /* @__PURE__ */ m(x, {
+						indicator: "tint",
+						layoutId: F,
+						reduced: M
+					}), /* @__PURE__ */ h("div", {
+						className: "relative flex w-full min-w-0 flex-col items-center gap-ds-02",
+						children: [
+							B && E === "underline" && /* @__PURE__ */ m(x, {
+								indicator: "underline",
+								layoutId: F,
+								reduced: M
+							}),
+							/* @__PURE__ */ h("div", {
+								className: "relative px-ds-04 py-ds-01",
+								children: [B && E === "pill" && /* @__PURE__ */ m(x, {
+									indicator: "pill",
+									layoutId: F,
+									reduced: M
+								}), /* @__PURE__ */ m(r, { icon: g })]
+							}),
+							V && /* @__PURE__ */ m("span", {
+								className: "max-w-full truncate text-center",
+								children: "More"
+							})
+						]
+					})]
+				})
+			}), /* @__PURE__ */ h(s, {
+				side: "bottom",
+				className: "rounded-t-bubble",
+				children: [/* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(l, { children: "More" }) }), /* @__PURE__ */ m("div", {
+					className: "grid grid-cols-[repeat(auto-fit,minmax(72px,1fr))] gap-ds-03 pt-ds-04",
+					children: R.map((t) => {
+						let r = I(t.href, t.exact);
+						return /* @__PURE__ */ h(j, {
+							href: t.href,
+							onClick: () => P(!1),
+							"aria-current": r ? "page" : void 0,
+							className: n("flex min-w-0 flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-body-sm transition-colors ease-productive-standard", r ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"),
+							children: [/* @__PURE__ */ m("span", {
+								className: "[&>svg]:h-ico-md [&>svg]:w-ico-md",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ m(e, {
+									size: "md",
+									children: i(t.icon)
+								})
+							}), /* @__PURE__ */ m("span", {
+								className: "max-w-full truncate text-center",
+								children: t.title
+							})]
+						}, t.href);
 					})
-				]
-			})
+				})]
+			})]
 		})]
-	})] });
+	});
 });
-x.displayName = "BottomNavbar";
+w.displayName = "BottomNavbar";
 //#endregion
-export { x as BottomNavbar };
+export { w as BottomNavbar };

package/dist/shell/bottom-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { scale: 0.96 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-body-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-body-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-body-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-body-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}
+{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven (currentPath / user / items) and router-agnostic via `useLink`.\n * The \"More\" overflow uses the DS `Sheet` primitive, so it inherits focus trap,\n * scroll lock, return-focus, `aria-modal`, and trigger↔panel ARIA wiring.\n */\nimport { IconDots } from '@tabler/icons-react'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** Icon shown when the item is active — e.g. a filled variant. Falls back to `icon`. */\n  activeIcon?: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n  /**\n   * Roles allowed to see this item, matched against `user.role`. Omit to show\n   * it to everyone. For arbitrary logic, use `canView` instead.\n   */\n  roles?: string[]\n  /**\n   * Visibility predicate — full control over whether this item renders.\n   * Receives the current `user` (or `null`). Takes precedence over `roles`.\n   */\n  canView?: (user: BottomNavbarUser | null) => boolean\n}\n\n/**\n * Active-item indicator, animated between items on selection:\n * - `pill` (default) — Material-3 tonal pill behind the icon\n * - `underline` — top accent bar (Material-2 tab style)\n * - `tint` — subtle background tint on the whole active cell\n * - `none` — no shape; rely on the filled `activeIcon` + accent color (iOS)\n */\nexport type BottomNavIndicator = 'pill' | 'underline' | 'tint' | 'none'\n/** Show labels always (default) or only for the selected item (narrow viewports). */\nexport type BottomNavLabelVisibility = 'always' | 'selected'\n\nexport interface BottomNavbarProps extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** Current user. Drives per-item role gating via `item.roles` / `item.canView`. */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow sheet */\n  moreItems?: BottomNavItem[]\n  /** Active-indicator style. @default 'pill' */\n  indicator?: BottomNavIndicator\n  /** Label visibility. @default 'always' */\n  labelVisibility?: BottomNavLabelVisibility\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\n/** Per-item role/visibility gate. `canView` wins; else `roles` matched against user.role; else visible. */\nfunction itemVisible(item: BottomNavItem, user: BottomNavbarUser | null): boolean {\n  if (item.canView) return item.canView(user)\n  if (item.roles && item.roles.length > 0) {\n    return !!user?.role && item.roles.includes(user.role)\n  }\n  return true\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (composes Badge)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  return (\n    <Badge\n      color=\"error\"\n      variant=\"solid\"\n      size=\"xs\"\n      aria-label={`${count} notifications`}\n      className=\"pointer-events-none absolute -end-1 -top-1 justify-center px-ds-01 tabular-nums motion-safe:animate-in motion-safe:zoom-in-75\"\n    >\n      {display}\n    </Badge>\n  )\n}\n\n// -----------------------------------------------------------------------\n// Active indicator (shared-element)\n// -----------------------------------------------------------------------\n\n/**\n * The active-item indicator. A single shared-element (`layoutId`) that SLIDES\n * to the selected item and fades in on first appearance. `none` renders\n * nothing (the filled `activeIcon` + accent color carry the state).\n */\nfunction ActiveIndicator({\n  indicator,\n  layoutId,\n  reduced,\n}: {\n  indicator: BottomNavIndicator\n  layoutId: string\n  reduced: boolean\n}) {\n  if (indicator === 'none') return null\n  const common = {\n    layoutId,\n    'aria-hidden': true as const,\n    transition: reduced ? { duration: 0 } : springs.snappy,\n    initial: reduced ? false : { opacity: 0 },\n    animate: { opacity: 1 },\n  }\n  if (indicator === 'underline') {\n    return <motion.span {...common} className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9\" />\n  }\n  if (indicator === 'tint') {\n    return <motion.span {...common} className=\"absolute inset-0 rounded-control bg-accent-3\" />\n  }\n  // pill (default) — Material-3 tonal pill behind the icon\n  return <motion.span {...common} className=\"absolute inset-0 rounded-pill bg-accent-3\" />\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nconst itemClass =\n  'relative flex h-16 w-full min-w-0 cursor-pointer flex-col items-center justify-center gap-ds-02 px-ds-01 pt-0 text-body-sm transition-colors duration-fast-02 ease-productive-standard'\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  indicator,\n  indicatorId,\n  showLabel,\n  reduced,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  indicator: BottomNavIndicator\n  indicatorId: string\n  showLabel: boolean\n  reduced: boolean\n}) {\n  const Link = useLink()\n  return (\n    <motion.div\n      whileTap={reduced ? undefined : { scale: 0.96 }}\n      transition={reduced ? { duration: 0 } : springs.snappy}\n      className=\"flex min-w-0 flex-1 basis-0\"\n    >\n      <Link\n        href={item.href}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(itemClass, isActive ? 'font-semibold text-accent-11' : 'text-surface-fg-subtle')}\n      >\n        {/* tint covers the whole cell — sits behind the content */}\n        {isActive && indicator === 'tint' && (\n          <ActiveIndicator indicator=\"tint\" layoutId={indicatorId} reduced={reduced} />\n        )}\n        <div className=\"relative flex w-full min-w-0 flex-col items-center gap-ds-02\">\n          {isActive && indicator === 'underline' && (\n            <ActiveIndicator indicator=\"underline\" layoutId={indicatorId} reduced={reduced} />\n          )}\n          <div className=\"relative px-ds-04 py-ds-01\">\n            {isActive && indicator === 'pill' && (\n              <ActiveIndicator indicator=\"pill\" layoutId={indicatorId} reduced={reduced} />\n            )}\n            <span className=\"relative [&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">\n              <IconProvider size=\"md\">\n                {normalizeIcon(isActive && item.activeIcon ? item.activeIcon : item.icon)}\n              </IconProvider>\n            </span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          {showLabel && <span className=\"max-w-full truncate text-center\">{item.title}</span>}\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user = null,\n      primaryItems = [],\n      moreItems = [],\n      indicator = 'pill',\n      labelVisibility = 'always',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const reduced = useReducedMotion() ?? false\n    const [showMore, setShowMore] = useState(false)\n    // Scope the shared-element layoutId per instance so two navbars don't animate into each other.\n    const instanceId = React.useId()\n    const indicatorId = `${instanceId}-nav-indicator`\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') return currentPath === path\n      return currentPath.startsWith(path)\n    }\n\n    // Role/visibility gating\n    const visiblePrimary = primaryItems.filter((item) => itemVisible(item, user))\n    const visibleMore = moreItems.filter((item) => itemVisible(item, user))\n\n    const isMoreActive = visibleMore.some((item) => isActive(item.href, item.exact))\n    const moreSelected = showMore || isMoreActive\n    const showMoreLabel = labelVisibility === 'always' || moreSelected\n\n    return (\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 start-0 end-0 z-sticky flex w-full flex-row items-stretch justify-between border-t border-surface-border-strong bg-surface-chrome px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {visiblePrimary.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n            indicator={indicator}\n            indicatorId={indicatorId}\n            showLabel={labelVisibility === 'always' || isActive(item.href, item.exact)}\n            reduced={reduced}\n          />\n        ))}\n\n        {visibleMore.length > 0 && (\n          <Sheet open={showMore} onOpenChange={setShowMore}>\n            <SheetTrigger asChild>\n              <motion.button\n                type=\"button\"\n                aria-label=\"More navigation options\"\n                whileTap={reduced ? undefined : { scale: 0.96 }}\n                transition={reduced ? { duration: 0 } : springs.snappy}\n                className={cn(\n                  itemClass,\n                  'min-w-0 flex-1 basis-0',\n                  moreSelected ? 'font-semibold text-accent-11' : 'text-surface-fg-subtle',\n                )}\n              >\n                {moreSelected && indicator === 'tint' && (\n                  <ActiveIndicator indicator=\"tint\" layoutId={indicatorId} reduced={reduced} />\n                )}\n                <div className=\"relative flex w-full min-w-0 flex-col items-center gap-ds-02\">\n                  {moreSelected && indicator === 'underline' && (\n                    <ActiveIndicator indicator=\"underline\" layoutId={indicatorId} reduced={reduced} />\n                  )}\n                  <div className=\"relative px-ds-04 py-ds-01\">\n                    {moreSelected && indicator === 'pill' && (\n                      <ActiveIndicator indicator=\"pill\" layoutId={indicatorId} reduced={reduced} />\n                    )}\n                    <Icon icon={IconDots} />\n                  </div>\n                  {showMoreLabel && <span className=\"max-w-full truncate text-center\">More</span>}\n                </div>\n              </motion.button>\n            </SheetTrigger>\n\n            <SheetContent side=\"bottom\" className=\"rounded-t-bubble\">\n              <SheetHeader>\n                <SheetTitle>More</SheetTitle>\n              </SheetHeader>\n              <div className=\"grid grid-cols-[repeat(auto-fit,minmax(72px,1fr))] gap-ds-03 pt-ds-04\">\n                {visibleMore.map((item) => {\n                  const active = isActive(item.href, item.exact)\n                  return (\n                    <Link\n                      key={item.href}\n                      href={item.href}\n                      onClick={() => setShowMore(false)}\n                      aria-current={active ? 'page' : undefined}\n                      className={cn(\n                        'flex min-w-0 flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-body-sm transition-colors ease-productive-standard',\n                        active\n                          ? 'bg-surface-raised-hover text-accent-11'\n                          : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                      )}\n                    >\n                      <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">\n                        <IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider>\n                      </span>\n                      <span className=\"max-w-full truncate text-center\">{item.title}</span>\n                    </Link>\n                  )\n                })}\n              </div>\n            </SheetContent>\n          </Sheet>\n        )}\n      </nav>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}

package/dist/tokens/primitives.css

@@ -49,7 +49,9 @@
 
   /* ── Neutral — Warm grays — H:350 ── */
   --neutral-0: #ffffff;
-  --color-surface-0: oklch(0.945 0.008 360);
+  /* Sunken well. Chroma follows the neutral cadence (was H:360 C:0.008 — an
+     outlier that read visibly pink on sunken surfaces). */
+  --color-surface-0: oklch(0.945 0.0013 350);
   --neutral-1:  oklch(0.99 0.0003 350);
   --neutral-2:  oklch(0.97 0.0008 350);
   --neutral-3:  oklch(0.93 0.0018 350);
@@ -262,7 +264,9 @@
   --purple-12: oklch(0.88 0.0316 300);
 
   /* ── Neutral — Warm grays — H:350 ── */
-  --color-surface-0: oklch(0.07 0.008 360);
+  /* Sunken well (deep). Chroma follows the neutral cadence — was H:360 C:0.008,
+     an outlier that read tinted rather than neutral. */
+  --color-surface-0: oklch(0.07 0.0004 350);
   --neutral-1:  oklch(0.11 0.0002 350);
   --neutral-2:  oklch(0.17 0.0007 350);
   --neutral-3:  oklch(0.23 0.0019 350);

package/dist/tokens/semantic.css

@@ -188,6 +188,14 @@
   --color-surface-border-card:   color-mix(in oklch, var(--neutral-5) 30%, transparent);
   --color-backdrop:              oklch(0 0 0 / 0.4);
 
+  /* Segmented control — translucent recess + raised thumb. Alpha, NOT a fixed
+     neutral tier: the track must read as a groove on ANY parent (page, card,
+     chrome), and a fixed lightness loses contrast against an unknown surface.
+     Elevation inverts in dark (see .dark override): recess in light, faint
+     lift in dark, thumb always a step toward the foreground. */
+  --color-segment-track: color-mix(in oklch, var(--neutral-12) 6%, transparent);
+  --color-segment-thumb: var(--neutral-1);
+
   /* Overlay + disabled — promoted from internal :root into @theme so
      `bg-overlay`, `text-overlay`, `bg-disabled`, `text-disabled` emit. */
   --color-overlay:  oklch(0 0 0 / 0.50);
@@ -374,8 +382,10 @@
      --radius-overlay-sm    rounded-overlay-sm    Tooltip, Toast
      --radius-overlay       rounded-overlay       Popover, HoverCard, DropdownMenu / ContextMenu / Menubar content, listboxes, NavigationMenu viewport
      --radius-overlay-lg    rounded-overlay-lg    Dialog, AlertDialog, Sheet, BottomSheet, ColorInput picker
-     --radius-pill          rounded-pill          Badge, Dot, Radio, Switch, Slider, Progress, Avatar circle, SegmentedControl item
+     --radius-pill          rounded-pill          Badge, Dot, Radio, Switch, Slider, Progress, Avatar circle
      --radius-bubble        rounded-bubble        ChatMessage bubble
+     (SegmentedControl is a rounded-RECT, not a pill: track rounded-surface,
+      thumb rounded-control — thumb inner radius sits tighter inside the track.)
      ─────────────────────────────────────────────────────────── */
   --radius-control:        6px;
   --radius-control-inner:  2px;
@@ -418,6 +428,10 @@
      ─────────────────────────────────────────────────────────── */
   --shadow-raised:       var(--shadow-xs-internal);
   --shadow-raised-hover: var(--shadow-sm-internal);
+  /* Segmented-control thumb — soft float, deliberately RING-LESS (the track
+     carries no border/inset, so the thumb defines its own edge with shadow
+     alone). Uses --shadow-color/strength so it deepens in dark (strength 2.5). */
+  --shadow-segment:      0 1px 2px -0.5px oklch(var(--shadow-color) / calc(0.10 * var(--shadow-strength))), 0 3px 8px -2px oklch(var(--shadow-color) / calc(0.09 * var(--shadow-strength)));
   --shadow-floating:     var(--shadow-md-internal);
   --shadow-overlay:      var(--shadow-lg-internal);
 
@@ -601,6 +615,11 @@
   --color-surface-border-card:   color-mix(in oklch, var(--neutral-6) 45%, transparent);
   --color-backdrop:              oklch(0 0 0 / 0.6);
 
+  /* Segmented control — inverted elevation in dark: track is a faint LIGHTER
+     fill (can't go darker than a near-black page), thumb steps lighter still. */
+  --color-segment-track: color-mix(in oklch, oklch(1 0 0) 7%, transparent);
+  --color-segment-thumb: var(--neutral-3);
+
   /* Overlay */
   --color-overlay: oklch(0 0 0 / 0.70);
 

package/dist/tokens/utilities.css

@@ -340,3 +340,9 @@
    ─────────────────────────────────────────────────────────────────── */
 
 @utility border-card { border-color: var(--color-surface-border-card); }
+/* Stronger card edge (kbd caps, code blocks, skeleton/panel outlines, chip
+   borders) — one step up from the faint `border-card` mix. Dark-mode aware via
+   the semantic token. Was referenced in ~11 components with no matching utility
+   (dead class → border fell back to currentColor); defined here to restore the
+   intended hairline. */
+@utility border-card-strong { border-color: var(--color-surface-border); }