@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/menubar/menubar.tsx

@@ -25,6 +25,7 @@ export const Menubar = forwardRef<
   return (
     <MenubarPrimitive.Root
       ref={ref}
+      data-slot="menubar"
       className={cn("flex h-9 items-center gap-1 rounded-md bg-card p-1 shadow-ring-sm", className)}
       {...props}
     />
@@ -38,8 +39,9 @@ export const MenubarTrigger = forwardRef<
   return (
     <MenubarPrimitive.Trigger
       ref={ref}
+      data-slot="menubar-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-body font-medium outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
         className,
       )}
       {...props}
@@ -58,6 +60,7 @@ export const MenubarContent = forwardRef<
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
         ref={ref}
+        data-slot="menubar-content"
         align={align}
         alignOffset={alignOffset}
         sideOffset={sideOffset}
@@ -80,8 +83,9 @@ export const MenubarItem = forwardRef<
   return (
     <MenubarPrimitive.Item
       ref={ref}
+      data-slot="menubar-item"
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "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",
         inset && "ps-8",
         className,
       )}
@@ -97,8 +101,9 @@ export const MenubarSubTrigger = forwardRef<
   return (
     <MenubarPrimitive.SubTrigger
       ref={ref}
+      data-slot="menubar-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm 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 data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -117,6 +122,7 @@ export const MenubarSubContent = forwardRef<
   return (
     <MenubarPrimitive.SubContent
       ref={ref}
+      data-slot="menubar-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",
@@ -135,9 +141,10 @@ export const MenubarCheckboxItem = forwardRef<
   return (
     <MenubarPrimitive.CheckboxItem
       ref={ref}
+      data-slot="menubar-checkbox-item"
       checked={checked}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm 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",
         className,
       )}
       {...props}
@@ -159,8 +166,9 @@ export const MenubarRadioItem = forwardRef<
   return (
     <MenubarPrimitive.RadioItem
       ref={ref}
+      data-slot="menubar-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm 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",
         className,
       )}
       {...props}
