@kolkrabbi/kol-component 0.83.0 → 0.85.0

package/package.json

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

@@ -31,7 +31,11 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {{num: ReactNode, label: string}[]} meta  stats strip (mutually exclusive with `actions`)
  * @param {ReactNode} actions      button row
  * @param {ReactNode} media        image / video / interactive node for the visual column
- * @param {string}    [ratio='4/5'] aspect ratio of the media frame
+ * @param {string}    [ratio='4/5'] aspect ratio of the media frame. THE FRAME IS BOUNDED BY THE
+ *   RUNG (SectionSplitMediaBounded, 2026-08-27): its height is the section's `height` rung minus
+ *   the vertical padding, its width follows the ratio (capped at the column). Before, the frame
+ *   was as wide as its column and set the section's height itself, so `40` · `60` · `80`
+ *   rendered identically — a ladder that only floors is decorative for a card with media.
  * @param {boolean}   [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
  * @param {boolean}   [mediaClip=true]   the frame clips its media (overflow hidden + radius). `false`
  *   for a node that transforms in 3D (a tilt card) — the frame keeps its ratio and radius,
@@ -40,7 +44,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
@@ -86,7 +90,7 @@ export default function SectionSplit({
     <section
       ref={themeRef}
       data-theme={themeStamp}
-      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()}
+      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 [--kol-section-py:4rem] md:[--kol-section-py:6rem] lg:[--kol-section-py:8rem] ${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
@@ -120,9 +124,12 @@ export default function SectionSplit({
           )}
         </SectionText>
         {media && (
+          /* height = the rung minus the padding; width follows the ratio and
+           * caps at the column — the media takes its size from the section,
+           * never gives it */
           <div
-            className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
-            style={{ aspectRatio: ratio }}
+            className={`kol-section-split-visual relative w-auto max-w-full justify-self-center rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            style={{ aspectRatio: ratio, height: 'calc(var(--kol-section-h, 60vh) - 2 * var(--kol-section-py, 4rem))' }}
           >
             {media}
             {caption && <div className="kol-section-split-visual-veil" aria-hidden="true" />}

package/src/organisms/sectionHeights.js

@@ -4,9 +4,15 @@
  * 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. */
+/* Each rung also publishes itself as `--kol-section-h`, so a child that must
+ * be BOUNDED by the rung — the split's media frame (SectionSplitMediaBounded,
+ * 2026-08-27) — can read it. Literal strings, every one. */
 export const MIN_HEIGHTS = {
-  full: 'min-h-dvh',
-  80: 'min-h-[70svh] md:min-h-[80vh]',
-  60: 'min-h-[50svh] md:min-h-[60vh]',
+  full: 'min-h-dvh [--kol-section-h:100dvh]',
+  80: 'min-h-[70svh] md:min-h-[80vh] [--kol-section-h:70svh] md:[--kol-section-h:80vh]',
+  60: 'min-h-[50svh] md:min-h-[60vh] [--kol-section-h:50svh] md:[--kol-section-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] [--kol-section-h:35svh] md:[--kol-section-h:40vh]',
 }
 export const minHeightClass = (height) => MIN_HEIGHTS[height] || height