@charcuterie/ui 4.18.3 → 4.19.0

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -367,10 +367,14 @@ test.each([
   async (_case, name) => {
     const { canvas } = await mountStory(NestedLinkText)
 
-    const link = expectAgentDrivable(canvas, {
-      name,
-      role: "link",
-    })
+    // CodeMirror finishes its viewport decorations on a scheduled frame.
+    // Wait for the accessible anchor rather than assuming mount means paint.
+    const link = await waitFor(() =>
+      expectAgentDrivable(canvas, {
+        name,
+        role: "link",
+      }),
+    )
 
     await expect(link.tagName).toBe("A")
   },

package/src/sourceRules.test.ts

@@ -621,7 +621,8 @@ test("the barrel is the only place components are re-exported", async () => {
   // ValuePairs owns compact label-over-value summaries.
   // Chart shares portable SVG geometry with Preact and image consumers.
   // TableViewport owns readable comparisons and full-window expansion.
-  expect(componentNames.length).toBe(74)
+  // MetricCard shares prominent values and category-coloured icons through Card.
+  expect(componentNames.length).toBe(75)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)

package/src/styles.css

@@ -260,3 +260,49 @@
   th:first-child {
   z-index: 3;
 }
+
+/* Column width utilities describe comparison columns, never labelled list cells.
+   These rules are unlayered, like the component's existing structural styles,
+   so a consumer's cq-lg:w-32 cannot crush a list reflowing at cq-xl. */
+.charcuterie-data-table[data-layout="stacked"]
+  > table
+  > :is(thead, tbody)
+  > tr
+  > :is(th, td) {
+  inline-size: auto;
+  min-inline-size: 0;
+  max-inline-size: none;
+}
+@container (width < 32rem) {
+  .charcuterie-data-table[data-reflow-at="md"]
+    > table
+    > :is(thead, tbody)
+    > tr
+    > :is(th, td) {
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}
+@container (width < 48rem) {
+  .charcuterie-data-table[data-reflow-at="lg"]
+    > table
+    > :is(thead, tbody)
+    > tr
+    > :is(th, td) {
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}
+@container (width < 64rem) {
+  .charcuterie-data-table[data-reflow-at="xl"]
+    > table
+    > :is(thead, tbody)
+    > tr
+    > :is(th, td) {
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}