@kolkrabbi/kol-theme 0.164.1 → 0.166.0

package/kol-components-molecules.css

@@ -22,6 +22,11 @@
   /* above the ShellDrawer sheet (z 200) — a Dropdown in the settings drawer
    * opened BEHIND it (SettingsPanelApproved, 2026-08-27) */
   z-index: 210;
+  /* NEVER WIDER THAN THE WINDOW (the phone pass, 2026-10-02). A panel sizes to its content
+   * (`w-max`) and `shift` can only slide it, so one wider than a phone hung off the right edge
+   * and — parked off-screen with its reference — still stretched the page 200px sideways. The 8px
+   * each side is `shift`'s own padding. */
+  max-width: calc(100vw - 16px);
 }
 
 /* ── Dropdown — .kol-dd-* ─────────────────────────────────────────────────
@@ -2138,6 +2143,32 @@
   --kol-tone-panel-border-w: 0px;
   --kol-tone-panel-border: transparent;
 }
+/* THE TAB BUNDLE (user 2026-10-02: *"can we add a tone and states to button that reflect the new
+ * tabtoggle?"*). A VARIANT like `nav`, not an eighth tone — a tone is a ground, ordered by depth,
+ * and this is a state idiom: quiet text at rest, ink on hover with no wash, and the selected tab a
+ * soft `08` chip in full ink (where every ground's pressed is the inverted fill). `TabChips` is
+ * this variant on the control size ramp. */
+:where(.kol-btn-tab) {
+  --kol-tone-bg: transparent;
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-fg-meta);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: transparent;
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-fg-emphasis);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-04);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-oq-08);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-fg-emphasis);
+}
+/* the selected tab keeps its chip under the pointer — hover is for the tabs you are not on (the
+ * shared hover rule would repaint it with the bundle's transparent hover ground) */
+.kol-btn.kol-btn-tab.kol-btn-pressed:not(.kol-dd-trigger):hover {
+  background-color: var(--kol-tone-pressed-bg);
+  color: var(--kol-tone-pressed-fg);
+}
 :where(.kol-icon-frame-nav) {
   --kol-tone-bg: transparent;
   --kol-tone-image: none;

package/kol-components-shell.css

@@ -108,6 +108,23 @@
   z-index: var(--kol-z-sticky);
 }
 
