@tangle-network/ui 11.51.6 → 11.51.8

package/src/primitives/card.test.tsx

@@ -1,71 +0,0 @@
-import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps } from "./card";
-
-describe("Card anatomy", () => {
-  it("keeps the existing default title tag and heading ref", () => {
-    const ref = createRef<HTMLHeadingElement>();
-    render(<CardTitle ref={ref} id="card-title">Details</CardTitle>);
-    expect(ref.current).toBe(screen.getByRole("heading", { level: 3 }));
-    expect(ref.current).toHaveAttribute("id", "card-title");
-  });
-
-  it.each([1, 2, 3, 4, 5, 6] as const)("allows an h%i without changing its visual treatment", (level) => {
-    const { rerender } = render(<CardTitle>Details</CardTitle>);
-    const classes = screen.getByRole("heading").className;
-    rerender(<CardTitle as={`h${level}` as CardTitleProps["as"]}>Details</CardTitle>);
-    expect(screen.getByRole("heading", { level }).className).toBe(classes);
-  });
-
-  it("preserves native attributes and caller classes", () => {
-    render(<CardTitle as="h2" role="presentation" className="text-xl" data-kind="summary">Summary</CardTitle>);
-    const title = screen.getByText("Summary");
-    expect(title).toHaveAttribute("role", "presentation");
-    expect(title).toHaveAttribute("data-kind", "summary");
-    expect(title).toHaveClass("text-xl");
-  });
-
-  it("uses the same gutter on every part and only removes subsequent top padding", () => {
-    render(<Card>
-      <CardHeader data-testid="header"><CardTitle>Details</CardTitle><CardDescription>Prose</CardDescription></CardHeader>
-      <CardContent data-testid="content">Body</CardContent>
-      <CardFooter data-testid="footer">Footer</CardFooter>
-    </Card>);
-    for (const part of ["header", "content", "footer"]) {
-      expect(screen.getByTestId(part)).toHaveClass("p-4");
-      expect(screen.getByTestId(part)).not.toHaveClass("p-6");
-    }
-    expect(screen.getByTestId("content")).toHaveClass("[&:not(:first-child)]:pt-0");
-    expect(screen.getByTestId("footer")).toHaveClass("[&:not(:first-child)]:pt-0");
-    // These are class/DOM contracts, not a browser-computed padding assertion.
-    expect(screen.getByText("Prose").tagName).toBe("P");
-  });
-
-  it("does not strip the top padding unconditionally from content-only cards", () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<Card><CardContent ref={ref}>Standalone</CardContent></Card>);
-    expect(ref.current).toHaveClass("p-4");
-    expect(ref.current).not.toHaveClass("pt-0");
-    expect(ref.current?.matches(":first-child")).toBe(true);
-  });
-
-  it("keeps hover decorative and leaves keyboard activation to a real button", async () => {
-    const user = userEvent.setup();
-    const activate = vi.fn();
-    const ref = createRef<HTMLDivElement>();
-    render(<Card ref={ref} hover>
-      <CardContent><button type="button" onClick={activate}>Open details</button></CardContent>
-    </Card>);
-    expect(ref.current?.tagName).toBe("DIV");
-    expect(ref.current).not.toHaveAttribute("tabindex");
-    expect(ref.current).not.toHaveAttribute("role");
-    expect(ref.current).not.toHaveClass("cursor-pointer");
-    await user.tab();
-    expect(screen.getByRole("button", { name: "Open details" })).toHaveFocus();
-    await user.keyboard("{Enter}");
-    await user.keyboard(" ");
-    expect(activate).toHaveBeenCalledTimes(2);
-  });
-});

package/src/primitives/chip.test.tsx

