@terpjs/react-core 0.7.0 → 0.8.0

package/src/PageActions.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
+import { injectTerpStyles } from "./styles";
 import { Menu, MenuItem } from "./ui/Menu";
 import { useStrings } from "./uiText";
 import type { UiText } from "./uiText";
 
+injectTerpStyles();
+
 export interface OverflowAction {
   /** Display label for the menu item. */
   label: UiText;
@@ -25,14 +28,6 @@ export interface PageActionsProps {
   className?: string;
 }
 
-const clusterStyle: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  gap: "var(--space-2)",
-};
-
 /** Standard right-aligned action cluster for page headers. */
 export function PageActions({ primary, secondary, overflow, className }: PageActionsProps) {
   const strings = useStrings();
@@ -43,7 +38,7 @@ export function PageActions({ primary, secondary, overflow, className }: PageAct
   }
 
   return (
-    <div className={className} style={clusterStyle}>
+    <div className={className} data-terp="page-actions">
       {hasOverflow && (
         <Menu trigger="⋯" triggerLabel={strings.moreActions}>
           {({ close }) => (

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

package/src/dataview/DataView.tsx

@@ -17,6 +17,7 @@ import { DataViewTextProvider, useDataViewText } from "./internal";
 import type {
   DataViewBatchAction,
   DataViewColumn,
+  DataViewDensity,
   DataViewQuery,
   DataViewRepository,
   DataViewRowAction,
@@ -39,6 +40,21 @@ interface DataViewBaseProps<T> {
   columns: DataViewColumn<T>[];
   /** "embedded" renders a plain compact view: no view toggle, no page-size selector, no footer. */
   variant?: "full" | "embedded";
+  /**
+   * How tightly this view packs its cells and controls (default `"comfortable"`).
+   *
+   * `"compact"` stamps `data-density="compact"` on the root, which re-scopes the live
+   * density tokens for the whole subtree — cell padding here, and the control heights
+   * `Button`, `Input` and `Select` already read, so the toolbar tightens with the table.
+   *
+   * `"comfortable"` stamps NO attribute, because comfortable IS the token sheet's
+   * `:root` value and an attribute for it would match no rule. The consequence worth
+   * knowing: inside an already-compact subtree, `density="comfortable"` does not make
+   * this view comfortable again. Expressing that needs a named comfortable copy of
+   * each live token, which ADR 0094 defers until something asks — nothing can ask
+   * until the shell takes a density of its own.
+   */
+  density?: DataViewDensity;
   enableSelection?: boolean;
   batchActions?: DataViewBatchAction<T>[];
   rowActions?: (row: T) => DataViewRowAction<T>[];
@@ -130,6 +146,13 @@ function useIsMobile(): boolean {
 function DataViewInner<T>(props: DataViewProps<T>) {
   const { strings, resolve } = useDataViewText();
   const embedded = props.variant === "embedded";
+  // Only the compact value is expressible as an attribute; see the prop's doc comment.
+  const densityAttribute = props.density === "compact" ? "compact" : undefined;
+  // Hoisted rather than written inline at the two roots, which is what the density
+  // attribute above already does and what keeps the marker scanner out of a trap: it
+  // reads a whole expression container, so every string literal inside one counts as a
+  // marker name and a conditional written at the attribute would report phantoms.
+  const variantAttribute = embedded ? "embedded" : "full";
   const serverSide = props.repository.capabilities.serverSide;
   const initialPageSize = embedded
     ? EMBEDDED_PAGE_SIZE
@@ -296,7 +319,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
       return props.renderError !== undefined ? (
         <>{props.renderError(error)}</>
       ) : (
-        <div style={{ padding: "var(--space-4)" }}>
+        <div data-terp="dataview-error">
           <ErrorState title={strings.errorTitle} error={error} />
         </div>
       );
@@ -325,7 +348,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
       );
     }
     return (
-      <div style={{ overflowX: "auto" }}>
+      <div data-terp="dataview-scroll">
         <DataViewTable
           rows={rows}
           columns={state.visibleColumns}
@@ -366,7 +389,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
       props.toolbarContent !== undefined ||
       props.toolbarTrailing !== undefined;
     return (
-      <div data-terp="dataview" style={{ display: "grid" }}>
+      <div data-terp="dataview" data-variant={variantAttribute} data-density={densityAttribute}>
         {showsEmbeddedToolbar && (
           <DataViewToolbar<T>
             searchEnabled={props.repository.capabilities.search}
@@ -401,15 +424,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
   }
 
   return (
-    <div
-      data-terp="dataview"
-      style={{
-        display: "grid",
-        background: "var(--color-neutral-0)",
-        border: "1px solid var(--color-neutral-200)",
-        borderRadius: "var(--radius-lg)",
-      }}
-    >
+    <div data-terp="dataview" data-variant={variantAttribute} data-density={densityAttribute}>
       <DataViewToolbar<T>
         searchEnabled={props.repository.capabilities.search}
         search={state.search}
@@ -458,20 +473,23 @@ function DataViewInner<T>(props: DataViewProps<T>) {
   );
 }
 
-/** Fixed-height placeholder rows so the initial load never causes a layout jump. */
+/**
+ * Fixed-height placeholder rows so the initial load never causes a layout jump.
+ *
+ * One consequence of taking those heights from the sheet is worth stating where it
+ * bites, because it is the sharpest instance of something the whole migration accepted
+ * rather than anything peculiar to this component: the style injector is guarded on
+ * `document`, so no migrated rule reaches server-rendered HTML. A server-rendered
+ * DataView emits its toolbar and this skeleton and nothing else, which makes this the
+ * one place where "no layout jump" is the entire reason the markup exists. Until
+ * hydration these five divs are now zero-height. `ssr.test.tsx` asserts the marker
+ * string only, so nothing fails — it is a trade, recorded, not an oversight.
+ */
 function DataViewSkeleton({ label }: { label: string }) {
   return (
-    <div role="status" aria-label={label} style={{ display: "grid", gap: "var(--space-2)", padding: "var(--space-3)" }}>
+    <div role="status" aria-label={label} data-terp="dataview-skeleton">
       {Array.from({ length: 5 }, (_, index) => (
-        <div
-          key={index}
-          aria-hidden
-          style={{
-            height: "2.75rem",
-            background: "var(--color-neutral-100)",
-            borderRadius: "var(--radius-md)",
-          }}
-        />
+        <div key={index} aria-hidden />
       ))}
     </div>
   );

package/src/dataview/DataViewCardList.tsx

@@ -1,7 +1,6 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import type { BadgeTone } from "../ui/Badge";
-import { toneSoftColors } from "../ui/Badge";
 import type { UiText } from "../uiText";
 
 import { DataViewExpandToggle } from "./DataViewExpandableRow";
@@ -30,18 +29,6 @@ export interface DataViewCardListProps<T> {
   rowActions?: (row: T) => DataViewRowAction<T>[];
 }
 
-const recordButtonStyle: CSSProperties = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-};
-
 function slotValue<T>(
   columns: DataViewColumn<T>[],
   row: T,
@@ -68,7 +55,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
   const { strings, resolve, format } = useDataViewText();
 
   return (
-    <ul style={{ listStyle: "none", margin: 0, padding: "var(--space-2)", display: "grid", gap: "var(--space-2)" }}>
+    <ul data-terp="dataview-card-list">
       {props.rows.map((row) => {
         const rowId = props.getRowId(row);
         const expanded = props.isExpanded(rowId);
@@ -78,18 +65,9 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
           <li key={rowId}>
             <div
               onClick={clickable ? () => props.onRowClick?.(row) : undefined}
-              data-terp={clickable ? "dataview-card" : undefined}
+              data-terp="dataview-card"
+              data-clickable={clickable || undefined}
               data-tone={tone ?? undefined}
-              style={{
-                display: "grid",
-                gap: "var(--space-2)",
-                padding: "var(--space-3)",
-                background: tone !== null ? toneSoftColors[tone] : "var(--color-neutral-0)",
-                border: "1px solid var(--color-neutral-200)",
-                borderRadius: "var(--radius-lg)",
-                boxShadow: "var(--shadow-sm)",
-                cursor: clickable ? "pointer" : undefined,
-              }}
             >
               {clickable && (
                 <button
@@ -102,10 +80,9 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                     event.stopPropagation();
                     props.onRowClick?.(row);
                   }}
-                  style={recordButtonStyle}
                 />
               )}
-              <div style={{ display: "flex", alignItems: "flex-start", gap: "var(--space-2)" }}>
+              <div data-terp="dataview-card-main">
                 {props.renderExpanded !== undefined && (
                   <DataViewExpandToggle
                     expanded={expanded}
@@ -113,7 +90,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                   />
                 )}
                 {props.selectionEnabled && (
-                  <span onClick={(event) => event.stopPropagation()} style={{ display: "inline-flex" }}>
+                  <span onClick={(event) => event.stopPropagation()}>
                     <input
                       type="checkbox"
                       aria-label={resolve(strings.selectRow)}
@@ -122,7 +99,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                     />
                   </span>
                 )}
-                <div style={{ flex: 1, minWidth: 0 }}>
+                <div data-terp="dataview-card-body">
                   {props.renderCard !== undefined ? (
                     props.renderCard(row)
                   ) : (
@@ -139,12 +116,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                 )}
               </div>
               {expanded && props.renderExpanded !== undefined && (
-                <div
-                  style={{
-                    borderTop: "1px solid var(--color-neutral-200)",
-                    paddingTop: "var(--space-2)",
-                  }}
-                >
+                <div data-terp="dataview-card-expanded">
                   {props.renderExpanded(row)}
                 </div>
               )}
@@ -162,33 +134,15 @@ function DefaultCardBody<T>({ row, columns }: { row: T; columns: DataViewColumn<
   const status = slotValue(columns, row, "status");
   const date = slotValue(columns, row, "date");
   return (
-    <div style={{ display: "grid", gap: "var(--space-1)" }}>
-      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", flexWrap: "wrap" }}>
-        <span style={{ fontWeight: "var(--font-weight-medium)" as never }}>{title}</span>
+    <div data-terp="dataview-card-fields">
+      <div data-terp="dataview-card-heading">
+        <span data-terp="dataview-card-title">{title}</span>
         {status !== null && (
-          <span
-            style={{
-              fontSize: "var(--font-size-sm)",
-              padding: "0 var(--space-2)",
-              background: "var(--color-neutral-100)",
-              borderRadius: "var(--radius-full)",
-              color: "var(--color-neutral-700)",
-            }}
-          >
-            {status}
-          </span>
+          <span data-terp="dataview-card-status">{status}</span>
         )}
       </div>
-      {subtitle !== null && (
-        <span style={{ fontSize: "var(--font-size-sm)", color: "var(--color-neutral-500)" }}>
-          {subtitle}
-        </span>
-      )}
-      {date !== null && (
-        <span style={{ fontSize: "var(--font-size-sm)", color: "var(--color-neutral-500)" }}>
-          {date}
-        </span>
-      )}
+      {subtitle !== null && <span data-terp="dataview-card-meta">{subtitle}</span>}
+      {date !== null && <span data-terp="dataview-card-meta">{date}</span>}
     </div>
   );
 }