@multiplatform.one/components 7.6.3 → 7.7.1

package/src/charts/Axis.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { XAxis, YAxis } from "./Axis";
+import { ChartSurface } from "./ChartSurface";
+import { computeCartesianPlot } from "./composeChart";
+import { createBandScale, createLinearScale, formatAxisTick, getLinearTicks } from "./math";
+import type { ChartSize } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+const weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+const longLabels = [
+  "Engineering",
+  "Customer Success",
+  "Finance and Legal",
+  "People Operations",
+  "Infrastructure",
+];
+
+interface AxisFrameProps {
+  size: ChartSize;
+  categories: string[];
+  domain: [number, number];
+  showXLabels?: boolean;
+  showYGrid?: boolean;
+  showYLine?: boolean;
+  showYTicks?: boolean;
+  yTicks?: number;
+}
+
+/**
+ * Both axes drawn against a real plot rectangle. The left margin is derived
+ * from the widest y tick LABEL (computeCartesianPlot), not a magic number, so
+ * the axis never clips its own text.
+ */
+function AxisFrame({
+  size,
+  categories,
+  domain,
+  showXLabels = true,
+  showYGrid = true,
+  showYLine = false,
+  showYTicks = false,
+  yTicks = 4,
+}: AxisFrameProps) {
+  const { labelFontSize } = useChartTheme();
+  const marginScale = createLinearScale({ domain, range: [0, 1] });
+  const tickValues = getLinearTicks(marginScale, yTicks);
+  const plot = computeCartesianPlot(size, {
+    showXAxis: true,
+    showYAxis: true,
+    yTickLabels: tickValues.map((value) => formatAxisTick(value)),
+    fontSize: labelFontSize,
+  });
+  if (plot.width <= 0 || plot.height <= 0) return null;
+  const xScale = createBandScale({
+    domain: categories,
+    range: [plot.x, plot.x + plot.width],
+  });
+  const yScale = createLinearScale({
+    domain,
+    range: [plot.y + plot.height, plot.y],
+  });
+  return (
+    <>
+      <YAxis
+        plot={plot}
+        scale={yScale}
+        ticks={yTicks}
+        showGrid={showYGrid}
+        showLine={showYLine}
+        showTicks={showYTicks}
+      />
+      <XAxis plot={plot} scale={xScale} showLabels={showXLabels} />
+    </>
+  );
+}
+
+const meta: Meta<typeof XAxis> = {
+  title: "Components/Axis",
+  component: XAxis,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "The two axis primitives the cartesian charts compose. `XAxis` is categorical: a baseline, tick marks, and a label centred under each band or point, truncated with an ellipsis once it is wider than its step so nothing overflows the surface (LC-10). `YAxis` is continuous: nice d3 ticks, right-aligned labels in the left margin, and horizontal grid lines on by default with the axis line off, because the grid already carries the edge. All chrome resolves through `useChartTheme` — axis lines take the border role, grid the divider role, labels the muted text role at the AA floor. Tick numbers ride the charts package's own density register, the declared exemption to the house number channel.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof XAxis>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface label="Empty axis frame, weekdays across a 0 to 100 value axis." height={220}>
+          {(size) => <AxisFrame size={size} categories={weekdays} domain={[0, 100]} />}
+        </ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};
+
+export const AxisLineAndTicks: Story = {
+  name: "Grid off, axis line on",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`showGrid={false}` with `showLine` and `showTicks` on: the classic ticked frame for charts that must not carry horizontal rules across the plot.",
+      },
+    },
+  },
+  render: () => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface label="Ticked axis frame with no grid." height={220}>
+          {(size) => (
+            <AxisFrame
+              size={size}
+              categories={weekdays}
+              domain={[0, 100]}
+              showYGrid={false}
+              showYLine
+              showYTicks
+            />
+          )}
+        </ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};
+
+export const LabelTruncation: Story = {
+  name: "Long labels truncate",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Department names wider than their band. XAxis truncates each label to its step with an ellipsis rather than letting text collide or run off the surface.",
+      },
+    },
+  },
+  render: () => (
+    <YStack gap="$4">
+      {[520, 280].map((width) => (
+        <Card key={width} width={width}>
+          <YStack gap="$2">
+            <Paragraph size="$2">{`${width}px container`}</Paragraph>
+            <ChartSurface label={`Department axis at ${width}px`} height={180}>
+              {(size) => <AxisFrame size={size} categories={longLabels} domain={[0, 40]} />}
+            </ChartSurface>
+          </YStack>
+        </Card>
+      ))}
+    </YStack>
+  ),
+};
+
+export const WideValueRange: Story = {
+  name: "Nice ticks on a wide range",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A 0 to 1,250,000 domain. YAxis asks d3 for nice ticks and formats them through the charts density register, so the left margin stays a handful of characters wide.",
+      },
+    },
+  },
+  render: () => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface label="Weekday axis against a 0 to 1.25 million value axis." height={220}>
+          {(size) => (
+            <AxisFrame size={size} categories={weekdays} domain={[0, 1250000]} yTicks={5} />
+          )}
+        </ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};