+/* THE RAIL'S LIST FADES OUT AT ITS FOOT (user 2026-10-02: *"add the gradient fade you put on
+ * workshop rails on the other rail in shell, and make it a prop so can opt out"*). The same mask
+ * `.shell-rail` wears (kol-components-workshop.css, 2026-10-01): the last 3rem run to nothing, and
+ * the list pads by as much so its last row scrolls clear of it. On the LIST, not the rail — the
+ * mark above and the pinned rows below stay whole. `NavRail fade={false}` drops the class. */
+.kol-shell-rail-list {
+  scrollbar-width: none;
+}
+.kol-shell-rail-list::-webkit-scrollbar {
+  display: none;
+}
+.kol-shell-rail-list--fade {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+  padding-bottom: 3rem;
+}
+
 /* The 2026-08-12 active-state ruling, carried natively so consumers delete
  * their overrides: ink full-strength in EVERY state (the nav variant's oq-64
  * rest is site-nav quiet, wrong on an icon rail — the rail also sets oq-96

package/kol-components-workshop.css

@@ -168,6 +168,38 @@
   min-width: 0;
 }
 
+/* THE WHOLE-TREE SHEET (`T`, 2026-10-02) — every space's rail side by side, every fold open. One
+ * column per space, each scrolling its own overflow; on a phone the columns stack and the sheet
+ * scrolls as one. Sized to the window less the overlay's own margin. */
+.shell-tree {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(14rem, 18rem);
+  gap: var(--kol-spacing-6);
+  max-width: calc(100vw - 2 * var(--kol-pad-section-x));
+  max-height: calc(100dvh - 2 * var(--kol-spacing-12));
+  padding: var(--kol-spacing-6);
+  border: 1px solid var(--kol-oq-08);
+  border-radius: var(--kol-radius-sm);
+  overflow-x: auto;
+}
+.shell-tree-space {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kol-spacing-4);
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+@media (max-width: 767px) {
+  .shell-tree {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    overflow-y: auto;
+  }
+  .shell-tree-space { overflow-y: visible; }
+}
+
 /* 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

package/kol-opaque.css

@@ -182,6 +182,42 @@
 .text-oq-inverse-88 { color: var(--kol-oq-inverse-88); }
 .text-oq-inverse-96 { color: var(--kol-oq-inverse-96); }
 
+/* ==============================================================================
+ * CLASSES — Text hover (standard + inverse)
+ * ============================================================================== */
+
+.hover\:text-oq-01:hover { color: var(--kol-oq-01); }
+.hover\:text-oq-02:hover { color: var(--kol-oq-02); }
+.hover\:text-oq-04:hover { color: var(--kol-oq-04); }
+.hover\:text-oq-08:hover { color: var(--kol-oq-08); }
+.hover\:text-oq-12:hover { color: var(--kol-oq-12); }
+.hover\:text-oq-16:hover { color: var(--kol-oq-16); }
+.hover\:text-oq-24:hover { color: var(--kol-oq-24); }
+.hover\:text-oq-32:hover { color: var(--kol-oq-32); }
+.hover\:text-oq-40:hover { color: var(--kol-oq-40); }
+.hover\:text-oq-48:hover { color: var(--kol-oq-48); }
+.hover\:text-oq-64:hover { color: var(--kol-oq-64); }
+.hover\:text-oq-72:hover { color: var(--kol-oq-72); }
+.hover\:text-oq-80:hover { color: var(--kol-oq-80); }
+.hover\:text-oq-88:hover { color: var(--kol-oq-88); }
+.hover\:text-oq-96:hover { color: var(--kol-oq-96); }
+
+.hover\:text-oq-inverse-01:hover { color: var(--kol-oq-inverse-01); }
+.hover\:text-oq-inverse-02:hover { color: var(--kol-oq-inverse-02); }
+.hover\:text-oq-inverse-04:hover { color: var(--kol-oq-inverse-04); }
+.hover\:text-oq-inverse-08:hover { color: var(--kol-oq-inverse-08); }
+.hover\:text-oq-inverse-12:hover { color: var(--kol-oq-inverse-12); }
+.hover\:text-oq-inverse-16:hover { color: var(--kol-oq-inverse-16); }
+.hover\:text-oq-inverse-24:hover { color: var(--kol-oq-inverse-24); }
+.hover\:text-oq-inverse-32:hover { color: var(--kol-oq-inverse-32); }
+.hover\:text-oq-inverse-40:hover { color: var(--kol-oq-inverse-40); }
+.hover\:text-oq-inverse-48:hover { color: var(--kol-oq-inverse-48); }
+.hover\:text-oq-inverse-64:hover { color: var(--kol-oq-inverse-64); }
+.hover\:text-oq-inverse-72:hover { color: var(--kol-oq-inverse-72); }
+.hover\:text-oq-inverse-80:hover { color: var(--kol-oq-inverse-80); }
+.hover\:text-oq-inverse-88:hover { color: var(--kol-oq-inverse-88); }
+.hover\:text-oq-inverse-96:hover { color: var(--kol-oq-inverse-96); }
+
 /* ==============================================================================
  * CLASSES — Border opacity (standard + inverse)
  * ============================================================================== */

package/kol-type-roles.css

@@ -82,6 +82,10 @@
   letter-spacing: 0.04em;
   color: var(--kol-fg-default);
   max-width: var(--kol-content-measure);
+  /* a run with no space in it — `A`/`B`/`C` code chips, a long path — breaks instead of pushing
+   * the page sideways (the phone pass, 2026-10-02: 83 pages scrolled on x). A last resort only:
+   * a line that fits is left alone. */
+  overflow-wrap: anywhere;
 }
 
 /* ── Content furniture — twinned with prose (one rule, two entry points) ── */

package/package.json

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