@kolkrabbi/kol-component 0.154.1 → 0.156.0

package/package.json

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

@@ -283,7 +283,16 @@ 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%' } : null), ...(doFlip ? { perspective: '1000px' } : null) }}>
+        {/* THE SPLIT HAS A NARROW RUNG (ContentCardExpandedSplitStacks, kol-mirror
+          * 2026-09-01): below `md` the expanded halves STACK — media on top at
+          * its own ratio, content full width under it. Side by side, a 350px
+          * card gave each half 174 and the prose 126, and one module's specs
+          * ran 1177px tall. The 50% half is a `md:` class now, not an inline
+          * style — an inline flex-basis has no breakpoint. */}
+        <div
+          className={`flex-1 min-w-0 min-h-0 relative overflow-hidden ${expanded ? 'max-md:flex-none max-md:aspect-[var(--kol-card-ratio)] md:flex-[0_0_50%]' : ''}`}
+          style={{ ...(expanded ? { '--kol-card-ratio': r ?? '3 / 2' } : null), ...(doFlip ? { 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
@@ -356,7 +365,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 ${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' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
+    className: `kol-card group flex ${box.layout === 'canvas' && reveal != null ? 'has-reveal' : ''} ${expanded ? 'flex-col md: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' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${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/ProfileCard.jsx

@@ -2,6 +2,8 @@ import { useId, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import IconFrame from '../atoms/IconFrame.jsx'
 import { Tooltip } from '../utilities/Popover.jsx'
+import useSectionTheme from '../hooks/useSectionTheme.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 
 /* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
  * check can't see). */
@@ -12,7 +14,20 @@ import { Tooltip } from '../utilities/Popover.jsx'
  * a square photo with a disclosure control inset on it, and a SHELF that opens
  * under it (vertical) or beside it (horizontal) — logo, name, mailto, a rack of
  * socials. The shelf is `bg-surface-inverse` / `text-auto-inverse` at every
- * theme: the inverse of the page is the design, not a bug.
+ * theme by default: the inverse of the page is the design, not a bug.
+ *
+ * THE SHELF HAS SEAMS (user, 2026-09-01: "is it dark in light mode? are there
+ * light/dark or color variants on the shelf? variant on toggle? variant on
+ * logo? padding?"), on the mechanisms the section family already uses:
+ * `shelfTheme` is the section `theme` stamp (`data-theme` on the shelf, so
+ * every token inside — text, logo ink via currentColor, the mailto's underline
+ * — resolves to that theme and `inverse` follows the toggle); `shelfBackground`
+ * is the section `background` prop (a named surface or a raw token); with a
+ * theme stamped the default paint is that theme's `primary`, without one it is
+ * `inverse` with inverse ink, exactly as shipped. `controlVariant` goes straight
+ * to the disclosure's `IconFrame`; `pad` is `ContentCard`'s — one step on
+ * `--kol-pad-card-*`, overriding the size ramp's padding. The logo is a slot
+ * and stays one: its ink follows the shelf, a coloured mark is the asset's.
  *
  * THE SHELF SIZES TO ITS CONTENT. The source held it in a fixed box
  * (`h-60`/`h-44`/`h-32`/`h-24`, `overflow-hidden`) and every vertical size
@@ -54,6 +69,10 @@ import { Tooltip } from '../utilities/Popover.jsx'
  * @param {'xl'|'lg'|'md'|'sm'} size  the ramp + width cap (680 · 480 · 320 · 200); default xl
  * @param {'vertical'|'horizontal'} orientation  shelf under the photo (card grows) or beside it (card holds its square, photo crops)
  * @param {string}    variant      alias for the source's names — `'lg-h'` = `size="lg" orientation="horizontal"`, any other value = `size`
+ * @param {'inverse'|'light'|'dark'} shelfTheme  the shelf's theme scope — stamps `data-theme`; `inverse` = the paired theme of the page, following the toggle; omit for the shipped inverse-surface look
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} shelfBackground  the shelf's surface — a named surface or a raw utility / token string; default `inverse`, or `primary` once a `shelfTheme` is stamped
+ * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'nav'|'grey'|'danger'} controlVariant  the disclosure's `IconFrame` variant (default `secondary`)
+ * @param {'sm'|'md'|'lg'} pad  shelf padding on `--kol-pad-card-*` (12 · 16 · 24), overriding the size ramp's
  * @param {boolean}   open         controlled open state
  * @param {boolean}   defaultOpen  uncontrolled initial state (default false)
  * @param {Function}  onOpenChange `(open) => void`
@@ -81,6 +100,10 @@ export default function ProfileCard({
   size = 'xl',
   orientation = 'vertical',
   variant,
+  shelfTheme,
+  shelfBackground,
+  controlVariant = 'secondary',
+  pad,
   open,
   defaultOpen = false,
   onOpenChange,
@@ -99,11 +122,19 @@ export default function ProfileCard({
   }
   const shelfId = useId()
 
+  /* the shelf's paint and ink: stamped → that theme's own tokens (`text-auto`
+   * resolves inside the stamp); unstamped → the shipped inverse pair */
+  const [themeRef, themeStamp] = useSectionTheme(shelfTheme)
+  const shelfBg = surfaceClass(shelfBackground, shelfTheme ? 'primary' : 'inverse')
+  const ink = !shelfTheme && shelfBg === 'bg-surface-inverse' ? 'text-auto-inverse' : 'text-auto'
+  const padStyle = pad ? { padding: `var(--kol-pad-card-${pad})` } : undefined
+  const padCls = pad ? '' : ramp.pad
+
   const control = (
     <div className={`absolute ${ramp.control}`}>
       <IconFrame
         name={isOpen ? 'minus' : 'plus'}
-        variant="secondary"
+        variant={controlVariant}
         size="md"
         radius="full"
         aria-expanded={isOpen}
@@ -120,15 +151,15 @@ export default function ProfileCard({
     /* `[&_svg]` not `[&>svg]`: a brand `Asset` wraps its svg, so the site had to
      * re-add the sizing on the node it passed — the slot sizes whatever it is
      * handed, wrapped or bare */
-    <div className={`inline-flex ${ramp.logo} text-auto-inverse [&>*]:h-full [&_svg]:h-full [&_svg]:w-auto`}>{logo}</div>
+    <div className={`inline-flex ${ramp.logo} ${ink} [&>*]:h-full [&_svg]:h-full [&_svg]:w-auto`}>{logo}</div>
   )
   const contact = (
     <div className={`flex flex-col ${horizontal ? 'gap-1.5' : 'gap-1'} antialiased`} style={{ lineHeight: 1 }}>
-      {name && <span className={`${ramp.text} text-auto-inverse`}>{name}</span>}
+      {name && <span className={`${ramp.text} ${ink}`}>{name}</span>}
       {email && (
         <a
           href={`mailto:${email}`}
-          className={`${ramp.text} text-auto-inverse underline decoration-2 decoration-transparent hover:decoration-current transition-all`}
+          className={`${ramp.text} ${ink} underline decoration-2 decoration-transparent hover:decoration-current transition-all`}
         >
           {email}
         </a>
@@ -144,7 +175,7 @@ export default function ProfileCard({
             target="_blank"
             rel="noopener noreferrer"
             aria-label={label}
-            className={`${ramp.iconBox} flex items-center justify-center text-auto-inverse transition-transform hover:scale-125`}
+            className={`${ramp.iconBox} flex items-center justify-center ${ink} transition-transform hover:scale-125`}
           >
             <Icon name={icon} size={ramp.iconSize} />
           </a>
@@ -161,8 +192,8 @@ export default function ProfileCard({
       >
         {/* Shelf — LEFT. The inner column holds the open width so the text does
           * not reflow while the track animates. */}
-        <div id={shelfId} className="min-w-0 overflow-hidden bg-surface-inverse">
-          <div className={`h-full ${ramp.pad} flex flex-col justify-between items-start`} style={{ width: HORIZONTAL.shelf }}>
+        <div id={shelfId} ref={themeRef} data-theme={themeStamp} className={`min-w-0 overflow-hidden ${shelfBg}`}>
+          <div className={`h-full ${padCls} flex flex-col justify-between items-start`} style={{ width: HORIZONTAL.shelf, ...padStyle }}>
             {lockup}
             <div className="flex flex-col gap-8">
               {contact}
@@ -192,8 +223,8 @@ export default function ProfileCard({
         className="grid transition-[grid-template-rows] duration-300 ease-in-out"
         style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}
       >
-        <div id={shelfId} className="min-h-0 overflow-hidden bg-surface-inverse">
-          <div className={`${ramp.pad} flex justify-between items-end`}>
+        <div id={shelfId} ref={themeRef} data-theme={themeStamp} className={`min-h-0 overflow-hidden ${shelfBg}`}>
+          <div className={`${padCls} flex justify-between items-end`} style={padStyle}>
             <div className="self-stretch flex flex-col justify-between items-start">
               {lockup}
               {contact}

package/src/organisms/SectionCards.jsx

@@ -1,6 +1,6 @@
 import SectionCardItem from '../molecules/SectionCardItem.jsx'
 import { FULL_BLEED } from './sectionBleed.js'
-import { surfaceClass } from './sectionSurface.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
 import useSectionTheme from '../hooks/useSectionTheme.js'
 import { minHeightClass } from './sectionHeights.js'

package/src/organisms/SectionCta.jsx

@@ -1,6 +1,6 @@
 import Button from '../atoms/Button.jsx'
 import { FULL_BLEED } from './sectionBleed.js'
-import { surfaceClass } from './sectionSurface.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 import SectionText from '../molecules/SectionText.jsx'
 import { minHeightClass } from './sectionHeights.js'
 

package/src/organisms/SectionFaq.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { FULL_BLEED } from './sectionBleed.js'
-import { surfaceClass } from './sectionSurface.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 import { Accordion, AccordionPanel } from '../molecules/Accordion.jsx'
 import SectionText from '../molecules/SectionText.jsx'
 import { minHeightClass } from './sectionHeights.js'

package/src/organisms/SectionHero.jsx

@@ -1,6 +1,6 @@
 import { isValidElement } from 'react'
 import { FULL_BLEED, bleedClass } from './sectionBleed.js'
-import { surfaceClass } from './sectionSurface.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'

package/src/organisms/SectionNewsletter.jsx

@@ -1,6 +1,6 @@
 import { useId, useState } from 'react'
 import { bleedClass } from './sectionBleed.js'
-import { surfaceClass } from './sectionSurface.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 import Input from '../atoms/Input.jsx'
 import Button from '../atoms/Button.jsx'
 import SectionText from '../molecules/SectionText.jsx'

package/src/organisms/SectionSplit.jsx

@@ -1,6 +1,6 @@
 import SectionText from '../molecules/SectionText.jsx'
 import { FULL_BLEED } from './sectionBleed.js'
-import { surfaceClass } from './sectionSurface.js'
+import { surfaceClass } from '../utilities/sectionSurface.js'
 import useSectionTheme from '../hooks/useSectionTheme.js'
 import { minHeightClass } from './sectionHeights.js'