gridsmith-ui 0.6.4 → 0.6.6

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Skeleton } from './chunk-QGBG72OB.js';
 export { Skeleton } from './chunk-QGBG72OB.js';
-import { Badge } from './chunk-KXNJJKIV.js';
-export { Badge } from './chunk-KXNJJKIV.js';
+import { Badge } from './chunk-6UZZYWTY.js';
+export { Badge } from './chunk-6UZZYWTY.js';
 import { useBreakpoint } from './chunk-EKQHHP72.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
 import { Tooltip, useTextOverflow, usePosition, Slot, useLatest } from './chunk-DDKCQVKO.js';
@@ -39,9 +39,9 @@ var variantStyles = {
   tertiary: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] border-transparent hover:brightness-95",
   outline: "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
   ghost: "bg-transparent text-[var(--ds-text-primary)] border-transparent hover:bg-[var(--ds-bg-muted)] shadow-none",
-  destructive: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)] border-transparent hover:opacity-90",
-  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-primary)] border-transparent hover:opacity-90",
-  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-primary)] border-transparent hover:opacity-90",
+  destructive: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)] border-transparent hover:opacity-90",
+  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)] border-transparent hover:opacity-90",
+  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)] border-transparent hover:opacity-90",
   link: "bg-transparent text-[var(--ds-accent-primary)] hover:text-[var(--ds-accent-primary-hover)] hover:underline"
 };
 var sizeStyles = {
@@ -2501,11 +2501,11 @@ var paletteByVariant = {
   outline: (n) => tagPaletteOutline[n]
 };
 var tagPaletteDefault = {
-  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-text-on-primary)]",
-  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-text-on-primary)]",
-  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-text-on-primary)]",
-  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-text-on-primary)]",
-  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-text-on-primary)]"
+  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]",
+  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]",
+  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]",
+  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]",
+  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]"
 };
 var tagPaletteSubtle = {
   1: "bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]",
@@ -6846,7 +6846,9 @@ function TreeNodeRow({
         className: cn(
           "flex items-center gap-ds-2 py-ds-1.5 px-ds-2 rounded-[var(--ds-radius-md)] cursor-pointer transition-colors",
           "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          isSelected ? "bg-[var(--ds-tab-active-bg)] text-[var(--ds-accent-primary)] font-medium border-l-2 border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
+          // Active style comes from the theme's --ds-tree-* tokens (rail / tint;
+          // pill degrades to tint). The rail is drawn on the selected row only.
+          isSelected ? "bg-[var(--ds-tree-active-bg)] text-[var(--ds-tree-active-text)] font-medium border-l-[length:var(--ds-tree-active-rail)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
         style: { paddingLeft: `calc(var(--ds-space-5) * ${depth} + var(--ds-space-2))` },
@@ -6873,7 +6875,7 @@ function TreeNodeRow({
                 {
                   name: "chevron-right",
                   size: 14,
-                  className: cn("text-[var(--ds-text-muted)] transition-transform", isExpanded && "rotate-90")
+                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
                 }
               )
             }
@@ -6888,7 +6890,7 @@ function TreeNodeRow({
               }
             }
           ),
-          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)]") }),
+          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-tree-active-text)]" : "text-[var(--ds-text-muted)]") }),
           /* @__PURE__ */ jsx(TruncLabel2, { children: node.label })
         ]
       }
@@ -7376,6 +7378,19 @@ function useTabsCtx() {
   if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Content must be used inside <Tabs>");
   return ctx;
 }
