@kolkrabbi/kol-theme 0.72.0 → 0.74.0

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) {
@@ -1178,6 +1183,42 @@
  * 2026-08-27): in the 320px column preview a document scaled to the frame; in
  * the overlay a readable sheet, not full-bleed over the page. */
 .kol-column-browser-preview .kol-prose { zoom: 0.5; }
+
+/* ColumnBrowser resize handles (ColumnBrowserResize, kol-r2b2 2026-08-27 —
+ * Finder's edge handles, user ruling "that should be a set in ds"; native CSS
+ * `resize:` rejected). The column border already there is the visual; the
+ * strip is the HIT AREA — 8px, invisible at rest, fg-08 on hover and while the
+ * pointer is captured. The x handle is a flex sibling pulled back over the
+ * column's right edge (net zero width); the y handle rides the root's bottom
+ * edge, above the horizontal scroll box so it spans the visible width. */
+.kol-column-browser-resize-x {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  align-self: stretch;
+  width: 8px;
+  margin-left: -8px;
+  cursor: col-resize;
+  touch-action: none;
+  transition: background-color var(--kol-transition-fast);
+}
+.kol-column-browser-resize-y {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  height: 8px;
+  cursor: row-resize;
+  touch-action: none;
+  transition: background-color var(--kol-transition-fast);
+}
+.kol-column-browser-resize-x:hover,
+.kol-column-browser-resize-x.is-dragging,
+.kol-column-browser-resize-y:hover,
+.kol-column-browser-resize-y.is-dragging {
+  background-color: var(--kol-fg-08);
+}
 .kol-overlay .kol-prose {
   max-width: var(--kol-content-measure);
   margin-inline: auto;

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.72.0",
+  "version": "0.74.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",