@kolkrabbi/kol-theme 0.199.0 → 0.200.0

package/kol-components-atoms.css

@@ -1459,6 +1459,10 @@ a.kol-icon-frame {
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
+  /* scrolling sideways clips vertically too — room for the text tabs' ascenders and the underline, given back by the
+   * margin so the row keeps its height (review 3, 2026-10-29: *"something is clipping"*) */
+  padding-block: 4px;
+  margin-block: -4px;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
   min-width: 0; /* a flex item shrinks to its column instead of growing to the row */

package/kol-components-molecules.css

@@ -2193,6 +2193,28 @@ img.kol-quicklook-media--fill { width: var(--kol-ql-max-w); height: auto; max-he
   --kol-tone-pressed-image: none;
   --kol-tone-pressed-fg: var(--kol-fg-emphasis);
 }
+/* THE FILLED TAB (user 2026-10-29, on the lab rail's text tabs: *"its not so clear that these are selectable tabs"*):
+ * the tab bundle with its chip showing at rest — oq-04 in meta ink, oq-08 in full ink under the pointer, oq-16 when
+ * selected — so a row of them reads as choices before one is hovered. `TabsRow look="chip" filled`. */
+:where(.kol-btn-tab-filled) {
+  --kol-tone-bg: var(--kol-oq-04);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-fg-meta);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-08);
+  --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-12);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-oq-16);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-fg-emphasis);
+}
+.kol-btn.kol-btn-tab-filled.kol-btn-pressed:not(.kol-dd-trigger):hover {
+  background-color: var(--kol-tone-pressed-bg);
+  color: var(--kol-tone-pressed-fg);
+}
 /* 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 {

package/kol-components-styleguide.css

@@ -431,3 +431,45 @@
   }
   .kol-a4-sheet:not(:last-child) { break-after: page; }
 }
+
+/* ── LabWindow — .kol-lab-window (BrandLabToolWindow, 2026-10-29) ───────────────────────────────────────
+ * The lab's window is kol-component's QuickLookFrame (the established window): it fills its column instead of
+ * hugging media, is never taller than the viewport, and keeps the frame's corner grip. One padding for the
+ * header, the rail and the stage. */
+.kol-lab-window {
+  --kol-lab-pad: 16px;
+  width: 100%;
+  max-width: none;
+  height: min(720px, calc(100dvh - 4rem));
+}
+/* THE IMAGE DROP ZONE (review 6, Adobe's refs 56 · 57): a faint ground at rest; under the pointer, or while a file is
+ * dragged over it, the transparency checker — in the opaque ramp so it reads on either theme */
+.kol-lab-drop { background: var(--kol-oq-02); }
+.kol-lab-drop:hover,
+.kol-lab-drop.is-dropping { background: repeating-conic-gradient(var(--kol-oq-08) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px; }
+/* maximized (review 5): the window over the page, 16px off every edge, above the scrim */
+.kol-lab-window.kol-lab-window--max { position: fixed; inset: 16px; z-index: 200; width: auto; height: auto; max-height: none; }
+.kol-lab-window.kol-quicklook--sized { max-height: calc(100dvh - 2rem); }
+.kol-lab-window .kol-quicklook-header { padding-inline: var(--kol-lab-pad); border-bottom: 1px solid var(--kol-oq-08); }
+.kol-lab-window .kol-quicklook-body { flex: 1 1 auto; min-height: 0; align-items: stretch; justify-content: stretch; }
+.kol-lab-stage { padding: var(--kol-lab-pad); }
+/* the rail pads as kol-component's Rail does (review 4) */
+.kol-lab-rail { padding: var(--kol-pad-rail, 16px); }
+/* the rail's width is the DS grab's (`useDragResize`, token kol-lab-rail): 380 by default (the rail law), 320 → 560 by drag */
+:root {
+  /* the rail law's 380 (the settings rail's width, review 4) */
+  --kol-lab-rail-w: 380px;
+  --kol-lab-rail-w-collapsed: 320px;
+  /* the hook's own tokens (useDragResize buildNames): without them the grab is inert */
+  --kol-lab-rail-snap: 280px;
+  --kol-lab-rail-step: 16px;
+  --kol-lab-rail-snap-default: 16px;
+}
+.kol-lab-grid { grid-template-rows: auto minmax(0, 1fr); }
+@media (min-width: 768px) {
+  .kol-lab-grid { grid-template-rows: 1fr; grid-template-columns: clamp(320px, var(--kol-lab-rail-w), 560px) minmax(0, 1fr); }
+}
+/* the colour column's hex IS the "Edit color" button (review 1, Adobe's ref 2): bare, a wash of the column's own ink on hover */
+.kol-lab-hex { border-radius: var(--kol-radius-sm, 4px); color: inherit; }
+.kol-lab-hex:hover,
+.kol-lab-hex[aria-expanded="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }

package/package.json

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