@kolkrabbi/kol-component 0.90.0 → 0.90.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.90.0",
+  "version": "0.90.2",
   "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/ContentMedia.jsx

@@ -53,7 +53,10 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  * @param {string}    bg        tint only, no border — a raw token value
  * @param {string}    borderHover  border colour on hover (article's fg-16 step)
  * @param {boolean}   ring      hairline border OVER the media, inset
- * @param {boolean}   zoom      the artwork creeps up inside its frame on the
+ * @param {boolean|'hero'} zoom  the artwork creeps up inside its frame on the
+ *                            card's hover — 1.06; `'hero'` = the hero rung, 1.02
+ *                            (StackCardHover, 2026-08-27) — same pixel travel on a
+ *                            ~1500px thumb as 1.06 on a 500px one. Was:
  *                              CARD's hover — image-led variants only
  * @param {boolean}   fillHeight  size from the HEIGHT instead of the width: the
  *                              media fills its parent's height and its width
@@ -89,7 +92,7 @@ export default function ContentMedia({
   const round = radius ? 'rounded-[var(--kol-radius-sm)]' : ''
   return (
     <div
-      className={`relative ${fillHeight ? 'h-full w-auto' : 'w-full'} overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? 'kol-media-zoom' : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
+      className={`relative ${fillHeight ? 'h-full w-auto' : 'w-full'} overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? `kol-media-zoom${zoom === 'hero' ? ' is-hero' : ''}` : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
       style={{ ...(ratio != null ? { aspectRatio: ratio } : null), background: bg }}
     >
       {children}

package/src/molecules/ContentText.jsx

@@ -61,8 +61,9 @@ const RAMP = {
     row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
   },
   article: {
-    card: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
-    row:  { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    /* kol-content-title-dim: the title dims to 70% on card hover (StackCardHover, 2026-08-27 — ListingCard's move, kol-theme) */
+    card: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    row:  { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis kol-content-title-dim', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
   },
   work: {
     /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving

package/src/organisms/SectionNewsletter.jsx

@@ -98,22 +98,28 @@ export default function SectionNewsletter({
       data-theme={themeStamp}
       className={`kol-section-newsletter w-full flex flex-col justify-center py-24 ${theme ? 'bg-surface-primary text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
     >
-      {/* the family's ONE cap — the shell's --kol-container-max ladder */}
+      {/* the family's ONE cap — the shell's --kol-container-max ladder — and
+        * inside it the lede's MEASURE on a wrapper (SectionNewsletterForm,
+        * 2026-08-27): a measure is a layout seam, not a `bodyClass` override
+        * on SectionText — the organism renders the molecule bare */}
       <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto text-center">
+        <div className="mx-auto max-w-[64rem]">
         <SectionText
           align="center"
           label={label}
           headline={headline}
           headlineSize={headlineSize}
           body={body}
-          bodyClass="kol-mono-14 text-auto mx-auto max-w-[64rem]"
           gap="gap-6"
           slotClass={slotClass}
           slotStyle={slotStyle}
         >
+          {/* `w-full`: SectionText centres its children as flex items, so
+            * without it the form shrink-wraps and the Input's `w-full` has
+            * nothing to fill — it rendered at its intrinsic ~190px */}
           <form
             onSubmit={handleSubmit}
-            className="flex flex-col gap-4 pt-6 sm:flex-row sm:items-center sm:justify-center sm:gap-3"
+            className="flex w-full flex-col gap-4 pt-6 sm:flex-row sm:items-center sm:justify-center sm:gap-3"
           >
             <Input
               id={emailId}
@@ -147,6 +153,7 @@ export default function SectionNewsletter({
             </p>
           )}
         </SectionText>
+        </div>
       </div>
     </section>
   )