@kolkrabbi/kol-component 0.90.2 → 0.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.90.2",
+  "version": "0.91.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

@@ -91,6 +91,8 @@ const MEDIA = {
 
 export default function ContentCard({
   variant = 'default',
+  hero = false,
+  label,
   pad,
   media,
   ratio,
@@ -110,10 +112,31 @@ export default function ContentCard({
   ...text
 }) {
   const box = BOX[variant] ?? BOX.default
+  /* HERO (2026-08-27 — the featured card riding a page's fold; ListingCard
+   * size="hero" had no ContentCard equivalent, which is why Stack still
+   * imported it): a header row above the media — `label` left, `meta` chips
+   * right — the media on the zoom's hero rung (1.02), the text on
+   * ContentText's `hero` form (display-03 title). article only; the row form
+   * has no hero. */
+  const isHero = hero && variant === 'article'
+  const { meta: heroMeta, ...textSlots } = text
+  if (!isHero) Object.assign(textSlots, { meta: text.meta })
+  if (isHero) delete textSlots.tags
+  const metaChips = isHero && heroMeta != null ? (Array.isArray(heroMeta) ? heroMeta : [heroMeta]) : null
+  const heroHeader = isHero && (label != null || metaChips?.length) ? (
+    <div className="kol-card-hero-header flex items-center justify-between" style={{ marginBottom: 'var(--kol-spacing-4)' }}>
+      {label != null && <div className="kol-helper-14 text-meta">{label}</div>}
+      {metaChips?.length > 0 && (
+        <div className="flex gap-3 kol-helper-12 text-meta">
+          {metaChips.map((item, i) => <span key={i}>{item}</span>)}
+        </div>
+      )}
+    </div>
+  ) : null
   const r = ratio ?? RATIOS[variant]
   const padding = pad ? `var(--kol-pad-card-${pad})` : box.pad
   /* image-only cards (print) pass no text slots — the empty plate must not render */
-  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta', 'tags'].some((k) => text[k] != null)
+  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta', 'tags'].some((k) => textSlots[k] != null)
   /* `actions` sit IN THE TEXT PLATE, bottom-right (user ruling 2026-08-15:
    * *"space in text bottom right"*). Not stacked under the copy in their own
    * row — that grew the card — and not on the media, which was my call to make
@@ -138,7 +161,7 @@ export default function ContentCard({
         zIndex: box.layout === 'canvas' ? 1 : undefined,
       }}
     >
-      {hasText && <ContentText variant={variant} form="card" {...text} />}
+      {hasText && <ContentText variant={variant} form={isHero ? 'hero' : 'card'} {...textSlots} />}
       {/* ABSOLUTE, not a flex sibling: the plate's height moves with the title
         * and the meta, so a laid-out stack would stretch or drift with it. The
         * inset reads the SAME pad token the plate uses, so the icons sit the
@@ -166,7 +189,7 @@ export default function ContentCard({
     frame: frame ?? MEDIA[variant]?.frame ?? false,
     ring: ring ?? MEDIA[variant]?.ring ?? false,
     borderHover: MEDIA[variant]?.borderHover ?? false,
-    zoom: zoom ?? MEDIA[variant]?.zoom ?? false,
+    zoom: zoom ?? (isHero ? 'hero' : MEDIA[variant]?.zoom ?? false),
   }
 
   /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,
@@ -181,6 +204,7 @@ export default function ContentCard({
   const body =
     box.layout === 'stack' ? (
       <>
+        {heroHeader}
         <div className="relative">
           <ContentMedia ratio={r} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
@@ -241,6 +265,7 @@ export default function ContentCard({
   const hoverBg = HOVER[variant]
 
   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(),
     style: {
       /* same reason as ContentRow: rest colours are PROPERTIES, because an

package/src/molecules/ContentText.jsx

@@ -20,6 +20,7 @@
  * @param {ReactNode} kicker     article only
  * @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)
@@ -64,6 +65,11 @@ const RAMP = {
     /* 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' },
+    /* HERO — the featured card riding a page's fold (ContentCard `hero`,
+     * 2026-08-27): ListingCard size="hero"'s text, read off Stack — kicker in
+     * the helper-16 voice, title on display-03 (Stack's ruled hero title),
+     * body mono-14. One emphasis (the title), everything else meta/body. */
+    hero: { kicker: 'kol-helper-16 text-meta', title: 'kol-sans-display-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' },
   },
   work: {
     /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving
@@ -111,6 +117,8 @@ const ORDER = {
    * 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']] },
+  /* 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']],
   /* 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
@@ -155,7 +163,7 @@ const GAPS = {
   default: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-2)' },
   catalog: { card: 'var(--kol-spacing-1)', row: 'var(--kol-spacing-2)' },
   print: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-2)' },
-  article: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)' },
+  article: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)', hero: 'var(--kol-spacing-3)' },
   work: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-4)' },
   typeface: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-6)' },
 }
@@ -169,7 +177,7 @@ export default function ContentText({
   className = '',
 }) {
   const ramp = RAMP[variant]?.[form] ?? RAMP.default[form] ?? RAMP.default.card
-  const order = ORDER[variant]?.[form] ?? ORDER.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 }