+function trackClasses(orientation) {
+  if (orientation === "vertical") {
+    return cn(
+      "flex flex-col gap-ds-0.5 min-w-[var(--ds-tab-rail-width)]",
+      "border-r-[length:var(--ds-nav-v-track-border)] border-[var(--ds-border-default)]",
+      "pr-[var(--ds-nav-v-track-padding)]"
+    );
+  }
+  return cn(
+    "flex gap-[var(--ds-nav-h-track-gap)]",
+    "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
+  );
+}
 function getTabsFromDOM(el) {
   const tablist = el.closest('[role="tablist"]');
   if (!tablist) return [];
@@ -7423,7 +7438,6 @@ function TabButton({
   icon,
   disabled,
   orientation,
-  variant,
   activeTab,
   onTabChange,
   fullWidth,
@@ -7436,10 +7450,11 @@ function TabButton({
   const isActive = activeTab === id;
   const tabId = `ds-tab-${id}`;
   const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
+  const badgeBg = orientation === "vertical" ? "bg-[var(--ds-nav-v-badge-bg)]" : "bg-[var(--ds-nav-h-badge-bg)]";
   const countBadge = count !== void 0 ? /* @__PURE__ */ jsx("span", { className: cn(
     orientation === "vertical" ? "ml-ds-2" : "",
     "px-ds-1.5 py-ds-0.5 text-xs rounded-[var(--ds-radius-sm)]",
-    variant === "pill" && isActive ? "bg-[var(--ds-bg-canvas)]/20 text-[var(--ds-text-on-primary)]" : isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-muted)]"
+    isActive ? cn(badgeBg, "text-[var(--ds-text-on-primary)]") : "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-muted)]"
   ), children: count }) : null;
   if (orientation === "vertical") {
     const btn2 = /* @__PURE__ */ jsxs(
@@ -7456,10 +7471,12 @@ function TabButton({
         className: cn(
           "flex items-center justify-between px-ds-3 py-ds-2 text-sm font-medium text-left",
           disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer",
-          "rounded-[var(--ds-radius-sm)]",
+          "rounded-[var(--ds-nav-v-item-radius)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
           "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          variant === "pill" ? isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]" : isActive ? "text-[var(--ds-accent-primary)] bg-[var(--ds-tab-active-bg)] border-l-[length:var(--ds-border-width-thicker)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
+          // The rail is drawn on the active item only (today's behaviour; a
+          // transparent placeholder on every item is a future layout tweak).
+          isActive ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-l-[length:var(--ds-nav-v-active-rail)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
           className
         ),
         children: [
@@ -7492,13 +7509,11 @@ function TabButton({
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         fullWidth && "flex-1",
         truncate && "flex-1 min-w-0 flex items-center",
-        variant === "pill" ? cn(
-          "rounded-[var(--ds-radius-md)]",
-          isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]"
-        ) : isActive ? "text-[var(--ds-text-primary)] border-b-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
+        "rounded-[var(--ds-nav-h-item-radius)]",
+        isActive ? "bg-[var(--ds-nav-h-active-bg)] text-[var(--ds-nav-h-active-text)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-nav-h-inactive-text)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-nav-h-hover-bg)]",
         className
       ),
-      style: variant === "underline" && orientation === "horizontal" && isActive ? { borderBottomWidth: "calc(var(--ds-border-width) * 3)", marginBottom: "calc(var(--ds-border-width) * -1)" } : void 0,
+      style: isActive ? { borderBottomWidth: "var(--ds-nav-h-indicator)", marginBottom: "calc(var(--ds-nav-h-track-border) * -1)" } : void 0,
       children: truncate ? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "shrink-0" }),
         /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate min-w-0 flex-1", children: label }),
@@ -7514,18 +7529,14 @@ function TabButton({
   return btn;
 }
 function TabsList({ children, className }) {
-  const { orientation, variant, fullWidth, overflow } = useTabsCtx();
+  const { orientation, fullWidth, overflow } = useTabsCtx();
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "div",
       {
         role: "tablist",
         "aria-orientation": "vertical",
-        className: cn(
-          "flex flex-col gap-ds-0.5 min-w-[var(--ds-tab-rail-width)]",
-          variant === "underline" && "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)] pr-ds-1",
-          className
-        ),
+        className: cn(trackClasses("vertical"), className),
         children
       }
     );
@@ -7535,10 +7546,9 @@ function TabsList({ children, className }) {
     {
       role: "tablist",
       className: cn(
-        "flex gap-0 max-w-full",
+        trackClasses("horizontal"),
+        "max-w-full",
         overflow === "hidden" ? "overflow-hidden" : overflow === "truncate" ? "overflow-hidden" : "overflow-x-auto overflow-y-hidden",
-        variant === "underline" && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-        variant === "pill" && "gap-ds-1 p-ds-0.5 bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
         fullWidth && "w-full",
         className
       ),
@@ -7547,7 +7557,7 @@ function TabsList({ children, className }) {
   );
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
-  const { activeTab, onTabChange, orientation, variant, fullWidth, overflow } = useTabsCtx();
+  const { activeTab, onTabChange, orientation, fullWidth, overflow } = useTabsCtx();
   return /* @__PURE__ */ jsx(
     TabButton,
     {
@@ -7558,7 +7568,6 @@ function TabsTrigger({ value, children, count, icon, disabled, truncate, classNa
       disabled,
       truncate: overflow === "truncate" || truncate,
       orientation,
-      variant,
       activeTab,
       onTabChange,
       fullWidth,
@@ -7587,7 +7596,6 @@ function TabsRoot(props) {
     activeTab,
     onTabChange,
     orientation = "horizontal",
-    variant = "underline",
     fullWidth = false,
     overflow = "scroll",
     className
@@ -7614,11 +7622,7 @@ function TabsRoot(props) {
         {
           role: "tablist",
           "aria-orientation": "vertical",
-          className: cn(
-            "flex flex-col gap-ds-0.5 min-w-[var(--ds-tab-rail-width)]",
-            variant === "underline" && "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)] pr-ds-1",
-            className
-          ),
+          className: cn(trackClasses("vertical"), className),
           children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
             tab.group && tab.group !== tabs[i - 1]?.group && /* @__PURE__ */ jsx(
               "span",
@@ -7631,7 +7635,7 @@ function TabsRoot(props) {
                 children: tab.group
               }
             ),
-            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
           ] }, tab.id))
         }
       );
@@ -7642,18 +7646,16 @@ function TabsRoot(props) {
       {
         role: "tablist",
         className: cn(
-          "flex gap-0",
+          trackClasses("horizontal"),
           effectiveOverflow === "scroll" ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden",
-          variant === "underline" && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-          variant === "pill" && "gap-ds-1 p-ds-0.5 bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
           fullWidth && "w-full",
           className
         ),
-        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
+        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
       }
     );
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, variant, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -8171,7 +8173,7 @@ function StepCircle({ status, index, onClick, clickable }) {
         !clickable && "cursor-default",
         status === "complete" && "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
         status === "current" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]`,
-        status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
+        status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
         status === "loading" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)] animate-pulse`,
         status === "upcoming" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] text-[var(--ds-text-muted)] bg-[var(--ds-bg-surface)]"
       ),
@@ -8567,7 +8569,7 @@ function CompactFlyout({
                 },
                 className: cn(
                   "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
-                  child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+                  child.active ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
                 ),
                 children: [
                   child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
@@ -8673,7 +8675,10 @@ function SidebarNav({
           "flex items-center gap-ds-2 transition-colors cursor-pointer",
           isRoot ? cn(rootPy, rootText, isMinimal ? "rounded-[var(--ds-radius-full)]" : "rounded-[var(--ds-radius-md)]") : cn(childPy, "text-xs rounded-[var(--ds-radius-sm)]"),
           isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
-          item.active ? isRoot ? isMinimal ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-text)] font-medium" : "bg-sidebar-accent-subtle text-[var(--ds-sidebar-text)] font-medium border-l-2 border-[var(--ds-sidebar-accent)]" : "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : isRoot ? isMinimal ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-2 border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+          // Active style comes from the theme's --ds-sidebar-active-* tokens
+          // (rail / tint / pill). The rail token is 0px for minimal sidebars,
+          // so the transparent placeholder on inactive roots is harmless there.
+          item.active ? isRoot ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-text)] font-medium border-l-[length:var(--ds-sidebar-active-rail)] border-[var(--ds-sidebar-active-accent)]" : "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)] font-medium" : isRoot ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
           item.icon && /* @__PURE__ */ jsx(
@@ -8681,7 +8686,7 @@ function SidebarNav({
             {
               name: item.icon,
               size: isRoot ? rootIconSize : childIconSize,
-              className: cn("shrink-0", item.active && "text-[var(--ds-sidebar-accent)]")
+              className: cn("shrink-0", item.active && "text-[var(--ds-sidebar-active-accent)]")
             }
           ),
           !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8753,7 +8758,10 @@ function SidebarNav({
             "flex items-center gap-ds-2 w-full text-left transition-colors cursor-pointer",
             isRoot ? cn(rootPy, rootText, isMinimal ? "rounded-[var(--ds-radius-full)]" : "rounded-[var(--ds-radius-md)]") : cn(childPy, "text-xs rounded-[var(--ds-radius-sm)]"),
             isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
-            item.active || childActive ? isRoot ? isMinimal ? "text-[var(--ds-sidebar-text)] font-medium" : "text-[var(--ds-sidebar-text)] font-medium border-l-2 border-transparent" : "text-[var(--ds-sidebar-text)] font-medium" : isRoot ? isMinimal ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-2 border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+            // This row has no fill, so its label, icon and chevron keep the plain
+            // sidebar tokens: --ds-sidebar-active-accent is on-primary white under
+            // `pill` and would vanish here. Only filled elements read the active set.
+            item.active || childActive ? isRoot ? "text-[var(--ds-sidebar-text)] font-medium border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text)] font-medium" : isRoot ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
           ),
           children: [
             item.icon && /* @__PURE__ */ jsx(
@@ -8944,7 +8952,9 @@ function CompactNavItem({
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
         className: cn(
           "relative flex flex-col items-center justify-center gap-[3px] w-full py-ds-3 px-ds-1 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
-          item.active || childActive ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+          // Compact tiles have no edge to stroke: they read the fill and text
+          // tokens only, never --ds-sidebar-active-rail.
+          item.active || childActive ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
           item.icon && /* @__PURE__ */ jsx(
@@ -8952,7 +8962,7 @@ function CompactNavItem({
             {
               name: item.icon,
               size: 20,
-              className: cn((item.active || childActive) && "text-[var(--ds-sidebar-accent)]")
+              className: cn((item.active || childActive) && "text-[var(--ds-sidebar-active-accent)]")
             }
           ),
           /* @__PURE__ */ jsx(TruncLabel3, { className: "text-[clamp(9px,var(--ds-font-size-2xs),12px)] leading-tight max-w-full", side: "right", container: portalContainer ?? void 0, children: item.label }),
@@ -8963,7 +8973,7 @@ function CompactNavItem({
               size: 10,
               className: cn(
                 "absolute right-1 top-1/2 -translate-y-1/2 transition-transform",
-                item.active || childActive ? "text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
+                item.active || childActive ? "text-[var(--ds-sidebar-active-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
                 expanded && "rotate-180"
               )
             }
@@ -8990,7 +9000,7 @@ function CompactNavItem({
         onClick: () => onItemClick?.(child, ci),
         className: cn(
           "flex items-center gap-ds-2 px-ds-3 py-ds-1.5 text-[length:var(--ds-font-size-xs)] rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer w-full",
-          child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+          child.active ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
           child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14, className: "shrink-0" }),
@@ -9127,13 +9137,13 @@ function findScrollParent(el) {
 function Breadcrumbs3({ items, onLight, pill, separator = "chevron" }) {
   if (!items.length) return null;
   const sepEl = (key) => {
-    const cls = cn("select-none flex items-center", onLight ? "text-white/40" : "text-[var(--ds-text-muted)]");
+    const cls = cn("select-none flex items-center", onLight ? "text-[var(--ds-text-on-primary)]/40" : "text-[var(--ds-text-muted)]");
     if (separator === "slash") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: "/" }, `s${key}`);
     if (separator === "dot") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: "\xB7" }, `s${key}`);
     if (separator === "arrow") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 12 }) }, `s${key}`);
     return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12 }) }, `s${key}`);
   };
-  const pillCls = pill ? cn("rounded-[var(--ds-radius-full)]", onLight ? "bg-white/10 px-ds-2.5 py-ds-0.5" : "bg-[var(--ds-bg-muted)] px-ds-2.5 py-ds-0.5") : "";
+  const pillCls = pill ? cn("rounded-[var(--ds-radius-full)]", onLight ? "bg-[var(--ds-text-on-primary)]/10 px-ds-2.5 py-ds-0.5" : "bg-[var(--ds-bg-muted)] px-ds-2.5 py-ds-0.5") : "";
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-ds-1.5 text-sm", children: items.map((item, i) => {
     const isNavigable = !!(item.onClick || item.href);
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-1.5", children: [
@@ -9148,14 +9158,14 @@ function Breadcrumbs3({ items, onLight, pill, separator = "chevron" }) {
           },
           className: cn(
             "transition-colors duration-[var(--ds-transition-speed)]",
-            onLight ? "text-white/60 hover:text-white/90" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
+            onLight ? "text-[var(--ds-text-on-primary)]/60 hover:text-[var(--ds-text-on-primary)]/90" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
             pillCls
           ),
           children: item.label
         }
       ) : /* @__PURE__ */ jsx("span", { className: cn(
         "font-medium",
-        onLight ? "text-white/80" : "text-[var(--ds-text-primary)]",
+        onLight ? "text-[var(--ds-text-on-primary)]/80" : "text-[var(--ds-text-primary)]",
         pillCls
       ), children: item.label })
     ] }, i);
@@ -9173,7 +9183,7 @@ function BackButton({ onLight, onClick }) {
         "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] rounded-[var(--ds-radius-md)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        onLight ? "bg-white/10 text-white/80 hover:bg-white/20 hover:text-white" : [
+        onLight ? "bg-[var(--ds-text-on-primary)]/10 text-[var(--ds-text-on-primary)]/80 hover:bg-[var(--ds-text-on-primary)]/20 hover:text-[var(--ds-text-on-primary)]" : [
           "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
           "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
           "hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
@@ -9521,13 +9531,13 @@ function ColourfulHeader({
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                       /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
                         "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)]",
-                        isBold ? "text-white" : "text-[var(--ds-text-primary)]"
+                        isBold ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]"
                       ), children: title }),
                       badge
                     ] }),
                     description && /* @__PURE__ */ jsx(ClampedText, { className: cn(
                       "mt-ds-1 text-sm",
-                      isBold ? "text-white/70" : "text-[var(--ds-text-secondary)]"
+                      isBold ? "text-[var(--ds-text-on-primary)]/70" : "text-[var(--ds-text-secondary)]"
                     ), children: description })
                   ] })
                 ] }),
