@tangle-network/ui 11.51.6 → 11.51.8

package/src/primitives/interaction-states.test.tsx

@@ -1,287 +0,0 @@
-import * as React from "react";
-import { cleanup, render, screen } from "@testing-library/react";
-import { compile } from "tailwindcss";
-import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-import { focusFieldWithin } from "../lib/focus";
-import {
-  ixControl,
-  ixControlAfter,
-  ixControlSoft,
-  ixField,
-  ixRow,
-  ixSelected,
-  ixTabUnderline,
-} from "../lib/interaction";
-import { Button } from "./button";
-import { Card, CardDescription } from "./card";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "./dropdown-menu";
-import { Input, Textarea } from "./input";
-import { SegmentedControl } from "./segmented-control";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
-import { Tabs, TabsList, TabsTrigger } from "./tabs";
-
-/**
- * Every primitive draws its interaction states from one helper in
- * lib/interaction.ts (ROOT-SPEC section b). This is the cheap static guard:
- * each primitive's rendered className carries every class of its helper, so a
- * later edit or a tailwind-merge conflict cannot silently drop a state. The
- * second suite compiles each helper with Tailwind to prove the classes emit the
- * declarations and selectors the states need.
- */
-afterEach(cleanup);
-beforeAll(() => {
-  // jsdom lacks the layout APIs Radix Select and Menu call while opening.
-  Element.prototype.scrollIntoView ??= vi.fn();
-  Element.prototype.hasPointerCapture ??= vi.fn(() => false);
-  Element.prototype.releasePointerCapture ??= vi.fn();
-});
-
-const tokens = (helper: string) => helper.split(/\s+/).filter(Boolean);
-const classes = (el: Element) => new Set(el.className.split(/\s+/));
-
-/** Every class of every helper is on the element. */
-function expectHelpers(el: Element, ...helpers: string[]) {
-  const have = classes(el);
-  for (const helper of helpers) {
-    for (const token of tokens(helper)) expect(have, `${el.tagName} is missing ${token}`).toContain(token);
-  }
-}
-
-/** The glow only strong controls get. */
-const HOVER_GLOW = "hover:shadow-[var(--ix-hover)]";
-/** focusRing, which every control keeps exactly. */
-const FOCUS_RING = [
-  "focus-visible:outline-1",
-  "focus-visible:outline-[var(--focus-border)]",
-  "focus-visible:ring-4",
-  "focus-visible:ring-[var(--focus-halo)]",
-];
-/** focusField's `:focus` part, which every field keeps exactly. */
-const FOCUS_FIELD = ["focus:outline-hidden", "focus:border-[var(--focus-border)]", "focus:ring-3", "focus:ring-[var(--focus-halo)]"];
-
-describe("each primitive renders its interaction helper", () => {
-  it.each(["default", "destructive", "secondary", "outline", "sandbox"] as const)(
-    "Button %s takes ixControl and keeps the focus ring",
-    (variant) => {
-      render(<Button variant={variant}>Go</Button>);
-      const button = screen.getByRole("button");
-      expectHelpers(button, ixControl);
-      for (const token of FOCUS_RING) expect(classes(button)).toContain(token);
-    },
-  );
-
-  it.each(["ghost", "link", "bare"] as const)("Button %s takes ixControlSoft and never the hover glow", (variant) => {
-    render(<Button variant={variant}>Go</Button>);
-    const button = screen.getByRole("button");
-    expectHelpers(button, ixControlSoft);
-    expect(classes(button)).not.toContain(HOVER_GLOW);
-    expect(classes(button)).not.toContain("hover:bg-muted");
-    for (const token of FOCUS_RING) expect(classes(button)).toContain(token);
-  });
-
-  it.each(["outline", "ghost", "bare"] as const)("a %s toggle Button (aria-pressed) adds ixControl and ixSelected", (variant) => {
-    render(<Button variant={variant} aria-pressed>Bold</Button>);
-    expectHelpers(screen.getByRole("button"), ixControl, ixSelected);
-  });
-
-  it("Input and Textarea take ixField with focusField's focus border and halo", () => {
-    render(<><Input aria-label="Name" /><Textarea aria-label="Notes" /></>);
-    for (const field of [screen.getByLabelText("Name"), screen.getByLabelText("Notes")]) {
-      expectHelpers(field, ixField);
-      for (const token of FOCUS_FIELD) expect(classes(field)).toContain(token);
-      expect(classes(field)).not.toContain("border-border");
-      expect(classes(field)).not.toContain("hover:border-[var(--border-strong)]");
-    }
-  });
-
-  it("focusFieldWithin is a field: ixField plus the has-focus ring, without the neutral hover", () => {
-    expect(tokens(focusFieldWithin)).toEqual(expect.arrayContaining(tokens(ixField)));
-    expect(focusFieldWithin).toContain("has-[");
-    expect(focusFieldWithin).toContain(":focus]:ring-[var(--focus-halo)]");
-    expect(tokens(focusFieldWithin)).not.toContain("hover:border-[var(--border-strong)]");
-    expect(tokens(focusFieldWithin)).not.toContain("border-border");
-  });
-
-  it("SelectTrigger is a field that keeps its well and an after-click ring while open", () => {
-    render(<Select><SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger></Select>);
-    const trigger = screen.getByRole("combobox");
-    expectHelpers(trigger, ixField, ixControlAfter);
-    for (const token of FOCUS_FIELD) expect(classes(trigger)).toContain(token);
-    expect(classes(trigger)).toContain("data-[state=open]:shadow-[var(--ix-after)]");
-    expect(classes(trigger)).toContain("data-[state=open]:border-[var(--ix-hover-border)]");
-    // The open state must not repaint the well.
-    expect([...classes(trigger)].filter((c) => c.startsWith("data-[state=open]:bg-"))).toEqual([]);
-  });
-
-  it("SelectContent paints the popover level and SelectItem takes ixRow", async () => {
-    render(
-      <Select open value="a">
-        <SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger>
-        <SelectContent><SelectItem value="a">Active</SelectItem><SelectItem value="b">Paused</SelectItem></SelectContent>
-      </Select>,
-    );
-    const listbox = await screen.findByRole("listbox");
-    const content = listbox.closest("[data-radix-select-viewport]")?.parentElement ?? listbox;
-    expect(classes(content)).toContain("bg-popover");
-    expect(classes(content)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
-    expect(classes(content)).not.toContain("bg-card");
-    for (const option of screen.getAllByRole("option")) {
-      expectHelpers(option, ixRow);
-      expect(classes(option)).not.toContain("focus:bg-[var(--accent-surface-strong)]");
-    }
-  });
-
-  it("DropdownMenu content paints the popover level and every item kind takes ixRow", async () => {
-    render(
-      <DropdownMenu open>
-        <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem>Rename</DropdownMenuItem>
-          <DropdownMenuCheckboxItem checked>Pinned</DropdownMenuCheckboxItem>
-          <DropdownMenuRadioGroup value="a"><DropdownMenuRadioItem value="a">Newest</DropdownMenuRadioItem></DropdownMenuRadioGroup>
-          <DropdownMenuSub><DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger></DropdownMenuSub>
-        </DropdownMenuContent>
-      </DropdownMenu>,
-    );
-    const menu = await screen.findByRole("menu");
-    expect(classes(menu)).toContain("bg-popover");
-    expect(classes(menu)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
-    expect(classes(menu)).not.toContain("bg-card");
-    const items = [
-      screen.getByRole("menuitem", { name: "Rename" }),
-      screen.getByRole("menuitemcheckbox", { name: "Pinned" }),
-      screen.getByRole("menuitemradio", { name: "Newest" }),
-      screen.getByRole("menuitem", { name: "Move to" }),
-    ];
-    for (const item of items) {
-      expectHelpers(item, ixRow);
-      expect(classes(item)).not.toContain("focus:bg-muted/50");
-    }
-  });
-
-  it("Card is a ladder level with a shadow; hover and interactive cards take ixControl", () => {
-    render(
-      <>
-        <Card data-testid="plain" />
-        <Card data-testid="hover" hover />
-        <Card data-testid="interactive" interactive />
-        <CardDescription>Guests, staff and vendors message your business on WhatsApp.</CardDescription>
-      </>,
-    );
-    const plain = screen.getByTestId("plain");
-    expect(plain).toHaveAttribute("data-slot", "card");
-    expect(classes(plain)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
-    expect(classes(plain)).not.toContain(HOVER_GLOW);
-    for (const id of ["hover", "interactive"]) {
-      const card = screen.getByTestId(id);
-      expectHelpers(card, ixControl);
-      expect(card).not.toHaveAttribute("interactive");
-      expect(classes(card)).not.toContain("hover:border-[var(--border-strong)]");
-    }
-    expect(classes(screen.getByText(/Guests, staff/))).toContain("line-clamp-2");
-  });
-
-  it("SegmentedControl row: a quiet well track, soft items, a raised thumb on aria-checked and no ring", () => {
-    const options = [{ value: "a", label: "A–Z" }, { value: "b", label: "Recent" }];
-    render(<SegmentedControl aria-label="Sort" value="a" onValueChange={() => {}} options={options} />);
-    const track = screen.getByRole("radiogroup");
-    expect(classes(track)).toContain("bg-[var(--well)]");
-    expect(classes(track)).toContain("border-border");
-    expect(classes(track)).not.toContain("bg-card");
-    for (const radio of screen.getAllByRole("radio")) {
-      expectHelpers(radio, ixControlSoft);
-      expect(classes(radio)).toContain("aria-checked:bg-card");
-      expect([...classes(radio)].some((token) => token.includes("--ix-sel-ring"))).toBe(false);
-      for (const token of FOCUS_RING) expect(classes(radio)).toContain(token);
-      expect(classes(radio)).not.toContain("bg-[var(--accent-surface)]");
-    }
-  });
-
-  it("SegmentedControl tabs: the underline helper and a transparent border slot", () => {
-    const options = [{ value: "a", label: "Team" }, { value: "b", label: "Roles" }];
-    render(<SegmentedControl aria-label="Section" variant="tabs" value="a" onValueChange={() => {}} options={options} />);
-    for (const radio of screen.getAllByRole("radio")) {
-      expectHelpers(radio, ixTabUnderline);
-      expect(classes(radio)).toContain("border-transparent");
-      expect(classes(radio)).not.toContain("border-[var(--accent-text)]");
-    }
-  });
-
-  it.each([
-    ["default", [ixControlSoft, ixSelected]],
-    ["pills", [ixControlSoft, ixSelected]],
-    ["underline", [ixTabUnderline]],
-  ] as const)("TabsTrigger %s takes its helper", (variant, helpers) => {
-    render(
-      <Tabs defaultValue="a">
-        <TabsList variant={variant}>
-          <TabsTrigger variant={variant} value="a">Overview</TabsTrigger>
-          <TabsTrigger variant={variant} value="b">Activity</TabsTrigger>
-        </TabsList>
-      </Tabs>,
-    );
-    for (const tab of screen.getAllByRole("tab")) {
-      expectHelpers(tab, ...helpers);
-      for (const token of FOCUS_RING) expect(classes(tab)).toContain(token);
-      expect([...classes(tab)]).not.toEqual(expect.arrayContaining(["data-[state=active]:bg-background"]));
-      expect(classes(tab)).not.toContain("data-[state=active]:border-primary");
-    }
-  });
-});
-
-describe("Tailwind compiles every interaction class to the state it names", () => {
-  /** A fresh compiler per class, so each class's CSS is read on its own. */
-  async function cssFor(candidate: string) {
-    const compiler = await compile("@tailwind utilities;");
-    return compiler.build([candidate]);
-  }
-
-  const all = [...new Set([ixControl, ixControlAfter, ixControlSoft, ixField, ixSelected, ixTabUnderline, ixRow].flatMap(tokens))];
-
-  it.each(all)("%s emits a rule", async (candidate) => {
-    expect(await cssFor(candidate)).toMatch(/\{[^}]*:[^}]*\}/);
-  });
-
-  it("composes the hover and press glows with the focus ring instead of replacing it", async () => {
-    for (const [candidate, value] of [
-      ["hover:shadow-[var(--ix-hover)]", "var(--ix-hover)"],
-      ["active:shadow-[var(--ix-press)]", "var(--ix-press)"],
-    ]) {
-      const css = await cssFor(candidate);
-      expect(css).toContain(`--tw-shadow: ${value}`);
-      expect(css).toContain("var(--tw-ring-shadow), var(--tw-shadow)");
-    }
-  });
-
-  it("keys the after-click ring on mouse focus only", async () => {
-    const css = await cssFor("focus:not-focus-visible:shadow-[var(--ix-after)]");
-    expect(css).toContain(":focus:not(:focus-visible)");
-    expect(css).toContain("--tw-shadow: var(--ix-after)");
-  });
-
-  it("reads the field fill and border from the surface context", async () => {
-    expect(await cssFor("bg-[var(--field-surface,var(--well))]")).toContain("background-color: var(--field-surface,var(--well))");
-    expect(await cssFor("border-[var(--field-border)]")).toContain("border-color: var(--field-border)");
-    expect(await cssFor("hover:border-[var(--ix-hover-border)]")).toContain("border-color: var(--ix-hover-border)");
-  });
-
-  it("draws selection on aria-pressed, aria-checked, aria-current, data-state on and active", async () => {
-    const css = await cssFor("aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]");
-    expect(css).toContain('[aria-current="page"]');
-    expect(css).toContain("inset 0 0 0 1px");
-    expect(await cssFor("aria-pressed:bg-[var(--ix-sel-bg)]")).toContain('[aria-pressed="true"]');
-    expect(await cssFor("aria-checked:bg-[var(--ix-sel-bg)]")).toContain('[aria-checked="true"]');
-    expect(await cssFor("data-[state=active]:bg-[var(--ix-sel-bg)]")).toContain('[data-state="active"]');
-    expect(await cssFor("data-[highlighted]:bg-[var(--ix-sel-bg)]")).toContain("[data-highlighted]");
-  });
-});

package/src/primitives/pagination-alert.test.tsx

@@ -1,180 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import type * as React from "react";
-import { describe, expect, it, vi } from "vitest";
-import { Alert, AlertDescription, AlertTitle } from "./alert";
-import { Pagination, pageSlots } from "./pagination";
-
-const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
-
-describe("pageSlots", () => {
-  it("lists every page when they fit", () => {
-    expect(pageSlots(0, 1)).toEqual([0]);
-    expect(pageSlots(3, 7)).toEqual([0, 1, 2, 3, 4, 5, 6]);
-  });
-
-  it("keeps the same number of slots as the current page moves", () => {
-    expect(pageSlots(0, 10)).toEqual([0, 1, 2, 3, 4, "gap-end", 9]);
-    expect(pageSlots(5, 10)).toEqual([0, "gap-start", 4, 5, 6, "gap-end", 9]);
-    expect(pageSlots(9, 10)).toEqual([0, "gap-start", 5, 6, 7, 8, 9]);
-    for (let page = 0; page < 40; page++) expect(pageSlots(page, 40)).toHaveLength(7);
-  });
-
-  it("clamps a page outside the range", () => {
-    expect(pageSlots(-3, 10)).toEqual(pageSlots(0, 10));
-    expect(pageSlots(99, 10)).toEqual(pageSlots(9, 10));
-  });
-});
-
-describe("Pagination", () => {
-  it("renders nothing for a single page", () => {
-    const { container } = render(<Pagination page={0} pageCount={1} onPageChange={vi.fn()} />);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it("marks the current page and moves with previous, next and a number", async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    render(<Pagination page={4} pageCount={12} onPageChange={onPageChange} />);
-
-    expect(screen.getByRole("navigation", { name: "Pagination" })).toBeInTheDocument();
-    const current = screen.getByRole("button", { name: "Page 5" });
-    expect(current).toHaveAttribute("aria-current", "page");
-    expect(current.className).not.toMatch(PALETTE);
-
-    await user.click(screen.getByRole("button", { name: "Previous page" }));
-    await user.click(screen.getByRole("button", { name: "Next page" }));
-    await user.click(screen.getByRole("button", { name: "Page 12" }));
-    expect(onPageChange.mock.calls).toEqual([[3], [5], [11]]);
-  });
-
-  it("disables previous on the first page and next on the last", () => {
-    const { rerender } = render(<Pagination page={0} pageCount={3} onPageChange={vi.fn()} />);
-    expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
-    rerender(<Pagination page={2} pageCount={3} onPageChange={vi.fn()} />);
-    expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
-  });
-
-  it("does not report the page that is already current", async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    render(<Pagination page={1} pageCount={3} onPageChange={onPageChange} />);
-    await user.click(screen.getByRole("button", { name: "Page 2" }));
-    expect(onPageChange).not.toHaveBeenCalled();
-  });
-});
-
-describe("Pagination link mode", () => {
-  const hrefFor = (page: number) => `?page=${page + 1}`;
-
-  it("renders links to one-based URLs from zero-based pages", () => {
-    render(<Pagination page={4} pageCount={12} hrefFor={hrefFor} />);
-
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Previous page" })).toHaveAttribute("href", "?page=4");
-    expect(screen.getByRole("link", { name: "Next page" })).toHaveAttribute("href", "?page=6");
-    expect(screen.getByRole("link", { name: "Page 1" })).toHaveAttribute("href", "?page=1");
-    expect(screen.getByRole("link", { name: "Page 12" })).toHaveAttribute("href", "?page=12");
-
-    const current = screen.getByRole("link", { name: "Page 5" });
-    expect(current.tagName).toBe("A");
-    expect(current).toHaveAttribute("href", "?page=5");
-    expect(current).toHaveAttribute("aria-current", "page");
-    expect(screen.getByRole("link", { name: "Page 4" })).not.toHaveAttribute("aria-current");
-  });
-
-  it("renders a disabled previous or next as a span without an href", () => {
-    const { rerender } = render(<Pagination page={0} pageCount={3} hrefFor={hrefFor} />);
-    const previous = screen.getByRole("link", { name: "Previous page" });
-    expect(previous.tagName).toBe("SPAN");
-    expect(previous).toHaveAttribute("aria-disabled", "true");
-    expect(previous).not.toHaveAttribute("href");
-    expect(previous.className).toContain("aria-disabled:opacity-50");
-    expect(screen.getByRole("link", { name: "Next page" })).toHaveAttribute("href", "?page=2");
-
-    rerender(<Pagination page={2} pageCount={3} hrefFor={hrefFor} />);
-    const next = screen.getByRole("link", { name: "Next page" });
-    expect(next.tagName).toBe("SPAN");
-    expect(next).toHaveAttribute("aria-disabled", "true");
-    expect(next).not.toHaveAttribute("href");
-  });
-
-  it("renders each enabled control with a custom link component", () => {
-    const received: string[] = [];
-    const RouterLink = ({ href, ...props }: React.ComponentProps<"a">) => {
-      received.push(href ?? "");
-      return <a data-router-link="" href={href} {...props} />;
-    };
-    render(<Pagination page={1} pageCount={3} hrefFor={hrefFor} linkComponent={RouterLink} />);
-
-    expect(received).toEqual(["?page=1", "?page=1", "?page=2", "?page=3", "?page=3"]);
-    const current = screen.getByRole("link", { name: "Page 2" });
-    expect(current).toHaveAttribute("data-router-link");
-    expect(current).toHaveAttribute("aria-current", "page");
-  });
-
-  it("reports a plain click on another page and ignores the current page and new-tab clicks", async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    render(
-      <Pagination
-        page={1}
-        pageCount={3}
-        hrefFor={hrefFor}
-        linkComponent={({ onClick, ...props }: React.ComponentProps<"a">) => (
-          <a
-            {...props}
-            onClick={(event) => {
-              onClick?.(event);
-              event.preventDefault();
-            }}
-          />
-        )}
-        onPageChange={onPageChange}
-      />,
-    );
-
-    await user.click(screen.getByRole("link", { name: "Next page" }));
-    await user.click(screen.getByRole("link", { name: "Page 2" }));
-    await user.keyboard("{Meta>}");
-    await user.click(screen.getByRole("link", { name: "Page 1" }));
-    await user.keyboard("{/Meta}");
-    expect(onPageChange.mock.calls).toEqual([[2]]);
-  });
-
-  it("requires onPageChange or hrefFor, and a link component only with hrefFor", () => {
-    const rejected = [
-      // @ts-expect-error neither onPageChange nor hrefFor
-      () => <Pagination page={0} pageCount={2} />,
-      // @ts-expect-error linkComponent without hrefFor
-      () => <Pagination page={0} pageCount={2} onPageChange={vi.fn()} linkComponent="a" />,
-    ];
-    expect(rejected).toHaveLength(2);
-  });
-});
-
-describe("Alert", () => {
-  it("paints a tone from the matched Brand status triple", () => {
-    render(
-      <Alert tone="warning">
-        <AlertTitle>Policy is changing</AlertTitle>
-        <AlertDescription>Seats above the limit are removed next cycle.</AlertDescription>
-      </Alert>,
-    );
-    const alert = screen.getByRole("alert");
-    expect(alert.className).toContain("bg-[var(--surface-warning-bg)]");
-    expect(alert.className).toContain("text-[var(--surface-warning-text)]");
-    expect(alert.className).not.toMatch(PALETTE);
-  });
-
-  it("uses role status for quiet tones and keeps an explicit role", () => {
-    const { rerender } = render(<Alert tone="info">Saved</Alert>);
-    expect(screen.getByRole("status")).toHaveTextContent("Saved");
-    rerender(
-      <Alert tone="neutral" role="note">
-        Note
-      </Alert>,
-    );
-    expect(screen.getByRole("note")).toHaveAttribute("data-tone", "neutral");
-  });
-});

