@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/breadcrumb/breadcrumb.test.tsx

@@ -1,6 +1,13 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "./breadcrumb";
+import { LocaleProvider } from "../locale-provider";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "./breadcrumb";
 describe("Breadcrumb", () => {
   it("renders the current page", () => {
     render(
@@ -15,3 +22,19 @@ describe("Breadcrumb", () => {
     expect(screen.getByText("Here")).toHaveAttribute("aria-current", "page");
   });
 });
+
+describe("BreadcrumbEllipsis — microcopy (#18)", () => {
+  it("keeps its shipped sr-only 'More' text with no LocaleProvider", () => {
+    render(<BreadcrumbEllipsis />);
+    expect(screen.getByText("More")).toHaveClass("sr-only");
+  });
+
+  it("translates via the reused generic `more` key under a LocaleProvider", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={{ more: "Mehr" }}>
+        <BreadcrumbEllipsis />
+      </LocaleProvider>,
+    );
+    expect(screen.getByText("Mehr")).toHaveClass("sr-only");
+  });
+});

package/src/components/breadcrumb/breadcrumb.tsx

@@ -2,10 +2,12 @@ import { forwardRef, type ComponentProps, type ReactNode } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 
 export const Breadcrumb = forwardRef<HTMLElement, ComponentProps<"nav">>(
   function Breadcrumb(props, ref) {
-    return <nav ref={ref} aria-label="breadcrumb" {...props} />;
+    const { t } = useLocale();
+    return <nav ref={ref} aria-label={t("ui.breadcrumb.label")} {...props} />;
   },
 );
 export const BreadcrumbList = forwardRef<HTMLOListElement, ComponentProps<"ol">>(
@@ -14,7 +16,7 @@ export const BreadcrumbList = forwardRef<HTMLOListElement, ComponentProps<"ol">>
       <ol
         ref={ref}
         className={cn(
-          "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground",
+          "flex flex-wrap items-center gap-1.5 break-words text-body text-muted-foreground",
           className,
         )}
         {...props}
@@ -37,7 +39,10 @@ export const BreadcrumbLink = forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors duration-fast hover:text-foreground", className)}
+      className={cn(
+        "rounded-sm transition-colors duration-fast hover:text-foreground focus-ring",
+        className,
+      )}
       {...props}
     />
   );
@@ -69,6 +74,7 @@ export function BreadcrumbSeparator({ children, className, ...props }: Component
   );
 }
 export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
+  const { t } = useLocale();
   return (
     <span
       role="presentation"
@@ -77,7 +83,7 @@ export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span
       {...props}
     >
       <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
+      <span className="sr-only">{t("more")}</span>
     </span>
   );
 }

package/src/components/button/button.stories.tsx

@@ -41,17 +41,30 @@ export const Ghost: Story = { args: { variant: "ghost" } };
 // themes.css/Tailwind failed to load, this would be the transparent default
 // `rgba(0, 0, 0, 0)` and fail — where a plain `toBeVisible()` would still pass
 // on the unstyled element.
-//
-// The harness applies the shipped DEFAULT theme (`light`) to
-// `document.documentElement` (see `apps/docs/.storybook/preview.tsx`'s
-// `withTheme` decorator, #402), so `--primary` here is light's own
-// value (`oklch(0.553 0.143 153)` in themes.css) — not the unbranded `:root`
-// fallback this test asserted against before #402 fixed the harness to
-// actually apply a theme.
 export const CssCheck: Story = {
   play: async ({ canvas }) => {
     const btn = canvas.getByRole("button", { name: "Button" });
-    await expect(getComputedStyle(btn).backgroundColor).toBe("oklch(0.553 0.143 153)");
+
+    // Create a hidden reference element styled with the same token
+    // to derive the expected value dynamically, avoiding hardcoded snapshots
+    const ref = document.createElement("div");
+    ref.className = "bg-primary";
+    ref.style.visibility = "hidden";
+    ref.style.position = "absolute";
+    document.body.appendChild(ref);
+
+    const buttonBgColor = getComputedStyle(btn).backgroundColor;
+    const referenceBgColor = getComputedStyle(ref).backgroundColor;
+
+    // Verify the token system loaded by comparing button color to reference
+    await expect(buttonBgColor).toBe(referenceBgColor);
+
+    // Verify the token system actually loaded a non-transparent color
+    // (catches the case where themes.css/Tailwind failed to load)
+    await expect(buttonBgColor).not.toBe("rgba(0, 0, 0, 0)");
+
+    // Clean up
+    ref.remove();
   },
 };
 
