gridsmith-ui 0.6.4 → 0.6.5

package/README.md

@@ -122,6 +122,12 @@ Wrap your app in `<IconProvider>` to select a pack:
 </IconProvider>
 ```
 
+## Troubleshooting
+
+- **Import errors after installing a package while `vite` is running** — restart with `npm run dev -- --force` (or delete `node_modules/.vite`); Vite's dependency cache otherwise serves the pre-install module graph.
+- **Components render unstyled** — add `@source "../node_modules/gridsmith-ui/dist/*.js"` to your CSS entry point *after* every `@import`. Tailwind v4 needs it to scan the compiled components, and rejects an `@import` that follows it.
+- **`IconProvider` is not exported** — upgrade to a current `gridsmith-ui`; the provider ships from the `gridsmith-ui/icons` entry point.
+
 ## Peer Dependencies
 
 | Package | Required |

package/dist/index.d.ts

@@ -873,7 +873,6 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  */
 declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-type TabsVariant = "underline" | "pill";
 type TabsOverflow = "scroll" | "hidden" | "truncate";
 interface Tab {
     id: string;
@@ -894,7 +893,6 @@ interface TabsArrayProps {
     orientation?: "horizontal" | "vertical" | "responsive";
     /** Below md, tabs either side-scroll (default) or collapse to a Dropdown. "responsive" implies "dropdown". */
     mobile?: "scroll" | "dropdown";
-    variant?: TabsVariant;
     fullWidth?: boolean;
     overflow?: TabsOverflow;
     className?: string;
@@ -904,7 +902,6 @@ interface TabsCompoundProps {
     activeTab: string;
     onTabChange: (id: string) => void;
     orientation?: "horizontal" | "vertical";
-    variant?: TabsVariant;
     fullWidth?: boolean;
     overflow?: TabsOverflow;
     className?: string;
@@ -1163,7 +1160,8 @@ interface DockProps {
 }
 declare function Dock({ items, magnification, baseSize, className, }: DockProps): react_jsx_runtime.JSX.Element;
 
-type NavbarType = "default" | "underline" | "minimal";
+/** `tint` (soft accent fill), `underline`, `minimal`, `pill` (solid accent fill). `default` is the deprecated pre-20.8 name for `tint`. */
+type NavbarType = "tint" | "underline" | "minimal" | "pill" | "default";
 type NavbarAlign = "left" | "center" | "right";
 type NavbarVariant = "default" | "transparent" | "compact" | "elevated" | "blurred";
 type NavbarSize = "sm" | "md" | "lg";
@@ -1175,7 +1173,7 @@ interface NavbarProps {
     actions?: ReactNode;
     userMenu?: ReactNode;
     variant?: NavbarVariant;
-    /** Visual style type: default (ghost-button nav items), underline (tab-style with bottom indicator), minimal (transparent, borderless, text-only) */
+    /** Visual style type: tint (ghost-button nav items with a soft accent fill), underline (tab-style with bottom indicator), minimal (transparent, borderless, text-only), pill (solid accent fill with on-primary text). This is a theme decision (navigation.headerType) — NavItem reads it from context. */
     type?: NavbarType;
     /** Horizontal alignment of nav links: left (default), center (viewport-centered), right (before actions) */
     align?: NavbarAlign;
@@ -1191,7 +1189,13 @@ interface NavbarProps {
 }
 declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
 
-type NavItemType = "default" | "underline" | "minimal";
+/**
+ * Navbar active style. `tint` is the soft accent fill (the pre-20.8 `default`),
+ * `underline` the bottom indicator, `minimal` a text-only change, `pill` a solid
+ * accent fill with on-primary text. `default` is accepted as a deprecated alias
+ * for `tint` for one release.
+ */
+type NavItemType = "tint" | "underline" | "minimal" | "pill" | "default";
 interface NavItemProps {
     label: string;
     icon?: IconName;
@@ -1219,14 +1223,15 @@ interface NavMenuProps {
     items: NavMenuItem[];
     /** Whether any child route is currently active (highlights the trigger) */
     active?: boolean;
-    /** Matches the parent Navbar type for consistent styling */
+    /** Matches the parent Navbar type for consistent styling (`default` is the deprecated name for `tint`) */
     type?: NavbarType;
     onItemClick?: (item: NavMenuItem) => void;
     className?: string;
 }
 declare function NavMenu({ label, items, active, type, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
 
-type MobileHeaderMenuType = "default" | "underline" | "minimal";
+/** Mirrors NavbarType. `default` is the deprecated pre-20.8 name for `tint`. */
+type MobileHeaderMenuType = "tint" | "underline" | "minimal" | "pill" | "default";
 interface MobileHeaderMenuItemData {
     label: string;
     icon?: IconName;

package/dist/index.js

@@ -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,
@@ -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" }),
@@ -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",
     {