@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/copyable-value/copyable-value.stories.tsx

@@ -1,11 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
+import { Toaster } from "../sonner";
 import { CopyableValue } from "./copyable-value";
 
 const meta = {
   title: "Display/CopyableValue",
   component: CopyableValue,
   tags: ["autodocs"],
+  // The copy toast needs a host; apps mount one `<Toaster />` at their root.
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
   parameters: {
     docs: {
       description: {

package/src/components/copyable-value/copyable-value.test.tsx

@@ -11,7 +11,10 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { CopyableValue } from "./copyable-value";
+import { toast } from "../sonner";
+import { CopyableValue, COPYABLE_VALUE_TOAST_MS } from "./copyable-value";
+
+vi.mock("../sonner", () => ({ toast: vi.fn() }));
 
 /** Install a clipboard stub for one test; returns the writeText spy. */
 function stubClipboard(impl: () => Promise<void> = () => Promise.resolve()) {
@@ -38,6 +41,30 @@ describe("CopyableValue", () => {
     });
   });
 
+  it("shows a one-second toast once the copy succeeds", async () => {
+    vi.mocked(toast).mockClear();
+    stubClipboard();
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(toast).toHaveBeenCalledWith("Copied", { duration: COPYABLE_VALUE_TOAST_MS });
+    });
+    expect(COPYABLE_VALUE_TOAST_MS).toBe(1000);
+  });
+
+  it("shows no toast when the copy fails", async () => {
+    vi.mocked(toast).mockClear();
+    stubClipboard(() => Promise.reject(new Error("denied")));
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("");
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+
   it("falls back to the exact value as its own display", () => {
     render(<CopyableValue value="1234" />);
     expect(screen.getByRole("button")).toHaveTextContent("1234");

package/src/components/copyable-value/copyable-value.tsx

@@ -19,6 +19,10 @@ import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
 import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard";
 import { useLocale } from "../locale-provider";
+import { toast } from "../sonner";
+
+/** ms the copy-confirmation toast stays on screen. */
+export const COPYABLE_VALUE_TOAST_MS = 1000;
 
 export interface CopyableValueProps extends Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -72,14 +76,21 @@ export const CopyableValue = forwardRef<HTMLButtonElement, CopyableValueProps>(
             // only resting affordance, so a value inside a heading or a KPI
             // still looks like a value, not a link.
             "inline-flex items-baseline gap-1 rounded-sm underline decoration-dotted decoration-muted-foreground underline-offset-4",
-            "hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "hover:decoration-foreground focus-ring",
             "transition-colors duration-fast ease-standard motion-reduce:transition-none",
             className,
           )}
           onClick={(event) => {
             onClick?.(event);
             if (!event.defaultPrevented) {
-              void copy(value);
+              // The toast is the visible confirmation; it needs an app-mounted
+              // `<Toaster />` and is a silent no-op without one, which is why
+              // the live region below stays as the always-present fallback.
+              void copy(value).then((ok) => {
+                if (ok) {
+                  toast(t("ui.copyableValue.copied"), { duration: COPYABLE_VALUE_TOAST_MS });
+                }
+              });
             }
           }}
         >

package/src/components/date-picker/date-picker.stories.tsx

@@ -5,6 +5,15 @@ const meta = {
   title: "Forms/DatePicker",
   component: DatePicker,
   tags: ["autodocs"],
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-xs">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     value: {
       description: "Controlled selected date.",

package/src/components/date-picker/date-picker.test.tsx

@@ -0,0 +1,52 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DatePicker } from "./date-picker";
+import { LocaleProvider } from "../locale-provider";
+
+describe("DatePicker", () => {
+  it("forwards the ref to the trigger button", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<DatePicker ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current).toBe(screen.getByRole("button"));
+  });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<DatePicker />);
+    expect(screen.getByRole("button").className).not.toMatch(/\bw-56\b/);
+  });
+
+  // #reviewed 1.7 — same `value ?? internal` / ternary-setter bug as Combobox:
+  // an uncontrolled DatePicker with an onValueChange listener never updated
+  // its own displayed date.
+  it("updates its own displayed date when uncontrolled even with an onValueChange listener", async () => {
+    const onValueChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker onValueChange={onValueChange} placeholder="Pick a date" />);
+    const trigger = screen.getByRole("button", { name: /pick a date/i });
+    await user.click(trigger);
+    const grid = await screen.findByRole("grid");
+    const dayButtons = within(grid)
+      .getAllByRole("button")
+      .filter((b) => !/previous|next/i.test(b.getAttribute("aria-label") ?? ""));
+    const firstEnabled = dayButtons.find((b) => !(b as HTMLButtonElement).disabled)!;
+    await user.click(firstEnabled);
+    expect(onValueChange).toHaveBeenCalled();
+    expect(trigger).not.toHaveTextContent("Pick a date");
+  });
+
+  it("formats the displayed date using the active locale", () => {
+    const date = new Date(2024, 0, 15); // Jan 15, 2024
+    render(
+      <LocaleProvider locale="de-DE">
+        <DatePicker value={date} />
+      </LocaleProvider>,
+    );
+    // de-DE "medium" dateStyle renders like "15. Jan. 2024" — distinct from
+    // the en-US default ("Jan 15, 2024").
+    expect(screen.getByRole("button")).toHaveTextContent("2024");
+    expect(screen.getByRole("button").textContent).not.toMatch(/Jan 15, 2024/);
+  });
+});

