@kolkrabbi/kol-theme 0.36.0 → 0.37.0

package/kol-components-molecules.css

@@ -472,11 +472,20 @@
   border: 1px solid var(--kol-fg-04);
   border-radius: var(--kol-radius-sm);
   overflow: hidden;
-}
-
-/* Sizes mirror .kol-btn-{sm,md,lg} exactly: cell padding per size (below) +
- * mono type (12/14/16) applied on the cell in JSX. Height is padding-driven,
- * so a strip matches a Button of the same size. md is the base. */
+  /* The button-height LAW (2026-08-12): the strip's OUTER height is PINNED
+   * to the .kol-btn ladder — 26 / 32 / 40 — regardless of what a cell holds
+   * (icon or text) and regardless of variant (the filled variant drops the
+   * group border, so padding-driven height ran 2px short — the bug that
+   * forced the pin). Same principle as .kol-btn-icon's pinned square:
+   * the box never moves. */
+  box-sizing: border-box;
+  height: 32px; /* md — .kol-btn-md */
+}
+
+/* Sizes mirror .kol-btn-{sm,md,lg} exactly: pinned height above + cell
+ * padding per size (below) + mono type (12/14/16) applied in JSX. */
+.kol-seg--sm { height: 26px; }
+.kol-seg--lg { height: 40px; }
 .kol-seg--sm .kol-seg-cell { padding: 4px 12px; }
 .kol-seg--lg .kol-seg-cell { padding: 8px 20px; }
 
@@ -531,6 +540,14 @@
   color: var(--kol-fg-emphasis);
 }
 
+/* Tonal variant (2026-08-12, user ask): filled tiles, but the clicked cell
+ * marks itself by TONE — surface-tertiary fill, no ring. */
+.kol-seg--tonal .kol-seg-cell.is-active {
+  background: var(--kol-surface-tertiary);
+  box-shadow: none;
+  color: var(--kol-fg-emphasis);
+}
+
 /* =============================================================================
  * Color-doc widget chrome — ColorRamp · SpectrumGrid
  *

package/package.json

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