@kolkrabbi/kol-theme 0.183.0 → 0.184.0

package/kol-components-atoms.css

@@ -1024,6 +1024,15 @@ a:hover .icon-hover,
  * is the accent's alone, on hover and on its on-state; spending it on every
  * hover left the on-state with nothing of its own to say. */
 .kol-inline-control:hover { color: var(--kol-oq-96); }
+/* THE TAP TARGET ON TOUCH (HubHomeContract's mobile pass, apps/hub at 390 — 2026-10-23): the `app` card's
+ * cog and trash measured 16 × 16 on a coarse pointer, under the ladder's touch rung (32, kol-base-tokens).
+ * The glyph stays 16 — the card reserves the actions column from the control's box, so growing the box
+ * narrows every plate — and the finger gets 32: a pseudo-element 8px past each edge, drawn by nothing,
+ * hit by the browser. A pinned control grows its box on touch; a bare glyph grows its reach. */
+@media (pointer: coarse) {
+  .kol-inline-control { position: relative; }
+  .kol-inline-control::after { content: ''; position: absolute; inset: -8px; }
+}
 
 .kol-inline-control--accent:hover,
 .kol-inline-control--on,
@@ -1283,6 +1292,20 @@ a.kol-icon-frame {
  * Same cure as IconFrame above: own your classes, inherit no states.
  * ═══════════════════════════════════════════════════════════════ */
 
+/* THE INK STEP (user 2026-10-23, on the settings rail's footer and close: *"give them both oq-80, then full on
+ * hover, just to give it slight elevated state"*). A bare control with no wash steps its INK instead: oq-80 at rest,
+ * oq-96 on hover. `.kol-ink-step` on the control itself (CloseButton `hover={false}`), or on a row of them
+ * (SettingsFooter) — it reaches the frame, the theme toggle and an icon-only button inside. */
+:is(.kol-ink-step, .kol-ink-step > *) :is(.kol-icon-frame, .kol-theme-toggle, .kol-btn:not(.kol-dd-trigger)),
+:is(.kol-icon-frame, .kol-theme-toggle, .kol-btn:not(.kol-dd-trigger)).kol-ink-step {
+  --kol-tone-fg: var(--kol-oq-80);
+  transition: color var(--kol-transition-fast, 150ms) ease;
+}
+:is(.kol-ink-step, .kol-ink-step > *) :is(.kol-icon-frame, .kol-theme-toggle, .kol-btn:not(.kol-dd-trigger)):hover,
+:is(.kol-icon-frame, .kol-theme-toggle, .kol-btn:not(.kol-dd-trigger)).kol-ink-step:hover {
+  --kol-tone-fg: var(--kol-oq-96);
+}
+
 .kol-theme-toggle {
   display: inline-flex;
   align-items: center;

package/kol-components-organisms.css

@@ -554,7 +554,8 @@
     width: 100%;
     border: 0;
     border-radius: 0;
-    padding: var(--kol-spacing-12) var(--kol-spacing-4) var(--kol-spacing-4);
+    /* no bottom pad on the phone (user 2026-10-23): the body scrolls to the edge, a pad read as a clipped last row */
+    padding: var(--kol-spacing-12) var(--kol-spacing-4) 0;
   }
 }
 

package/kol-components-shell.css

@@ -50,6 +50,9 @@
   /* 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));
+  /* the VISIBLE viewport (studio-hub review 2, § 7.4): on iOS Safari 100vh is taller than what shows under the
+   * browser chrome, so a fixed page's foot sat under it and the page scrolled. dvh where supported, vh above it */
+  min-height: calc(100dvh - 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
@@ -66,7 +69,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: calc(100vh - var(--kol-shell-bar-h, 0px)); overflow: hidden; }
+.kol-shell-page--fixed { min-height: 0; height: calc(100vh - var(--kol-shell-bar-h, 0px)); height: calc(100dvh - 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
@@ -238,21 +241,25 @@
   padding: 0;
   cursor: default;
 }
+/* THE SHEET'S CHROME (user 2026-10-23: "match rounding better"): the pill's ground and hairline, a rounding near the
+ * folded circle's. One class on whatever holds `MoreRows` — the phone bar's sheet, Home's masthead popover. */
+.kol-more-sheet {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-radius: 24px;
+  background: var(--kol-surface-secondary);
+  border: 1px solid var(--kol-oq-08);
+}
 .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

package/package.json

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