package/src/components/date-picker/date-picker.tsx

@@ -1,8 +1,10 @@
-import { useState } from "react";
+import { forwardRef } from "react";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
 import { Button } from "../button";
 import { Calendar } from "../calendar";
+import { useLocale } from "../locale-provider";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
 export interface DatePickerProps {
@@ -13,26 +15,22 @@ export interface DatePickerProps {
 }
 
 /** Single-date picker (Popover + Calendar). Controlled or uncontrolled. */
-export function DatePicker({
-  value,
-  onValueChange,
-  placeholder = "Pick a date",
-  className,
-}: DatePickerProps) {
-  const [internal, setInternal] = useState<Date | undefined>(undefined);
-  const date = value ?? internal;
-  const setDate = (d?: Date) => (onValueChange ? onValueChange(d) : setInternal(d));
-  const label = date
-    ? new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date)
-    : placeholder;
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker(
+  { value, onValueChange, placeholder = "Pick a date", className },
+  ref,
+) {
+  const { formatDate } = useLocale();
+  const [date, setDate] = useControllableState<Date | undefined>(value, undefined, onValueChange);
+  const label = date ? formatDate(date, { dateStyle: "medium" }) : placeholder;
 
   return (
     <Popover>
       <PopoverTrigger asChild>
         <Button
+          ref={ref}
           variant="outline"
           className={cn(
-            "w-56 justify-start gap-2 text-start font-normal",
+            "w-full justify-start gap-2 text-start font-normal",
             !date && "text-muted-foreground",
             className,
           )}
@@ -46,4 +44,4 @@ export function DatePicker({
       </PopoverContent>
     </Popover>
   );
-}
+});

package/src/components/date-range-picker/date-range-picker.stories.tsx

@@ -12,6 +12,15 @@ const meta = {
   parameters: {
     layout: "centered",
   },
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     value: {
       description: "Controlled date range `{ from, to }`.",

package/src/components/date-range-picker/date-range-picker.test.tsx

@@ -6,9 +6,12 @@
  * select interaction and accessibility are covered by the Storybook stories
  * (run via `pnpm --filter @elabs-ai/components-docs test-storybook` or the MCP story tests).
  */
+import { useState } from "react";
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { DateRangePicker } from "./date-range-picker";
+import userEvent from "@testing-library/user-event";
+import { DateRangePicker, type DateRange } from "./date-range-picker";
+import { LocaleProvider } from "../locale-provider";
 
 describe("DateRangePicker", () => {
   it("renders the placeholder on the trigger when no range is set", () => {
@@ -59,4 +62,76 @@ describe("DateRangePicker", () => {
     const button = screen.getByRole("button");
     expect(button.className).toContain("my-custom-class");
   });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<DateRangePicker />);
+    expect(screen.getByRole("button").className).not.toMatch(/\bw-72\b/);
+  });
+
+  it("spreads extra props (e.g. data-testid) onto the trigger button", () => {
+    render(<DateRangePicker data-testid="range-trigger" />);
+    expect(screen.getByTestId("range-trigger")).toBeInTheDocument();
+  });
+
+  it("formats the range label using the active locale", () => {
+    const from = new Date(2024, 0, 5);
+    const to = new Date(2024, 0, 20);
+    render(
+      <LocaleProvider locale="de-DE">
+        <DateRangePicker value={{ from, to }} />
+      </LocaleProvider>,
+    );
+    // de-DE renders "5. Jan. 2024" style — distinct from the en-US default.
+    expect(screen.getByRole("button").textContent).not.toMatch(/Jan 5, 2024/);
+  });
+
+  // #reviewed 1.7 — clearing a controlled range to `undefined` must not fall
+  // through to a stale uncontrolled `internal` value: once controlled, the
+  // component must stay controlled for its whole lifetime.
+  it("collapses to a single month below the sm breakpoint (phone-width popover)", async () => {
+    const originalWidth = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 375,
+    });
+    try {
+      const user = userEvent.setup();
+      render(<DateRangePicker />);
+      await user.click(screen.getByRole("button"));
+      const grids = await screen.findAllByRole("grid");
+      expect(grids).toHaveLength(1);
+    } finally {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        configurable: true,
+        value: originalWidth,
+      });
+    }
+  });
+
+  it("shows the placeholder (not a stale value) when a controlled range is cleared to undefined", async () => {
+    function Harness() {
+      const [range, setRange] = useState<DateRange | undefined>({
+        from: new Date(2024, 0, 5),
+        to: new Date(2024, 0, 20),
+      });
+      return (
+        <>
+          <DateRangePicker value={range} onValueChange={setRange} placeholder="Pick a range" />
+          <button type="button" onClick={() => setRange(undefined)}>
+            Clear
+          </button>
+        </>
+      );
+    }
+    const user = userEvent.setup();
+    render(<Harness />);
+    const trigger = screen.getByRole("button", { name: /–/ });
+    expect(trigger.textContent).not.toBe("Pick a range");
+
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+
+    expect(trigger).toHaveTextContent("Pick a range");
+  });
 });

