@kolkrabbi/kol-theme 0.46.0 → 0.46.1

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/package.json

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