@kolkrabbi/kol-theme 0.95.0 → 0.97.0

package/kol-components-atoms.css

@@ -717,6 +717,97 @@
   border: none;
 }
 
+/* ── Dual-thumb range (SliderDualThumbAndPlayhead, kol-mirror 2026-08-30) ────
+ * Two native ranges stacked on ONE track — the only way two thumbs share a
+ * rail. The INPUT takes `pointer-events: none` so the dead space between the
+ * thumbs does not swallow a track click, and each THUMB takes it back; without
+ * that pair the upper input covers the lower one entirely.
+ *
+ * The two must be tellable apart at a glance — you have to know which end you
+ * grabbed. In-mark is hollow (surface fill, ink ring), out-mark is solid, which
+ * is the treatment mirror's local copy proved over months.
+ *
+ * The playhead colour is a TOKEN. Mirror hardcoded `#2dd4bf`, which is the
+ * defect this move exists to end: a literal cannot follow a theme or a
+ * consumer's brand. `--kol-slider-playhead` defaults to the accent and is
+ * overridable per instance. */
+.kol-slider-dual {
+  position: relative;
+  width: 100%;
+  height: 20px;
+}
+
+.kol-slider-dual-rail {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 9px;
+  height: 2px;
+  background: var(--kol-slider-track, var(--kol-surface-on-primary));
+}
+
+.kol-slider-dual-playhead {
+  position: absolute;
+  top: 0;
+  width: 3px;
+  height: 20px;
+  margin-left: -1.5px;
+  border-radius: 1px;
+  background: var(--kol-slider-playhead, var(--kol-accent-primary));
+  z-index: 4;
+  cursor: grab;
+}
+.kol-slider-dual-playhead:active { cursor: grabbing; }
+
+.kol-slider-range {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
+}
+.kol-slider-range::-webkit-slider-runnable-track { background: transparent; height: 2px; }
+.kol-slider-range::-moz-range-track { background: transparent; height: 2px; }
+
+.kol-slider-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: auto;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  margin-top: -5px;
+  cursor: pointer;
+}
+.kol-slider-range::-moz-range-thumb {
+  appearance: none;
+  pointer-events: auto;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* in = hollow, out = solid */
+.kol-slider-range--in::-webkit-slider-thumb {
+  background: var(--kol-surface-primary);
+  border: 1.5px solid var(--kol-surface-on-primary);
+}
+.kol-slider-range--in::-moz-range-thumb {
+  background: var(--kol-surface-primary);
+  border: 1.5px solid var(--kol-surface-on-primary);
+}
+.kol-slider-range--out::-webkit-slider-thumb {
+  background: var(--kol-surface-on-primary);
+  border: none;
+}
+.kol-slider-range--out::-moz-range-thumb {
+  background: var(--kol-surface-on-primary);
+  border: none;
+}
+
 
 /* ═══════════════════════════════════════════════════════════════
  * Sidenav primitives — promoted from kol-framework.css 2026-04-30.

package/kol-components-molecules.css

@@ -962,6 +962,39 @@
 .kol-row--divided {
   border-bottom: 1px solid var(--kol-fg-08);
 }
+/* `specs` — the row's trailing label/value column (RowVariantNamesAndSpecs,
+ * 2026-08-29). It rides every horizontal variant because year · material ·
+ * edition is a CONTENT difference, not a geometry one; a seventh page-named
+ * variant for it would repeat the mistake that ticket opens with.
+ * Type is declared HERE, not as `kol-mono-12` on the element — ARCHITECTURE §5:
+ * a utility class on the markup ties at specificity and loses to whichever
+ * sheet loads last. Values match the family's meta voice (kol-mono-12). */
+.kol-row-specs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kol-spacing-1);
+  margin: 0;
+}
+.kol-row-specs > div {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--kol-spacing-3);
+}
+.kol-row-specs dt,
+.kol-row-specs dd {
+  margin: 0;
+  font-family: var(--kol-font-family-mono);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+}
+.kol-row-specs dt {
+  color: var(--kol-fg-meta);
+}
+.kol-row-specs dd {
+  color: var(--kol-fg-emphasis);
+  text-align: right;
+}
 /* THE THUMB IS A FIXED SQUARE BOX (ContentRowsAndPrintCard, kol-website
  * 2026-08-27 — user: "the image should not control height, image should fit
  * the row image placeholder"). Verbatim from the /stack + /prints tune: the

package/package.json

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