@kolkrabbi/kol-component 0.155.0 → 0.157.0

package/package.json

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

@@ -283,7 +283,16 @@ export default function ContentCard({
       </>
     ) : box.layout === 'fill-card' ? (
       <>
-        <div className="flex-1 min-w-0 min-h-0 relative overflow-hidden" style={{ ...(expanded ? { flex: '0 0 50%' } : null), ...(doFlip ? { perspective: '1000px' } : null) }}>
+        {/* THE SPLIT HAS A NARROW RUNG (ContentCardExpandedSplitStacks, kol-mirror
+          * 2026-09-01): below `md` the expanded halves STACK — media on top at
+          * its own ratio, content full width under it. Side by side, a 350px
+          * card gave each half 174 and the prose 126, and one module's specs
+          * ran 1177px tall. The 50% half is a `md:` class now, not an inline
+          * style — an inline flex-basis has no breakpoint. */}
+        <div
+          className={`flex-1 min-w-0 min-h-0 relative overflow-hidden ${expanded ? 'max-md:flex-none max-md:aspect-[var(--kol-card-ratio)] md:flex-[0_0_50%]' : ''}`}
+          style={{ ...(expanded ? { '--kol-card-ratio': r ?? '3 / 2' } : null), ...(doFlip ? { perspective: '1000px' } : null) }}
+        >
           {/* the FLIP (print): PrintGridCard's turn, verbatim — preserve-3d,
             * 0.4s ease-out, rotateY(180deg) while `selected`; the consumer's
             * `onClick` reads the rect off `event.currentTarget` for its
@@ -356,7 +365,7 @@ export default function ContentCard({
 
   const common = {
     'data-tags': isHero && Array.isArray(text.tags) && text.tags.length ? text.tags.join(' ') : undefined,
-    className: `kol-card group flex ${box.layout === 'canvas' && reveal != null ? 'has-reveal' : ''} ${expanded ? 'flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
+    className: `kol-card group flex ${box.layout === 'canvas' && reveal != null ? 'has-reveal' : ''} ${expanded ? 'flex-col md:flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
     style: {
       /* same reason as ContentRow: rest colours are PROPERTIES, because an
        * inline background/borderColor outranks the hover class and the step

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,
@@ -171,7 +177,7 @@ export default function SectionNewsletter({
             />
             <Button
               type="submit"
-              variant="primary"
+              variant={submitVariant}
               size={controlSize}
               disabled={status === 'submitting'}
               className="w-full sm:w-auto"