package/src/charts/ChartSurface.stories.spec.tsx

@@ -0,0 +1,43 @@
+/**
+ * ChartSurface is exported from the charts barrel but only ever appeared
+ * inside the composed charts' stories, so it had no title of its own
+ * (MPO-193). These mount every exported story and assert the surface really
+ * paints: an explicit width draws immediately, and the accessible summary
+ * lands on the SVG root as one described image (Axiom 12).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Default, FixedWidth, Responsive } from "./ChartSurface.stories";
+
+afterEach(cleanup);
+
+describe("ChartSurface stories", () => {
+  it("declares the Components/ChartSurface title against the component", () => {
+    expect(meta.title).toBe("Components/ChartSurface");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("Explicit width draws without any layout pass", () => {
+    const { container } = renderWithProviders(<>{FixedWidth.render?.({} as never, {} as never)}</>);
+    const root = screen.getByRole("img", { name: "Five categorical dots" });
+    expect(root.getAttribute("width")).toBe("360");
+    expect(container.querySelectorAll("circle")).toHaveLength(5);
+  });
+
+  it("Main mounts and carries its generated summary as the accessible name", () => {
+    renderWithProviders(
+      <>{Default.render?.(Default.args as never, { args: Default.args } as never)}</>,
+    );
+    // happy-dom runs no layout, so the measured surface holds at width 0 and
+    // draws nothing — the label still has to be the declared summary.
+    expect(Default.args?.label).toBe("Sessions per weekday, peaking Thursday at 9.");
+  });
+
+  it("Tracks the container mounts one surface per width", () => {
+    renderWithProviders(<>{Responsive.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("520px container")).toBeTruthy();
+    expect(screen.getByText("320px container")).toBeTruthy();
+    expect(screen.getByText("200px container")).toBeTruthy();
+  });
+});

package/src/charts/ChartSurface.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { ChartSurface } from "./ChartSurface";
+import { createBandScale, createLinearScale } from "./math";
+import { Circle, Line, Rect } from "./svg";
+import type { ChartSize } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+const bars = [
+  { label: "Mon", value: 3 },
+  { label: "Tue", value: 7 },
+  { label: "Wed", value: 5 },
+  { label: "Thu", value: 9 },
+  { label: "Fri", value: 6 },
+];
+
+/**
+ * The point of the surface is that children get PIXELS, not a 0-100 viewBox:
+ * scales resolve against the measured viewport, so strokes stay 1px and hit
+ * targets stay honest at any container width.
+ */
+function Marks({ size }: { size: ChartSize }) {
+  const { palette, gridColor } = useChartTheme();
+  const x = createBandScale({
+    domain: bars.map((bar) => bar.label),
+    range: [8, size.width - 8],
+  });
+  const y = createLinearScale({ domain: [0, 10], range: [size.height - 8, 8] });
+  return (
+    <>
+      <Line
+        x1={8}
+        y1={size.height - 8}
+        x2={size.width - 8}
+        y2={size.height - 8}
+        stroke={gridColor}
+        strokeWidth={1}
+      />
+      {bars.map((bar) => (
+        <Rect
+          key={bar.label}
+          x={x(bar.label) ?? 0}
+          y={y(bar.value)}
+          width={x.bandwidth()}
+          height={size.height - 8 - y(bar.value)}
+          fill={palette.single}
+        />
+      ))}
+    </>
+  );
+}
+
+function Dots({ size }: { size: ChartSize }) {
+  const { palette } = useChartTheme();
+  return (
+    <>
+      {bars.map((bar, index) => (
+        <Circle
+          key={bar.label}
+          cx={((index + 1) / (bars.length + 1)) * size.width}
+          cy={size.height / 2}
+          r={6 + index * 2}
+          fill={palette.categorical[index % palette.categorical.length]}
+        />
+      ))}
+    </>
+  );
+}
+
+const meta: Meta<typeof ChartSurface> = {
+  title: "Components/ChartSurface",
+  component: ChartSurface,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          'The responsive SVG viewport every chart in this package draws into. It measures its own width through `onLayout` (ResizeObserver-backed on web) and hands children a pixel-space `{ width, height }`, so scales land on real device pixels: strokes stay crisp, nothing is stretched by `preserveAspectRatio`, and a 44px touch target really is 44px. `label` is the generated accessible summary and renders as `role="img"`, so the chart is one described image rather than a pile of unlabelled shapes. Pass an explicit `width` to bypass measurement for SSR, tests, and fixed layouts. The draw-in fade drops entirely at `animation="none"` or OS reduced motion.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    height: { control: { type: "range", min: 80, max: 320, step: 10 } },
+    width: { control: "number" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ChartSurface>;
+
+export const Default: Story = {
+  name: "Main",
+  args: { label: "Sessions per weekday, peaking Thursday at 9.", height: 200 },
+  render: (args) => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface {...args}>{(size) => <Marks size={size} />}</ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};
+
+export const Responsive: Story = {
+  name: "Tracks the container",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Same surface, three container widths. No `width` prop: each instance measures its own parent, so the band scale re-solves instead of scaling a fixed viewBox.",
+      },
+    },
+  },
+  render: () => (
+    <YStack gap="$4">
+      {[520, 320, 200].map((width) => (
+        <Card key={width} width={width}>
+          <YStack gap="$2">
+            <Paragraph size="$2">{`${width}px container`}</Paragraph>
+            <ChartSurface label={`Sessions per weekday at ${width}px`} height={140}>
+              {(size) => <Marks size={size} />}
+            </ChartSurface>
+          </YStack>
+        </Card>
+      ))}
+    </YStack>
+  ),
+};
+
+export const FixedWidth: Story = {
+  name: "Explicit width",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "An explicit `width` bypasses measurement entirely — the path SSR and tests take, where no layout pass ever runs.",
+      },
+    },
+  },
+  render: () => (
+    <Card alignSelf="flex-start">
+      <ChartSurface label="Five categorical dots" width={360} height={120}>
+        {(size) => <Dots size={size} />}
+      </ChartSurface>
+    </Card>
+  ),
+};

