@kolkrabbi/kol-theme 0.34.0 → 0.36.0

package/kol-components-molecules.css

@@ -509,6 +509,28 @@
   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);
+}
+
 /* =============================================================================
  * Color-doc widget chrome — ColorRamp · SpectrumGrid
  *

package/kol-typography.css

@@ -912,7 +912,9 @@
 .kol-sans-heading-04 {
   font-family: var(--kol-font-family-sans-compact);
   font-size: var(--kol-text-heading-04);
-  line-height: 100%;
+  /* 120% — was 100%, the one dip in the 110/110/120/x/125 ramp; 24px H4
+   * set solid, tighter than the 64px H1 (user ruling 2026-08-12). */
+  line-height: 120%;
   font-weight: 500;
 }
 

package/kol-utilities.css

@@ -90,3 +90,36 @@
 .hide-number-spinners {
   -moz-appearance: textfield;
 }
+
+/* Link underline — the animated hover affordance: draws in left→right on
+ * hover/focus, retracts right→left on leave (transform-origin swap, not a
+ * fade). Line is currentColor so it rides the text at any scale. Minted from
+ * kol-website's animations.css (NavLinkUnderline, 2026-08-12); DS version
+ * adds :focus-visible parity and reduced-motion handling.
+ * Thickness knob: --kol-link-underline-size (2px default — fine at mono-14,
+ * a heading-01 link may want 3px). */
+.kol-link-underline {
+  position: relative;
+}
+.kol-link-underline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: var(--kol-link-underline-size, 2px);
+  background-color: currentColor;
+  transform-origin: bottom right;
+  transform: scaleX(0);
+  transition: transform 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.kol-link-underline:hover::after,
+.kol-link-underline:focus-visible::after {
+  transform-origin: bottom left;
+  transform: scaleX(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-link-underline::after {
+    transition: none;
+  }
+}

package/package.json

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