@kolkrabbi/kol-component 0.74.2 → 0.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.74.2",
+  "version": "0.76.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/FeaturedCarousel.jsx

@@ -81,6 +81,10 @@ function SlideMedia({ media, active = true, onEnded, onTimeUpdate }) {
 }
 
 /**
+ * @deprecated 2026-08-26 as a consumer import — `SectionHero media={[…]}` is
+ * the one hero (SectionHeroRound2); this stays as its engine and renders
+ * unchanged. Removed from the barrel at the next major.
+ *
  * FeaturedCarousel — a full-width carousel of featured media: each wide slide
  * is a fixed-height frame with an image or HLS-video background and a centered
  * OverlayGlassPanel (title / description / CTA), plus prev/next and optional

package/src/organisms/FoundryCTA.jsx

@@ -1,65 +1,38 @@
 import Button from '../atoms/Button.jsx'
+import SectionCta from './SectionCta.jsx'
 
 /* taxonomy-ok: nests component's Button */
 
 /**
- * FoundryCTA — the simple centered tier of the CTA-band family: a centered
- * column with a short rule line, a heading, a mono description, and one or
- * more Button actions. CtaGlobal is the editorial two-column closer of the
- * same family; this is the quiet mid-page tier (foundry pages, prints grid).
+ * @deprecated 2026-08-26 — `FoundryCTA` is `SectionCta variant="centered"`
+ * (SectionHeroRound2: a second way to render SectionText). Same render; the
+ * `action` object(s) become Buttons. Alias kept; removed at the next major.
  *
- * Presentational — copy arrives as props and renders verbatim (no
- * text-transform; author strings in their final case). Actions with an
- * `href` render Button's anchor form; pass `onNavigate` for SPA routing —
- * same `(href, event)` seam contract as WorkListItem — or omit it for plain
- * anchors (external links, mailto:).
- *
- * @param {ReactNode} heading      band heading (kol-sans-heading-02)
- * @param {ReactNode} description  supporting line (kol-mono-14, dimmed)
- * @param {Object|Array} action    one {href, label, variant?, target?, rel?} or an array;
- *                                 variant 'secondary' renders Button's outline treatment,
- *                                 anything else the primary fill
- * @param {Function}  onNavigate   (href, event) => void — SPA-nav seam for internal links
- * @param {string}    className    extra classes on the section
+ * @param {ReactNode} heading · description
+ * @param {Object|Array} action    one {href, label, variant?, target?, rel?} or an array
+ * @param {Function}  onNavigate   (href, event) => void
  */
