@sproutsocial/seeds-react-narrative-kit 0.6.2 → 0.6.5

package/dist/narrative-data-callout.css

@@ -19,85 +19,83 @@
  */
 
 @layer components {
-
-/* Establishes the query container. The row inside reacts to this element's
+  /* Establishes the query container. The row inside reacts to this element's
    inline size. A container query only styles DESCENDANTS of the query container,
    so the flex row lives on the inner element, not this one. */
-.seeds-narrative-data-callout {
-  container-type: inline-size;
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
+  .seeds-narrative-data-callout {
+    container-type: inline-size;
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
 
-/* Stacked single column by default (narrow). The container query below turns it
+  /* Stacked single column by default (narrow). The container query below turns it
    into the horizontal 1/3 + 2/3 row once there is room. */
-.seeds-narrative-data-callout-row {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-450); /* 24px */
-}
+  .seeds-narrative-data-callout-row {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-450); /* 24px */
+  }
 
-/* Visual slot — layout only, no stroke/background so the injected chart controls
+  /* Visual slot — layout only, no stroke/background so the injected chart controls
    its own look and its own size. No fixed height: charts like the data-viz
    DonutChart carry their own intrinsic height (and a legend), so the slot sizes
    to the chart rather than clipping it. Stacked full-width until the container
    query expands the row. */
-.seeds-narrative-data-callout-visual {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-}
+  .seeds-narrative-data-callout-visual {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+  }
 
-/* Stretch the injected visual to the slot's full width. A fluid-width chart like
+  /* Stretch the injected visual to the slot's full width. A fluid-width chart like
    the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
    so Highcharts fills that shrunk width and the ring gets width-capped below its
    fixed 270px height — leaving an empty vertical band. Filling the width lets the
    ring become height-capped and fill its box top-to-bottom, like the standalone
    chart story. */
-.seeds-narrative-data-callout-visual > * {
-  width: 100%;
-}
+  .seeds-narrative-data-callout-visual > * {
+    width: 100%;
+  }
 
-/* Body copy — fills the remaining space. */
-.seeds-narrative-data-callout-body {
-  box-sizing: border-box;
-  min-width: 0;
-  font-size: var(--font-size-300); /* 16px */
-  line-height: var(--line-height-400); /* ~28px */
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-  overflow-wrap: break-word;
-}
+  /* Body copy — fills the remaining space. */
+  .seeds-narrative-data-callout-body {
+    box-sizing: border-box;
+    min-width: 0;
+    font-size: var(--font-size-300); /* 16px */
+    line-height: var(--line-height-400); /* ~28px */
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+    overflow-wrap: break-word;
+  }
 
-/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
+  /* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
    The threshold is on the component's own width (container query), so a narrow
    callout on a wide screen still stacks. 480px keeps the donut + copy readable
    side by side. */
-@container (min-width: 480px) {
-  .seeds-narrative-data-callout-row {
-    flex-direction: row;
-  }
+  @container (min-width: 480px) {
+    .seeds-narrative-data-callout-row {
+      flex-direction: row;
+    }
 
-  .seeds-narrative-data-callout-visual {
-    /* Nominally one-third, but never narrower than the injected chart's fixed
+    .seeds-narrative-data-callout-visual {
+      /* Nominally one-third, but never narrower than the injected chart's fixed
        height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
        fixed-height chart like the donut gets width-capped and leaves an empty
        vertical band above/below the ring; the min-width keeps the visual square
        enough that the ring fills its box top-to-bottom, matching the standalone
        chart story. */
-    flex: 0 0 33.333%;
-    min-width: 270px;
-    width: auto;
-  }
+      flex: 0 0 33.333%;
+      min-width: 270px;
+      width: auto;
+    }
 
-  .seeds-narrative-data-callout-body {
-    flex: 1 1 0;
+    .seeds-narrative-data-callout-body {
+      flex: 1 1 0;
+    }
   }
 }
-
-}

package/dist/narrative-divider.css

@@ -10,18 +10,16 @@
  */
 
 @layer components {
-
-/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
+  /* 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 */
-}
-
+  .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

@@ -14,119 +14,118 @@
  */
 
 @layer components {
+  /* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
+  .seeds-narrative-headline {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-700);
+    line-height: var(--line-height-700);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: -0.02em;
+    color: var(--color-text-headline);
+  }
 
-/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
-.seeds-narrative-headline {
-  box-sizing: border-box;
-  margin: 0;
-  font-family: var(--font-family);
-  font-size: var(--font-size-700);
-  line-height: var(--line-height-700);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: -0.02em;
-  color: var(--color-text-headline);
-}
-
-/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
+  /* 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 */
-}
+  .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").
+  /* 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 {
-  background: var(--color-gradient-ai);
-  -webkit-background-clip: text;
-          background-clip: text;
-  color: transparent;
-}
+  .seeds-narrative-headline-highlight {
+    background: var(--color-gradient-ai);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
 
-/* -------------------------------------------------------------------------
+  /* -------------------------------------------------------------------------
    "Roll" variant — vertical word roll. The active word slides into view
    while the previous one rolls out.
    ------------------------------------------------------------------------- */
