@kolkrabbi/kol-component 0.81.0 → 0.83.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.81.0",
+  "version": "0.83.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/organisms/SectionCards.jsx

@@ -1,6 +1,7 @@
 import SectionCardItem from '../molecules/SectionCardItem.jsx'
 import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
 import useSectionTheme from '../hooks/useSectionTheme.js'
+import { minHeightClass } from './sectionHeights.js'
 
 /**
  * SectionCards — the "N-up feature cards" band: a `SectionText` header over a
@@ -18,6 +19,8 @@ import useSectionTheme from '../hooks/useSectionTheme.js'
  *   `inverse` = the paired theme of the nearest live one, following the toggle;
  *   `light` / `dark` pinned; omit to inherit. Stamps `data-theme` on the root and
  *   paints its surface — every token inside resolves to the other theme's.
+ * @param {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default); content stays vertically centred inside it
  * @param {{title, icon, visual, description, href, backgroundColor, imageAspectRatio}[]} features
  * @param {ReactNode} label · headline · body   the header (heading-03 + mono lede by default)
  * @param {ReactNode} actions               centred action row under the cards
@@ -29,6 +32,7 @@ import useSectionTheme from '../hooks/useSectionTheme.js'
  */
 export default function SectionCards({
   theme,
+  height = '60',
   features = [],
   label,
   headline,
@@ -53,7 +57,7 @@ export default function SectionCards({
 }) {
   const [themeRef, themeStamp] = useSectionTheme(theme)
   return (
-    <section ref={themeRef} data-theme={themeStamp} className={`w-full ${theme ? 'bg-surface-primary' : ''} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
+    <section ref={themeRef} data-theme={themeStamp} className={`w-full flex flex-col justify-center ${minHeightClass(height)} ${theme ? 'bg-surface-primary' : ''} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
       <div className={wrapperClassName}>
         {(label || headline || body) && (
           <SectionText

package/src/organisms/SectionCta.jsx

@@ -1,5 +1,6 @@
 import Button from '../atoms/Button.jsx'
 import SectionText from '../molecules/SectionText.jsx'
+import { minHeightClass } from './sectionHeights.js'
 
 /**
  * SectionCta — the editorial two-column contact/CTA band: a large display
@@ -14,6 +15,8 @@ import SectionText from '../molecules/SectionText.jsx'
  * heading, a mono line and Buttons, centred — which was `FoundryCTA`, a second
  * way to render SectionText. FoundryCTA is its deprecated alias.
  *
+ * @param {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default); content stays vertically centred inside it
  * @param {'editorial'|'centered'} variant
  * @param {ReactNode} headline · body · actions   centered: the SectionText slots
  * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
@@ -26,6 +29,7 @@ import SectionText from '../molecules/SectionText.jsx'
  */
 export default function SectionCta({
   variant = 'editorial',
+  height = '60',
   headline,
   body,
   actions,
@@ -41,8 +45,8 @@ export default function SectionCta({
 }) {
   if (variant === 'centered') {
     return (
-      <section className={`w-full py-24 ${className}`.trim()}>
-        <div className="max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
+      <section className={`w-full flex flex-col justify-center py-24 ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+        <div className="w-full 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"
@@ -68,7 +72,7 @@ export default function SectionCta({
     ...(email ? [{ label: contactLabel, value: email, href: `mailto:${email}` }] : []),
   ]
   return (
-    <section className={`w-full bg-auto ${className}`.trim()}>
+    <section className={`w-full bg-auto flex flex-col justify-center ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
       {/* 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

package/src/organisms/SectionFaq.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Accordion, AccordionPanel } from '../molecules/Accordion.jsx'
 import SectionText from '../molecules/SectionText.jsx'
+import { minHeightClass } from './sectionHeights.js'
 
 /**
  * SectionFaq — a `SectionText` header over an `Accordion` of question /
@@ -10,6 +11,8 @@ import SectionText from '../molecules/SectionText.jsx'
  *
  * @param {ReactNode} label · headline · body · actions  the header (SectionText)
  * @param {string}    [headlineSize='heading-02']
+ * @param {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default); content stays vertically centred inside it
  * @param {{ q: ReactNode, a: ReactNode, meta?: ReactNode }[]} items
  * @param {boolean}   [singleOpen=false]  opening one panel closes the others
  * @param {number}    [defaultOpen]       index open on mount (singleOpen) — omit for all closed
@@ -24,6 +27,7 @@ export default function SectionFaq({
   items = [],
   singleOpen = false,
   defaultOpen,
+  height = '60',
   slotClass,
   slotStyle,
   className = '',
@@ -33,8 +37,8 @@ export default function SectionFaq({
 }) {
   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">
+    <section className={`kol-section-faq w-full flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+      <div className="w-full 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} slotClass={slotClass} slotStyle={slotStyle} />

package/src/organisms/SectionSplit.jsx

@@ -1,5 +1,6 @@
 import SectionText from '../molecules/SectionText.jsx'
 import useSectionTheme from '../hooks/useSectionTheme.js'
+import { minHeightClass } from './sectionHeights.js'
 
 /**
  * SectionSplit — the media-and-text split section, on `SectionText` (the
@@ -38,12 +39,15 @@ import useSectionTheme from '../hooks/useSectionTheme.js'
  *   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 {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default); the columns stay vertically centred inside it
  * @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({
   theme,
   label,
@@ -58,6 +62,7 @@ export default function SectionSplit({
   mediaHover = false,
   mediaClip = true,
   align = 'right',
+  height = '60',
   caption,
   bgImage,
   fullBleed = false,
@@ -81,13 +86,13 @@ export default function SectionSplit({
     <section
       ref={themeRef}
       data-theme={themeStamp}
-      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()}
+      className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${minHeightClass(height)} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
       style={sectionStyle}
     >
       {/* 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()}>
+      <div className={`w-full 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

package/src/organisms/sectionHeights.js

@@ -0,0 +1,12 @@
+/* The section family's height ladder, as MIN-height — content may still grow,
+ * the content stays vertically centred inside it (SectionSplitHeight →
+ * SectionHeightLadder, kol-website 2026-08-27: "we need to set some sizes").
+ * Same three names as SectionHero's presets; literal strings — a class built
+ * at runtime is not a class (the SPLIT_HEIGHTS lesson). Anything else passes
+ * through as a class string. */
+export const MIN_HEIGHTS = {
+  full: 'min-h-dvh',
+  80: 'min-h-[70svh] md:min-h-[80vh]',
+  60: 'min-h-[50svh] md:min-h-[60vh]',
+}
+export const minHeightClass = (height) => MIN_HEIGHTS[height] || height