Centralize metric and description layouts

webui/tests/layout-primitives.test.tsx

@@ -7,8 +7,10 @@ import ActionToolbar, { ToolbarGroup, ToolbarSpacer } from "../src/components/Ac
 import ContentGrid, { FormGrid, FormLayout, GridItem } from "../src/components/ContentGrid";
 import Dialog from "../src/components/Dialog";
 import { DialogForm, DialogSection } from "../src/components/DialogAnatomy";
+import DescriptionList, { DescriptionItem } from "../src/components/DescriptionList";
 import FormSection from "../src/components/FormSection";
 import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
+import MetricGrid from "../src/components/MetricGrid";
 
 const toolbarMarkup = renderToStaticMarkup(
   <PlatformLanguageProvider>
@@ -39,6 +41,32 @@ assert(gridMarkup.includes("content-grid-columns-3"), "content grids expose expl
 assert(gridMarkup.includes("content-grid-collapse-wide"), "content grids expose explicit collapse ownership");
 assert(gridMarkup.includes("content-grid-item-full"), "grid items can span the complete layout");
 
+const metricMarkup = renderToStaticMarkup(
+  <MetricGrid columns="auto" density="compact" spacing="inset" minimum="compact" collapseAt="standard">
+    <div>Open</div><div>Closed</div>
+  </MetricGrid>
+);
+
+assert(metricMarkup.includes("metric-group-columns-auto"), "metric groups own responsive column geometry");
+assert(metricMarkup.includes("metric-group-spacing-inset"), "metric groups own their surrounding rhythm");
+assert(metricMarkup.includes("metric-group-collapse-standard"), "metric groups expose explicit collapse ownership");
+
+const descriptionMarkup = renderToStaticMarkup(
+  <DescriptionList columns={3} density="compact" collapseAt="wide">
+    <DescriptionItem term="Status">Ready</DescriptionItem>
+  </DescriptionList>
+);
+
+assert(descriptionMarkup.startsWith('<dl class="description-list-layout'), "description lists preserve native list semantics");
+assert(descriptionMarkup.includes("description-list-columns-3"), "description lists own their column geometry");
+assert(descriptionMarkup.includes("<dt>Status</dt><dd>Ready</dd>"), "description items preserve term and description anatomy");
+
+const inlineDescriptionMarkup = renderToStaticMarkup(
+  <DescriptionList variant="inline" termWidth="compact"><DescriptionItem term="Owner">Ada</DescriptionItem></DescriptionList>
+);
+assert(inlineDescriptionMarkup.includes("description-list-columns-1"), "inline description lists default to one list column");
+assert(inlineDescriptionMarkup.includes("description-list-term-compact"), "inline description lists centralize term sizing");
+
 const formMarkup = renderToStaticMarkup(
   <PlatformLanguageProvider>
     <FormSection title="Identity" description="Stable identifying values" actions={<button type="button">Reset</button>}>