@elabs-ai/components-ui 4.2.0 → 5.0.0

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

@@ -23,7 +23,7 @@ export const ContextMenuSubTrigger = forwardRef<
       ref={ref}
       data-slot="context-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,
       )}
@@ -44,7 +44,7 @@ export const ContextMenuSubContent = forwardRef<
       ref={ref}
       data-slot="context-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}
@@ -62,7 +62,7 @@ export const ContextMenuContent = forwardRef<
         ref={ref}
         data-slot="context-menu-content"
         className={cn(
-          "z-50 min-w-[12rem] 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-[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,
         )}
         {...props}
@@ -80,7 +80,7 @@ export const ContextMenuItem = forwardRef<
       ref={ref}
       data-slot="context-menu-item"
       className={cn(
-        "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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4",
+        "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",
         inset && "ps-8",
         className,
       )}
@@ -99,7 +99,7 @@ export const ContextMenuCheckboxItem = forwardRef<
       data-slot="context-menu-checkbox-item"
       checked={checked}
       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 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",
         className,
       )}
       {...props}
@@ -123,7 +123,7 @@ export const ContextMenuRadioItem = forwardRef<
       ref={ref}
       data-slot="context-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 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",
         className,
       )}
       {...props}

package/src/components/context-rail/context-rail.tsx

@@ -155,8 +155,10 @@ const COUNT_BADGE_BASE =
 // (measured before the strip gained its own padding). `CONTEXT_RAIL_HEADER`'s
 // `px-2` now buys that margin back, so this is belt and braces rather than the
 // only guard — keep it: a host restyling the rail through `className` can put
-// the item back on the edge. The vertical `-top-1` overhang is kept: nothing
-// clips it.
+// the item back on the edge. The vertical `-top-1` overhang is kept — but the
+// expanded row switcher is an `overflow-x-auto` scroller, which clips on BOTH
+// axes, so that row carries `py-1` to keep the overhang inside its own box
+// (measured: without it the count was cut in half at the top).
 const COUNT_BADGE_POSITION = "end-0 -top-1 h-4 min-w-4 px-0.5";
 
 // The rail's own header band. Two jobs, and both are geometry the rail cannot
