@sproutsocial/seeds-react-narrative-kit 0.2.0 → 0.3.0

package/dist/metric-highlight.css

@@ -131,47 +131,37 @@
   stroke-width: 1.5;
 }
 
-/* Sparkline — a single normalized polyline stretched to fit. The non-scaling
-   stroke keeps a crisp 2px line at any aspect ratio. */
-.seeds-metric-highlight-spark {
-  display: block;
+/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
+   stroke/background styling, so the injected chart controls its own look. Heights
+   are explicit (never percentage/stretch) so a Highcharts chart always measures a
+   concrete container instead of falling back to its 400px default. */
+.seeds-metric-highlight-chart {
+  box-sizing: border-box;
   flex: 0 0 auto;
-  /* Matches the design's Data Viz / Categorical 01 line color (#0b968f). */
-  stroke: var(--color-teal-700);
-}
-
-/* Downward trend: the red analog at the same scale step (#db3e3e). */
-.seeds-metric-highlight-spark-negative {
-  stroke: var(--color-red-700);
-}
-
-.seeds-metric-highlight-spark path {
-  stroke: inherit;
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
+  align-self: center;
+  /* Center the injected chart as a flex item — an inline/inline-block child
+     (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
+     descender space below it, reading as vertically off-center in the slot. */
+  display: flex;
+  align-items: center;
 }
 
-/* Horizontal: a compact fixed-width chart beside the metric, matched to the
-   metric block's height. */
-.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 104px;
-  align-self: stretch;
-  min-height: 40px;
+  height: 48px;
 }
 
-.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 88px;
   height: 40px;
-  align-self: center;
 }
 
-/* Vertical: a full-width chart stacked beneath the metric. */
-.seeds-metric-highlight-vertical .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
   width: 100%;
   height: 96px;
 }
 
-.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
   height: 56px;
 }
 

package/dist/narrative-divider.css

@@ -0,0 +1,27 @@
+/**
+ * Seeds NarrativeDivider component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <hr class="seeds-narrative-divider" />
+ */
+
+@layer components {
+
+/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
+   and a beveled border, so reset those and draw the line with a single
+   border-top using the container-border-base token (#dee1e1), which also
+   tracks dark mode. */
+.seeds-narrative-divider {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
+}
+
+}

package/dist/narrative-headline.css

@@ -27,6 +27,13 @@
   color: var(--color-text-headline);
 }
 