package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.test.tsx

@@ -1,165 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { beforeAll, describe, expect, it, vi } from "vitest";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "./context-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { Slider } from "./slider";
-
-const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
-
-describe("Popover", () => {
-  it("opens from its trigger on a token surface and closes on Escape", async () => {
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <PopoverTrigger>Filters</PopoverTrigger>
-        <PopoverContent>Only failed runs</PopoverContent>
-      </Popover>,
-    );
-    await user.click(screen.getByRole("button", { name: "Filters" }));
-    const content = await screen.findByRole("dialog");
-    expect(content).toHaveTextContent("Only failed runs");
-    expect(content.className).toContain("bg-card");
-    expect(content.className).not.toMatch(PALETTE);
-    await user.keyboard("{Escape}");
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-});
-
-describe("Collapsible", () => {
-  it("reports its expanded state on the trigger", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible>
-        <CollapsibleTrigger>Details</CollapsibleTrigger>
-        <CollapsibleContent>Hidden body</CollapsibleContent>
-      </Collapsible>,
-    );
-    const trigger = screen.getByRole("button", { name: "Details" });
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-    expect(screen.queryByText("Hidden body")).toBeNull();
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-    expect(screen.getByText("Hidden body")).toBeVisible();
-  });
-});
-
-describe("AlertDialog", () => {
-  it("focuses Cancel on open so a destructive action is never under Enter", async () => {
-    const user = userEvent.setup();
-    const onDelete = vi.fn();
-    render(
-      <AlertDialog>
-        <AlertDialogTrigger>Delete project</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
-          <AlertDialogDescription>Its sandboxes stop.</AlertDialogDescription>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction tone="destructive" onClick={onDelete}>
-            Delete
-          </AlertDialogAction>
-        </AlertDialogContent>
-      </AlertDialog>,
-    );
-    await user.click(screen.getByRole("button", { name: "Delete project" }));
-    const dialog = await screen.findByRole("alertdialog", { name: "Delete this project?" });
-    expect(dialog).toHaveAccessibleDescription("Its sandboxes stop.");
-    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus();
-    const action = screen.getByRole("button", { name: "Delete" });
-    expect(action.className).toContain("bg-destructive");
-    await user.click(action);
-    expect(onDelete).toHaveBeenCalledOnce();
-    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
-  });
-});
-
-describe("ContextMenu", () => {
-  it("opens on contextmenu and runs the chosen item", async () => {
-    const onRename = vi.fn();
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>File row</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onSelect={onRename}>Rename</ContextMenuItem>
-          <ContextMenuItem tone="destructive">Delete</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>,
-    );
-    fireEvent.contextMenu(screen.getByText("File row"));
-    const menu = await screen.findByRole("menu");
-    expect(menu.className).toContain("bg-card");
-    expect(screen.getByRole("menuitem", { name: "Delete" }).className).toContain("text-destructive");
-    fireEvent.click(screen.getByRole("menuitem", { name: "Rename" }));
-    expect(onRename).toHaveBeenCalledOnce();
-  });
-
-  it("portals submenu content out of the clipped parent menu", async () => {
-    const user = userEvent.setup();
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>File row</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
-            <ContextMenuSubContent>
-              <ContextMenuItem>Archive</ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-        </ContextMenuContent>
-      </ContextMenu>,
-    );
-    fireEvent.contextMenu(screen.getByText("File row"));
-    const parent = await screen.findByRole("menu");
-    await user.hover(screen.getByRole("menuitem", { name: "Move to" }));
-    await user.keyboard("{ArrowRight}");
-    const archive = await screen.findByRole("menuitem", { name: "Archive" });
-    expect(parent.contains(archive)).toBe(false);
-  });
-});
-
-describe("Slider", () => {
-  beforeAll(() => {
-    // Radix measures the thumb with ResizeObserver, which jsdom lacks.
-    globalThis.ResizeObserver ??= class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    };
-  });
-
-  it("renders one labelled thumb per value", () => {
-    render(<Slider defaultValue={[20, 80]} thumbLabels={["Minimum", "Maximum"]} />);
-    const thumbs = screen.getAllByRole("slider");
-    expect(thumbs).toHaveLength(2);
-    expect(thumbs[0]).toHaveAccessibleName("Minimum");
-    expect(thumbs[1]).toHaveAttribute("aria-valuenow", "80");
-  });
-
-  it("moves with the keyboard and reports the value", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(<Slider aria-label="Budget" defaultValue={[50]} step={10} onValueChange={onValueChange} />);
-    expect(screen.getByRole("slider")).toHaveAccessibleName("Budget");
-    screen.getByRole("slider").focus();
-    await user.keyboard("{ArrowRight}");
-    expect(onValueChange).toHaveBeenLastCalledWith([60]);
-  });
-});

