@elabs-ai/components-ui 4.2.0 → 5.1.0

package/src/components/badge/badge.tsx

@@ -2,35 +2,115 @@ import { forwardRef, type HTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
+/**
+ * The four opt-in treatments a colour-bearing badge can take, gated purely by
+ * CSS (`themes.css`'s `badge-tint`/`badge-solid`/`badge-outline`/
+ * `badge-neutral` custom variants): each fires when the element carries the
+ * matching `data-appearance` attribute (the explicit `appearance` prop), OR
+ * carries none and an ancestor's `--badge-appearance` token resolves to that
+ * value (a container style query — set the token on a THEME/region, never on
+ * the badge itself). With no explicit prop and the default token (`auto`),
+ * none of the four match, so the unprefixed recipe below (today's exact
+ * look) renders unchanged.
+ *
+ * `tint`/`outline`/`neutral` read `--badge-ink` (a `-text` token — coloured
+ * TEXT on an ordinary surface, ≥4.5:1); `solid` reads `--badge-on` (a
+ * `-foreground` token — ink for a SOLID plate ONLY, never a wash), per the
+ * status-rung convention. Each colour-bearing variant below sets
+ * `--badge-fill`/`--badge-ink`/`--badge-on` from its own tokens; a variant
+ * that never sets them (`secondary`, already a neutral pill; `outline`,
+ * already an outline with no colour role) does not receive these classes —
+ * `appearance` has no additional effect there.
+ *
+ * Literal strings, not built via interpolation — Tailwind scans source
+ * statically, so a template-literal class would emit no CSS (see
+ * `status-badge.tsx`'s `STATUS_ROLE` docblock for the same rule).
+ */
+const BADGE_APPEARANCE_TINT =
+  "badge-tint:bg-(--badge-fill)/10 badge-tint:border-(--badge-fill)/40 badge-tint:text-(--badge-ink)";
+const BADGE_APPEARANCE_SOLID =
+  "badge-solid:bg-(--badge-fill) badge-solid:border-transparent badge-solid:text-(--badge-on)";
+const BADGE_APPEARANCE_OUTLINE =
+  "badge-outline:bg-transparent badge-outline:border-(--badge-fill) badge-outline:text-(--badge-ink)";
+const BADGE_APPEARANCE_NEUTRAL =
+  "badge-neutral:bg-muted badge-neutral:border-transparent badge-neutral:text-foreground";
+
+/** tint + solid + outline + neutral — every colour-bearing Badge variant. */
+export const BADGE_APPEARANCE_RECIPES = `${BADGE_APPEARANCE_TINT} ${BADGE_APPEARANCE_SOLID} ${BADGE_APPEARANCE_OUTLINE} ${BADGE_APPEARANCE_NEUTRAL}`;
+
+/**
+ * tint + outline + neutral only — never `solid`. Reused by `StatusBadge`'s
+ * out-of-vocabulary `tone` hatch, which must stay CALM-ONLY (its own
+ * integrity constraint, see `status-badge.tsx`): the loud solid fill must
+ * never reach a custom tone, even via a theme's global `--badge-appearance`
+ * override.
+ */
+export const BADGE_APPEARANCE_RECIPES_CALM = `${BADGE_APPEARANCE_TINT} ${BADGE_APPEARANCE_OUTLINE} ${BADGE_APPEARANCE_NEUTRAL}`;
+
 export const badgeVariants = cva(
-  "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-meta font-medium transition-colors focus-ring focus-visible:ring-offset-2",
+  "inline-flex items-center gap-1 rounded-badge border px-2.5 py-0.5 text-meta font-medium transition-colors focus-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
+        default: cn(
+          "border-transparent bg-primary text-primary-foreground",
+          "[--badge-fill:var(--primary)] [--badge-ink:var(--primary-text)] [--badge-on:var(--primary-foreground)]",
+          BADGE_APPEARANCE_RECIPES,
+        ),
+        // Already a neutral pill — `appearance` has no additional effect.
         secondary: "border-transparent bg-secondary text-secondary-foreground",
+        // Already an outline with no colour role — `appearance` has no additional effect.
         outline: "text-foreground",
-        success: "border-transparent bg-success text-success-foreground",
-        warning: "border-transparent bg-warning text-warning-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground",
-        info: "border-transparent bg-info text-info-foreground",
+        success: cn(
+          "border-transparent bg-success text-success-foreground",
+          "[--badge-fill:var(--success)] [--badge-ink:var(--success-text)] [--badge-on:var(--success-foreground)]",
+          BADGE_APPEARANCE_RECIPES,
+        ),
+        warning: cn(
+          "border-transparent bg-warning text-warning-foreground",
+          "[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)] [--badge-on:var(--warning-foreground)]",
+          BADGE_APPEARANCE_RECIPES,
+        ),
+        destructive: cn(
+          "border-transparent bg-destructive text-destructive-foreground",
+          "[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)] [--badge-on:var(--destructive-foreground)]",
+          BADGE_APPEARANCE_RECIPES,
+        ),
+        info: cn(
+          "border-transparent bg-info text-info-foreground",
+          "[--badge-fill:var(--info)] [--badge-ink:var(--info-text)] [--badge-on:var(--info-foreground)]",
+          BADGE_APPEARANCE_RECIPES,
+        ),
       },
     },
     defaultVariants: { variant: "default" },
   },
 );
 
