@kolkrabbi/kol-component 0.172.0 → 0.173.0

package/package.json

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

@@ -52,6 +52,13 @@ import { minHeightClass } from './sectionHeights.js'
  *   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
@@ -80,6 +87,7 @@ export default function SectionSplit({
   mediaHover = false,
   mediaClip = true,
   align = 'right',
+  textAlign,
   fill = false,
   height = '60',
   caption,
@@ -100,6 +108,10 @@ 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)]'
@@ -135,14 +147,14 @@ export default function SectionSplit({
             headlineAs={headlineAs}
             body={body}
             actions={actions}
-            actionsClass="flex flex-wrap gap-4 pt-2 justify-center"
-            align="center"
+            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-center">
+              <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>
@@ -177,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>