@repraze/kernelkit 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/components/calendar.tsx

@@ -32,7 +32,7 @@ function Calendar({
         <DayPicker
             showOutsideDays={showOutsideDays}
             className={cn(
-                "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+                "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent in-data-[slot=date-picker-content]:bg-transparent",
                 String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
                 String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
                 className,

package/src/components/callout.tsx

@@ -2,44 +2,55 @@
 
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from "@repraze/kernelkit/components/collapsible";
 import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
-import {heading} from "@repraze/kernelkit/lib/recipes";
+import {heading, statusSurface, statusSurfaceNeutral} from "@repraze/kernelkit/lib/recipes";
 import {cva} from "class-variance-authority";
 import {cn} from "cn";
 import {ChevronDownIcon} from "lucide-react";
 import type * as React from "react";
 
 /**
- * Long-form aside for docs and articles (note, tip, warning). A left accent bar carries the color;
- * the surface is a faint wash so body text stays foreground. For app status use Alert.
+ * Long-form aside for docs and articles (note, tip, warning). The color rides on the suite's row
+ * indicator (the sidebar and menu pill: 2px, rounded, flush left, inset from the top and bottom).
+ * Surfaces share Alert's `soft` / `outline` variants. For app status use Alert.
  */
 const calloutVariants = cva(
     [
-        "group/callout relative overflow-hidden rounded-lg border border-(--c)/25 bg-(--c)/5 pl-1 text-sm text-foreground hc:border-(--c)",
-        "before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-(--c)",
+        "group/callout relative overflow-hidden rounded-lg border text-sm text-foreground",
+        // header/body divider: half-strength hue, so it reads on the soft tint too (the hue itself in hc)
+        "[--callout-line:color-mix(in_oklab,var(--c)_50%,transparent)] hc:[--callout-line:var(--c)]",
+        // the row indicator (recipes rowIndicator), always on, in the callout's color, above the header's hover.
+        // The box has no padding of its own: header and body span the full width (pl-4 clears the pill).
+        "before:pointer-events-none before:absolute before:z-10 before:top-1.5 before:bottom-1.5 before:left-0 before:w-0.5 before:rounded-pill before:bg-(--c)",
     ],
     {
         variants: {
             color: colorVariants,
+            variant: statusSurface,
         },
         compoundVariants: [
             {
                 color: "neutral",
-                class: "border-border bg-card before:bg-muted-foreground hc:border-border",
+                class: [
+                    statusSurfaceNeutral,
+                    "before:bg-muted-foreground [--callout-line:var(--border)] hc:[--callout-line:var(--border)]",
+                ],
             },
         ],
-        defaultVariants: {color: "neutral"},
+        defaultVariants: {color: "neutral", variant: "soft"},
     },
 );
 
 const calloutHeader =
-    "flex min-h-8 w-full items-center gap-1.5 px-3 py-1.5 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+    "flex min-h-8 w-full items-center gap-1.5 py-1.5 pr-3 pl-4 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 
 const calloutBody =
-    "px-3 py-2 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--c)/25 group-data-[color=neutral]/callout:border-border hc:border-(--c)";
+    "py-2 pr-3 pl-4 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--callout-line)";
 
 interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "title"> {
-    /** Status or hue of the bar, header and border. */
+    /** Status or hue of the indicator, header and border. */
     color?: Color | null;
+    /** `soft` (tinted, default) or `outline` (card surface, stronger border): the same axis as Alert. */
+    variant?: "soft" | "outline" | null;
     /** Leading icon element, e.g. `<InfoIcon />`. */
     icon?: React.ReactNode;
     /** Header label. The header renders when `title` or `icon` is set. */
@@ -53,6 +64,7 @@ interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "titl
 function Callout({
     className,
     color,
+    variant,
     icon,
     title,
     collapsible = false,
@@ -61,6 +73,7 @@ function Callout({
     ...props
 }: CalloutProps) {
     const resolved = color ?? "neutral";
+    const surface = variant ?? "soft";
     const hasHeader = Boolean(title || icon);
     const headerContent = (
         <>
@@ -78,8 +91,9 @@ function Callout({
             <Collapsible
                 data-slot="callout"
                 data-color={resolved}
+                data-variant={surface}
                 defaultOpen={!defaultCollapsed}
-                className={cn(calloutVariants({color: resolved}), className)}
+                className={cn(calloutVariants({color: resolved, variant: surface}), className)}
                 {...props}
             >
                 <CollapsibleTrigger
@@ -110,7 +124,8 @@ function Callout({
         <div
             data-slot="callout"
             data-color={resolved}
-            className={cn(calloutVariants({color: resolved}), className)}
+            data-variant={surface}
+            className={cn(calloutVariants({color: resolved, variant: surface}), className)}
             {...props}
         >
             {hasHeader ? (

package/src/components/chart.tsx

@@ -21,7 +21,7 @@ const rechartsDefaults = [
 
 const chartContainerClass = [
     "flex aspect-video justify-center text-xs",
-    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:font-mono",
+    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:font-alt",
     "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-hover",
     "[&_.recharts-radial-bar-background-sector]:fill-muted",
     "[&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
@@ -230,7 +230,7 @@ function ChartTooltipContent({
                                                 </span>
                                             </div>
                                             {item.value != null && (
-                                                <span className="font-mono font-medium text-foreground tabular-nums">
+                                                <span className="font-alt font-medium text-foreground tabular-nums">
                                                     {typeof item.value === "number"
                                                         ? item.value.toLocaleString()
                                                         : String(item.value)}

package/src/components/code-block.tsx

@@ -65,7 +65,7 @@ function CodeBlockTitle({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="code-block-title"
             className={cn(
-                "min-w-0 truncate font-mono text-xs font-medium text-foreground group-data-[variant=danger]/code-block:text-danger [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
+                "min-w-0 truncate font-alt text-xs font-medium text-foreground group-data-[variant=danger]/code-block:text-danger [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
                 className,
             )}
             {...props}

package/src/components/command.tsx

@@ -7,7 +7,7 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@repraze/kernelkit/components/dialog";
-import {fieldSurface, listSeparator} from "@repraze/kernelkit/lib/recipes";
+import {fieldSurface, listSeparator, rowIndicator} from "@repraze/kernelkit/lib/recipes";
 import {Command as CommandPrimitive} from "cmdk";
 import {cn} from "cn";
 import {CheckIcon, SearchIcon} from "lucide-react";
@@ -17,8 +17,7 @@ import * as React from "react";
  * cmdk renders `data-selected` / `data-disabled` as "true" | "false", so the `listItem` recipe (which keys on
  * attribute presence) can't be used as is: this is the same row, keyed on `=true`.
  */
-const commandItemClass =
-    "group/command-item relative flex min-h-8 cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[selected=true]:[&_svg:not([class*='text-'])]:text-accent-foreground";
+const commandItemClass = `${rowIndicator} data-[selected=true]:after:opacity-100 group/command-item relative flex min-h-8 cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[selected=true]:[&_svg:not([class*='text-'])]:text-accent-foreground`;
 
 function Command({className, ...props}: React.ComponentProps<typeof CommandPrimitive>) {
     return (
@@ -152,7 +151,7 @@ function CommandShortcut({className, ...props}: React.ComponentProps<"span">) {
         <span
             data-slot="command-shortcut"
             className={cn(
-                "ml-auto pl-4 font-mono text-xs text-muted-foreground group-data-[selected=true]/command-item:text-accent-foreground",
+                "ml-auto pl-4 font-alt text-xs text-muted-foreground group-data-[selected=true]/command-item:text-accent-foreground",
                 className,
             )}
             {...props}

package/src/components/data-table/elements/data-table-info-row.tsx

@@ -19,7 +19,7 @@ export function DataTableInfoRow<T>({className, view, ...props}: DataTableInfoRo
     const infoColumn: DataTableViewColumn<undefined> = convertColumn({
         id: "info",
         cell: () => (
-            <span className="font-mono tabular-nums">
+            <span className="font-alt tabular-nums">
                 {rowCount.toLocaleString()} rows · {columnCount} columns
             </span>
         ),

package/src/components/dropdown-menu.tsx

@@ -23,7 +23,7 @@ const menuItemVariants = cva([listItem, "group/menu-item data-inset:pl-8"], {
     variants: {
         variant: {
             default: "",
-            danger: "text-danger data-highlighted:bg-danger/15 data-highlighted:text-danger [&_svg:not([class*='text-'])]:text-danger data-highlighted:[&_svg:not([class*='text-'])]:text-danger",
+            danger: "text-danger after:bg-danger data-highlighted:bg-danger/15 data-highlighted:text-danger [&_svg:not([class*='text-'])]:text-danger data-highlighted:[&_svg:not([class*='text-'])]:text-danger",
         },
     },
     defaultVariants: {variant: "default"},
@@ -35,7 +35,7 @@ function resolveItemVariant(variant: MenuItemVariant | undefined) {
 
 /** Keyboard shortcut hint at the end of a menu row. */
 const menuShortcutClass =
-    "ml-auto pl-4 font-mono text-xs text-muted-foreground group-data-highlighted/menu-item:text-accent-foreground";
+    "ml-auto pl-4 font-alt text-xs text-muted-foreground group-data-highlighted/menu-item:text-accent-foreground";
 
 /** Right-side indicator of checkbox and radio rows. */
 const menuIndicatorClass = "pointer-events-none absolute right-2 flex size-4 items-center justify-center";

package/src/components/kbd.tsx

@@ -7,9 +7,7 @@ import type * as React from "react";
 /** A keycap: mono, `rounded-sm`, a thicker bottom border for the key look (readable in hc). */
 const kbdVariants = cva(
     [
-        "pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-muted font-mono font-medium text-muted-foreground select-none [&_svg]:shrink-0",
-        // inside a tooltip (inverted surface) the key becomes a translucent chip
-        "in-data-[slot=tooltip-content]:border-transparent in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10",
+        "pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-muted font-alt font-medium text-muted-foreground select-none [&_svg]:shrink-0",
     ],
     {
         variants: {
@@ -30,7 +28,7 @@ function KbdGroup({className, ...props}: React.ComponentProps<"kbd">) {
     return (
         <kbd
             data-slot="kbd-group"
-            className={cn("inline-flex items-center gap-1 font-mono text-xs text-muted-foreground", className)}
+            className={cn("inline-flex items-center gap-1 font-alt text-xs text-muted-foreground", className)}
             {...props}
         />
     );

package/src/components/message.tsx

@@ -65,7 +65,7 @@ function MessageHeader({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="message-header"
             className={cn(
-                "flex max-w-full min-w-0 items-center gap-1.5 px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_time]:font-mono [&_time]:font-normal [&_time]:tabular-nums",
+                "flex max-w-full min-w-0 items-center gap-1.5 px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_time]:font-alt [&_time]:font-normal [&_time]:tabular-nums",
                 className,
             )}
             {...props}
@@ -78,7 +78,7 @@ function MessageFooter({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="message-footer"
             className={cn(
-                "flex max-w-full min-w-0 items-center gap-1 px-3 text-xs text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_time]:font-mono [&_time]:tabular-nums",
+                "flex max-w-full min-w-0 items-center gap-1 px-3 text-xs text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_time]:font-alt [&_time]:tabular-nums",
                 className,
             )}
             {...props}

package/src/components/meter.tsx

@@ -59,7 +59,7 @@ function MeterValue({className, ...props}: MeterPrimitive.Value.Props) {
     return (
         <MeterPrimitive.Value
             data-slot="meter-value"
-            className={cn("ms-auto font-mono text-xs text-muted-foreground tabular-nums", className)}
+            className={cn("ms-auto font-alt text-xs text-muted-foreground tabular-nums", className)}
             {...props}
         />
     );

package/src/components/navigation-menu.tsx

@@ -152,6 +152,10 @@ function NavigationMenuLink({className, ...props}: NavigationMenuPrimitive.Link.
                 "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
                 "hover:bg-hover focus-visible:ring-3 focus-visible:ring-ring/50",
                 "data-active:bg-accent data-active:font-medium data-active:text-accent-foreground",
+                // current page (§7c): the sidebar's pill, on the bottom edge in the bar and on the left edge in a panel
+                "relative after:pointer-events-none after:absolute after:rounded-pill after:bg-primary-text after:opacity-0 data-active:after:opacity-100",
+                "in-data-[slot=navigation-menu-list]:after:inset-x-2.5 in-data-[slot=navigation-menu-list]:after:bottom-0 in-data-[slot=navigation-menu-list]:after:h-0.5",
+                "in-data-[slot=navigation-menu-content]:after:top-1.5 in-data-[slot=navigation-menu-content]:after:bottom-1.5 in-data-[slot=navigation-menu-content]:after:left-0 in-data-[slot=navigation-menu-content]:after:w-0.5",
                 "in-data-[slot=navigation-menu-list]:h-8 in-data-[slot=navigation-menu-list]:font-medium",
                 "in-data-[slot=navigation-menu-content]:rounded-md in-data-[slot=navigation-menu-content]:px-2 in-data-[slot=navigation-menu-content]:focus-visible:bg-accent in-data-[slot=navigation-menu-content]:focus-visible:text-accent-foreground in-data-[slot=navigation-menu-content]:focus-visible:ring-0",
                 "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",

package/src/components/progress.tsx

@@ -86,7 +86,7 @@ function ProgressValue({className, ...props}: ProgressPrimitive.Value.Props) {
     return (
         <ProgressPrimitive.Value
             data-slot="progress-value"
-            className={cn("ms-auto font-mono text-xs text-muted-foreground tabular-nums", className)}
+            className={cn("ms-auto font-alt text-xs text-muted-foreground tabular-nums", className)}
             {...props}
         />
     );

package/src/components/questionnaire.tsx

@@ -122,7 +122,7 @@ function QuestionnaireChoice({
             </QuestionnairePrimitive.ChoiceLabel>
             <QuestionnairePrimitive.ChoiceShortcut
                 data-slot="questionnaire-choice-shortcut"
-                className="pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-sm border border-border bg-muted font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+                className="pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-sm border border-border bg-muted font-alt text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
             />
         </QuestionnairePrimitive.Choice>
     );

package/src/components/search-trigger.tsx

@@ -51,16 +51,15 @@ interface SearchTriggerProps extends React.ComponentProps<typeof Button> {
     children?: React.ReactNode;
 }
 
-/** Header search button: icon, placeholder, OS-aware shortcut. Open your dialog in `onClick`. */
+/** Header search button: icon, placeholder, OS-aware shortcut. Same 32px height as the header's icon buttons. Open your dialog in `onClick`. */
 function SearchTrigger({children = "Search…", className, ...props}: SearchTriggerProps) {
     const mod = useModKey();
     return (
         <Button
             variant="outline"
-            size="sm"
             aria-label="Search"
             data-slot="search-trigger"
-            className={cn("w-9 justify-start px-0 text-muted-foreground sm:w-48 sm:px-2.5 md:w-56", className)}
+            className={cn("w-8 justify-start px-0 text-muted-foreground sm:w-48 sm:px-2.5 md:w-56", className)}
             {...props}
         >
             <SearchIcon data-icon="inline-start" className="mx-auto sm:mx-0" />

package/src/components/section.tsx

@@ -50,7 +50,7 @@ function SectionEyebrow({className, render, ...props}: useRender.ComponentProps<
     return useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(
-            {className: cn("font-mono text-xs font-medium text-primary-text uppercase sm:col-start-1", className)},
+            {className: cn("font-alt text-xs font-medium text-primary-text uppercase sm:col-start-1", className)},
             props,
         ),
         render,

package/src/components/sidebar.tsx

@@ -10,7 +10,7 @@ import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle} from "@r
 import {Skeleton} from "@repraze/kernelkit/components/skeleton";
 import {Tooltip, TooltipContent, TooltipTrigger} from "@repraze/kernelkit/components/tooltip";
 import {useIsMobile} from "@repraze/kernelkit/hooks/use-mobile";
-import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {focusRing, rowIndicator} from "@repraze/kernelkit/lib/recipes";
 import {cva, type VariantProps} from "class-variance-authority";
 import {cn} from "cn";
 import {PanelLeftIcon} from "lucide-react";
@@ -482,7 +482,8 @@ const sidebarMenuButtonVariants = cva(
         "hover:bg-hover data-popup-open:bg-hover",
         "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         // current row (GUIDELINES §7c): accent tint, foreground text, 2px accent indicator on the left edge
-        "relative after:pointer-events-none after:absolute after:top-1.5 after:bottom-1.5 after:left-0 after:w-0.5 after:rounded-pill after:bg-primary-text after:opacity-0 data-active:after:opacity-100",
+        "relative data-active:after:opacity-100",
+        rowIndicator,
         "data-active:bg-primary-tint data-active:font-medium data-active:text-foreground data-active:[&_svg:not([class*='text-'])]:text-primary-text",
         "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground [&>span:last-child]:truncate",
     ],
@@ -591,7 +592,7 @@ function SidebarMenuBadge({className, ...props}: React.ComponentProps<"div">) {
             data-slot="sidebar-menu-badge"
             data-sidebar="menu-badge"
             className={cn(
-                "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-sm px-1 font-mono text-xs font-medium text-muted-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+                "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-sm px-1 font-alt text-xs font-medium text-muted-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
                 className,
             )}
             {...props}

package/src/components/site-footer.tsx

@@ -22,7 +22,7 @@ import type * as React from "react";
 function SiteFooter({className, children, ...props}: React.ComponentProps<"footer">) {
     return (
         <footer data-slot="site-footer" className={cn("border-t border-border", className)} {...props}>
-            <div className="mx-auto flex w-full max-w-(--kk-site-width) flex-col gap-3 px-4 py-6 font-mono text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between md:px-6">
+            <div className="mx-auto flex w-full max-w-(--kk-site-width) flex-col gap-3 px-4 py-6 font-alt text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between md:px-6">
                 {children}
             </div>
         </footer>

package/src/components/site-header.tsx

@@ -66,7 +66,7 @@ function SiteHeaderBrand({className, render, ...props}: useRender.ComponentProps
         props: mergeProps<"a">(
             {
                 className: cn(
-                    "flex shrink-0 items-center gap-2 rounded-md font-mono text-sm font-semibold tracking-tight",
+                    "flex shrink-0 items-center gap-2 rounded-md font-alt text-sm font-semibold tracking-tight",
                     focusRing,
                     "[&_svg]:shrink-0",
                     className,
@@ -95,9 +95,9 @@ function SiteNav({className, render, ...props}: useRender.ComponentProps<"nav">)
 /**
  * A nav link, styled like the suite's other navigation (GUIDELINES §7c): muted at rest, a hover wash,
  * and when current (`aria-current="page"`, `data-status="active"` from TanStack Router, or `data-active`)
- * foreground text plus a 2px accent indicator. In SiteNav the indicator sits on the header's bottom
- * border (like line Tabs); elsewhere (the phone menu) the link is a sidebar row with a tint and the
- * indicator on its left edge.
+ * the sidebar's current-row look: accent tint, foreground text and a 2px accent pill. In SiteNav the pill
+ * runs along the link's bottom edge (like NavigationMenu); elsewhere (the phone menu) it sits on the
+ * left edge, like a sidebar row.
  */
 function SiteNavLink({className, render, ...props}: useRender.ComponentProps<"a">) {
     return useRender({
@@ -105,14 +105,13 @@ function SiteNavLink({className, render, ...props}: useRender.ComponentProps<"a"
         props: mergeProps<"a">(
             {
                 className: cn(
-                    "relative flex h-8 items-center rounded-md px-2.5 font-mono text-sm text-muted-foreground transition-colors hover:bg-hover hover:text-foreground motion-reduce:transition-none",
+                    "relative flex h-8 items-center rounded-md px-2.5 font-alt text-sm text-muted-foreground transition-colors hover:bg-hover hover:text-foreground motion-reduce:transition-none",
                     focusRing,
-                    // indicator: vertical by default, on the header border inside SiteNav
+                    // indicator: left edge by default, bottom edge inside SiteNav
                     "after:pointer-events-none after:absolute after:top-1.5 after:bottom-1.5 after:left-0 after:w-0.5 after:rounded-pill after:bg-primary-text after:opacity-0",
-                    "in-data-[slot=site-nav]:after:top-auto in-data-[slot=site-nav]:after:right-2.5 in-data-[slot=site-nav]:after:-bottom-[calc(0.75rem+1px)] in-data-[slot=site-nav]:after:left-2.5 in-data-[slot=site-nav]:after:h-0.5 in-data-[slot=site-nav]:after:w-auto",
+                    "in-data-[slot=site-nav]:after:top-auto in-data-[slot=site-nav]:after:right-2.5 in-data-[slot=site-nav]:after:bottom-0 in-data-[slot=site-nav]:after:left-2.5 in-data-[slot=site-nav]:after:h-0.5 in-data-[slot=site-nav]:after:w-auto",
                     "aria-[current=page]:text-foreground aria-[current=page]:after:opacity-100 data-[status=active]:text-foreground data-[status=active]:after:opacity-100 data-active:text-foreground data-active:after:opacity-100",
-                    // outside the header row: the sidebar's current-row tint
-                    "not-in-data-[slot=site-nav]:aria-[current=page]:bg-primary-tint not-in-data-[slot=site-nav]:data-[status=active]:bg-primary-tint not-in-data-[slot=site-nav]:data-active:bg-primary-tint",
+                    "aria-[current=page]:bg-primary-tint data-[status=active]:bg-primary-tint data-active:bg-primary-tint",
                     className,
                 ),
             },

package/src/components/stat.tsx

@@ -51,7 +51,7 @@ function StatValue({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="stat-value"
             className={cn(
-                "col-start-1 flex items-baseline gap-1 font-mono text-2xl leading-tight font-medium tracking-tight text-foreground tabular-nums",
+                "col-start-1 flex items-baseline gap-1 font-alt text-2xl leading-tight font-medium tracking-tight text-foreground tabular-nums",
                 "group-data-[size=sm]/stat:text-xl group-data-[size=lg]/stat:text-3xl",
                 className,
             )}
@@ -74,7 +74,7 @@ function StatUnit({className, ...props}: React.ComponentProps<"span">) {
 type StatTrend = "up" | "down" | "flat";
 
 const statDeltaVariants = cva(
-    "col-start-1 inline-flex w-fit items-center gap-1 font-mono text-xs font-medium tabular-nums [&_svg]:size-3.5 [&_svg]:shrink-0",
+    "col-start-1 inline-flex w-fit items-center gap-1 font-alt text-xs font-medium tabular-nums [&_svg]:size-3.5 [&_svg]:shrink-0",
     {
         variants: {
             intent: {

package/src/components/tabs.tsx

@@ -18,8 +18,10 @@ function Tabs({className, orientation = "horizontal", ...props}: TabsPrimitive.R
 }
 
 /**
- * `default`: a tray with the active tab raised on a bordered surface (the border keeps it readable in
- * high contrast). `line`: a baseline with a 2px primary indicator under the active tab.
+ * `default`: a track with the active tab tinted with the accent and marked by a 2px pill along its bottom
+ * edge, like a current nav link. Track border + padding = `--radius-xs` (lg − md), so the `rounded-md` chips
+ * stay concentric with the `rounded-lg` track at every radius. `line`: a baseline with the same 2px pill
+ * on it under the active tab.
  * Sizes follow the control table (GUIDELINES §4) so a tabs list lines up with buttons and inputs.
  */
 const tabsListVariants = cva(
@@ -27,7 +29,8 @@ const tabsListVariants = cva(
     {
         variants: {
             variant: {
-                default: "rounded-lg border border-transparent bg-muted p-[3px] data-vertical:gap-0.5 hc:border-border",
+                default:
+                    "rounded-lg border border-transparent bg-muted p-[max(0px,calc(var(--radius-xs)-1px))] data-vertical:gap-0.5 hc:border-border",
                 line: "gap-1 rounded-none border-border bg-transparent data-horizontal:border-b data-horizontal:py-[3px] data-vertical:border-r data-vertical:px-[3px]",
             },
             size: {
@@ -73,13 +76,18 @@ const tabsTriggerClass = cn(
     "group-data-[size=lg]/tabs-list:gap-2 group-data-[size=lg]/tabs-list:px-2.5",
     // vertical: full-width rows
     "data-vertical:w-full data-vertical:flex-none data-vertical:justify-start data-vertical:py-1",
-    // default: raised, bordered surface + foreground text (readable without the shade in hc)
+    // active: foreground text and a 2px primary-text pill; default adds the accent tint (nav link look)
     "data-active:text-foreground",
-    "group-data-[variant=default]/tabs-list:data-active:border-input group-data-[variant=default]/tabs-list:data-active:bg-background group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=default]/tabs-list:data-active:shadow-(color:--shadow-color) dark:group-data-[variant=default]/tabs-list:data-active:bg-input/30",
-    // line: 2px primary indicator over the list's baseline
-    "after:pointer-events-none after:absolute after:rounded-pill after:bg-primary-text after:opacity-0 after:transition-opacity group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-    "data-horizontal:after:inset-x-1 data-horizontal:after:-bottom-1 data-horizontal:after:h-0.5",
-    "data-vertical:after:inset-y-1 data-vertical:after:-right-1 data-vertical:after:w-0.5",
+    "group-data-[variant=default]/tabs-list:data-active:bg-accent group-data-[variant=default]/tabs-list:data-active:text-accent-foreground",
+    "after:pointer-events-none after:absolute after:rounded-pill after:bg-primary-text after:opacity-0 after:transition-opacity data-active:after:opacity-100",
+    // default: the pill sits inside the chip on its bottom edge (vertical: its start edge, like sidebar rows)
+    "group-data-[variant=default]/tabs-list:data-horizontal:after:inset-x-2 group-data-[variant=default]/tabs-list:data-horizontal:after:-bottom-px group-data-[variant=default]/tabs-list:data-horizontal:after:h-0.5",
+    // the pill spans the label: inset = the trigger's padding per size
+    "group-data-[size=sm]/tabs-list:group-data-[variant=default]/tabs-list:data-horizontal:after:inset-x-1.5 group-data-[size=lg]/tabs-list:group-data-[variant=default]/tabs-list:data-horizontal:after:inset-x-2.5",
+    "group-data-[variant=default]/tabs-list:data-vertical:after:inset-y-1.5 group-data-[variant=default]/tabs-list:data-vertical:after:-left-px group-data-[variant=default]/tabs-list:data-vertical:after:w-0.5",
+    // line: the pill sits on the list's baseline
+    "group-data-[variant=line]/tabs-list:data-horizontal:after:inset-x-1 group-data-[variant=line]/tabs-list:data-horizontal:after:-bottom-1 group-data-[variant=line]/tabs-list:data-horizontal:after:h-0.5",
+    "group-data-[variant=line]/tabs-list:data-vertical:after:inset-y-1 group-data-[variant=line]/tabs-list:data-vertical:after:-right-1 group-data-[variant=line]/tabs-list:data-vertical:after:w-0.5",
 );
 
 function TabsTrigger({className, ...props}: TabsPrimitive.Tab.Props) {