-.seeds-narrative-headline-roll {
-  display: inline-block;
-  position: relative;
-  /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
+  .seeds-narrative-headline-roll {
+    display: inline-block;
+    position: relative;
+    /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
      snaps its baseline to the bottom margin edge, dropping the rolling word
      below the surrounding text. clip-path keeps the natural baseline. */
-  clip-path: inset(0);
-}
-
-/* Invisible word that holds the box width to the active word. */
-.seeds-narrative-headline-roll-sizer {
-  display: inline-block;
-  visibility: hidden;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.seeds-narrative-headline-roll-word {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  white-space: nowrap;
-  transform: translateY(100%);
-  opacity: 0;
-  transition:
-    transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
-    opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
-}
+    clip-path: inset(0);
+  }
 
-.seeds-narrative-headline-roll-word-active {
-  transform: translateY(0);
-  opacity: 1;
-}
+  /* Invisible word that holds the box width to the active word. */
+  .seeds-narrative-headline-roll-sizer {
+    display: inline-block;
+    visibility: hidden;
+    white-space: nowrap;
+    pointer-events: none;
+  }
 
-.seeds-narrative-headline-roll-word-past {
-  transform: translateY(-100%);
-  opacity: 0;
-}
+  .seeds-narrative-headline-roll-word {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: nowrap;
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
+      opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
+  }
 
-/* Reverse the roll direction. */
-.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
-  transform: translateY(-100%);
-}
-.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
-  transform: translateY(0);
-}
-.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
-  transform: translateY(100%);
-}
+  .seeds-narrative-headline-roll-word-active {
+    transform: translateY(0);
+    opacity: 1;
+  }
 
-/* Gradient-painted rolling words with a slow shimmer. */
-.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
-  background: var(--color-gradient-ai);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-          background-clip: text;
-  color: transparent;
-  animation: seeds-narrative-headline-grad-shift 8s ease infinite;
-}
+  .seeds-narrative-headline-roll-word-past {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
 
-@keyframes seeds-narrative-headline-grad-shift {
-  0%,
-  100% {
-    background-position: 0% 50%;
+  /* Reverse the roll direction. */
+  .seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
+    transform: translateY(-100%);
   }
-  50% {
-    background-position: 100% 50%;
+  .seeds-narrative-headline-roll-down
+    .seeds-narrative-headline-roll-word-active {
+    transform: translateY(0);
   }
-}
-
-/* The JS cycle is already disabled under reduced-motion (the first word holds);
-   also flatten the transition and shimmer so any in-flight motion settles. */
-@media (prefers-reduced-motion: reduce) {
-  .seeds-narrative-headline-roll-word {
-    transition: none;
+  .seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
+    transform: translateY(100%);
   }
+
+  /* Gradient-painted rolling words with a slow shimmer. */
   .seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
-    animation: none;
+    background: var(--color-gradient-ai);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: seeds-narrative-headline-grad-shift 8s ease infinite;
   }
-}
 
+  @keyframes seeds-narrative-headline-grad-shift {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  /* The JS cycle is already disabled under reduced-motion (the first word holds);
+   also flatten the transition and shimmer so any in-flight motion settles. */
+  @media (prefers-reduced-motion: reduce) {
+    .seeds-narrative-headline-roll-word {
+      transition: none;
+    }
+    .seeds-narrative-headline-roll-gradient
+      .seeds-narrative-headline-roll-word {
+      animation: none;
+    }
+  }
 }

package/dist/narrative-ordered-list.css

@@ -14,99 +14,105 @@
  */
 
 @layer components {
-
-/* Establishes the query container. The track inside reacts to this element's
+  /* Establishes the query container. The track inside reacts to this element's
    inline size — a container query can only style descendants of the container,
    never the container element itself. */
-.seeds-narrative-ordered-list {
-  container-type: inline-size;
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
+  .seeds-narrative-ordered-list {
+    container-type: inline-size;
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
 
-/* The list itself, and the default (stacked) layout. The horizontal modifier
+  /* The list itself, and the default (stacked) layout. The horizontal modifier
    only expands to a row once the container query below has room, so horizontal
    collapses back to this stack when narrow. */
-.seeds-narrative-ordered-list-track {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-400); /* 16px */
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+  .seeds-narrative-ordered-list-track {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-400); /* 16px */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
-/* An item row: the ordinal beside the body, on its own rounded surface. */
-.seeds-narrative-ordered-list-item {
-  display: flex;
-  gap: var(--space-450); /* 24px */
-  align-items: flex-start;
-  box-sizing: border-box;
-  min-width: 0;
-  padding: var(--space-400) var(--space-450); /* 16px 24px */
-  border-radius: var(--radius-800); /* 12px */
-  background-color: var(--color-app-bg-base);
-}
+  /* An item row: the ordinal beside the body, on its own rounded surface. */
+  .seeds-narrative-ordered-list-item {
+    display: flex;
+    gap: var(--space-450); /* 24px */
+    align-items: flex-start;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: var(--space-400) var(--space-450); /* 16px 24px */
+    border-radius: var(--radius-800); /* 12px */
+    background-color: var(--color-app-bg-base);
+  }
 
-/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
+  /* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
    monospace stack — mirrors the value treatment in metric-highlight.css. */
-.seeds-narrative-ordered-list-number {
-  margin: 0;
-  flex-shrink: 0;
-  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
-  font-size: var(--font-size-700); /* 32px */
-  line-height: var(--line-height-700); /* 40px */
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-headline);
-}
+  .seeds-narrative-ordered-list-number {
+    margin: 0;
+    flex-shrink: 0;
+    font-family: var(
+      --font-family-mono,
+      ui-monospace,
+      "SF Mono",
+      SFMono-Regular,
+      Menlo,
+      monospace
+    );
+    font-size: var(--font-size-700); /* 32px */
+    line-height: var(--line-height-700); /* 40px */
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline);
+  }
 
-/* Title + description + optional action, stacked. */
-.seeds-narrative-ordered-list-body {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-200); /* 4px */
-  min-width: 0;
-}
+  /* Title + description + optional action, stacked. */
+  .seeds-narrative-ordered-list-body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-200); /* 4px */
+    min-width: 0;
+  }
 
