@kolkrabbi/kol-component 0.76.2 → 0.76.4

package/package.json

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

@@ -65,14 +65,18 @@ export default function SectionCta({
   ]
   return (
     <section className={`w-full bg-auto ${className}`.trim()}>
-      <div className="w-full py-10 flex flex-col md:flex-row items-start gap-12 overflow-hidden">
+      {/* capped at 1600 and centred (SectionCtaEditorial, user 2026-08-26:
+        * "I would cap it at 1800 or 1600") — the surface stays full width,
+        * the columns stop hugging the viewport edges at 2000 */}
+      <div className="w-full max-w-[1600px] mx-auto py-10 flex flex-col md:flex-row items-start gap-12 overflow-hidden">
         <div className="flex-1 self-stretch text-auto kol-sans-display-01">{eyebrow}</div>
         <div className="flex-1 self-stretch pb-6 md:pt-32 flex flex-col justify-end items-start gap-12">
           {rows.map((row, i) => (
             <SectionText
               key={i}
               label={row.label}
-              labelClass="text-auto kol-helper-16"
+              /* the set's eyebrow voice (helper-12 · meta · uppercase by role),
+               * not the shipped helper-16 — one eyebrow across the set */
               headline={row.href ? <a href={row.href} className="hover:opacity-70 transition-opacity">{row.value}</a> : row.value}
               headlineAs="div"
               headlineClass="text-auto kol-sans-heading-01"

package/src/organisms/SectionSplit.jsx

@@ -27,6 +27,11 @@ import SectionText from '../molecules/SectionText.jsx'
  * @param {ReactNode} media        image / video / interactive node for the visual column
  * @param {string}    [ratio='4/5'] aspect ratio of the media frame
  * @param {boolean}   [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
+ * @param {boolean}   [mediaClip=true]   the frame clips its media (overflow hidden + radius). `false`
+ *   for a node that transforms in 3D (a tilt card) — the frame keeps its ratio and radius,
+ *   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 {'right'|'left'|'center'} [align='right']  media side, or centred single column
  * @param {ReactNode} caption      mono caption + gradient veil over the media
  * @param {string}    bgImage      inline cover background on the section
@@ -44,6 +49,7 @@ export default function SectionSplit({
   media,
   ratio = '4/5',
   mediaHover = false,
+  mediaClip = true,
   align = 'right',
   caption,
   bgImage,
@@ -93,7 +99,7 @@ export default function SectionSplit({
         </SectionText>
         {media && (
           <div
-            className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] overflow-hidden ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
             style={{ aspectRatio: ratio }}
           >
             {media}