@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/section-header/section-header.tsx

@@ -34,12 +34,12 @@ export function SectionHeader({
     <div className={cn("flex flex-wrap items-end justify-between gap-4", className)}>
       <div className="space-y-1">
         {eyebrow ? (
-          <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          <div className="text-meta font-medium uppercase tracking-wide text-muted-foreground">
             {eyebrow}
           </div>
         ) : null}
         <TitleTag className="text-title text-foreground">{title}</TitleTag>
-        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+        {description ? <p className="text-body text-muted-foreground">{description}</p> : null}
       </div>
       {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
     </div>

package/src/components/select/select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   useEffect,
@@ -121,8 +123,8 @@ export const SelectTrigger = forwardRef<
       data-size={size}
       title={title}
       className={cn(
-        "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm",
-        size === "sm" ? "h-8" : "h-9",
+        "flex w-full items-center justify-between gap-2 rounded-control border border-input bg-input-background px-3 py-2 text-body shadow-input",
+        size === "sm" ? "h-control-sm" : "h-control",
         "placeholder:text-muted-foreground focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
         // No `disabled:cursor-*` override — disabled controls keep the arrow
         // automatically (interaction-guidelines.md), matching Combobox's
@@ -154,7 +156,7 @@ export const SelectContent = forwardRef<
         ref={ref}
         position={position}
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-ring-md",
+          "relative z-50 max-h-96 min-w-[12rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-ring-md",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
@@ -190,7 +192,7 @@ export const SelectLabel = forwardRef<
   return (
     <SelectPrimitive.Label
       ref={ref}
-      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+      className={cn("px-2 py-1.5 text-meta font-semibold text-muted-foreground", className)}
       {...props}
     />
   );
@@ -204,7 +206,7 @@ export const SelectItem = forwardRef<
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none transition-colors duration-fast",
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-body outline-none transition-colors duration-fast",
         "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className,
       )}

package/src/components/separator/separator.tsx

@@ -37,6 +37,7 @@ export const Separator = forwardRef<ElementRef<typeof SeparatorPrimitive.Root>,
     return (
       <SeparatorPrimitive.Root
         ref={ref}
+        data-slot="separator"
         decorative={decorative}
         orientation={orientation}
         className={cn(

package/src/components/sheet/sheet.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet";
+
+describe("SheetContent overflow", () => {
+  it("scrolls tall content instead of overflowing the fixed panel", () => {
+    render(
+      <Sheet open>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+          Body
+        </SheetContent>
+      </Sheet>,
+    );
+    const content = screen.getByRole("dialog");
+    // Without `overflow-y-auto`, content taller than the panel overflows the
+    // fixed-position box and its bottom half is unreachable.
+    expect(content.className).toContain("overflow-y-auto");
+  });
+
+  it("caps top/bottom sheets at a viewport-relative height so the scroll rule engages", () => {
+    render(
+      <Sheet open>
+        <SheetContent side="bottom">
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+          Body
+        </SheetContent>
+      </Sheet>,
+    );
+    const content = screen.getByRole("dialog");
+    expect(content.className).toContain("max-h-[90dvh]");
+  });
+});

package/src/components/sheet/sheet.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   type ComponentPropsWithoutRef,
@@ -8,6 +10,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 
 export const Sheet = SheetPrimitive.Root;
 export const SheetTrigger = SheetPrimitive.Trigger;
@@ -21,8 +24,9 @@ const SheetOverlay = forwardRef<
   return (
     <SheetPrimitive.Overlay
       ref={ref}
+      data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-foreground/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
       {...props}
@@ -31,13 +35,23 @@ const SheetOverlay = forwardRef<
 });
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 overscroll-contain bg-card p-6 text-card-foreground shadow-ring-lg transition duration-slow ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+  // `overflow-y-auto` so content taller than the sheet scrolls INSIDE it
+  // instead of overflowing the fixed-position box (unreachable below the
+  // viewport edge).
+  "fixed z-50 gap-4 overflow-y-auto overscroll-contain bg-card p-6 text-card-foreground shadow-ring-lg transition duration-slow ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        // `top`/`bottom` have no inherent height ceiling, so long content grows
+        // past the viewport; cap it at 90dvh (matching Dialog's dvh unit — ADR
+        // on mobile browser chrome) so the scroll rule above actually engages.
+        top: "inset-x-0 top-0 max-h-[90dvh] border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          "inset-x-0 bottom-0 max-h-[90dvh] border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        // `side` is an explicit physical edge of the screen (like Radix's own
+        // Popper `side`), not a logical start/end — a caller who picks `"left"`
+        // wants the panel on the physical left even in an RTL layout, so these
+        // stay physical `left-0`/`right-0` and `border-r`/`border-l` on purpose.
         left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         right:
           "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
@@ -56,18 +70,24 @@ export const SheetContent = forwardRef<
   ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
 >(function SheetContent({ side = "right", className, children, ...props }, ref) {
+  const { t } = useLocale();
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
         ref={ref}
+        data-slot="sheet-content"
         className={cn(sheetVariants({ side }), className)}
         {...props}
       >
         {children}
+        {/* Matches Dialog's close button exactly (radius, padding, ink,
+            opacity choreography) — a 24px target (`p-1` + the 16px glyph)
+            instead of the previous bare 16px hit area (#286). */}
         <SheetPrimitive.Close
-          className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-ring"
-          aria-label="Close"
+          data-slot="sheet-close"
+          className="absolute end-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring"
+          aria-label={t("close")}
         >
           <X className="size-4" />
         </SheetPrimitive.Close>
@@ -77,11 +97,14 @@ export const SheetContent = forwardRef<
 });
 
 export function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-1.5", className)} {...props} />;
+  return (
+    <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5", className)} {...props} />
+  );
 }
 export function SheetFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
+      data-slot="sheet-footer"
       className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
@@ -92,7 +115,14 @@ export const SheetTitle = forwardRef<
   ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(function SheetTitle({ className, ...props }, ref) {
   return (
-    <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`,
+    // one rung below Dialog's for the same anatomical role (a modal title).
+    <SheetPrimitive.Title
+      ref={ref}
+      data-slot="sheet-title"
+      className={cn("text-title leading-none", className)}
+      {...props}
+    />
   );
 });
 export const SheetDescription = forwardRef<
@@ -102,7 +132,8 @@ export const SheetDescription = forwardRef<
   return (
     <SheetPrimitive.Description
       ref={ref}
-      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="sheet-description"
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/side-dock/side-dock.test.tsx

@@ -270,4 +270,30 @@ describe("SideDock", () => {
     expect(document.activeElement).not.toBe(document.body);
     expect(document.activeElement).toBe(trigger);
   });
+
+  it("coalesces a burst of resize events into one rAF-scheduled update", () => {
+    const rafCallbacks: FrameRequestCallback[] = [];
+    const rafSpy = vi
+      .spyOn(window, "requestAnimationFrame")
+      .mockImplementation((cb: FrameRequestCallback) => {
+        rafCallbacks.push(cb);
+        return rafCallbacks.length;
+      });
+
+    render(
+      <SideDock title="Assistant" open overlayBreakpoint={COLUMN_BREAKPOINT}>
+        Body
+      </SideDock>,
+    );
+    rafCallbacks.length = 0; // clear anything scheduled at mount
+
+    // A window drag fires `resize` many times per frame — every one of these
+    // must coalesce into a SINGLE scheduled frame, not one per event.
+    fireEvent(window, new Event("resize"));
+    fireEvent(window, new Event("resize"));
+    fireEvent(window, new Event("resize"));
+    expect(rafCallbacks).toHaveLength(1);
+
+    rafSpy.mockRestore();
+  });
 });

package/src/components/side-dock/side-dock.tsx

@@ -216,9 +216,22 @@ export const SideDock = forwardRef<HTMLElement, SideDockProps>(function SideDock
     typeof window !== "undefined" ? window.innerWidth : FALLBACK_VIEWPORT_WIDTH,
   );
   useEffect(() => {
-    const onResize = () => setViewportWidth(window.innerWidth);
+    // `resize` can fire dozens of times per second while a window is being
+    // dragged — coalesce every event inside one frame into a single state
+    // update via rAF, instead of re-rendering on each raw event.
+    let rafId: number | null = null;
+    const onResize = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        setViewportWidth(window.innerWidth);
+      });
+    };
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
   }, []);
 
   const isWidthControlled = width !== undefined;

package/src/components/sidebar/sidebar.test.tsx

@@ -1,5 +1,6 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {
   Sidebar,
@@ -9,6 +10,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
+  SidebarTrigger,
 } from "./sidebar";
 
 function renderFrame() {
@@ -75,4 +77,36 @@ describe("SidebarProvider", () => {
     expect(active.className).toContain("data-[active=true]:font-semibold");
     expect(resting).toHaveAttribute("data-active", "false");
   });
+
+  it("does not re-bind the global keydown listener on every toggle", async () => {
+    const user = userEvent.setup();
+    const addSpy = vi.spyOn(window, "addEventListener");
+    const removeSpy = vi.spyOn(window, "removeEventListener");
+    render(
+      <SidebarProvider>
+        <Sidebar>chrome</Sidebar>
+        <SidebarInset>
+          <SidebarTrigger />
+        </SidebarInset>
+      </SidebarProvider>,
+    );
+    const keydownAddCallsAtMount = addSpy.mock.calls.filter((c) => c[0] === "keydown").length;
+    expect(keydownAddCallsAtMount).toBe(1);
+
+    // Each click flips `open`, which recreates `toggleSidebar` (it closes
+    // over `setOpen`, which closes over `open`) — a `useEffect` depending on
+    // that callback directly would tear down and re-add the `keydown`
+    // listener on every single toggle.
+    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByRole("button"));
+
+    const keydownAddCallsAfterToggles = addSpy.mock.calls.filter((c) => c[0] === "keydown").length;
+    const keydownRemoveCalls = removeSpy.mock.calls.filter((c) => c[0] === "keydown").length;
+    expect(keydownAddCallsAfterToggles).toBe(1);
+    expect(keydownRemoveCalls).toBe(0);
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
 });

package/src/components/sidebar/sidebar.tsx

@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ComponentProps,
   type CSSProperties,
@@ -118,6 +119,17 @@ export const SidebarProvider = forwardRef<
     return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);
   }, [isMobile, setOpen]);
 
+  // `toggleSidebar` is a NEW function on every `open` change (it closes over
+  // `setOpen`, which itself closes over `open`) — a `useEffect` depending on
+  // it directly would tear down and re-add the global `keydown` listener on
+  // every single toggle. A ref holding the latest callback keeps the listener
+  // registration stable across toggles; only `isNested` (which never changes
+  // after mount) re-runs the effect.
+  const toggleSidebarRef = useRef(toggleSidebar);
+  useEffect(() => {
+    toggleSidebarRef.current = toggleSidebar;
+  }, [toggleSidebar]);
+
   useEffect(() => {
     // Same reasoning as the cookie write above: the global keyboard shortcut
     // belongs to the ONE app frame, not to every nested provider a compound
@@ -126,12 +138,12 @@ export const SidebarProvider = forwardRef<
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
-        toggleSidebar();
+        toggleSidebarRef.current();
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isNested, toggleSidebar]);
+  }, [isNested]);
 
   const state = open ? "expanded" : "collapsed";
 
@@ -273,7 +285,7 @@ export const Sidebar = forwardRef<
         >
           <SheetHeader className="sr-only">
             <SheetTitle>{t("ui.sidebar.title")}</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            <SheetDescription>{t("ui.sidebar.mobileDescription")}</SheetDescription>
           </SheetHeader>
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
@@ -335,6 +347,7 @@ export const Sidebar = forwardRef<
 
 export const SidebarTrigger = forwardRef<HTMLButtonElement, ComponentProps<typeof Button>>(
   function SidebarTrigger({ className, onClick, ...props }, ref) {
+    const { t } = useLocale();
     const { isMobile, open, openMobile, toggleSidebar } = useSidebar();
     // `toggleSidebar` flips `openMobile` below the mobile breakpoint and `open`
     // above it, so the state this button EXPOSES has to be read the same way —
@@ -368,7 +381,7 @@ export const SidebarTrigger = forwardRef<HTMLButtonElement, ComponentProps<typeo
         {...props}
       >
         <PanelLeftIcon />
-        <span className="sr-only">Toggle Sidebar</span>
+        <span className="sr-only">{t("ui.sidebar.toggle")}</span>
       </Button>
     );
   },
@@ -376,16 +389,17 @@ export const SidebarTrigger = forwardRef<HTMLButtonElement, ComponentProps<typeo
 
 export const SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<"button">>(
   function SidebarRail({ className, ...props }, ref) {
+    const { t } = useLocale();
     const { toggleSidebar } = useSidebar();
     return (
       <button
         ref={ref}
         data-sidebar="rail"
         data-slot="sidebar-rail"
-        aria-label="Toggle Sidebar"
+        aria-label={t("ui.sidebar.toggle")}
         tabIndex={-1}
         onClick={toggleSidebar}
-        title="Toggle Sidebar"
+        title={t("ui.sidebar.toggle")}
         className={cn(
           "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
           "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",

package/src/components/skeleton/skeleton.tsx

@@ -7,6 +7,7 @@ export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
 export function Skeleton({ className, ...props }: SkeletonProps) {
   return (
     <div
+      data-slot="skeleton"
       className={cn("animate-pulse rounded-md bg-muted", className)}
       aria-hidden="true"
       {...props}

package/src/components/slider-number/slider-number.stories.tsx

@@ -109,7 +109,10 @@ export const DragThenReset: Story = {
     thumb.focus();
     await userEvent.keyboard("{ArrowRight}{ArrowRight}{ArrowRight}");
     const numberInput = canvas.getByRole("spinbutton", { name: "Temperature" });
-    await expect(numberInput).toHaveValue(0.3);
+    // Text spinbutton (locale-formatted): string display + numeric aria-valuenow.
+    await expect(numberInput).toHaveValue("0.3");
+    await expect(numberInput).toHaveAttribute("aria-valuenow", "0.3");
+    await expect(thumb).toHaveAttribute("aria-valuenow", "0.3");
 
     const resetBtn = canvas.getByRole("button", { name: "Reset" });
     await expect(resetBtn).not.toBeDisabled();

package/src/components/slider-number/slider-number.test.tsx

@@ -10,7 +10,7 @@ describe("SliderNumber", () => {
       "aria-valuenow",
       "0.5",
     );
-    expect(screen.getByRole("spinbutton", { name: "Temperature" })).toHaveValue(0.5);
+    expect(screen.getByRole("spinbutton", { name: "Temperature" })).toHaveValue("0.5");
   });
 
   it("rounds slider-driven and typed values identically (lockstep)", async () => {

package/src/components/sonner/sonner.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { Toaster as SonnerToaster, toast } from "sonner";
 import { resolveThemeIsDark } from "@elabs-ai/components-tokens";

package/src/components/spinner/spinner.test.tsx

@@ -0,0 +1,18 @@
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Spinner } from "./spinner";
+
+describe("Spinner", () => {
+  it("renders with its default accessible label", () => {
+    render(<Spinner />);
+    expect(screen.getByRole("status", { name: "Loading" })).toBeInTheDocument();
+  });
+
+  it("forwards its ref to the rendered svg", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<Spinner ref={ref} />);
+    expect(ref.current).toBeInstanceOf(SVGSVGElement);
+    expect(ref.current).toBe(screen.getByRole("status", { name: "Loading" }));
+  });
+});

package/src/components/spinner/spinner.tsx

@@ -1,19 +1,29 @@
+"use client";
+
+import { forwardRef } from "react";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 
 export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
-  /** Accessible label; defaults to "Loading". */
+  /** Accessible label; defaults to the localized "Loading…" microcopy. */
   label?: string;
 }
 
 /** Indeterminate spinner with an accessible label. */
-export function Spinner({ className, label = "Loading", ...props }: SpinnerProps) {
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(
+  { className, label, ...props },
+  ref,
+) {
+  const { t } = useLocale();
   return (
     <Loader2
+      ref={ref}
+      data-slot="spinner"
       role="status"
-      aria-label={label}
+      aria-label={label ?? t("ui.spinner.label")}
       className={cn("size-4 animate-spin text-muted-foreground", className)}
       {...props}
     />
   );
-}
+});

package/src/components/state-panel/state-panel.test.tsx

@@ -122,7 +122,7 @@ describe("StatePanel", () => {
     expect(wrapper?.className ?? "").not.toContain("size-10");
   });
 
-  it("illustration path renders the title at the subtitle role, distinct from the icon path's text-sm (#47)", () => {
+  it("illustration path renders the title at the subtitle role, distinct from the icon path's text-body (#47)", () => {
     // A 112px+ illustration needs a heavier title to group with — bumping the
     // title to `text-subtitle` (styling-and-tokens.md's typography-scale
     // roles) only on the illustration path, so the plain `icon` path (a
@@ -132,13 +132,13 @@ describe("StatePanel", () => {
     );
     const titleWithIllustration = withIllustration.querySelector("h3");
     expect(titleWithIllustration?.className ?? "").toContain("text-subtitle");
-    expect(titleWithIllustration?.className ?? "").not.toMatch(/\btext-sm\b/);
+    expect(titleWithIllustration?.className ?? "").not.toMatch(/\btext-body\b/);
 
     const { container: withIcon } = render(
       <StatePanel kind="empty" title="No items" icon={<span data-testid="i" />} />,
     );
     const titleWithIcon = withIcon.querySelector("h3");
-    expect(titleWithIcon?.className ?? "").toMatch(/\btext-sm\b/);
+    expect(titleWithIcon?.className ?? "").toMatch(/\btext-body\b/);
     expect(titleWithIcon?.className ?? "").not.toContain("text-subtitle");
   });
 

package/src/components/state-panel/state-panel.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { type CSSProperties, type ReactNode } from "react";
 import { CircleAlert } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 import { ILLUSTRATION_ACCENT_VAR } from "../../illustrations/illustration-base";
+import { useLocale } from "../locale-provider";
 
 // ─── Variants ────────────────────────────────────────────────────────────────
 
@@ -123,13 +126,15 @@ export function StatePanel({
   icon,
   illustration,
   titleAs: Tag = "h3",
-  loadingLabel = "Loading…",
+  loadingLabel,
   size = "md",
   actions,
   className,
 }: StatePanelProps) {
+  const { t } = useLocale();
   const isLoading = kind === "loading";
   const isError = kind === "error";
+  const resolvedLoadingLabel = loadingLabel ?? t("loading");
 
   // Role: loading → status + live region; error → alert; empty → (none needed).
   const roleProps = isLoading
@@ -139,9 +144,9 @@ export function StatePanel({
       : {};
 
   // Default title / description fallbacks for error state (mirroring old ErrorState).
-  const resolvedTitle = title ?? (isError ? "Something went wrong" : undefined);
+  const resolvedTitle = title ?? (isError ? t("ui.statePanel.errorTitle") : undefined);
   const resolvedDescription =
-    description ?? (isError ? "An unexpected error occurred. Please try again." : undefined);
+    description ?? (isError ? t("ui.statePanel.errorDescription") : undefined);
 
   // Resolve displayed icon.
   let resolvedIcon: ReactNode;
@@ -167,7 +172,7 @@ export function StatePanel({
           correct there — do not "tidy" it onto -text too. */}
       {isError && (
         <span className="text-meta font-semibold uppercase tracking-widest text-destructive-text">
-          Error
+          {t("ui.statePanel.errorEyebrow")}
         </span>
       )}
 
@@ -223,21 +228,23 @@ export function StatePanel({
             <Tag
               className={cn(
                 "font-semibold text-foreground",
-                illustration ? "text-subtitle" : "text-sm",
+                illustration ? "text-subtitle" : "text-body",
               )}
             >
               {resolvedTitle}
             </Tag>
           )}
           {resolvedDescription && (
-            <p className="mx-auto max-w-sm text-sm text-muted-foreground">{resolvedDescription}</p>
+            <p className="mx-auto max-w-sm text-body text-muted-foreground">
+              {resolvedDescription}
+            </p>
           )}
         </div>
       )}
 
       {/* Loading label (visually shown as supporting text; also the live-region content). */}
-      {isLoading && loadingLabel && (
-        <span className="text-sm text-muted-foreground">{loadingLabel}</span>
+      {isLoading && resolvedLoadingLabel && (
+        <span className="text-body text-muted-foreground">{resolvedLoadingLabel}</span>
       )}
 
       {actions ? <div className="mt-1 flex items-center gap-2">{actions}</div> : null}

package/src/components/switch/switch.tsx

@@ -9,6 +9,7 @@ export const Switch = forwardRef<
   return (
     <SwitchPrimitive.Root
       ref={ref}
+      data-slot="switch"
       className={cn(
         "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors duration-fast ease-standard",
         "focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -19,6 +20,7 @@ export const Switch = forwardRef<
       {...props}
     >
       <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
         className={cn(
           "pointer-events-none block size-4 rounded-full bg-background shadow-xs ring-0 transition-transform duration-fast ease-standard",
           "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",

package/src/components/table/table.stories.tsx

@@ -104,7 +104,9 @@ export const Scrolling: Story = {
     });
     await expect(scrollRegion).toHaveAttribute("tabindex", "0");
     await expect(scrollRegion).toHaveAccessibleName("Table contents, scrollable");
-    await expect(scrollRegion).not.toHaveAttribute("role");
+    // A named, non-landmark stop: `group`, never `region` (a landmark per
+    // overflowing table collides under axe `landmark-unique`).
+    await expect(scrollRegion).toHaveAttribute("role", "group");
 
     // The region is the only focusable element the story renders, so a
     // single Tab from nothing focused reaches it — the real WCAG 2.1.1