package/src/components/date-range-picker/date-range-picker.tsx

@@ -1,14 +1,20 @@
 // a2ui.exposed: yes
 "use client";
 
-import { forwardRef, useState } from "react";
+import { forwardRef, type HTMLAttributes } from "react";
 import { Calendar as CalendarIcon } from "lucide-react";
 import type { DateRange } from "react-day-picker";
 import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
+import { useIsMobile } from "../../lib/use-mobile";
 import { Button } from "../button";
 import { Calendar } from "../calendar";
+import { useLocale } from "../locale-provider";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
+/** Below this width, the calendar collapses to a single month (Tailwind `sm`). */
+const NARROW_BREAKPOINT = 640;
+
 export type { DateRange };
 
 export interface DateRangePreset {
@@ -16,7 +22,10 @@ export interface DateRangePreset {
   getRange: () => DateRange;
 }
 
-export interface DateRangePickerProps {
+export interface DateRangePickerProps extends Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  "onSelect" | "children" | "value" | "defaultValue"
+> {
   value?: DateRange;
   defaultValue?: DateRange;
   onValueChange?: (range?: DateRange) => void;
@@ -26,16 +35,6 @@ export interface DateRangePickerProps {
   className?: string;
 }
 
-const fmt = (date: Date) =>
-  new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date);
-
-function formatRange(range: DateRange | undefined, placeholder: string): string {
-  if (!range) return placeholder;
-  if (range.from && range.to) return `${fmt(range.from)} – ${fmt(range.to)}`;
-  if (range.from) return `${fmt(range.from)} – …`;
-  return placeholder;
-}
-
 /**
  * Date range picker (Popover + Calendar in range mode).
  * Supports optional preset quick-picks, controlled or uncontrolled.
@@ -50,24 +49,31 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
       numberOfMonths = 2,
       placeholder = "Pick a date range",
       className,
+      ...props
     },
     ref,
   ) {
-    const [internal, setInternal] = useState<DateRange | undefined>(defaultValue);
-
-    const isControlled = value !== undefined;
-    const range = isControlled ? value : internal;
+    const { formatDate } = useLocale();
+    const [range, setRange] = useControllableState<DateRange | undefined>(
+      value,
+      defaultValue,
+      onValueChange,
+    );
 
-    const setRange = (r?: DateRange) => {
-      if (!isControlled) {
-        setInternal(r);
-      }
-      // Always fire the callback so uncontrolled consumers can observe changes
-      onValueChange?.(r);
+    const fmt = (date: Date) => formatDate(date, { dateStyle: "medium" });
+    const formatRange = (r: DateRange | undefined): string => {
+      if (!r) return placeholder;
+      if (r.from && r.to) return `${fmt(r.from)} – ${fmt(r.to)}`;
+      if (r.from) return `${fmt(r.from)} – …`;
+      return placeholder;
     };
 
     const hasRange = Boolean(range?.from);
-    const label = formatRange(range, placeholder);
+    const label = formatRange(range);
+
+    // Below `sm`, two side-by-side months push the popover off-screen (#reviewed).
+    const isNarrow = useIsMobile(NARROW_BREAKPOINT);
+    const monthsToShow = isNarrow ? 1 : numberOfMonths;
 
     return (
       <Popover>
@@ -76,8 +82,9 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
             ref={ref}
             variant="outline"
             aria-haspopup="dialog"
+            {...props}
             className={cn(
-              "w-72 justify-start gap-2 text-start font-normal",
+              "w-full justify-start gap-2 text-start font-normal",
               !hasRange && "text-muted-foreground",
               className,
             )}
@@ -86,10 +93,14 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
             {label}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent
+          className="w-auto max-w-[calc(100vw-1rem)] p-0"
+          align="start"
+          collisionPadding={8}
+        >
           {presets && presets.length > 0 ? (
             <div className="flex">
-              <div className="flex flex-col gap-1 border-r border-border p-2">
+              <div className="flex flex-col gap-1 border-e border-border p-2">
                 {presets.map((preset) => (
                   <Button
                     key={preset.label}
@@ -104,7 +115,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
               </div>
               <Calendar
                 mode="range"
-                numberOfMonths={numberOfMonths}
+                numberOfMonths={monthsToShow}
                 selected={range}
                 onSelect={setRange}
                 autoFocus
@@ -113,7 +124,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
           ) : (
             <Calendar
               mode="range"
-              numberOfMonths={numberOfMonths}
+              numberOfMonths={monthsToShow}
               selected={range}
               onSelect={setRange}
               autoFocus

package/src/components/descriptions/descriptions.tsx

@@ -3,7 +3,7 @@ import { createContext, forwardRef, use, type HTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
-const descriptionsVariants = cva("grid gap-x-6 gap-y-3 text-sm", {
+const descriptionsVariants = cva("grid gap-x-6 gap-y-3 text-body", {
   variants: {
     columns: {
       1: "grid-cols-1",

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

@@ -47,11 +47,16 @@ describe("DialogContent size variants", () => {
     expect(content.className).toContain("max-w-3xl");
   });
 
-  it("size='full' renders max-w-[95vw] and h-[90vh]", () => {
+  it("size='full' renders max-w-[95vw] and h-[90dvh] — dvh, not vh (mobile browser chrome)", () => {
     render(<Wrapper size="full" />);
     const content = screen.getByRole("dialog");
     expect(content.className).toContain("max-w-[95vw]");
-    expect(content.className).toContain("h-[90vh]");
+    expect(content.className).toContain("h-[90dvh]");
+    expect(content.className).toContain("max-h-[90dvh]");
+    // `vh` on mobile Safari/Chrome is measured against the viewport with the
+    // browser chrome collapsed, so a plain `vh` value overflows past what is
+    // actually visible while the address bar is shown.
+    expect(content.className).not.toMatch(/(?<!d)vh\]/);
   });
 });
 
@@ -106,7 +111,7 @@ describe("DialogContent height/scroll regime (#341)", () => {
     // later variant utility, so `full` still lets its body own the scroll.
     expect(content.className).toContain("overflow-hidden");
     expect(content.className).not.toContain("overflow-y-auto");
-    expect(content.className).toContain("max-h-[90vh]");
+    expect(content.className).toContain("max-h-[90dvh]");
     expect(content.className).not.toContain("max-h-[calc(100dvh-2rem)]");
   });
 });

package/src/components/dialog/dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   useCallback,
@@ -11,6 +13,7 @@ import {
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 import { Heading, Text } from "../typography";
 
 /**
@@ -55,7 +58,11 @@ export const dialogContentVariants = cva(
         sm: "max-w-sm",
         lg: "max-w-lg",
         xl: "max-w-3xl",
-        full: "max-w-[95vw] h-[90vh] max-h-[90vh] overflow-hidden",
+        // `dvh` (dynamic viewport height), not `vh`: on mobile Safari/Chrome
+        // `vh` is measured against the LARGEST viewport (browser chrome
+        // collapsed), so `size="full"` overflows past the visible viewport
+        // while the address bar is showing.
+        full: "max-w-[95vw] h-[90dvh] max-h-[90dvh] overflow-hidden",
       },
     },
     defaultVariants: { size: "lg" },
@@ -76,7 +83,7 @@ export const DialogOverlay = forwardRef<
       ref={ref}
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-foreground/50 backdrop-blur-sm",
+        "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,
       )}
@@ -90,6 +97,7 @@ export const DialogContent = forwardRef<
   ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
     VariantProps<typeof dialogContentVariants>
 >(function DialogContent({ className, children, size, onOpenAutoFocus, ...props }, ref) {
+  const { t } = useLocale();
   const contentRef = useRef<HTMLDivElement | null>(null);
   const setRefs = useCallback(
     (node: HTMLDivElement | null) => {
@@ -149,8 +157,8 @@ export const DialogContent = forwardRef<
         {children}
         <DialogPrimitive.Close
           data-slot="dialog-close"
-          className="absolute end-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label="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")}
         >
           <svg
             width="16"
@@ -213,7 +221,7 @@ export const DialogDescription = forwardRef<
     <DialogPrimitive.Description
       ref={ref}
       data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );
@@ -275,7 +283,7 @@ export const DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(function D
       // focusable content.
       tabIndex={tabIndex ?? 0}
       className={cn(
-        "-m-1 min-h-0 overflow-y-auto overscroll-contain p-1 scroll-p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "-m-1 min-h-0 overflow-y-auto overscroll-contain p-1 scroll-p-1 focus-ring",
         className,
       )}
       {...props}

package/src/components/drawer/drawer.tsx

@@ -25,7 +25,8 @@ const DrawerOverlay = forwardRef<
   return (
     <DrawerPrimitive.Overlay
       ref={ref}
-      className={cn("fixed inset-0 z-50 bg-foreground/50", className)}
+      data-slot="drawer-overlay"
+      className={cn("fixed inset-0 z-50 bg-overlay", className)}
       {...props}
     />
   );
@@ -40,13 +41,14 @@ export const DrawerContent = forwardRef<
       <DrawerOverlay />
       <DrawerPrimitive.Content
         ref={ref}
+        data-slot="drawer-content"
         className={cn(
           "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground",
           className,
         )}
         {...props}
       >
-        <div className="mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" />
+        <div data-slot="drawer-handle" className="mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -54,19 +56,33 @@ export const DrawerContent = forwardRef<
 });
 
 export function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)} {...props} />;
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
+      {...props}
+    />
+  );
 }
 export function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
 }
 export const DrawerTitle = forwardRef<
   ElementRef<typeof DrawerPrimitive.Title>,
   ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(function DrawerTitle({ className, ...props }, ref) {
   return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
     <DrawerPrimitive.Title
       ref={ref}
-      className={cn("text-lg font-semibold", className)}
+      data-slot="drawer-title"
+      className={cn("text-title leading-none", className)}
       {...props}
     />
   );
@@ -78,7 +94,8 @@ export const DrawerDescription = forwardRef<
   return (
     <DrawerPrimitive.Description
       ref={ref}
-      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="drawer-description"
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );

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

@@ -147,7 +147,7 @@ export const SubmenuRadioAndCheckbox: Story = {
 };
 
 /**
- * Three-theme sweep (a durable, `test-storybook`-run artifact rather than a
+ * Cross-theme sweep (a durable, `test-storybook`-run artifact rather than a
  * one-off manual `preview.tsx` toggle). `<ThemeProvider>` (not a plain
  * `data-theme` wrapper `<div>`) because it writes the attribute onto the
  * DOCUMENT ROOT — this menu's Radix `Portal` mounts its content on