@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -19,7 +19,7 @@ export const DropdownMenuSubTrigger = forwardRef<
       ref={ref}
       data-slot="dropdown-menu-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -41,7 +41,7 @@ export const DropdownMenuSubContent = forwardRef<
         ref={ref}
         data-slot="dropdown-menu-sub-content"
         className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 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 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover 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 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
           className,
         )}
         {...props}
@@ -59,7 +59,11 @@ export const DropdownMenuRadioItem = forwardRef<
       ref={ref}
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
+        // A leading glyph in a checkbox/radio row sizes and spaces exactly like one in a plain
+        // `DropdownMenuItem`. Direct children only: the indicator's own glyph sits inside the
+        // `start-2` span and keeps its own size.
+        "[&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       {...props}
@@ -84,7 +88,11 @@ export const DropdownMenuCheckboxItem = forwardRef<
       checked={checked}
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
+        // A leading glyph in a checkbox/radio row sizes and spaces exactly like one in a plain
+        // `DropdownMenuItem`. Direct children only: the indicator's own glyph sits inside the
+        // `start-2` span and keeps its own size.
+        "[&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       {...props}
@@ -109,7 +117,7 @@ export const DropdownMenuContent = forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[10rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover",
           "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 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
           className,
@@ -128,8 +136,8 @@ export const DropdownMenuItem = forwardRef<
     <DropdownMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast",
-        "focus:bg-accent focus:text-accent-foreground",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast",
+        "focus:bg-accent focus:text-accent-foreground focus-ring-inset",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         inset && "ps-8",
@@ -147,7 +155,7 @@ export const DropdownMenuLabel = forwardRef<
   return (
     <DropdownMenuPrimitive.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}
     />
   );
@@ -172,7 +180,7 @@ export function DropdownMenuShortcut({
 }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("ms-auto text-meta tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/expand-dialog/expand-dialog.test.tsx

@@ -182,4 +182,51 @@ describe("ExpandDialog", () => {
       "0",
     );
   });
+
+  /*
+   * The field must be an even inset on all four sides. `DialogContent`'s
+   * `gap-4` used to leak into its header/body/footer grid (a band under the
+   * header and one below the body, where no footer is), and `DialogBody`'s
+   * `-m-1` focus gutter pushed the field under the clipped sides — 24px above
+   * and below the panes against 8px beside them.
+   */
+  it("insets the panes evenly, with no dialog gap or body gutter", () => {
+    renderOpen(
+      <ExpandDialog title="T" detail={<p>context</p>}>
+        <p>view</p>
+      </ExpandDialog>,
+    );
+    const content = document.querySelector('[data-slot="dialog-content"]')!.className.split(" ");
+    const body = document.querySelector('[data-slot="dialog-body"]')!.className.split(" ");
+    expect(content).toContain("gap-0");
+    expect(content).not.toContain("gap-4");
+    expect(body).toContain("m-0");
+    expect(body).not.toContain("-m-1");
+  });
+
+  /*
+   * The view is a raised surface (`shadow-ring-md`) that fills its track, so a
+   * clipping panes grid cut its shadow and hairline on every edge but the one
+   * facing the detail pane. The field's padding is the room the shadow paints
+   * into; only the field clips.
+   */
+  it("lets the raised view's shadow paint past the panes grid", () => {
+    const { rerender } = renderOpen(
+      <ExpandDialog title="T" detail={<p>context</p>}>
+        <p>view</p>
+      </ExpandDialog>,
+    );
+    const panes = () =>
+      document.querySelector('[data-slot="expand-dialog-panes"]')!.className.split(" ");
+    expect(panes()).not.toContain("overflow-hidden");
+
+    rerender(
+      <Dialog open>
+        <ExpandDialog title="T">
+          <p>view</p>
+        </ExpandDialog>
+      </Dialog>,
+    );
+    expect(panes()).not.toContain("overflow-hidden");
+  });
 });

package/src/components/expand-dialog/expand-dialog.tsx

@@ -44,7 +44,15 @@ import { useLocale } from "../locale-provider";
  * for `--card-detail-size`. The one pair of properties drives whichever axis is
  * active: columns when the detail is beside, rows when it is below.
  */
