@terpjs/react-core 0.7.0 → 0.9.0

package/src/theme.tsx

@@ -135,8 +135,29 @@ export function ThemeToggle({ variant = "stacked" }: ThemeToggleProps) {
     contrast: strings.themeContrast,
     system: strings.themeSystem,
   };
+  // Hoisted out of the attribute rather than inlined as `variant === "inline"`, and not for
+  // readability: the marker inventory scanner reads every string literal inside a
+  // `data-terp={…}` expression as a marker, so the comparison's own "inline" was picked up as
+  // a component marker that nothing styles. Keep marker expressions to marker literals.
+  const isInline = variant === "inline";
   const menu = (
     <Menu
+      // The rendered root of the inline variant IS this Menu's popover wrapper — the
+      // component adds no element of its own — so the marker has to travel through Menu to
+      // land there. Both variants wear the same name because they are the same component;
+      // data-variant is what tells them apart.
+      // Claim the root ONLY when this Menu is the root, which is the inline variant. The
+      // stacked variant renders its own div and puts the menu inside it, so stamping the
+      // same marker unconditionally put it on BOTH elements — and the inner wrapper then
+      // matched the stacked grid rule instead of the popover wrapper's geometry. The
+      // baselines did not catch that: a one-child grid and a one-child inline-flex box
+      // shrink-wrap to the same pixels, so it was wrong and invisible at the same time.
+      data-terp={isInline ? "theme-toggle" : undefined}
+      data-variant={isInline ? "inline" : undefined}
+      // Unconditional, unlike the root marker: the panel is the same panel in both variants, so
+      // a rule for it must reach both. Deriving the owner from the conditional root marker made
+      // this panel "theme-toggle" when inline and "popover" when stacked.
+      data-owner="theme-toggle"
       trigger={<Icon name={THEME_ICONS[context.theme]} size="1.15rem" />}
       triggerLabel={strings.theme}
     >
@@ -158,12 +179,12 @@ export function ThemeToggle({ variant = "stacked" }: ThemeToggleProps) {
       )}
     </Menu>
   );
-  if (variant === "inline") {
+  if (isInline) {
     return menu;
   }
   return (
-    <div style={{ display: "grid", justifyItems: "start", gap: "var(--space-1)", fontSize: "var(--font-size-sm)" }}>
-      <span style={{ color: "var(--color-neutral-600)" }}>{strings.theme}</span>
+    <div data-terp="theme-toggle" data-variant="stacked">
+      <span data-terp="theme-toggle-label">{strings.theme}</span>
       {menu}
     </div>
   );

package/src/toast.tsx

@@ -1,10 +1,13 @@
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Icon } from "./icons";
+import { injectTerpStyles } from "./styles";
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
 
