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

package/dist/lib/recipes.js

@@ -33,4 +33,16 @@ export const heading = "font-heading font-medium tracking-tight";
 export const placeholderFill = "bg-foreground/10 hc:bg-border";
 /** Selected row (table, data table, code line, list): accent tint + 2px inset primary indicator (§6). */
 export const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
+/**
+ * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * plain border on a card surface (`statusSurfaceNeutral`).
+ */
+export const statusSurface = {
+    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule)
+    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)",
+    // no wash: card surface with a hue border, for dense layouts
+    outline: "border-(--c)/50 bg-card hc:border-(--c)",
+};
+export const statusSurfaceNeutral = "border-border bg-card hc:border-border";
 //# sourceMappingURL=recipes.js.map

package/dist/lib/recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GACrB,2JAA2J,CAAC;AAEhK,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,ieAAie,CAAC;AAEzgB,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GACjB,uLAAuL,CAAC,CAAC,0CAA0C;AAEvO,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC"}
+{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GACrB,2JAA2J,CAAC;AAEhK,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,ieAAie,CAAC;AAEzgB,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GACjB,uLAAuL,CAAC,CAAC,0CAA0C;AAEvO,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC;AAEzG;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,sGAAsG;IACtG,IAAI,EAAE,+CAA+C;IACrD,6DAA6D;IAC7D,OAAO,EAAE,yCAAyC;CAC5C,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,wCAAwC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@repraze/kernelkit",
-    "version": "0.1.0-alpha.2",
+    "version": "0.1.0-alpha.3",
     "description": "Modern, techy React components: every shadcn component on Base UI, Tailwind v4 and cva, themed by TermiColor.",
     "keywords": [
         "react",

package/src/components/alert.tsx

@@ -3,7 +3,7 @@
 import {mergeProps} from "@base-ui/react/merge-props";
 import {useRender} from "@base-ui/react/use-render";
 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";
 
@@ -17,16 +17,14 @@ const alertCva = cva(
         variants: {
             color: colorVariants,
             variant: {
-                // status tint behind foreground text; the hue lives in the border and the icon (§2 TermiColor rule)
-                soft: "border-(--c)/30 bg-(--c-tint) text-foreground *:[svg]:text-(--c) hc:border-(--c)",
-                // no wash: card surface with a hue border, for dense layouts
-                outline: "border-(--c)/50 bg-card text-card-foreground *:[svg]:text-(--c) hc:border-(--c)",
+                soft: [statusSurface.soft, "text-foreground *:[svg]:text-(--c)"],
+                outline: [statusSurface.outline, "text-card-foreground *:[svg]:text-(--c)"],
             },
         },
         compoundVariants: [
             {
                 color: "neutral",
-                class: "border-border bg-card text-card-foreground *:[svg]:text-foreground hc:border-border",
+                class: [statusSurfaceNeutral, "text-card-foreground *:[svg]:text-foreground"],
             },
         ],
         defaultVariants: {variant: "soft", color: "neutral"},

package/src/components/avatar.tsx

@@ -100,7 +100,7 @@ function AvatarGroupCount({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="avatar-group-count"
             className={cn(
-                "relative flex size-8 shrink-0 items-center justify-center rounded-pill bg-muted font-mono text-xs font-medium text-muted-foreground ring-2 ring-background [&>svg]:size-4",
+                "relative flex size-8 shrink-0 items-center justify-center rounded-pill bg-muted font-alt text-xs font-medium text-muted-foreground ring-2 ring-background [&>svg]:size-4",
                 "group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:text-sm group-has-data-[size=lg]/avatar-group:[&>svg]:size-5",
                 "group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:text-[0.625rem] group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
                 "group-has-data-[size=xs]/avatar-group:size-4 group-has-data-[size=xs]/avatar-group:text-[0.5rem] group-has-data-[size=xs]/avatar-group:[&>svg]:size-2",

package/src/components/badge.tsx

@@ -16,7 +16,7 @@ import {cn} from "cn";
 
 const badgeCva = cva(
     [
-        "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow]",
+        "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 font-alt text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow]",
         "has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!",
         focusRing,
     ],

package/src/components/breadcrumb.tsx

@@ -4,7 +4,7 @@ import {mergeProps} from "@base-ui/react/merge-props";
 import {useRender} from "@base-ui/react/use-render";
 import {focusRing} from "@repraze/kernelkit/lib/recipes";
 import {cn} from "cn";
-import {ChevronRightIcon, MoreHorizontalIcon} from "lucide-react";
+import {MoreHorizontalIcon} from "lucide-react";
 import * as React from "react";
 
 function Breadcrumb({className, ...props}: React.ComponentProps<"nav">) {
@@ -16,7 +16,7 @@ function BreadcrumbList({className, ...props}: React.ComponentProps<"ol">) {
         <ol
             data-slot="breadcrumb-list"
             className={cn(
-                "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+                "flex flex-wrap items-center gap-1.5 font-alt text-xs wrap-break-word text-muted-foreground",
                 className,
             )}
             {...props}
@@ -34,7 +34,7 @@ function BreadcrumbLink({className, render, ...props}: useRender.ComponentProps<
         props: mergeProps<"a">(
             {
                 className: cn(
-                    "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground [&_svg:not([class*='size-'])]:size-3.5",
+                    "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground [&_svg:not([class*='size-'])]:size-3",
                     focusRing,
                     className,
                 ),
@@ -56,7 +56,7 @@ function BreadcrumbPage({className, ...props}: React.ComponentProps<"span">) {
             aria-disabled="true"
             aria-current="page"
             className={cn(
-                "inline-flex items-center gap-1 font-medium text-foreground [&_svg:not([class*='size-'])]:size-3.5",
+                "inline-flex items-center gap-1 font-medium text-foreground [&_svg:not([class*='size-'])]:size-3",
                 className,
             )}
             {...props}
@@ -64,16 +64,17 @@ function BreadcrumbPage({className, ...props}: React.ComponentProps<"span">) {
     );
 }
 
+/** A muted `/` between levels (a path, in mono). Pass children to use another mark. */
 function BreadcrumbSeparator({children, className, ...props}: React.ComponentProps<"li">) {
     return (
         <li
             data-slot="breadcrumb-separator"
             role="presentation"
             aria-hidden="true"
-            className={cn("text-muted-foreground [&>svg]:size-3.5", className)}
+            className={cn("text-muted-foreground select-none [&>svg]:size-3", className)}
             {...props}
         >
-            {children ?? <ChevronRightIcon />}
+            {children ?? "/"}
         </li>
     );
 }
@@ -84,7 +85,7 @@ function BreadcrumbEllipsis({className, ...props}: React.ComponentProps<"span">)
             data-slot="breadcrumb-ellipsis"
             role="presentation"
             aria-hidden="true"
-            className={cn("flex size-5 items-center justify-center rounded-sm [&>svg]:size-4", className)}
+            className={cn("flex size-5 items-center justify-center rounded-sm [&>svg]:size-3.5", className)}
             {...props}
         >
             <MoreHorizontalIcon />

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

@@ -151,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

@@ -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/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

@@ -592,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,
@@ -105,7 +105,7 @@ 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: 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",

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) {

package/src/components/theme-menu.tsx

@@ -116,7 +116,7 @@ function ThemeRadiusPicker({className}: {className?: string}) {
             className={cn("w-full", className)}
         >
             {RADII.map((radius) => (
-                <ToggleGroupItem key={radius} value={radius} className="flex-1 font-mono">
+                <ToggleGroupItem key={radius} value={radius} className="flex-1 font-alt">
                     {radius}
                 </ToggleGroupItem>
             ))}

package/src/components/toc.tsx

@@ -35,7 +35,7 @@ function TocTitle({className, render, ...props}: useRender.ComponentProps<"p">)
     return useRender({
         defaultTagName: "p",
         props: mergeProps<"p">(
-            {className: cn("font-mono text-xs font-medium text-muted-foreground uppercase", className)},
+            {className: cn("font-alt text-xs font-medium text-muted-foreground uppercase", className)},
             props,
         ),
         render,

package/src/components/tooltip.tsx

@@ -39,15 +39,27 @@ function TooltipContent({
                 <TooltipPrimitive.Popup
                     data-slot="tooltip-content"
                     className={cn(
-                        // Inverted chip: max contrast against any surface, so it reads in high contrast too.
+                        // Popover-coloured chip: the popup surface and border, small mono text.
                         popupMotion,
-                        "z-50 inline-flex min-h-6 w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-md shadow-(color:--shadow-color) has-data-[slot=kbd]:pr-1 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:h-4 **:data-[slot=kbd]:min-w-4 **:data-[slot=kbd]:rounded-xs",
+                        "z-50 inline-flex min-h-6 w-fit max-w-xs items-center gap-1.5 rounded-md border border-border bg-popover px-2 py-1 font-alt text-xs text-popover-foreground shadow-md shadow-(color:--shadow-color) has-data-[slot=kbd]:pr-1 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:h-4 **:data-[slot=kbd]:min-w-4 **:data-[slot=kbd]:rounded-xs",
                         className,
                     )}
                     {...props}
                 >
                     {children}
-                    <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+                    <TooltipPrimitive.Arrow
+                        className={cn(
+                            // A rotated square in the popup colours; the border sits on the two edges that face out,
+                            // centred on the popup's border line so the outline runs on without a seam.
+                            "z-50 size-2.5 rotate-45 rounded-xs border-border bg-popover",
+                            "data-[side=top]:-bottom-1.25 data-[side=top]:border-r data-[side=top]:border-b",
+                            "data-[side=bottom]:-top-1.25 data-[side=bottom]:border-t data-[side=bottom]:border-l",
+                            "data-[side=left]:top-1/2! data-[side=left]:-right-1.25 data-[side=left]:-translate-y-1/2 data-[side=left]:border-t data-[side=left]:border-r",
+                            "data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1.25 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-start]:border-t data-[side=inline-start]:border-r",
+                            "data-[side=right]:top-1/2! data-[side=right]:-left-1.25 data-[side=right]:-translate-y-1/2 data-[side=right]:border-b data-[side=right]:border-l",
+                            "data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1.25 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-end]:border-b data-[side=inline-end]:border-l",
+                        )}
+                    />
                 </TooltipPrimitive.Popup>
             </TooltipPrimitive.Positioner>
         </TooltipPrimitive.Portal>

package/src/components/trace.tsx

@@ -67,7 +67,7 @@ function TraceDescription({className, ...props}: React.ComponentProps<"span">) {
     return (
         <span
             data-slot="trace-description"
-            className={cn("shrink-0 font-mono text-xs text-muted-foreground tabular-nums", className)}
+            className={cn("shrink-0 font-alt text-xs text-muted-foreground tabular-nums", className)}
             {...props}
         />
     );

package/src/lib/recipes.ts

@@ -52,3 +52,17 @@ export const placeholderFill = "bg-foreground/10 hc:bg-border";
 
 /** Selected row (table, data table, code line, list): accent tint + 2px inset primary indicator (§6). */
 export const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
+
+/**
+ * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * plain border on a card surface (`statusSurfaceNeutral`).
+ */
+export const statusSurface = {
+    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule)
+    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)",
+    // no wash: card surface with a hue border, for dense layouts
+    outline: "border-(--c)/50 bg-card hc:border-(--c)",
+} as const;
+
+export const statusSurfaceNeutral = "border-border bg-card hc:border-border";