@kolkrabbi/kol-theme 0.44.0 → 0.46.0

package/kol-components-molecules.css

@@ -859,10 +859,22 @@
   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);
 }
@@ -936,3 +948,72 @@
   transition: background-color 300ms var(--kol-ease-house),
               border-color     300ms var(--kol-ease-house);
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * The house expand — molecules/SearchInput.jsx · organisms/ContentFilters.jsx
+ *
+ * A collapsed control that opens to its field: the search glyph widening
+ * into an input. Two components hand-wrote the same three declarations
+ * inline (`width 600ms`, `background 400ms`, `opacity 300ms`, all on the
+ * house curve), which is how the curve came to be hardcoded in seven
+ * places to begin with.
+ *
+ * Durations are STAGGERED on purpose and that is the whole character of
+ * the move: the box travels longest (600), its fill settles sooner (400),
+ * and the content inside arrives last and quickest (300) so it does not
+ * smear across the widening box.
+ *
+ * The width VALUE stays inline — it is per-instance data (a consumer's
+ * expanded width), not chrome. Only the motion lives here.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-expand {
+  transition: width      600ms var(--kol-ease-house),
+              background 400ms var(--kol-ease-house),
+              border-color 400ms var(--kol-ease-house);
+}
+
+/* the content that rides inside an expanding box */
+.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.44.0",
+  "version": "0.46.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",