-export const expandDialogPanesVariants = cva("grid min-h-0 gap-3 overflow-hidden", {
+/*
+ * No `overflow-hidden` on the grid: every track is `minmax(0, …)` and every
+ * pane is `min-h-0 min-w-0 overflow-auto`, so nothing can spill — and the
+ * raised view fills its track, so a clipping grid cut its shadow and hairline
+ * on every edge but the one facing the detail pane. The field around the
+ * panes (`ExpandDialog`'s body) is the clip; its padding is where the shadow
+ * paints.
+ */
+export const expandDialogPanesVariants = cva("grid min-h-0 gap-3", {
   variants: {
     detailPlacement: { side: "", bottom: "" },
     /**
@@ -189,7 +197,7 @@ export const ExpandDialogPanes = forwardRef<HTMLDivElement, ExpandDialogPanesPro
         <div
           ref={ref}
           data-slot="expand-dialog-panes"
-          className={cn("grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden", className)}
+          className={cn("grid min-h-0 grid-rows-[minmax(0,1fr)]", className)}
           style={style}
           {...props}
         >
@@ -278,7 +286,10 @@ export const ExpandDialogContent = forwardRef<
   ElementRef<typeof DialogContent>,
   ExpandDialogContentProps
 >(function ExpandDialogContent({ className, ...props }, ref) {
-  return <DialogContent ref={ref} size="full" className={cn("p-0", className)} {...props} />;
+  // `gap-0`: the header and body butt together. `DialogContent`'s `gap-4`
+  // would otherwise open a band under the header AND one below the body — its
+  // body regime is a 3-row grid, and the empty footer track still gets a gap.
+  return <DialogContent ref={ref} size="full" className={cn("gap-0 p-0", className)} {...props} />;
 });
 
 export interface ExpandDialogProps
@@ -359,10 +370,14 @@ export const ExpandDialog = forwardRef<ElementRef<typeof DialogContent>, ExpandD
       >
         <ExpandDialogHeader actions={actions} description={description} title={title} />
         {/* `tabIndex={-1}`: the panes below are the real scroll owners and take
-            their own tab stops, so the body must not add a third. */}
+            their own tab stops, so the body must not add a third. `m-0` drops
+            `DialogBody`'s `-m-1` focus-ring gutter: this body never scrolls and
+            its `p-3` already clears any ring, while the negative margin tucked
+            the field under the clipped dialog edge — 8px beside the panes
+            against 12px above and below. */}
         <DialogBody
           tabIndex={-1}
-          className={cn("overflow-hidden bg-background p-3", fieldClassName)}
+          className={cn("m-0 overflow-hidden bg-background p-3", fieldClassName)}
         >
           <ExpandDialogPanes
             className={cn("h-full", panesClassName)}

package/src/components/field/field.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cloneElement,
   forwardRef,

package/src/components/field-row/field-row.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cloneElement,
   forwardRef,

package/src/components/file-upload/file-upload.test.tsx

@@ -15,21 +15,28 @@ function makeUploadFile(name = "test.txt", size = 1024): UploadFile {
 }
 
 describe("FileUpload", () => {
-  it("renders the dropzone with a label pointing to the hidden input", () => {
+  it("default dropzone exposes exactly one control: the Browse files button", () => {
     render(
       <FileUpload>
         <FileUploadDropzone />
       </FileUpload>,
     );
-    // The label wraps the input — label's htmlFor matches input's id
-    const label = document.querySelector("label[data-slot='file-upload-dropzone']");
-    expect(label).not.toBeNull();
-    const inputId = label!.getAttribute("for");
-    expect(inputId).toBeTruthy();
-    const input = document.getElementById(inputId!);
-    expect(input).not.toBeNull();
-    expect(input!.tagName.toLowerCase()).toBe("input");
-    expect(input).toHaveAttribute("type", "file");
+    const dropzone = document.querySelector("[data-slot='file-upload-dropzone']")!;
+    // The zone is a plain drop surface — no role, no tab stop — so the inner
+    // button is never nested inside another interactive element (axe
+    // `nested-interactive` / `aria-allowed-role`).
+    expect(dropzone.tagName.toLowerCase()).toBe("div");
+    expect(dropzone).not.toHaveAttribute("role");
+    expect(dropzone).not.toHaveAttribute("tabIndex");
+    expect(screen.getAllByRole("button")).toHaveLength(1);
+
+    const input = document.querySelector("input[type='file']") as HTMLInputElement;
+    const clickSpy = vi.spyOn(input, "click");
+    fireEvent.click(screen.getByRole("button", { name: "Browse files" }));
+    // One activation opens the picker once (the zone's click must not re-fire it).
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    fireEvent.click(dropzone);
+    expect(clickSpy).toHaveBeenCalledTimes(2);
   });
 
   it("hidden file input has sr-only class (visually hidden but real)", () => {
@@ -156,6 +163,72 @@ describe("FileUpload", () => {
     expect(onFilesChange).toHaveBeenCalledWith([]);
   });
 
+  it("drag-and-drop rejects files that don't match `accept` and reports why", () => {
+    const onFilesChange = vi.fn();
+    const onFilesRejected = vi.fn();
+    render(
+      <FileUpload
+        files={[]}
+        onFilesChange={onFilesChange}
+        onFilesRejected={onFilesRejected}
+        accept=".png"
+      >
+        <FileUploadDropzone />
+      </FileUpload>,
+    );
+    const dropzone = document.querySelector("[data-slot='file-upload-dropzone']")!;
+    const wrongType = new File(["x"], "notes.txt", { type: "text/plain" });
+    fireEvent.drop(dropzone, { dataTransfer: { files: [wrongType] } });
+
+    // A drop bypasses the native <input accept> filter entirely — without
+    // this, a dragged-in .txt would be added even though the picker would
+    // never have offered it.
+    expect(onFilesChange).toHaveBeenCalledWith([]);
+    expect(onFilesRejected).toHaveBeenCalledWith([{ file: wrongType, reason: "accept" }]);
+  });
+
+  it("drag-and-drop of several files when multiple=false keeps only the first, rejects the rest", () => {
+    const onFilesChange = vi.fn();
+    const onFilesRejected = vi.fn();
+    render(
+      <FileUpload files={[]} onFilesChange={onFilesChange} onFilesRejected={onFilesRejected}>
+        <FileUploadDropzone />
+      </FileUpload>,
+    );
+    const dropzone = document.querySelector("[data-slot='file-upload-dropzone']")!;
+    const first = new File(["a"], "a.txt", { type: "text/plain" });
+    const second = new File(["b"], "b.txt", { type: "text/plain" });
+    fireEvent.drop(dropzone, { dataTransfer: { files: [first, second] } });
+
+    // `multiple` is only enforced by the browser for the picker dialog, never
+    // for a raw DataTransfer drop.
+    expect(onFilesChange.mock.calls[0]![0]).toHaveLength(1);
+    expect(onFilesChange.mock.calls[0]![0][0].file.name).toBe("a.txt");
+    expect(onFilesRejected).toHaveBeenCalledWith([{ file: second, reason: "multiple" }]);
+  });
+
+  it("a custom-children dropzone still opens the picker on Enter/Space (keyboard reachable)", () => {
+    render(
+      <FileUpload>
+        <FileUploadDropzone>Drop it here</FileUploadDropzone>
+      </FileUpload>,
+    );
+    // With custom `children` there is no fallback "Browse files" button —
+    // the zone itself must be the one control: a tab stop answering Enter/Space.
+    const dropzone = screen.getByRole("button");
+    expect(dropzone).toHaveTextContent("Drop it here");
+    expect(dropzone).toHaveAttribute("data-slot", "file-upload-dropzone");
+    expect(dropzone).toHaveAttribute("tabIndex", "0");
+
+    const input = document.querySelector("input[type='file']") as HTMLInputElement;
+    const clickSpy = vi.spyOn(input, "click");
+    fireEvent.keyDown(dropzone, { key: "Enter" });
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(dropzone, { key: " " });
+    expect(clickSpy).toHaveBeenCalledTimes(2);
+  });
+
   it("disabled prop disables the file input and remove buttons", () => {
     const f = makeUploadFile();
     render(

package/src/components/file-upload/file-upload.tsx

@@ -18,6 +18,7 @@ import {
 import { X, Upload, FileIcon, CheckCircle2, AlertCircle } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../button";
+import { useLocale } from "../locale-provider";
 import { Progress } from "../progress";
 
 // ---------------------------------------------------------------------------
@@ -39,6 +40,42 @@ export interface UploadFile {
   errorMessage?: string;
 }
 
+/** Why `addFiles` (picker OR drag-and-drop) declined a file. */
+export type FileRejectionReason = "accept" | "maxSize" | "maxFiles" | "multiple";
+
+export interface FileRejection {
+  file: File;
+  reason: FileRejectionReason;
+}
+
+/**
+ * Match a file against an `<input accept>`-style pattern list (comma-separated
+ * extensions like `.png`, exact MIME types like `image/png`, or wildcards like
+ * `image/*`). Drag-and-drop delivers files straight from `DataTransfer` — the
+ * browser only enforces `accept` for the native picker dialog, never for a
+ * drop — so this has to be re-applied by hand for the drop path to actually
+ * "respect `accept`".
+ */
+function fileMatchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept) return true;
+  const patterns = accept
+    .split(",")
+    .map((p) => p.trim().toLowerCase())
+    .filter(Boolean);
+  if (patterns.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return patterns.some((pattern) => {
+    if (pattern.startsWith(".")) return name.endsWith(pattern);
+    if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1));
+    return type === pattern;
+  });
+}
+
+function makeUploadFileId(file: File): string {
+  return `${file.name}-${Date.now()}-${Math.random()}`;
+}
+
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
@@ -58,6 +95,22 @@ interface FileUploadContextValue {
   inputId: string;
 }
 
+/** Read `accept`/`multiple`/`maxSize`/`maxFiles` off a rejection for a default message. */
+export function describeFileRejection(rejection: FileRejection): string {
+  switch (rejection.reason) {
+    case "accept":
+      return `${rejection.file.name} is not an accepted file type.`;
+    case "maxSize":
+      return `${rejection.file.name} is too large.`;
+    case "maxFiles":
+      return `${rejection.file.name} was not added — the file limit was reached.`;
+    case "multiple":
+      return `${rejection.file.name} was not added — only one file is allowed.`;
+    default:
+      return `${rejection.file.name} was not added.`;
+  }
+}
+
 const FileUploadContext = createContext<FileUploadContextValue | null>(null);
 
 function useFileUpload(): FileUploadContextValue {
@@ -75,6 +128,12 @@ export interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
   files?: UploadFile[];
   /** Called when files are added or removed. */
   onFilesChange?: (files: UploadFile[]) => void;
+  /**
+   * Called with the files a picker selection OR a drag-and-drop declined —
+   * wrong type (`accept`), over `maxSize`, over `maxFiles`, or extra files
+   * dropped when `multiple` is false — each with its {@link FileRejectionReason}.
+   */
+  onFilesRejected?: (rejections: FileRejection[]) => void;
   /** Accepted MIME types / extensions (forwarded to <input accept>). */
   accept?: string;
   /** Allow multiple files at once. */
@@ -102,6 +161,7 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function F
   {
     files: filesProp,
     onFilesChange,
+    onFilesRejected,
     accept,
     multiple = false,
     maxSize,
@@ -134,19 +194,45 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function F
 
   const addFiles = useCallback(
     (incoming: File[]) => {
-      const toAdd = incoming.filter((f) => {
-        if (maxSize && f.size > maxSize) return false;
-        return true;
-      });
+      const rejections: FileRejection[] = [];
+
+      // A drop can deliver more files than the native picker ever would —
+      // `multiple` is only enforced by the browser for the `<input>` dialog,
+      // never for `DataTransfer`, so re-apply it here for the drop path too.
+      let candidates = incoming;
+      if (!multiple && candidates.length > 1) {
+        rejections.push(
+          ...candidates.slice(1).map((file) => ({ file, reason: "multiple" as const })),
+        );
+        candidates = candidates.slice(0, 1);
+      }
+
+      const toAdd: File[] = [];
+      for (const f of candidates) {
+        if (!fileMatchesAccept(f, accept)) {
+          rejections.push({ file: f, reason: "accept" });
+          continue;
+        }
+        if (maxSize && f.size > maxSize) {
+          rejections.push({ file: f, reason: "maxSize" });
+          continue;
+        }
+        toAdd.push(f);
+      }
 
       const next = [...files];
       for (const f of toAdd) {
-        if (maxFiles && next.length >= maxFiles) break;
-        next.push({ id: `${f.name}-${Date.now()}-${Math.random()}`, file: f });
+        if (maxFiles && next.length >= maxFiles) {
+          rejections.push({ file: f, reason: "maxFiles" });
+          continue;
+        }
+        next.push({ id: makeUploadFileId(f), file: f });
       }
+
       commit(next);
+      if (rejections.length > 0) onFilesRejected?.(rejections);
     },
-    [files, maxSize, maxFiles, commit],
+    [files, accept, multiple, maxSize, maxFiles, commit, onFilesRejected],
   );
 
   const removeFile = useCallback(
@@ -256,30 +342,61 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function F
 // FileUploadDropzone
 // ---------------------------------------------------------------------------
 
-export interface FileUploadDropzoneProps extends HTMLAttributes<HTMLElement> {
-  /** Label for the visually-hidden file picker link (for SR users). */
+export interface FileUploadDropzoneProps extends HTMLAttributes<HTMLDivElement> {
+  /** Label for the default "Browse files" button. */
   browseLabel?: string;
 }
 
 /**
  * FileUploadDropzone — the drag-and-drop target.
  *
- * Uses a `<label>` wrapping the hidden `<input>` so the ENTIRE zone is ONE hit
- * target — no `<div onClick>`.  Keyboard users get the Browse button as a
- * complementary path.
+ * A plain `<div>` drop surface with exactly ONE keyboard-reachable control:
+ *
+ * - Default content: a real `<button>` ("Browse files") is the tab stop; the
+ *   zone itself carries no role and no tab stop, so nothing interactive is
+ *   nested inside another interactive element.
+ * - Custom `children`: there is no inner button, so the zone itself becomes
+ *   the control (`role="button"`, a tab stop, Enter/Space). Custom children
+ *   must then be non-interactive content.
+ *
+ * A pointer click anywhere on the zone also opens the picker — a mouse
+ * convenience on top of the keyboard path above, never the only path.
  */
-export const FileUploadDropzone = forwardRef<HTMLElement, FileUploadDropzoneProps>(
+export const FileUploadDropzone = forwardRef<HTMLDivElement, FileUploadDropzoneProps>(
   function FileUploadDropzone(
-    { className, children, browseLabel = "Browse files", ...props },
+    { className, children, browseLabel, onClick, onKeyDown, ...props },
     ref,
   ) {
-    const { isDragging, disabled, inputId, openPicker } = useFileUpload();
+    const { isDragging, disabled, openPicker } = useFileUpload();
+    const { t } = useLocale();
+    const resolvedBrowseLabel = browseLabel ?? t("ui.fileUpload.browseFiles");
+    // With custom children there is no inner button, so the zone owns the
+    // one keyboard path itself.
+    const isSelfControl = children != null;
 
     return (
-      // label wraps the hidden input — clicking anywhere on the zone opens the picker
-      <label
-        ref={ref as React.Ref<HTMLLabelElement>}
-        htmlFor={inputId}
+      <div
+        ref={ref}
+        role={isSelfControl ? "button" : undefined}
+        tabIndex={isSelfControl && !disabled ? 0 : undefined}
+        // Also on the default (role-less) zone: it marks the dimmed copy as
+        // inactive UI, which WCAG 1.4.3 exempts from contrast — the same
+        // exemption a `<label>` of a disabled control gets.
+        aria-disabled={disabled || undefined}
+        onClick={(e) => {
+          onClick?.(e);
+          if (disabled || e.defaultPrevented) return;
+          openPicker();
+        }}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (!isSelfControl || disabled || e.defaultPrevented) return;
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        }}
         data-slot="file-upload-dropzone"
         data-dragging={isDragging || undefined}
         data-disabled={disabled || undefined}
@@ -300,14 +417,18 @@ export const FileUploadDropzone = forwardRef<HTMLElement, FileUploadDropzoneProp
               <Upload className="size-5 text-muted-foreground" aria-hidden="true" />
             </div>
             <div className="flex flex-col items-center gap-1 text-center">
-              <p className="text-sm font-medium text-foreground">Drag & drop files here</p>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-body font-medium text-foreground">
+                {t("ui.fileUpload.dragDropHere")}
+              </p>
+              <p className="text-meta text-muted-foreground">
                 or{" "}
                 <button
                   type="button"
                   disabled={disabled}
                   onClick={(e) => {
-                    e.preventDefault();
+                    // The zone's own click handler opens the picker; stop the
+                    // bubble so one activation opens it exactly once.
+                    e.stopPropagation();
                     openPicker();
                   }}
                   className={cn(
@@ -320,13 +441,13 @@ export const FileUploadDropzone = forwardRef<HTMLElement, FileUploadDropzoneProp
                     "disabled:pointer-events-none disabled:opacity-50",
                   )}
                 >
-                  {browseLabel}
+                  {resolvedBrowseLabel}
                 </button>
               </p>
             </div>
           </>
         )}
-      </label>
+      </div>
     );
   },
 );
@@ -344,6 +465,7 @@ export type FileUploadListProps = HTMLAttributes<HTMLUListElement>;
 export const FileUploadList = forwardRef<HTMLUListElement, FileUploadListProps>(
   function FileUploadList({ className, children, ...props }, ref) {
     const { files } = useFileUpload();
+    const { t } = useLocale();
     if (files.length === 0 && !children) return null;
 
     return (
@@ -355,7 +477,7 @@ export const FileUploadList = forwardRef<HTMLUListElement, FileUploadListProps>(
       <ul
         ref={ref}
         aria-live="polite"
-        aria-label="Selected files"
+        aria-label={t("ui.fileUpload.selectedFiles")}
         data-slot="file-upload-list"
         className={cn("flex flex-col gap-2", className)}
         {...props}
@@ -420,10 +542,10 @@ export const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>(
       >
         <div className="flex items-center gap-2">
           {statusIcon[resolvedStatus]}
-          <span className="flex-1 min-w-0 truncate text-sm text-foreground">
+          <span className="flex-1 min-w-0 truncate text-body text-foreground">
             {uploadFile.file.name}
           </span>
-          <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          <span className="shrink-0 text-meta tabular-nums text-muted-foreground">
             {formatFileSize(uploadFile.file.size)}
           </span>
           <Button
@@ -445,7 +567,7 @@ export const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>(
           // #124: this is running text (the rejection reason), so it takes the
           // >=4.5:1 ink rung `text-destructive-text` — not the 3:1 mark rung the
           // `statusIcon.error` glyph above correctly keeps.
-          <p role="alert" className="text-xs text-destructive-text">
+          <p role="alert" className="text-meta text-destructive-text">
             {resolvedError}
           </p>
         )}

package/src/components/form/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   createContext,
   forwardRef,
@@ -114,7 +116,7 @@ export const FormDescription = forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );
@@ -132,7 +134,7 @@ export const FormMessage = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLP
         className={cn(
           // #124: the error message body is running text — ink rung, not the
           // 3:1 mark rung `text-destructive` guarantees.
-          "text-sm font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance",
+          "text-body font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance",
           className,
         )}
         {...props}

package/src/components/hover-card/hover-card.tsx

@@ -12,10 +12,11 @@ export const HoverCardContent = forwardRef<
   return (
     <HoverCardPrimitive.Content
       ref={ref}
+      data-slot="hover-card-content"
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-64 rounded-md bg-popover p-4 text-popover-foreground shadow-ring-md outline-none",
+        "z-50 w-64 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none",
         "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",
         className,
       )}

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

@@ -97,7 +97,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
             data-slot="icon-button"
             tabIndex={disabled ? 0 : undefined}
             className={cn(
-              "inline-flex rounded-md",
+              "inline-flex rounded-control",
               // While disabled this span IS the focus target (the button is out
               // of the tab order), so it must carry the system's focus ring —
               // without this it falls back to the UA default outline, which is