@kolkrabbi/kol-component 0.83.0 → 0.84.0

package/package.json

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

@@ -20,7 +20,7 @@ import { minHeightClass } from './sectionHeights.js'
  *   `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
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; 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

package/src/organisms/SectionCta.jsx

@@ -16,7 +16,7 @@ import { minHeightClass } from './sectionHeights.js'
  * 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
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; 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)

package/src/organisms/SectionFaq.jsx

@@ -12,7 +12,7 @@ import { minHeightClass } from './sectionHeights.js'
  * @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
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; 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

package/src/organisms/SectionHero.jsx

@@ -18,6 +18,7 @@ const HEIGHTS = {
   full: 'h-dvh',
   80: 'h-[70svh] md:h-[80vh]',
   60: 'h-[50svh] md:h-[60vh]',
+  40: 'h-[35svh] md:h-[40vh]',
   screen: 'h-dvh',
   lg: 'h-[440px] md:h-[640px]',
   md: 'h-[320px] md:h-[440px]',
@@ -32,6 +33,7 @@ const SPLIT_HEIGHTS = {
   full: 'min-h-dvh',
   80: 'min-h-[70svh] md:min-h-[80vh]',
   60: 'min-h-[50svh] md:min-h-[60vh]',
+  40: 'min-h-[35svh] md:min-h-[40vh]',
   screen: 'min-h-dvh',
   lg: 'min-h-dvh',
   md: 'min-h-[50svh] md:min-h-[60vh]',
@@ -126,7 +128,7 @@ function MediaLayer({ media }) {
  *                    {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 {string}    height         'full' | '80' | '60' | '40' (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   role; defaults per variant — media 'display-04', split 'heading-02'

package/src/organisms/SectionSplit.jsx

@@ -40,7 +40,7 @@ import { minHeightClass } from './sectionHeights.js'
  *   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
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; 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

package/src/organisms/sectionHeights.js

@@ -8,5 +8,8 @@ export const MIN_HEIGHTS = {
   full: 'min-h-dvh',
   80: 'min-h-[70svh] md:min-h-[80vh]',
   60: 'min-h-[50svh] md:min-h-[60vh]',
+  /* 40 (SectionHeightForty, 2026-08-27): the rung below 60 for a page-foot
+   * CTA or a cards band that wants less air; default stays 60 everywhere */
+  40: 'min-h-[35svh] md:min-h-[40vh]',
 }
 export const minHeightClass = (height) => MIN_HEIGHTS[height] || height