@kolkrabbi/kol-theme 0.96.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/package.json

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