@kolkrabbi/kol-theme 0.154.0 → 0.156.0

package/kol-base-tokens.css

@@ -196,3 +196,31 @@
   --kol-surface-absolute-split: var(--kol-surface-ab-split);
   --kol-surface-absolute-split-inverse: var(--kol-surface-ab-split-inverse);
 }
+
+/* ═══════════════════════════════════════════════════════════════
+ * THE CONTROL LADDER, AS TOKENS — and its TOUCH RUNG (ruling D5, apps review 2026-09-29)
+ *
+ * 22 · 26 · 32 · 40 (01-foundations/09-sizes.md). Every PINNED control height — an icon-only
+ * square, a dropdown trigger, a segmented strip, an IconFrame, a menu trigger — reads these, so the
+ * pinned boxes and the derived ones (padding + line-height + ring) move together.
+ *
+ * On a coarse pointer every text field must type at 16px or iOS zooms the page into it
+ * (OverlaySearchFieldZoomsIOS, 2026-09-01) — which put 16px text in a 26px `sm` box beside 12px
+ * buttons (the user: "bigger text than its relative height"). So on touch the WHOLE ladder takes
+ * 16 / 22 type and every box grows with it: xs 32 · sm 32 · md 36 · lg 40. One row, one height,
+ * on a phone as at a desk. The type rule lives with the controls (kol-components-atoms.css).
+ * ═══════════════════════════════════════════════════════════════ */
+:root {
+  --kol-ctl-xs: 22px;
+  --kol-ctl-sm: 26px;
+  --kol-ctl-md: 32px;
+  --kol-ctl-lg: 40px;
+}
+@media (pointer: coarse) {
+  :root {
+    --kol-ctl-xs: 32px;
+    --kol-ctl-sm: 32px;
+    --kol-ctl-md: 36px;
+    --kol-ctl-lg: 40px;
+  }
+}

package/kol-components-atoms.css

@@ -296,10 +296,10 @@
  * shorter, at `xs` 2px shorter. Three families (control shell, text button,
  * segmented) already agreed on 22/26/32/40, so the squares conform to them, not
  * the other way round. Glyphs are untouched — SOLO still resolves 16/20/24. */
-.kol-btn-icon.kol-btn-xs { width: 22px; height: 22px; padding: 0; }
-.kol-btn-icon.kol-btn-sm { width: 26px; height: 26px; padding: 0; }
-.kol-btn-icon.kol-btn-md { width: 32px; height: 32px; padding: 0; }
-.kol-btn-icon.kol-btn-lg { width: 40px; height: 40px; padding: 0; }
+.kol-btn-icon.kol-btn-xs { width: var(--kol-ctl-xs); height: var(--kol-ctl-xs); padding: 0; }
+.kol-btn-icon.kol-btn-sm { width: var(--kol-ctl-sm); height: var(--kol-ctl-sm); padding: 0; }
+.kol-btn-icon.kol-btn-md { width: var(--kol-ctl-md); height: var(--kol-ctl-md); padding: 0; }
+.kol-btn-icon.kol-btn-lg { width: var(--kol-ctl-lg); height: var(--kol-ctl-lg); padding: 0; }
 
 /* ─── Variants — the ground ones are TONES now (2026-09-03) ───
  * `.kol-btn-primary` · `-secondary` · `-outline` · `-ghost` · `-grey` are
@@ -1170,10 +1170,10 @@ a.kol-icon-frame {
 /* pinned squares — the box never moves with glyph size (user law 2026-07-28),
  * on the size's HEIGHT so a frame lines up with the Button, Input and Dropdown
  * beside it (user ruling 2026-09-02 — see .kol-btn-icon above). 22/26/32/40. */
