@kolkrabbi/kol-theme 0.124.0 → 0.126.0

package/kol-components-atoms.css

@@ -127,6 +127,16 @@
 }
 /* ─── Sizes (padding only — type class applied via JSX) ─── */
 
+/* THE XS RUNG (ControlsXsRung, kol-monitor 2026-09-01; user: "DS should ship xs
+ * size — I actually often find situations where xs would be helpful"). An
+ * instrument panel runs 8px mono in a 16–20px shell and the ladder stopped at
+ * sm (12px in 26–28), which is the one reason the rack's TextInput / Dropdown /
+ * Selector could not collapse onto Input / Dropdown / Stepper. xs = kol-mono-8
+ * (line-height 12) + 4px vertical + the shell's 1px ring = 22px, 8px sides,
+ * the xs radius; the icon-only square is 20.
+ * Opt-in by prop only — the 2026-07-28 "dropdowns are sm at every viewport"
+ * law is untouched; nothing ramps to xs by viewport. */
+.kol-control-xs { padding: 4px 8px; border-radius: var(--kol-radius-xs); }
 .kol-control-sm { padding: 4px 12px; }
 .kol-control-md { padding: 6px 16px; }
 .kol-control-lg { padding: 8px 20px; }
@@ -237,6 +247,7 @@
  * a lone glyph gets a PINNED SQUARE per rung — sm 28 / md 32 / lg 36 — equal to
  * the rung's button height and independent of glyph size (padding-derived
  * squares drifted with icon size; user law: the box never moves). */
+.kol-btn-icon.kol-btn-xs { width: 20px; height: 20px; padding: 0; }
 .kol-btn-icon.kol-btn-sm { width: 28px; height: 28px; padding: 0; }
 .kol-btn-icon.kol-btn-md { width: 32px; height: 32px; padding: 0; }
 .kol-btn-icon.kol-btn-lg { width: 36px; height: 36px; padding: 0; }
@@ -370,6 +381,8 @@
   }
 }
 
+/* xs — the panel rung (ControlsXsRung, 2026-09-01): 22px shell (20 + ring), xs radius */
+.kol-btn-xs { padding: 4px 8px; border-radius: var(--kol-radius-xs); }
 .kol-btn-sm { padding: 4px 12px; }
 .kol-btn-md { padding: 6px 16px; }
 .kol-btn-lg { padding: 8px 20px; }

package/kol-typography.css

@@ -1013,13 +1013,25 @@
   margin: 0 0 16px;
 }
 
-/* Display scale — D1 (hero), D2 (sub-hero), D3 (chapter title / .kol-prose-title alias). */
+/* Display scale — D1 (hero), D2 (sub-hero), D3 (chapter title / .kol-prose-title alias).
+ *
+ * ON THE LADDER, NOT FIXED (ProseTitleFixedSize, kol-website 2026-09-01): these
+ * three were the only display steps with no responsive rung — `.kol-prose-title`
+ * set a real article title to four lines of 56px at 390 and spent the fold
+ * before the first word of body. Each now reads the display token whose DESKTOP
+ * value it already was (80 → display-01, 64 → display-tight-01, 56 → display-02),
+ * CAPPED at that value with `min()`: below 768 they take the ladder's mobile step
+ * (56 · 48 · 44), and from 768 up they are pixel-identical to before — the
+ * ladder's third rung (96 · 72 · 64 at 1280) is deliberately not taken, a prose
+ * title at 64 was never the design. Line-heights became the same ratios
+ * (1 · 1.0625 · 1.07) so the leading follows the size. The ramp lives in the
+ * token, as the ticket asked; the ceiling stays where the design was. */
 
 .kol-prose-display {
   font-family: var(--kol-font-family-sans-narrow);
-  font-size: 80px;
+  font-size: min(var(--kol-text-display-01), 80px);
   font-weight: 500;
-  line-height: 80px;
+  line-height: 1;
   letter-spacing: -0.01em;
   color: var(--kol-surface-on-primary);
   margin: 0 0 24px;
@@ -1027,9 +1039,9 @@
 
 .kol-prose-display-md {
   font-family: var(--kol-font-family-sans-narrow);
-  font-size: 64px;
+  font-size: min(var(--kol-text-display-tight-01), 64px);
   font-weight: 500;
-  line-height: 68px;
+  line-height: 1.0625;
   letter-spacing: -0.01em;
   color: var(--kol-surface-on-primary);
   margin: 0 0 24px;
@@ -1037,9 +1049,9 @@
 
 .kol-prose-title {
   font-family: var(--kol-font-family-sans-narrow);
-  font-size: 56px;
+  font-size: min(var(--kol-text-display-02), 56px);
   font-weight: 500;
-  line-height: 60px;
+  line-height: 1.07;
   letter-spacing: -0.01em;
   color: var(--kol-surface-on-primary);
   margin: 0 0 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.124.0",
+  "version": "0.126.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",