package/src/code/Code/code.spec.tsx

@@ -1,5 +1,5 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { Code, CodeInline } from "./index";
 
 describe("Code", () => {
@@ -21,6 +21,15 @@ describe("Code", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("keeps data-code-font and does not emit a dataset attribute", () => {
+    const { container } = renderWithProviders(<Code>const test = "hello"</Code>);
+    const codeElement = container.querySelector("code");
+    expect(codeElement).toBeTruthy();
+    expect(codeElement!.getAttribute("data-code-font")).toBe("mono");
+    // React lowercases an unknown dataSet prop to dataset="[object Object]".
+    expect(codeElement!.hasAttribute("dataset")).toBe(false);
+  });
 });
 
 describe("CodeInline", () => {
@@ -42,4 +51,21 @@ describe("CodeInline", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("emits data-code-font on web without a dataSet host-prop leak", () => {
+    const leak = /does not recognize the `dataSet` prop on a DOM element/;
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const { container } = renderWithProviders(<CodeInline>npm install</CodeInline>);
+      const codeElement = container.querySelector("code");
+      expect(codeElement).toBeDefined();
+      expect(codeElement?.getAttribute("data-code-font")).toBe("mono");
+      const leaks = errorSpy.mock.calls
+        .map((args) => args.map(String).join(" "))
+        .filter((message) => leak.test(message));
+      expect(leaks).toEqual([]);
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
 });

package/src/code/Code/index.tsx

@@ -40,7 +40,6 @@ export const Code = CodeFrame.styleable((props, ref) => {
       fontFamily="$mono"
       letterSpacing={0}
       data-code-font="mono"
-      {...({ dataSet: { codeFont: "mono" } } as object)}
     />
   );
 });
@@ -57,6 +56,9 @@ const CodeInlineFrame = styled(Paragraph, {
   backgroundColor: componentColors.code.background,
   cursor: "inherit",
   borderRadius: "$3",
+  // Pin (dial: surrounding prose): 0.9× size / 0.7× leading. Size reaches
+  // the chip through context, not sizeToken. Lettered in spec § Code and
+  // CodeInline; these ratios are the house metrics already shipping.
   fontSize: "90%" as CSSProperties["fontSize"],
   lineHeight: "70%" as CSSProperties["lineHeight"],
   paddingHorizontal: "0.6%",
@@ -79,7 +81,12 @@ export const CodeInline = CodeInlineFrame.styleable((props, ref) => {
       fontFamily="$mono"
       letterSpacing={0}
       data-code-font="mono"
-      {...({ dataSet: { codeFont: "mono" } } as object)}
+      // react-native-web reads dataSet; React-DOM warns on the camel host
+      // prop. Keep the kebab attribute on every target; spread dataSet
+      // only when TAMAGUI_TARGET is native.
+      {...(process.env.TAMAGUI_TARGET === "native"
+        ? ({ dataSet: { codeFont: "mono" } } as object)
+        : {})}
     />
   );
 });

package/src/code/HighlightedCode/index.tsx

@@ -74,7 +74,6 @@ export function HighlightedCode({
             fontFamily="$mono"
             letterSpacing={0}
             data-code-font="mono"
-            {...({ dataSet: { codeFont: "mono" } } as object)}
           >
             {showLineNumbers && (
               <Text

package/src/code/highlightedCode.spec.tsx

@@ -115,9 +115,18 @@ describe("HighlightedCode", () => {
         <HighlightedCode tokens={tokens} />
       </Preset>,
     );
-    const line = container.querySelector("span");
+    // querySelector("span") used to land on renderWithProviders' Theme
+    // wrapper (`t_light _dsp_contents`), never the code line, so this guard
+    // asserted null and had been red on main. Select the line itself.
+    const line = container.querySelector("[data-code-font]") as HTMLElement | null;
     expect(line).toBeTruthy();
     expect(container.textContent).toContain("const");
     expect(line!.getAttribute("data-code-font")).toBe("mono");
+    // The actual LC-07 pin: bodyFont serif / fontWeight bold must not reach
+    // code text, so the line keeps the mono family class.
+    expect(line!.className).toContain("font_mono");
+    // React does not recognise `dataSet`; leaving it on the line logged an
+    // unknown-prop error and wrote dataset="[object Object]" on every node.
+    expect(container.querySelectorAll("[dataset]")).toHaveLength(0);
   });
 });

package/src/knobImmuneExports.ts

@@ -38,6 +38,17 @@ export const knobImmuneExports: Readonly<Record<string, string>> = {
   // qualifies for a row (house implementations ARE the knob story). The
   // weight-knob question stays an ADJUDICATION-CANDIDATE on the component
   // header (MPO-21 G10 / G0-clay R9).
+  // MPO-21 G1 — Fold's substrate. Logic shell only; Accordion (and Fold)
+  // own the painted chrome. Restored with the three below after MPO-21 R9 G8
+  // (the Adapt drop) rewrote this file from a pre-MPO-21 copy and took them
+  // out as collateral; Adapt itself stays dropped.
+  Collapsible:
+    "composition root (open/close shell); knobs land on composing surfaces (Accordion, Fold)",
+  Unspaced:
+    "spacing opt-out marker; paints nothing, tells the parent stack to skip gap on its children",
+  VisuallyHidden: "a11y hide utility; paints nothing visible, no chrome for knobs to reach",
+  LinearGradient:
+    "paint primitive (color stops are content); no opinionated chrome, consumers own the stops",
   ListItem:
     "raw list-row primitive consumed as lego by house list surfaces (List, sidebar, tags) which own the knob story. ADJUDICATION-CANDIDATE + BACKLOG: painted row with own padding/press states — deserves a house shadow or Tamagui* demotion once consumers migrate",
 

package/src/layouts/AsyncBoundary.spec.tsx

@@ -229,7 +229,7 @@ function SchemeWrap({
   children: ReactNode;
 }) {
   return (
-    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
       <YStack backgroundColor="$background">{children}</YStack>
     </TamaguiProvider>
   );

package/src/layouts/breadcrumbs.spec.tsx

@@ -1,5 +1,7 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { describe, expect, it, vi } from "vitest";
 import { Breadcrumbs } from "./breadcrumbs";
 
@@ -28,6 +30,21 @@ describe("Breadcrumbs", () => {
     expect(["400", "normal"]).toContain(String(linkWeight));
   });
 
+  it("hides the slash separators from AT and paints them as T-HELPER ink", () => {
+    const { container } = renderWithProviders(<Breadcrumbs items={items} />);
+    const separators = [...container.querySelectorAll('[data-testid="breadcrumb-separator"]')];
+    expect(separators).toHaveLength(2);
+    for (const sep of separators) {
+      expect(sep.getAttribute("aria-hidden")).toBe("true");
+      expect(sep.textContent).toBe("/");
+    }
+    // Distinct token from MPO-40: separators ride textAccentColor (AA floor
+    // at $color11), not componentColors.text.subtle ($color8).
+    const source = readFileSync(join(import.meta.dirname, "breadcrumbs.tsx"), "utf8");
+    expect(source).toMatch(/color=\{knobProps\.textAccentColor\}/);
+    expect(source).not.toMatch(/color=\{componentColors\.text\.subtle\}/);
+  });
+
   it("calls onNavigate from a path crumb and keeps the current page inert", () => {
     const onNavigate = vi.fn();
     const { container } = renderWithProviders(

package/src/layouts/breadcrumbs.tsx

@@ -2,9 +2,15 @@
  * Breadcrumbs — wayfinding trail (Polaris / Primer / GOV.UK).
  *
  * Landmark `<nav>` + ordered list; last crumb is the current page
- * (`aria-current="page"`, not a link). Separators stay the RTL-neutral `/`.
+ * (`aria-current="page"`, not a link). Separators stay the RTL-neutral `/`,
+ * `aria-hidden` (the list already names the trail), and T-HELPER ink via
+ * `knobProps.textAccentColor` — not `componentColors.text.subtle` ($color8),
+ * which measured 1.89:1 / 2.21:1 against the 4.5 floor. Distinct from
+ * MPO-40 / !272 (outlined intent `$color11` on the warning surface).
  * LC-71: keyboard ring on each link (and the overflow control), never the
  * trail container. LC-03 / LC-35: tight chromeless trail.
+ * Crumb `minHeight` is a Vocabulary `pin` at 44, not a size `floor` — see
+ * `docs/design/letters/breadcrumbs-size-pin.md`.
  */
 
 import {
@@ -120,12 +126,17 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
   // Tight trail: crumbs hug the "/" separators so the path reads as one unit.
   // The space knob still scales the gap, but from a tight base — not the
   // panel-level knobProps.gap (which is sized for stacked layout sections).
+  // Spec: separators are T-HELPER (`textAccentColor`), never the $color8
+  // `text.subtle` ramp that fails AA on the page.
   const spaceGap = knobProps.gap.gap;
   const trailGap =
     spaceGap === "$2" ? ("$1" as const) : spaceGap === "$5" ? ("$2" as const) : ("$1.5" as const);
   // Vertical pad only (theme-propagation SP-FIXED / DG-LAY-04 / LC-03): grow
   // the clickable box to ≥44 without horizontal padding that would re-spread
   // the trail. No minWidth floor — the ring must hug the link, not a 44px well.
+  // Height is PINNED at MIN_PRESS_TARGET across size stops (font still remaps).
+  // That is Vocabulary `pin (forced: WCAG 2.5.5)`, not `floor`. Do not raise
+  // the box at large — lettered in docs/design/letters/breadcrumbs-size-pin.md.
   const crumbPadY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - CRUMB_LINE_PX) / 2));
   const crumbRadius = knobProps.borderRadius.borderRadius;
 
@@ -238,7 +249,13 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
               </Text>
             )}
             {!isLastSlot && (
-              <Text color={componentColors.text.subtle} fontSize={separatorSize} userSelect="none">
+              <Text
+                aria-hidden
+                color={knobProps.textAccentColor}
+                data-testid="breadcrumb-separator"
+                fontSize={separatorSize}
+                userSelect="none"
+              >
                 /
               </Text>
             )}

package/src/layouts/tags.r7.spec.tsx

@@ -4,7 +4,9 @@ import { Tags } from "./tags";
 
 describe("Tags design law", () => {
   it("paints the field label at weight 400 (R7 / §6.1)", () => {
-    const { container } = renderWithProviders(<Tags tags={["alpha"]} label="Topics" />);
+    const { container } = renderWithProviders(
+      <Tags tags={[{ id: "alpha", label: "alpha" }]} label="Topics" />,
+    );
     const label = container.querySelector("label") as HTMLElement | null;
     const node = label ?? (container.querySelector("*") as HTMLElement);
     expect(container.textContent).toContain("Topics");

package/src/tamagui.ts

@@ -30,18 +30,26 @@
 // quiet = opacity 0.5). Raw stays reachable as TamaguiSeparator below.
 export {
   Circle,
+  Collapsible,
   Group,
   ListItem,
   ScrollView,
   Spacer,
   Square,
+  Unspaced,
   View,
+  VisuallyHidden,
   XGroup,
   XStack,
   YGroup,
   YStack,
 } from "tamagui";
 
+// MPO-21 G2: LinearGradient is NOT on the main tamagui barrel — it lives
+// on the `tamagui/linear-gradient` subpath.
+export { LinearGradient } from "tamagui/linear-gradient";
+export type { LinearGradientProps } from "tamagui/linear-gradient";
+
 // Text primitives: NONE re-exported raw anymore (MPO-20). The former
 // "typography substrate" registry rows were the single biggest knob hole in
 // the catalog: FontKnobStyles rescues family/leading/tracking on WEB ONLY,

package/src/views/Dashboard.tsx

@@ -379,7 +379,7 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
       {...stackProps}
     >
       <XStack justifyContent="space-between" alignItems="flex-start">
-        <Text {...knobProps.label} color={componentColors.text.muted} flex={1}>
+        <Text {...knobProps.label} color={knobProps.textAccentColor} flex={1}>
           {config.title}
         </Text>
         {config.icon ? (
@@ -408,7 +408,7 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
             label={knobProps.label}
           />
           {config.previousValue !== undefined && (
-            <Text {...knobProps.label} color={componentColors.text.muted}>
+            <Text {...knobProps.label} color={knobProps.textAccentColor}>
               {t("vs {{previousValue}}", { previousValue: formatMetric(config.previousValue) })}
             </Text>
           )}
@@ -689,7 +689,7 @@ export function Dashboard({
           </H3>
         )}
         {description && (
-          <Text {...knobProps.body} {...knobProps.label} color={componentColors.text.muted}>
+          <Text {...knobProps.body} {...knobProps.label} color={knobProps.textAccentColor}>
             {description}
           </Text>
         )}