@@ -1,200 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-import { describe, expect, it, vi } from "vitest";
-import { Chip } from "./chip";
-import { IconTile, initialsOf } from "./icon-tile";
-import { Tag } from "./tag";
-import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./tone";
-
-function FilterRow() {
-  const [on, setOn] = React.useState<Record<string, boolean>>({ Drafts: true, Scheduled: false });
-  return (
-    <div>
-      {Object.keys(on).map((name) => (
-        <Chip
-          key={name}
-          selected={on[name]}
-          onSelectedChange={(next) => setOn((prev) => ({ ...prev, [name]: next }))}
-        >
-          {name}
-        </Chip>
-      ))}
-    </div>
-  );
-}
-
-describe("Chip", () => {
-  it("is a native button that runs onClick when it is an action chip", async () => {
-    const onClick = vi.fn();
-    render(<Chip onClick={onClick}>Draft a launch post</Chip>);
-    const chip = screen.getByRole("button", { name: "Draft a launch post" });
-    expect(chip).toHaveAttribute("type", "button");
-    expect(chip).not.toHaveAttribute("aria-pressed");
-    await userEvent.click(chip);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  it("toggles from the keyboard with Space and Enter and reports aria-pressed", async () => {
-    const user = userEvent.setup();
-    render(<FilterRow />);
-    const drafts = screen.getByRole("button", { name: "Drafts" });
-    const scheduled = screen.getByRole("button", { name: "Scheduled" });
-    expect(drafts).toHaveAttribute("aria-pressed", "true");
-    expect(scheduled).toHaveAttribute("aria-pressed", "false");
-
-    await user.tab();
-    expect(drafts).toHaveFocus();
-    await user.keyboard(" ");
-    expect(drafts).toHaveAttribute("aria-pressed", "false");
-
-    await user.tab();
-    expect(scheduled).toHaveFocus();
-    await user.keyboard("{Enter}");
-    expect(scheduled).toHaveAttribute("aria-pressed", "true");
-  });
-
-  // Selection must survive greyscale: the check replaces the icon only when on.
-  it("shows a check glyph only while selected", () => {
-    const { rerender } = render(
-      <Chip selected={false} icon={<svg data-testid="icon" />}>
-        Video
-      </Chip>,
-    );
-    expect(screen.getByTestId("icon")).toBeInTheDocument();
-    expect(document.querySelector(".lucide-check")).toBeNull();
-    rerender(
-      <Chip selected icon={<svg data-testid="icon" />}>
-        Video
-      </Chip>,
-    );
-    expect(screen.queryByTestId("icon")).toBeNull();
-    expect(document.querySelector(".lucide-check")).not.toBeNull();
-  });
-
-  it("does not toggle while disabled", () => {
-    const onSelectedChange = vi.fn();
-    render(
-      <Chip selected={false} disabled onSelectedChange={onSelectedChange}>
-        Archived
-      </Chip>,
-    );
-    fireEvent.click(screen.getByRole("button", { name: "Archived" }));
-    expect(onSelectedChange).not.toHaveBeenCalled();
-  });
-
-  it("lets a consumer onClick veto the toggle with preventDefault", () => {
-    const onSelectedChange = vi.fn();
-    render(
-      <Chip selected={false} onClick={(e) => e.preventDefault()} onSelectedChange={onSelectedChange}>
-        Locked
-      </Chip>,
-    );
-    fireEvent.click(screen.getByRole("button", { name: "Locked" }));
-    expect(onSelectedChange).not.toHaveBeenCalled();
-  });
-});
-
-describe("Tag", () => {
-  it("is a static label with no tab stop of its own", async () => {
-    render(<Tag tone="teal">Research</Tag>);
-    expect(screen.getByText("Research")).toBeInTheDocument();
-    expect(screen.queryByRole("button")).toBeNull();
-  });
-
-  it("removes from the keyboard through a named remove button", async () => {
-    const user = userEvent.setup();
-    const onRemove = vi.fn();
-    render(<Tag onRemove={onRemove}>ada@example.com</Tag>);
-    await user.tab();
-    const remove = screen.getByRole("button", { name: "Remove ada@example.com" });
-    expect(remove).toHaveFocus();
-    await user.keyboard("{Enter}");
-    await user.keyboard(" ");
-    expect(onRemove).toHaveBeenCalledTimes(2);
-  });
-
-  it("takes an explicit remove label when the label is not plain text", () => {
-    render(
-      <Tag onRemove={() => {}} removeLabel="Remove the LinkedIn channel">
-        <strong>LinkedIn</strong>
-      </Tag>,
-    );
-    expect(screen.getByRole("button", { name: "Remove the LinkedIn channel" })).toBeInTheDocument();
-  });
-});
-
-describe("Tag wrap", () => {
-  const LONG = "Adafruit-BME680-Temperature-Humidity-Pressure-Gas-Sensor-Breakout";
-
-  it("truncates a long label by default and names it in a title", () => {
-    render(<Tag>{LONG}</Tag>);
-    const label = screen.getByText(LONG);
-    expect(label.className).toContain("truncate");
-    expect(label.getAttribute("title")).toBe(LONG);
-    expect(label.parentElement?.className).toContain("h-6");
-  });
-
-  it("wraps a long label across lines when asked, aligned to its first line", () => {
-    render(<Tag wrap size="md">{LONG}</Tag>);
-    const label = screen.getByText(LONG);
-    expect(label.className).not.toContain("truncate");
-    expect(label.className).toContain("[overflow-wrap:anywhere]");
-    expect(label.className).toContain("py-[3px]");
-    expect(label.parentElement?.className).toContain("items-start");
-    expect(label.parentElement?.className).not.toMatch(/(^|\s)h-7(\s|$)/);
-  });
-});
-
-describe("IconTile", () => {
-  it("falls back from a broken image to the glyph, then to initials", () => {
-    const { container, rerender } = render(<IconTile src="https://example.invalid/logo.png" name="Acme Robotics" />);
-    const img = container.querySelector("img");
-    expect(img).not.toBeNull();
-    fireEvent.error(img as HTMLImageElement);
-    expect(container.querySelector("img")).toBeNull();
-    expect(container.textContent).toBe("AR");
-
-    rerender(<IconTile name="Acme Robotics" icon={<svg data-testid="glyph" />} />);
-    expect(screen.getByTestId("glyph")).toBeInTheDocument();
-  });
-
-  it("is decorative unless it is given a label", () => {
-    const { container, rerender } = render(<IconTile name="Acme" />);
-    expect(container.firstElementChild).toHaveAttribute("aria-hidden", "true");
-    rerender(<IconTile name="Acme" label="Acme workspace" />);
-    expect(screen.getByRole("img", { name: "Acme workspace" })).toBeInTheDocument();
-  });
-
-  it.each([
-    ["Acme Robotics", "AR"],
-    ["acme", "AC"],
-    ["jane.doe", "JD"],
-    ["  ", ""],
-    ["李 小龍", "李小"],
-    ["🦊 fox", "🦊F"],
-  ])("derives the initials of %j as %j", (name, initials) => {
-    expect(initialsOf(name)).toBe(initials);
-  });
-});
-
-describe("toneFor", () => {
-  it("gives a key the same categorical tone every time", () => {
-    expect(toneFor("linkedin")).toBe(toneFor("linkedin"));
-    expect(CATEGORY_TONES).toContain(toneFor("linkedin"));
-  });
-
-  it("spreads keys across the categorical set", () => {
-    const used = new Set(Array.from({ length: 64 }, (_, i) => toneFor(`project-${i}`)));
-    expect(used.size).toBe(CATEGORY_TONES.length);
-  });
-
-  // The sandbox-ui style bundle and Tailwind read class names statically, so
-  // every tone's classes must name their own tone's tokens literally.
-  it.each(CATEGORY_TONES)("writes %s's classes against its own tokens", (tone) => {
-    for (const value of Object.values(TONE_CLASSES[tone])) {
-      expect(value).toContain(`--tone-${tone}-`);
-      expect(value).not.toMatch(new RegExp(`--tone-(?!${tone}-)`));
-    }
-  });
-});

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

@@ -1,146 +0,0 @@
-import * as React from "react";
-import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { controlHeight } from "../lib/control-presentation";
-import { Button } from "./button";
-import { Calendar, formatCalendarDate, parseCalendarDate } from "./calendar";
-import { DatePicker } from "./date-picker";
-import { Select, SelectTrigger, SelectValue } from "./select";
-import { TimeSelect } from "./time-select";
-import { FilterField, Toolbar } from "./toolbar";
-
-afterEach(cleanup);
-
-describe("calendar dates", () => {
-  it("round-trips YYYY-MM-DD in UTC and rejects impossible dates", () => {
-    const time = parseCalendarDate("2026-03-08");
-    expect(time).toBe(Date.UTC(2026, 2, 8));
-    expect(formatCalendarDate(time!)).toBe("2026-03-08");
-    expect(parseCalendarDate("2026-02-31")).toBeNull();
-    expect(parseCalendarDate("03/08/2026")).toBeNull();
-  });
-});
-
-describe("Calendar", () => {
-  it("renders six weeks, marks today and the selection, and picks a day", async () => {
-    const onChange = vi.fn();
-    render(<Calendar value="2026-10-08" today="2026-10-08" onChange={onChange} locale="en-US" />);
-    const grid = screen.getByRole("grid", { name: "October 2026" });
-    expect(within(grid).getAllByRole("gridcell")).toHaveLength(42);
-    const selected = screen.getByRole("button", { name: "Thursday, October 8, 2026" });
-    expect(selected).toHaveAttribute("aria-current", "date");
-    expect(selected.closest("[role=gridcell]")).toHaveAttribute("aria-selected", "true");
-    await userEvent.click(screen.getByRole("button", { name: "Friday, October 16, 2026" }));
-    expect(onChange).toHaveBeenCalledWith("2026-10-16");
-  });
-
-  it("moves by day, week and month from the keyboard and picks with Enter", async () => {
-    const onChange = vi.fn();
-    render(<Calendar value="2026-10-31" onChange={onChange} locale="en-US" />);
-    const user = userEvent.setup();
-    screen.getByRole("button", { name: "Saturday, October 31, 2026" }).focus();
-    await user.keyboard("{ArrowRight}");
-    expect(screen.getByRole("grid", { name: "November 2026" })).toBeTruthy();
-    expect(document.activeElement).toHaveAccessibleName("Sunday, November 1, 2026");
-    await user.keyboard("{ArrowDown}{PageUp}");
-    expect(document.activeElement).toHaveAccessibleName("Thursday, October 8, 2026");
-    await user.keyboard("{Enter}");
-    expect(onChange).toHaveBeenCalledWith("2026-10-08");
-  });
-
-  it("refuses dates outside min and max", async () => {
-    const onChange = vi.fn();
-    render(<Calendar defaultMonth="2026-10-01" min="2026-10-10" onChange={onChange} locale="en-US" />);
-    const early = screen.getByRole("button", { name: "Friday, October 9, 2026" });
-    expect(early).toHaveAttribute("aria-disabled", "true");
-    await userEvent.click(early);
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it("starts weeks on Monday when asked", () => {
-    render(<Calendar defaultMonth="2026-10-01" weekStartsOn={1} locale="en-US" />);
-    expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Monday");
-  });
-});
-
-describe("DatePicker", () => {
-  it("shows the date in the locale instead of a mm/dd/yyyy mask, on the control scale", () => {
-    render(<DatePicker aria-label="Schedule for" value="2026-10-08" locale="en-US" />);
-    const trigger = screen.getByRole("button", { name: "Schedule for" });
-    expect(trigger).toHaveTextContent("Oct 8, 2026");
-    expect(trigger.className.split(" ")).toContain(controlHeight.md);
-    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
-  });
-
-  it("opens a calendar, reports the chosen date and closes", async () => {
-    const onChange = vi.fn();
-    render(<DatePicker aria-label="Schedule for" placeholder="Any date" defaultMonth="2026-10-01" onChange={onChange} locale="en-US" />);
-    const trigger = screen.getByRole("button", { name: "Schedule for" });
-    expect(trigger).toHaveTextContent("Any date");
-    expect(trigger).toHaveAttribute("data-placeholder");
-    await userEvent.click(trigger);
-    await userEvent.click(await screen.findByRole("button", { name: "Tuesday, October 20, 2026" }));
-    expect(onChange).toHaveBeenCalledWith("2026-10-20");
-    expect(screen.queryByRole("grid")).toBeNull();
-  });
-
-  it("clears a chosen date and submits it with a name", async () => {
-    const onChange = vi.fn();
-    const { container } = render(<DatePicker aria-label="Due" name="due" value="2026-10-08" onChange={onChange} locale="en-US" />);
-    expect(container.querySelector('input[type="hidden"][name="due"]')).toHaveValue("2026-10-08");
-    await userEvent.click(screen.getByRole("button", { name: "Due" }));
-    await userEvent.click(await screen.findByRole("button", { name: "Clear" }));
-    expect(onChange).toHaveBeenCalledWith("");
-  });
-});
-
-describe("TimeSelect", () => {
-  it("lists step slots in the locale and keeps an off-step value", () => {
-    render(<TimeSelect aria-label="Time" value="09:07" locale="en-US" step={30} />);
-    const trigger = screen.getByRole("combobox", { name: "Time" });
-    expect(trigger).toHaveTextContent("9:07 AM");
-    expect(trigger.className.split(" ")).toContain(controlHeight.md);
-  });
-
-  it("reports HH:MM when a slot is picked", async () => {
-    // jsdom lacks the layout APIs Radix Select calls while opening.
-    Element.prototype.scrollIntoView ??= vi.fn();
-    Element.prototype.hasPointerCapture ??= vi.fn(() => false);
-    Element.prototype.releasePointerCapture ??= vi.fn();
-    const onChange = vi.fn();
-    render(<TimeSelect aria-label="Time" value="09:00" onChange={onChange} locale="en-US" step={60} />);
-    const trigger = screen.getByRole("combobox", { name: "Time" });
-    trigger.focus();
-    fireEvent.keyDown(trigger, { key: "Enter" });
-    fireEvent.click(await screen.findByRole("option", { name: "10:00 AM" }));
-    expect(onChange).toHaveBeenCalledWith("10:00");
-  });
-});
-
-describe("raised fields in a Toolbar", () => {
-  it("lifts fields inside a Toolbar onto the card surface and leaves others in the well", () => {
-    render(
-      <>
-        <Toolbar data-testid="toolbar" filters={<FilterField label="Format"><Select><SelectTrigger aria-label="Format"><SelectValue /></SelectTrigger></Select></FilterField>} />
-        <Select><SelectTrigger aria-label="Elsewhere"><SelectValue /></SelectTrigger></Select>
-      </>,
-    );
-    expect(screen.getByTestId("toolbar").className).toContain("[--field-surface:hsl(var(--card))]");
-    for (const name of ["Format", "Elsewhere"]) {
-      expect(screen.getByRole("combobox", { name }).className).toContain("bg-[var(--field-surface,var(--well))]");
-    }
-  });
-});
-
-describe("Button bare", () => {
-  it("keeps focus and disabled behavior without surface or size classes", () => {
-    render(<Button variant="bare" className="flex w-full px-4 py-2" disabled>Row</Button>);
-    const row = screen.getByRole("button", { name: "Row" });
-    expect(row).toBeDisabled();
-    expect(row.className).toContain("focus-visible:ring-4");
-    expect(row.className).not.toContain("h-[var(--control-height");
-    expect(row.className).not.toContain("inline-flex");
-    expect(row.className).toContain("px-4");
-  });
-});

package/src/primitives/dialog.test.tsx

@@ -1,75 +0,0 @@
-import { createRef, type ComponentProps } from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "./dialog";
-
-function Example(props: ComponentProps<typeof DialogContent>) {
-  return (
-    <Dialog defaultOpen>
-      <DialogContent {...props}>
-        <DialogTitle>Confirm operation</DialogTitle>
-        <DialogDescription>Choose whether to continue.</DialogDescription>
-        <DialogClose asChild><button type="button">Cancel operation</button></DialogClose>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-describe("DialogContent close-button visibility", () => {
-  it("retains the default accessible close button and its dismissal behavior", async () => {
-    const user = userEvent.setup();
-    render(<Example />);
-    expect(screen.getByRole("dialog", { name: "Confirm operation" })).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Close", exact: true }));
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-
-  it.each(["default", "sandbox"] as const)("hides only the built-in button for the %s variant", async (variant) => {
-    const user = userEvent.setup();
-    render(<Example hideCloseButton variant={variant} />);
-    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
-    expect(screen.getByRole("dialog")).not.toHaveAttribute("hideCloseButton");
-    expect(screen.getByRole("dialog")).toHaveAccessibleDescription("Choose whether to continue.");
-    await user.click(screen.getByRole("button", { name: "Cancel operation" }));
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-
-  it("restores the same default button when visibility changes", () => {
-    const { rerender } = render(<Example hideCloseButton />);
-    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
-    rerender(<Example hideCloseButton={false} />);
-    expect(screen.getByRole("button", { name: "Close", exact: true })).toBeInTheDocument();
-    rerender(<Example hideCloseButton />);
-    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
-  });
-
-  it("does not silently disable Escape when the close button is hidden", async () => {
-    const user = userEvent.setup();
-    render(<Example hideCloseButton />);
-    await user.keyboard("{Escape}");
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-
-  it("preserves the caller's Escape guard and an explicit keyboard-operable exit", async () => {
-    const user = userEvent.setup();
-    const guard = vi.fn((event: KeyboardEvent) => event.preventDefault());
-    render(<Example hideCloseButton onEscapeKeyDown={guard} />);
-    await user.keyboard("{Escape}");
-    expect(guard).toHaveBeenCalledOnce();
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    screen.getByRole("button", { name: "Cancel operation" }).focus();
-    await user.keyboard("{Enter}");
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-
-  it("forwards content refs, native attributes and class overrides", () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<Example ref={ref} hideCloseButton id="operation-dialog" data-example="retained" className="max-w-xl" />);
-    const dialog = screen.getByRole("dialog");
-    expect(ref.current).toBe(dialog);
-    expect(dialog).toHaveAttribute("id", "operation-dialog");
-    expect(dialog).toHaveAttribute("data-example", "retained");
-    expect(dialog).toHaveClass("max-w-xl");
-  });
-});

package/src/primitives/input.test.tsx

@@ -1,161 +0,0 @@
-import * as React from "react";
-import { act, cleanup, render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { hydrateRoot, type Root } from "react-dom/client";
-import { renderToString } from "react-dom/server";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Input, Textarea } from "./input";
-import { Label } from "./label";
-
-afterEach(cleanup);
-
-describe.each([
-  ["Input", Input],
-  ["Textarea", Textarea],
-] as const)("%s relationships", (_name, Field) => {
-  it("gives repeated labels distinct, stable IDs and focuses the correct field", async () => {
-    const user = userEvent.setup();
-    const { rerender } = render(<><Field label="Name" /><Field label="Name" /></>);
-    const fields = screen.getAllByRole("textbox");
-    const ids = fields.map((field) => field.id);
-    expect(ids.every(Boolean)).toBe(true);
-    expect(new Set(ids).size).toBe(2);
-    expect(screen.getAllByLabelText("Name")).toEqual(fields);
-    for (const [index, label] of screen.getAllByText("Name", { selector: "label" }).entries()) {
-      expect(label).toHaveAttribute("for", ids[index]);
-      await user.click(label);
-      expect(fields[index]).toHaveFocus();
-    }
-    rerender(<><Field label="Renamed" /><Field label="Renamed" /></>);
-    expect(screen.getAllByRole("textbox").map((field) => field.id)).toEqual(ids);
-  });
-
-  it("preserves an explicit ID and merges caller, hint and error descriptions without duplicates", () => {
-    render(<>
-      <p id="external">External instructions.</p>
-      <Field
-        id="profile"
-        label="Name"
-        hint="Use your full name."
-        error="Name is required."
-        aria-describedby={" external  external\tprofile-hint "}
-        aria-invalid={false}
-      />
-    </>);
-    const field = screen.getByRole("textbox", { name: "Name" });
-    expect(field).toHaveAttribute("id", "profile");
-    expect(field).toHaveAttribute("aria-describedby", "external profile-hint profile-error");
-    expect(screen.getByText("Use your full name.")).toHaveAttribute("id", "profile-hint");
-    expect(screen.getByText("Name is required.")).toHaveAttribute("id", "profile-error");
-    expect(field).toHaveAccessibleDescription("External instructions. Use your full name. Name is required.");
-    expect(field).toHaveAttribute("aria-invalid", "true");
-  });
-
-  it("associates descriptions without a convenience label and removes stale relationships", () => {
-    const { rerender } = render(<Field aria-label="Name" hint="A hint" error="An error" />);
-    const field = screen.getByRole("textbox", { name: "Name" });
-    const id = field.id;
-    expect(id).not.toBe("");
-    expect(field).toHaveAccessibleDescription("A hint An error");
-    rerender(<Field aria-label="Name" hint="A hint" />);
-    expect(field.id).toBe(id);
-    expect(field).toHaveAttribute("aria-describedby", `${id}-hint`);
-    expect(field).not.toHaveAttribute("aria-invalid");
-    expect(document.getElementById(`${id}-error`)).toBeNull();
-    rerender(<Field aria-label="Name" />);
-    const bareField = screen.getByRole("textbox", { name: "Name" });
-    expect(bareField.id).toBe(id);
-    expect(bareField).not.toHaveAttribute("aria-describedby");
-    expect(document.getElementById(`${id}-hint`)).toBeNull();
-  });
-
-  it("preserves the bare-element API and caller invalid states", () => {
-    const { container, rerender } = render(
-      <Field aria-label="Name" aria-describedby="external" aria-invalid="spelling" className="caller-class" />,
-    );
-    const field = screen.getByRole("textbox");
-    expect(container.firstElementChild).toBe(field);
-    expect(container.childElementCount).toBe(1);
-    expect(field).toHaveAttribute("aria-describedby", "external");
-    expect(field).toHaveAttribute("aria-invalid", "spelling");
-    expect(field).toHaveClass("caller-class");
-    rerender(<Field aria-label="Name" aria-invalid={false} />);
-    expect(field).toHaveAttribute("aria-invalid", "false");
-  });
-
-  it("uses the existing Label treatment", () => {
-    render(<><Label className="block">Reference</Label><Field label="Name" /></>);
-    expect(screen.getByText("Name", { selector: "label" }).className)
-      .toBe(screen.getByText("Reference").className);
-  });
-});
-
-it("keeps Input and Textarea IDs distinct even with the same label", () => {
-  render(<><Input label="Notes" /><Textarea label="Notes" /></>);
-  expect(new Set(screen.getAllByRole("textbox").map((field) => field.id)).size).toBe(2);
-});
-
-it("exposes Input's error variant without requiring error text", () => {
-  render(<Input aria-label="Name" variant="error" />);
-  expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
-});
-
-it("forwards native field refs, values and change handlers", async () => {
-  const user = userEvent.setup();
-  const inputRef = React.createRef<HTMLInputElement>();
-  const textareaRef = React.createRef<HTMLTextAreaElement>();
-  const inputChange = vi.fn();
-  const textareaChange = vi.fn();
-  const { unmount } = render(<>
-    <Input ref={inputRef} label="Name" defaultValue="A" onChange={inputChange} />
-    <Textarea ref={textareaRef} label="Notes" defaultValue="B" onChange={textareaChange} />
-  </>);
-  expect(inputRef.current).toBe(screen.getByRole("textbox", { name: "Name" }));
-  expect(textareaRef.current).toBe(screen.getByRole("textbox", { name: "Notes" }));
-  await user.type(inputRef.current!, "lice");
-  await user.type(textareaRef.current!, "ody");
-  expect(inputRef.current).toHaveValue("Alice");
-  expect(textareaRef.current).toHaveValue("Body");
-  expect(inputChange).toHaveBeenCalled();
-  expect(textareaChange).toHaveBeenCalled();
-  unmount();
-  expect(inputRef.current).toBeNull();
-  expect(textareaRef.current).toBeNull();
-});
-
-it("hydrates SSR IDs and all description relationships without mismatch", async () => {
-  const ui = <React.StrictMode>
-    <p id="external">External instructions.</p>
-    <Input label="Name" hint="First hint" />
-    <Input label="Name" error="Required" />
-    <Textarea label="Name" hint="Notes hint" error="Too short" aria-describedby="external" />
-    <Input id="explicit" label="Explicit" hint="Explicit hint" />
-  </React.StrictMode>;
-  const container = document.createElement("div");
-  container.innerHTML = renderToString(ui, { identifierPrefix: "fields-" });
-  document.body.appendChild(container);
-  const serverHTML = container.innerHTML;
-  const serverIds = within(container).getAllByRole("textbox").map((field) => field.id);
-  const recoverableError = vi.fn();
-  const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-  let root: Root | undefined;
-  try {
-    await act(async () => {
-      root = hydrateRoot(container, ui, { identifierPrefix: "fields-", onRecoverableError: recoverableError });
-    });
-    expect(new Set(serverIds).size).toBe(4);
-    expect(within(container).getAllByRole("textbox").map((field) => field.id)).toEqual(serverIds);
-    expect(container.innerHTML).toBe(serverHTML);
-    for (const field of within(container).getAllByRole("textbox")) {
-      for (const id of field.getAttribute("aria-describedby")!.split(" ")) {
-        expect(document.getElementById(id)).not.toBeNull();
-      }
-    }
-    expect(recoverableError).not.toHaveBeenCalled();
-    expect(consoleError).not.toHaveBeenCalled();
-  } finally {
-    await act(async () => { root?.unmount(); });
-    consoleError.mockRestore();
-    container.remove();
-  }
-});