@tangle-network/ui 11.51.7 → 11.51.9

package/src/primitives/button.test.tsx

@@ -1,230 +0,0 @@
-import * as React from "react";
-import { act, cleanup, fireEvent, 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 { Button } from "./button";
-
-afterEach(cleanup);
-
-describe.each(["disabled", "loading"] as const)("%s controls", (state) => {
-  it.each([false, true])("natively disables button elements (asChild=%s)", async (asChild) => {
-    const user = userEvent.setup();
-    const click = vi.fn();
-    const submit = vi.fn((event: React.FormEvent) => event.preventDefault());
-    render(<form onSubmit={submit}>
-      <Button {...{ [state]: true }} asChild={asChild} onClick={click}>
-        {asChild ? <button disabled={false} aria-busy={false}>Save</button> : "Save"}
-      </Button>
-      <input aria-label="Next field" />
-    </form>);
-    const button = screen.getByRole("button", { name: "Save" });
-    expect(button).toBeDisabled();
-    expect(button).toHaveAccessibleName("Save");
-    if (state === "loading") expect(button).toHaveAttribute("aria-busy", "true");
-    await user.click(button);
-    button.click();
-    button.focus();
-    expect(button).not.toHaveFocus();
-    await user.keyboard("{Enter} ");
-    expect(click).not.toHaveBeenCalled();
-    expect(submit).not.toHaveBeenCalled();
-    await user.tab();
-    expect(screen.getByRole("textbox")).toHaveFocus();
-  });
-
-  it("blocks slotted anchor activation before child AND slot capture/bubble handlers", async () => {
-    const user = userEvent.setup();
-    const activation = vi.fn();
-    const handlers = {
-      onClick: activation, onClickCapture: activation,
-      onAuxClick: activation, onAuxClickCapture: activation,
-      onDoubleClick: activation, onDoubleClickCapture: activation,
-      onPointerDown: activation, onPointerDownCapture: activation,
-      onPointerUp: activation, onPointerUpCapture: activation,
-      onMouseDown: activation, onMouseDownCapture: activation,
-      onMouseUp: activation, onMouseUpCapture: activation,
-      onKeyDown: activation, onKeyDownCapture: activation,
-      onKeyUp: activation, onKeyUpCapture: activation,
-    };
-    render(<div onClick={activation}>
-      <Button asChild {...{ [state]: true }} aria-busy={false} {...handlers}>
-        <a href="#destination" tabIndex={0} aria-disabled={false} aria-busy={false} {...handlers}>
-          <span>Open account</span>
-        </a>
-      </Button>
-      <button>Next action</button>
-    </div>);
-    const link = screen.getByRole("link", { name: "Open account" });
-    expect(link).toHaveAttribute("aria-disabled", "true");
-    expect(link).toHaveAttribute("tabindex", "-1");
-    expect(link).not.toHaveAttribute("disabled");
-    expect(link).not.toHaveAttribute("href");
-    if (state === "loading") expect(link).toHaveAttribute("aria-busy", "true");
-    const target = screen.getByText("Open account");
-    expect(fireEvent.click(target)).toBe(false);
-    expect(fireEvent.doubleClick(target)).toBe(false);
-    expect(fireEvent(target, new MouseEvent("auxclick", { bubbles: true, cancelable: true, button: 1 }))).toBe(false);
-    expect(fireEvent.pointerDown(target)).toBe(false);
-    expect(fireEvent.pointerUp(target)).toBe(false);
-    expect(fireEvent.mouseDown(target)).toBe(false);
-    expect(fireEvent.mouseUp(target)).toBe(false);
-    for (const key of ["Enter", " "]) {
-      expect(fireEvent.keyDown(link, { key })).toBe(false);
-      expect(fireEvent.keyUp(link, { key })).toBe(false);
-    }
-    await user.click(target);
-    link.click();
-    // Even programmatically focused, a disabled link cannot activate by keyboard.
-    link.focus();
-    await user.keyboard("{Enter} ");
-    expect(activation).not.toHaveBeenCalled();
-    link.blur();
-    await user.tab();
-    expect(screen.getByRole("button", { name: "Next action" })).toHaveFocus();
-  });
-});
-
-it("retains the action name and hides the reduced-motion spinner from accessibility", () => {
-  const { rerender } = render(<Button loading aria-busy={false}>Save changes</Button>);
-  const button = screen.getByRole("button", { name: "Save changes" });
-  expect(button).toHaveAttribute("aria-busy", "true");
-  const spinner = button.querySelector("svg");
-  expect(spinner).toHaveAttribute("aria-hidden", "true");
-  expect(spinner).toHaveAttribute("focusable", "false");
-  expect(spinner).toHaveClass("motion-reduce:animate-none");
-  expect(button).toHaveClass("motion-reduce:transition-none", "motion-reduce:active:scale-100");
-  expect(button.querySelector("title")).toBeNull();
-  rerender(<Button loading size="icon" aria-label="Refresh reports"><span aria-hidden="true">↻</span></Button>);
-  expect(screen.getByRole("button")).toHaveAccessibleName("Refresh reports");
-});
-
-it.each(["disabled", "loading"] as const)("restores link attributes and original Slot handler order when %s ends", async (state) => {
-  const user = userEvent.setup();
-  const calls: string[] = [];
-  const ui = (unavailable: boolean) => <Button asChild {...{ [state]: unavailable }} onClick={() => calls.push("slot")}>
-    <a href="#destination" tabIndex={2} onClick={(event) => { event.preventDefault(); calls.push("child"); }}>Open</a>
-  </Button>;
-  const { rerender } = render(ui(true));
-  const link = screen.getByRole("link");
-  rerender(ui(false));
-  expect(link).toHaveAttribute("href", "#destination");
-  expect(link).toHaveAttribute("tabindex", "2");
-  expect(link).not.toHaveAttribute("aria-disabled");
-  expect(link).not.toHaveAttribute("aria-busy");
-  expect(link).not.toHaveAttribute("role");
-  await user.click(link);
-  expect(calls).toEqual(["child", "slot"]);
-  calls.length = 0;
-  link.focus();
-  await user.keyboard("{Enter}");
-  expect(calls).toEqual(["child", "slot"]);
-});
-
-it("preserves non-activation keyboard handlers on disabled links", () => {
-  const calls: string[] = [];
-  render(<Button asChild disabled onKeyDownCapture={() => calls.push("slot capture")} onKeyDown={() => calls.push("slot bubble")}>
-    <a href="#destination" onKeyDownCapture={() => calls.push("child capture")} onKeyDown={() => calls.push("child bubble")}>Open</a>
-  </Button>);
-  expect(fireEvent.keyDown(screen.getByRole("link"), { key: "ArrowRight" })).toBe(true);
-  expect(calls).toEqual(["child capture", "slot capture", "child bubble", "slot bubble"]);
-});
-
-it("respects a native child's own disabled state", () => {
-  render(<Button asChild disabled={false}><button disabled>Save</button></Button>);
-  expect(screen.getByRole("button")).toBeDisabled();
-});
-
-it("composes refs on a slotted native button", () => {
-  const outerRef = React.createRef<HTMLButtonElement>();
-  const childRef = React.createRef<HTMLButtonElement>();
-  const { unmount } = render(<Button asChild ref={outerRef}><button ref={childRef}>Save</button></Button>);
-  expect(outerRef.current).toBe(screen.getByRole("button"));
-  expect(childRef.current).toBe(outerRef.current);
-  unmount();
-  expect(outerRef.current).toBeNull();
-  expect(childRef.current).toBeNull();
-});
-
-it("preserves caller busy state when Button is not loading", () => {
-  render(<><Button aria-busy>Save</Button><Button asChild aria-busy><a href="#destination">Open</a></Button></>);
-  expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
-  expect(screen.getByRole("link")).toHaveAttribute("aria-busy", "true");
-});
-
-it("preserves implicit submission, explicit types, and enabled keyboard activation", async () => {
-  const user = userEvent.setup();
-  const submit = vi.fn((event: React.FormEvent) => event.preventDefault());
-  render(<form onSubmit={submit}>
-    <Button>Implicit submit</Button>
-    <Button asChild><button>Slotted submit</button></Button>
-    <Button type="button">Explicit button</Button>
-    <Button type="submit">Explicit submit</Button>
-    <Button asChild type="submit"><button type="button">Child button</button></Button>
-  </form>);
-  const implicit = screen.getByRole("button", { name: "Implicit submit" });
-  expect(implicit).not.toHaveAttribute("type");
-  await user.click(implicit);
-  await user.click(screen.getByRole("button", { name: "Slotted submit" }));
-  await user.click(screen.getByRole("button", { name: "Explicit submit" }));
-  expect(submit).toHaveBeenCalledTimes(3);
-  await user.click(screen.getByRole("button", { name: "Explicit button" }));
-  await user.click(screen.getByRole("button", { name: "Child button" }));
-  expect(submit).toHaveBeenCalledTimes(3);
-  implicit.focus();
-  await user.keyboard("{Enter} ");
-  expect(submit).toHaveBeenCalledTimes(5);
-});
-
-it("forwards native refs and composes both refs on a slotted anchor", () => {
-  const nativeRef = React.createRef<HTMLButtonElement>();
-  const anchorRef = React.createRef<HTMLAnchorElement>();
-  const slotRef = vi.fn();
-  const { rerender, unmount } = render(<>
-    <Button ref={nativeRef}>Save</Button>
-    <Button asChild loading ref={slotRef}><a ref={anchorRef} href="#destination">Open</a></Button>
-  </>);
-  const link = screen.getByRole("link");
-  expect(nativeRef.current).toBe(screen.getByRole("button"));
-  expect(anchorRef.current).toBe(link);
-  expect(slotRef).toHaveBeenLastCalledWith(link);
-  rerender(<>
-    <Button ref={nativeRef}>Save</Button>
-    <Button asChild ref={slotRef}><a ref={anchorRef} href="#destination">Open</a></Button>
-  </>);
-  expect(anchorRef.current).toBe(link);
-  expect(slotRef).toHaveBeenLastCalledWith(link);
-  unmount();
-  expect(nativeRef.current).toBeNull();
-  expect(anchorRef.current).toBeNull();
-  expect(slotRef).toHaveBeenLastCalledWith(null);
-});
-
-it("hydrates disabled/loading native and slotted controls without changing their names", async () => {
-  const ui = <>
-    <Button loading>Save</Button>
-    <Button asChild loading><button>Submit</button></Button>
-    <Button asChild disabled><a href="#destination">Open</a></Button>
-  </>;
-  const container = document.createElement("div");
-  container.innerHTML = renderToString(ui);
-  document.body.appendChild(container);
-  const html = container.innerHTML;
-  const recoverableError = vi.fn();
-  const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-  let root: Root | undefined;
-  try {
-    await act(async () => { root = hydrateRoot(container, ui, { onRecoverableError: recoverableError }); });
-    expect(container.innerHTML).toBe(html);
-    expect(within(container).getByRole("button", { name: "Save" })).toBeDisabled();
-    expect(within(container).getByRole("button", { name: "Submit" })).toBeDisabled();
-    expect(within(container).getByRole("link", { name: "Open" })).not.toHaveAttribute("href");
-    expect(recoverableError).not.toHaveBeenCalled();
-    expect(consoleError).not.toHaveBeenCalled();
-  } finally {
-    await act(async () => { root?.unmount(); });
-    consoleError.mockRestore();
-    container.remove();
-  }
-});

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");
-  });
-});