+injectTerpStyles();
+
 export type ToastVariant = "success" | "error" | "warning";
 
 export interface ToastOptions {
@@ -36,65 +39,30 @@ const ToastContext = createContext<ToastApi | null>(null);
 
 const DEFAULT_DURATION_MS = 5000;
 
-const viewportStyle: CSSProperties = {
-  position: "fixed",
-  bottom: "var(--space-4)",
-  right: "var(--space-4)",
-  display: "grid",
-  gap: "var(--space-2)",
-  zIndex: 100,
-  maxWidth: "min(22.5rem, calc(100vw - 2 * var(--space-4)))",
-};
-
-const toastStyle = (variant: ToastVariant): CSSProperties => ({
-  display: "grid",
-  gridTemplateColumns: "auto 1fr auto",
-  alignItems: "start",
-  gap: "var(--space-2)",
-  padding: "var(--space-3) var(--space-4)",
-  borderRadius: "var(--radius-md)",
-  border: `1px solid ${borderColor[variant]}`,
-  borderInlineStart: `3px solid ${titleColor[variant]}`,
-  background: "var(--color-neutral-0)",
-  color: "var(--color-neutral-900)",
-  fontSize: "var(--font-size-sm)",
-  boxShadow: "var(--shadow-md)",
-});
-
-const titleColor: Record<ToastVariant, string> = {
-  success: "var(--color-status-success)",
-  error: "var(--color-status-danger)",
-  warning: "var(--color-status-warning)",
-};
-
-const borderColor: Record<ToastVariant, string> = {
-  success: "var(--color-status-success-soft)",
-  error: "var(--color-status-danger-soft)",
-  warning: "var(--color-status-warning-soft)",
-};
-
 const iconName: Record<ToastVariant, string> = {
   success: "check",
   error: "x",
   warning: "bell",
 };
 
-const iconWrapStyle = (variant: ToastVariant): CSSProperties => ({
-  color: titleColor[variant],
-  display: "inline-flex",
-  alignItems: "center",
-  paddingTop: "2px",
-});
-
-const dismissStyle: CSSProperties = {
-  border: "none",
-  background: "none",
-  padding: "var(--space-1)",
-  cursor: "pointer",
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-base)",
-  lineHeight: 1,
-  borderRadius: "var(--radius-sm)",
+/**
+ * The `data-tone` value each variant paints as.
+ *
+ * `data-tone` rather than `data-variant`, because a toast's success/error/warning IS a status
+ * tone and `Badge` and `Alert` already key theirs that way — an app restyling one tone should
+ * not have to learn two attribute names for the same idea. The one translation is `error` to
+ * `danger`: the shared tone vocabulary is {neutral, info, success, warning, danger}, and
+ * admitting a fourth synonym to it would mean `[data-terp="toast"][data-tone="danger"]`
+ * silently matching nothing for someone who reasoned by analogy from the alert. The mapping is
+ * not new indirection either — the component already resolved `error` to
+ * `--color-status-danger` for its colours; this states it once instead.
+ *
+ * `toast.error()` is unchanged: the method name is the API, and this is the DOM.
+ */
+const toneOf: Record<ToastVariant, string> = {
+  success: "success",
+  error: "danger",
+  warning: "warning",
 };
 
 function ToastCard({ toast, onDismiss }: { toast: ToastItem; onDismiss: () => void }) {
@@ -106,30 +74,26 @@ function ToastCard({ toast, onDismiss }: { toast: ToastItem; onDismiss: () => vo
     warning: strings.warningTitle,
   };
   return (
-    <div role={toast.variant === "success" ? "status" : "alert"} style={toastStyle(toast.variant)}>
-      <span aria-hidden="true" style={iconWrapStyle(toast.variant)}>
+    <div
+      role={toast.variant === "success" ? "status" : "alert"}
+      data-terp="toast"
+      data-tone={toneOf[toast.variant]}
+    >
+      <span aria-hidden="true" data-terp="toast-icon">
         <Icon name={iconName[toast.variant]} size="1.1rem" />
       </span>
-      <div style={{ display: "grid", gap: "var(--space-1)" }}>
-        <strong
-          style={{
-            color: titleColor[toast.variant],
-            fontWeight: "var(--font-weight-semibold)" as never,
-          }}
-        >
+      <div data-terp="toast-body">
+        <strong data-terp="toast-title">
           {resolve(toast.title ?? defaultTitle[toast.variant])}
         </strong>
         {toast.description !== null && toast.description !== undefined && (
           <div>{toast.description}</div>
         )}
       </div>
-      <button
-        type="button"
-        data-terp="iconbutton"
-        aria-label={strings.dismiss}
-        style={dismissStyle}
-        onClick={onDismiss}
-      >
+      {/* Keeps the shared iconbutton marker and is addressed structurally, the way the
+          combobox's clear button and the calendar's month arrows are: it is an icon button,
+          and the only thing distinguishing it is where it sits. */}
+      <button type="button" data-terp="iconbutton" aria-label={strings.dismiss} onClick={onDismiss}>
         ×
       </button>
     </div>
@@ -189,7 +153,7 @@ export function ToastProvider({ children }: ToastProviderProps) {
     <ToastContext.Provider value={api}>
       {children}
       {toasts.length > 0 && (
-        <div style={viewportStyle}>
+        <div data-terp="toast-viewport">
           {toasts.map((toast) => (
             <ToastCard key={toast.id} toast={toast} onDismiss={() => dismiss(toast.id)} />
           ))}

package/src/ui/Alert.test.tsx

@@ -16,4 +16,16 @@ describe("Alert", () => {
     render(<Alert tone="danger">Delete failed.</Alert>);
     expect(screen.getByRole("alert")).toHaveTextContent("Delete failed.");
   });
+
+  it("names its tone on the banner, which is what paints the frame and the glyph", () => {
+    render(<Alert tone="warning">Check the mapping.</Alert>);
+    const banner = screen.getByRole("alert");
+    expect(banner).toHaveAttribute("data-tone", "warning");
+    expect(banner.getAttribute("style")).toBeNull();
+  });
+
+  it("defaults to the info tone", () => {
+    render(<Alert>Nothing to do.</Alert>);
+    expect(screen.getByRole("status")).toHaveAttribute("data-tone", "info");
+  });
 });

package/src/ui/Alert.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 import type { BadgeTone } from "./Badge";
 
+injectTerpStyles();
+
 export type AlertTone = BadgeTone;
 
 export interface AlertProps {
@@ -12,43 +15,6 @@ export interface AlertProps {
   children: ReactNode;
 }
 
-const toneColor: Record<AlertTone, string> = {
-  neutral: "var(--color-neutral-600)",
-  info: "var(--color-status-info)",
-  success: "var(--color-status-success)",
-  warning: "var(--color-status-warning)",
-  danger: "var(--color-status-danger)",
-};
-
-const toneSoft: Record<AlertTone, string> = {
-  neutral: "var(--color-neutral-50)",
-  info: "var(--color-status-info-soft)",
-  success: "var(--color-status-success-soft)",
-  warning: "var(--color-status-warning-soft)",
-  danger: "var(--color-status-danger-soft)",
-};
-
-const alertStyle = (tone: AlertTone): CSSProperties => ({
-  display: "grid",
-  gridTemplateColumns: "auto 1fr",
-  gap: "var(--space-3)",
-  padding: "var(--space-3) var(--space-4)",
-  border: `1px solid ${toneColor[tone]}`,
-  borderRadius: "var(--radius-md)",
-  color: "var(--color-neutral-900)",
-  background: toneSoft[tone],
-});
-
-const iconWrapStyle = (tone: AlertTone): CSSProperties => ({
-  color: toneColor[tone],
-  display: "inline-flex",
-  alignItems: "flex-start",
-  paddingTop: "2px",
-});
-
-const bodyStyle: CSSProperties = { display: "grid", gap: "var(--space-1)", minWidth: 0 };
-const titleStyle: CSSProperties = { fontWeight: "var(--font-weight-semibold)" as never };
-
 const glyphProps = {
   width: 20,
   height: 20,
@@ -95,18 +61,24 @@ const toneIcon: Record<AlertTone, ReactNode> = {
   ),
 };
 
-/** Inline banner for persistent feedback; warnings and errors announce as alerts. */
+/**
+ * Inline banner for persistent feedback; warnings and errors announce as alerts.
+ *
+ * The tone is a `data-tone` attribute rather than a style object: the sheet paints the
+ * frame, the tint and the glyph from it, and the body restates the reading colour so the
+ * copy stays neutral while the frame carries the tone (ADR 0094).
+ */
 export function Alert({ tone = "info", title, children }: AlertProps) {
   const resolve = useUiText();
   return (
     <div
       role={tone === "warning" || tone === "danger" ? "alert" : "status"}
       data-terp="alert"
-      style={alertStyle(tone)}
+      data-tone={tone}
     >
-      <span style={iconWrapStyle(tone)}>{toneIcon[tone]}</span>
-      <div style={bodyStyle}>
-        {title !== undefined && <strong style={titleStyle}>{resolve(title)}</strong>}
+      <span data-terp="alert-icon">{toneIcon[tone]}</span>
+      <div data-terp="alert-body">
+        {title !== undefined && <strong data-terp="alert-title">{resolve(title)}</strong>}
         <div>{children}</div>
       </div>
     </div>

package/src/ui/Badge.test.tsx

@@ -7,13 +7,24 @@ import { Badge } from "./Badge";
 afterEach(cleanup);
 
 describe("Badge", () => {
-  it("renders a token-styled status pill", () => {
+  // The tone is asserted as the attribute the sheet keys on, not as a resolved colour
+  // (ADR 0094) — which is also the tone DataView reads to tint a row, so the two can
+  // never disagree about what "success" means.
+  it("names its tone on the pill and carries no inline styling", () => {
     render(<Badge label="Active" tone="success" />);
-    expect(screen.getByText("Active").style.color).toContain("var(--color-status-success)");
+    const pill = screen.getByText("Active");
+    expect(pill).toHaveAttribute("data-terp", "badge");
+    expect(pill).toHaveAttribute("data-tone", "success");
+    expect(pill.getAttribute("style")).toBeNull();
   });
 
   it("takes its text as children too, the way every other component does", () => {
     render(<Badge tone="danger">No drift</Badge>);
-    expect(screen.getByText("No drift").style.color).toContain("var(--color-status-danger)");
+    expect(screen.getByText("No drift")).toHaveAttribute("data-tone", "danger");
+  });
+
+  it("defaults to the neutral tone", () => {
+    render(<Badge label="Draft" />);
+    expect(screen.getByText("Draft")).toHaveAttribute("data-tone", "neutral");
   });
 });

package/src/ui/Badge.tsx

@@ -1,8 +1,9 @@
-import type { CSSProperties } from "react";
-
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 
+injectTerpStyles();
+
 export type BadgeTone = "neutral" | "info" | "success" | "warning" | "danger";
 
 /**
@@ -18,17 +19,14 @@ export type BadgeProps = { tone?: BadgeTone } & (
   | { children: UiText; label?: never }
 );
 
-const toneColor: Record<BadgeTone, string> = {
-  neutral: "var(--color-neutral-600)",
-  info: "var(--color-status-info)",
-  success: "var(--color-status-success)",
-  warning: "var(--color-status-warning)",
-  danger: "var(--color-status-danger)",
-};
-
 /**
  * Soft tint per tone — exported (not via the package barrel) so DataView's row/card
  * tinting resolves a tone to the exact same tokens the Badge pill uses.
+ *
+ * The pill itself no longer reads this map: its tones are rules in the sheet, keyed on
+ * `data-tone` (ADR 0094). It stays because DataView tints rows and cards from an inline
+ * background and still needs the tone-to-token mapping; that call site is the one that
+ * removes this export, when the DataView cluster migrates.
  */
 export const toneSoftColors: Record<BadgeTone, string> = {
   neutral: "var(--color-neutral-100)",
@@ -38,28 +36,11 @@ export const toneSoftColors: Record<BadgeTone, string> = {
   danger: "var(--color-status-danger-soft)",
 };
 
-const badgeStyle = (tone: BadgeTone): CSSProperties => ({
-  display: "inline-flex",
-  alignItems: "center",
-  border: `1px solid ${toneSoftColors[tone]}`,
-  borderRadius: "var(--radius-full)",
-  padding: "2px var(--space-2)",
-  color: toneColor[tone],
-  background: toneSoftColors[tone],
-  fontSize: "var(--font-size-xs)",
-  fontWeight: "var(--font-weight-semibold)" as never,
-  lineHeight: 1.4,
-  whiteSpace: "nowrap",
-});
-
 /** Small token-styled status pill — flat soft tint with a matching text colour. */
 export function Badge({ label, children, tone = "neutral" }: BadgeProps) {
   const resolve = useUiText();
-  // `data-tone` alongside the marker: the tone is currently readable only from the inline
-  // colour values, so a stylesheet rule cannot address "the warning pill" at all. Naming it
-  // as an attribute is what lets tone styling move out of `style={}` later.
   return (
-    <span data-terp="badge" data-tone={tone} style={badgeStyle(tone)}>
+    <span data-terp="badge" data-tone={tone}>
       {resolve((label ?? children) as UiText)}
     </span>
   );

package/src/ui/Button.test.tsx

@@ -7,20 +7,25 @@ import { Button } from "./Button";
 afterEach(cleanup);
 
 describe("Button", () => {
-  it("renders an accessible button with a default type and token styling", () => {
+  // These assert the attributes rather than `style.background` (ADR 0094). The variant is
+  // the semantic claim — that the sheet paints it is the sheet's business, and the visual
+  // baselines are what prove the paint. Asserting the absence of an inline style is the
+  // other half: it is what makes the rules in the sheet reachable at all, so a component
+  // that quietly regrew a base `style={}` would silently take back its own restyleability.
+  it("renders an accessible button with a default type and no inline styling", () => {
     render(<Button>Save</Button>);
     const button = screen.getByRole("button", { name: "Save" });
     expect(button).toHaveAttribute("type", "button");
     expect(button).toHaveAttribute("data-terp", "button");
     expect(button).toHaveAttribute("data-variant", "primary");
-    expect(button.style.background).toContain("var(--color-brand-primary)");
+    expect(button.getAttribute("style")).toBeNull();
   });
 
-  it("renders the ghost variant with a transparent background", () => {
+  it("names the ghost variant on the element", () => {
     render(<Button variant="ghost">Cancel</Button>);
     const button = screen.getByRole("button", { name: "Cancel" });
     expect(button).toHaveAttribute("data-variant", "ghost");
-    expect(button.style.background).toBe("transparent");
+    expect(button.getAttribute("style")).toBeNull();
   });
 
   it("renders a leading icon before the children", () => {
@@ -32,5 +37,15 @@ describe("Button", () => {
     expect(button.contains(icon)).toBe(true);
     expect(button.textContent).toBe("iDo it");
   });
+
+  it("still forwards an explicit style, so framework callers keep their escape", () => {
+    // The sheet owns the base, and the escape still has to work: a caller may pass a measured
+    // value the sheet has no business owning, and it wins because a style attribute outranks
+    // any author rule (ADR 0094 §3). It is no longer LoginView's full-width submit, which is
+    // what this comment used to cite — a fixed 100% is layout policy rather than a measured
+    // value, and the sheet could reach it, so it is a rule on the login form now.
+    render(<Button style={{ width: "100%" }}>Wide</Button>);
+    expect(screen.getByRole("button", { name: "Wide" }).style.width).toBe("100%");
+  });
 });
 

package/src/ui/Button.tsx

@@ -1,7 +1,6 @@
-import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 
 import { injectTerpStyles } from "../styles";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 
 injectTerpStyles();
 
@@ -13,78 +12,26 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
 }
 
-const baseStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "var(--space-2)",
-  fontWeight: "var(--font-weight-medium)" as never,
-  lineHeight: 1.2,
-  width: "fit-content",
-  maxWidth: "100%",
-  minHeight: "2.25rem",
-  padding: "0 var(--space-4)",
-  border: "1px solid transparent",
-  borderRadius: "var(--radius-md)",
-  boxSizing: "border-box",
-  cursor: "pointer",
-  whiteSpace: "normal",
-  textAlign: "center",
-};
-
-const variantStyle: Record<ButtonVariant, CSSProperties> = {
-  primary: {
-    background: "var(--color-brand-primary)",
-    color: "var(--color-brand-primary-contrast)",
-    boxShadow: "var(--shadow-sm)",
-  },
-  secondary: {
-    background: "var(--color-neutral-0)",
-    color: "var(--color-neutral-900)",
-    borderColor: "var(--color-neutral-300)",
-  },
-  danger: {
-    background: "var(--color-status-danger)",
-    color: "var(--color-neutral-0)",
-  },
-  ghost: {
-    background: "transparent",
-    color: "var(--color-neutral-700)",
-  },
-};
-
-const iconWrapStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0,
-};
-
 /**
- * Token-styled button — use instead of a raw `<button>` (the module-boundary rule). It
- * styles only via the design-token CSS variables, so it themes with the app. Hover,
- * active and `:focus-visible` states are layered on via the injected react-core sheet,
- * keyed by the `data-terp` / `data-variant` attributes set below.
+ * Token-styled button — use instead of a raw `<button>` (the module-boundary rule).
+ *
+ * It renders no inline styles: the geometry, the per-variant colours and the hover /
+ * active / disabled / `:focus-visible` states all live in the injected react-core sheet,
+ * matched on the `data-terp` / `data-variant` attributes set below (ADR 0094). So the
+ * variant is a fact about the element rather than a style object chosen in here — which
+ * is what a test should assert, and what an app's `theme.css` can restyle.
  */
 export function Button({
   variant = "primary",
   icon,
-  style,
   type = "button",
   children,
   ...rest
 }: ButtonProps) {
   return (
-    <button
-      type={type}
-      data-terp="button"
-      data-variant={variant}
-      {...rest}
-      style={{ ...baseStyle, ...variantStyle[variant], ...style }}
-    >
+    <button type={type} data-terp="button" data-variant={variant} {...rest}>
       {icon !== undefined && (
-        <span aria-hidden="true" style={iconWrapStyle}>
+        <span aria-hidden="true" data-terp="button-icon">
           {icon}
         </span>
       )}

package/src/ui/Card.test.tsx

@@ -17,8 +17,12 @@ describe("Card", () => {
     expect(heading).toBeInTheDocument();
     const card = heading.closest('[data-terp="card"]') as HTMLElement;
     expect(card.tagName).toBe("SECTION");
-    expect(card.style.border).toContain("var(--color-neutral-200)");
-    expect(card.style.background).toContain("var(--color-neutral-0)");
+    // The surface is a sheet rule (ADR 0094); the card's own claims are its element, its
+    // gap step and that the title is a real h3 inside the header row.
+    expect(card.getAttribute("style")).toBeNull();
+    expect(card).toHaveAttribute("data-gap", "3");
+    expect(heading).toHaveAttribute("data-terp", "card-title");
+    expect(heading.closest('[data-terp="card-header"]')).not.toBeNull();
     expect(screen.getByText("Uren per maand.")).toBeInTheDocument();
     expect(screen.getByText("body")).toBeInTheDocument();
   });

package/src/ui/Card.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 
 import type { SpaceToken } from "../layout";
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 
+injectTerpStyles();
+
 export interface CardProps
   extends Omit<HTMLAttributes<HTMLElement>, "style" | "title"> {
   /** Optional section heading, rendered as an `<h3>` in the card's header row. */
@@ -19,37 +22,6 @@ export interface CardProps
   children?: ReactNode;
 }
 
-const cardStyle: CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  padding: "var(--space-4)",
-  minWidth: 0,
-};
-
-const headerStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  flexWrap: "wrap",
-  gap: "var(--space-3)",
-};
-
-const titleStyle: CSSProperties = {
-  margin: 0,
-  fontSize: "var(--font-size-base)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-  lineHeight: 1.3,
-};
-
-const descriptionStyle: CSSProperties = {
-  margin: 0,
-  color: "var(--color-neutral-600)",
-  fontSize: "var(--font-size-sm)",
-};
-
 /**
  * A token-styled surface that groups one block of a page — the sanctioned way to give
  * sections visual separation (border + background + padding) without module CSS, and
@@ -70,23 +42,23 @@ export function Card({
   const resolve = useUiText();
   const hasHeader = title !== undefined || actions !== undefined;
   return (
-    <Component {...rest} data-terp="card" style={{ ...cardStyle, gap: `var(--space-${gap})` }}>
+    <Component {...rest} data-terp="card" data-gap={String(gap)}>
       {hasHeader ? (
-        <div data-terp="card-header" style={headerStyle}>
-          <div style={{ minWidth: 0 }}>
-            {title !== undefined ? <h3 style={titleStyle}>{resolve(title)}</h3> : null}
+        <div data-terp="card-header">
+          <div data-terp="card-heading">
+            {title !== undefined ? <h3 data-terp="card-title">{resolve(title)}</h3> : null}
             {description !== undefined ? (
-              <p style={descriptionStyle}>{resolve(description)}</p>
+              <p data-terp="card-description">{resolve(description)}</p>
             ) : null}
           </div>
           {actions !== undefined ? (
-            <div data-terp="card-actions" style={{ flexShrink: 0 }}>
+            <div data-terp="card-actions">
               {actions}
             </div>
           ) : null}
         </div>
       ) : description !== undefined ? (
-        <p style={descriptionStyle}>{resolve(description)}</p>
+        <p data-terp="card-description">{resolve(description)}</p>
       ) : null}
       {children}
     </Component>