@kolkrabbi/kol-theme 0.162.0 → 0.163.0

package/kol-color.css

@@ -221,6 +221,12 @@
   color: var(--kol-surface-on-inverse);
 }
 
+/* the sunken surface had a token and no class (2026-10-01) — the preview stage reached for
+ * `bg-[var(--kol-surface-sunken)]`. Ground only: what sits in a well keeps its own ink. */
+.bg-surface-sunken {
+  background-color: var(--kol-surface-sunken);
+}
+
 /* ---------------------------------------------------------------------------
  * Elevation Utilities
  * --------------------------------------------------------------------------- */

package/kol-components-atoms.css

@@ -1315,7 +1315,7 @@ a.kol-icon-frame {
  * field to the token's line-height (h-4 / h-[18px] / h-[22px]), so a 16px face
  * in an unlifted 16px box would clip. */
 /* `.kol-control--bare` is a MARKER, not chrome (OverlaySearchFieldZoomsIOS,
- * 2026-09-01): SearchInput's `bare` body plan — the overlay palette's field —
+ * 2026-09-01): SearchInput's `bare` body plan — the search modal's field —
  * sits in a plain <label>, outside both shells, and was the field that put a
  * whole mobile review in a zoomed page. The marker carries no rules of its
  * own; it exists so the floor below keys on every body plan the DS ships,

package/kol-components-foundry.css

@@ -211,79 +211,14 @@
   font-size: 0.7rem;
 }
 
-.font-viewer-slider-group input[type='range'] {
-  flex: 1;
-  height: 15px;
-  padding: 7px 0;
-  cursor: pointer;
-  background: linear-gradient(var(--fv-black), var(--fv-black)) center/100% 1px no-repeat;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.font-viewer-slider-group input[type='range']::-webkit-slider-runnable-track,
-.font-viewer-slider-group input[type='range']::-moz-range-track {
-  width: 100%;
-  height: 1px;
-  background: transparent;
-}
-
-.font-viewer-slider-group input[type='range']::-webkit-slider-runnable-track {
-  border-radius: 9999px;
-}
-
-.font-viewer-slider-group input[type='range']::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 15px;
-  width: 15px;
-  border-radius: 50%;
-  background: var(--fv-black);
-  cursor: pointer;
-  margin-top: 0;
-}
-
-.font-viewer-slider-group input[type='range']::-moz-range-thumb {
-  height: 15px;
-  width: 15px;
-  border-radius: 50%;
-  background: var(--fv-black);
-  cursor: pointer;
-}
-
-.font-viewer-slider-group input[type='range']::-moz-range-track {
-  border-radius: 9999px;
-}
-
-.font-viewer-slider-group input[type='range']::-ms-track {
-  width: 100%;
-  height: 1px;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
-
-.font-viewer-slider-group input[type='range']::-ms-fill-lower,
-.font-viewer-slider-group input[type='range']::-ms-fill-upper {
-  background: var(--fv-black);
-}
-
-.font-viewer-slider-group input[type='range']::-ms-thumb {
-  height: 15px;
-  width: 15px;
-  border-radius: 50%;
-  background: var(--fv-black);
-  cursor: pointer;
-}
-
-.font-viewer-slider-group input[type='range']::-webkit-slider-thumb,
-.font-viewer-slider-group input[type='range']::-moz-range-thumb {
-  height: 15px;
-  width: 15px;
-  border-radius: 50%;
-  background: var(--fv-black);
-  cursor: pointer;
-}
+/* The range is `Slider` now (2026-10-02 — the ~65 lines that drew one here are in
+ * `_tmp/2026-10-02-foundry-slider-css/`). The viewer keeps its own two-color scheme (`--fv-*`,
+ * swapped at runtime), so the slider's track, knob and readout are bound to it here. */
+.font-viewer-slider-group { --kol-slider-track: var(--fv-black); }
+.font-viewer-slider-group .slider-black::-webkit-slider-thumb { background: var(--fv-black); }
+.font-viewer-slider-group .slider-black::-moz-range-thumb { background: var(--fv-black); }
+.font-viewer-slider-group label,
+.font-viewer-slider-group span { color: var(--fv-black); background: transparent; padding: 0; }
 
 .font-viewer-variable-axes {
   margin-top: 12px;

package/kol-components-molecules.css

@@ -944,7 +944,7 @@
   color: var(--kol-oq-96);
   /* NO BORDER, NO SHADOW (user 2026-08-01). Both were tried and both were
    * wrong: the shadow was another product's floating-card idiom, and the
-   * hairline left an empty palette reading as a bordered empty box. The SCRIM
+   * hairline left an empty search modal reading as a bordered empty box. The SCRIM
    * is the separation — a 60% tint is already a stronger edge than an
    * 8%-opacity line. */
   /* `sm` — the radius this repo's chrome actually uses. */
@@ -1628,8 +1628,8 @@
 /* THE QUICKTIME BAR (PlaybackBarAndAudioSheet, kol-r2b2 2026-08-27 — ruled
  * against the reference). White glyphs on the frosted strip whatever the theme:
  * the ghost IconFrame paints --kol-oq-48, a theme color, and the bar sits on
- * media, not on the theme. The scrubber is a native range — a 2px track at 40 %
- * white, a tall 4 × 28 white pill for the knob — pseudo-elements, so CSS. */
+ * media, not on the theme. The scrubber is a native range — a 2px track, a tall
+ * 4 × 28 pill for the knob — pseudo-elements, so CSS. */
 .kol-playback-bar .kol-icon-frame { color: var(--kol-color-ab-white); opacity: 0.8; }
 .kol-playback-bar .kol-icon-frame:hover,
 .kol-playback-bar .kol-icon-frame:focus-visible { opacity: 1; }
@@ -1641,18 +1641,21 @@
   outline: none;
   cursor: pointer;
 }
-.kol-playback-scrub::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); }
-.kol-playback-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 28px; margin-top: -13px; border-radius: 2px; background: var(--kol-color-ab-white); }
-.kol-playback-scrub::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); }
-.kol-playback-scrub::-moz-range-thumb { width: 4px; height: 28px; border: 0; border-radius: 2px; background: var(--kol-color-ab-white); }
+/* THE SCRUBBER IS A SLIDER VARIANT (2026-10-02, `Slider variant="scrub"`), so at rest it takes the
+ * THEME's ink — an opaque rail and knob, the look the docked bar already had — and reads the
+ * slider's own `--kol-slider-track` seam. Only the bar FLOATING over media paints it white. */
+.kol-playback-scrub::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: var(--kol-slider-track, var(--kol-oq-24)); }
+.kol-playback-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 28px; margin-top: -13px; border-radius: 2px; background: var(--kol-oq-80); }
+.kol-playback-scrub::-moz-range-track { height: 2px; border-radius: 1px; background: var(--kol-slider-track, var(--kol-oq-24)); }
+.kol-playback-scrub::-moz-range-thumb { width: 4px; height: 28px; border: 0; border-radius: 2px; background: var(--kol-oq-80); }
+.kol-playback-bar:not(.kol-playback-bar--docked) .kol-playback-scrub::-webkit-slider-runnable-track { background: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); }
+.kol-playback-bar:not(.kol-playback-bar--docked) .kol-playback-scrub::-webkit-slider-thumb { background: var(--kol-color-ab-white); }
+.kol-playback-bar:not(.kol-playback-bar--docked) .kol-playback-scrub::-moz-range-track { background: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); }
+.kol-playback-bar:not(.kol-playback-bar--docked) .kol-playback-scrub::-moz-range-thumb { background: var(--kol-color-ab-white); }
 /* DOCKED (2026-09-23) — the bar in the Quick Look window's footer. It sits on the window, not on
  * media, so it takes the theme's ink on an opaque plate instead of white on a dark wash. */
 .kol-playback-bar--docked { background: var(--kol-oq-08); color: var(--kol-oq-80); }
 .kol-playback-bar--docked .kol-icon-frame { color: var(--kol-oq-80); }