@@ -68,3 +81,98 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+/**
+ * #67 — the RENDERED lock on the compound focus indicator (ADR 0027 Amendment).
+ *
+ * A class-string assertion would be worthless here: `focus-ring` could name a
+ * single-layer ring and the class would still be present while the ratio stayed
+ * at 1.36:1, which is the exact failure this story exists to prevent. So this
+ * play function measures the SHIPPED pixels — it reads the computed indicator
+ * layers off a really-focused button, resolves the ground the indicator is
+ * actually drawn on by walking up to the first non-transparent ancestor, and
+ * asserts at least one layer clears WCAG 1.4.11 (3:1) against it.
+ *
+ * It is theme-agnostic on purpose: whichever theme the run resolves (the
+ * toolbar global, or `STORYBOOK_THEME=<slug>` headless — see
+ * @.claude/rules/storybook-mcp.md § Themes) the SAME assertion has to hold, so
+ * one story covers `light`, `dark` and any consumer theme a fork adds.
+ */
+export const CompoundFocusIndicator: Story = {
+  name: "Compound focus indicator (WCAG 1.4.11)",
+  play: async ({ canvas, userEvent }) => {
+    const btn = canvas.getByRole("button", { name: "Button" });
+
+    // Tab rather than .focus(): `:focus-visible` is what the utility keys on,
+    // and a programmatic focus does not reliably match it.
+    await userEvent.tab();
+    await expect(btn).toHaveFocus();
+
+    /** Resolve a token to the rgb() the browser actually paints. */
+    const resolve = (token: string) => {
+      const probe = document.createElement("div");
+      probe.style.cssText = `position:absolute;visibility:hidden;background-color:var(${token})`;
+      btn.parentElement?.appendChild(probe);
+      const value = getComputedStyle(probe).backgroundColor;
+      probe.remove();
+      return value;
+    };
+
+    // Colours come back in whatever space the author wrote — Chromium echoes
+    // `oklch()` verbatim for an oklch token — so convert through a 1x1 canvas
+    // rather than a regex: the canvas does the same CSS Color 4 → sRGB
+    // conversion the compositor does, for any colour syntax a theme may use.
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (ctx == null) throw new Error("no 2d context");
+    const srgb = (value: string): [number, number, number] => {
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = value;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+      return [r as number, g as number, b as number];
+    };
+    const luminance = (value: string) => {
+      const [r, g, b] = srgb(value).map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+      }) as [number, number, number];
+      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    };
+    const ratio = (a: string, b: string) => {
+      const [la, lb] = [luminance(a), luminance(b)];
+      return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+    };
+
+    // The ground the indicator is drawn ON — walked, not assumed, and started at
+    // the PARENT: the indicator sits outside the button, so the button's own
+    // `--primary` fill is not the surface it has to be legible against.
+    let ground = "rgba(0, 0, 0, 0)";
+    for (let el: HTMLElement | null = btn.parentElement; el != null; el = el.parentElement) {
+      const bg = getComputedStyle(el).backgroundColor;
+      if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+        ground = bg;
+        break;
+      }
+    }
+    await expect(ground).not.toBe("rgba(0, 0, 0, 0)");
+
+    // BOTH layers must actually be emitted — a compound indicator with one layer
+    // missing is the single-layer ring this issue was filed about.
+    const focused = getComputedStyle(btn);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+
+    const ringLayer = resolve("--ring");
+    const contourLayer = focused.outlineColor;
+    // The contour layer really is the token, not currentColor or a fallback.
+    await expect(contourLayer).toBe(resolve("--ring-contour"));
+
+    const best = Math.max(ratio(ringLayer, ground), ratio(contourLayer, ground));
+    await expect(
+      best,
+      `focus indicator on ${ground}: ring ${ringLayer} = ${ratio(ringLayer, ground).toFixed(2)}, ` +
+        `contour ${contourLayer} = ${ratio(contourLayer, ground).toFixed(2)}`,
+    ).toBeGreaterThanOrEqual(3);
+  },
+};

