@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/nav-user/nav-user.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+import { ChevronsUpDown, LogOut, Settings } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
 import {
   DropdownMenu,
@@ -11,6 +12,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../dropdown-menu";
+import { useLocale } from "../locale-provider";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../sidebar";
 
 export interface NavUserUser {
@@ -22,24 +24,41 @@ export interface NavUserUser {
 
 export interface NavUserProps {
   user: NavUserUser;
+  /** Fires when "Settings" is chosen. Ignored when `settingsHref` is set. */
+  onSettings?: () => void;
+  /** Route of the settings screen — "Settings" renders as a link to it. */
+  settingsHref?: string;
+  /** Fires when "Sign out" is chosen. */
+  onSignOut?: () => void;
+  /**
+   * Extra `DropdownMenuItem`s, placed above "Settings" (e.g. Profile, Billing).
+   * Settings and Sign out are always present — they are the standard pair.
+   */
+  children?: ReactNode;
 }
 
-/**
- * Sidebar account / user menu. Shared primitive from sidebar-04 (issue #99).
- * Renders a trigger showing name + email + avatar; the dropdown exposes
- * account, billing, notifications and log-out actions.
- *
- * Wire your own action handlers by composing custom `DropdownMenuItem` children
- * if you need more than the default actions — or extend via className.
- */
-export function NavUser({ user }: NavUserProps) {
-  const { isMobile } = useSidebar();
-  const initials = user.name
+function initialsOf(name: string): string {
+  return name
     .split(" ")
-    .map((n) => n[0])
+    .map((part) => part[0])
     .join("")
     .slice(0, 2)
     .toUpperCase();
+}
+
+/**
+ * The standard sidebar footer: the signed-in user (avatar, name, email) as one
+ * row that opens the account menu — Settings, then Sign out. EVERY app shell's
+ * nav rail ends with this; settings never sits in the footer as a loose nav
+ * row, and the footer carries no environment/meta line.
+ *
+ * Collapsed to the 48px icon rail the row is the avatar alone, and its
+ * accessible name is written out because the visible label is gone.
+ */
+export function NavUser({ user, onSettings, settingsHref, onSignOut, children }: NavUserProps) {
+  const { isMobile } = useSidebar();
+  const { t } = useLocale();
+  const initials = initialsOf(user.name);
 
   return (
     <SidebarMenu>
@@ -48,63 +67,59 @@ export function NavUser({ user }: NavUserProps) {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+              tooltip={user.name}
+              // Written out: collapsed, the trigger is only an avatar, so its
+              // contents cannot name it. Same string as the visible label, in
+              // reading order (WCAG 2.5.3).
+              aria-label={`${user.name} ${user.email}`}
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <Avatar className="h-8 w-8 rounded-lg">
-                {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+              <Avatar className="size-8 rounded-lg">
+                {user.avatar && <AvatarImage src={user.avatar} alt="" />}
                 <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
               </Avatar>
-              <div className="grid flex-1 text-start text-sm leading-tight">
+              <div className="grid flex-1 text-start text-body leading-tight group-data-[collapsible=icon]:hidden">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
+                <span className="truncate text-meta text-sidebar-muted-foreground">
+                  {user.email}
+                </span>
               </div>
-              <ChevronsUpDown className="ms-auto size-4" />
+              <ChevronsUpDown
+                aria-hidden="true"
+                className="ms-auto size-4 group-data-[collapsible=icon]:hidden"
+              />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
+            data-slot="nav-user-menu"
             className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
             side={isMobile ? "bottom" : "right"}
             align="end"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
-                <Avatar className="h-8 w-8 rounded-lg">
-                  {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
-                  <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-start text-sm leading-tight">
-                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
-                </div>
-              </div>
+            <DropdownMenuLabel className="text-meta text-muted-foreground">
+              {t("ui.navUser.label")}
             </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <Sparkles />
-                Upgrade to Pro
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
             <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <BadgeCheck />
-                Account
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CreditCard />
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Bell />
-                Notifications
-              </DropdownMenuItem>
+              {children}
+              {settingsHref ? (
+                <DropdownMenuItem asChild>
+                  <a href={settingsHref}>
+                    <Settings aria-hidden="true" />
+                    {t("ui.navUser.settings")}
+                  </a>
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem onSelect={onSettings}>
+                  <Settings aria-hidden="true" />
+                  {t("ui.navUser.settings")}
+                </DropdownMenuItem>
+              )}
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <LogOut />
-              Log out
+            <DropdownMenuItem onSelect={onSignOut}>
+              <LogOut aria-hidden="true" />
+              {t("ui.navUser.signOut")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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

@@ -112,3 +112,45 @@ export const Default: Story = {
     await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false"));
   },
 };
+
+/**
+ * Locks WCAG 1.4.11 (#308): `NavigationMenuTrigger` painted `hover:` and
+ * `focus:` identically, with the fill alone (no ring/outline layer) as the
+ * only signal — not a visible indicator. Keyboard (Tab) focus must now paint
+ * a real compound ring (`focus-ring`: a `boxShadow` layer, or a non-zero,
+ * non-`none` `outline`), and the resting trigger must carry neither layer.
+ *
+ * NOTE: this does not additionally assert "a mouse click shows no ring" —
+ * confirmed BOTH before and after this fix (and independent of story order),
+ * a real click on this trigger still lands the browser in `:focus-visible`
+ * in this environment. `NavigationMenuTrigger` sits in Radix's roving-
+ * tabindex collection, which manages its focus imperatively rather than via
+ * the browser's native click-to-focus default action — the same class of
+ * "script-triggered focus" `CompoundFocusIndicator` (`button.stories.tsx`)
+ * already notes as unreliable against `:focus-visible`. Converting `focus:`
+ * to `focus-visible:` is still the correct, spec-aligned fix (mouse-click
+ * suppression is now possible, keyed on the browser's own determination);
+ * whether Radix's roving-focus internals let the browser actually make that
+ * determination for a plain click is a separate, deeper defect — flagged as
+ * a residual follow-up, not fixed here.
+ */
+export const KeyboardFocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: Default.render,
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /products/i });
+
+    const resting = getComputedStyle(trigger);
+    await expect(resting.boxShadow).toBe("none");
+    await expect(resting.outlineStyle).toBe("none");
+
+    // Tab rather than .focus(): `:focus-visible` is what `focus-ring` keys
+    // on, and a programmatic focus does not reliably match it.
+    await userEvent.tab();
+    await expect(trigger).toHaveFocus();
+    const afterTab = getComputedStyle(trigger);
+    const tabHasRing = afterTab.boxShadow !== "none";
+    const tabHasOutline = afterTab.outlineStyle !== "none" && parseFloat(afterTab.outlineWidth) > 0;
+    await expect(tabHasRing || tabHasOutline).toBe(true);
+  },
+};

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

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   createContext,
   forwardRef,
@@ -150,6 +152,7 @@ export const NavigationMenu = forwardRef<
     <NavigationMenuGuardContext.Provider value={guard}>
       <NavigationMenuPrimitive.Root
         ref={ref}
+        data-slot="navigation-menu"
         value={currentValue}
         onValueChange={handleValueChange}
         className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
@@ -169,6 +172,7 @@ export const NavigationMenuList = forwardRef<
   return (
     <NavigationMenuPrimitive.List
       ref={ref}
+      data-slot="navigation-menu-list"
       className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
       {...props}
     />
@@ -183,13 +187,18 @@ export const NavigationMenuItem = forwardRef<
   const value = valueProp ?? autoValue;
   return (
     <NavigationMenuItemValueContext.Provider value={value}>
-      <NavigationMenuPrimitive.Item ref={ref} value={value} {...props} />
+      <NavigationMenuPrimitive.Item
+        ref={ref}
+        data-slot="navigation-menu-item"
+        value={value}
+        {...props}
+      />
     </NavigationMenuItemValueContext.Provider>
   );
 });
 
 export const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent",
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-body font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent",
 );
 
 export const NavigationMenuTrigger = forwardRef<
@@ -211,6 +220,7 @@ export const NavigationMenuTrigger = forwardRef<
   return (
     <NavigationMenuPrimitive.Trigger
       ref={ref}
+      data-slot="navigation-menu-trigger"
       className={cn(navigationMenuTriggerStyle(), "group", className)}
       onPointerEnter={(event) => {
         onPointerEnter?.(event);
@@ -242,8 +252,9 @@ export const NavigationMenuContent = forwardRef<
   return (
     <NavigationMenuPrimitive.Content
       ref={ref}
+      data-slot="navigation-menu-content"
       className={cn(
-        "left-0 top-0 w-full p-2 md:absolute md:w-auto",
+        "start-0 top-0 w-full p-2 md:absolute md:w-auto",
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
         "data-[motion=from-end]:slide-in-from-right-2 data-[motion=from-start]:slide-in-from-left-2 data-[motion=to-end]:slide-out-to-right-2 data-[motion=to-start]:slide-out-to-left-2",
         "data-[motion^=from-]:[--tw-ease:var(--ease-entrance)]",
@@ -261,9 +272,10 @@ export const NavigationMenuViewport = forwardRef<
   ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(function NavigationMenuViewport({ className, ...props }, ref) {
   return (
-    <div className="absolute left-0 top-full flex justify-center">
+    <div className="absolute start-0 top-full flex justify-center">
       <NavigationMenuPrimitive.Viewport
         ref={ref}
+        data-slot="navigation-menu-viewport"
         className={cn(
           "relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
           "origin-top transition-[width,height] duration-base ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:zoom-in-90 data-[state=closed]:zoom-out-95",

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

@@ -76,13 +76,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: { defaultValue: 5, min: 0, max: 10 },
-  // Clicks the Increase button and confirms the value increments.
+  // Clicks the Increase button and confirms the value increments. The input is a
+  // locale-formatted text spinbutton, so the displayed value is a string and the
+  // numeric value is announced via aria-valuenow.
   play: async ({ canvas, userEvent }) => {
     const input = canvas.getByRole("spinbutton");
-    await expect(input).toHaveValue(5);
+    await expect(input).toHaveValue("5");
+    await expect(input).toHaveAttribute("aria-valuenow", "5");
     const increaseBtn = canvas.getByRole("button", { name: /increase/i });
     await userEvent.click(increaseBtn);
-    await expect(input).toHaveValue(6);
+    await expect(input).toHaveValue("6");
+    await expect(input).toHaveAttribute("aria-valuenow", "6");
   },
 };
 

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

@@ -1,7 +1,9 @@
+import { createRef } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NumberInput } from "./number-input";
+import { LocaleProvider } from "../locale-provider";
 
 describe("NumberInput", () => {
   it("renders a spinbutton input", () => {
@@ -93,4 +95,49 @@ describe("NumberInput", () => {
     await userEvent.keyboard("{ArrowDown}");
     expect(onValueChange).toHaveBeenLastCalledWith(5);
   });
+
+  it("forwards the ref to the underlying <input>, not the wrapper", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<NumberInput aria-label="Qty" defaultValue={5} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current).toBe(screen.getByRole("spinbutton", { name: "Qty" }));
+  });
+
+  it("does not hard-fix a width — the caller's className is not fighting a default", () => {
+    render(<NumberInput aria-label="Qty" defaultValue={5} className="w-24" />);
+    const group = screen.getByRole("group");
+    expect(group.className).not.toMatch(/\bw-36\b/);
+    expect(group.className).toMatch(/\bw-24\b/);
+  });
+
+  it("rounds fp-noisy step increments to the step's precision (0.1 + 0.1 + 0.1)", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInput aria-label="Amount" defaultValue={0} step={0.1} onValueChange={onValueChange} />,
+    );
+    const increaseBtn = screen.getByRole("button", { name: "Increase" });
+    await userEvent.click(increaseBtn);
+    await userEvent.click(increaseBtn);
+    await userEvent.click(increaseBtn);
+    expect(onValueChange).toHaveBeenLastCalledWith(0.3);
+  });
+
+  it("parses a locale-formatted number using the active locale's separators (de-DE: comma decimal)", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <LocaleProvider locale="de-DE">
+        <NumberInput
+          aria-label="Betrag"
+          defaultValue={0}
+          step={0.1}
+          onValueChange={onValueChange}
+        />
+      </LocaleProvider>,
+    );
+    const input = screen.getByRole("spinbutton", { name: "Betrag" });
+    await userEvent.clear(input);
+    await userEvent.type(input, "1.234,5");
+    await userEvent.tab();
+    expect(onValueChange).toHaveBeenLastCalledWith(1234.5);
+  });
 });

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

@@ -1,8 +1,10 @@
+"use client";
+
 // a2ui.exposed: yes
 import { forwardRef, useCallback, useRef, useState, type HTMLAttributes } from "react";
 import { Minus, Plus } from "lucide-react";
-import { cn } from "../../lib/cn";
 import { InputGroup, InputGroupButton, InputGroupInput } from "../input-group";
+import { useLocale } from "../locale-provider";
 
 export interface NumberInputProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -56,11 +58,37 @@ function clampValue(val: number, min?: number, max?: number): number {
   return result;
 }
 
-function formatNum(value: number, formatOptions?: Intl.NumberFormatOptions): string {
-  if (formatOptions) {
-    return new Intl.NumberFormat(undefined, formatOptions).format(value);
-  }
-  return String(value);
+/** Number of decimal places implied by a step (e.g. 0.1 → 1, 1 → 0). */
+function stepDecimals(step: number): number {
+  if (!isFinite(step) || step === 0) return 0;
+  const s = String(step);
+  const i = s.indexOf(".");
+  return i === -1 ? 0 : s.length - i - 1;
+}
+
+/** Round `value` to the decimal precision implied by `step`, avoiding fp noise (0.1+0.2). */
+function roundToStep(value: number, step: number): number {
+  const decimals = stepDecimals(step);
+  if (decimals === 0) return Math.round(value);
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+
+/** The active locale's decimal and group separator characters (e.g. "," / "." in de-DE). */
+function getLocaleSeparators(locale: string): { decimal: string; group: string } {
+  const parts = new Intl.NumberFormat(locale).formatToParts(1234.5);
+  const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+  const group = parts.find((p) => p.type === "group")?.value ?? ",";
+  return { decimal, group };
+}
+
+/** Parse a locale-formatted numeric string (group + decimal separators) into a number. */
+function parseLocaleNumber(raw: string, locale: string): number {
+  const { decimal, group } = getLocaleSeparators(locale);
+  let normalized = raw.trim();
+  if (group) normalized = normalized.split(group).join("");
+  if (decimal !== ".") normalized = normalized.split(decimal).join(".");
+  return Number(normalized);
 }
 
 /**
@@ -69,7 +97,7 @@ function formatNum(value: number, formatOptions?: Intl.NumberFormatOptions): str
  * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
  * Keyboard ↑/↓ = ±step; Shift+↑/↓ = ±step×10. Clamps on blur (not per keystroke).
  */
-export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(
   {
     value: valueProp,
     defaultValue,
@@ -94,14 +122,20 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
   },
   ref,
 ) {
+  const { locale, formatNumber, t } = useLocale();
   const isControlled = valueProp !== undefined;
 
+  const formatValue = useCallback(
+    (n: number) => formatNumber(n, formatOptions),
+    [formatNumber, formatOptions],
+  );
+
   const [internalValue, setInternalValue] = useState<number | null>(
     defaultValue !== undefined ? defaultValue : null,
   );
   const [inputText, setInputText] = useState<string>(() => {
     const initial = isControlled ? valueProp : defaultValue;
-    return initial != null ? formatNum(initial, formatOptions) : "";
+    return initial != null ? formatValue(initial) : "";
   });
   // Track whether the user is actively editing to avoid overwriting their input
   const isEditing = useRef(false);
@@ -120,12 +154,12 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
     (delta: number) => {
       if (disabled || readOnly) return;
       const base = currentValue ?? 0;
-      let next = base + delta;
+      let next = roundToStep(base + delta, step);
       if (clamp) next = clampValue(next, min, max);
-      setInputText(next != null ? formatNum(next, formatOptions) : "");
+      setInputText(formatValue(next));
       commit(next);
     },
-    [disabled, readOnly, currentValue, clamp, min, max, formatOptions, commit],
+    [disabled, readOnly, currentValue, step, clamp, min, max, formatValue, commit],
   );
 
   const handleKeyDown = useCallback(
@@ -152,22 +186,23 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
       commit(null);
       return;
     }
-    const parsed = parseFloat(raw);
+    const parsed = parseLocaleNumber(raw, locale);
     if (isNaN(parsed)) {
       // Revert to last known good value
-      setInputText(currentValue != null ? formatNum(currentValue, formatOptions) : "");
+      setInputText(currentValue != null ? formatValue(currentValue) : "");
       return;
     }
-    const clamped = clamp ? clampValue(parsed, min, max) : parsed;
-    setInputText(formatNum(clamped, formatOptions));
+    const rounded = roundToStep(parsed, step);
+    const clamped = clamp ? clampValue(rounded, min, max) : rounded;
+    setInputText(formatValue(clamped));
     commit(clamped);
-  }, [inputText, currentValue, clamp, min, max, formatOptions, commit]);
+  }, [inputText, currentValue, clamp, min, max, step, locale, formatValue, commit]);
 
   // Keep display text in sync with controlled value changes (only when not editing)
   const prevControlledValue = useRef(valueProp);
   if (isControlled && valueProp !== prevControlledValue.current && !isEditing.current) {
     prevControlledValue.current = valueProp;
-    const nextText = valueProp != null ? formatNum(valueProp, formatOptions) : "";
+    const nextText = valueProp != null ? formatValue(valueProp) : "";
     if (nextText !== inputText) setInputText(nextText);
   }
 
@@ -177,18 +212,24 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
     disabled || readOnly || (max !== undefined && (currentValue ?? 0) >= max);
 
   return (
-    <InputGroup ref={ref} className={cn("w-36", className)} {...props}>
+    <InputGroup className={className} {...props}>
       <InputGroupButton
-        aria-label="Decrease"
+        aria-label={t("ui.numberInput.decrease")}
         tabIndex={-1}
         disabled={decrementDisabled}
         onClick={() => applyStep(-step)}
-        className="rounded-r-none"
+        className="rounded-e-none"
       >
         <Minus aria-hidden="true" />
       </InputGroupButton>
       <InputGroupInput
-        type="number"
+        ref={ref}
+        type="text"
+        inputMode="decimal"
+        role="spinbutton"
+        aria-valuenow={currentValue ?? undefined}
+        aria-valuemin={min}
+        aria-valuemax={max}
         id={id}
         name={name}
         value={inputText}
@@ -200,17 +241,17 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
         aria-describedby={ariaDescribedby}
         aria-invalid={ariaInvalid}
         aria-required={ariaRequired}
-        className="text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="text-center"
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
       />
       <InputGroupButton
-        aria-label="Increase"
+        aria-label={t("ui.numberInput.increase")}
         tabIndex={-1}
         disabled={incrementDisabled}
         onClick={() => applyStep(step)}
-        className="rounded-l-none"
+        className="rounded-s-none"
       >
         <Plus aria-hidden="true" />
       </InputGroupButton>

package/src/components/page-shell/page-shell.stories.tsx

@@ -26,7 +26,7 @@ export const Default: Story = {
 /**
  * `headerVariant="toolbar"` places a real `<ViewToolbar>` in `PageShell`'s
  * header slot and pins it in POSITION (never a fixed height — see
- * `Docs/View Toolbar Contract` R7) while the body scrolls beneath it. The
+ * `Layout/ViewToolbar → Contract` R7) while the body scrolls beneath it. The
  * outer `h-[420px] overflow-y-auto` div stands in for the `SidebarInset`
  * scroll region `PageShell` is normally embedded in — `PageShell` itself
  * never owns a scroll container (#367).

package/src/components/page-shell/page-shell.tsx

@@ -10,12 +10,12 @@ export interface PageShellProps extends ComponentProps<"div"> {
    * Byte-identical to today.
    *
    * "toolbar" — for a `<ViewToolbar>` header (`@elabs-ai/components-ui`,
-   * `Docs/View Toolbar Contract`): wraps `header` in a `sticky top-0` container
+   * `Layout/ViewToolbar → Contract`): wraps `header` in a `sticky top-0` container
    * with an opaque/blurred fill and a bottom hairline, so it stays pinned while
    * the body scrolls beneath it. PLACES whatever node `header` is — it does not
    * reimplement ViewToolbar's own info/left-cluster/actions grammar, and it does
    * NOT cap the row's height (a `<ViewToolbar>` wraps at narrow widths; see
-   * `Docs/View Toolbar Contract` R7).
+   * `Layout/ViewToolbar → Contract` R7).
    */
   headerVariant?: "default" | "toolbar";
   /** Constrain content width. Defaults to "xl". */
@@ -92,6 +92,7 @@ export const PageShell = forwardRef<HTMLDivElement, PageShellProps>(function Pag
 
   const headerNode = header ? (
     headerVariant === "toolbar" ? (
+      // header-band-exempt: a page-section toolbar under the top bar, not beside it
       <div
         data-slot="page-shell-toolbar-header"
         className="sticky top-0 z-10 border-b border-border bg-background/95 py-3 backdrop-blur"

package/src/components/pagination/pagination.test.tsx

@@ -1,7 +1,26 @@
+import { createRef } from "react";
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { LocaleProvider } from "../locale-provider";
-import { PaginationEllipsis, PaginationNext, PaginationPrevious } from "./pagination";
+import {
+  PaginationEllipsis,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+describe("PaginationLink — forwardRef", () => {
+  it("forwards its ref to the rendered <a>", () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <PaginationLink ref={ref} href="#2">
+        2
+      </PaginationLink>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    expect(ref.current).toBe(screen.getByText("2"));
+  });
+});
 
 /**
  * Pagination had no test file before #18 — its three microcopy sites