@kolkrabbi/kol-theme 0.45.0 → 0.46.1

package/kol-components-molecules.css

@@ -859,18 +859,37 @@
   padding: var(--kol-row-pad);
   min-height: var(--kol-row-min-h);
   background: var(--kol-row-bg);
-  border-color: var(--kol-row-border);
+  /* the FALLBACK is not optional. A variant with no frame publishes no
+   * `--kol-row-border`, and `border-color: var(--undefined)` is invalid at
+   * computed-value time — it resolves to `unset`, which INHERITS, which is
+   * currentColor, which is the text colour. That is how `default`'s hairline
+   * divider rendered as a solid white rule. */
+  border-color: var(--kol-row-border, transparent);
   transition: background-color 300ms var(--kol-ease-house),
               border-color     300ms var(--kol-ease-house);
 }
+
+/* the divider is its OWN longhand, declared after the shorthand above so it
+ * wins on order — `default`'s bottom rule is not the same thing as a framed
+ * variant's border, and one property cannot carry both. */
+.kol-row--divided {
+  border-bottom: 1px solid var(--kol-fg-08);
+}
 .kol-row > .kol-row-thumb {
   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));
@@ -920,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));
   }
@@ -964,3 +985,44 @@
 .kol-expand-content {
   transition: opacity 300ms var(--kol-ease-house);
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * ContentMedia — the hover zoom
+ *
+ * A state the house serves on image-led cards: the artwork creeps up
+ * inside its own frame while the frame holds still. ContentMedia already
+ * clips, so the scale has something to push against — without that
+ * overflow the image just grows out of the card.
+ *
+ * Keyed off the CARD's hover, not the media's, because the whole tile is
+ * the affordance; hovering the caption must zoom too. Transform only —
+ * it is the one property that scales without relayout, and a wall of
+ * these must not thrash the grid.
+ *
+ * 1.06 and 600ms, deliberately slow and small: a zoom you can SEE
+ * happening reads as a photograph breathing; a fast one reads as a
+ * glitch.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-media-zoom > img,
+.kol-media-zoom > video {
+  transition: transform 600ms var(--kol-ease-house);
+  transform-origin: center;
+}
+
+@media (hover: hover) {
+  .group:hover .kol-media-zoom > img,
+  .group:hover .kol-media-zoom > video {
+    transform: scale(1.06);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kol-media-zoom > img,
+  .kol-media-zoom > video {
+    transition: none;
+  }
+  .group:hover .kol-media-zoom > img,
+  .group:hover .kol-media-zoom > video {
+    transform: none;
+  }
+}

package/package.json

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