@@ -9724,13 +9734,13 @@ function SnappingHeader({
                         })(),
                         /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
                           "font-[family-name:var(--ds-font-display)] font-[var(--ds-weight-heading)]",
-                          collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-white" : "text-[var(--ds-text-primary)]")
+                          collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]")
                         ), children: title }),
                         badge
                       ] }),
                       !collapsed && description && /* @__PURE__ */ jsx(ClampedText, { className: cn(
                         "mt-ds-1 text-sm",
-                        onLight ? "text-white/70" : "text-[var(--ds-text-secondary)]"
+                        onLight ? "text-[var(--ds-text-on-primary)]/70" : "text-[var(--ds-text-secondary)]"
                       ), children: description })
                     ] })
                   ] }),
@@ -9932,7 +9942,7 @@ function Dock({
                       className: cn(
                         "absolute -top-1.5 -right-1.5 flex items-center justify-center",
                         "min-w-[16px] h-4 px-ds-1 text-2xs font-bold rounded-[var(--ds-radius-full)]",
-                        "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
+                        "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
                         "pointer-events-none"
                       ),
                       children: item.badge > 99 ? "99+" : item.badge
@@ -10385,10 +10395,13 @@ var AppShell = forwardRef(function AppShell2({
     }
   );
 });
-var NavbarTypeContext = createContext("default");
+function resolveNavItemType(type) {
+  return type === "default" ? "tint" : type;
+}
+var NavbarTypeContext = createContext("tint");
 var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
   const contextType = useContext(NavbarTypeContext);
-  const type = typeProp ?? contextType;
+  const type = resolveNavItemType(typeProp ?? contextType);
   const baseClasses = cn(
     "inline-flex items-center gap-ds-2 cursor-pointer select-none",
     "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
@@ -10420,6 +10433,11 @@ var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href,
 });
 function getTypeClasses(type, active) {
   switch (type) {
+    case "pill":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
     case "underline":
       return cn(
         "px-ds-2 py-ds-2 relative",
@@ -10430,7 +10448,7 @@ function getTypeClasses(type, active) {
         "px-ds-2 py-ds-1",
         active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
       );
-    default:
+    case "tint":
       return cn(
         "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
         active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
@@ -10464,7 +10482,7 @@ var Navbar = forwardRef(function Navbar2({
   actions,
   userMenu,
   variant = "default",
-  type = "default",
+  type: typeProp = "tint",
   align = "left",
   size,
   position = "flush",
@@ -10478,6 +10496,7 @@ var Navbar = forwardRef(function Navbar2({
   const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
   const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
   const hideNavLinks = appShell?.isMobile && (appShell.hasMobileMenu || appShell.hasMobileNav);
+  const type = resolveNavItemType(typeProp);
   const isMinimal = type === "minimal";
   const isFloating = position === "floating";
   const resolvedSize = size ?? (variant === "compact" ? "sm" : "md");
@@ -10584,7 +10603,7 @@ function NavMenu({
   label,
   items,
   active = false,
-  type = "default",
+  type = "tint",
   onItemClick,
   className
 }) {
@@ -10624,6 +10643,7 @@ function NavMenu({
   );
   const isUnderline = type === "underline";
   const isMinimal = type === "minimal";
+  const isPill = type === "pill";
   const triggerClasses = cn(
     "inline-flex items-center gap-ds-1 cursor-pointer transition-colors whitespace-nowrap",
     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -10633,9 +10653,14 @@ function NavMenu({
     ) : isMinimal ? cn(
       "px-ds-2 py-ds-1 text-sm",
       hasActiveChild ? "text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]"
+    ) : isPill ? cn(
+      "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
+      hasActiveChild ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
     ) : cn(
+      // tint (and the deprecated `default` alias) — the same soft accent fill
+      // NavItem uses, so a menu trigger and a link read as one row (decision 30).
       "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
-      hasActiveChild ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+      hasActiveChild ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
     ),
     className
   );
@@ -10722,7 +10747,9 @@ function NavMenuItemRow({
       },
       className: cn(
         "flex items-center gap-ds-2 mx-ds-1 px-ds-2 py-ds-1.5 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
-        item.active ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+        // The active row takes the accent tint like an active NavItem; it marks
+        // the current page, not a hover.
+        item.active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
       ),
       children: [
         item.icon && /* @__PURE__ */ jsx(
@@ -10765,7 +10792,7 @@ function NavMenuGroup({
     ))
   ] });
 }
-function MobileHeaderMenu({ items, type = "default", onItemClick, className }) {
+function MobileHeaderMenu({ items, type = "tint", onItemClick, className }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col", className), style: { padding: "var(--ds-space-4)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: type === "underline" ? 0 : "var(--ds-space-1)" }, children: items.map((item, i) => /* @__PURE__ */ jsx(
     MobileMenuItem,
     {
@@ -10822,6 +10849,23 @@ function MobileMenuItem({
       }
     );
   }
+  if (type === "pill") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick,
+        className: cn(
+          "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
+          "transition-colors duration-[var(--ds-transition-speed)]",
+          item.active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+        ),
+        children: [
+          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 18, className: "shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "button",
     {