@kolkrabbi/kol-component 0.120.0 → 0.121.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.120.0",
+  "version": "0.121.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/ContentCard.jsx

@@ -44,8 +44,11 @@ const BOX = {
    * like I've said that before" — the ListingCardThumbBorder ruling): the selected
    * state reads from the checked ToggleCheckbox, not a fg-64 border */
   default:  { layout: 'stack', border: null, bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
-  /* frameHover: the frame steps fg-04 → fg-16 on hover (ShellHomeSystem, 2026-08-27 — the tertiary fill alone drowned the fg-04 border) */
-  catalog:  { layout: 'fill-card', border: 'var(--kol-fg-04)', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)', frameHover: 'var(--kol-fg-16)' },
+  /* THE FRAME READS BACKWARDS (CatalogCardFrameAndZoom, kol-website 2026-08-28 — user, on a 212-tile
+   * grid: no frame at rest; the old rest value is the hover): a wall of fg-04 frames is a grid of boxes,
+   * louder than what they hold. Rest `transparent` (the 1px stays, so the hover step never relayouts),
+   * hover fg-04. Was fg-04 → fg-16 (ShellHomeSystem, 2026-08-27). */
+  catalog:  { layout: 'fill-card', border: 'transparent', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)', frameHover: 'var(--kol-fg-04)' },
   /* flip: PrintGridCard's 3D turn on `isFlipped` → `selected` (ContentRowsAndPrintCard, 2026-08-27) */
   print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, flip: true },
   article:  { layout: 'stack', border: null, bg: null, pad: '0', mediaGap: 'var(--kol-spacing-4)' },
@@ -106,6 +109,9 @@ export default function ContentCard({
   frame,
   ring,
   zoom,
+  /* plateRule (CatalogCardFrameAndZoom): the plate's top hairline — default the variant's (catalog and
+   * print draw it); `false` turns it off without an `!important` in a consumer sheet */
+  plateRule,
   control,
   controlStart,
   reveal,
@@ -162,7 +168,7 @@ export default function ContentCard({
         '--kol-plate-pad-md': box.padMd,
         padding,
         marginTop: box.layout === 'stack' ? box.mediaGap : undefined,
-        borderTop: box.plateTop ? '1px solid var(--kol-fg-04)' : undefined,
+        borderTop: (plateRule ?? box.plateTop) ? '1px solid var(--kol-fg-04)' : undefined,
         background: box.layout === 'drawer' ? 'var(--kol-surface-inverse)' : box.plateBg,
         color: box.layout === 'drawer' ? 'var(--kol-fg-inverse)' : undefined,
         position: 'relative',

package/src/molecules/ContentMedia.jsx

@@ -72,7 +72,9 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  *                              floating in a tall row.
  * @param {boolean}   fade      an <img> child fades in on load (500ms, house curve) and
  *                              takes loading="lazy" — PrintGridCard's move (2026-08-27)
- * @param {ReactNode} children  the real media
+ * @param {ReactNode} children  the real media — ANY element: the zoom scales the wrapper's child
+ *                              whatever it is (CatalogCardFrameAndZoom, 2026-08-28 — a glyph on a
+ *                              specimen plate got the class and no motion while the rule named img/video)
  */
 const FIT = {
   /* a consumer WRAPPER div fills the frame as an img/video does (ColumnBrowser round, 2026-08-27 — kol-r2b2's wrapped thumb fell back to the image's intrinsic size) */
@@ -129,7 +131,7 @@ export default function ContentMedia({
       {fade ? withFade(children) : children}
       {/* OVER the artwork, and inert — a hairline that must not eat the click
         * the card above it is listening for. */}
-      {ring && <div className={`pointer-events-none absolute inset-0 border border-fg-08 ${round}`} />}
+      {ring && <div className={`kol-media-ring pointer-events-none absolute inset-0 border border-fg-08 ${round}`} />}
     </div>
   )
 }