@kolkrabbi/kol-component 0.76.1 → 0.76.3

package/package.json

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

@@ -27,7 +27,7 @@
  * @param {string}    [gap='gap-4']  inner rhythm (a Tailwind gap step)
  * @param {ReactNode} children     extra slots rendered between body and actions
  *                                 (the split's stats strip)
- * @param {string}    labelClass · bodyClass · actionsClass  full class overrides
+ * @param {string}    labelClass · bodyClass · actionsClass  full class overrides (label default: the hero's `kol-helper-12 text-meta`)
  * @param {string}    className    extra classes on the block
  */
 export const HEADLINE_ROLE = {
@@ -54,7 +54,11 @@ export default function SectionText({
   align = 'start',
   gap = 'gap-4',
   children,
-  labelClass = 'kol-section-text-label',
+  /* ONE eyebrow voice across the set (SectionTextLabelVoice, user 2026-08-26:
+   * "closer to the hero eyebrow") — the hero's helper-12 / meta, small and
+   * quiet, not the split's mono-18 accent kicker. Uppercase stays: that is
+   * the eyebrow ROLE (ruled the same day), on `.kol-section-text-eyebrow`. */
+  labelClass = 'kol-helper-12 text-meta',
   bodyClass = 'kol-section-text-body',
   actionsClass = 'flex flex-wrap gap-4',
   className = '',

package/src/organisms/SectionHero.jsx

@@ -176,7 +176,6 @@ export default function SectionHero({
             actions={actions}
             align="center"
             gap="gap-6"
-            labelClass="kol-helper-12 text-meta"
             bodyClass="kol-sans-body-02 text-body"
             actionsClass="flex flex-wrap gap-4 justify-center"
             className="max-w-[var(--kol-content-column)]"
@@ -237,7 +236,6 @@ export default function SectionHero({
       /* gap-6 — the rhythm every hand-built OverlayGlassPanel hero ran on,
        * so the composed route lands on the same pixels */
       gap="gap-6"
-      labelClass="kol-helper-12 text-meta"
       bodyClass="kol-sans-body-02 text-body"
       actionsClass={`flex flex-wrap gap-4${align === 'center' ? ' justify-center' : ''}`}
       className={media == null ? `${panelMaxWidth} mx-auto` : ''}

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}