@kolkrabbi/kol-component 0.71.0 → 0.73.0

package/package.json

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

@@ -12,6 +12,13 @@ import ContentText from './ContentText.jsx'
  *   canvas     the card is the ratio frame; media fills it absolutely and the
  *              text plate floats on top — typeface (details over specimen)
  *
+ * EXPANDED (2026-08-26, the GridCard retirement): a fill-card variant with
+ * `expanded` grows to a 2×2 cell — `grid-column / grid-row: span 2`, no
+ * ratio — and flips to a ROW: media on the right at 50%, `expandedContent`
+ * (the info field + button the consumer authors) on the left in a lg-padded,
+ * space-between column. Verbatim the 2×2 GridCard shipped; without it the
+ * three GridCard repos could not swap. Neighbour-hiding stays consumer-side.
+ *
  * Padding spells the TOKENS (--kol-pad-card-{sm,md,lg} = 12/16/24), never a
  * literal. Passing `pad` overrides the plate padding with one token step
  * (named `pad`, not `size` — `size` is the ruled TEXT slot). Image-only cards
@@ -91,6 +98,8 @@ export default function ContentCard({
   zoom,
   control,
   actions,
+  expanded = false,
+  expandedContent,
   selected = false,
   onClick,
   href,
@@ -178,11 +187,18 @@ export default function ContentCard({
       </>
     ) : box.layout === 'fill-card' ? (
       <>
-        <div className="flex-1 min-w-0 relative overflow-hidden">
+        <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>
           {controlNode}
         </div>
-        {textNode}
+        {expanded ? (
+          <div
+            className="flex flex-1 flex-col justify-between overflow-auto"
+            style={{ padding: 'var(--kol-pad-card-lg)' }}
+          >
+            {expandedContent}
+          </div>
+        ) : textNode}
       </>
     ) : box.layout === 'drawer' ? (
       <>
@@ -223,7 +239,7 @@ export default function ContentCard({
   const hoverBg = HOVER[variant]
 
   const common = {
-    className: `kol-card group flex 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 ${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
@@ -231,8 +247,13 @@ export default function ContentCard({
       '--kol-card-bg': box.bg ?? undefined,
       '--kol-card-border': box.border ? (selected ? 'var(--kol-fg-64)' : box.border) : undefined,
       '--kol-content-hover-bg': hoverBg ?? undefined,
-      aspectRatio: box.height ? undefined : (box.layout !== 'stack' ? r : undefined),
+      aspectRatio: box.height || expanded ? undefined : (box.layout !== 'stack' ? r : undefined),
       height: box.height,
+      gridColumn: expanded ? 'span 2' : undefined,
+      gridRow: expanded ? 'span 2' : undefined,
+      /* the grow/shrink between the two states rides the house curve; only a
+       * card that CAN expand carries the transition */
+      transition: expandedContent != null ? 'all 300ms var(--kol-ease-house)' : undefined,
     },
   }
 

package/src/molecules/SectionText.jsx

@@ -13,7 +13,9 @@
  * Every default class is a SEAM (the ContentText pattern): pass `labelClass`
  * / `bodyClass` / `actionsClass` to replace the string whole — that is how
  * SectionHero's eyebrow and SectionCta's rows wear their own voices on the
- * same anatomy. No casing transforms — author strings in their final case.
+ * same anatomy. THE LABEL IS UPPERCASE BY ROLE (user ruling 2026-08-26):
+ * 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} headline     the heading
@@ -60,7 +62,9 @@ export default function SectionText({
   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()}>
-      {label && <span className={labelClass}>{label}</span>}
+      {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
+        * `labelClass` is the voice riding beside it */}
+      {label && <span className={`kol-section-text-eyebrow ${labelClass}`}>{label}</span>}
       {headline && <Headline className={headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}>{headline}</Headline>}
       {body && (typeof body === 'string' ? <p className={bodyClass}>{body}</p> : <div className={bodyClass}>{body}</div>)}
       {children}

package/src/organisms/SectionCards.jsx

@@ -11,7 +11,7 @@ import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
  * Every block is presence-gated (header on any text prop, cards on
  * `features.length`, actions on `actions`), so omitted slots emit no empty
  * nodes. Card links are plain anchors; pass `onNavigate` to intercept same-tab
- * navigations in an SPA. Casing is authored at the call site.
+ * navigations in an SPA. The label is uppercase by role; the rest as authored.
  *
  * @param {{title, icon, visual, description, href, backgroundColor, imageAspectRatio}[]} features
  * @param {ReactNode} label · headline · body   the header (heading-03 + mono lede by default)

package/src/organisms/SectionCta.jsx

@@ -6,7 +6,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * label-over-value rows, each a `SectionText` (label in the helper voice,
  * value as a heading-01; a row with `href` renders its value as a link).
  * `CtaGlobal` is this component under its old name (alias kept). Columns sit
- * side by side from `md` up and stack below. Casing is authored at the call site.
+ * side by side from `md` up and stack below. Row labels are uppercase by role.
  *
  * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
  * @param {ReactNode} promptLabel   prompt-row label

package/src/organisms/SectionSplit.jsx

@@ -15,7 +15,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * `meta` and `actions` are mutually exclusive by intent (pick one); `actions`
  * is conventionally a row of KOL Buttons. The media column renders only when
  * `media` is passed, and `caption` gates both the gradient veil and the
- * caption element. Casing is authored at the call site.
+ * caption element. The label is uppercase by role; the rest renders as authored.
  *
  * @param {ReactNode} label        mono eyebrow above the headline (accent)
  * @param {ReactNode} headline     display pull; `<em>` renders as the italic accent