@kolkrabbi/kol-component 0.70.0 → 0.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.70.0",
+  "version": "0.71.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/index.js

@@ -48,7 +48,8 @@ export { default as ProsePreview } from './utilities/ProsePreview.jsx'
 export { default as QuantityInput } from './molecules/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
 export { default as SearchInput } from './molecules/SearchInput.jsx'
-export { default as Section } from './molecules/Section.jsx'
+export { default as InspectorSection, default as Section } from './molecules/InspectorSection.jsx'
+export { default as SectionText } from './molecules/SectionText.jsx'
 export { default as SectionLabel } from './atoms/SectionLabel.jsx'
 export { default as SegmentedToggle } from './atoms/SegmentedToggle.jsx'
 export { default as Stepper } from './molecules/Stepper.jsx'
@@ -119,13 +120,16 @@ export { default as Carousel } from './molecules/Carousel.jsx'
  * three in-package copies (and kol-website's CarouselNavigation) happened. */
 export { default as EmblaNav } from './molecules/EmblaNav.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
-export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
 export { default as ErrorBoundary } from './utilities/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
-export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
+export { default as SectionHero, default as FullBleedHero } from './organisms/SectionHero.jsx'
+export { default as SectionSplit } from './organisms/SectionSplit.jsx'
+export { default as SectionCards } from './organisms/SectionCards.jsx'
+export { default as SectionCta, default as CtaGlobal } from './organisms/SectionCta.jsx'
+export { default as SectionFaq } from './organisms/SectionFaq.jsx'
 export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'

package/src/molecules/InspectorSection.jsx

@@ -0,0 +1,30 @@
+/**
+ * InspectorSection — labeled control group for inspector/editor panels.
+ * Renamed from `Section` 2026-08-26 (SectionSet): the website-section family
+ * took the `Section*` prefix and this one sat inside it as a stranger.
+ * `Section` stays exported as an alias. Same classes, same render.
+ *
+ * A small-caps label above a vertical content stack. Used across the editor
+ * inspector panels (palette / pattern / type modes): `<Section label="Aspect">…</Section>`.
+ *
+ * `divided` (InspectorSectionRhythm, 2026-08-15) adds the between-siblings
+ * hairline every rail consumer was retyping locally — the rule lives on the
+ * ADJACENT pair (`.kol-section--divided + .kol-section--divided`) in
+ * kol-components-molecules.css, so the first section in a stack never carries
+ * a stray top border. Set it on every section in the stack; a rail that mixes
+ * divided and plain sections divides only between the divided ones.
+ *
+ * ponytail: a `SectionStack` parent could own this instead of each child
+ * declaring it — that is the upgrade path if a consumer ever needs the stack
+ * to vary the rule per-gap. One prop is a smaller API than a new component.
+ */
+export default function InspectorSection({ label, children, divided = false, className = '' }) {
+  return (
+    <div className={`flex flex-col gap-2${divided ? ' kol-section--divided' : ''} ${className}`}>
+      {label && (
+        <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
+      )}
+      {children}
+    </div>
+  )
+}

package/src/molecules/Section.jsx

@@ -1,27 +1,6 @@
 /**
- * Section — labeled control group for inspector/editor panels.
- *
- * A small-caps label above a vertical content stack. Used across the editor
- * inspector panels (palette / pattern / type modes): `<Section label="Aspect">…</Section>`.
- *
- * `divided` (InspectorSectionRhythm, 2026-08-15) adds the between-siblings
- * hairline every rail consumer was retyping locally — the rule lives on the
- * ADJACENT pair (`.kol-section--divided + .kol-section--divided`) in
- * kol-components-molecules.css, so the first section in a stack never carries
- * a stray top border. Set it on every section in the stack; a rail that mixes
- * divided and plain sections divides only between the divided ones.
- *
- * ponytail: a `SectionStack` parent could own this instead of each child
- * declaring it — that is the upgrade path if a consumer ever needs the stack
- * to vary the rule per-gap. One prop is a smaller API than a new component.
+ * @deprecated 2026-08-26 — `Section` is `InspectorSection` under its old name
+ * (SectionSet: the website-section family owns the `Section*` prefix now).
+ * Alias kept; removed at the next major.
  */
-export default function Section({ label, children, divided = false, className = '' }) {
-  return (
-    <div className={`flex flex-col gap-2${divided ? ' kol-section--divided' : ''} ${className}`}>
-      {label && (
-        <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
-      )}
-      {children}
-    </div>
-  )
-}
+export { default } from './InspectorSection.jsx'

package/src/molecules/SectionText.jsx

@@ -0,0 +1,70 @@
+/**
+ * SectionText — the ruled text block of the SECTION family (SectionSet,
+ * kol-website 2026-08-26): label · headline · body · actions, every slot
+ * opt-in — an omitted slot renders nothing. The section-tier twin of
+ * ContentText: the card family solved "every organism types its own kicker /
+ * heading / body by hand" on 2026-08-15, and the sections had the same
+ * disease — zero shared text primitive across hero, split, cards band, CTA.
+ *
+ * Type by ROLE, never a threaded class (DS ruling 2026-08-15): `headlineSize`
+ * picks one type class for the headline. `pull` is the split's display pull
+ * (`.kol-section-text-pull`, the old `.kol-feature-split-pull`).
+ *
+ * Every default class is a SEAM (the ContentText pattern): pass `labelClass`
+ * / `bodyClass` / `actionsClass` to replace the string whole — that is how
+ * SectionHero's eyebrow and SectionCta's rows wear their own voices on the
+ * same anatomy. No casing transforms — author strings in their final case.
+ *
+ * @param {ReactNode} label        section header / kicker
+ * @param {ReactNode} headline     the heading
+ * @param {'pull'|'display-01'|'display-02'|'display-03'|'display-04'|'heading-01'|'heading-02'|'heading-03'|'heading-04'|'heading-05'} [headlineSize='heading-02']
+ * @param {string}    [headlineAs='h2']  element for the headline
+ * @param {ReactNode} body         lede / paragraph(s)
+ * @param {ReactNode} actions      row of Buttons / links / Tags
+ * @param {'start'|'center'} [align='start']  text-align + item alignment
+ * @param {string}    [gap='gap-4']  inner rhythm (a Tailwind gap step)
+ * @param {ReactNode} children     extra slots rendered between body and actions
+ *                                 (the split's stats strip)
+ * @param {string}    labelClass · bodyClass · actionsClass  full class overrides
+ * @param {string}    className    extra classes on the block
+ */
+export const HEADLINE_ROLE = {
+  pull: 'kol-section-text-pull',
+  'display-01': 'kol-sans-display-01',
+  'display-02': 'kol-sans-display-02',
+  'display-03': 'kol-sans-display-03',
+  'display-04': 'kol-sans-display-04',
+  'heading-01': 'kol-sans-heading-01',
+  'heading-02': 'kol-sans-heading-02',
+  'heading-03': 'kol-sans-heading-03',
+  'heading-04': 'kol-sans-heading-04',
+  'heading-05': 'kol-sans-heading-05',
+}
+
+export default function SectionText({
+  label,
+  headline,
+  headlineSize = 'heading-02',
+  headlineAs: Headline = 'h2',
+  headlineClass,
+  body,
+  actions,
+  align = 'start',
+  gap = 'gap-4',
+  children,
+  labelClass = 'kol-section-text-label',
+  bodyClass = 'kol-section-text-body',
+  actionsClass = 'flex flex-wrap gap-4',
+  className = '',
+}) {
+  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()}>
+      {label && <span className={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>)}
+      {children}
+      {actions && <div className={actionsClass}>{actions}</div>}
+    </div>
+  )
+}

