@kolkrabbi/kol-theme 0.163.0 → 0.164.1

package/kol-components-atoms.css

@@ -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-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);
@@ -1986,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
@@ -2011,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`
@@ -2035,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,
@@ -2073,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,
@@ -2092,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,
@@ -2111,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) {
@@ -2129,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) {
@@ -2147,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) {
@@ -2165,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) {
@@ -2183,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) {
@@ -2201,7 +2207,7 @@
   --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;
 }
 

package/kol-components-workshop.css

@@ -168,6 +168,19 @@
   min-width: 0;
 }
 
+/* A `.kol-page` INSIDE THE SHELL YIELDS ITS X (kol-website, 2026-10-02). "Pages do not pad
+ * themselves on x" was written above on 2026-09-28 and kol-framework's `PageSection` never heard
+ * it: `.kol-page` pads `--kol-pad-section-x` again, so a section sat 48 + 48 = 96px off the rail
+ * at 1440 — and kol-workshop's own `ExhibitPage` / `ExhibitOverview` are built from it. The cap
+ * goes with the pad: inside the shell the width is the page's call, made once in `MainColumn`
+ * (canvas · shell · none), and `.kol-page`'s own `--kol-container-max` + auto margin was a
+ * second answer that re-capped and re-centred a `none` page. The block padding stays. */
+.shell-main .kol-page {
+  padding-inline: 0;
+  max-width: none;
+  margin-inline: 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. */

package/package.json

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