@kolkrabbi/kol-component 0.78.0 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.78.0",
+  "version": "0.80.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/molecules/SectionCardItem.jsx

@@ -44,6 +44,8 @@ export default function SectionCardItem({
   onNavigate,
   imageAspectRatio = 'auto',
   imagePosition = 'center',
+  className = '',
+  style,
 }) {
   const isSvgUrl = typeof visual === 'string' && visual.endsWith('.svg')
 
@@ -104,7 +106,7 @@ export default function SectionCardItem({
     </>
   )
 
-  const baseClasses = `kol-card-feature w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${backgroundColor} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden`
+  const baseClasses = `kol-card-feature w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${backgroundColor} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden ${className}`.trim()
 
   if (href) {
     const isExternal = href.startsWith('http') || href.startsWith('mailto')
@@ -114,6 +116,7 @@ export default function SectionCardItem({
         <a
           href={href}
           className={`${baseClasses} hover:border-fg-32 transition-colors duration-300`}
+          style={style}
           target="_blank"
           rel="noreferrer noopener"
         >
@@ -127,11 +130,12 @@ export default function SectionCardItem({
         href={href}
         onClick={onNavigate}
         className={`${baseClasses} hover:border-fg-24 transition-colors duration-300`}
+        style={style}
       >
         {content}
       </a>
     )
   }
 
-  return <div className={baseClasses}>{content}</div>
+  return <div className={baseClasses} style={style}>{content}</div>
 }

package/src/molecules/SectionText.jsx

@@ -21,6 +21,9 @@
  * @param {ReactNode} headline     the heading
  * @param {'pull'|'display-01'|'display-02'|'display-03'|'display-04'|'heading-01'|'heading-02'|'heading-03'|'heading-04'|'heading-05'} [headlineSize='heading-02']
  * @param {string}    [headlineAs='h2']  element for the headline
+ * @param {'auto'|'upper'} [headlineCase='auto']  `upper` = the caps role (`.kol-section-text-caps`) —
+ *                    a title card; the split hero sets it (SectionHeroNoOverrides, 2026-08-26:
+ *                    a ROLE on the molecule, never a hero-side class)
  * @param {ReactNode} body         lede / paragraph(s)
  * @param {ReactNode} actions      row of Buttons / links / Tags
  * @param {'start'|'center'} [align='start']  text-align + item alignment
@@ -28,6 +31,10 @@
  * @param {ReactNode} children     extra slots rendered between body and actions
  *                                 (the split's stats strip)
  * @param {string}    labelClass · bodyClass · actionsClass  full class overrides (label default: the hero's `kol-helper-12 text-meta`)
+ * @param {object}    slotClass    extra classes per slot — `{ label, headline, body, actions }`
+ *                                 (SectionRevealSeams, 2026-08-26: a consumer's reveal system
+ *                                 stamps `reveal` on each part; nothing animates in the DS)
+ * @param {object}    slotStyle    inline style per slot — `{ headline: { '--reveal-delay': '0.1s' } }`
  * @param {string}    className    extra classes on the block
  */
 export const HEADLINE_ROLE = {
@@ -48,6 +55,7 @@ export default function SectionText({
   headline,
   headlineSize = 'heading-02',
   headlineAs: Headline = 'h2',
+  headlineCase = 'auto',
   headlineClass,
   body,
   actions,
@@ -61,18 +69,21 @@ export default function SectionText({
   labelClass = 'kol-helper-12 text-meta',
   bodyClass = 'kol-section-text-body',
   actionsClass = 'flex flex-wrap gap-4',
+  slotClass = {},
+  slotStyle = {},
   className = '',
 }) {
+  const cls = (base, slot) => `${base} ${slotClass[slot] ?? ''}`.trim()
   const alignCls = align === 'center' ? 'items-center text-center' : 'items-start text-left'
   return (
     <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()}>
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
-      {label && <span className={`kol-section-text-eyebrow ${labelClass}`}>{label}</span>}
-      {headline && <Headline className={headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}>{headline}</Headline>}
-      {body && (typeof body === 'string' ? <p className={bodyClass}>{body}</p> : <div className={bodyClass}>{body}</div>)}
+      {label && <span className={cls(`kol-section-text-eyebrow ${labelClass}`, 'label')} style={slotStyle.label}>{label}</span>}
+      {headline && <Headline className={cls(`${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
+      {body && (typeof body === 'string' ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p> : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)}
       {children}
-      {actions && <div className={actionsClass}>{actions}</div>}
+      {actions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
     </div>
   )
 }

package/src/organisms/SectionCards.jsx

@@ -17,6 +17,9 @@ import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
  * @param {ReactNode} label · headline · body   the header (heading-03 + mono lede by default)
  * @param {ReactNode} actions               centred action row under the cards
  * @param {Function}  onNavigate            (event, feature) => void
+ * @param {string}    itemClassName         extra classes on every card (reveal seam)
+ * @param {object|Function} itemStyle       inline style per card, or `(index) => style`
+ * @param {object}    slotClass · slotStyle  per-slot class / style on the header text
  * @param {string}    sectionClassName · wrapperClassName · cardsWrapperClassName · actionsClassName · headerClassName · headerTextWidthClass  layout seams
  */
 export default function SectionCards({
@@ -27,6 +30,13 @@ export default function SectionCards({
   body,
   actions,
   onNavigate,
+  /* the reveal seams (SectionRevealSeams, kol-website 2026-08-26): a
+   * consumer's entrance system stamps a class + `--reveal-delay` per card;
+   * `itemStyle` is an object or `(index) => object`. Nothing animates here. */
+  itemClassName = '',
+  itemStyle,
+  slotClass,
+  slotStyle,
   sectionClassName = '',
   /* the family's one cap — the shell's --kol-container-max ladder (2026-08-26) */
   wrapperClassName = 'w-full flex flex-col gap-8 md:gap-10 max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto',
@@ -51,6 +61,8 @@ export default function SectionCards({
             bodyClass={`kol-mono-14 text-fg-64 ${headerTextWidthClass}`}
             labelClass="kol-helper-12 text-meta"
             gap="gap-3"
+            slotClass={slotClass}
+            slotStyle={slotStyle}
             className={headerClassName}
           />
         )}
@@ -68,6 +80,8 @@ export default function SectionCards({
                 backgroundColor={feature.backgroundColor}
                 imageAspectRatio={feature.imageAspectRatio}
                 onNavigate={onNavigate ? (event) => onNavigate(event, feature) : undefined}
+                className={itemClassName}
+                style={typeof itemStyle === 'function' ? itemStyle(index) : itemStyle}
               />
             ))}
           </div>

package/src/organisms/SectionCta.jsx

@@ -35,6 +35,8 @@ export default function SectionCta({
   contactLabel,
   email,
   secondaryRows = [],
+  slotClass,
+  slotStyle,
   className = '',
 }) {
   if (variant === 'centered') {
@@ -52,6 +54,8 @@ export default function SectionCta({
             actions={actions}
             actionsClass="pt-4 flex flex-col sm:flex-row gap-4 justify-center"
             gap="gap-8"
+            slotClass={slotClass}
+            slotStyle={slotStyle}
           />
         </div>
       </section>
@@ -82,6 +86,8 @@ export default function SectionCta({
               headlineAs="div"
               headlineClass="text-auto kol-sans-heading-01"
               gap="gap-2"
+              slotClass={slotClass}
+              slotStyle={slotStyle}
               className="self-stretch"
             />
           ))}

package/src/organisms/SectionFaq.jsx

@@ -24,6 +24,8 @@ export default function SectionFaq({
   items = [],
   singleOpen = false,
   defaultOpen,
+  slotClass,
+  slotStyle,
   className = '',
   /* the section sits on the family's cap; the list itself is a READING
    * column inside it — a measure is a content decision, not the frame */
@@ -35,7 +37,7 @@ export default function SectionFaq({
       <div className="max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
       <div className={innerClassName}>
         {(label || headline || body || actions) && (
-          <SectionText label={label} headline={headline} headlineSize={headlineSize} body={body} actions={actions} />
+          <SectionText label={label} headline={headline} headlineSize={headlineSize} body={body} actions={actions} slotClass={slotClass} slotStyle={slotStyle} />
         )}
         {items.length > 0 && (
           <Accordion className="mt-0 mb-0">

package/src/organisms/SectionHero.jsx

@@ -4,7 +4,7 @@ import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import ContentMedia from '../molecules/ContentMedia.jsx'
-import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
+import SectionText from '../molecules/SectionText.jsx'
 import FeaturedCarousel from './FeaturedCarousel.jsx'
 
 /* Height presets (SectionHeroRound2, user ruling 2026-08-26): three tiers in
@@ -109,7 +109,9 @@ function MediaLayer({ media }) {
  *                    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']
+ * @param {object}    slotClass · slotStyle  per-slot class / style, forwarded to SectionText (a consumer's reveal seam)
+ * @param {string}    headlineSize   role; defaults per variant — media 'display-04', split 'heading-02'
+ * @param {string}    gap            SectionText's inner rhythm, forwarded as given (no hero default)
  * @param {string}    [panelMaxWidth='max-w-[440px]']  the glass panel's cap on the composed route
  * @param {object}    panelProps     everything else on the glass panel (user ask 2026-08-26):
  *                                   `padding` ('px-6 py-8') · `maxWidth` · `surfaceOpacity`
@@ -145,11 +147,17 @@ export default function SectionHero({
   height = 'lg',
   label,
   headline,
-  headlineSize = 'display-04',
+  /* per-variant DEFAULT only — the hero has no say in the text's voice
+   * (SectionHeroNoOverrides, 2026-08-26): media 'display-04', split
+   * 'heading-02'; the consumer's value wins */
+  headlineSize,
+  gap,
   body,
   actions,
   panelMaxWidth = 'max-w-[440px]',
   panelProps,
+  slotClass,
+  slotStyle,
   panel,
   children,
   align = 'center',
@@ -167,18 +175,20 @@ export default function SectionHero({
       <section className={`kol-section-hero-split grid grid-cols-1 md:grid-cols-2 ${(HEIGHTS[height === 'lg' ? 'full' : height] || height).replace(/\bh-/g, 'min-h-')} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}>
         <div className={`relative min-h-[50vh] overflow-hidden md:min-h-0 ${mediaFirst ? '' : 'md:order-2'}`.trim()}>{mediaNode}</div>
         <div className={`flex items-center justify-center p-10 ${mediaFirst ? '' : 'md:order-1'}`.trim()}>
+          {/* BARE — the molecule's own voice; `headlineCase="upper"` is the
+            * split hero's one trait, a role on SectionText (SectionHeroNoOverrides) */}
           <SectionText
             label={label}
             headline={headline}
-            headlineSize={headlineSize === 'display-04' ? 'heading-02' : headlineSize}
-            headlineClass={`${HEADLINE_ROLE[headlineSize === 'display-04' ? 'heading-02' : headlineSize] ?? HEADLINE_ROLE['heading-02']} kol-section-text-caps`}
+            headlineSize={headlineSize ?? 'heading-02'}
+            headlineCase="upper"
             body={body}
             actions={actions}
             align="center"
-            gap="gap-6"
-            bodyClass="kol-sans-body-02 text-body"
-            actionsClass="flex flex-wrap gap-4 justify-center"
+            gap={gap}
             className="max-w-[var(--kol-content-column)]"
+            slotClass={slotClass}
+            slotStyle={slotStyle}
           />
         </div>
       </section>
@@ -226,19 +236,23 @@ export default function SectionHero({
   }
 
   const text = composed ? (
+    /* BARE (SectionHeroNoOverrides, user 2026-08-26: "you think the purpose
+     * of unifying components is to make OVERWRITES?") — the hero passes the
+     * slots and nothing about their voice. The old glass hero's gap-6 /
+     * body-02 / caps were pixel parity with a retired component, and parity
+     * with it is not the bar; one voice across the set is. `gap` is the
+     * consumer's if they want it. */
     <SectionText
       label={label}
       headline={headline}
-      headlineSize={headlineSize}
+      headlineSize={headlineSize ?? 'display-04'}
       body={body}
       actions={actions}
       align={align === 'center' ? 'center' : 'start'}
-      /* gap-6 — the rhythm every hand-built OverlayGlassPanel hero ran on,
-       * so the composed route lands on the same pixels */
-      gap="gap-6"
-      bodyClass="kol-sans-body-02 text-body"
-      actionsClass={`flex flex-wrap gap-4${align === 'center' ? ' justify-center' : ''}`}
+      gap={gap}
       className={media == null ? `${panelMaxWidth} mx-auto` : ''}
+      slotClass={slotClass}
+      slotStyle={slotStyle}
     />
   ) : null
   /* no media → the TEXT-ONLY hero: the composed text on the surface, no glass

package/src/organisms/SectionSplit.jsx

@@ -36,6 +36,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * @param {ReactNode} caption      mono caption + gradient veil over the media
  * @param {string}    bgImage      inline cover background on the section
  * @param {boolean}   fullBleed    span the full viewport width
+ * @param {object}    slotClass · slotStyle  per-slot class / style on the text block (reveal seam)
  * @param {string}    className · innerClassName · columnClassName  layout seams
  */
 export default function SectionSplit({
@@ -54,6 +55,8 @@ export default function SectionSplit({
   caption,
   bgImage,
   fullBleed = false,
+  slotClass,
+  slotStyle,
   className = '',
   innerClassName = '',
   columnClassName = '',
@@ -87,6 +90,8 @@ export default function SectionSplit({
           actions={actions}
           actionsClass={`flex flex-wrap gap-4 pt-2${centred ? ' justify-center' : ''}`}
           align={centred ? 'center' : 'start'}
+          slotClass={slotClass}
+          slotStyle={slotStyle}
           className={`max-w-[640px] ${mediaFirst ? 'order-2' : ''} ${columnClassName}`}
         >
           {meta && meta.length > 0 && (