package/src/organisms/CtaGlobal.jsx

@@ -1,67 +1,5 @@
 /**
- * CtaGlobal — editorial two-column contact/CTA band: a large display wordmark
- * on the left (e.g. "/ CONNECT") and a right column of stacked
- * label-over-value rows — a prompt row ("WORKING ON A PROJECT?" / "SEND A
- * MESSAGE") and a contact row whose value is a `mailto:` link. The editorial
- * closer of the CTA-band family (FoundryCTA is the simple centered tier).
- * Columns sit side by side from `md` up and stack below — the source's
- * no-breakpoint two-column was a bug fixed on recreation.
- *
- * Presentational — all copy arrives as props (the source hard-coded every
- * string). The right column is internally a list of rows: the named
- * `promptLabel`/`heading` and `contactLabel`/`email` conveniences cover the
- * common case, `secondaryRows` slots extra rows between them. A row with an
- * `href` renders an `<a>`; without, a static heading. Empty rows emit no
- * nodes.
- *
- * Eyebrow, labels, and values render exactly as authored — the source's
- * `uppercase` classes were dropped per KOL casing rules; author strings in
- * their final case at the call site.
- *
- * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
- * @param {ReactNode} promptLabel   prompt-row label (kol-helper-16)
- * @param {ReactNode} heading       prompt-row value (kol-sans-heading-01)
- * @param {ReactNode} contactLabel  contact-row label (kol-helper-16)
- * @param {string}    email         contact-row value + `mailto:` target; omit to drop the row
- * @param {{label: ReactNode, value: ReactNode, href?: string}[]} secondaryRows  extra right-column rows between prompt and contact
- * @param {string}    className     extra classes on the section
+ * @deprecated 2026-08-26 — `CtaGlobal` is `SectionCta` under its old name
+ * (SectionSet); identical props and render. Alias kept; removed at the next major.
  */
