@cosmicdrift/kumiko-renderer-web 0.233.0 → 0.235.0

package/src/layout/default-app-shell.tsx

@@ -68,7 +68,8 @@ export type DefaultAppShellProps = {
    *  Plan-Banner. */
   readonly sidebarFooter?: ReactNode;
   /** Viewport-fit Shell. true → fixe Viewport-Höhe (`h-svh`), der Content
-   *  scrollt INNEN statt der ganzen Seite. Default false (Seiten-Scroll). */
+   *  scrollt INNEN statt der ganzen Seite. Default true — `fill={false}`
+   *  schaltet zurück auf Seiten-Scroll. */
   readonly fill?: boolean;
   /** Screen-Content der im SidebarInset gerendert wird. */
   readonly children: ReactNode;
@@ -82,7 +83,7 @@ export function DefaultAppShell({
   headerActions,
   navBadges,
   sidebarFooter,
-  fill,
+  fill = true,
   children,
 }: DefaultAppShellProps): ReactNode {
   const fillCls = fillClasses(fill);

package/src/layout/workspace-shell.tsx

@@ -80,7 +80,8 @@ export type WorkspaceShellProps = {
   /** Runtime badge slot per nav leaf (bare nav id), same as DefaultAppShell. */
   readonly navBadges?: ReadonlyMap<string, ReactNode>;
   /** Viewport-fit shell. true → fixed viewport height (`h-svh`), content
-   *  scrolls INSIDE instead of the whole page. Default false (page scroll). */
+   *  scrolls INSIDE instead of the whole page. Default true — set
+   *  `fill={false}` to opt back into page scroll. */
   readonly fill?: boolean;
   /** Screen content. */
   readonly children: ReactNode;
@@ -94,7 +95,7 @@ export function WorkspaceShell({
   initialWorkspaceId,
   sidebarFooter,
   navBadges,
-  fill,
+  fill = true,
   children,
 }: WorkspaceShellProps): ReactNode {
   const app = useMemo(() => toAppSchema(schema), [schema]);

package/src/primitives/__tests__/button.test.tsx

@@ -25,3 +25,40 @@ describe("DefaultButton className/ref (fw#1831)", () => {
     expect(ref.current).toBe(screen.getByTestId("btn"));
   });
 });
+
+describe("DefaultButton icon (fw-ui-defaults)", () => {
+  test("icon prop renders the resolved icon left of the text", () => {
+    render(
+      <Button icon="trash" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn");
+    expect(btn.querySelector("svg")).not.toBeNull();
+    expect(btn.textContent).toBe("Delete");
+  });
+
+  test("size='icon' + a resolved icon still renders icon, children and aria-label", () => {
+    render(
+      <Button icon="trash" size="icon" ariaLabel="Delete" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn");
+    expect(btn.textContent).toBe("Delete");
+    expect(btn.querySelector("svg")).not.toBeNull();
+    expect(btn.getAttribute("aria-label")).toBe("Delete");
+  });
+
+  test("unknown icon key: no crash, falls back to rendering children only", () => {
+    render(
+      // @ts-expect-error — exercising the runtime fallback for a schema-supplied key outside the closed IconKey union
+      <Button icon="not-a-real-icon" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn");
+    expect(btn.querySelector("svg")).toBeNull();
+    expect(btn.textContent).toBe("Delete");
+  });
+});

package/src/primitives/__tests__/select-segmented.test.tsx

@@ -0,0 +1,84 @@
+// Segment control for `kind: "select"` with a small closed option set
+// (edit-existing screenshot feedback): a Status field with 3 short values
+// no longer stretches into a full-width dropdown. Threshold: ≤4 options,
+// each label ≤14 chars — otherwise the unchanged ComboboxInput dropdown.
+
+import { describe, expect, test } from "bun:test";
+import { fireEvent } from "@testing-library/react";
+import { render, screen } from "../../__tests__/test-utils";
+import { defaultPrimitives } from "../index";
+
+const { Field, Input } = defaultPrimitives;
+
+function renderSelect(
+  options: readonly string[],
+  overrides: { readonly value?: string; readonly disabled?: boolean } = {},
+): string[] {
+  const changes: string[] = [];
+  render(
+    <Field id="status" label="Status" testId="field-status">
+      <Input
+        kind="select"
+        id="status"
+        name="status"
+        value={overrides.value ?? options[0] ?? ""}
+        onChange={(v) => changes.push(v)}
+        options={options}
+        {...(overrides.disabled !== undefined && { disabled: overrides.disabled })}
+      />
+    </Field>,
+  );
+  return changes;
+}
+
+describe("DefaultInput select → segmented control (edit-existing feedback)", () => {
+  test("≤4 short options render the segmented control, not the dropdown", () => {
+    renderSelect(["Draft", "Review", "Published"]);
+    expect(screen.queryByTestId("combobox-status")).toBeNull();
+    expect(screen.getByRole("radiogroup")).toBeTruthy();
+    expect(screen.getAllByRole("radio")).toHaveLength(3);
+  });
+
+  test("4 options render the segmented control", () => {
+    renderSelect(["Draft", "Review", "Published", "Archived"]);
+    expect(screen.queryByTestId("combobox-status")).toBeNull();
+    expect(screen.getByRole("radiogroup")).toBeTruthy();
+    expect(screen.getAllByRole("radio")).toHaveLength(4);
+  });
+
+  test("5 options keep the dropdown", () => {
+    renderSelect(["Draft", "Review", "Published", "Archived", "Deleted"]);
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+    expect(screen.getByTestId("combobox-status")).toBeTruthy();
+  });
+
+  test("3 options with one long label (>14 chars) keep the dropdown", () => {
+    renderSelect(["Draft", "Review", "Published Status"]);
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+    expect(screen.getByTestId("combobox-status")).toBeTruthy();
+  });
+
+  test("clicking a segment reports the same value the dropdown's onChange would give", () => {
+    const changes = renderSelect(["Draft", "Review", "Published"], { value: "Draft" });
+    fireEvent.click(screen.getByRole("radio", { name: "Review" }));
+    expect(changes).toEqual(["Review"]);
+  });
+
+  test("group has an accessible name and the selected segment is aria-checked", () => {
+    renderSelect(["Draft", "Review", "Published"], { value: "Review" });
+    expect(screen.getByRole("radiogroup", { name: "Status" })).toBeTruthy();
+    expect(screen.getByRole("radio", { name: "Review" }).getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByRole("radio", { name: "Draft" }).getAttribute("aria-checked")).toBe("false");
+  });
+
+  test("disabled prevents selection", () => {
+    const changes = renderSelect(["Draft", "Review", "Published"], {
+      value: "Draft",
+      disabled: true,
+    });
+    const review = screen.getByRole("radio", { name: "Review" });
+    expect((review as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(review);
+    expect(changes).toEqual([]);
+  });
+});

package/src/primitives/index.tsx

@@ -8,7 +8,7 @@
 // basierte Stile. Radix-UI-Unterbau für interaktive Elemente (Modal,
 // Dropdown etc. kommen später).
 
-import type { FieldIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FieldIconKey, IconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
 import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -35,6 +35,8 @@ import {
   type ProgressProps,
   type SectionProps,
   type StepBarProps,
+  shouldRenderActionsIconOnly,
+  statusToneForValue,
   type TextProps,
   useColumnRenderer,
   useOptionalLocale,
@@ -81,16 +83,18 @@ import {
   useRef,
   useState,
 } from "react";
-import { NAV_ICONS } from "../icons";
+import { Icon, NAV_ICONS } from "../icons";
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
 import { buttonVariants, Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
+import { Switch } from "../ui/switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { Textarea } from "../ui/textarea";
 import { ProgressBar } from "../widgets/progress-bar";
+import { StatusBadge } from "../widgets/status-badge";
 import { StepBar } from "../widgets/step-bar";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
@@ -132,7 +136,10 @@ const cardSurface = cva(
 );
 // Wraps instead of running off-screen when the row outgrows its container (fw#2528).
 const cardFooter = "flex flex-wrap items-center justify-end gap-2 px-[var(--card-padding)] py-4";
-const cardFooterBorder = "border-t bg-muted/30";
+// /30 read as nearly invisible against the light-theme card (white card,
+// muted at 94% lightness) — /50 keeps the same token, just a stronger step.
+const cardFooterBorder = "border-t bg-muted/50";
+const cardHeaderBorder = "border-b bg-muted/50";
 
 // ---- Button (vendored shadcn ui/button) ----
 
@@ -153,6 +160,14 @@ const BUTTON_SIZE = {
   icon: "icon",
 } as const;
 
+// Closed IconKey vocabulary, checked against the shared NAV_ICONS registry
+// (icons.tsx) — an unknown key (schema data isn't statically typed against
+// IconKey the way this prop is) renders no icon instead of crashing, same
+// fallback shape as fieldIconFor above.
+function actionIconFor(icon: IconKey | undefined): IconKey | undefined {
+  return icon !== undefined && Object.hasOwn(NAV_ICONS, icon) ? icon : undefined;
+}
+
 function DefaultButton({
   type = "button",
   onClick,
@@ -257,6 +272,13 @@ function fieldLabelId(id: string): string {
   return `${id}-label`;
 }
 
+// Boolean optics depend on the surrounding Field layout: layout="inline"
+// (checkbox lists like MultiSelectCheckboxes, the BooleanField widget) keeps
+// the checkbox, the standard form field (layout="stacked"/default) gets the
+// new switch. Pure web-renderer rendering decision, no contract field needed
+// — Field hands its resolved layout down to the nested Input via context.
+const FieldLayoutContext = createContext<FieldProps["layout"]>("stacked");
+
 function DefaultField({
   id,
   label,
@@ -305,7 +327,7 @@ function DefaultField({
     return (
       <div data-testid={testId} className="flex flex-col gap-1.5">
         <div className="flex items-center gap-2">
-          {children}
+          <FieldLayoutContext.Provider value="inline">{children}</FieldLayoutContext.Provider>
           {labelEl}
           {labelAppendix !== undefined && labelAppendix}
         </div>
@@ -398,9 +420,116 @@ function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
   );
 }
 
+// Segmented control for `kind: "select"` with a small closed option set —
+// a 4-value Status field looked wrong stretched into a full-width dropdown
+// (edit-existing screenshot feedback). Purely a rendering choice inside the
+// "select" branch below; the primitives contract is untouched (still
+// `options` + string value/onChange).
+const SEGMENTED_SELECT_MAX_OPTIONS = 4;
+const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 14;
+
+function isSegmentedSelectEligible(options: readonly { readonly label: string }[]): boolean {
+  return (
+    options.length > 0 &&
+    options.length <= SEGMENTED_SELECT_MAX_OPTIONS &&
+    options.every((o) => o.label.length <= SEGMENTED_SELECT_MAX_LABEL_LENGTH)
+  );
+}
+
+// WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
+// arrow keys move focus AND selection in the same step, only the checked
+// segment (or the first when none is checked) sits in the tab order.
+function SegmentedSelect({
+  id,
+  name,
+  value,
+  onChange,
+  options,
+  disabled,
+  required,
+  hasError,
+}: {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string) => void;
+  readonly options: readonly { readonly value: string; readonly label: string }[];
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+}): ReactNode {
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const selectAt = (index: number): void => {
+    const target = options[index];
+    if (target === undefined) return;
+    onChange(target.value);
+    buttonRefs.current[index]?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number): void => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      selectAt((index + 1) % options.length);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      selectAt((index - 1 + options.length) % options.length);
+    }
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      aria-labelledby={fieldLabelId(id)}
+      aria-required={required}
+      aria-invalid={hasError === true ? true : undefined}
+      data-testid={`segmented-${id}`}
+      className={cn(
+        "inline-flex w-fit flex-wrap divide-x overflow-hidden rounded-md border",
+        hasError === true
+          ? "divide-destructive/50 border-destructive"
+          : "divide-border border-input",
+      )}
+    >
+      <input type="hidden" name={name} value={value} />
+      {options.map((opt, index) => {
+        const checked = opt.value === value;
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: a native <input type="radio"> can't render the segment's label as content — button+role="radio" is the standard WAI-ARIA composite-widget substitute.
+          <button
+            key={opt.value}
+            ref={(node) => {
+              buttonRefs.current[index] = node;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            tabIndex={checked || (value === "" && index === 0) ? 0 : -1}
+            disabled={disabled}
+            data-testid={`segmented-${id}-${opt.value}`}
+            onClick={() => onChange(opt.value)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            className={cn(
+              "px-3 py-1.5 text-sm font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+              checked
+                ? "bg-primary text-primary-foreground"
+                : "bg-transparent text-foreground hover:bg-accent",
+            )}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 function DefaultInput(props: InputProps): ReactNode {
   // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
   // selbst — kein manuelles border-destructive mehr nötig.
+  const booleanLayout = useContext(FieldLayoutContext);
   const common = {
     id: props.id,
     name: props.name,
@@ -484,7 +613,10 @@ function DefaultInput(props: InputProps): ReactNode {
         />
       );
     case "boolean":
-      return (
+      // layout="inline" (checkbox lists like MultiSelectCheckboxes, the
+      // BooleanField widget) keeps the checkbox optics; the standard form
+      // field (render-field.tsx, layout="stacked") gets the switch.
+      return booleanLayout === "inline" ? (
         <Checkbox
           id={props.id}
           name={props.name}
@@ -494,6 +626,17 @@ function DefaultInput(props: InputProps): ReactNode {
           checked={props.value}
           onCheckedChange={(checked) => props.onChange(checked === true)}
         />
+      ) : (
+        <Switch
+          id={props.id}
+          name={props.name}
+          disabled={props.disabled}
+          aria-required={props.required}
+          aria-invalid={props.hasError === true ? true : undefined}
+          checked={props.value}
+          onCheckedChange={(checked) => props.onChange(checked === true)}
+          className="aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+        />
       );
     case "file":
     case "image":
@@ -538,6 +681,20 @@ function DefaultInput(props: InputProps): ReactNode {
       const comboOptions = props.options.map((o) =>
         typeof o === "string" ? { value: o, label: o } : o,
       );
+      if (isSegmentedSelectEligible(comboOptions)) {
+        return (
+          <SegmentedSelect
+            id={props.id}
+            name={props.name}
+            value={props.value}
+            onChange={props.onChange}
+            options={comboOptions}
+            {...(props.disabled !== undefined && { disabled: props.disabled })}
+            {...(props.required !== undefined && { required: props.required })}
+            {...(props.hasError !== undefined && { hasError: props.hasError })}
+          />
+        );
+      }
       return (
         <ComboboxInput
           id={props.id}
@@ -1096,10 +1253,14 @@ function RowActionsCell({
   const visible = actions.filter((a) => a.isVisible === undefined || a.isVisible(row));
   if (visible.length === 0) return null;
   if (mode === "inline") {
+    // Teil C: >2 actions all carrying an icon collapse to icon-only —
+    // otherwise "inline" is exactly the wall-to-wall text-button problem
+    // this feature exists to fix.
+    const iconOnly = shouldRenderActionsIconOnly(visible);
     return (
       <div className="flex w-full items-center gap-1 justify-start">
         {visible.map((a) => (
-          <RowActionButton key={a.id} row={row} action={a} />
+          <RowActionButton key={a.id} row={row} action={a} iconOnly={iconOnly} />
         ))}
       </div>
     );
@@ -1155,9 +1316,13 @@ function useRowActionTrigger(row: ListRowViewModel) {
 function RowActionButton({
   row,
   action,
+  iconOnly = false,
 }: {
   readonly row: ListRowViewModel;
   readonly action: DataTableRowAction;
+  /** Group-level collapse (see `shouldRenderActionsIconOnly`) — only takes
+   *  effect when this action actually resolved an icon. */
+  readonly iconOnly?: boolean;
 }): ReactNode {
   const { busy, triggerNow } = useRowActionTrigger(row);
   const [confirmOpen, setConfirmOpen] = useState(false);
@@ -1169,12 +1334,16 @@ function RowActionButton({
         ? "text-primary hover:bg-primary/10"
         : "text-foreground hover:bg-accent";
 
+  const resolvedIcon = actionIconFor(action.icon);
+  const showIconOnly = iconOnly && resolvedIcon !== undefined;
+
   return (
     <>
       <button
         type="button"
         data-testid={`row-${row.id}-action-${action.id}`}
         disabled={busy}
+        {...(showIconOnly && { "aria-label": action.label, title: action.label })}
         onClick={(e) => {
           e.stopPropagation();
           if (needsConfirm(action)) {
@@ -1184,13 +1353,25 @@ function RowActionButton({
           }
         }}
         className={cn(
-          "inline-flex h-8 items-center justify-center rounded-sm px-2 text-sm",
+          "inline-flex h-8 items-center justify-center gap-1.5 rounded-sm text-sm",
+          showIconOnly ? "w-8" : "px-2",
           "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           "disabled:opacity-50 disabled:pointer-events-none",
           variantClass,
         )}
       >
-        {busy ? <Loader2 className="size-3.5 animate-spin" aria-hidden="true" /> : action.label}
+        {busy ? (
+          <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+        ) : resolvedIcon === undefined ? (
+          action.label
+        ) : showIconOnly ? (
+          <Icon name={resolvedIcon} className="size-4" />
+        ) : (
+          <>
+            <Icon name={resolvedIcon} className="size-4" />
+            {action.label}
+          </>
+        )}
       </button>
       <DefaultDialog
         open={confirmOpen}
@@ -1807,13 +1988,21 @@ function DataTableCell({
     // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
     console.warn(`[kumiko] columnRenderer "${componentRef.name}" not registered`);
   }
-  // select-Werte als neutrale Badge-Pill (shadcn secondary) statt Plain-Text.
-  // Farbige Status-Semantik (grün/amber) bleibt App-Sache via columnRenderer.
+  // A select value renders as a pill instead of plain text. When the raw
+  // value is a known status word, it carries the same tone as the
+  // projectionDetail header badge — a status column stayed grey while the
+  // detail view of the same value was coloured (fw#2579). Unknown values
+  // keep the neutral outline pill.
   if (type === "select" && value !== null && value !== undefined && value !== "") {
-    // dashboard-01-Muster: outline-Badge + muted statt gefülltem secondary.
+    const label = defaultCellRender(value, type, optionLabels, locale);
+    const tone = typeof value === "string" ? statusToneForValue(value) : undefined;
+    if (tone !== undefined) {
+      return <StatusBadge tone={tone}>{label}</StatusBadge>;
+    }
+    // dashboard-01 pattern: outline badge + muted instead of a filled secondary.
     return (
       <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {defaultCellRender(value, type, optionLabels, locale)}
+        {label}
       </Badge>
     );
   }
@@ -1896,7 +2085,7 @@ function DefaultForm({
         )}
         <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
-            <div className="px-6 pb-2 pt-5">
+            <div className={cn(cardHeaderBorder, "px-6 pb-4 pt-5")}>
               {title !== undefined && (
                 <h2
                   data-testid={testId !== undefined ? `${testId}-title` : undefined}
@@ -1986,7 +2175,7 @@ export function FormScreenShell({
   children,
   className,
   testId,
-  maxWidth = "full",
+  maxWidth = "4xl",
 }: {
   readonly children: ReactNode;
   readonly className?: string;
@@ -2010,20 +2199,24 @@ function DefaultSection({
   actions,
   variant = "default",
   testId,
+  icon,
 }: SectionProps): ReactNode {
   const insideForm = useContext(InsideFormContext);
 
   // h3 statt CardTitle (= div): erhält die Heading-Semantik für
   // Screenreader-Navigation. Subtitle fließt darunter (kein Divider —
   // shadcn CardTitle+CardDescription-Muster).
+  // icon only renders alongside a title — a title-less section has nothing
+  // for a lone icon to sit next to, so it stays as-is (no heading grows).
   const header =
     title !== undefined || subtitle !== undefined ? (
       <div className="flex flex-col gap-1">
         {title !== undefined && (
           <h3
             data-testid={testId !== undefined ? `${testId}-title` : undefined}
-            className="text-base font-semibold leading-none tracking-tight"
+            className="flex items-center gap-2 text-base font-semibold leading-none tracking-tight"
           >
+            {icon !== undefined && <Icon name={icon} className="size-4 text-muted-foreground" />}
             {title}
           </h3>
         )}
@@ -2068,8 +2261,8 @@ function DefaultSection({
     );
   }
 
-  // Standalone: eigene Card, Header fließt in den Body (kein Divider).
-  // actions = abgehobene Footer-Row (border-t bg-muted/30, wie DefaultForm).
+  // Standalone: own card, header flows into the body (no divider).
+  // actions = raised footer row (cardFooterBorder, same as DefaultForm).
   // overflow-hidden clips the footer-corner radius correctly for portaled
   // overlays (Combobox/Select/Tooltip escape to document.body, unaffected).
   // A non-portaled overlay (e.g. a custom dropdown built directly into

package/src/primitives/metric.tsx

@@ -1,17 +1,25 @@
 import type { MetricProps } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-import { MiniStat } from "../widgets/stat";
 
+// Borderless cell in the metrics-band Grid — `first:border-l-0` drops the
+// divider on the first cell purely from DOM position, so the tiles read as
+// one row of vertical dividers instead of individual cards (fw record-
+// screen-type polish). Typo matches StatCard's label/value rhythm.
 export function DefaultMetric({ label, value, testId }: MetricProps): ReactNode {
   return (
-    <MiniStat
-      label={label}
-      value={value}
-      testId={testId}
-      {...(testId !== undefined && {
-        labelTestId: `${testId}-label`,
-        valueTestId: `${testId}-value`,
-      })}
-    />
+    <div data-testid={testId} className="border-l first:border-l-0 px-4 py-3">
+      <div
+        className="text-xs text-muted-foreground"
+        data-testid={testId !== undefined ? `${testId}-label` : undefined}
+      >
+        {label}
+      </div>
+      <div
+        className="mt-0.5 text-xl font-semibold tabular-nums text-foreground"
+        data-testid={testId !== undefined ? `${testId}-value` : undefined}
+      >
+        {value}
+      </div>
+    </div>
   );
 }