@terpjs/react-core 0.7.0 → 0.9.0

package/src/ProfileView.tsx

@@ -1,5 +1,3 @@
-import type { CSSProperties } from "react";
-
 import { Page } from "./Page";
 import { useAuth } from "./TerpProvider";
 import { LanguageSwitcher } from "./locale";
@@ -9,38 +7,15 @@ import { userInitials } from "./UserMenu";
 import { Button } from "./ui/Button";
 import { useStrings } from "./uiText";
 
-const avatarStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "3.5rem",
-  height: "3.5rem",
-  flexShrink: 0,
-  borderRadius: "var(--radius-full)",
-  background: "var(--color-brand-primary)",
-  color: "var(--color-brand-primary-contrast)",
-  fontSize: "var(--font-size-lg)",
-  fontWeight: "var(--font-weight-medium)" as CSSProperties["fontWeight"],
-};
-
-const mutedStyle: CSSProperties = { margin: 0, color: "var(--color-neutral-600)" };
-
-const cardStyle: CSSProperties = {
-  display: "grid",
-  gap: "var(--space-4)",
-  padding: "var(--space-4)",
-  maxWidth: "32rem",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-};
-
 /**
  * The built-in profile / settings page the {@link UserMenu}'s Settings item opens.
  * `buildAppRouter` mounts it at `/profile` in every app (an app manifest claiming
  * that path wins): the signed-in identity (avatar, email, role — the server-validated
  * `/me` session, not token claims), the standard theme + language preferences, and
  * sign-out. A `Page` archetype, so it satisfies the routed-view frame control.
+ *
+ * It renders no inline styles: both cards, the avatar tile and the two identity lines take
+ * their geometry and ink from the injected react-core sheet (ADR 0094).
  */
 export function ProfileView() {
   const auth = useAuth();
@@ -52,14 +27,14 @@ export function ProfileView() {
   return (
     <Page title={strings.profile}>
       <Stack gap={4}>
-        <div style={cardStyle}>
+        <div data-terp="profile-card">
           <Stack direction="row" gap={3} align="center">
-            <span aria-hidden="true" style={avatarStyle}>
+            <span aria-hidden="true" data-terp="profile-avatar">
               {userInitials(user.email)}
             </span>
             <Stack gap={0}>
-              <strong style={{ overflowWrap: "anywhere" }}>{user.email}</strong>
-              <p style={mutedStyle}>{user.role_name}</p>
+              <strong data-terp="profile-email">{user.email}</strong>
+              <p data-terp="profile-role">{user.role_name}</p>
             </Stack>
           </Stack>
           <DetailList
@@ -69,7 +44,7 @@ export function ProfileView() {
             ]}
           />
         </div>
-        <div style={cardStyle}>
+        <div data-terp="profile-card">
           <ThemeToggle />
           <LanguageSwitcher />
           <div>

package/src/ResourceList.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { CSSProperties, FormEvent, ReactNode } from "react";
+import type { FormEvent, ReactNode } from "react";
 
 import { Authorized } from "./Authorized";
 import { useErrorMessage } from "./errorMessages";
@@ -9,19 +9,6 @@ import { Button } from "./ui/Button";
 import { Input } from "./ui/Input";
 import type { Resource } from "./useResource";
 
-const rowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "var(--space-3)",
-  padding: "var(--space-3)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-md)",
-  background: "var(--color-neutral-0)",
-};
-
-const mutedStyle: CSSProperties = { color: "var(--color-neutral-600)" };
-
 export interface ResourceListProps<T extends { id: string }> {
   /** Section heading; omit when composed under a `Page` (whose title is the `h1`). */
   title?: UiText;
@@ -52,6 +39,10 @@ export interface ResourceListProps<T extends { id: string }> {
  *
  * It is a composable component, not a hidden CRUD DSL: a screen that needs more just renders its own
  * React and ignores this.
+ *
+ * It renders no inline styles: the section, the create row, both messages, the list and the
+ * rows take their geometry and ink from the injected react-core sheet, matched on the
+ * `data-terp` markers stamped below (ADR 0094).
  */
 export function ResourceList<T extends { id: string }>({
   title,
@@ -81,37 +72,35 @@ export function ResourceList<T extends { id: string }>({
   }
 
   return (
-    <section
-      data-terp="resource-list"
-      style={{ display: "grid", gap: "var(--space-4)", maxWidth: "40rem" }}
-    >
+    <section data-terp="resource-list">
       {title !== undefined && <h1>{resolve(title)}</h1>}
       {renderCreate !== undefined ? (
         <Authorized action="write">{renderCreate()}</Authorized>
       ) : createPlaceholder !== undefined ? (
         <Authorized action="write">
-          <form onSubmit={onCreate} style={{ display: "flex", gap: "var(--space-2)" }}>
+          <form onSubmit={onCreate} data-terp="resource-list-create">
             <Input
               placeholder={resolve(createPlaceholder ?? "")}
               value={draft}
               onChange={(event) => setDraft(event.target.value)}
-              style={{ flex: 1 }}
             />
             <Button type="submit">{strings.add}</Button>
           </form>
         </Authorized>
       ) : null}
       {resource.error !== null && (
-        <p role="alert" style={{ color: "var(--color-status-danger)" }}>
+        <p role="alert" data-terp="resource-list-error">
           {messageForCode(resource.cause) ?? resource.error}
         </p>
       )}
       {resource.items.length === 0 ? (
-        <p style={mutedStyle}>{resource.loading ? strings.loading : resolve(emptyMessage ?? strings.emptyList)}</p>
+        <p data-terp="resource-list-empty">
+          {resource.loading ? strings.loading : resolve(emptyMessage ?? strings.emptyList)}
+        </p>
       ) : (
-        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: "var(--space-2)" }}>
+        <ul data-terp="resource-list-items">
           {resource.items.map((item) => (
-            <li key={item.id} style={rowStyle}>
+            <li key={item.id} data-terp="resource-list-row">
               <div>{renderItem(item)}</div>
               {renderActions && <Authorized action="write">{renderActions(item)}</Authorized>}
             </li>

package/src/UserMenu.test.tsx

@@ -121,13 +121,20 @@ describe("UserMenu", () => {
     const trigger = await screen.findByRole("button", { name: "Account menu" });
     expect(screen.getByText("JD")).toBeInTheDocument();
     expect(screen.queryByText("jane.doe@example.com")).not.toBeInTheDocument();
-    expect(trigger.style.width).toBe("100%");
-    expect(trigger.style.boxSizing).toBe("border-box");
-    expect(trigger.style.justifyContent).toBe("center");
-    expect(trigger.style.padding).toBe("0px");
-    // The identity still surfaces inside the opened panel.
+    // The collapsed geometry is a sheet rule now (ADR 0094), so what this asserts is the
+    // attribute the rule keys on and the absence of the inline object it replaced. The
+    // variant sits on the component's ROOT rather than on the trigger, because the root is
+    // what UserMenu names — the trigger is reached by descending from it.
+    const root = trigger.closest('[data-terp="user-menu"]');
+    expect(root).not.toBeNull();
+    expect(root).toHaveAttribute("data-variant", "collapsed");
+    expect(trigger).toHaveAttribute("data-terp", "menu-trigger");
+    expect(trigger.getAttribute("style")).toBeNull();
+    // The identity still surfaces inside the opened panel, whose geometry is keyed on the
+    // owner attribute — the panel is portalled out, so nothing else could reach it.
     fireEvent.click(trigger);
     expect(screen.getByText("jane.doe@example.com")).toBeInTheDocument();
+    expect(screen.getByRole("menu").parentElement).toHaveAttribute("data-owner", "user-menu");
   });
 
   it("signs out via the menu (revokes the token server-side)", async () => {

package/src/UserMenu.tsx

@@ -1,11 +1,11 @@
-import type { CSSProperties } from "react";
-
 import { Icon } from "./icons";
+import { injectTerpStyles } from "./styles";
 import { useAuth } from "./TerpProvider";
 import { Menu, MenuItem } from "./ui/Menu";
-import { CONTROL_TEXT_STYLE } from "./ui/controlStyles";
 import { useStrings } from "./uiText";
 
+injectTerpStyles();
+
 /** Initials for the avatar: the first letters of the email's local-part words. */
 export function userInitials(email: string): string {
   const local = email.split("@")[0] ?? "";
@@ -14,65 +14,22 @@ export function userInitials(email: string): string {
   return initials.join("") || "?";
 }
 
-const triggerStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  gap: "var(--space-2)",
-  width: "100%",
-  boxSizing: "border-box",
-  padding: "var(--space-2)",
-  textAlign: "left",
-  color: "var(--color-neutral-900)",
-  background: "transparent",
-  border: "1px solid transparent",
-  borderRadius: "var(--radius-md)",
-  cursor: "pointer",
-};
-
-const collapsedTriggerStyle: CSSProperties = {
-  justifyContent: "center",
-  gap: 0,
-  padding: 0,
-};
-
-const avatarStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "2rem",
-  height: "2rem",
-  flexShrink: 0,
-  borderRadius: "var(--radius-full)",
-  background: "var(--color-brand-primary)",
-  color: "var(--color-brand-primary-contrast)",
-  fontSize: "var(--font-size-sm)",
-  fontWeight: "var(--font-weight-medium)" as CSSProperties["fontWeight"],
-};
-
-const identityStyle: CSSProperties = { display: "grid", minWidth: 0, fontSize: "var(--font-size-sm)" };
-const emailStyle: CSSProperties = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" };
-const roleStyle: CSSProperties = { color: "var(--color-neutral-600)" };
-const panelIdentityStyle: CSSProperties = {
-  display: "grid",
-  gap: "var(--space-1)",
-  padding: "var(--space-2)",
-  marginBottom: "var(--space-1)",
-  borderBottom: "1px solid var(--color-neutral-200)",
-  fontSize: "var(--font-size-sm)",
-  overflowWrap: "anywhere",
-};
-
 export interface UserMenuProps {
   /** Icon-rail mode: show only the avatar on the trigger (the shell's collapsed state). */
   collapsed?: boolean;
   /** Opens the settings / profile page; rendered as the menu's first item when provided. */
   onSettings?: () => void;
+  /**
+   * Open the panel on mount (uncontrolled), the shape every other disclosure in the package
+   * takes. It is also the only way to render the panel deterministically, and the panel is
+   * where this component's own geometry lives — so without it those rules ship unpainted by
+   * either visual lane, which is the state the calendar was in for two stages.
+   */
+  defaultOpen?: boolean;
 }
 
 /** The signed-in user's account menu. */
-export function UserMenu({ collapsed = false, onSettings }: UserMenuProps = {}) {
+export function UserMenu({ collapsed = false, onSettings, defaultOpen }: UserMenuProps = {}) {
   const auth = useAuth();
   const strings = useStrings();
   const user = auth.currentUser();
@@ -82,11 +39,11 @@ export function UserMenu({ collapsed = false, onSettings }: UserMenuProps = {})
 
   const trigger = (
     <>
-      <span aria-hidden="true" style={avatarStyle}>{userInitials(user.email)}</span>
+      <span aria-hidden="true" data-terp="user-menu-avatar">{userInitials(user.email)}</span>
       {!collapsed && (
-        <span style={identityStyle}>
-          <span style={emailStyle}>{user.email}</span>
-          <span style={roleStyle}>{user.role_name}</span>
+        <span data-terp="user-menu-identity">
+          <span data-terp="user-menu-email">{user.email}</span>
+          <span data-terp="user-menu-role">{user.role_name}</span>
         </span>
       )}
     </>
@@ -98,14 +55,28 @@ export function UserMenu({ collapsed = false, onSettings }: UserMenuProps = {})
       triggerLabel={strings.accountMenu}
       placement="top"
       align="start"
-      triggerStyle={collapsed ? { ...triggerStyle, ...collapsedTriggerStyle } : triggerStyle}
-      panelStyle={{ minWidth: "14rem", padding: "var(--space-2)" }}
+      defaultOpen={defaultOpen}
+      // This component's rendered root is Menu's popover wrapper — it adds no element of its
+      // own — so it names that root through Menu. The icon-rail mode is a variant of the same
+      // component rather than a different one, so it is data-variant on the same marker; and
+      // the trigger and the panel are then reachable from the sheet, which is what let both
+      // `triggerStyle` and `panelStyle` be deleted. The panel needs the owner attribute
+      // Popover stamps for it: it is portalled to document.body, so no descendant selector
+      // from this side of the tree could ever reach it.
+      data-terp="user-menu"
+      data-variant={collapsed ? "collapsed" : undefined}
+      data-owner="user-menu"
     >
       {({ close }) => (
         <>
-          <div style={panelIdentityStyle}>
+          {/* role="group": a role="menu" may own only menuitem / menuitemradio /
+              menuitemcheckbox / group / separator, and this identity block is a plain div —
+              so in menu mode assistive tech had no valid reason to reach it. A group needs no
+              accessible name to be valid and has no default presentation, so this is an ARIA
+              correction with no visual and no new UI string. */}
+          <div role="group" data-terp="user-menu-header">
             <span>{user.email}</span>
-            <span style={roleStyle}>{user.role_name}</span>
+            <span data-terp="user-menu-role">{user.role_name}</span>
           </div>
           {onSettings !== undefined && (
             <MenuItem

package/src/admin/AuditLogAdmin.tsx

@@ -46,15 +46,6 @@ function buildColumns(strings: TerpStrings): DataViewColumn<AuditEventRead>[] {
   ];
 }
 
-const payloadStyle = {
-  margin: 0,
-  padding: "var(--space-3)",
-  background: "var(--color-neutral-100)",
-  borderRadius: "var(--radius-md)",
-  fontSize: "var(--font-size-sm, 0.875rem)",
-  overflowX: "auto" as const,
-};
-
 /**
  * The packaged audit-log screen (`/admin/audit`): the append-only trail every
  * mutation lands in (ADR 0007), newest first as served, read-only by design.
@@ -106,7 +97,7 @@ export function AuditLogAdmin() {
               ]}
             />
             {event.payload !== null && (
-              <pre style={payloadStyle}>{JSON.stringify(event.payload, null, 2)}</pre>
+              <pre data-terp="admin-payload">{JSON.stringify(event.payload, null, 2)}</pre>
             )}
           </div>
         )}

package/src/admin/GroupCreate.tsx

@@ -75,7 +75,7 @@ export function GroupCreate() {
         />
       }
     >
-      <div style={{ maxWidth: "32rem" }}>
+      <div data-terp="admin-form">
         <Stack id={FORM_ID} as="form" gap={4} onSubmit={onSubmit}>
           <Field label={strings.groupName}>
             <Input value={name} onChange={(event) => setName(event.target.value)} required />

package/src/admin/GroupDetail.tsx

@@ -339,7 +339,7 @@ export function GroupDetail() {
           />
         )}
         <Stack gap={3}>
-          <h2 style={{ margin: 0, fontSize: "var(--font-size-base)" }}>
+          <h2 data-terp="admin-section-title">
             {strings.members}
           </h2>
           <Stack as="form" direction="row" gap={2} align="end" wrap onSubmit={onAddMember}>
@@ -376,7 +376,7 @@ export function GroupDetail() {
           />
         </Stack>
         <Stack gap={3}>
-          <h2 style={{ margin: 0, fontSize: "var(--font-size-base)" }}>
+          <h2 data-terp="admin-section-title">
             {strings.permissions}
           </h2>
           <Stack as="form" direction="row" gap={2} align="end" wrap onSubmit={onGrant}>

package/src/admin/UserCreate.tsx

@@ -81,7 +81,7 @@ export function UserCreate() {
         />
       }
     >
-      <div style={{ maxWidth: "32rem" }}>
+      <div data-terp="admin-form">
         <Stack id={FORM_ID} as="form" gap={4} onSubmit={onSubmit}>
           <Field label={strings.email}>
             <Input

package/src/admin/admin.test.tsx

@@ -418,6 +418,15 @@ describe("the packaged admin area", () => {
     fireEvent.click(screen.getByRole("button", { name: "Provision user" }));
     await screen.findByRole("heading", { level: 1, name: "Provision user" });
 
+    // The form's measure is a sheet rule now (ADR 0094), and this is the only gate on it:
+    // no admin screen has a specimen, so nothing pictures these three surfaces. What a test
+    // can hold is that the marked element is there and styles nothing itself; that the rule
+    // exists is held by styles.test.ts, and its values are a verbatim copy of the object
+    // this replaced.
+    const form = document.querySelector('[data-terp="admin-form"]');
+    expect(form).not.toBeNull();
+    expect(form?.getAttribute("style")).toBeNull();
+
     fireEvent.change(screen.getByLabelText("Email"), {
       target: { value: "new.account@example.com" },
     });
@@ -510,6 +519,28 @@ describe("the packaged admin area", () => {
     );
   });
 
+  it("marks the detail sections it no longer styles inline", async () => {
+    // The second of the three surfaces the admin views used to style at the call site. Same
+    // reasoning as the create form above: markers plus the absence of a style attribute,
+    // because no admin screen has a specimen.
+    //
+    // The third, the audit payload, has no assertion here and it is worth saying why rather
+    // than quietly having none: the audit fixture serves an empty page, so no row exists to
+    // expand and the <pre> never renders in any test. Giving it one means adding rows to a
+    // fixture several tests share, which is not a change a styling migration should make.
+    // It is held by styles.test.ts (the rule exists) and by the values being a verbatim copy.
+    renderAdminApp("/admin/groups/g1");
+    const headings = await waitFor(() => {
+      const found = document.querySelectorAll('[data-terp="admin-section-title"]');
+      expect(found.length).toBe(2);
+      return found;
+    });
+    for (const heading of headings) {
+      expect(heading.tagName).toBe("H2");
+      expect(heading.getAttribute("style")).toBeNull();
+    }
+  });
+
   it("clears group destructive state when navigating between detail records in place", async () => {
     const { router } = renderAdminApp("/admin/groups/g1");
     await screen.findByRole("heading", { level: 1, name: "Finance" });

package/src/dataview/DataView.test.tsx

@@ -83,6 +83,32 @@ describe("DataView states", () => {
     const untinted = screen.getByText("Broken printer").closest("tr");
     expect(untinted).not.toHaveAttribute("data-tone");
   });
+
+  it("claims data-clickable only when a row click is wired up", async () => {
+    // The other half of a sheet rule no visual lane can see. The row marker is stamped
+    // unconditionally — it has to be, or a toned row that is not clickable carries data-tone on
+    // an element no selector reaches — so what separates a row Enter will open from a row that
+    // merely contains a focusable checkbox is this attribute alone. The sheet's focus-within
+    // tint is keyed on it, and styles.test.ts pins that end.
+    const { unmount } = render(
+      <DataView repository={inMemoryRepo()} columns={COLUMNS} enableSelection />,
+    );
+    const inert = (await screen.findByText("VPN access")).closest("tr");
+    expect(inert).toHaveAttribute("data-terp", "dataview-row");
+    expect(inert).not.toHaveAttribute("data-clickable");
+    unmount();
+
+    render(
+      <DataView
+        repository={inMemoryRepo()}
+        columns={COLUMNS}
+        getRowLabel={(t) => t.title}
+        onRowClick={() => {}}
+      />,
+    );
+    const clickable = (await screen.findByText("VPN access")).closest("tr");
+    expect(clickable).toHaveAttribute("data-clickable", "true");
+  });
 });
 
 describe("DataView server-side mode", () => {
@@ -365,20 +391,40 @@ describe("DataView search and view options", () => {
     expect(await screen.findByText("Broken printer")).toBeInTheDocument();
   });
 
-  it("hides and reorders columns from the view-options menu", async () => {
+  it("hides and reorders columns from the view-options panel", async () => {
     render(<DataView repository={inMemoryRepo()} columns={COLUMNS} />);
     await screen.findByText("Broken printer");
 
     fireEvent.click(screen.getByRole("button", { name: "View options" }));
-    const menu = screen.getByRole("menu");
-    fireEvent.click(within(menu).getByRole("checkbox", { name: "Status" }));
+    // A group labelled by its own heading, not a menu. That is the fix for a critical
+    // aria-required-children violation: role="menu" may own only menuitem-family children,
+    // and this panel's content is a heading plus labelled checkboxes plus paired reorder
+    // buttons — a form. The guard below is the regression test for it, because the violation
+    // was invisible for as long as nothing rendered the panel open.
+    const panel = screen.getByRole("group", { name: "Columns" });
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    fireEvent.click(within(panel).getByRole("checkbox", { name: "Status" }));
     expect(screen.queryByRole("columnheader", { name: /Status/ })).not.toBeInTheDocument();
 
-    fireEvent.click(within(menu).getByRole("checkbox", { name: "Status" }));
-    fireEvent.click(within(menu).getByRole("button", { name: "Move up: Status" }));
+    fireEvent.click(within(panel).getByRole("checkbox", { name: "Status" }));
+    fireEvent.click(within(panel).getByRole("button", { name: "Move up: Status" }));
     const headers = screen.getAllByRole("columnheader").map((th) => th.textContent);
     expect(headers[0]).toContain("Status");
   });
+
+  it("names the view-options trigger from its visible label, not an override", async () => {
+    // The trigger used to take its accessible name from an aria-label the menu primitive
+    // applied, which is the shape that hides a visible label from assistive tech when the two
+    // drift. It is now named by its own content, so the announced name IS the rendered one.
+    render(<DataView repository={inMemoryRepo()} columns={COLUMNS} />);
+    await screen.findByText("Broken printer");
+    const trigger = screen.getByRole("button", { name: "View options" });
+    expect(trigger).not.toHaveAttribute("aria-label");
+    expect(trigger).toHaveTextContent("View options");
+    // A disclosure, so this is the whole contract: expanded state plus the panel it controls.
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).not.toHaveAttribute("aria-haspopup");
+  });
 });
 
 describe("DataView embedded variant", () => {
@@ -404,3 +450,61 @@ describe("DataView embedded variant", () => {
     expect(document.querySelector('[data-terp="dataview-toolbar"]')).not.toBeInTheDocument();
   });
 });
+
+describe("DataView search scope", () => {
+  // Nothing rendered this branch before the search-scope specimen existed: the control is
+  // behind `search.trim() !== ""`, and every other test and specimen starts with an empty box.
+  // That is how a control shipped announcing itself as a toggle button whose state is also its
+  // label.
+  const scopedRepo = (): DataViewRepository<Ticket> => ({
+    query: async () => ({ rows: TICKETS, totalCount: TICKETS.length }),
+    getRowId: (ticket) => ticket.id,
+    capabilities: { serverSide: true, search: true, searchScope: true },
+  });
+
+  it("swaps the label rather than claiming to be a toggle button", async () => {
+    const onBroadenedChange = vi.fn();
+    const { rerender } = render(
+      <DataView
+        repository={scopedRepo()}
+        columns={COLUMNS}
+        searchScope={{
+          broadened: false,
+          onBroadenedChange,
+          label: "Search everything",
+          broadenedLabel: "Searching everything",
+        }}
+      />,
+    );
+    await screen.findByText("Broken printer");
+    // The control needs a search term, so type one.
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "printer" } });
+    const narrow = await screen.findByRole("button", { name: "Search everything" });
+    // The state is the label. Encoding it a second time in aria-pressed announces it twice
+    // and lets the two disagree, because both labels are caller-supplied.
+    expect(narrow).not.toHaveAttribute("aria-pressed");
+    fireEvent.click(narrow);
+    expect(onBroadenedChange).toHaveBeenCalledWith(true);
+
+    rerender(
+      <DataView
+        repository={scopedRepo()}
+        columns={COLUMNS}
+        searchScope={{
+          broadened: true,
+          onBroadenedChange,
+          label: "Search everything",
+          broadenedLabel: "Searching everything",
+        }}
+      />,
+    );
+    const broad = await screen.findByRole("button", { name: "Searching everything" });
+    expect(broad).not.toHaveAttribute("aria-pressed");
+    // And the attribute is now this component's alone on the two layout toggles, which is the
+    // enumeration the shared icon-button hover guard is safe by.
+    expect(document.querySelectorAll("[aria-pressed]")).toHaveLength(2);
+    for (const toggle of document.querySelectorAll("[aria-pressed]")) {
+      expect(toggle.getAttribute("data-terp")).toBe("iconbutton");
+    }
+  });
+});