@kolkrabbi/kol-component 0.93.1 → 0.95.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.93.1",
+  "version": "0.95.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/ContentCard.jsx

@@ -42,7 +42,8 @@ const RATIOS = {
 const BOX = {
   default:  { layout: 'stack', border: 'var(--kol-fg-12)', bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
   catalog:  { layout: 'fill-card', border: 'var(--kol-fg-04)', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)' },
-  print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true },
+  /* flip: PrintGridCard's 3D turn on `isFlipped` → `selected` (ContentRowsAndPrintCard, 2026-08-27) */
+  print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, flip: true },
   article:  { layout: 'stack', border: null, bg: null, pad: '0', mediaGap: 'var(--kol-spacing-4)' },
   /* work is a DRAWER: image-only at rest, and on hover a light plate rises
    * over the bottom of the artwork carrying the title + meta. This is the
@@ -81,7 +82,8 @@ const MEDIA = {
   /* zoom is for IMAGE-LED cards — where the artwork is the content and the
    * card is a frame around it. A catalog tile whose preview is a diagram, or
    * a default file card whose thumb is a 48px chip, gets nothing from it. */
-  print:   { ring: true, zoom: true },
+  /* fade: PrintGridCard's image fade-in + loading="lazy", carried (2026-08-27) */
+  print:   { ring: true, zoom: true, fade: true },
   work:    { zoom: true },
   /* frame OFF by default (ListingCardThumbBorder, user 2026-08-27: "I hate
    * border — remove border"): the article thumb's hairline is opt-in —
@@ -102,6 +104,7 @@ export default function ContentCard({
   zoom,
   control,
   controlStart,
+  reveal,
   actions,
   expanded = false,
   expandedContent,
@@ -191,6 +194,7 @@ export default function ContentCard({
     ring: ring ?? MEDIA[variant]?.ring ?? false,
     borderHover: MEDIA[variant]?.borderHover ?? false,
     zoom: zoom ?? (isHero ? 'hero' : MEDIA[variant]?.zoom ?? false),
+    fade: MEDIA[variant]?.fade ?? false,
   }
 
   /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,
@@ -221,8 +225,18 @@ export default function ContentCard({
       </>
     ) : box.layout === 'fill-card' ? (
       <>
-        <div className="flex-1 min-w-0 min-h-0 relative overflow-hidden" style={expanded ? { flex: '0 0 50%' } : undefined}>
-          <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
+        <div className="flex-1 min-w-0 min-h-0 relative overflow-hidden" style={{ ...(expanded ? { flex: '0 0 50%' } : null), ...(box.flip ? { perspective: '1000px' } : null) }}>
+          {/* the FLIP (print): PrintGridCard's turn, verbatim — preserve-3d,
+            * 0.4s ease-out, rotateY(180deg) while `selected`; the consumer's
+            * `onClick` reads the rect off `event.currentTarget` for its
+            * FLIP-transition (the seam was always reachable) */}
+          {box.flip ? (
+            <div className="h-full w-full" style={{ transformStyle: 'preserve-3d', backfaceVisibility: 'hidden', transition: 'transform 0.4s ease-out', transform: selected ? 'rotateY(180deg)' : 'rotateY(0deg)' }}>
+              <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
+            </div>
+          ) : (
+            <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
+          )}
           {controlNode}
           {controlStartNode}
         </div>
