@kolkrabbi/kol-theme 0.71.0 → 0.73.0

package/kol-components-atoms.css

@@ -1145,6 +1145,26 @@ a.kol-icon-frame {
   border: 1px solid transparent;
 }
 
+/* PlayDisc — the Finder play/pause disc on a media tile (PlayDiscAndVideoBar,
+ * kol-r2b2 2026-08-27): a round `IconFrame secondary lg radius="full"`, hidden
+ * at rest, shown on hover of the tile (`.kol-media-tile`) or on focus, over
+ * full-bleed artwork. Declared AFTER the variants so it wins in-layer — the
+ * consumer no longer restates bg-fg-inverse-64 / border-fg-96 beside the
+ * variant. Absolute colours: it sits on artwork, not on the theme. NO
+ * backdrop-filter — it flips the tile onto a composited layer on hover and the
+ * artwork's saturation jumps (Chrome). */
+.kol-play-disc {
+  background-color: color-mix(in srgb, var(--kol-surface-on-inverse) 64%, transparent);
+  color: var(--kol-color-absolute-white);
+  border: 2px solid color-mix(in srgb, var(--kol-surface-on-primary) 96%, transparent);
+  box-shadow: 0 0 4px 3.5px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: opacity var(--kol-transition-base);
+}
+.kol-play-disc svg { color: inherit; }
+.kol-media-tile:hover .kol-play-disc,
+.kol-play-disc:focus-visible { opacity: 1; }
+
 /* ═══════════════════════════════════════════════════════════════
  * ThemeToggle — .kol-theme-toggle
  *

package/kol-components-molecules.css

@@ -1112,7 +1112,12 @@
 .kol-media-zoom > img,
 .kol-media-zoom > video {
   transition: transform 600ms var(--kol-ease-house);
-  transform-origin: center;
+  /* THE ANCHOR IS THE CONSUMER'S (ContentMediaFocusBinding, kol-monitor
+   * 2026-08-27): `--kol-media-focus`, bound once on a repo's :root, is where
+   * the image pins for the fit (ContentMedia natural / compact read the same
+   * token, default top left) and from where the zoom grows. Unset = center,
+   * today's value. Monitor binds `top left`. */
+  transform-origin: var(--kol-media-focus, center);
 }
 
 @media (hover: hover) {

package/kol-components-organisms.css

@@ -678,6 +678,27 @@
 .kol-table-sort:hover svg { opacity: 0.6; }
 [aria-sort] .kol-table-sort svg { opacity: 1; }
 
+/* ─────────────────────────────────────────────────────────────────────
+ * ContentFilters — the FIRST group's column (ContentFiltersFirstGroupFixedWidth,
+ * kol-monitor 2026-08-27 — user ruling: "nope not hug, fix a size … if columns,
+ * maybe just use one?"). ONE CATALOG COLUMN: the `1fr` of `repeat(6, 1fr)` gap
+ * 24 — `(width − 5 × 24px) / 6`, a fraction, never a px — so the first group
+ * sits over the first card and the flowing groups start over the second. The
+ * header row is the CONTAINER (`100cqw`): the count + LIST/GRID strip beside
+ * the groups narrows the groups' box, and a `%` measured inside it came out
+ * short by the strip + gap. A page without a 6-column catalog (/work, a list)
+ * gets the same fraction of its own row, so the number is one everywhere.
+ * Components layer — a consumer's `group.className` width utility still wins
+ * on the odd page. Overrules the WIDTH of the 0.104.3 hug; by-position stands.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-filters-row {
+  container-type: inline-size;
+}
+.kol-filters-first {
+  flex: none;
+  width: calc((100cqw - 120px) / 6);
+}
+
 /* ─────────────────────────────────────────────────────────────────────
  * ContentCollection — src/organisms/ContentCollection.jsx (2026-08-15)
  * The enter stagger the collection owns; cards never animate themselves.

package/package.json

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