@kolkrabbi/kol-component 0.76.0 → 0.76.2

package/package.json

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

@@ -103,6 +103,10 @@ function MediaLayer({ media }) {
  * @param {ReactNode} foot           a node rendered across the hero's bottom edge
  * @param {number}    overlap        how far `foot` rises into the hero, px (default 250)
  * @param {boolean}   autoPlay · {number} autoPlayInterval · {'stack'|'header'} navPosition  carousel only
+ * @param {Function}  renderTitle · {string} ctaLabel · {Function} onNavigate · {boolean} showTitle · showDescription · showCta ·
+ *                    {string} titleClassName · descriptionClassName · {Object} options  carousel only — FeaturedCarousel's
+ *                    seams, forwarded whole (SectionHeroCarouselSeams, 2026-08-26: the foundry index sets each
+ *                    slide's title in the typeface's own font and routes the CTA through the SPA)
  * @param {string}    height         'full' | '80' | '60' (viewport tiers) · 'lg' | 'md' | 'screen' (aliases) · or a height class string
  * @param {ReactNode} label · headline · body · actions  the composed text (SectionText)
  * @param {string}    [headlineSize='display-04']
@@ -129,6 +133,15 @@ export default function SectionHero({
   autoPlay = false,
   autoPlayInterval = 5000,
   navPosition = 'stack',
+  renderTitle,
+  ctaLabel,
+  onNavigate,
+  showTitle,
+  showDescription,
+  showCta,
+  titleClassName,
+  descriptionClassName,
+  options,
   height = 'lg',
   label,
   headline,
@@ -163,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)]"
@@ -205,6 +217,7 @@ export default function SectionHero({
         autoPlay={autoPlay}
         autoPlayInterval={autoPlayInterval}
         navPosition={navPosition}
+        {...Object.fromEntries(Object.entries({ renderTitle, ctaLabel, onNavigate, showTitle, showDescription, showCta, titleClassName, descriptionClassName, options }).filter(([, v]) => v !== undefined))}
         className={`kol-section-hero-carousel ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()}
       >
         {children}
@@ -223,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` : ''}