@@ -247,14 +261,21 @@ export default function ContentCard({
         {textNode && <div className="kol-card-drawer">{textNode}</div>}
       </>
     ) : (
-      /* canvas — media fills the frame, plate floats on top */
+      /* canvas — media fills the frame, plate floats on top. `reveal`
+       * (TypefaceCardAndRow, 2026-08-27): on hover the plate and the media
+       * fade out and the reveal node fades in — the card owns the
+       * choreography (kol-theme `.kol-card.has-reveal`), the consumer owns the
+       * node (what it says and which face it wears are never the family's). */
       <>
-        <div className="absolute" style={{ inset: 0 }}>
+        <div className="kol-card-canvas-media absolute" style={{ inset: 0 }}>
           <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
           {controlStartNode}
         </div>
         {textNode}
+        {reveal != null && (
+          <div className="kol-card-reveal absolute inset-0 flex items-center justify-center p-8 pointer-events-none" style={{ zIndex: 2 }}>{reveal}</div>
+        )}
       </>
     )
 
@@ -277,7 +298,7 @@ export default function ContentCard({
 
   const common = {
     'data-tags': isHero && Array.isArray(text.tags) && text.tags.length ? text.tags.join(' ') : undefined,
-    className: `kol-card group flex ${expanded ? 'flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${className}`.trim(),
+    className: `kol-card group flex ${box.layout === 'canvas' && reveal != null ? 'has-reveal' : ''} ${expanded ? 'flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${className}`.trim(),
     style: {
       /* same reason as ContentRow: rest colours are PROPERTIES, because an
        * inline background/borderColor outranks the hover class and the step

package/src/molecules/ContentMedia.jsx

@@ -1,3 +1,4 @@
+import { cloneElement, isValidElement, useEffect, useRef, useState } from 'react'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 
 /**
@@ -64,6 +65,8 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  *                              thumb sized off the row's own height keeps the
  *                              row's rhythm, where a fixed width leaves it
  *                              floating in a tall row.
+ * @param {boolean}   fade      an <img> child fades in on load (500ms, house curve) and
+ *                              takes loading="lazy" — PrintGridCard's move (2026-08-27)
  * @param {ReactNode} children  the real media
  */
 const FIT = {
@@ -72,6 +75,22 @@ const FIT = {
   compact: 'grid place-items-center [&>img]:max-h-[70%] [&>img]:max-w-[70%] [&>img]:object-contain',
 }
 
+/* the fade: the child <img> is cloned with loading="lazy" and `kol-media-fade`,
+ * flips to `is-loaded` on load — or at once when the browser already has it
+ * (`complete`), since a cached image never fires onLoad after mount */
+function FadeImg({ img }) {
+  const ref = useRef(null)
+  const [loaded, setLoaded] = useState(false)
+  useEffect(() => { if (ref.current?.complete) setLoaded(true) }, [])
+  return cloneElement(img, {
+    ref,
+    loading: img.props.loading ?? 'lazy',
+    className: `${img.props.className ?? ''} kol-media-fade ${loaded ? 'is-loaded' : ''}`.replace(/\s+/g, ' ').trim(),
+    onLoad: (e) => { setLoaded(true); img.props.onLoad?.(e) },
+  })
+}
+const withFade = (children) => (isValidElement(children) && children.type === 'img' ? <FadeImg img={children} /> : children)
+
 export default function ContentMedia({
   ratio = '1 / 1',
   radius = true,
@@ -83,6 +102,7 @@ export default function ContentMedia({
   ring = false,
   zoom = false,
   fillHeight = false,
+  fade = false,
   children,
   className = '',
 }) {
@@ -95,7 +115,7 @@ export default function ContentMedia({
       className={`relative ${fillHeight ? 'h-full w-auto' : 'w-full'} overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? `kol-media-zoom${zoom === 'hero' ? ' is-hero' : ''}` : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
       style={{ ...(ratio != null ? { aspectRatio: ratio } : null), background: bg }}
     >
-      {children}
+      {fade ? withFade(children) : children}
       {/* OVER the artwork, and inert — a hairline that must not eat the click
         * the card above it is listening for. */}
       {ring && <div className={`pointer-events-none absolute inset-0 border border-fg-08 ${round}`} />}

package/src/molecules/ContentRow.jsx

@@ -35,15 +35,10 @@ const BOX = {
    * point at and get nothing back. It has no surface of its own, so it takes
    * the lightest step there is. Its thumb zooms: on an article row the image
    * IS the subject. */
-  article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)', hover: 'var(--kol-oq-02)', thumbZoom: true },
+  article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)', hover: 'var(--kol-oq-02)' },
   /* work and typeface step UP at md — the shipped rows both do, and a work row
    * at a fixed 96 cannot hold the display-03 line it was ruled to carry. */
-  /* thumbSquare (2026-08-26, user on the comparison page): the shipped
-   * WorkListItem thumb is a fixed SQUARE (w-16 h-16 md:w-28 md:h-28) sitting at
-   * the top of a taller row — it does not stretch to the row's height, so the
-   * fill-the-height ruling does not apply here and a 64-wide thumb in a 96-tall
-   * row came out portrait. */
-  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true, thumbZoom: true, thumbSquare: true },
+  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true },
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
@@ -109,22 +104,18 @@ export default function ContentRow({
   ) : (
     <>
       {thumbPx > 0 && (
-        /* THE THUMB FILLS THE ROW'S HEIGHT (user ruling 2026-08-15).
-         *
-         * WIDTH stays pinned to `--kol-row-thumb` — that is what stops it
-         * running away. Only the height stretches, and `ratio={null}` puts
-         * ContentMedia on `h-full` so the image object-covers into whatever
-         * height the row is. An earlier cut freed the width instead and let
-         * `aspect-ratio` fall back to the image's intrinsic size, which is how
-         * one card ate the page. */
-        <div className={`kol-row-thumb shrink-0 ${box.thumbSquare ? 'self-start' : 'self-stretch'}`}>
+        /* THE THUMB IS A FIXED SQUARE BOX (ContentRowsAndPrintCard, user
+         * 2026-08-27: "the image should not control height, image should fit
+         * the row image placeholder") — `--kol-row-thumb` wide, square, at the
+         * top of the row (`.kol-row > .kol-row-thumb` in kol-theme ≥0.63.0), the
+         * media object-covers into it; row height = max(thumb, text). This
+         * retires the 2026-08-15 fill-the-height ruling and the `thumbSquare`
+         * exception it needed. Rows never zoom their thumb — cards keep theirs. */
+        <div className="kol-row-thumb shrink-0 self-start">
           <ContentMedia
-            ratio={box.thumbSquare ? '1 / 1' : null}
+            ratio={null}
             border={box.thumbBorder ?? false}
             bg={box.thumbBg}
-            /* zoom where the thumb IS the subject (article · work), never on a
-             * 48px file chip or a between-header with no media at all */
-            zoom={box.thumbZoom ?? false}
             className={box.thumbRadius ? 'rounded-[var(--kol-radius-xs)]' : ''}
           >
             {media}

package/src/molecules/ContentText.jsx

@@ -17,14 +17,14 @@
  * @param {string} form      card | row
  * @param {ReactNode} title
  * @param {ReactNode} body       article · work · typeface
- * @param {ReactNode} kicker     article only
+ * @param {ReactNode} eyebrow    article only — THE EYEBROW HAS ONE NAME (2026-08-27); `kicker` is its alias
  * @param {ReactNode} detail     catalog · print
  * @param {ReactNode} date       default · article · typeface
  * @param {'card'|'row'|'hero'} form  the block's form; `hero` is article's featured text (ContentCard `hero`)
  * @param {ReactNode} size       default · article (file size / read length)
  * @param {ReactNode} meta       work only
  * @param {number}    gap        inner line gap in px (defaults per variant/form)
- * @param {string}    titleClass … kickerClass, bodyClass, detailClass,
+ * @param {string}    titleClass … eyebrowClass (alias `kickerClass`), bodyClass, detailClass,
  *                    dateClass, sizeClass, metaClass — full class overrides
  */
 
@@ -63,15 +63,15 @@ const RAMP = {
   },
   article: {
     /* kol-content-title-dim: the title dims to 70% on card hover (StackCardHover, 2026-08-27 — ListingCard's move, kol-theme) */
-    card: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
-    row:  { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis kol-content-title-dim', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    card: { eyebrow: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    row:  { eyebrow: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis kol-content-title-dim', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
     /* HERO — the featured card riding a page's fold (ContentCard `hero`,
     /* THE OLD FEATURED CARD, VERBATIM — ListingCard size="hero" as Stack
      * rendered it (user 2026-08-27: "everything was correct in the old featured
      * card … the only thing you had to do was carry it through"): kicker
      * `kol-card-kicker tracking-wide text-fg-64`, title display-section-sm →
      * display-03 uppercase, clamp 2, dim on hover; body mono-14 fg-48 clamp 2. */
-    hero: { kicker: 'kol-card-kicker tracking-wide text-fg-64', title: 'kol-sans-display-03 uppercase line-clamp-2 kol-content-title-dim', body: 'kol-mono-14 text-fg-48 line-clamp-2', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    hero: { eyebrow: 'kol-card-kicker tracking-wide text-fg-64', title: 'kol-sans-display-03 uppercase line-clamp-2 kol-content-title-dim', body: 'kol-mono-14 text-fg-48 line-clamp-2', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
   },
   work: {
     /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving
@@ -88,13 +88,16 @@ const RAMP = {
     row:  { title: 'kol-mono-12 text-body uppercase truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', tags: 'flex flex-wrap items-center gap-1.5' },
   },
   typeface: {
+    /* RULED ON SCREEN (TypefaceCardAndRow, kol-website 2026-08-27): name and
+     * classification are FULL ink, the year steps to 64; the card's title is the
+     * row's title string — one title voice for the typeface family. Ink only. */
     /* same as the row: the SPECIMEN carries the emphasis on a typeface card,
      * so the name steps down. The glyph is what you came to look at. */
-    card: { title: 'kol-mono-16 text-body', body: 'kol-mono-12 text-meta', date: 'kol-mono-12 text-meta' },
+    card: { title: 'kol-mono-14 uppercase text-emphasis', body: 'kol-mono-12 text-meta', date: 'kol-mono-12 text-meta' },
     /* the name steps DOWN to `body`: on a typeface row the SPECIMEN is the
      * thing you came for and it carries the one emphasis. Two full inks in one
      * block is the ladder broken, and the measurement caught it. */
-    row:  { title: 'kol-mono-14 uppercase text-body', body: 'kol-mono-12 text-meta', detail: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta' },
+    row:  { title: 'kol-mono-14 uppercase text-emphasis', body: 'kol-mono-12 text-meta', detail: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64' },
   },
 }
 
@@ -118,9 +121,9 @@ const ORDER = {
    * tight 4px internal gap while tags, kicker and the meta group keep the
    * form's own outer gap. A flat column gave every line the same gap, which
    * read as unrelated lines rather than a heading with its standfirst. */
-  article:  { card: ['tags', 'kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']], row: ['kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']] },
+  article:  { card: ['tags', 'eyebrow', ['stack', 'title', 'body'], ['group', 'date', 'size']], row: ['eyebrow', ['stack', 'title', 'body'], ['group', 'date', 'size']] },
   /* the hero carries its tags as data (ListingCard hero: `data-tags` only) and its meta in the header row above the media — neither is a text line here */
-  articleHero: ['kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']],
+  articleHero: ['eyebrow', ['stack', 'title', 'body'], ['group', 'date', 'size']],
   /* work CARD = the drawer's two lines: title, then one meta line.
    *
    * work ROW = WorkListItem, read off the live /work listing: a LEFT column of
@@ -173,15 +176,18 @@ const GAPS = {
 export default function ContentText({
   variant = 'default',
   form = 'card',
-  title, body, kicker, detail, date, size, meta, tags,
+  title, body, eyebrow, kicker, detail, date, size, meta, tags,
   gap, clamp,
-  titleClass, bodyClass, kickerClass, detailClass, dateClass, sizeClass, metaClass, tagsClass,
+  titleClass, bodyClass, eyebrowClass, kickerClass, detailClass, dateClass, sizeClass, metaClass, tagsClass,
   className = '',
 }) {
+  /* `kicker` / `kickerClass` = aliases of `eyebrow` / `eyebrowClass` (2026-08-27) */
+  eyebrow = eyebrow ?? kicker
+  eyebrowClass = eyebrowClass ?? kickerClass
   const ramp = RAMP[variant]?.[form] ?? RAMP.default[form] ?? RAMP.default.card
   const order = (form === 'hero' && ORDER[`${variant}Hero`]) || ORDER[variant]?.[form] || ORDER.default.card
-  const values = { title, body, kicker, detail, date, size, meta, tags }
-  const overrides = { title: titleClass, body: bodyClass, kicker: kickerClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass, tags: tagsClass }
+  const values = { title, body, eyebrow, detail, date, size, meta, tags }
+  const overrides = { title: titleClass, body: bodyClass, eyebrow: eyebrowClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass, tags: tagsClass }
 
   /* the clamp rides the BODY only — it is the one slot that carries prose long
    * enough to need cutting, and clamping a title is what `truncate` in the ramp

package/src/molecules/SectionText.jsx

@@ -17,7 +17,7 @@
  * an eyebrow is caps by design language, so the span carries
  * `.kol-section-text-eyebrow`; headline, body and actions render as authored.
  *
- * @param {ReactNode} label        section header / kicker
+ * @param {ReactNode} eyebrow      the eyebrow — THE EYEBROW HAS ONE NAME (2026-08-27); `label` is its alias
  * @param {ReactNode} headline     the heading
  * @param {'pull'|'display-01'|'display-02'|'display-03'|'display-04'|'heading-01'|'heading-02'|'heading-03'|'heading-04'|'heading-05'} [headlineSize='heading-02']
  * @param {string}    [headlineAs='h2']  element for the headline
@@ -30,8 +30,8 @@
  * @param {string}    [gap='gap-4']  inner rhythm (a Tailwind gap step)
  * @param {ReactNode} children     extra slots rendered between body and actions
  *                                 (the split's stats strip)
- * @param {string}    labelClass · bodyClass · actionsClass  full class overrides (label default: the hero's `kol-helper-12 text-meta`)
- * @param {object}    slotClass    extra classes per slot — `{ label, headline, body, actions }`
+ * @param {string}    eyebrowClass (alias labelClass) · bodyClass · actionsClass  full class overrides (eyebrow default: the hero's `kol-helper-12 text-meta`)
+ * @param {object}    slotClass    extra classes per slot — `{ eyebrow, headline, body, actions }` (`label` still read)
  *                                 (SectionRevealSeams, 2026-08-26: a consumer's reveal system
  *                                 stamps `reveal` on each part; nothing animates in the DS)
  * @param {object}    slotStyle    inline style per slot — `{ headline: { '--reveal-delay': '0.1s' } }`
@@ -51,6 +51,7 @@ export const HEADLINE_ROLE = {
 }
 
 export default function SectionText({
+  eyebrow,
   label,
   headline,
   headlineSize = 'heading-02',
@@ -66,20 +67,24 @@ export default function SectionText({
    * "closer to the hero eyebrow") — the hero's helper-12 / meta, small and
    * quiet, not the split's mono-18 accent kicker. Uppercase stays: that is
    * the eyebrow ROLE (ruled the same day), on `.kol-section-text-eyebrow`. */
-  labelClass = 'kol-helper-12 text-meta',
+  eyebrowClass,
+  labelClass,
   bodyClass = 'kol-section-text-body',
   actionsClass = 'flex flex-wrap gap-4',
   slotClass = {},
   slotStyle = {},
   className = '',
 }) {
-  const cls = (base, slot) => `${base} ${slotClass[slot] ?? ''}`.trim()
+  /* `label` / `labelClass` / slot key `label` = aliases of `eyebrow` (2026-08-27) */
+  const eb = eyebrow ?? label
+  const ebClass = eyebrowClass ?? labelClass ?? 'kol-helper-12 text-meta'
+  const cls = (base, slot) => `${base} ${slotClass[slot] ?? (slot === 'eyebrow' ? slotClass.label : undefined) ?? ''}`.trim()
   const alignCls = align === 'center' ? 'items-center text-center' : 'items-start text-left'
   return (
     <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()}>
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
-      {label && <span className={cls(`kol-section-text-eyebrow ${labelClass}`, 'label')} style={slotStyle.label}>{label}</span>}
+      {eb && <span className={cls(`kol-section-text-eyebrow ${ebClass}`, 'eyebrow')} style={slotStyle.eyebrow ?? slotStyle.label}>{eb}</span>}
       {headline && <Headline className={cls(`${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
       {body && (typeof body === 'string' ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p> : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)}
       {children}

package/src/organisms/SectionCards.jsx

@@ -22,7 +22,7 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
  *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; content stays vertically centred inside it
  * @param {{title, icon, visual, description, href, backgroundColor, imageAspectRatio}[]} features
- * @param {ReactNode} label · headline · body   the header (heading-03 + mono lede by default)
+ * @param {ReactNode} eyebrow (alias label) · headline · body   the header (heading-03 + mono lede by default)
  * @param {ReactNode} actions               centred action row under the cards
  * @param {Function}  onNavigate            (event, feature) => void
  * @param {string}    itemClassName         extra classes on every card (reveal seam)
@@ -34,6 +34,7 @@ export default function SectionCards({
   theme,
   height = '60',
   features = [],
+  eyebrow,
   label,
   headline,
   headlineSize = 'heading-03',
@@ -55,13 +56,15 @@ export default function SectionCards({
   headerClassName = 'w-full pt-[224px]',
   headerTextWidthClass = 'w-full md:w-[30%]',
 }) {
+  /* `label` = alias of `eyebrow` (2026-08-27) */
+  const eb = eyebrow ?? label
   const [themeRef, themeStamp] = useSectionTheme(theme)
   return (
     <section ref={themeRef} data-theme={themeStamp} className={`w-full flex flex-col justify-center ${minHeightClass(height)} ${theme ? 'bg-surface-primary' : ''} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
       <div className={wrapperClassName}>
-        {(label || headline || body) && (
+        {(eb || headline || body) && (
           <SectionText
-            label={label}
+            eyebrow={eb}
             headline={headline}
             headlineSize={headlineSize}
             headlineAs="p"

package/src/organisms/SectionCta.jsx

@@ -83,7 +83,7 @@ export default function SectionCta({
           {rows.map((row, i) => (
             <SectionText
               key={i}
-              label={row.label}
+              eyebrow={row.label}
               /* the set's eyebrow voice (helper-12 · meta · uppercase by role),
                * not the shipped helper-16 — one eyebrow across the set */
               headline={row.href ? <a href={row.href} className="hover:opacity-70 transition-opacity">{row.value}</a> : row.value}

package/src/organisms/SectionFaq.jsx

@@ -9,7 +9,7 @@ import { minHeightClass } from './sectionHeights.js'
  * 2026-08-26) — the behaviour already shipped in the Accordion molecule; this
  * is the section around it.
  *
- * @param {ReactNode} label · headline · body · actions  the header (SectionText)
+ * @param {ReactNode} eyebrow (alias label) · headline · body · actions  the header (SectionText)
  * @param {string}    [headlineSize='heading-02']
  * @param {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
  *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; content stays vertically centred inside it
@@ -19,6 +19,7 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {string}    className · innerClassName  layout seams
  */
 export default function SectionFaq({
+  eyebrow,
   label,
   headline,
   headlineSize = 'heading-02',
@@ -35,13 +36,15 @@ export default function SectionFaq({
    * column inside it — a measure is a content decision, not the frame */
   innerClassName = 'max-w-[var(--kol-content-column)] flex flex-col gap-8',
 }) {
+  /* `label` = alias of `eyebrow` (2026-08-27) */
+  const eb = eyebrow ?? label
   const [open, setOpen] = useState(defaultOpen ?? null)
   return (
     <section className={`kol-section-faq w-full flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
       <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
       <div className={innerClassName}>
-        {(label || headline || body || actions) && (
-          <SectionText label={label} headline={headline} headlineSize={headlineSize} body={body} actions={actions} slotClass={slotClass} slotStyle={slotStyle} />
+        {(eb || headline || body || actions) && (
+          <SectionText eyebrow={eb} headline={headline} headlineSize={headlineSize} body={body} actions={actions} slotClass={slotClass} slotStyle={slotStyle} />
         )}
         {items.length > 0 && (
           <Accordion className="mt-0 mb-0">

package/src/organisms/SectionHero.jsx

@@ -129,7 +129,7 @@ function MediaLayer({ media }) {
  *                    seams, forwarded whole (SectionHeroCarouselSeams, 2026-08-26: the foundry index sets each
  *                    slide's title in the typeface's own font and routes the CTA through the SPA)
  * @param {string}    height         'full' | '80' | '60' | '40' (viewport tiers) · 'lg' | 'md' | 'screen' (aliases) · or a height class string
- * @param {ReactNode} label · headline · body · actions  the composed text (SectionText)
+ * @param {ReactNode} eyebrow (alias label) · headline · body · actions  the composed text (SectionText)
  * @param {object}    slotClass · slotStyle  per-slot class / style, forwarded to SectionText (a consumer's reveal seam)
  * @param {string}    headlineSize   role; defaults per variant — media 'display-04', split 'heading-02'
  * @param {string}    gap            SectionText's inner rhythm, forwarded as given (no hero default)
@@ -167,6 +167,7 @@ export default function SectionHero({
   descriptionClassName,
   options,
   height = 'lg',
+  eyebrow,
   label,
   headline,
   /* per-variant DEFAULT only — the hero has no say in the text's voice
@@ -185,6 +186,8 @@ export default function SectionHero({
   align = 'center',
   className = '',
 }) {
+  /* `label` = alias of `eyebrow` (2026-08-27) */
+  const eb = eyebrow ?? label
   const [themeRef, themeStamp] = useSectionTheme(theme)
   const themed = theme ? 'bg-surface-primary' : ''
 
@@ -205,7 +208,7 @@ export default function SectionHero({
           {/* BARE — the molecule's own voice; `headlineCase="upper"` is the
             * split hero's one trait, a role on SectionText (SectionHeroNoOverrides) */}
           <SectionText
-            label={label}
+            eyebrow={eb}
             headline={headline}
             headlineSize={headlineSize ?? 'heading-02'}
             headlineCase="upper"
@@ -227,7 +230,7 @@ export default function SectionHero({
     align === 'start' ? 'justify-start'
     : align === 'end' ? 'justify-end'
     : 'justify-center'
-  const composed = label || headline || body || actions
+  const composed = eb || headline || body || actions
 
   /* the foot straddles the fold: the organism owns the negative margin */
   const withFoot = (hero) =>
@@ -289,7 +292,7 @@ export default function SectionHero({
      * with it is not the bar; one voice across the set is. `gap` is the
      * consumer's if they want it. */
     <SectionText
-      label={label}
+      eyebrow={eb}
       headline={headline}
       headlineSize={headlineSize ?? 'display-04'}
       body={body}

package/src/organisms/SectionNewsletter.jsx

@@ -31,7 +31,7 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {'full'|'80'|'60'|'40'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
  *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; content stays vertically centred inside it
  * @param {'inverse'|'light'|'dark'} theme  the paired theme of whatever is live, or a pinned one — stamped on the section
- * @param {ReactNode} label        eyebrow above the headline (uppercase by role)
+ * @param {ReactNode} eyebrow      eyebrow above the headline (uppercase by role); `label` is its alias
  * @param {ReactNode} headline     heading (display-01 by default; `headlineSize` picks another role)
  * @param {string}    headlineSize SectionText role (default 'display-01')
  * @param {ReactNode} body         lede under the heading
@@ -48,6 +48,7 @@ import { minHeightClass } from './sectionHeights.js'
 export default function SectionNewsletter({
   height = '60',
   theme,
+  eyebrow,
   label,
   headline,
   headlineSize = 'display-01',
@@ -63,6 +64,8 @@ export default function SectionNewsletter({
   slotStyle,
   className = '',
 }) {
+  /* `label` = alias of `eyebrow` (2026-08-27) */
+  const eb = eyebrow ?? label
   const [email, setEmail] = useState('')
   const [status, setStatus] = useState('idle') // 'idle' | 'submitting' | 'success' | 'error'
   const [themeRef, themeStamp] = useSectionTheme(theme)
@@ -106,7 +109,7 @@ export default function SectionNewsletter({
         <div className="mx-auto max-w-[64rem]">
         <SectionText
           align="center"
-          label={label}
+          eyebrow={eb}
           headline={headline}
           headlineSize={headlineSize}
           body={body}

package/src/organisms/SectionSplit.jsx

@@ -23,7 +23,7 @@ import { minHeightClass } from './sectionHeights.js'
  *   `inverse` = the paired theme of the nearest live one, following the toggle;
  *   `light` / `dark` pinned; omit to inherit. Stamps `data-theme` on the root and
  *   paints its surface — every token inside resolves to the other theme's.
- * @param {ReactNode} label        mono eyebrow above the headline (accent)
+ * @param {ReactNode} eyebrow      mono eyebrow above the headline (accent); `label` is its alias
  * @param {ReactNode} headline     display pull; `<em>` renders as the italic accent
  * @param {string}    [headlineSize='pull']  which type ROLE the heading wears
  * @param {string}    [headlineAs='h1']
@@ -54,6 +54,7 @@ import { minHeightClass } from './sectionHeights.js'
 
 export default function SectionSplit({
   theme,
+  eyebrow,
   label,
   headline,
   headlineSize = 'pull',
@@ -76,6 +77,8 @@ export default function SectionSplit({
   innerClassName = '',
   columnClassName = '',
 }) {
+  /* `label` = alias of `eyebrow` (2026-08-27) */
+  const eb = eyebrow ?? label
   const [themeRef, themeStamp] = useSectionTheme(theme)
   const sectionStyle = bgImage
     ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
@@ -100,7 +103,7 @@ export default function SectionSplit({
         {/* `order` rather than `flex-row-reverse`: the grid is one column below
           * 901px, and DOM order is what decides the stack there. */}
         <SectionText
-          label={label}
+          eyebrow={eb}
           headline={headline}
           headlineSize={headlineSize}
           headlineAs={headlineAs}