@kolkrabbi/kol-component 0.77.1 → 0.79.0

package/package.json

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

@@ -28,6 +28,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 = {
@@ -61,18 +65,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']), '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,8 +30,16 @@ 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 = '',
-  wrapperClassName = 'w-full flex flex-col gap-8 md:gap-10 max-w-[1400px] mx-auto',
+  /* 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',
   cardsWrapperClassName = 'self-stretch inline-flex flex-col md:flex-row md:h-72 justify-start items-center gap-6',
   actionsClassName = 'pt-10 pb-24',
   headerClassName = 'w-full pt-[224px]',
@@ -50,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}
           />
         )}
@@ -67,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,12 +35,14 @@ export default function SectionCta({
   contactLabel,
   email,
   secondaryRows = [],
+  slotClass,
+  slotStyle,
   className = '',
 }) {
   if (variant === 'centered') {
     return (
       <section className={`w-full py-24 ${className}`.trim()}>
-        <div className="max-w-[900px] mx-auto">
+        <div className="max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
           <div className="w-32 h-px bg-fg-24 mx-auto mb-8" />
           <SectionText
             align="center"
@@ -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>
@@ -65,10 +69,11 @@ export default function SectionCta({
   ]
   return (
     <section className={`w-full bg-auto ${className}`.trim()}>
-      {/* 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">
+      {/* the family's ONE cap — the shell's --kol-container-max ladder (user
+        * ruling 2026-08-26; the 1600 SectionCtaEditorial asked for was a third
+        * number beside split's 1200 and cards' 1400) — the surface stays full
+        * width, the columns stop hugging the viewport edges */}
+      <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] 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) => (
@@ -81,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,15 +24,20 @@ 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 */
   innerClassName = 'max-w-[var(--kol-content-column)] flex flex-col gap-8',
 }) {
   const [open, setOpen] = useState(defaultOpen ?? null)
   return (
     <section className={`kol-section-faq w-full px-5 py-16 md:px-8 md:py-24 lg:px-14 ${className}`.trim()}>
+      <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">
@@ -51,6 +56,7 @@ export default function SectionFaq({
           </Accordion>
         )}
       </div>
+      </div>
     </section>
   )
 }

package/src/organisms/SectionHero.jsx

@@ -109,6 +109,7 @@ 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 {object}    slotClass · slotStyle  per-slot class / style, forwarded to SectionText (a consumer's reveal seam)
  * @param {string}    [headlineSize='display-04']
  * @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):
@@ -150,6 +151,8 @@ export default function SectionHero({
   actions,
   panelMaxWidth = 'max-w-[440px]',
   panelProps,
+  slotClass,
+  slotStyle,
   panel,
   children,
   align = 'center',
@@ -179,6 +182,8 @@ export default function SectionHero({
             bodyClass="kol-sans-body-02 text-body"
             actionsClass="flex flex-wrap gap-4 justify-center"
             className="max-w-[var(--kol-content-column)]"
+            slotClass={slotClass}
+            slotStyle={slotStyle}
           />
         </div>
       </section>
@@ -239,6 +244,8 @@ export default function SectionHero({
       bodyClass="kol-sans-body-02 text-body"
       actionsClass={`flex flex-wrap gap-4${align === 'center' ? ' justify-center' : ''}`}
       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 = '',
@@ -72,7 +75,10 @@ export default function SectionSplit({
       className={`kol-section-split px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
       style={sectionStyle}
     >
-      <div className={`max-w-[1200px] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
+      {/* ONE cap for the whole section family (user ruling 2026-08-26): the shell's
+        * --kol-container-max ladder — 100% → 1400 → 1600 → 1800. Split ran 1200,
+        * cards 1400, the CTA 1600: three numbers for one job, unflagged. */}
+      <div className={`max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
         {/* `order` rather than `flex-row-reverse`: the grid is one column below
           * 901px, and DOM order is what decides the stack there. */}
         <SectionText
@@ -84,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 && (