@kolkrabbi/kol-component 0.156.0 → 0.158.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.156.0",
+  "version": "0.158.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

@@ -142,6 +142,9 @@ export default function ContentCard({
   hero = false,
   label,
   pad,
+  /* the tag chip follows the BOX (CardTagsNoVisibleFill, 2026-09-01): a solid
+   * surface fill keeps `tertiary`, a plain or washed box takes `primary` */
+  tagVariant,
   media,
   ratio,
   fit,
@@ -222,7 +225,7 @@ export default function ContentCard({
         zIndex: box.layout === 'canvas' ? 1 : undefined,
       }}
     >
-      {hasText && <ContentText variant={variant} form={isHero ? 'hero' : 'card'} {...textSlots} />}
+      {hasText && <ContentText variant={variant} form={isHero ? 'hero' : 'card'} tagVariant={tagVariant ?? (/surface-/.test(box.bg ?? '') ? 'tertiary' : 'primary')} {...textSlots} />}
       {/* ABSOLUTE, not a flex sibling: the plate's height moves with the title
         * and the meta, so a laid-out stack would stretch or drift with it. The
         * inset reads the SAME pad token the plate uses, so the icons sit the

package/src/molecules/ContentRow.jsx

@@ -33,6 +33,8 @@ import ContentText from './ContentText.jsx'
  *                             and takes a band through `footer` instead.
  * @param {boolean}   selected
  * @param {Function}  onClick
+ * @param {string}    tagVariant  the tag chip (CardTagsNoVisibleFill, 2026-09-01): default follows the BOX — a solid
+ *   surface fill keeps `tertiary` (the /work row it was minted for), a plain or washed box takes `primary`
  * text slots + *Class seams forwarded to ContentText.
  */
 
@@ -151,6 +153,7 @@ export default function ContentRow({
   onClick,
   href,
   onNavigate,
+  tagVariant,
   className = '',
   ...text
 }) {
@@ -222,7 +225,7 @@ export default function ContentRow({
    * (a rendered alphabet, a waveform, a sparkline) is never the family's. */
   const inner = box.column ? (
     <>
-      <ContentText variant={variant} form="row" className="w-full" {...text} />
+      <ContentText variant={variant} form="row" className="w-full" tagVariant={tagVariant ?? (/surface-/.test(box.bg ?? '') ? 'tertiary' : 'primary')} {...text} />
       {footer}
     </>
   ) : (
@@ -250,7 +253,7 @@ export default function ContentRow({
         * ruled it on screen): the two lines stack to 34 inside a 40 content box,
         * and pushing them fully apart puts the ascenders hard against the thumb's
         * top and bottom edges. It is the ROW's ruling, so the row passes it. */}
-      <ContentText variant={variant} form="row" className={`flex-1 ${box.height != null ? 'py-[2px]' : ''}`.trim()} {...text} />
+      <ContentText variant={variant} form="row" className={`flex-1 ${box.height != null ? 'py-[2px]' : ''}`.trim()} tagVariant={tagVariant ?? (/surface-/.test(box.bg ?? '') ? 'tertiary' : 'primary')} {...text} />
       {/* `specs` rides the trailing edge on EVERY variant — year · material ·
        * edition is a content difference, not a geometry one, and minting a
        * seventh page-named box for it is the exact mistake §1 of the ticket is

package/src/molecules/ContentText.jsx

@@ -24,6 +24,10 @@
  * @param {ReactNode} size       default · article (file size / read length)
  * @param {ReactNode} meta       work only
  * @param {number}    gap        inner line gap in px (defaults per variant/form)
+ * @param {string}    tagVariant the Tag variant the `tags` slot draws (default `primary` — a soft ink wash that reads as a chip
+ *   on a plain surface; CardTagsNoVisibleFill, kol-website 2026-09-01: `tertiary` is surface-primary with no border and was
+ *   INVISIBLE on every card that sits on surface-primary). ContentCard / ContentRow pass `tertiary` for a box with a
+ *   solid surface fill — the /work row the variant was minted for — and `primary` otherwise
  * @param {string}    titleClass … eyebrowClass (alias `kickerClass`), bodyClass, detailClass,
  *                    dateClass, sizeClass, metaClass — full class overrides
  */
@@ -203,7 +207,7 @@ export default function ContentText({
   variant: variantProp = 'file',
   form = 'card',
   title, body, eyebrow, kicker, detail, date, size, meta, tags,
-  gap, clamp,
+  gap, clamp, tagVariant = 'primary',
   titleClass, bodyClass, eyebrowClass, kickerClass, detailClass, dateClass, sizeClass, metaClass, tagsClass,
   className = '',
 }) {
@@ -244,7 +248,7 @@ export default function ContentText({
     if (slot === 'tags')
       return v.map((t, i) =>
         typeof t === 'string' || typeof t === 'number' ? (
-          <Tag key={i} variant="tertiary" size="sm">{t}</Tag>
+          <Tag key={i} variant={tagVariant} size="sm">{t}</Tag>
         ) : t
       )
     return v.map((item, i) => <span key={i}>{item}</span>)

package/src/organisms/SectionNewsletter.jsx

@@ -49,6 +49,11 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {string}    inputId      id override for the email input (default useId-generated)
  * @param {object}    slotClass · slotStyle   per-slot class / style on the SectionText (reveal seam)
  * @param {'sm'|'md'|'lg'} [controlSize='md']  size rung for BOTH the email Input and the submit
+ * @param {string} [submitVariant='primary']  the submit Button's variant (SectionNewsletterSubmitVariant,
+ *   kol-website 2026-09-01): `primary` is the page's second surface, which on an inverse band is
+ *   dark-on-dark and reads as disabled — a consumer on a dark band passes `secondary`, the
+ *   ink-on-page inversion. A prop, not a background read: the organism does not know which
+ *   backgrounds are dark, and this lands the way `controlSize` did. Default moves nothing.
  *   Button (SectionNewsletterControlSize, kol-website 2026-08-31). The pair was hardcoded md with no
  *   seam, so a page that sets `size="lg"` on every other call-site button could not match it here and
  *   the newsletter read visibly smaller directly beneath them. Default is today's md — nothing moves.
@@ -66,6 +71,7 @@ import { minHeightClass } from './sectionHeights.js'
 export default function SectionNewsletter({
   height = '40',
   controlSize = 'md',
+  submitVariant = 'primary',
   fullBleed = false,
   theme,
   background,
@@ -154,9 +160,17 @@ export default function SectionNewsletter({
           {/* `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 */}
+          {/* ON BUTTONGROUP'S LADDER (NewsletterFormGapOffLadder, kol-website
+            * 2026-09-01; user: "the gap between input and button in newsletter
+            * should be the same as button group"): `gap-2 sm:gap-4` — 8 stacked,
+            * 16 in the row — the pair ButtonGroup ruled on 08-31. This form was
+            * `gap-4 sm:gap-3`, inverted against it. The `pt-6` went too: the
+            * SectionText above already spaces its children by `gap-6`, so the
+            * form sat 48 under the body where every other section's actions sit
+            * 24. */}
           <form
             onSubmit={handleSubmit}
-            className="flex w-full 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-2 sm:flex-row sm:items-center sm:justify-center sm:gap-4"
           >
             <Input
               id={emailId}
@@ -171,7 +185,7 @@ export default function SectionNewsletter({
             />
             <Button
               type="submit"
-              variant="primary"
+              variant={submitVariant}
               size={controlSize}
               disabled={status === 'submitting'}
               className="w-full sm:w-auto"