package/src/components/button/button.tsx

@@ -4,15 +4,21 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap touch-manipulation rounded-md text-body font-medium transition-[color,background-color,border-color,box-shadow,scale] duration-fast ease-standard active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap touch-manipulation rounded-control text-body font-control transition-[color,background-color,border-color,box-shadow,scale] duration-fast ease-standard active:scale-[0.98] motion-reduce:active:scale-100 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
+        // Disabled treatment is ONE rule for every variant, inherited from the
+        // base string above (`disabled:pointer-events-none disabled:opacity-50`)
+        // — no per-variant fill swap. A solid-fill variant fading via opacity
+        // still reads as "off" against `--muted`/`--background` in both themes;
+        // keeping one mechanism (vs. a bg-muted swap on some variants only) is
+        // what made Input's disabled state internally inconsistent (#286).
         default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+          "bg-destructive text-destructive-foreground hover:bg-destructive-hover active:bg-destructive-active",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         // The calm "outlined but quiet" rung (#194, research 02 §3a). `outline` uses
         // the form-field `border-input` token, `outline-subtle` uses `border-border`.
@@ -24,17 +30,17 @@ export const buttonVariants = cva(
         "outline-subtle":
           "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        // #399 — a link button is TEXT on the page, so it takes the on-surface
-        // `-text` rung; `bg-primary` above keeps the fill rung.
-        link: "text-primary-text underline-offset-4 hover:underline",
+        // #399 — a link button is TEXT on the page: `--link` defaults to the
+        // on-surface `--primary-text` rung; `bg-primary` above keeps the fill rung.
+        link: "text-link underline-offset-4 hover:underline",
       },
       size: {
-        sm: "h-8 rounded-md px-3 text-meta",
-        default: "h-9 px-4 py-2",
-        lg: "h-10 rounded-md px-6",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        sm: "h-control-sm px-3 text-meta",
+        default: "h-control px-4 py-2",
+        lg: "h-control-lg px-6",
+        icon: "size-control",
+        "icon-sm": "size-control-sm",
+        "icon-lg": "size-control-lg",
       },
     },
     defaultVariants: { variant: "default", size: "default" },

package/src/components/button-group/button-group.tsx