package/src/primitives/radio-group.test.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Label } from "./label";
-import { RadioGroup, RadioGroupItem } from "./radio-group";
-
-afterEach(cleanup);
-
-describe("RadioGroup", () => {
-  it("chooses one item by click or arrow key and reports its value", async () => {
-    const onValueChange = vi.fn();
-    render(
-      <RadioGroup aria-label="Plan" defaultValue="basic" onValueChange={onValueChange}>
-        <div><RadioGroupItem id="basic" value="basic" /><Label htmlFor="basic">Basic</Label></div>
-        <div><RadioGroupItem id="pro" value="pro" /><Label htmlFor="pro">Pro</Label></div>
-      </RadioGroup>,
-    );
-    expect(screen.getByRole("radiogroup", { name: "Plan" })).toBeTruthy();
-    expect(screen.getByRole("radio", { name: "Basic" })).toHaveAttribute("aria-checked", "true");
-    await userEvent.click(screen.getByText("Pro"));
-    expect(onValueChange).toHaveBeenLastCalledWith("pro");
-    expect(screen.getByRole("radio", { name: "Pro" })).toHaveAttribute("aria-checked", "true");
-    expect(screen.getByRole("radio", { name: "Basic" })).toHaveAttribute("aria-checked", "false");
-  });
-});