@kolkrabbi/kol-theme 0.53.0 → 0.55.0

package/kol-components-organisms.css

@@ -262,15 +262,33 @@
  */
 
 /* =============================================================================
- * FeatureSplit
+ * SectionSplit + SectionText (the section family, SectionSet 2026-08-26)
+ *
+ * `.kol-section-text-{label,pull,body}` are the text block's classes and
+ * `.kol-section-split-*` the split's; every `.kol-feature-split-*` selector
+ * below is the same rule under the old name, kept ONE release for a consumer's
+ * own CSS still pointing at it — dropped at the next major.
  * ============================================================================= */
 
-.kol-feature-split {
+.kol-feature-split,
+.kol-section-split {
   background: var(--kol-surface-primary);
   color: var(--kol-surface-on-primary);
 }
 
-.kol-feature-split-kicker {
+/* THE EYEBROW IS UPPERCASE BY ROLE (user ruling 2026-08-26, the fourth time).
+ * Casing is a property of the ROLE, not a law about strings: an eyebrow /
+ * kicker / section label is caps by design language — the display voice
+ * already carries its transform "by contract" — while body copy, buttons and
+ * tags render as authored. SectionText stamps this on every label it renders,
+ * whatever voice class rides beside it. The old "no text-transform, ever" was
+ * one call about button strings written up as a law for every string. */
+.kol-section-text-eyebrow {
+  text-transform: uppercase;
+}
+
+.kol-feature-split-kicker,
+.kol-section-text-label {
   font-family: var(--kol-font-family-mono, monospace);
   font-size: 18px;
   font-weight: 600;
@@ -278,7 +296,8 @@
   color: var(--kol-accent-primary);
 }
 
-.kol-feature-split-pull {
+.kol-feature-split-pull,
+.kol-section-text-pull {
   margin: 0;
   font-family: var(--kol-font-family-sans);
   font-weight: 700;
@@ -288,7 +307,8 @@
   color: var(--kol-surface-on-primary);
 }
 
-.kol-feature-split-pull em {
+.kol-feature-split-pull em,
+.kol-section-text-pull em {
   font-family: var(--kol-font-family-sans);
   font-feature-settings: "liga", "dlig";
   font-weight: 700;
@@ -296,7 +316,8 @@
   color: var(--kol-accent-primary);
 }
 
-.kol-feature-split-body {
+.kol-feature-split-body,
+.kol-section-text-body {
   margin: 0;
   font-family: var(--kol-font-family-sans);
   font-weight: 400;
@@ -305,11 +326,13 @@
   color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
 }
 
-.kol-feature-split-meta {
+.kol-feature-split-meta,
+.kol-section-split-meta {
   border-top: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
 }
 
-.kol-feature-split-meta-num {
+.kol-feature-split-meta-num,
+.kol-section-split-meta-num {
   font-family: var(--kol-font-family-sans);
   font-weight: 900;
   font-size: 32px;
@@ -318,7 +341,8 @@
   color: var(--kol-surface-on-primary);
 }
 
-.kol-feature-split-meta-label {
+.kol-feature-split-meta-label,
+.kol-section-split-meta-label {
   font-family: var(--kol-font-family-mono, monospace);
   font-size: 10px;
   font-weight: 600;
@@ -326,7 +350,8 @@
   color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
 }
 
-.kol-feature-split-visual img {
+.kol-feature-split-visual img,
+.kol-section-split-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -341,20 +366,25 @@
  * 2026-08-12) — one motion vocabulary, not two. Motion chrome is DS CSS, never
  * a JSX utility (the ComponentTailwindSourceTrap law). The frame's own
  * overflow-hidden + radius clip the scale. */
-.kol-feature-split-visual.is-hoverable > :first-child {
+.kol-feature-split-visual.is-hoverable > :first-child,
+.kol-section-split-visual.is-hoverable > :first-child {
   transition: transform 300ms ease;
 }
 
-.kol-feature-split-visual.is-hoverable:hover > :first-child {
+.kol-feature-split-visual.is-hoverable:hover > :first-child,
+.kol-section-split-visual.is-hoverable:hover > :first-child {
   transform: scale(1.03);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kol-feature-split-visual.is-hoverable > :first-child { transition: none; }
-  .kol-feature-split-visual.is-hoverable:hover > :first-child { transform: none; }
+  .kol-feature-split-visual.is-hoverable > :first-child,
+  .kol-section-split-visual.is-hoverable > :first-child { transition: none; }
+  .kol-feature-split-visual.is-hoverable:hover > :first-child,
+  .kol-section-split-visual.is-hoverable:hover > :first-child { transform: none; }
 }
 
-.kol-feature-split-visual-veil {
+.kol-feature-split-visual-veil,
+.kol-section-split-visual-veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(
@@ -366,7 +396,8 @@
   pointer-events: none;
 }
 
-.kol-feature-split-visual-caption {
+.kol-feature-split-visual-caption,
+.kol-section-split-visual-caption {
   position: absolute;
   left: 24px;
   bottom: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",