-.kol-icon-frame-xs { width: 22px; height: 22px; }
-.kol-icon-frame-sm { width: 26px; height: 26px; }
-.kol-icon-frame-md { width: 32px; height: 32px; }
-.kol-icon-frame-lg { width: 40px; height: 40px; }
+.kol-icon-frame-xs { width: var(--kol-ctl-xs); height: var(--kol-ctl-xs); }
+.kol-icon-frame-sm { width: var(--kol-ctl-sm); height: var(--kol-ctl-sm); }
+.kol-icon-frame-md { width: var(--kol-ctl-md); height: var(--kol-ctl-md); }
+.kol-icon-frame-lg { width: var(--kol-ctl-lg); height: var(--kol-ctl-lg); }
 
 /* `.kol-icon-frame-{primary,secondary,accent,outline,ghost,nav,grey,danger}` — tone aliases, see TONE */
 .kol-icon-frame-plate {
@@ -1310,6 +1310,15 @@ a.kol-icon-frame {
  * own; it exists so the floor below keys on every body plan the DS ships,
  * including the chrome-less one. */
 @media (pointer: coarse) {
+  /* 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,
+  .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 {
+    font-size: 16px;
+    line-height: 22px;
+  }
   .kol-control input,
   .kol-control--bare input,
   .kol-expand input {

package/kol-components-molecules.css

@@ -59,10 +59,10 @@
   gap: 0;
   position: relative;
 }
-.kol-dd-trigger.kol-btn-xs { height: 22px; padding-block: 0; }
-.kol-dd-trigger.kol-btn-sm { height: 26px; padding-block: 0; }
-.kol-dd-trigger.kol-btn-md { height: 32px; padding-block: 0; }
-.kol-dd-trigger.kol-btn-lg { height: 40px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-xs { height: var(--kol-ctl-xs); padding-block: 0; }
+.kol-dd-trigger.kol-btn-sm { height: var(--kol-ctl-sm); padding-block: 0; }
+.kol-dd-trigger.kol-btn-md { height: var(--kol-ctl-md); padding-block: 0; }
+.kol-dd-trigger.kol-btn-lg { height: var(--kol-ctl-lg); padding-block: 0; }
 /* REST AND OPEN ARE THE ONLY STATES (2026-07-15, re-called 2026-08-09 and
  * 2026-08-28). No :hover or :active rules for the trigger live here any more —
  * kol-components-atoms.css excludes `.kol-dd-trigger` from every variant's
@@ -581,14 +581,14 @@
    * forced the pin). Same principle as .kol-btn-icon's pinned square:
    * the box never moves. */
   box-sizing: border-box;
-  height: 32px; /* md — .kol-btn-md */
+  height: var(--kol-ctl-md); /* md — .kol-btn-md */
 }
 
 /* Sizes mirror .kol-btn-{sm,md,lg} exactly: pinned height above + cell
  * padding per size (below) + mono type (12/14/16) applied in JSX. */
-.kol-seg--xs { height: 22px; }
-.kol-seg--sm { height: 26px; }
-.kol-seg--lg { height: 40px; }
+.kol-seg--xs { height: var(--kol-ctl-xs); }
+.kol-seg--sm { height: var(--kol-ctl-sm); }
+.kol-seg--lg { height: var(--kol-ctl-lg); }
 .kol-seg--xs .kol-seg-cell { padding: 4px 8px; }
 .kol-seg--sm .kol-seg-cell { padding: 4px 12px; }
 .kol-seg--lg .kol-seg-cell { padding: 8px 20px; }
@@ -918,7 +918,13 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background-color: var(--kol-surface-primary);
+  /* THE PANEL LIFTS OFF THE PAGE (2026-09-28, user: the search overlay "is very
+   * faint, and the input text is also very faint"). It painted the page's own
+   * surface, so over a dark page and a scrim it read as a hole rather than a
+   * panel. `oq-04` is the lift the shortcuts sheet already wears (2026-09-03):
+   * opaque, one step off the ground, in both themes. */
+  background-color: var(--kol-oq-04);
+  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
@@ -932,6 +938,10 @@
    * and is deleted with it: it solved the wrong problem. */
 }
 
+/* the query field inside a panel reads at full ink; its placeholder at 48 */
+.kol-overlay-panel .kol-control--bare input { color: var(--kol-oq-96); }
+.kol-overlay-panel .kol-control--bare input::placeholder { color: var(--kol-oq-48); }
+
 /* ── Section — .kol-section-* ─────────────────────────────────────────────
  * Between-siblings rhythm for stacked inspector sections (InspectorSectionRhythm,
  * filed from kol-fxr 2026-08-15).

package/kol-components-shell.css

@@ -41,7 +41,9 @@
 .kol-shell-page {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  /* less the phone bar (`--kol-shell-bar-h`, set by AppShell `touch="bar"`): the content column
+   * already pads for it, so a full-height page ends above the bar, not under it (2026-09-29) */
+  min-height: calc(100vh - var(--kol-shell-bar-h, 0px));
   padding: var(--kol-shell-page-pad);
   /* PageShellScrollbarGutter (kol-monitor 2026-08-28): in `fixed` mode this
    * element IS the scroll container and reserves the gutter; in `scroll` mode
@@ -58,7 +60,7 @@
 }
 /* `mode="fixed"` — the element is the scroll container; pair with a
  * `flex:1 overflow:auto` body (the settings idiom) */
-.kol-shell-page--fixed { min-height: 0; height: 100vh; overflow: hidden; }
+.kol-shell-page--fixed { min-height: 0; height: calc(100vh - var(--kol-shell-bar-h, 0px)); overflow: hidden; }
 /* `width="capped"` — the SITE tier: the framework container ladder, centred.
  * `bleed` (the default, unclassed) fills the window — the app tier. The one
  * real difference between a shell page and a `.kol-page`, and it is a prop
@@ -202,6 +204,34 @@
   background: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
 }
 
+/* ── THE PHONE BAR (AppShell `touch="bar"`, apps review 2026-09-29) — the rail as kol-component's
+ * MobileTabBar below 768; past five destinations the fifth tab is More, and More is this sheet,
+ * floated just above the bar. The scrim sits under the bar, so More stays tappable to close. */
+.kol-phone-nav-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--kol-z-sticky) - 1);
+  border: 0;
+  padding: 0;
+  cursor: default;
+}
+.kol-phone-nav-more {
+  position: fixed;
+  left: 12px;
+  right: 12px;
+  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
+  z-index: var(--kol-z-sticky);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 60dvh;
+  overflow-y: auto;
+  padding: 8px;
+  border-radius: var(--kol-radius-sm);
+  background: var(--kol-surface-primary);
+  border: 1px solid var(--kol-oq-08);
+}
+
 /* ── THE TAP OPENER IS THE LINE (ShellRailCollapsedWithTapOpen, kol-mirror
  * 2026-09-01; corrected by RailGrabTapIsALine, kol-monitor 2026-09-02 — user:
  * "it was a thicker line" · "who decided it should be a chevron?"). `touch=

package/kol-components-workshop.css

@@ -82,11 +82,65 @@
   scrollbar-width: none;
 }
 
-/* Shell content grid — the rail/main/toc gutter. The gap lives HERE, not as a
- * utility on the element: a gap-8 in the JSX outranked this layer at every
- * width and made the 48px wide step (below, ≥1600px) dead code. */
+/* THE SHELL'S ONE SCROLL REGION (showcase refinement 2026-09-28). It used to
+ * be three: each rail and #main scrolled themselves inside a grid wrapped in
+ * the chrome inset, so main's scrollbar sat 24px in from the window edge and
+ * ended at main's right edge, beside the TOC rather than at the window's.
+ * Now the region below the header scrolls as one, edge to edge; the rails are
+ * sticky inside it and still scroll their own overflow. `container-type: size`
+ * lets a rail be exactly one region tall (100cqh) without measuring anything.
+ *
+ * ONE SPACE BETWEEN A RAIL AND THE PAGE, NOT TWO. The grid had a 32/48px gap
+ * AND pages padded themselves with --kol-pad-section-x, so rail text sat up to
+ * ~100px from the page's. The gap is gone: a rail ends in an opaque 08 seam
+ * (the seam law) with the chrome inset inside it, and main pads the page
+ * ladder from the seam. Pages do not pad themselves on x. */
+.shell-scroll {
+  container-type: size;
+  scrollbar-gutter: stable;
+  overscroll-behavior: none;
+}
+
 .shell-content-grid {
-  gap: 32px;
+  gap: 0;
+  min-height: 100%;
+}
+
+.shell-rail {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100cqh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.shell-rail--nav {
+  border-right: 1px solid var(--kol-oq-08);
+  padding-inline-end: var(--kol-pad-chrome-x);
+}
+
+.shell-rail--toc {
+  border-left: 1px solid var(--kol-oq-08);
+  padding-inline-start: var(--kol-pad-chrome-x);
+}
+
+.shell-main {
+  min-width: 0;
+}
+
+/* THE TYPED WORDMARK — the shell's second mark as live type in the Tight cut
+ * (2026-09-28), sized so its caps stand as tall as the drawn KOLKRABBI mark
+ * beside it (h-6). The display voice is uppercase by contract. */
+.shell-wordmark-label {
+  font-family: var(--kol-font-family-sans-tight);
+  font-size: 33px;
+  line-height: 24px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  white-space: nowrap;
 }
 
 .shell-sidebar-sticky::-webkit-scrollbar {
@@ -463,10 +517,6 @@
     font-size: 13px;
   }
 
-  /* Wide grid gap */
-  .shell-content-grid {
-    gap: 48px;
-  }
 }
 
 /* =============================================================================

package/package.json

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