@kolkrabbi/kol-theme 0.46.0 → 0.47.0

package/kol-components-molecules.css

@@ -879,10 +879,17 @@
   width: var(--kol-row-thumb);
 }
 
-/* 768 = the ruled `md` rung (08-breakpoints/01-values.md). A media query
- * cannot read a custom property, so the number is a literal by necessity —
- * naming the rung is the only thing that stops it reading as arbitrary. */
-@media (min-width: 768px) {
+/* CONTAINER query, not a viewport one (2026-08-15). The row steps on the width
+ * of the WALL it sits in, for exactly the reason the card-wall law gives: the
+ * shell rails eat width that viewport breakpoints cannot see, so a row inside a
+ * 700px panel on a 1600px screen was taking the desktop step and overflowing.
+ * It also means the step is VISIBLE in a resizable panel instead of only when
+ * the whole browser is dragged.
+ *
+ * 768 is still the ruled `md` rung (08-breakpoints/01-values.md) — the number
+ * did not change, only what it measures. A row with no container ancestor falls
+ * back to its base values, which is the correct nothing-happens. */
+@container (min-width: 768px) {
   .kol-row {
     gap: var(--kol-row-gap-md, var(--kol-row-gap));
     padding: var(--kol-row-pad-md, var(--kol-row-pad));
@@ -932,8 +939,10 @@
  * one (work: 16 → 24, matching the shipped drawer's `p-4 md:p-6`). Same
  * custom-property mechanism as .kol-row — Tailwind cannot generate an
  * md: variant from package source, and these are per-variant data. */
-/* the ruled `md` rung, same as .kol-row above */
-@media (min-width: 768px) {
+/* the ruled `md` rung, same as .kol-row above — and a container query for the
+ * same reason: a card in a narrow wall must not take the wide plate padding
+ * because the BROWSER happens to be wide. */
+@container (min-width: 768px) {
   .kol-card-plate {
     padding: var(--kol-plate-pad-md, var(--kol-plate-pad));
   }

package/kol-theme.css

@@ -93,6 +93,22 @@
   --kol-pad-card-md: 1rem;
   --kol-pad-card-lg: 1.5rem;
 
+  /* WALL gaps (2026-08-15) — the same treatment `--kol-pad-card-*` got, for
+   * the same reason: these two numbers were re-typed as a ternary at every
+   * call site (kol-monitor HomePage ×2, LibraryPage ×2, MediaLibrary,
+   * kol-website Work, both foundry grids, StackLatest) and a value repeated
+   * nine times is a value that has already drifted somewhere.
+   *
+   * PX, not rem — a gap is a layout measure, not type (user ruling
+   * 2026-08-15), so a reader bumping their browser text size must not re-space
+   * every wall in the estate.
+   *
+   * Two rungs because a wall of CARDS and a stack of ROWS want different air:
+   * cards are objects with their own edges and need separating; rows are lines
+   * in a table and 24px between them reads as a broken list. */
+  --kol-gap-wall-grid: 24px;
+  --kol-gap-wall-list: 8px;
+
   /* The house curve (2026-08-15) — the easing the cards actually use; was
    * hardcoded in 5 files before this token existed. Curve only, no duration:
    * it pairs with whatever duration the motion needs.

package/package.json

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