@@ -216,7 +218,7 @@ function ContextRailSwitcher({
         // narrow strip) it is the whole column again, with no cap and no
         // scroller.
         orientation === "row"
-          ? "w-auto max-w-1/2 shrink-0 flex-row overflow-x-auto [&>li]:shrink-0 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:max-w-none group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:overflow-x-visible"
+          ? "w-auto max-w-1/2 shrink-0 flex-row overflow-x-auto py-1 [&>li]:shrink-0 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:max-w-none group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:overflow-x-visible"
           : "flex-col"
       }
     >
@@ -241,6 +243,11 @@ function ContextRailSwitcher({
               aria-current={isActive ? "true" : undefined}
               disabled={section.disabled}
               onClick={() => handleClick(section)}
+              // No leading accent bar: in a nav LIST it marks the row, but on a
+              // 32px icon button in this switcher it read as a stray vertical
+              // line beside the glyph. The accent fill is the active cue here
+              // (a shape, so it survives greyscale), and `aria-current` names it.
+              className="data-[active=true]:before:hidden"
             >
               <span
                 aria-hidden="true"
@@ -658,7 +665,18 @@ export const ContextRail = forwardRef<HTMLDivElement, ContextRailProps>(function
       ) : (
         // `variant` is hardcoded, not a public prop (#382) — see the doc
         // comment on `ContextRailProps` above.
-        <Sidebar side="right" collapsible="icon" variant="sidebar">
+        // No edge line (the variant draws it under the same group selector, so the
+        // override uses that selector too). The rail's `bg-sidebar` chrome fill is
+        // already the boundary against the canvas (`surface-elevation` keeps
+        // the two apart in every theme), and beside an inset content card the
+        // card's own elevation is — so the line only ever drew a stray hairline.
+        <Sidebar
+          side="right"
+          collapsible="icon"
+          variant="sidebar"
+          // eslint-disable-next-line conventions/logical-props -- must cancel Sidebar's own physical `group-data-[side=right]:border-l` under the same selector; a logical override loses the cascade
+          className="group-data-[side=right]:border-l-0"
+        >
           <ContextRailWide
             ref={ref}
             sections={sections}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/cn";

package/src/components/descriptions/descriptions.stories.tsx

@@ -32,6 +32,12 @@ export const Default: Story = {
   render: (args) => <Descriptions {...args}>{items}</Descriptions>,
 };
 
+/** Short labels beside sentence-long values earn a narrower label column. */
+export const NarrowLabels: Story = {
+  args: { columns: 1, layout: "horizontal", labelWidth: "1/5" },
+  render: (args) => <Descriptions {...args}>{items}</Descriptions>,
+};
+
 export const TwoColumns: Story = {
   args: { columns: 2, layout: "horizontal" },
   render: (args) => <Descriptions {...args}>{items}</Descriptions>,

package/src/components/descriptions/descriptions.test.tsx

@@ -39,3 +39,21 @@ describe("Descriptions", () => {
     expect(container.querySelectorAll("dd")).toHaveLength(1);
   });
 });
+
+describe("Descriptions labelWidth", () => {
+  it("defaults the horizontal label column to a third and honours a narrower share", () => {
+    const { rerender } = render(
+      <Descriptions>
+        <DescriptionsItem label="Owner">Sofia</DescriptionsItem>
+      </Descriptions>,
+    );
+    expect(screen.getByText("Owner")).toHaveClass("w-1/3");
+    rerender(
+      <Descriptions labelWidth="1/5">
+        <DescriptionsItem label="Owner">Sofia</DescriptionsItem>
+      </Descriptions>,
+    );
+    expect(screen.getByText("Owner")).toHaveClass("w-1/5");
+    expect(screen.getByText("Owner")).not.toHaveClass("w-1/3");
+  });
+});

package/src/components/descriptions/descriptions.tsx

@@ -18,11 +18,29 @@ const descriptionsVariants = cva("grid gap-x-6 gap-y-3 text-body", {
 
 type DescriptionsLayout = "horizontal" | "vertical";
 
+/**
+ * The label column's share of a `horizontal` item. Static class names, never
+ * a computed `w-[…]`, so Tailwind can see them. `"1/3"` is the default and
+ * the historical render; `"1/4"`/`"1/5"` suit a record whose labels are
+ * short ("What it did", "Owner") and whose values are sentences.
+ */
+export type DescriptionsLabelWidth = "1/3" | "1/4" | "1/5";
+
+const LABEL_WIDTH_CLASS: Record<DescriptionsLabelWidth, string> = {
+  "1/3": "w-1/3",
+  "1/4": "w-1/4",
+  "1/5": "w-1/5",
+};
+
 interface DescriptionsContextValue {
   layout: DescriptionsLayout;
+  labelWidth: DescriptionsLabelWidth;
 }
 
-const DescriptionsContext = createContext<DescriptionsContextValue>({ layout: "horizontal" });
+const DescriptionsContext = createContext<DescriptionsContextValue>({
+  layout: "horizontal",
+  labelWidth: "1/3",
+});
 
 export interface DescriptionsProps
   extends HTMLAttributes<HTMLDListElement>, VariantProps<typeof descriptionsVariants> {
@@ -36,6 +54,11 @@ export interface DescriptionsProps
    * label above the value. Default `horizontal`.
    */
   layout?: DescriptionsLayout;
+  /**
+   * Width of the label column in the `horizontal` layout, as a share of the
+   * item. Default `"1/3"`. Ignored by `vertical`.
+   */
+  labelWidth?: DescriptionsLabelWidth;
 }
 
 /**
@@ -45,11 +68,11 @@ export interface DescriptionsProps
  * `columns` controls the grid; `layout` controls label placement per item.
  */
 export const Descriptions = forwardRef<HTMLDListElement, DescriptionsProps>(function Descriptions(
-  { columns = 1, layout = "horizontal", className, children, ...props },
+  { columns = 1, layout = "horizontal", labelWidth = "1/3", className, children, ...props },
   ref,
 ) {
   return (
-    <DescriptionsContext value={{ layout }}>
+    <DescriptionsContext value={{ layout, labelWidth }}>
       <dl ref={ref} className={cn(descriptionsVariants({ columns }), className)} {...props}>
         {children}
       </dl>
@@ -72,7 +95,7 @@ export interface DescriptionsItemProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const DescriptionsItem = forwardRef<HTMLDivElement, DescriptionsItemProps>(
   function DescriptionsItem({ label, numeric, className, children, ...props }, ref) {
-    const { layout } = use(DescriptionsContext);
+    const { layout, labelWidth } = use(DescriptionsContext);
     return (
       <div
         ref={ref}
@@ -83,7 +106,12 @@ export const DescriptionsItem = forwardRef<HTMLDivElement, DescriptionsItemProps
         )}
         {...props}
       >
-        <dt className={cn("text-muted-foreground", layout === "horizontal" && "w-1/3 shrink-0")}>
+        <dt
+          className={cn(
+            "text-muted-foreground",
+            layout === "horizontal" && cn(LABEL_WIDTH_CLASS[labelWidth], "shrink-0"),
+          )}
+        >
           {label}
         </dt>
         <dd className={cn("min-w-0 break-words text-foreground", numeric && "tabular-nums")}>

package/src/components/descriptions/index.ts

@@ -1,6 +1,7 @@
 export {
   Descriptions,
   DescriptionsItem,
+  type DescriptionsLabelWidth,
   type DescriptionsProps,
   type DescriptionsItemProps,
 } from "./descriptions";

package/src/components/dialog/dialog.stories.tsx

@@ -66,6 +66,7 @@ export const Default: Story = {
  * horizontally. Before the fix the implicit `auto` column blew past `max-w-md`.
  */
 export const OverflowGuard: Story = {
+  name: "Long unbreakable text keeps the dialog width",
   render: () => (
     <Dialog>
       <DialogTrigger asChild>
@@ -392,6 +393,7 @@ export const FocusRingClearance: Story = {
  * `play` so a future regression of THIS story is caught rather than repeated.
  */
 export const FocusRingClearanceDark: Story = {
+  tags: ["!dev"],
   name: "Focus ring clearance — dark",
   globals: { theme: "dark" },
   render: FocusRingClearance.render,
@@ -450,6 +452,7 @@ export const WideWithSections: Story = {
 };
 
 export const WideWithSectionsDark: Story = {
+  tags: ["!dev"],
   name: "Wide with sections — dark",
   decorators: [
     (Story) => (
@@ -463,6 +466,7 @@ export const WideWithSectionsDark: Story = {
 };
 
 export const WideWithSectionsHighDecoration: Story = {
+  tags: ["!dev"],
   name: "Wide with sections — high decoration",
   globals: { decoration: "10" },
   render: () => <WideSettingsDialog prefix="wide-decorated" />,
@@ -685,6 +689,7 @@ function GuardedDialog({ children }: { children?: ReactNode }) {
  * because the component must not own app state (D5).
  */
 export const DirtyGuard: Story = {
+  name: "Unsaved changes confirm before closing",
   render: () => <GuardedDialog />,
   play: async ({ canvas, canvasElement, userEvent }) => {
     const doc = within(canvasElement.ownerDocument.body);

package/src/components/dialog/dialog.tsx

@@ -51,7 +51,7 @@ export const dialogContentVariants = cva(
   //      is INERT for every dialog that has no `DialogBody`.
   // `size="full"`'s own `h-/max-h-/overflow-hidden` still wins — cva emits the
   // base first, so tailwind-merge resolves the later variant utilities over it.
-  "fixed left-1/2 top-1/2 z-50 grid grid-cols-[minmax(0,1fr)] w-full -translate-x-1/2 -translate-y-1/2 gap-4 max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain has-[[data-slot=dialog-body]]:overflow-hidden has-[[data-slot=dialog-body]]:grid-rows-[auto_minmax(0,1fr)_auto] rounded-xl bg-card p-6 text-card-foreground shadow-ring-lg 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",
+  "fixed left-1/2 top-1/2 z-50 grid grid-cols-[minmax(0,1fr)] w-full -translate-x-1/2 -translate-y-1/2 gap-4 max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain has-[[data-slot=dialog-body]]:overflow-hidden has-[[data-slot=dialog-body]]:grid-rows-[auto_minmax(0,1fr)_auto] rounded-xl bg-card p-6 text-card-foreground shadow-dialog 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",
   {
     variants: {
       size: {

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

@@ -156,6 +156,7 @@ export const SubmenuRadioAndCheckbox: Story = {
  * persisting to localStorage across runs.
  */
 export const SubmenuRadioAndCheckboxDark: Story = {
+  tags: ["!dev"],
   name: "Submenu, radio group and checkbox item — dark",
   decorators: [
     (Story) => (
@@ -169,8 +170,44 @@ export const SubmenuRadioAndCheckboxDark: Story = {
 };
 
 export const SubmenuRadioAndCheckboxHighDecoration: Story = {
+  tags: ["!dev"],
   name: "Submenu, radio group and checkbox item — high decoration",
   globals: { decoration: "10" },
   render: SubmenuRadioAndCheckbox.render,
   play: SubmenuRadioAndCheckbox.play,
 };
+
+/**
+ * Locks WCAG 1.4.11 keyboard-focus contrast (#308): a menu item's
+ * `focus:bg-accent` fill alone measures ~1.17–1.40:1 against `--popover` in
+ * both themes — not a visible indicator. Moving focus with the keyboard must
+ * additionally paint a compound ring (`focus-ring-inset`): a real `boxShadow`
+ * layer, or a non-zero, non-`none` `outline`.
+ */
+export const KeyboardFocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: Default.render,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /open menu/i });
+    await userEvent.click(trigger);
+    const body = within(canvasElement.ownerDocument.body);
+    await body.findByRole("menuitem", { name: "Profile" });
+    await userEvent.keyboard("{ArrowDown}");
+    const focused = canvasElement.ownerDocument.activeElement as HTMLElement;
+    await expect(focused).toHaveAttribute("role", "menuitem");
+    const style = getComputedStyle(focused);
+    const hasRing = style.boxShadow !== "none";
+    const hasOutline = style.outlineStyle !== "none" && parseFloat(style.outlineWidth) > 0;
+    await expect(hasRing || hasOutline).toBe(true);
+    // Close before the axe afterEach scan — an open portal otherwise leaves a
+    // stray focusable node behind an `aria-hidden` sibling from an earlier
+    // story's not-yet-cleaned-up DOM (aria-hidden-focus). Waiting for the menu
+    // to actually leave the DOM (not just sending the keystroke) matters: on a
+    // slower close — observed reproducibly under `STORYBOOK_THEME=dark`, never
+    // under light — the axe scan can otherwise run mid-close-transition, while
+    // the still-focusable menuitem sits inside a portal Radix has already
+    // marked `aria-hidden`.
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(body.queryByRole("menu")).not.toBeInTheDocument());
+  },
+};

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-[12rem] 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,
@@ -129,7 +137,7 @@ export const DropdownMenuItem = forwardRef<
       ref={ref}
       className={cn(
         "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: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",

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/hover-card/hover-card.tsx

@@ -16,7 +16,7 @@ export const HoverCardContent = forwardRef<
       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/input/input.stories.tsx

@@ -129,6 +129,21 @@ export const InAmbientTextContainer: Story = {
       );
     };
 
+    /*
+     * `Input` animates its colour, and reduced motion only shortens that to
+     * 0.01ms: until the browser draws its next frame, a read straight after a
+     * flip still returns the previous theme's ink. Measure the resting colour.
+     * A transition that a newer one replaces rejects instead of finishing, so
+     * wait until none is left rather than for the first batch.
+     */
+    const settle = async () => {
+      for (;;) {
+        const running = [reference, nested, muted].flatMap((input) => input.getAnimations());
+        if (running.length === 0) return;
+        await Promise.allSettled(running.map((animation) => animation.finished));
+      }
+    };
+
     const host = themeHost(nested);
     const original = host.getAttribute("data-theme");
     /*
@@ -148,11 +163,13 @@ export const InAmbientTextContainer: Story = {
     try {
       host.setAttribute("data-theme", "light");
       await assertThemeApplied("light");
+      await settle();
       const lightInk = getComputedStyle(nested).color;
       await assertMatchesReference();
 
       host.setAttribute("data-theme", "dark");
       await assertThemeApplied("dark");
+      await settle();
       await assertMatchesReference();
       // The two themes must actually resolve to different ink, or "checked in
       // both themes" is a claim about an attribute nobody read.

package/src/components/input/input.tsx

@@ -14,7 +14,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       className={cn(
         "flex h-control w-full rounded-control border border-input bg-input-background text-foreground px-3 py-1 text-body shadow-input transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
         "placeholder:text-muted-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",
         // One disabled mechanism (opacity fade), matching every `Button`
         // variant — `disabled:bg-muted` used to also fire here, stacking a
         // fill swap on top of the fade (#286); `disabled:border-border` stays,

package/src/components/input-group/input-group.stories.tsx

@@ -150,12 +150,49 @@ export const CompoundFocusIndicator: Story = {
 };
 
 /**
- * `--tw-ring-shadow` is a `0 0 0 calc(<offset> + <width>) <colour>` string; the
- * painted reach is that `calc`. Reading it (rather than `boxShadow`) keeps the
- * measurement independent of whatever elevation rung the element also carries.
+ * The compound ring's outer reach, in pixels.
+ *
+ * Since ADR 0027 Amendment 2 (commit 779c040b), `--tw-ring-shadow` is a
+ * three-segment composite (`@utility focus-ring-static`, themes.css) whose
+ * SPECIFIED value keeps its nested `var(--focus-ring-offset)` /
+ * `var(--focus-ring-width)` references literal when read directly via
+ * `getPropertyValue("--tw-ring-shadow")` — custom-property computed values do
+ * not substitute var()s referencing other custom properties, so the old
+ * `calc(<offset> + <width>)` regex never matches the new shape and always
+ * reported a false `0`. `getComputedStyle().boxShadow`, by contrast, is a
+ * genuine standard property: its computed value fully resolves every
+ * `var()`/`calc()`, elevation rung included. The ring is always the widest
+ * NON-inset layer in that resolved list — the "gap" layer only reaches
+ * `offset`, the elevation rungs (`shadow-input` et al.) carry zero spread,
+ * and only the ring layer reaches `offset + width` (+ any call-site
+ * `ring-offset-*`) — so its spread is the measurement this helper returns.
  */
 function ringSpread(style: CSSStyleDeclaration): number {
-  const shadow = style.getPropertyValue("--tw-ring-shadow");
-  const match = /calc\(\s*([\d.]+)px\s*\+\s*([\d.]+)px\s*\)/.exec(shadow);
-  return match ? parseFloat(match[1]) + parseFloat(match[2]) : 0;
+  const layers = splitShadowLayers(style.boxShadow);
+  const spreads = layers
+    .filter((layer) => !/\binset\b/.test(layer))
+    .map((layer) => {
+      const lengths = [...layer.matchAll(/(-?[\d.]+)px/g)].map((match) => Number(match[1]));
+      return lengths.length ? lengths[lengths.length - 1]! : 0;
+    });
+  return spreads.length ? Math.max(...spreads) : 0;
+}
+
+/** Split a computed `box-shadow` into its comma-separated layers, ignoring commas nested inside a colour function's parens (`color(srgb 0 0 0 / 0.1)`, `oklch(…)`). */
+function splitShadowLayers(shadowValue: string): string[] {
+  const layers: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const char of shadowValue) {
+    if (char === "(") depth += 1;
+    if (char === ")") depth -= 1;
+    if (char === "," && depth === 0) {
+      layers.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) layers.push(current.trim());
+  return layers;
 }

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

@@ -28,8 +28,11 @@ export const inputGroupVariants = cva(
     variants: {
       variant: {
         // The form-field look: the strong `--input` boundary is the field's
-        // sole structural cue, so it stays on the strong rung.
-        outline: "border border-input shadow-input",
+        // sole structural cue, so it stays on the strong rung. Focus lands on
+        // the inner control, not this wrapper, so the border swap reads its
+        // `has-[:focus-visible]` state instead of its own `focus-visible`.
+        outline:
+          "border border-input shadow-input has-[[data-slot=input-group-control]:focus-visible]:border-input-focus",
         // The composer look (#194, research 08 §C.1/§D): a soft fill with the
         // focus-within ring carrying focus — NO hard border. Separation comes
         // from the fill (the chat footer already draws its own `border-t`).