@kolkrabbi/kol-theme 0.155.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; }

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/package.json

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