-export default function CtaGlobal({
-  eyebrow,
-  promptLabel,
-  heading,
-  contactLabel,
-  email,
-  secondaryRows = [],
-  className = '',
-}) {
-  const rows = [
-    ...(promptLabel || heading ? [{ label: promptLabel, value: heading }] : []),
-    ...secondaryRows,
-    ...(email ? [{ label: contactLabel, value: email, href: `mailto:${email}` }] : []),
-  ]
-  return (
-    <section className={`w-full bg-auto ${className}`.trim()}>
-      <div className="w-full 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) => (
-            <div key={i} className="self-stretch flex flex-col items-start gap-2">
-              {row.label && <div className="text-auto kol-helper-16">{row.label}</div>}
-              {row.href ? (
-                <a
-                  href={row.href}
-                  className="text-auto kol-sans-heading-01 hover:opacity-70 transition-opacity"
-                >
-                  {row.value}
-                </a>
-              ) : (
-                <div className="text-auto kol-sans-heading-01">{row.value}</div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
+export { default } from './SectionCta.jsx'

package/src/organisms/FeatureSplit.jsx

@@ -1,131 +1,22 @@
+import SectionSplit from './SectionSplit.jsx'
+
 /**
- * FeatureSplit — editorial media-and-text split section: a text column
- * (kicker / display pull / lede, then a stats strip OR a CTA row) beside a
- * media column (image/video with an optional gradient veil + caption). Two
- * columns at/above 901px, single stacked column below. Emits
- * kol-feature-split* classes (CSS in @kol/theme).
- *
- * Presentational — every piece of content arrives as a slot. `meta` and
- * `ctas` are mutually exclusive by intent (pick one); `ctas` is
- * conventionally a row of KOL Buttons (composition dependency — nothing is
- * imported here). The media column renders only when `media` is passed, and
- * `caption` gates both the gradient veil and the caption element, so omitted
- * slots emit no empty nodes.
- *
- * Kicker / meta labels / caption render exactly as authored — the source's
- * `text-transform: uppercase` was dropped per KOL casing rules; author those
- * strings in their final case at the call site.
- *
- * THE SECTION ANATOMY, ONCE (SectionSplit ruling, 2026-08-15). The brief asked
- * for a new `SectionSplit` — media slot beside kicker/heading/body/actions,
- * with a flip — and named eleven hand-built kol-website sections as evidence.
- * That is this component: the anatomy already shipped here, and a second one
- * beside it would be the very duplication the brief exists to end. It grew the
- * three things it genuinely lacked instead — `flip`, `titleSize`, `mediaAspect`.
- *
- * ON THREADING PER-SITE TYPE CLASSES — the brief's named "core design
- * question". The answer is that you do not thread one: a consumer picks a ROLE
- * (`titleSize`), and the component emits exactly one type class for the
- * heading. Passing `kol-sans-heading-01` in alongside `.kol-feature-split-pull`
- * would put two equal-specificity rules on one element and let sheet load order
- * decide the winner — the failure ARCHITECTURE §5 records, and the 2026-07-30
- * law that a component's type lives in its own rule. `columnClassName` and
- * friends remain, for LAYOUT.
- *
- * @param {ReactNode} kicker          mono eyebrow above the title (accent color)
- * @param {ReactNode} title           display pull headline; `<em>` renders as the italic accent
- * @param {'pull'|'display-01'|'display-02'|'display-03'|'heading-01'|'heading-02'|'heading-03'|'heading-04'|'heading-05'} [titleSize='pull']
- *   which type ROLE the heading wears — one class, never stacked
- * @param {ReactNode} body            lede paragraph
- * @param {{num: ReactNode, label: string}[]} meta  stats strip (mutually exclusive with `ctas`)
- * @param {ReactNode} ctas            button row (mutually exclusive with `meta`)
- * @param {ReactNode} media           image/video/interactive node for the visual
- *   column; omit for the text-only section (the /CONNECT band shape)
- * @param {string}    [mediaAspect='4/5'] aspect ratio of the media frame
- * @param {boolean}   [mediaHover=false]  zoom the media on frame hover — the same
- *   1.03 / 300ms / reduced-motion-safe treatment CardFeatureItem uses, so the
- *   estate has one motion vocabulary instead of a per-section re-decision
- * @param {boolean}   [flip=false]    media first, text second — the order swaps at
- *   both widths, so the stacked layout leads with the media too
- * @param {ReactNode} caption         mono caption + gradient veil over the media
- * @param {string}    bgImage         URL for an inline cover background on the section
- * @param {boolean}   fullBleed       span the full viewport width (100vw breakout)
- * @param {string}    className       extra classes on the section
- * @param {string}    innerClassName  extra classes on the grid wrapper
- * @param {string}    columnClassName extra classes on the text column
+ * @deprecated 2026-08-26 — `FeatureSplit` is `SectionSplit` under its old name
+ * (SectionSet). Same render, old prop names mapped: `kicker` → `label`,
+ * `title` → `headline`, `titleSize` → `headlineSize`, `ctas` → `actions`,
+ * `mediaAspect` → `ratio`, `flip` → `align="left"`. Kept as an alias so no
+ * call site breaks; removed at the next major.
  */
-const TITLE_ROLE = {
-  pull: 'kol-feature-split-pull',
-  'display-01': 'kol-sans-display-01',
-  'display-02': 'kol-sans-display-02',
-  'display-03': 'kol-sans-display-03',
-  'heading-01': 'kol-sans-heading-01',
-  'heading-02': 'kol-sans-heading-02',
-  'heading-03': 'kol-sans-heading-03',
-  'heading-04': 'kol-sans-heading-04',
-  'heading-05': 'kol-sans-heading-05',
-}
-
-export default function FeatureSplit({
-  kicker,
-  title,
-  titleSize = 'pull',
-  body,
-  meta,
-  ctas,
-  media,
-  mediaAspect = '4/5',
-  mediaHover = false,
-  flip = false,
-  caption,
-  bgImage,
-  fullBleed = false,
-  className = '',
-  innerClassName = '',
-  columnClassName = '',
-}) {
-  const sectionStyle = bgImage
-    ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
-    : undefined
-  const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''
+export default function FeatureSplit({ kicker, title, titleSize, ctas, mediaAspect, flip = false, align, ...rest }) {
   return (
-    <section
-      className={`kol-feature-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 grid-cols-1 min-[901px]:grid-cols-2 items-center gap-[clamp(48px,6vw,96px)] ${innerClassName}`.trim()}>
-        {/* `order` rather than `flex-row-reverse`: the grid is one column below
-          * 901px, and DOM order is what decides the stack there. Reversing a row
-          * would flip the wide layout and leave the narrow one text-first. */}
-        <div
-          className={`flex flex-col gap-4 max-w-[640px] ${flip ? 'order-2' : ''} ${columnClassName}`.replace(/\s+/g, ' ').trim()}
-        >
-          {kicker && <span className="kol-feature-split-kicker">{kicker}</span>}
-          {title && <h1 className={TITLE_ROLE[titleSize] ?? TITLE_ROLE.pull}>{title}</h1>}
-          {body && <p className="kol-feature-split-body">{body}</p>}
-          {meta && meta.length > 0 && (
-            <div className="kol-feature-split-meta flex flex-wrap gap-y-7 gap-x-12 pt-4">
-              {meta.map((m) => (
-                <div key={m.label} className="flex flex-col gap-0.5">
-                  <span className="kol-feature-split-meta-num">{m.num}</span>
-                  <span className="kol-feature-split-meta-label">{m.label}</span>
-                </div>
-              ))}
-            </div>
-          )}
-          {ctas && <div className="flex flex-wrap gap-4 pt-2">{ctas}</div>}
-        </div>
-        {media && (
-          <div
-            className={`kol-feature-split-visual relative rounded-[var(--kol-radius-sm)] overflow-hidden ${mediaHover ? 'is-hoverable' : ''} ${flip ? 'order-1' : ''}`.replace(/\s+/g, ' ').trim()}
-            style={{ aspectRatio: mediaAspect }}
-          >
-            {media}
-            {caption && <div className="kol-feature-split-visual-veil" aria-hidden="true" />}
-            {caption && <span className="kol-feature-split-visual-caption">{caption}</span>}
-          </div>
-        )}
-      </div>
-    </section>
+    <SectionSplit
+      label={kicker}
+      headline={title}
+      headlineSize={titleSize}
+      actions={ctas}
+      ratio={mediaAspect}
+      align={align ?? (flip ? 'left' : 'right')}
+      {...rest}
+    />
   )
 }

package/src/organisms/FeaturesCardSection.jsx

@@ -1,90 +1,19 @@
-import CardFeatureItem from '../molecules/CardFeatureItem.jsx'
+import SectionCards from './SectionCards.jsx'
 
 /**
- * FeaturesCardSection — the "N-up feature cards" band: an optional two-part
- * header (heading + mono lede) over a responsive row of CardFeatureItem
- * cards, capped by an optional centered CTA row. Cards stack column-wise
- * below `md` and become a fixed-height row at `md`+; swap
- * `cardsWrapperClassName` for a grid to change the layout.
- *
- * Fully prop-driven — no default copy, images, or routes live here; every
- * block is presence-gated (header on `headerLabel`/`headerDescription`,
- * cards on `features.length`, CTA row on `ctas`), so omitted slots emit no
- * empty nodes. `ctas` is conventionally a row of KOL Buttons (composition
- * dependency — nothing is imported here). Card links are plain anchors;
- * pass `onNavigate` to intercept same-tab navigations in an SPA.
- *
- * Header, lede, and card text render exactly as authored — no casing
- * transforms; author strings in their final case at the call site.
- *
- * @param {{title, icon, visual, description, href, backgroundColor, imageAspectRatio}[]} features
- *                                          cards rendered as CardFeatureItem molecules
- * @param {ReactNode} headerLabel           heading (kol-sans-heading-03)
- * @param {ReactNode} headerDescription     mono lede under the heading
- * @param {ReactNode} ctas                  centered CTA row (a row of Buttons, authored by the caller)
- * @param {Function}  onNavigate            (event, feature) => void — same-tab card-link seam (SPA intercept)
- * @param {string}    sectionClassName      extra classes on the <section>
- * @param {string}    wrapperClassName      outer column container
- * @param {string}    cardsWrapperClassName card row (default) or grid container
- * @param {string}    ctasClassName         CTA row padding
- * @param {string}    headerClassName       header container
- * @param {string}    headerTextWidthClass  lede measure
+ * @deprecated 2026-08-26 — `FeaturesCardSection` is `SectionCards` under its
+ * old name (SectionSet). Old prop names mapped: `headerLabel` → `headline`,
+ * `headerDescription` → `body`, `ctas` → `actions`, `ctasClassName` →
+ * `actionsClassName`. Alias kept; removed at the next major.
  */
-export default function FeaturesCardSection({
-  features = [],
-  headerLabel,
-  headerDescription,
-  ctas,
-  onNavigate,
-  sectionClassName = '',
-  wrapperClassName = 'w-full flex flex-col gap-8 md:gap-10 max-w-[1400px] mx-auto',
-  cardsWrapperClassName = 'self-stretch inline-flex flex-col md:flex-row md:h-72 justify-start items-center gap-6',
-  ctasClassName = 'pt-10 pb-24',
-  headerClassName = 'w-full pt-[224px]',
-  headerTextWidthClass = 'w-full md:w-[30%]',
-}) {
+export default function FeaturesCardSection({ headerLabel, headerDescription, ctas, ctasClassName, ...rest }) {
   return (
-    <section className={`w-full ${sectionClassName}`.trim()}>
-      <div className={wrapperClassName}>
-        {(headerLabel || headerDescription) && (
-          <div className={headerClassName}>
-            {headerLabel && (
-              <div className="flex items-center h-8">
-                <p className="kol-sans-heading-03">{headerLabel}</p>
-              </div>
-            )}
-            {headerDescription && (
-              <p className={`kol-mono-14 text-fg-64 mt-3 ${headerTextWidthClass}`.trim()}>
-                {headerDescription}
-              </p>
-            )}
-          </div>
-        )}
-
-        {features.length > 0 && (
-          <div className={cardsWrapperClassName}>
-            {features.map((feature, index) => (
-              <CardFeatureItem
-                key={index}
-                title={feature.title}
-                icon={feature.icon}
-                visual={feature.visual}
-                description={feature.description}
-                href={feature.href}
-                backgroundColor={feature.backgroundColor}
-                imageAspectRatio={feature.imageAspectRatio}
-                onNavigate={onNavigate ? (event) => onNavigate(event, feature) : undefined}
-              />
-            ))}
-          </div>
-        )}
-
-        {ctas && (
-          <div className={`w-full flex flex-wrap items-center justify-center gap-4 ${ctasClassName}`.trim()}>
-            {ctas}
-          </div>
-        )}
-      </div>
-    </section>
+    <SectionCards
+      headline={headerLabel}
+      body={headerDescription}
+      actions={ctas}
+      actionsClassName={ctasClassName}
+      {...rest}
+    />
   )
 }

package/src/organisms/FullBleedHero.jsx

@@ -1,111 +1,5 @@
-import { isValidElement } from 'react'
-import HlsVideo from '../atoms/HlsVideo.jsx'
-import Image from '../atoms/Image.jsx'
-
-/** Height presets; anything else is passed through as a class string. */
-const HEIGHTS = {
-  screen: 'h-screen',
-  lg: 'h-[440px] md:h-[640px]',
-  md: 'h-[320px] md:h-[440px]',
-}
-
 /**
- * Background layer: a media descriptor becomes a cover-fit Image / HlsVideo /
- * inert <video> (`.kol-full-bleed-hero-media` pins it absolute + object-cover
- * — CSS in @kol/theme); a ready ReactNode renders as-is and must position
- * itself (give it that same class).
+ * @deprecated 2026-08-26 — `FullBleedHero` is `SectionHero` under its old name
+ * (SectionSet); identical props and render. Alias kept; removed at the next major.
  */
-function MediaLayer({ media }) {
-  if (!media) return null
-  if (isValidElement(media) || typeof media !== 'object') return media
-
-  const { src, kind = 'image', poster, srcSet, alt = '' } = media
-
-  if (kind === 'video') {
-    // Non-HLS file (mp4/webm): a plain inert video element. HLS manifests —
-    // and the poster-only case — go through the HlsVideo atom, which owns
-    // hls.js attachment and the full non-interactive hardening set.
-    if (src && !src.endsWith('.m3u8')) {
-      return (
-        <video
-          src={src}
-          poster={poster}
-          className="kol-full-bleed-hero-media"
-          style={{ pointerEvents: 'none' }}
-          autoPlay
-          loop
-          muted
-          playsInline
-          controls={false}
-        />
-      )
-    }
-    return <HlsVideo src={src} poster={poster} className="kol-full-bleed-hero-media" />
-  }
-
-  return (
-    <Image
-      src={src}
-      srcSet={srcSet}
-      sizes={srcSet ? '100vw' : undefined}
-      alt={alt}
-      loading="eager"
-      className="kol-full-bleed-hero-media"
-    />
-  )
-}
-
-/**
- * FullBleedHero — full-bleed media hero: cover-fit background media (image or
- * video) filling a fixed-height section, an optional surface scrim, and one
- * content slot laid over it. The third member of the hero family — BrandHero
- * and SubPageHero are band heroes; this is the media one. The canonical
- * recipe drops an OverlayGlassPanel into `panel`; that recipe with
- * `kind: 'video'` + `height="screen"` IS the monorepo's StudioHero, folded in
- * here as a capability rather than a separate component.
- *
- * Presentational — no copy, no CDN paths, no routes. All text is authored
- * inside the caller's panel/children. The source's `opacity-${n}` dynamic
- * Tailwind class (JIT-invisible) is replaced by the scrim's inline style; the
- * source's image self-dim (`imageOpacity={40}`) is expressed here as
- * `overlayOpacity={60}` — a surface-primary veil over full-opacity media.
- *
- * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background — descriptor ({ kind: 'image'|'video' }) or a self-positioning node
- * @param {number}    overlayOpacity 0–100 surface-primary scrim over the media (inline opacity; default 0 = none)
- * @param {string}    height         'screen' | 'lg' | 'md' preset, or any Tailwind height class string
- * @param {ReactNode} panel          content slot, usually a caller-authored OverlayGlassPanel; wins over children
- * @param {ReactNode} children       fallback content slot when `panel` is omitted
- * @param {string}    align          'center' | 'start' | 'end' — horizontal placement of the content (vertically centered)
- * @param {string}    className      extra classes on the section
- */
-export default function FullBleedHero({
-  media,
-  overlayOpacity = 0,
-  height = 'lg',
-  panel,
-  children,
-  align = 'center',
-  className = '',
-}) {
-  const heightCls = HEIGHTS[height] || height
-  const alignCls =
-    align === 'start' ? 'justify-start'
-    : align === 'end' ? 'justify-end'
-    : 'justify-center'
-
-  return (
-    <section className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${heightCls} ${className}`.trim()}>
-      <MediaLayer media={media} />
-      {overlayOpacity > 0 && (
-        <div
-          aria-hidden="true"
-          className="absolute inset-0"
-          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`}>
-        {panel ?? children}
-      </div>
-    </section>
-  )
-}
+export { default } from './SectionHero.jsx'

package/src/organisms/SectionCards.jsx

@@ -0,0 +1,83 @@
+import CardFeatureItem from '../molecules/CardFeatureItem.jsx'
+import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
+
+/**
+ * SectionCards — the "N-up feature cards" band: a `SectionText` header over a
+ * responsive row of `CardFeatureItem` cards, capped by an optional centred
+ * action row. `FeaturesCardSection` is this component under its old name and
+ * prop names (`headerLabel` → `headline`, `headerDescription` → `body`,
+ * `ctas` → `actions`; alias kept).
+ *
+ * Every block is presence-gated (header on any text prop, cards on
+ * `features.length`, actions on `actions`), so omitted slots emit no empty
+ * nodes. Card links are plain anchors; pass `onNavigate` to intercept same-tab
+ * navigations in an SPA. Casing is authored at the call site.
+ *
+ * @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
+ * @param {Function}  onNavigate            (event, feature) => void
+ * @param {string}    sectionClassName · wrapperClassName · cardsWrapperClassName · actionsClassName · headerClassName · headerTextWidthClass  layout seams
+ */
+export default function SectionCards({
+  features = [],
+  label,
+  headline,
+  headlineSize = 'heading-03',
+  body,
+  actions,
+  onNavigate,
+  sectionClassName = '',
+  wrapperClassName = 'w-full flex flex-col gap-8 md:gap-10 max-w-[1400px] 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]',
+  headerTextWidthClass = 'w-full md:w-[30%]',
+}) {
+  return (
+    <section className={`w-full ${sectionClassName}`.trim()}>
+      <div className={wrapperClassName}>
+        {(label || headline || body) && (
+          <SectionText
+            label={label}
+            headline={headline}
+            headlineSize={headlineSize}
+            headlineAs="p"
+            /* the heading's 32px line box (`flex items-center h-8`) and the
+             * lede's 12px step, as the band has always drawn them */
+            headlineClass={`${HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-03']} flex items-center h-8`}
+            body={body}
+            bodyClass={`kol-mono-14 text-fg-64 ${headerTextWidthClass}`}
+            labelClass="kol-helper-12 text-meta"
+            gap="gap-3"
+            className={headerClassName}
+          />
+        )}
+
+        {features.length > 0 && (
+          <div className={cardsWrapperClassName}>
+            {features.map((feature, index) => (
+              <CardFeatureItem
+                key={index}
+                title={feature.title}
+                icon={feature.icon}
+                visual={feature.visual}
+                description={feature.description}
+                href={feature.href}
+                backgroundColor={feature.backgroundColor}
+                imageAspectRatio={feature.imageAspectRatio}
+                onNavigate={onNavigate ? (event) => onNavigate(event, feature) : undefined}
+              />
+            ))}
+          </div>
+        )}
+
+        {actions && (
+          <div className={`w-full flex flex-wrap items-center justify-center gap-4 ${actionsClassName}`.trim()}>
+            {actions}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/organisms/SectionCta.jsx

@@ -0,0 +1,54 @@
+import SectionText from '../molecules/SectionText.jsx'
+
+/**
+ * SectionCta — the editorial two-column contact/CTA band: a large display
+ * wordmark on the left (e.g. "/ CONNECT") and a right column of stacked
+ * label-over-value rows, each a `SectionText` (label in the helper voice,
+ * value as a heading-01; a row with `href` renders its value as a link).
+ * `CtaGlobal` is this component under its old name (alias kept). Columns sit
+ * side by side from `md` up and stack below. Casing is authored at the call site.
+ *
+ * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
+ * @param {ReactNode} promptLabel   prompt-row label
+ * @param {ReactNode} heading       prompt-row value
+ * @param {ReactNode} contactLabel  contact-row label
+ * @param {string}    email         contact-row value + `mailto:` target; omit to drop the row
+ * @param {{label: ReactNode, value: ReactNode, href?: string}[]} secondaryRows  extra rows between prompt and contact
+ * @param {string}    className     extra classes on the section
+ */
+export default function SectionCta({
+  eyebrow,
+  promptLabel,
+  heading,
+  contactLabel,
+  email,
+  secondaryRows = [],
+  className = '',
+}) {
+  const rows = [
+    ...(promptLabel || heading ? [{ label: promptLabel, value: heading }] : []),
+    ...secondaryRows,
+    ...(email ? [{ label: contactLabel, value: email, href: `mailto:${email}` }] : []),
+  ]
+  return (
+    <section className={`w-full bg-auto ${className}`.trim()}>
+      <div className="w-full 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) => (
+            <SectionText
+              key={i}
+              label={row.label}
+              labelClass="text-auto kol-helper-16"
+              headline={row.href ? <a href={row.href} className="hover:opacity-70 transition-opacity">{row.value}</a> : row.value}
+              headlineAs="div"
+              headlineClass="text-auto kol-sans-heading-01"
+              gap="gap-2"
+              className="self-stretch"
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/organisms/SectionFaq.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { Accordion, AccordionPanel } from '../molecules/Accordion.jsx'
+import SectionText from '../molecules/SectionText.jsx'
+
+/**
+ * SectionFaq — a `SectionText` header over an `Accordion` of question /
+ * answer items. The one NEW surface in the section family (SectionSet,
+ * 2026-08-26) — the behaviour already shipped in the Accordion molecule; this
+ * is the section around it.
+ *
+ * @param {ReactNode} label · headline · body · actions  the header (SectionText)
+ * @param {string}    [headlineSize='heading-02']
+ * @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
+ * @param {string}    className · innerClassName  layout seams
+ */
+export default function SectionFaq({
+  label,
+  headline,
+  headlineSize = 'heading-02',
+  body,
+  actions,
+  items = [],
+  singleOpen = false,
+  defaultOpen,
+  className = '',
+  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={innerClassName}>
+        {(label || headline || body || actions) && (
+          <SectionText label={label} headline={headline} headlineSize={headlineSize} body={body} actions={actions} />
+        )}
+        {items.length > 0 && (
+          <Accordion className="mt-0 mb-0">
+            {items.map((item, i) => (
+              <AccordionPanel
+                key={i}
+                title={item.q}
+                meta={item.meta}
+                {...(singleOpen
+                  ? { open: open === i, onToggle: (next) => setOpen(next ? i : null) }
+                  : { defaultOpen: defaultOpen === i })}
+              >
+                {item.a}
+              </AccordionPanel>
+            ))}
+          </Accordion>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/organisms/SectionHero.jsx

@@ -0,0 +1,135 @@
+import { isValidElement } from 'react'
+import HlsVideo from '../atoms/HlsVideo.jsx'
+import Image from '../atoms/Image.jsx'
+import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
+import SectionText from '../molecules/SectionText.jsx'
+
+/** Height presets; anything else is passed through as a class string. */
+const HEIGHTS = {
+  screen: 'h-screen',
+  lg: 'h-[440px] md:h-[640px]',
+  md: 'h-[320px] md:h-[440px]',
+}
+
+/**
+ * Background layer: a media descriptor becomes a cover-fit Image / HlsVideo /
+ * inert <video> (`.kol-full-bleed-hero-media` pins it absolute + object-cover
+ * — CSS in @kol/theme); a ready ReactNode renders as-is and must position
+ * itself (give it that same class).
+ */
+function MediaLayer({ media }) {
+  if (!media) return null
+  if (isValidElement(media) || typeof media !== 'object') return media
+
+  const { src, kind = 'image', poster, srcSet, alt = '' } = media
+
+  if (kind === 'video') {
+    if (src && !src.endsWith('.m3u8')) {
+      return (
+        <video
+          src={src}
+          poster={poster}
+          className="kol-full-bleed-hero-media"
+          style={{ pointerEvents: 'none' }}
+          autoPlay
+          loop
+          muted
+          playsInline
+          controls={false}
+        />
+      )
+    }
+    return <HlsVideo src={src} poster={poster} className="kol-full-bleed-hero-media" />
+  }
+
+  return (
+    <Image
+      src={src}
+      srcSet={srcSet}
+      sizes={srcSet ? '100vw' : undefined}
+      alt={alt}
+      loading="eager"
+      className="kol-full-bleed-hero-media"
+    />
+  )
+}
+
+/**
+ * SectionHero — the full-bleed media hero: cover-fit background media (image
+ * or video) filling a fixed-height section, an optional surface scrim, and
+ * the text in a glass panel over it. `FullBleedHero` is this component under
+ * its old name (alias kept).
+ *
+ * TWO WAYS IN, ONE ANATOMY (SectionSet, 2026-08-26). Pass `label` / `headline`
+ * / `body` / `actions` and the hero renders them as `SectionText` inside its
+ * own `OverlayGlassPanel` — the composed route. Pass `panel` (or children) and
+ * the hero renders your node exactly as before — the escape hatch, and what
+ * every existing call site does; nothing there moves.
+ *
+ * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background
+ * @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 {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 {ReactNode} panel          a caller-authored content node; wins over the text props and children
+ * @param {ReactNode} children       fallback content slot
+ * @param {string}    align          'center' | 'start' | 'end' — horizontal placement of the content
+ * @param {string}    className      extra classes on the section
+ */
+export default function SectionHero({
+  media,
+  overlayOpacity = 0,
+  height = 'lg',
+  label,
+  headline,
+  headlineSize = 'display-04',
+  body,
+  actions,
+  panelMaxWidth = 'max-w-[440px]',
+  panel,
+  children,
+  align = 'center',
+  className = '',
+}) {
+  const heightCls = HEIGHTS[height] || height
+  const alignCls =
+    align === 'start' ? 'justify-start'
+    : 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()}>
+      <MediaLayer media={media} />
+      {overlayOpacity > 0 && (
+        <div
+          aria-hidden="true"
+          className="absolute inset-0"
+          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`}>
+        {content}
+      </div>
+    </section>
+  )
+}

package/src/organisms/SectionSplit.jsx

@@ -0,0 +1,107 @@
+import SectionText from '../molecules/SectionText.jsx'
+
+/**
+ * SectionSplit — the media-and-text split section, on `SectionText` (the
+ * text column) beside the media frame. Two columns at/above 901px, one
+ * stacked column below. `FeatureSplit` is this component under its old name
+ * and old prop names (kept as an alias — see FeatureSplit.jsx).
+ *
+ * `align` is the one prop the second brief (SectionSet, 2026-08-26) added:
+ *   'right'  media on the right, text on the left — the default
+ *   'left'   media first (the old `flip`)
+ *   'center' ONE column: text centred, media below
+ * One anatomy, one prop — not a third component.
+ *
+ * `meta` and `actions` are mutually exclusive by intent (pick one); `actions`
+ * is conventionally a row of KOL Buttons. The media column renders only when
+ * `media` is passed, and `caption` gates both the gradient veil and the
+ * caption element. Casing is authored at the call site.
+ *
+ * @param {ReactNode} label        mono eyebrow above the headline (accent)
+ * @param {ReactNode} headline     display pull; `<em>` renders as the italic accent
+ * @param {string}    [headlineSize='pull']  which type ROLE the heading wears
+ * @param {string}    [headlineAs='h1']
+ * @param {ReactNode} body         lede paragraph
+ * @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 {boolean}   [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
+ * @param {'right'|'left'|'center'} [align='right']  media side, or centred single column
+ * @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 {string}    className · innerClassName · columnClassName  layout seams
+ */
+export default function SectionSplit({
+  label,
+  headline,
+  headlineSize = 'pull',
+  headlineAs = 'h1',
+  body,
+  meta,
+  actions,
+  media,
+  ratio = '4/5',
+  mediaHover = false,
+  align = 'right',
+  caption,
+  bgImage,
+  fullBleed = false,
+  className = '',
+  innerClassName = '',
+  columnClassName = '',
+}) {
+  const sectionStyle = bgImage
+    ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+    : undefined
+  const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''
+  const centred = align === 'center'
+  const mediaFirst = align === 'left'
+  const grid = centred
+    ? 'grid grid-cols-1 justify-items-center gap-[clamp(48px,6vw,96px)]'
+    : 'grid grid-cols-1 min-[901px]:grid-cols-2 items-center gap-[clamp(48px,6vw,96px)]'
+  return (
+    <section
+      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()}>
+        {/* `order` rather than `flex-row-reverse`: the grid is one column below
+          * 901px, and DOM order is what decides the stack there. */}
+        <SectionText
+          label={label}
+          headline={headline}
+          headlineSize={headlineSize}
+          headlineAs={headlineAs}
+          body={body}
+          actions={actions}
+          actionsClass={`flex flex-wrap gap-4 pt-2${centred ? ' justify-center' : ''}`}
+          align={centred ? 'center' : 'start'}
+          className={`max-w-[640px] ${mediaFirst ? 'order-2' : ''} ${columnClassName}`}
+        >
+          {meta && meta.length > 0 && (
+            <div className={`kol-section-split-meta flex flex-wrap gap-y-7 gap-x-12 pt-4${centred ? ' justify-center' : ''}`}>
+              {meta.map((m) => (
+                <div key={m.label} className="flex flex-col gap-0.5">
+                  <span className="kol-section-split-meta-num">{m.num}</span>
+                  <span className="kol-section-split-meta-label">{m.label}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </SectionText>
+        {media && (
+          <div
+            className={`kol-section-split-visual relative rounded-[var(--kol-radius-sm)] overflow-hidden ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'w-full max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            style={{ aspectRatio: ratio }}
+          >
+            {media}
+            {caption && <div className="kol-section-split-visual-veil" aria-hidden="true" />}
+            {caption && <span className="kol-section-split-visual-caption">{caption}</span>}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}