+export type BadgeAppearance = "tint" | "solid" | "outline" | "neutral";
+
 export interface BadgeProps
-  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+  /**
+   * Explicit per-instance override of the fill/border/ink treatment. Unset
+   * (default) renders NO `data-appearance` attribute, so the badge is driven
+   * purely by the ancestor `--badge-appearance` token (`auto` = each
+   * variant's own recipe, today's look). Meaningful only on the
+   * colour-bearing variants (`default`, `success`, `warning`, `destructive`,
+   * `info`) — see `badgeVariants`.
+   */
+  appearance?: BadgeAppearance;
+}
 
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
-  { className, variant, ...props },
+  { className, variant, appearance, ...props },
   ref,
 ) {
   return (
     <span
       ref={ref}
       data-slot="badge"
+      data-appearance={appearance}
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -57,7 +57,7 @@ export const Default: Story = {
  * mirroring `Button`'s `CompoundFocusIndicator` lock.
  */
 export const FocusIndicator: Story = {
-  name: "Focus indicator (#310)",
+  name: "Keyboard focus",
   render: () => (
     <Breadcrumb>
       <BreadcrumbList>

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, type ComponentProps, type ReactNode } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";

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

@@ -42,6 +42,10 @@ export const Ghost: Story = { args: { variant: "ghost" } };
 // `rgba(0, 0, 0, 0)` and fail — where a plain `toBeVisible()` would still pass
 // on the unstyled element.
 export const CssCheck: Story = {
+  // A harness, not a demo: it renders the default Button and asserts the token
+  // stylesheet resolved. `!dev` keeps it in the test run and out of the sidebar.
+  name: "Theme tokens applied",
+  tags: ["!dev"],
   play: async ({ canvas }) => {
     const btn = canvas.getByRole("button", { name: "Button" });
 
@@ -99,7 +103,7 @@ export const AllVariants: Story = {
  * one story covers `light`, `dark` and any consumer theme a fork adds.
  */
 export const CompoundFocusIndicator: Story = {
-  name: "Compound focus indicator (WCAG 1.4.11)",
+  name: "Keyboard focus (WCAG 1.4.11)",
   play: async ({ canvas, userEvent }) => {
     const btn = canvas.getByRole("button", { name: "Button" });
 

package/src/components/button/button.tsx

@@ -16,19 +16,30 @@ export const buttonVariants = cva(
         // what made Input's disabled state internally inconsistent (#286).
         default:
           "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        // `inset-ring`, not `border`: a real border would widen the plate by 2px.
+        // `--secondary-border` defaults to transparent (today's borderless plate);
+        // a theme can give the neutral button an edge without switching variants.
+        secondary:
+          "inset-ring inset-ring-secondary-border bg-secondary text-secondary-text hover:bg-secondary/80",
         destructive:
           "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",
+        // `text-foreground` is load-bearing, not decoration: an outline button
+        // paints its OWN `bg-background` plate, so inheriting the surrounding
+        // ink turns it invisible on a coloured band (a `bg-primary` CTA handed
+        // it `--primary-foreground`, 1.06:1 against its own plate). A caller's
+        // own `text-*` still wins through `cn()`.
+        outline:
+          "border border-button-outline-border bg-background text-foreground 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`.
-        // Since the ADR 0010 Amendment (2026-06-20) returned `--input` to the subtle
-        // rung, these two are now VISUALLY IDENTICAL by default — both variant names
-        // are kept as a SEMANTIC SEAM (a future brand could re-separate `--input` from
-        // `--border`) and to avoid churning `outline-subtle` callers (e.g.
+        // `--button-outline-border` (default `var(--input)`, split from the
+        // form-field token), `outline-subtle` uses `border-border`. Since the ADR
+        // 0010 Amendment (2026-06-20) returned `--input` to the subtle rung, these
+        // two are now VISUALLY IDENTICAL by default — both variant names are kept
+        // as a SEMANTIC SEAM (a theme can now give buttons and text fields
+        // different edges) and to avoid churning `outline-subtle` callers (e.g.
         // change-review.tsx). `outline` stays for genuinely form-adjacent controls.
         "outline-subtle":
-          "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         // #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.

package/src/components/calendar/calendar.tsx

@@ -51,8 +51,13 @@ export function Calendar({
         range_start: "day-range-start rounded-s-md",
         range_end: "day-range-end rounded-e-md",
         range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        // `focus:bg-primary focus:text-primary-foreground` was dead CSS: this
+        // class targets react-day-picker v9's `<td role="gridcell">` slot,
+        // which is never focusable — the actual focusable `DayButton`
+        // already inherits `focus-visible:ring-2 focus-visible:ring-ring`
+        // from `buttonVariants({ variant: "ghost" })` (#308).
         selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
         today: "bg-accent text-accent-foreground",
         outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
         disabled: "text-muted-foreground opacity-50",

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

@@ -1,12 +1,26 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent } from "storybook/test";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+} from "./card";
 
 const meta = {
   title: "Core/Card",
   component: Card,
   tags: ["autodocs"],
   argTypes: {
+    stacked: {
+      description:
+        "Opt-in hairline gesture: two sheet edges stacked behind the card's top edge. Plain cards only.",
+      control: "boolean",
+      table: { category: "Appearance" },
+    },
     interactive: {
       description:
         "Opt-in hover-lift for clickable cards (motion-tokened, respects reduced-motion).",
@@ -68,6 +82,64 @@ export const Default: Story = {
   ),
 };
 
+/**
+ * `CardMedia` — the media WELL. A faded hairline hatch sits behind whatever the
+ * card shows (`ground="dots"` for a dot field, `"none"` for a bare well; `fade`
+ * picks the direction it dissolves in). The texture is an inert layer: the media
+ * on top of it is never tinted or masked.
+ */
+export const Media: Story = {
+  render: () => (
+    <div className="grid max-w-3xl gap-4 sm:grid-cols-2">
+      <Card>
+        <CardMedia>
+          <div className="rounded-md border border-card-border bg-card px-4 py-3 text-body shadow-card">
+            <span className="font-medium">24,512</span>{" "}
+            <span className="text-muted-foreground">active users</span>
+          </div>
+        </CardMedia>
+        <CardHeader>
+          <CardTitle>Hatch (default)</CardTitle>
+          <CardDescription>Fades out toward every edge.</CardDescription>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardMedia ground="dots" fade="top">
+          <div className="rounded-md border border-card-border bg-card px-4 py-3 text-body shadow-card">
+            <span className="font-medium">+12.4%</span>{" "}
+            <span className="text-muted-foreground">vs last month</span>
+          </div>
+        </CardMedia>
+        <CardHeader>
+          <CardTitle>Dots, fading up</CardTitle>
+          <CardDescription>The ink settles at the foot of the well.</CardDescription>
+        </CardHeader>
+      </Card>
+    </div>
+  ),
+};
+
+/**
+ * `stacked` — the edges of two sheets rise behind the card's top edge (the
+ * `hairline-stack` utility). It draws OUTSIDE the card: leave ~12px above it and
+ * keep it a plain card (a `detail` card clips its overflow).
+ */
+export const Stacked: Story = {
+  render: () => (
+    <div className="pt-4">
+      <Card stacked className="max-w-sm">
+        <CardHeader>
+          <CardTitle>Spending limit</CardTitle>
+          <CardDescription>One of several budgets in this workspace</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="text-display font-semibold">40% used</div>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+};
+
 /** Opt-in hover-lift for clickable cards (gated by the motion system). */
 export const Interactive: Story = {
   // The suite runs under `prefers-reduced-motion: reduce`

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

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { Card, CardDescription, CardTitle } from "./card";
+import { Card, CardDescription, CardMedia, CardTitle } from "./card";
 
 describe("Card", () => {
   it("renders a nested title", () => {
@@ -23,7 +23,7 @@ describe("Card", () => {
     render(<CardTitle as="h2">Section title</CardTitle>);
     const heading = screen.getByRole("heading", { level: 2, name: "Section title" });
     expect(heading.tagName).toBe("H2");
-    expect(heading).toHaveClass("text-title", "leading-none");
+    expect(heading).toHaveClass("text-title", "leading-(--card-title-leading)");
   });
 
   // --- CardDescription `text-muted-foreground` drop (#336) ---
@@ -172,4 +172,31 @@ describe("Card", () => {
     );
     expect(screen.getByTestId("card").style.getPropertyValue("--card-detail-size")).toBe("20rem");
   });
+
+  // --- hairline seams: `stacked` + `CardMedia` ---
+  it("is not stacked by default; `stacked` adds the hairline-stack gesture", () => {
+    const { rerender } = render(<Card data-testid="c" />);
+    expect(screen.getByTestId("c")).not.toHaveClass("hairline-stack");
+    rerender(<Card data-testid="c" stacked />);
+    expect(screen.getByTestId("c")).toHaveClass("hairline-stack");
+    expect(screen.getByTestId("c")).not.toHaveAttribute("stacked");
+  });
+
+  it("CardMedia is a faded hairline-hatch well by default", () => {
+    render(<CardMedia data-testid="m">art</CardMedia>);
+    const well = screen.getByTestId("m");
+    expect(well).toHaveAttribute("data-slot", "card-media");
+    expect(well).toHaveClass("bg-hairline-hatch", "[--paper-fade:var(--deco-fade-edges)]");
+  });
+
+  it("CardMedia takes another ground, a fade direction, or no ground at all", () => {
+    const { rerender } = render(<CardMedia data-testid="m" ground="dots" fade="top" />);
+    expect(screen.getByTestId("m")).toHaveClass(
+      "bg-dot-grid",
+      "[--paper-fade:var(--deco-fade-top)]",
+    );
+    rerender(<CardMedia data-testid="m" ground="none" />);
+    expect(screen.getByTestId("m")).not.toHaveClass("bg-hairline-hatch");
+    expect(screen.getByTestId("m")).not.toHaveClass("bg-dot-grid");
+  });
 });

package/src/components/card/card.tsx

@@ -18,18 +18,21 @@ import { cn } from "../../lib/cn";
 // this one rung so the SAME logical block shows ONE radius across editor↔preview
 // (was rounded-xl = 8px, whose meaning silently changed with the --radius-xl override
 // — see #19). Overlays (Dialog/AlertDialog) deliberately use a larger rung.
-export const cardVariants = cva("rounded-lg border bg-card text-card-foreground shadow-sm", {
-  variants: {
-    // Opt-in hover-lift for clickable cards. Gated by --motion-factor via the
-    // 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-ring motion-reduce:hover:translate-y-0",
-      false: "",
+export const cardVariants = cva(
+  "rounded-lg border border-card-border bg-card text-card-foreground shadow-card",
+  {
+    variants: {
+      // Opt-in hover-lift for clickable cards. Gated by --motion-factor via the
+      // 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-ring motion-reduce:hover:translate-y-0",
+        false: "",
+      },
     },
+    defaultVariants: { interactive: false },
   },
-  defaultVariants: { interactive: false },
-});
+);
 
 // Grid container for the OPTIONAL detail panel — applied only when `detail` is set.
 // `fixed` keeps the panel track at its full size; `hover` collapses it to 0 at rest and
@@ -89,6 +92,13 @@ export interface CardProps
   detailSize?: string;
   /** Accessible label for the detail region. @default "Details" */
   detailLabel?: string;
+  /**
+   * Opt-in hairline gesture: the edges of two sheets stacked behind the card's
+   * top edge (the `hairline-stack` utility). It draws OUTSIDE the card, so it
+   * needs ~12px of room above and a card that does not clip — a plain card, not
+   * a `detail` one (whose grid is `overflow-hidden`). @default false
+   */
+  stacked?: boolean;
 }
 
 /**
@@ -186,6 +196,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   {
     className,
     interactive,
+    stacked,
     detail,
     detailPlacement = "side",
     detailReveal = "fixed",
@@ -203,7 +214,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
       <div
         ref={ref}
         data-slot="card"
-        className={cn(cardVariants({ interactive }), className)}
+        className={cn(cardVariants({ interactive }), stacked && "hairline-stack", className)}
         style={style}
         {...props}
       >
@@ -273,7 +284,14 @@ export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
       <div
         ref={ref}
         data-slot="card-header"
-        className={cn("flex flex-col gap-1.5 p-6", className)}
+        // With a `CardAction` inside, the header becomes the two-column grid the
+        // action's `col-start-2 row-span-2` placement assumes (title + description
+        // stack on the left, the action top-right); without one, nothing changes.
+        className={cn(
+          "flex flex-col gap-1.5 p-6",
+          "has-data-[slot=card-action]:grid has-data-[slot=card-action]:auto-rows-min has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:items-start",
+          className,
+        )}
         {...props}
       />
     );
@@ -303,7 +321,7 @@ export const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(function Car
     <Tag
       ref={ref}
       data-slot="card-title"
-      className={cn("text-title leading-none", className)}
+      className={cn("text-title leading-(--card-title-leading)", className)}
       {...props}
     />
   );
@@ -351,6 +369,52 @@ export const CardAction = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
   },
 );
 
+const cardMediaVariants = cva("flex min-h-40 items-center justify-center p-6", {
+  variants: {
+    ground: {
+      hatch: "bg-hairline-hatch",
+      dots: "bg-dot-grid",
+      none: "",
+    },
+    // The ground is never flat: it fades across the well. Literal classes (not
+    // an interpolated one) so Tailwind can see them.
+    fade: {
+      edges: "[--paper-fade:var(--deco-fade-edges)]",
+      top: "[--paper-fade:var(--deco-fade-top)]",
+      bottom: "[--paper-fade:var(--deco-fade-bottom)]",
+      center: "[--paper-fade:var(--deco-fade-center)]",
+    },
+  },
+  defaultVariants: { ground: "hatch", fade: "edges" },
+});
+
+export interface CardMediaProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardMediaVariants> {}
+
+/**
+ * The card's media WELL — the recessed region that holds an illustration, a
+ * mini chart, a product fragment or a logo grid. Its ground is a faded hairline
+ * hatch by default (`ground="dots"` for a dot field, `"none"` for a bare well),
+ * painted on an inert layer behind the media, so whatever you put in it sits ON
+ * the texture and is never tinted or masked by it.
+ *
+ * Place it above `CardHeader` (media first) or below `CardContent`. It centres
+ * its children; pass `className` to change that.
+ */
+export const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(function CardMedia(
+  { className, ground, fade, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="card-media"
+      className={cn(cardMediaVariants({ ground, fade }), className)}
+      {...props}
+    />
+  );
+});
+
 export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   function CardContent({ className, ...props }, ref) {
     return (

package/src/components/card/index.ts

@@ -8,6 +8,8 @@ export {
   CardDescription,
   type CardDescriptionProps,
   CardAction,
+  CardMedia,
+  type CardMediaProps,
   CardContent,
   CardFooter,
 } from "./card";

package/src/components/change-review/change-review.tsx

@@ -295,7 +295,7 @@ export const ChangeReviewHeader = forwardRef<HTMLDivElement, ChangeReviewHeaderP
         {...props}
       >
         <div className="flex items-center gap-2 min-w-0">
-          <span id={headingId} className="text-subtitle font-semibold text-foreground truncate">
+          <span id={headingId} className="text-subtitle text-foreground truncate">
             {t("ui.changeReview.heading")}
           </span>
           <Badge variant={allApproved ? "success" : approvedCount > 0 ? "info" : "secondary"}>

package/src/components/collapsible-panel/index.ts

@@ -1,6 +1,7 @@
 export {
   useCollapsiblePanel,
   type CollapsiblePanelAttrs,
+  type CollapsiblePanelContainerPosition,
   type CollapsiblePanelSide,
   type CollapsiblePanelState,
   type UseCollapsiblePanelOptions,

package/src/components/collapsible-panel/use-collapsible-panel.ts

@@ -31,6 +31,17 @@ import { cn } from "../../lib/cn";
 
 export type CollapsiblePanelSide = "left" | "right";
 export type CollapsiblePanelState = "expanded" | "collapsed";
+/**
+ * Where the CONTAINER fragment positions itself. `"viewport"` (default) pins
+ * to the viewport edge (`fixed`) — Sidebar's original mechanism, byte-
+ * identical to pre-#432 output. `"inset"` pins to the panel's OWN nearest
+ * `relative` ancestor instead (`absolute`) — for a panel nested inside
+ * another `fixed`-to-viewport element (e.g. a `SideDock` inside a Sidebar's
+ * `SidebarInset`), so the two never race for the same viewport edge (#432).
+ * The consumer must give that ancestor `relative` itself; `SideDock` does
+ * this via its own `containerPosition` prop.
+ */
+export type CollapsiblePanelContainerPosition = "viewport" | "inset";
 
 /**
  * State-keyed defaults for a generic panel: the consumer wraps the panel in a
@@ -67,6 +78,11 @@ export interface UseCollapsiblePanelOptions {
    * (e.g. `left: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"`).
    */
   containerSlideClassNames?: Record<CollapsiblePanelSide, string>;
+  /**
+   * `"viewport"` (default, byte-identical to pre-#432) or `"inset"` — see
+   * `CollapsiblePanelContainerPosition`.
+   */
+  containerPosition?: CollapsiblePanelContainerPosition;
 }
 
 /** Data attributes for the panel's `group` element. */
@@ -100,6 +116,7 @@ export function useCollapsiblePanel({
   widthClassName = DEFAULT_WIDTH_CLASSNAME,
   spacerCollapsedClassName = DEFAULT_SPACER_COLLAPSED_CLASSNAME,
   containerSlideClassNames = DEFAULT_CONTAINER_SLIDE_CLASSNAMES,
+  containerPosition = "viewport",
 }: UseCollapsiblePanelOptions = {}): UseCollapsiblePanelReturn {
   // Controlled/uncontrolled per component-api.md: controlled iff the `open`
   // prop is provided; the mode never flips mid-life.
@@ -136,12 +153,14 @@ export function useCollapsiblePanel({
   const containerClassName = useMemo(
     () =>
       cn(
-        "fixed inset-y-0 z-10 hidden h-svh",
+        containerPosition === "inset"
+          ? "absolute inset-y-0 z-10 hidden h-full"
+          : "fixed inset-y-0 z-10 hidden h-svh",
         widthClassName,
         "transition-[left,right,width] duration-base ease-linear md:flex",
         containerSlideClassNames[side],
       ),
-    [containerSlideClassNames, side, widthClassName],
+    [containerPosition, containerSlideClassNames, side, widthClassName],
   );
 
   const attrs = useMemo<CollapsiblePanelAttrs>(

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

@@ -271,7 +271,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
               "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-body shadow-sm",
               "transition-[color,box-shadow] duration-fast",
               "hover:bg-accent hover:text-accent-foreground",
-              "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+              "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -323,7 +323,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
                   }}
                   className={cn(
                     "h-8 w-28 rounded-md border border-input bg-background px-2 text-body",
-                    "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                    "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
                     "placeholder:text-muted-foreground",
                   )}
                 />
@@ -333,7 +333,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
                   className={cn(
                     "h-8 rounded-md border border-input bg-background px-2 text-body",
                     "hover:bg-accent hover:text-accent-foreground",
-                    "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                    "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
                   )}
                 >
                   Apply