-export default function FoundryCTA({
-  heading,
-  description,
-  action,
-  onNavigate,
-  className = '',
-}) {
+export default function FoundryCTA({ heading, description, action, onNavigate, className = '' }) {
   const actions = (Array.isArray(action) ? action : [action]).filter(Boolean)
-
   return (
-    <section className={`w-full py-24 ${className}`.trim()}>
-      <div className="max-w-[900px] mx-auto text-center space-y-8">
-        <div className="w-32 h-px bg-fg-24 mx-auto" />
-
-        {heading && <h2 className="kol-sans-heading-02 text-auto">{heading}</h2>}
-
-        {description && (
-          <p className="kol-mono-14 text-fg-64 max-w-[600px] mx-auto">{description}</p>
-        )}
-
-        {actions.length > 0 && (
-          <div className={`pt-4 ${actions.length > 1 ? 'flex flex-col sm:flex-row gap-4 justify-center' : ''}`.trim()}>
-            {actions.map((act, i) => (
-              <Button
-                key={i}
-                variant={act.variant === 'secondary' ? 'outline' : 'primary'}
-                size="md"
-                href={act.href}
-                target={act.target}
-                rel={act.rel}
-                onClick={onNavigate ? (e) => onNavigate(act.href, e) : undefined}
-              >
-                {act.label}
-              </Button>
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
+    <SectionCta
+      variant="centered"
+      headline={heading}
+      body={description}
+      className={className}
+      actions={actions.length > 0 ? actions.map((act, i) => (
+        <Button
+          key={i}
+          variant={act.variant === 'secondary' ? 'outline' : 'primary'}
+          size="md"
+          href={act.href}
+          target={act.target}
+          rel={act.rel}
+          onClick={onNavigate ? (e) => onNavigate(act.href, e) : undefined}
+        >
+          {act.label}
+        </Button>
+      )) : undefined}
+    />
   )
 }

package/src/organisms/SectionCta.jsx

@@ -1,3 +1,4 @@
+import Button from '../atoms/Button.jsx'
 import SectionText from '../molecules/SectionText.jsx'
 
 /**
@@ -8,6 +9,13 @@ import SectionText from '../molecules/SectionText.jsx'
  * `CtaGlobal` is this component under its old name (alias kept). Columns sit
  * side by side from `md` up and stack below. Row labels are uppercase by role.
  *
+ * TWO VARIANTS. `editorial` (default): the two-column band above. `centered`
+ * (SectionHeroRound2, 2026-08-26): the quiet mid-page tier — a short rule, a
+ * heading, a mono line and Buttons, centred — which was `FoundryCTA`, a second
+ * way to render SectionText. FoundryCTA is its deprecated alias.
+ *
+ * @param {'editorial'|'centered'} variant
+ * @param {ReactNode} headline · body · actions   centered: the SectionText slots
  * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
  * @param {ReactNode} promptLabel   prompt-row label
  * @param {ReactNode} heading       prompt-row value
@@ -17,6 +25,10 @@ import SectionText from '../molecules/SectionText.jsx'
  * @param {string}    className     extra classes on the section
  */
 export default function SectionCta({
+  variant = 'editorial',
+  headline,
+  body,
+  actions,
   eyebrow,
   promptLabel,
   heading,
@@ -25,6 +37,27 @@ export default function SectionCta({
   secondaryRows = [],
   className = '',
 }) {
+  if (variant === 'centered') {
+    return (
+      <section className={`w-full py-24 ${className}`.trim()}>
+        <div className="max-w-[900px] mx-auto">
+          <div className="w-32 h-px bg-fg-24 mx-auto mb-8" />
+          <SectionText
+            align="center"
+            headline={headline}
+            headlineSize="heading-02"
+            headlineClass="kol-sans-heading-02 text-auto"
+            body={body}
+            bodyClass="kol-mono-14 text-fg-64 max-w-[600px] mx-auto"
+            actions={actions}
+            actionsClass="pt-4 flex flex-col sm:flex-row gap-4 justify-center"
+            gap="gap-8"
+          />
+        </div>
+      </section>
+    )
+  }
+
   const rows = [
     ...(promptLabel || heading ? [{ label: promptLabel, value: heading }] : []),
     ...secondaryRows,

package/src/organisms/SectionHero.jsx

@@ -5,10 +5,19 @@ 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 FeaturedCarousel from './FeaturedCarousel.jsx'
 
-/** Height presets; anything else is passed through as a class string. */
+/* Height presets (SectionHeroRound2, user ruling 2026-08-26): three tiers in
+ * viewport units, each with a phone value the DS picks. `full` sits UNDER a
+ * fixed navbar — the bar floats over the media — so consumers drop their
+ * pt-14 wrapper. dvh, not vh: a phone's URL bar would otherwise push the
+ * hero's foot off screen. `lg` / `md` / `screen` stay as aliases; anything
+ * else is passed through as a class string. */
 const HEIGHTS = {
-  screen: 'h-screen',
+  full: 'h-dvh',
+  80: 'h-[70svh] md:h-[80vh]',
+  60: 'h-[50svh] md:h-[60vh]',
+  screen: 'h-dvh',
   lg: 'h-[440px] md:h-[640px]',
   md: 'h-[320px] md:h-[440px]',
 }
@@ -76,13 +85,31 @@ function MediaLayer({ media }) {
  * `align` picks the media side there ('left' default · 'right'); below `md`
  * the halves stack, media first.
  *
+ * ROUND 2 (SectionHeroRound2, kol-website 2026-08-26 — "maintain ONE hero
+ * component"): `height` presets `full` · `80` · `60` in viewport units;
+ * `justify="end"` pins the content to the foot (StackHero's items-end +
+ * pb ramp); `veil` lays the bottom-heavy gradient over the media (the same
+ * device as the split's caption veil); `foot` + `overlap` render a node
+ * across the fold with the negative margin owned here; `media` as an ARRAY
+ * turns the hero into the carousel (FeaturedCarousel is the engine — one
+ * glass panel per slide, autoplay, prev/next); and NO media renders the
+ * composed text on the surface with no glass panel — the text-only hero.
+ *
  * @param {'media'|'split'} variant
- * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background (media) / the half (split)
+ * @param {ReactNode|{src, kind, poster, srcSet, alt}|Array} media  background (media) / the half (split) / an ARRAY of slides → carousel
  * @param {number}    overlayOpacity 0–100 surface-primary scrim over the media (default 0)
- * @param {string}    height         'screen' | 'lg' | 'md' preset, or a height class string
+ * @param {boolean}   veil           bottom-heavy gradient over the media
+ * @param {'center'|'end'} justify   content vertically centred, or pinned to the foot
+ * @param {ReactNode} foot           a node rendered across the hero's bottom edge
+ * @param {number}    overlap        how far `foot` rises into the hero, px (default 250)
+ * @param {boolean}   autoPlay · {number} autoPlayInterval · {'stack'|'header'} navPosition  carousel only
+ * @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 {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`
+ *                                   (80) · `blur` ('1px') · `gap` · `className`
  * @param {ReactNode} panel          a caller-authored content node; wins over the text props and children
  * @param {ReactNode} children       fallback content slot
  * @param {string}    align          media: 'center' | 'start' | 'end' — placement of the content ·
@@ -95,6 +122,13 @@ export default function SectionHero({
   fullBleed = false,
   media,
   overlayOpacity = 0,
+  veil = false,
+  justify = 'center',
+  foot,
+  overlap = 250,
+  autoPlay = false,
+  autoPlayInterval = 5000,
+  navPosition = 'stack',
   height = 'lg',
   label,
   headline,
@@ -102,6 +136,7 @@ export default function SectionHero({
   body,
   actions,
   panelMaxWidth = 'max-w-[440px]',
+  panelProps,
   panel,
   children,
   align = 'center',
@@ -116,7 +151,7 @@ export default function SectionHero({
         ? <ContentMedia ratio={null} radius={false} fit="cover" className="h-full">{media}</ContentMedia>
         : <MediaLayer media={media} />
     return (
-      <section className={`kol-section-hero-split grid min-h-screen grid-cols-1 md:grid-cols-2 ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}>
+      <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()}>
           <SectionText
@@ -144,27 +179,70 @@ export default function SectionHero({
     : align === 'end' ? 'justify-end'
     : 'justify-center'
   const composed = label || headline || body || actions
-  const content = panel ?? (composed ? (
-    <OverlayGlassPanel maxWidth={panelMaxWidth} align={align === 'center' ? 'center' : 'start'}>
-      <SectionText
-        label={label}
-        headline={headline}
-        headlineSize={headlineSize}
-        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"
-        labelClass="kol-helper-12 text-meta"
-        bodyClass="kol-sans-body-02 text-body"
-        actionsClass={`flex flex-wrap gap-4${align === 'center' ? ' justify-center' : ''}`}
-      />
-    </OverlayGlassPanel>
-  ) : children)
 
-  return (
-    <section className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${heightCls} ${className}`.trim()}>
+  /* the foot straddles the fold: the organism owns the negative margin */
+  const withFoot = (hero) =>
+    foot ? (
+      <div className="kol-section-hero-wrap relative">
+        {hero}
+        <div className="relative z-20" style={{ marginTop: `-${overlap}px` }}>{foot}</div>
+      </div>
+    ) : hero
+
+  /* CAROUSEL — an array of slides. FeaturedCarousel is the engine (embla,
+   * autoplay ring, one glass panel per slide); the hero is its one home. A
+   * slide is `{ src, kind, poster, alt, title, subtitle, description, href,
+   * ctaLabel }` or the carousel's own `{ media, … }` shape. */
+  if (Array.isArray(media)) {
+    const items = media.map((s) => (s.media ? s : { ...s, media: { src: s.src, kind: s.kind, poster: s.poster, srcSet: s.srcSet, alt: s.alt } }))
+    return withFoot(
+      <FeaturedCarousel
+        items={items}
+        fullWidth
+        rounded={false}
+        showHeader={false}
+        height={heightCls}
+        autoPlay={autoPlay}
+        autoPlayInterval={autoPlayInterval}
+        navPosition={navPosition}
+        className={`kol-section-hero-carousel ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()}
+      >
+        {children}
+      </FeaturedCarousel>,
+    )
+  }
+
+  const text = composed ? (
+    <SectionText
+      label={label}
+      headline={headline}
+      headlineSize={headlineSize}
+      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"
+      labelClass="kol-helper-12 text-meta"
+      bodyClass="kol-sans-body-02 text-body"
+      actionsClass={`flex flex-wrap gap-4${align === 'center' ? ' justify-center' : ''}`}
+      className={media == null ? `${panelMaxWidth} mx-auto` : ''}
+    />
+  ) : null
+  /* no media → the TEXT-ONLY hero: the composed text on the surface, no glass
+   * (FoundryLicensing's hero); with media, the glass panel over it */
+  const content = panel ?? (composed
+    ? (media == null ? text : (
+        <OverlayGlassPanel maxWidth={panelMaxWidth} align={align === 'center' ? 'center' : 'start'} {...panelProps}>
+          {text}
+        </OverlayGlassPanel>
+      ))
+    : children)
+
+  const justifyCls = justify === 'end' ? 'items-end pb-32 sm:pb-40 lg:pb-48 xl:pb-56' : 'items-center'
+
+  return withFoot(
+    <section className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${heightCls} ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()}>
       <MediaLayer media={media} />
       {overlayOpacity > 0 && (
         <div
@@ -173,9 +251,10 @@ export default function SectionHero({
           style={{ background: 'var(--kol-surface-primary)', opacity: overlayOpacity / 100 }}
         />
       )}
-      <div className={`relative z-10 flex h-full w-full items-center ${alignCls} p-6 md:p-10`}>
+      {veil && <div aria-hidden="true" className="kol-section-hero-veil absolute inset-0" />}
+      <div className={`relative z-10 flex h-full w-full ${justifyCls} ${alignCls} p-6 md:p-10`}>
         {content}
       </div>
-    </section>
+    </section>,
   )
 }

package/src/utilities/OverlayGlassPanel.jsx

@@ -11,6 +11,8 @@
  * @param {string} align           'center' | 'start' | 'end' (cross-axis + text)
  * @param {string} gap             vertical rhythm class between children
  * @param {string} maxWidth        optional max-w-* class (adds mx-auto)
+ * @param {string} padding         padding classes (default 'px-6 py-8') — 2026-08-26,
+ *                                 the one knob the panel had no seam for
  */
 export default function OverlayGlassPanel({
   children,
@@ -19,6 +21,7 @@ export default function OverlayGlassPanel({
   align = 'center',
   gap = 'gap-6',
   maxWidth = '',
+  padding = 'px-6 py-8',
   className = '',
 }) {
   const alignCls =
@@ -28,7 +31,7 @@ export default function OverlayGlassPanel({
 
   return (
     <div
-      className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] px-6 py-8 ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
+      className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] ${padding} ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
       style={{
         backgroundColor: `color-mix(in srgb, var(--kol-surface-primary) ${surfaceOpacity}%, transparent)`,
         backdropFilter: `blur(${blur})`,