@tangle-network/ui 11.51.7 → 11.51.9

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

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