@@ -44,7 +44,7 @@ export const ButtonGroupText = forwardRef<
     <Comp
       ref={ref}
       className={cn(
-        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-body font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/calendar/calendar.tsx

@@ -14,6 +14,7 @@ export function Calendar({
 }: CalendarProps) {
   return (
     <DayPicker
+      data-slot="calendar"
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
@@ -26,7 +27,7 @@ export function Calendar({
         // for a taller caption (e.g. `captionLayout="dropdown"`), and `px-8` keeps
         // the label clear of the buttons overlaying either edge.
         month_caption: "flex min-h-7 items-center justify-center px-8",
-        caption_label: "text-sm font-medium",
+        caption_label: "text-body font-medium",
         // Overlays the caption row and pushes the buttons to either edge; the
         // buttons themselves stay in normal flow inside it.
         nav: "absolute inset-x-0 top-0 flex h-7 items-center justify-between",
@@ -42,7 +43,7 @@ export function Calendar({
         weekdays: "flex",
         weekday: "w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground",
         week: "mt-2 flex w-full",
-        day: "relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-e-md first:[&:has([aria-selected])]:rounded-s-md last:[&:has([aria-selected])]:rounded-e-md",
+        day: "relative size-8 p-0 text-center text-body focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-e-md first:[&:has([aria-selected])]:rounded-s-md last:[&:has([aria-selected])]:rounded-e-md",
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
           "size-8 p-0 font-normal aria-selected:opacity-100",

package/src/components/card/card.stories.tsx

@@ -70,6 +70,11 @@ export const Default: Story = {
 
 /** Opt-in hover-lift for clickable cards (gated by the motion system). */
 export const Interactive: Story = {
+  // The suite runs under `prefers-reduced-motion: reduce`
+  // (`apps/docs/vitest.config.ts`, #125), so the gated `--t-base` this asserts
+  // would read as the floor. The lift is what this story exists to prove, so it
+  // opts back into full motion explicitly.
+  globals: { motionPref: "full" },
   render: () => (
     <Card interactive className="max-w-sm" tabIndex={0} role="button">
       <CardHeader>
@@ -153,17 +158,17 @@ export const DetailSideHover: Story = {
             </p>
             <ul className="text-body space-y-1">
               <li>
-                <button className="text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+                <button className="text-foreground hover:underline focus-ring rounded-sm px-1">
                   View report
                 </button>
               </li>
               <li>
-                <button className="text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+                <button className="text-foreground hover:underline focus-ring rounded-sm px-1">
                   Export CSV
                 </button>
               </li>
               <li>
-                <button className="text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+                <button className="text-foreground hover:underline focus-ring rounded-sm px-1">
                   Share
                 </button>
               </li>
@@ -223,10 +228,10 @@ export const DetailBottomHover: Story = {
         className="h-full"
         detail={
           <div className="flex items-center gap-3">
-            <button className="text-body text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+            <button className="text-body text-foreground hover:underline focus-ring rounded-sm px-1">
               Drill down
             </button>
-            <button className="text-body text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+            <button className="text-body text-foreground hover:underline focus-ring rounded-sm px-1">
               Download
             </button>
           </div>
@@ -390,7 +395,7 @@ export const DetailHoverKeyboardReveal: Story = {
           <div className="flex flex-col gap-2 pt-1">
             <button
               data-testid="detail-action"
-              className="text-body text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1 text-start"
+              className="text-body text-foreground hover:underline focus-ring rounded-sm px-1 text-start"
             >
               Open details
             </button>

package/src/components/card/card.test.tsx

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Card, CardDescription, CardTitle } from "./card";
 
 describe("Card", () => {
@@ -103,6 +103,28 @@ describe("Card", () => {
     expect(region).toHaveAttribute("aria-hidden", "true");
   });
 
+  it("with `detail` + hover, cancels its pending conceal rAF on unmount", () => {
+    const rafSpy = vi.spyOn(window, "requestAnimationFrame").mockReturnValue(42);
+    const cafSpy = vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => {});
+    const { unmount } = render(
+      <Card data-testid="card" detailReveal="hover" detail={<button>More</button>}>
+        main
+      </Card>,
+    );
+    const card = screen.getByTestId("card");
+    // focus-out schedules the conceal rAF this test is locking cleanup for.
+    fireEvent.focusOut(card);
+    expect(rafSpy).toHaveBeenCalled();
+
+    unmount();
+    // Without cancelling it, the scheduled frame is still pending after
+    // teardown and fires against a component that no longer exists.
+    expect(cafSpy).toHaveBeenCalledWith(42);
+
+    rafSpy.mockRestore();
+    cafSpy.mockRestore();
+  });
+
   it("with `detail` + hover, detail region is labelled (landmark navigation, #141)", () => {
     render(
       <Card detailReveal="hover" detail={<span>info</span>} detailLabel="Card details">

package/src/components/card/card.tsx

@@ -2,6 +2,7 @@
 
 import {
   forwardRef,
+  useEffect,
   useRef,
   useState,
   useCallback,
@@ -23,7 +24,7 @@ export const cardVariants = cva("rounded-lg border bg-card text-card-foreground
     // duration-* utility; the transform is neutralized under OS reduced-motion
     // (the shadow/border still respond — "reduced != none").
     interactive: {
-      true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-base ease-standard hover:-translate-y-1 hover:border-ring/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:translate-y-0",
+      true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-base ease-standard hover:-translate-y-1 hover:border-ring/40 hover:shadow-md focus-ring motion-reduce:hover:translate-y-0",
       false: "",
     },
   },
@@ -110,12 +111,22 @@ function CardWithHoverDetail({
 }: CardProps) {
   const [isRevealed, setIsRevealed] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const concealRafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (concealRafRef.current !== null) cancelAnimationFrame(concealRafRef.current);
+    };
+  }, []);
 
   const reveal = useCallback(() => setIsRevealed(true), []);
   const conceal = useCallback(() => {
     // Only conceal if focus has truly left the card (not moved to detail).
     // Use requestAnimationFrame so the new focusIn event fires first.
-    requestAnimationFrame(() => {
+    // Tracked in a ref so it can be cancelled if the card unmounts before the
+    // frame fires (a focus-out right before navigation away, say).
+    concealRafRef.current = requestAnimationFrame(() => {
+      concealRafRef.current = null;
       if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
         setIsRevealed(false);
       }
@@ -142,6 +153,7 @@ function CardWithHoverDetail({
   return (
     <div
       ref={containerRef}
+      data-slot="card"
       className={cn(
         cardVariants({ interactive }),
         cardDetailVariants({ detailPlacement, detailReveal: "hover" }),
@@ -161,6 +173,7 @@ function CardWithHoverDetail({
         role="region"
         aria-label={detailLabel}
         aria-hidden={!isRevealed}
+        data-slot="card-detail"
         className={cn("overflow-hidden bg-background p-6", dividerEdge, dividerColor)}
       >
         {detail}
@@ -189,6 +202,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
     return (
       <div
         ref={ref}
+        data-slot="card"
         className={cn(cardVariants({ interactive }), className)}
         style={style}
         {...props}
@@ -230,6 +244,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   return (
     <div
       ref={ref}
+      data-slot="card"
       className={cn(
         cardVariants({ interactive }),
         cardDetailVariants({ detailPlacement, detailReveal }),
@@ -243,6 +258,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
       <div
         role="region"
         aria-label={detailLabel}
+        data-slot="card-detail"
         className={cn("overflow-hidden bg-background p-6", dividerEdge, dividerColor)}
       >
         {detail}
@@ -253,7 +269,14 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
 
 export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   function CardHeader({ className, ...props }, ref) {
-    return <div ref={ref} className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />;
+    return (
+      <div
+        ref={ref}
+        data-slot="card-header"
+        className={cn("flex flex-col gap-1.5 p-6", className)}
+        {...props}
+      />
+    );
   },
 );
 
@@ -276,7 +299,14 @@ export const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(function Car
   { className, as: Tag = "div", ...props },
   ref,
 ) {
-  return <Tag ref={ref} className={cn("text-title leading-none", className)} {...props} />;
+  return (
+    <Tag
+      ref={ref}
+      data-slot="card-title"
+      className={cn("text-title leading-none", className)}
+      {...props}
+    />
+  );
 });
 
 export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
@@ -293,11 +323,12 @@ export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionP
     return (
       <p
         ref={ref}
+        data-slot="card-description"
         // `text-balance` sets `text-wrap: balance`. #336's real defect was an
         // invalid, misspelled utility name that emitted zero CSS (NOT a
         // tailwind-merge conflict) — this is the real, registered class.
         className={cn(
-          "text-sm text-balance text-muted-foreground",
+          "text-body text-balance text-muted-foreground",
           measure && "max-w-prose",
           className,
         )}
@@ -312,6 +343,7 @@ export const CardAction = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
     return (
       <div
         ref={ref}
+        data-slot="card-action"
         className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
         {...props}
       />
@@ -321,12 +353,21 @@ export const CardAction = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
 
 export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   function CardContent({ className, ...props }, ref) {
-    return <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />;
+    return (
+      <div ref={ref} data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />
+    );
   },
 );
 
 export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   function CardFooter({ className, ...props }, ref) {
-    return <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />;
+    return (
+      <div
+        ref={ref}
+        data-slot="card-footer"
+        className={cn("flex items-center p-6 pt-0", className)}
+        {...props}
+      />
+    );
   },
 );