@kolkrabbi/kol-component 0.171.0 → 0.173.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.171.0",
+  "version": "0.173.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/organisms/SectionSplit.jsx

@@ -44,6 +44,21 @@ import { minHeightClass } from './sectionHeights.js'
  *   the node owns its own clipping (SectionSplitMediaClip, kol-website 2026-08-26: TiltCard's
  *   lifted corners were being cut flat). `mediaHover` and a self-animating node are
  *   mutually exclusive in practice — pick one.
+ * @param {boolean}   [fill=false]  THE HALF-FILLING FORM (section-split-fill-variant,
+ *   kol-client-olina 2026-09-03). The bounded frame is the right rule for a card with media
+ *   and the wrong one for a half: `fill` releases it — the media column loses the ratio, the
+ *   rung-minus-padding height, the radius and the section padding, and covers its half edge to
+ *   edge, with the text centred in the other. `align` still picks the side; below 901px the
+ *   media stacks on top at `min-h-[50vh]`. This is the layout `SectionHero variant="split"`
+ *   draws, without the hero's overlay / glass panel / carousel machinery or its name — the
+ *   user's reason for not putting a hero under an About section.
+ * @param {'center'|'start'} [textAlign]  how the TYPE rags inside the text block —
+ *   `align` places the block, this aligns what is in it (section-split-fill-text-align,
+ *   kol-client-olina 2026-09-03; user: *"same placement but just aligned to left … can the
+ *   text align left and everything else kinda stays as is?"*). Works in BOTH forms rather
+ *   than only in `fill`, because a prop that silently does nothing in the default form is a
+ *   seam wired to nothing. Unset, each form keeps exactly what it did: `fill` centres,
+ *   bounded follows `align` (centred when `align="center"`, else start).
  * @param {'right'|'left'|'center'} [align='right']  media side, or centred single column
  * @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; the columns stay vertically centred inside it
@@ -72,6 +87,8 @@ export default function SectionSplit({
   mediaHover = false,
   mediaClip = true,
   align = 'right',
+  textAlign,
+  fill = false,
   height = '60',
   caption,
   bgImage,
@@ -91,9 +108,67 @@ export default function SectionSplit({
   const bleed = fullBleed ? FULL_BLEED : ''
   const centred = align === 'center'
   const mediaFirst = align === 'left'
+  /* unset = each form's own prior behaviour, so nothing existing moves */
+  const fillText = textAlign ?? 'center'
+  const boundedText = textAlign ?? (centred ? 'center' : 'start')
+  const justify = (a) => (a === 'center' ? 'justify-center' : 'justify-start')
   const grid = centred
     ? 'grid grid-cols-1 justify-items-center gap-[clamp(48px,6vw,96px)]'
     : 'grid grid-cols-1 min-[901px]:grid-cols-2 items-center gap-[clamp(48px,6vw,96px)]'
+
+  /* THE FILL FORM — two halves, no frame. Deliberately its own return rather
+   * than conditionals threaded through the bounded one: every bounded rule
+   * (the container cap, the section padding, the ratio box, the rung-minus-
+   * padding height) is a rule this form does not have, so sharing the JSX would
+   * mean negating each of them at its own site. `.kol-section-split-visual`
+   * stays on the media half because its `img { object-fit: cover }` rule is
+   * exactly what a filling half wants — the class earns its keep here without a
+   * line of new CSS. `centred` has no meaning with two halves and is ignored. */
+  if (fill && media) {
+    return (
+      <section
+        ref={themeRef}
+        data-theme={themeStamp}
+        className={`kol-section-split kol-section-split--fill grid grid-cols-1 min-[901px]:grid-cols-2 ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
+        style={sectionStyle}
+      >
+        <div
+          className={`kol-section-split-visual relative h-full min-h-[50vh] overflow-hidden min-[901px]:min-h-0 ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? '' : 'min-[901px]:order-2'} ${columnClassName}`.replace(/\s+/g, ' ').trim()}
+        >
+          {media}
+          {caption && <div className="kol-section-split-visual-veil" aria-hidden="true" />}
+          {caption && <span className="kol-section-split-visual-caption">{caption}</span>}
+        </div>
+        <div className={`flex items-center justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${mediaFirst ? '' : 'min-[901px]:order-1'} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
+          <SectionText
+            eyebrow={eb}
+            headline={headline}
+            headlineSize={headlineSize}
+            headlineAs={headlineAs}
+            body={body}
+            actions={actions}
+            actionsClass={`flex flex-wrap gap-4 pt-2 ${justify(fillText)}`}
+            align={fillText}
+            slotClass={slotClass}
+            slotStyle={slotStyle}
+            className="max-w-[var(--kol-content-column)]"
+          >
+            {meta && meta.length > 0 && (
+              <div className={`kol-section-split-meta flex flex-wrap gap-y-7 gap-x-12 pt-4 ${justify(fillText)}`}>
+                {meta.map((m) => (
+                  <div key={m.label} className="flex flex-col gap-0.5">
+                    <span className="kol-section-split-meta-num">{m.num}</span>
+                    <span className="kol-section-split-meta-label">{m.label}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </SectionText>
+        </div>
+      </section>
+    )
+  }
+
   return (
     <section
       ref={themeRef}
@@ -114,14 +189,14 @@ export default function SectionSplit({
           headlineAs={headlineAs}
           body={body}
           actions={actions}
-          actionsClass={`flex flex-wrap gap-4 pt-2${centred ? ' justify-center' : ''}`}
-          align={centred ? 'center' : 'start'}
+          actionsClass={`flex flex-wrap gap-4 pt-2 ${justify(boundedText)}`}
+          align={boundedText}
           slotClass={slotClass}
           slotStyle={slotStyle}
           className={`max-w-[640px] ${mediaFirst ? 'order-2' : ''} ${columnClassName}`}
         >
           {meta && meta.length > 0 && (
-            <div className={`kol-section-split-meta flex flex-wrap gap-y-7 gap-x-12 pt-4${centred ? ' justify-center' : ''}`}>
+            <div className={`kol-section-split-meta flex flex-wrap gap-y-7 gap-x-12 pt-4 ${justify(boundedText)}`}>
               {meta.map((m) => (
                 <div key={m.label} className="flex flex-col gap-0.5">
                   <span className="kol-section-split-meta-num">{m.num}</span>