@kolkrabbi/kol-component 0.71.0 → 0.72.0

package/package.json

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