@@ -182,6 +190,7 @@ export const MenubarSeparator = forwardRef<
   return (
     <MenubarPrimitive.Separator
       ref={ref}
+      data-slot="menubar-separator"
       className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
@@ -191,7 +200,8 @@ export const MenubarSeparator = forwardRef<
 export function MenubarShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      data-slot="menubar-shortcut"
+      className={cn("ms-auto text-meta tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

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

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * Shared collapsible sidebar navigation primitive (issue #99).
  * Promoted from `registry/blocks/sidebar-02/nav-main.tsx`.
@@ -90,7 +92,7 @@ export function NavMain({ routes, className }: NavMainProps) {
                   >
                     {route.icon}
                     {!isCollapsed && (
-                      <span className="ms-2 flex-1 text-sm font-medium">{route.title}</span>
+                      <span className="ms-2 flex-1 text-body font-medium">{route.title}</span>
                     )}
                     {!isCollapsed && (
                       <span className="ms-auto">
@@ -114,7 +116,7 @@ export function NavMain({ routes, className }: NavMainProps) {
                           <SidebarMenuSubButton asChild>
                             <a
                               href={subRoute.link}
-                              className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium text-sidebar-muted-foreground"
+                              className="flex items-center rounded-md px-4 py-1.5 text-body font-medium text-sidebar-muted-foreground"
                             >
                               {subRoute.title}
                             </a>
@@ -135,7 +137,9 @@ export function NavMain({ routes, className }: NavMainProps) {
                   )}
                 >
                   {route.icon}
-                  {!isCollapsed && <span className="ms-2 text-sm font-medium">{route.title}</span>}
+                  {!isCollapsed && (
+                    <span className="ms-2 text-body font-medium">{route.title}</span>
+                  )}
                 </a>
               </SidebarMenuButton>
             )}

package/src/components/nav-notifications/nav-notifications.test.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { NavNotifications } from "./nav-notifications";
 
 describe("NavNotifications", () => {
@@ -12,4 +13,14 @@ describe("NavNotifications", () => {
     render(<NavNotifications notifications={notifications} />);
     expect(screen.getByRole("button", { name: "Open notifications" })).toBeInTheDocument();
   });
+
+  it("caps the menu width so it never overflows a narrow viewport", async () => {
+    const user = userEvent.setup();
+    render(<NavNotifications notifications={notifications} />);
+    await user.click(screen.getByRole("button", { name: "Open notifications" }));
+    const menu = await screen.findByRole("menu");
+    // Without a max-width cap, the fixed `w-80` (320px) menu forces horizontal
+    // overflow on any viewport narrower than ~336px.
+    expect(menu.className).toContain("max-w-[calc(100vw-2rem)]");
+  });
 });

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

@@ -81,7 +81,7 @@ export function NavNotifications({
           variant="ghost"
           size="icon"
           className={cn("rounded-full", className)}
-          aria-label="Open notifications"
+          aria-label={t("ui.navNotifications.trigger")}
         >
           <BellIcon className="size-5" />
         </Button>
@@ -89,6 +89,9 @@ export function NavNotifications({
       <DropdownMenuContent
         side={side}
         align={align}
+        // Keeps the menu clear of the viewport edge instead of sitting flush
+        // against it on a narrow phone screen.
+        collisionPadding={16}
         className={cn(
           // The vertical inset belongs to the SIDE-opening rail placement, where
           // the menu runs alongside its trigger and needs clearance from it. A
@@ -96,7 +99,10 @@ export function NavNotifications({
           // and the inset would just hang it 24px off the bar. Derived from
           // `side` rather than exposed as a second className seam.
           (side === "left" || side === "right") && "my-6",
-          "w-80",
+          // `w-80` (320px) is wider than some phone viewports once the 16px
+          // collision padding on both sides is subtracted — cap it so the menu
+          // shrinks instead of forcing horizontal overflow.
+          "w-80 max-w-[calc(100vw-2rem)]",
         )}
       >
         <DropdownMenuLabel>{t("ui.navNotifications.label")}</DropdownMenuLabel>
@@ -107,13 +113,13 @@ export function NavNotifications({
               <AvatarFallback>{fallback}</AvatarFallback>
             </Avatar>
             <div className="flex flex-col">
-              <span className="text-sm font-medium">{text}</span>
-              <span className="text-xs text-muted-foreground">{time}</span>
+              <span className="text-body font-medium">{text}</span>
+              <span className="text-meta text-muted-foreground">{time}</span>
             </div>
           </DropdownMenuItem>
         ))}
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="justify-center text-sm text-muted-foreground">
+        <DropdownMenuItem className="justify-center text-body text-muted-foreground">
           {viewAllLabel}
         </DropdownMenuItem>
       </DropdownMenuContent>

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

@@ -54,9 +54,9 @@ export function NavUser({ user }: NavUserProps) {
                 {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">
+              <div className="grid flex-1 text-start text-body leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
+                <span className="truncate text-meta">{user.email}</span>
               </div>
               <ChevronsUpDown className="ms-auto size-4" />
             </SidebarMenuButton>
@@ -68,14 +68,14 @@ export function NavUser({ user }: NavUserProps) {
             sideOffset={4}
           >
             <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-body">
                 <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">
+                <div className="grid flex-1 text-start text-body leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
+                  <span className="truncate text-meta">{user.email}</span>
                 </div>
               </div>
             </DropdownMenuLabel>

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 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",
 );
 
 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/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

package/src/components/pagination/pagination.tsx

@@ -5,10 +5,11 @@ import { buttonVariants } from "../button";
 import { useLocale } from "../locale-provider";
 
 export function Pagination({ className, ...props }: ComponentProps<"nav">) {
+  const { t } = useLocale();
   return (
     <nav
       role="navigation"
-      aria-label="pagination"
+      aria-label={t("ui.pagination.label")}
       className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
@@ -27,19 +28,22 @@ export const PaginationItem = forwardRef<HTMLLIElement, ComponentProps<"li">>(
   },
 );
 type PaginationLinkProps = { isActive?: boolean } & ComponentProps<"a">;
-export function PaginationLink({ className, isActive, ...props }: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      className={cn(
-        buttonVariants({ variant: isActive ? "outline" : "ghost", size: "icon" }),
-        "cursor-pointer",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+export const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  function PaginationLink({ className, isActive, ...props }, ref) {
+    return (
+      <a
+        ref={ref}
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+          buttonVariants({ variant: isActive ? "outline" : "ghost", size: "icon" }),
+          "cursor-pointer",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 export function PaginationPrevious({ className, ...props }: ComponentProps<"a">) {
   const { t } = useLocale();
   return (

package/src/components/popover/popover.tsx

@@ -14,6 +14,7 @@ export const PopoverContent = forwardRef<
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         ref={ref}
+        data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
         className={cn(