-/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
+  /* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
    skips from 24px to 32px), so the design value is kept verbatim. Same
    rationale as narrative-summary.css. */
-.seeds-narrative-ordered-list-title {
-  margin: 0;
-  font-size: var(--font-size-300); /* 16px */
-  line-height: 28px; /* off-scale, see comment above */
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-body);
-}
+  .seeds-narrative-ordered-list-title {
+    margin: 0;
+    font-size: var(--font-size-300); /* 16px */
+    line-height: 28px; /* off-scale, see comment above */
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-body);
+  }
 
-/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
+  /* Description. 14px / 24px has no exact type token, so it is kept verbatim —
    same rationale as the title above. */
-.seeds-narrative-ordered-list-description {
-  margin: 0;
-  font-size: 14px; /* off-scale, see title above */
-  line-height: 24px;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-}
+  .seeds-narrative-ordered-list-description {
+    margin: 0;
+    font-size: 14px; /* off-scale, see title above */
+    line-height: 24px;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+  }
 
-.seeds-narrative-ordered-list-action {
-  padding-top: var(--space-350); /* 12px */
-}
+  .seeds-narrative-ordered-list-action {
+    padding-top: var(--space-350); /* 12px */
+  }
 
-/* Expand the horizontal variant to a row of equal columns once the component is
+  /* Expand the horizontal variant to a row of equal columns 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, matching narrative-summary.css. */
-@container (min-width: 640px) {
-  .seeds-narrative-ordered-list-horizontal {
-    flex-direction: row;
-  }
+  @container (min-width: 640px) {
+    .seeds-narrative-ordered-list-horizontal {
+      flex-direction: row;
+    }
 
-  .seeds-narrative-ordered-list-horizontal > .seeds-narrative-ordered-list-item {
-    flex: 1 1 0;
-    min-width: 0;
+    .seeds-narrative-ordered-list-horizontal
+      > .seeds-narrative-ordered-list-item {
+      flex: 1 1 0;
+      min-width: 0;
+    }
   }
 }
-
-}

package/dist/narrative-section.css

@@ -13,34 +13,32 @@
  */
 
 @layer components {
-
-/* The wrapper stacks the title above the content with a small gap. It carries
+  /* The wrapper stacks the title above the content with a small gap. It carries
    no surface of its own — it's meant to sit inside a NarrativeContainer. */
-.seeds-narrative-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-400); /* 16px — title to content */
-}
+  .seeds-narrative-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-400); /* 16px — title to content */
+  }
 
-/* The content slot stacks the section's widgets with the same 32px rhythm a
+  /* The content slot stacks the section's widgets with the same 32px rhythm a
    single-column grid (gap={500}) would give them, so multiple primitives inside
    one section are spaced exactly as they are between sections. */
-.seeds-narrative-section-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-500); /* 32px — between widgets */
-}
+  .seeds-narrative-section-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-500); /* 32px — between widgets */
+  }
 
-/* The section title: bold 14px/24px in the headline color token (#273333,
+  /* The section title: bold 14px/24px in the headline color token (#273333,
    which also tracks dark mode). Matches the summary-label recipe used across
    the kit. The heading element ships with user-agent margins, so reset them. */
-.seeds-narrative-section-title {
-  margin: 0;
-  font-family: var(--font-family);
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-headline); /* #273333 */
-}
-
+  .seeds-narrative-section-title {
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline); /* #273333 */
+  }
 }