@kolkrabbi/kol-component 0.72.0 → 0.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.72.0",
+  "version": "0.73.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/molecules/SectionText.jsx

@@ -13,7 +13,9 @@
  * 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.
+ * same anatomy. THE LABEL IS UPPERCASE BY ROLE (user ruling 2026-08-26):
+ * an eyebrow is caps by design language, so the span carries
+ * `.kol-section-text-eyebrow`; headline, body and actions render as authored.
  *
  * @param {ReactNode} label        section header / kicker
  * @param {ReactNode} headline     the heading
@@ -60,7 +62,9 @@ export default function SectionText({
   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>}
+      {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
+        * `labelClass` is the voice riding beside it */}
+      {label && <span className={`kol-section-text-eyebrow ${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}

package/src/organisms/SectionCards.jsx

@@ -11,7 +11,7 @@ import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
  * 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.
+ * navigations in an SPA. The label is uppercase by role; the rest as authored.
  *
  * @param {{title, icon, visual, description, href, backgroundColor, imageAspectRatio}[]} features
  * @param {ReactNode} label · headline · body   the header (heading-03 + mono lede by default)

package/src/organisms/SectionCta.jsx

@@ -6,7 +6,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * 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.
+ * side by side from `md` up and stack below. Row labels are uppercase by role.
  *
  * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
  * @param {ReactNode} promptLabel   prompt-row label

package/src/organisms/SectionSplit.jsx

@@ -15,7 +15,7 @@ import SectionText from '../molecules/SectionText.jsx'
  * `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.
+ * caption element. The label is uppercase by role; the rest renders as authored.
  *
  * @param {ReactNode} label        mono eyebrow above the headline (accent)
  * @param {ReactNode} headline     display pull; `<em>` renders as the italic accent