@kolkrabbi/kol-theme 0.162.0 → 0.164.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,
@@ -1324,9 +1324,14 @@ a.kol-icon-frame {
   /* THE TOUCH RUNG (D5, 2026-09-29 — see kol-base-tokens.css): every text control types 16 / 22 on
    * touch, so a derived box grows exactly as the pinned tokens do — xs/sm 4+4+22+2 = 32, md
    * 6+6+22+2 = 36, lg 40. Two classes, so it outranks the size's own kol-mono-* class. */
-  .kol-btn.kol-btn-xs, .kol-btn.kol-btn-sm, .kol-btn.kol-btn-md, .kol-btn.kol-btn-lg,
+  /* NOT INSIDE A HARDWARE PANEL (2026-10-02, kol-monitor's Patch module): a module is drawn at the
+   * rack's own zoom, and its `xs` controls are the PANEL rung — 8px type in a 22px box on a 96px
+   * plate. The rung lifted its dropdown to 16 / 32 and it no longer fitted. `.kol-hw-panel` marks
+   * the plate (ModuleFrame) and a list portalled out of one (Dropdown); `:where()` keeps the
+   * rule's specificity where it was. The box tokens are pinned back in kol-components-controls.css. */
+  :is(.kol-btn.kol-btn-xs, .kol-btn.kol-btn-sm, .kol-btn.kol-btn-md, .kol-btn.kol-btn-lg,
   .kol-control.kol-control-xs, .kol-control.kol-control-sm, .kol-control.kol-control-md, .kol-control.kol-control-lg,
-  .kol-seg .kol-seg-cell, .kol-menu-btn.kol-menu-btn {
+  .kol-seg .kol-seg-cell, .kol-menu-btn.kol-menu-btn):where(:not(.kol-hw-panel, .kol-hw-panel *)) {
     font-size: 16px;
     line-height: 22px;
   }

package/kol-components-controls.css

@@ -34,3 +34,28 @@
   --kol-ctl-signal-input: #4ade80;
   --kol-ctl-cv-attenuate: #497DA2;
 }
+
+/* A HARDWARE PANEL KEEPS ITS DESK SIZES ON TOUCH (2026-10-02). The touch rung (kol-base-tokens.css)
+ * grows every control box on a coarse pointer — xs 22 → 32 — so a finger can hit app chrome. A
+ * module is not app chrome: it is drawn at the rack's zoom, which is how it is made reachable, and
+ * its controls are sized to the plate. `.kol-hw-panel` is ModuleFrame's root, and Dropdown puts it
+ * on a list it portals out of one. The type half of the rung skips the same marker
+ * (kol-components-atoms.css). */
+@media (pointer: coarse) {
+  .kol-hw-panel {
+    --kol-ctl-xs: 22px;
+    --kol-ctl-sm: 26px;
+    --kol-ctl-md: 32px;
+    --kol-ctl-lg: 40px;
+  }
+}
+
+/* THE PLATE IS THE GROUND (2026-10-02, kol-monitor's Patch module). An outline or ghost dropdown
+ * paints its list in `--kol-tone-ground` — "the ground it sits on", `surface-primary` unless
+ * something says otherwise (kol-components-molecules.css, TONE). A module's plate is
+ * `surface-secondary`, so the list came out page-coloured, darker than the trigger above it. The
+ * default plate says what it is; a consumer that passes its own plate class sets the ground with it. */
+.kol-hw-panel.bg-surface-secondary {
+  --kol-tone-ground: var(--kol-surface-secondary);
+}
+

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

@@ -142,6 +142,12 @@
  * variables on the panel; the list scrolls at the ceiling as it always could. */
 .kol-dd-list {
   padding: var(--kol-spacing-1);
+  /* THE ROWS SIT ON THE TRIGGER'S TEXT EDGE (2026-10-02). The trigger always carries a 1px border
+   * (transparent on a filled tone); the panel carries one only on outline. So a filled panel's
+   * rows stood 1px left of the trigger's text. The list makes up the difference: 4px, plus the
+   * trigger's 1, less whatever border the panel has. (`0px`, not `0`, in the tone bundles — a
+   * unitless zero cannot be subtracted from a length.) */
+  padding-inline: calc(var(--kol-spacing-1) + 1px - var(--kol-tone-panel-border-w, 0px));
   overflow-y: auto;
   min-height: 0;
   max-height: calc(var(--kol-dd-max-rows, 10) * var(--kol-dd-row-h, 2rem) + var(--kol-spacing-1) * 2);
@@ -944,7 +950,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 +1634,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 +1647,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
@@ -1983,7 +1992,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-surface-secondary);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 /* `secondary` PAINTS THE PAGE SURFACE (tone-secondary-is-inverse, kol-client-olina
@@ -2008,7 +2017,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-surface-primary);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 /* `inverted` — the text color as fill: Button's / IconFrame's `secondary`
@@ -2032,7 +2041,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-surface-on-primary);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 .kol-tone-outline,
@@ -2070,7 +2079,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 .kol-tone-grey,
@@ -2089,7 +2098,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-oq-12);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 .kol-tone-sunken,
@@ -2108,7 +2117,7 @@
   --kol-tone-pressed-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
   --kol-tone-pressed-fg: var(--kol-fg-96);
   --kol-tone-panel-bg: var(--kol-surface-sunken);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 :where(.kol-btn-nav) {
@@ -2126,7 +2135,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 :where(.kol-icon-frame-nav) {
@@ -2144,7 +2153,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 :where(.kol-control--plain) {
@@ -2162,7 +2171,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 :where(.kol-btn-danger, .kol-icon-frame-danger) {
@@ -2180,7 +2189,7 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--ui-error);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 :where(.kol-btn-accent, .kol-icon-frame-accent) {
@@ -2198,14 +2207,14 @@
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-surface-primary);
   --kol-tone-panel-bg: var(--kol-accent-primary);
-  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
 
 /* ─── 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.164.0",
   "description": "Tokens and base CSS",
   "license": "MIT",
   "type": "module",