-.kol-playback-bar--docked .kol-playback-scrub::-webkit-slider-runnable-track { background: var(--kol-oq-24); }
-.kol-playback-bar--docked .kol-playback-scrub::-webkit-slider-thumb { background: var(--kol-oq-80); }
-.kol-playback-bar--docked .kol-playback-scrub::-moz-range-track { background: var(--kol-oq-24); }
-.kol-playback-bar--docked .kol-playback-scrub::-moz-range-thumb { background: var(--kol-oq-80); }
 
 /* ColumnBrowser rows — ONE SELECTED STATE (ColumnBrowserSeams, kol-r2b2
  * 2026-08-28; user: "ONLY one selected state can exist, not TWO"). The row's
@@ -2205,7 +2208,7 @@
 /* ─── the families that keep their own plates ─── */
 .kol-view-toggle { background-color: var(--kol-tone-bg, var(--kol-surface-secondary)); }
 /* keyboard focus in the well wears the DS ring, not the browser's blue (a button regains focus when
- * the search palette it opened closes, 2026-09-23) */
+ * the search modal it opened closes, 2026-09-23) */
 .kol-view-toggle button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--kol-oq-24); }
 /* the sunken well's chip ladder (rest · +fg-04 hover · +fg-08 selected) — on the
  * element, or inherited from a sunken wrapper */

package/kol-components-workshop.css

@@ -134,6 +134,36 @@
   padding-inline-start: var(--kol-pad-chrome-x);
 }
 
+/* THE RAIL'S THIRD STATE — ICONS (user ruling 2026-10-02: *"I wanted that icon state on the rails"*).
+ * Beside visible and hidden: the left rail as a strip, one glyph per group. Its grid track is the
+ * framework's collapsed-rail width (`--kol-sidenav-w-collapsed`, set in ShellLayout), so the strip
+ * drops the open rail's inner inset and centres its glyphs.
+ *
+ * HOVER OPENS IT OVER THE PAGE (`.is-peek`, stamped by ShellNavColumn): the column grows to the
+ * open rail's width past its own track, on the sticky tier with the page's surface behind it, so
+ * the page under it does not reflow — a hover must not move the thing you are reading. */
+.shell-rail--icons {
+  padding-inline-end: 0;
+}
+.shell-rail--icons.is-peek {
+  width: var(--kol-shell-nav-w);
+  z-index: var(--kol-z-sticky);
+  background: var(--kol-surface-primary);
+  padding-inline-end: var(--kol-pad-chrome-x);
+}
+.shell-rail-icons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kol-spacing-1);
+}
+/* the group you are in: the rail's active wash HELD ON (the 2026-08-12 ruling `.kol-shell-rail`
+ * already carries — navigation is location, never a pressed tool) */
+.shell-rail-icons .kol-btn-nav[aria-current="page"] {
+  background-color: var(--kol-oq-04);
+  color: var(--kol-oq-96);
+}
+
 .shell-main {
   min-width: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.162.0",
+  "version": "0.163.0",
   "description": "Tokens and base CSS",
   "license": "MIT",
   "type": "module",