@kolkrabbi/kol-theme 0.35.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; }
 
@@ -509,6 +518,36 @@
   outline-offset: -2px;
 }
 
+/* Filled variant — the segmented state law (2026-08-12): every cell is a
+ * FILLED TILE (input surface tone) with 1px transparent gaps — never an
+ * outline shell around the group; the outlined treatment marks ONLY the
+ * selected cell (inset ring). Group radius clips the outer tile corners. */
+.kol-seg--filled {
+  border: none;
+  gap: 1px;
+  background: transparent;
+}
+
+.kol-seg--filled .kol-seg-cell {
+  background: var(--kol-surface-secondary);
+}
+
+.kol-seg--filled .kol-seg-cell + .kol-seg-cell { border-left: none; }
+
+.kol-seg--filled .kol-seg-cell.is-active {
+  background: var(--kol-surface-secondary);
+  box-shadow: inset 0 0 0 1px var(--kol-fg-24);
+  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.35.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",