+/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
+   spacing, and color are inherited from the base class. */
+.seeds-narrative-headline-small {
+  font-size: var(--font-size-600); /* 24px */
+  line-height: var(--line-height-600); /* 32px */
+}
+
 /* Static gradient accent for a span of headline text ("highlighted word").
    Paints the AI brand gradient onto the glyphs via background-clip. */
 .seeds-narrative-headline-highlight {

package/dist/narrative-summary.css

@@ -0,0 +1,126 @@
+/**
+ * Seeds NarrativeSummary component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support. Also relies on
+ * narrative-headline.css (headline) and eyebrow-token.css (eyebrow).
+ *
+ * The layout is a CSS grid driven by a container query on the root, so the
+ * columns collapse based on the width the component is given, not the viewport.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-summary">
+ *     <div class="seeds-narrative-summary-grid">…</div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The grid inside reacts to this element's
+   inline size. */
+.seeds-narrative-summary {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* Stacked single column by default (narrow). The container query below expands
+   it once there is room. */
+.seeds-narrative-summary-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-450); /* 24px */
+}
+
+/* The lead column: eyebrow, headline, optional action. align-items:flex-start
+   keeps the eyebrow pill and the action sized to their content — without it the
+   column's default stretch would blow the eyebrow out to full width. The
+   headline still fills and wraps because its text is wider than the track. */
+.seeds-narrative-summary-lead {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* The headline area grows so the action anchors toward the bottom of the lead
+   column when the neighboring columns are taller. align-self:stretch fills the
+   track width (the lead column pins other items to flex-start) so the headline
+   wraps at the column edge regardless of its length. */
+.seeds-narrative-summary-headline {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+/* In three-column mode the content wrapper is transparent to the grid, so its
+   two sections become grid items in their own columns. In two-column mode the
+   container query below turns it into a real, stacking grid item. */
+.seeds-narrative-summary-content {
+  display: contents;
+}
+
+.seeds-narrative-summary-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* Section label. 14px / 24px has no exact type token (the scale skips from
+   13px to 16px), so the design value is kept verbatim — same rationale as
+   eyebrow-token.css. All other values use tokens. */
+.seeds-narrative-summary-label {
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+}
+
+.seeds-narrative-summary-text {
+  margin: 0;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list {
+  margin: 0;
+  padding-inline-start: 21px;
+  list-style: disc;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list li {
+  margin: 0;
+}
+
+/* Expand to the multi-column layout once the component is wide enough. The
+   threshold is on the component's own width (container query), so a narrow card
+   on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
+@container (min-width: 640px) {
+  .seeds-narrative-summary-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* 1/3 lead + 2/3 content. */
+  .seeds-narrative-summary-two-column {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  /* The content wrapper becomes a real grid item that stacks its two sections. */
+  .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-450); /* 24px */
+    min-width: 0;
+  }
+}
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-narrative-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Seeds React Narrative Kit — composable narrative primitives for executive-brief style pages",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -17,10 +17,12 @@
     "./dist/narrative-headline.css": "./dist/narrative-headline.css",
     "./dist/pull-quote.css": "./dist/pull-quote.css",
     "./dist/metric-highlight.css": "./dist/metric-highlight.css",
-    "./dist/eyebrow-token.css": "./dist/eyebrow-token.css"
+    "./dist/eyebrow-token.css": "./dist/eyebrow-token.css",
+    "./dist/narrative-summary.css": "./dist/narrative-summary.css",
+    "./dist/narrative-divider.css": "./dist/narrative-divider.css"
   },
   "scripts": {
-    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css",
+    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css",
     "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
@@ -34,6 +36,8 @@
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-data-viz": "*",
     "@sproutsocial/seeds-react-grid": "^0.2.5",
     "@sproutsocial/seeds-react-text": "*",
     "@sproutsocial/seeds-react-testing-library": "*",

package/src/EyebrowToken/EyebrowToken.tsx

@@ -14,11 +14,7 @@ import type { TypeEyebrowTokenProps } from "./EyebrowTokenTypes";
  */
 const EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(
   ({ children, className, ...props }, ref) => (
-    <span
-      ref={ref}
-      className={cn("seeds-eyebrow-token", className)}
-      {...props}
-    >
+    <span ref={ref} className={cn("seeds-eyebrow-token", className)} {...props}>
       {children}
     </span>
   )

package/src/MetricHighlight/MetricHighlight.stories.tsx

@@ -1,7 +1,31 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { SparklineChart } from "@sproutsocial/seeds-react-data-viz/sparkline";
 import MetricHighlight from "./MetricHighlight";
 import "../metric-highlight.css";
+import "@sproutsocial/seeds-react-data-viz/sparkline.css";
+
+/**
+ * MetricHighlight has no built-in chart — the `sparkline` slot accepts any node.
+ * These stories inject the real `SparklineChart` from
+ * `@sproutsocial/seeds-react-data-viz`; narrative-kit takes no runtime
+ * dependency on data-viz (only these stories do, via a devDependency). The
+ * injected chart fills the slot with `className="h-full w-full"`.
+ */
+const RISING = [4, 6, 5, 8, 7, 10];
+const FALLING = [18, 16, 17, 13, 14, 10];
+
+const spark = (
+  data: number[],
+  variant: "line" | "bar" = "line"
+): React.ReactNode => (
+  <SparklineChart
+    variant={variant}
+    description="Weekly trend"
+    data={data}
+    className="h-full w-full"
+  />
+);
 
 const meta = {
   title: "Narrative Kit/MetricHighlight",
@@ -10,16 +34,14 @@ const meta = {
     label: "Insight metric",
     value: "123",
     trend: { direction: "up", value: "240%", "aria-label": "up 240%" },
+    sparkline: spark(RISING),
   },
 } satisfies Meta<typeof MetricHighlight>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Horizontal, default size, padded surface, numeric trend badge, and the
- * default sparkline (no `data` passed).
- */
+/** Horizontal, default size, padded surface, numeric trend badge, and a sparkline. */
 export const Default: Story = {
   args: {
     className: "w-80",
@@ -50,38 +72,39 @@ export const WithoutContainer: Story = {
   },
 };
 
-/** Metric without the sparkline. */
+/** Metric on its own — omit the `sparkline` slot to drop the chart. */
 export const WithoutChart: Story = {
   args: {
     className: "w-80",
-    chart: false,
+    sparkline: undefined,
   },
 };
 
 /**
- * Negative trend — the badge swaps to the red treatment and the default
- * sparkline slopes downward in red.
+ * Negative trend — the badge swaps to the red treatment and the sparkline (which
+ * auto-colors from its data) slopes downward in red.
  */
 export const TrendDown: Story = {
   args: {
     className: "w-80",
     value: "87",
     trend: { direction: "down", value: "12%", "aria-label": "down 12%" },
+    sparkline: spark(FALLING),
   },
 };
 
-/** Consumer-supplied data overrides the default series. */
-export const CustomData: Story = {
+/** Icon-only trend badge (no number). */
+export const TrendIconOnly: Story = {
   args: {
     className: "w-80",
-    data: [4, 9, 6, 12, 8, 15, 11, 18, 14, 22],
+    trend: { direction: "up", "aria-label": "trending up" },
   },
 };
 
-/** Icon-only trend badge (no number). */
-export const TrendIconOnly: Story = {
+/** The slot accepts the bar variant of the sparkline just as well. */
+export const BarSparkline: Story = {
   args: {
     className: "w-80",
-    trend: { direction: "up", "aria-label": "trending up" },
+    sparkline: spark(RISING, "bar"),
   },
 };

package/src/MetricHighlight/MetricHighlight.tsx

@@ -5,91 +5,6 @@ import type {
   TypeMetricHighlightTrend,
 } from "./MetricHighlightTypes";
 
-/** Fixed viewBox the sparkline normalizes into; CSS stretches it to fit. */
-const SPARK_VIEWBOX_WIDTH = 100;
-const SPARK_VIEWBOX_HEIGHT = 32;
-/** Inset so the stroke at the min/max points isn't clipped by the viewBox edge. */
-const SPARK_PADDING = 2;
-
-/**
- * Default sparkline series used when the consumer doesn't pass `data` — a gently
- * rising wave. It's reversed for a downward trend so the line slopes to match.
- */
-const DEFAULT_SPARK = [6, 10, 8, 13, 11, 16];
-
-/**
- * Build a smooth SVG path through `points` using a Catmull-Rom spline converted
- * to cubic béziers. Each segment's control points are derived from its
- * neighbors, so the curve passes through every data point with soft, rounded
- * transitions (matching the design) rather than sharp polyline corners.
- */
-const smoothPath = (points: { x: number; y: number }[]) => {
-  if (points.length < 2) {
-    const p = points[0];
-    return p ? `M ${p.x},${p.y}` : "";
-  }
-
-  let d = `M ${points[0]!.x.toFixed(2)},${points[0]!.y.toFixed(2)}`;
-  for (let i = 0; i < points.length - 1; i++) {
-    // The loop bound guarantees p1 and p2; p0/p3 clamp to the endpoints.
-    const p1 = points[i]!;
-    const p2 = points[i + 1]!;
-    const p0 = points[i - 1] ?? p1;
-    const p3 = points[i + 2] ?? p2;
-    // Catmull-Rom → bézier control points (tension 1/6).
-    const cp1x = p1.x + (p2.x - p0.x) / 6;
-    const cp1y = p1.y + (p2.y - p0.y) / 6;
-    const cp2x = p2.x - (p3.x - p1.x) / 6;
-    const cp2y = p2.y - (p3.y - p1.y) / 6;
-    d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(
-      2
-    )},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
-  }
-  return d;
-};
-
-/**
- * Sparkline — an inline SVG path normalized from `data` into a fixed viewBox and
- * smoothed into a soft curve. `preserveAspectRatio="none"` plus a non-scaling
- * stroke (set in CSS) lets a single path stretch to any width/height while
- * keeping a crisp line.
- */
-const Sparkline = ({
-  data,
-  negative,
-}: {
-  data: number[];
-  negative?: boolean;
-}) => {
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const usableHeight = SPARK_VIEWBOX_HEIGHT - SPARK_PADDING * 2;
-
-  const points = data.map((value, i) => ({
-    x:
-      data.length === 1
-        ? SPARK_VIEWBOX_WIDTH / 2
-        : (i / (data.length - 1)) * SPARK_VIEWBOX_WIDTH,
-    // Invert y so larger values sit higher in the chart.
-    y: SPARK_PADDING + (1 - (value - min) / range) * usableHeight,
-  }));
-
-  return (
-    <svg
-      className={cn("seeds-metric-highlight-spark", {
-        "seeds-metric-highlight-spark-negative": Boolean(negative),
-      })}
-      viewBox={`0 0 ${SPARK_VIEWBOX_WIDTH} ${SPARK_VIEWBOX_HEIGHT}`}
-      preserveAspectRatio="none"
-      aria-hidden
-      focusable={false}
-    >
-      <path d={smoothPath(points)} fill="none" strokeLinecap="round" />
-    </svg>
-  );
-};
-
 /** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */
 const TrendArrow = ({ direction }: { direction: "up" | "down" }) => (
   <svg
@@ -116,7 +31,11 @@ const TrendArrow = ({ direction }: { direction: "up" | "down" }) => (
   </svg>
 );
 
-const TrendBadge = ({ direction = "up", value, ...rest }: TypeMetricHighlightTrend) => (
+const TrendBadge = ({
+  direction = "up",
+  value,
+  ...rest
+}: TypeMetricHighlightTrend) => (
   <span
     className={cn("seeds-metric-highlight-trend", {
       "seeds-metric-highlight-trend-down": direction === "down",
@@ -133,21 +52,25 @@ const TrendBadge = ({ direction = "up", value, ...rest }: TypeMetricHighlightTre
 /**
  * MetricHighlight — a narrative primitive that spotlights a single metric: a
  * label, a large monospace value, an optional trend badge (a directional arrow
- * plus an optional number such as "240%"), and an optional sparkline.
+ * plus an optional number such as "240%"), and an optional chart supplied via
+ * the `sparkline` slot (e.g. a `<SparklineChart />` from
+ * `@sproutsocial/seeds-react-data-viz/sparkline`).
  *
  * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers
  * import the classes through `@sproutsocial/racine/css/components`. Layout flexes
  * across `appearance` (horizontal/vertical) and `size` (default/small); surface
  * overrides are done with standard `className` / `style`.
  */
-const MetricHighlight = React.forwardRef<HTMLDivElement, TypeMetricHighlightProps>(
+const MetricHighlight = React.forwardRef<
+  HTMLDivElement,
+  TypeMetricHighlightProps
+>(
   (
     {
       label,
       value,
       trend,
-      data,
-      chart = true,
+      sparkline,
       appearance = "horizontal",
       size = "default",
       container = true,
@@ -156,14 +79,6 @@ const MetricHighlight = React.forwardRef<HTMLDivElement, TypeMetricHighlightProp
     },
     ref
   ) => {
-    const isDown = trend?.direction === "down";
-    // Fall back to a sensible default series, sloped to match the trend, so the
-    // chart renders without the consumer wiring up data. An explicit `data`
-    // (including an empty array to opt out) always wins.
-    const resolvedData =
-      data ?? (isDown ? [...DEFAULT_SPARK].reverse() : DEFAULT_SPARK);
-    const showChart = chart && resolvedData.length > 0;
-
     return (
       <div
         ref={ref}
@@ -185,7 +100,12 @@ const MetricHighlight = React.forwardRef<HTMLDivElement, TypeMetricHighlightProp
             {trend != null && <TrendBadge {...trend} />}
           </div>
         </div>
-        {showChart && <Sparkline data={resolvedData} negative={isDown} />}
+        {sparkline != null && (
+          // Layout-only slot (bounded dimensions per horizontal/vertical/small)
+          // for a consumer-supplied chart. It controls its own look; the slot
+          // only sizes and centers it.
+          <div className="seeds-metric-highlight-chart">{sparkline}</div>
+        )}
       </div>
     );
   }

package/src/MetricHighlight/MetricHighlightTypes.ts

@@ -28,16 +28,13 @@ export interface TypeMetricHighlightProps
   /** Optional trend badge — a directional arrow plus an optional value. */
   trend?: TypeMetricHighlightTrend;
   /**
-   * Sparkline data points. When omitted, a sensible default series is used
-   * (sloped to match `trend`). Pass an explicit array to override, or an empty
-   * array to opt out of the chart.
+   * Chart slot. When provided, this node renders in the chart area beside/below
+   * the metric — e.g. a `<SparklineChart />` from
+   * `@sproutsocial/seeds-react-data-viz/sparkline`. Omit it to render the metric
+   * on its own. The injected node controls its own look; the slot only sizes and
+   * centers it (pass `className="h-full w-full"` to fill).
    */
-  data?: number[];
-  /**
-   * Render the sparkline.
-   * @default true
-   */
-  chart?: boolean;
+  sparkline?: React.ReactNode;
   /**
    * Layout direction.
    * - `horizontal` — metric block beside the sparkline.

package/src/MetricHighlight/__tests__/MetricHighlight.test.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import MetricHighlight from "../MetricHighlight";
 
-const DATA = [1, 4, 2, 6, 3];
-
 describe("MetricHighlight", () => {
   it("renders the label and value", () => {
     render(<MetricHighlight label="Engagement" value="123" />);
@@ -33,7 +31,9 @@ describe("MetricHighlight", () => {
       />
     );
 
-    expect(container.querySelector(".seeds-metric-highlight-trend")).toBeInTheDocument();
+    expect(
+      container.querySelector(".seeds-metric-highlight-trend")
+    ).toBeInTheDocument();
     expect(
       container.querySelector(".seeds-metric-highlight-trend-value")
     ).not.toBeInTheDocument();
@@ -54,32 +54,6 @@ describe("MetricHighlight", () => {
     ).toBeInTheDocument();
   });
 
-  it("marks the sparkline negative for a downward trend", () => {
-    const { container, rerender } = render(
-      <MetricHighlight
-        label="Engagement"
-        value="123"
-        data={DATA}
-        trend={{ direction: "down", value: "12%" }}
-      />
-    );
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark-negative")
-    ).toBeInTheDocument();
-
-    rerender(
-      <MetricHighlight
-        label="Engagement"
-        value="123"
-        data={DATA}
-        trend={{ direction: "up", value: "12%" }}
-      />
-    );
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark-negative")
-    ).not.toBeInTheDocument();
-  });
-
   it("omits the trend badge when no trend is provided", () => {
     const { container } = render(
       <MetricHighlight label="Engagement" value="123" />
@@ -90,37 +64,28 @@ describe("MetricHighlight", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders the sparkline when data is provided", () => {
+  it("renders the sparkline slot node in the chart area", () => {
     const { container } = render(
-      <MetricHighlight label="Engagement" value="123" data={DATA} />
+      <MetricHighlight
+        label="Engagement"
+        value="123"
+        sparkline={<div data-testid="custom-spark">chart</div>}
+      />
     );
 
+    expect(screen.getByTestId("custom-spark")).toBeInTheDocument();
     expect(
-      container.querySelector(".seeds-metric-highlight-spark")
+      container.querySelector(".seeds-metric-highlight-chart")
     ).toBeInTheDocument();
   });
 
-  it("renders a default sparkline when no data is provided", () => {
+  it("omits the chart area when no sparkline slot is provided", () => {
     const { container } = render(
       <MetricHighlight label="Engagement" value="123" />
     );
 
     expect(
-      container.querySelector(".seeds-metric-highlight-spark")
-    ).toBeInTheDocument();
-  });
-
-  it("omits the sparkline when chart is false or data is empty", () => {
-    const { container, rerender } = render(
-      <MetricHighlight label="Engagement" value="123" data={DATA} chart={false} />
-    );
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark")
-    ).not.toBeInTheDocument();
-
-    rerender(<MetricHighlight label="Engagement" value="123" data={[]} />);
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark")
+      container.querySelector(".seeds-metric-highlight-chart")
     ).not.toBeInTheDocument();
   });