@kolkrabbi/kol-component 0.65.0 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.65.0",
+  "version": "0.67.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/atoms/Divider.jsx

@@ -10,15 +10,24 @@ import React from 'react'
  * @param {Object} props
  * @param {string} props.variant - 'horizontal' or 'vertical' (default: 'horizontal')
  * @param {string} props.className - Additional classes
+ * @param {number} props.height - vertical variant only: the rule's height in px
+ *   (default 16 — sized to the type it separates, not to the row)
  * @param {string} props.opacity - Opacity level (01, 02, 04, 08, 12, 16, 24, 32, 48, 64, 80, 88, 96) (default: '08')
  */
-const Divider = ({ variant = 'horizontal', className = '', opacity = '08', inverse = false }) => {
+const Divider = ({ variant = 'horizontal', className = '', opacity = '08', inverse = false, height = 16 }) => {
   const isVertical = variant === 'vertical'
   const opacityClass = inverse ? `bg-fg-inverse-${opacity}` : `bg-fg-${opacity}`
 
   if (isVertical) {
+    /* THE RULE IS CENTRED ON WHAT IT SEPARATES, not stretched to the row.
+     *
+     * This hardcoded `self-stretch` AHEAD of `className`, so the wrapper always
+     * filled the flex line — a row whose height comes from 32px icon buttons
+     * gave a rule taller than the 18px type beside it, and any `self-*` passed
+     * from a call site lost to the hardcoded one. `align-self: center` with an
+     * explicit height puts it back on the type; `height` stays overridable. */
     return (
-      <div className={`self-stretch flex justify-center items-center ${className}`.trim()}>
+      <div className={`flex self-center items-center justify-center ${className}`.trim()} style={{ height }}>
         <div className={opacityClass} style={{ width: '1px', height: '100%' }} />
       </div>
     )

package/src/molecules/ContentMedia.jsx

@@ -55,6 +55,12 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  * @param {boolean}   ring      hairline border OVER the media, inset
  * @param {boolean}   zoom      the artwork creeps up inside its frame on the
  *                              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
+ *                              follows the ratio. What every ROW wants — a
+ *                              thumb sized off the row's own height keeps the
+ *                              row's rhythm, where a fixed width leaves it
+ *                              floating in a tall row.
  * @param {ReactNode} children  the real media
  */
 const FIT = {
@@ -73,6 +79,7 @@ export default function ContentMedia({
   borderHover,
   ring = false,
   zoom = false,
+  fillHeight = false,
   children,
   className = '',
 }) {
@@ -82,7 +89,7 @@ export default function ContentMedia({
   const round = radius ? 'rounded-[var(--kol-radius-sm)]' : ''
   return (
     <div
-      className={`relative 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' : ''} ${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/ContentRow.jsx

@@ -100,8 +100,14 @@ export default function ContentRow({
   ) : (
     <>
       {thumbPx > 0 && (
-        <div className="kol-row-thumb shrink-0">
+        /* THE THUMB FILLS THE ROW'S HEIGHT and its width follows the ratio
+         * (user ruling 2026-08-15, true for EVERY row variant). `--kol-row-thumb`
+         * is now a MINIMUM height, not a fixed width: a thumb sized off its own
+         * width floated in the top-left of a tall row with the rest of the row
+         * empty beside it, which is what a `work` row at 160 looked like. */
+        <div className="kol-row-thumb shrink-0 self-stretch">
           <ContentMedia
+            fillHeight
             ratio={ratio ?? box.ratio}
             border={box.thumbBorder ?? false}
             bg={box.thumbBg}

package/src/molecules/ContentText.jsx

@@ -168,8 +168,11 @@ export default function ContentText({
     const parts = slots.map((s, j) => render(s, j)).filter(Boolean)
     if (!parts.length) return null
     if (kind === 'stack') {
+      /* items-start + text-left: a trailing column reads DOWN, so its labels
+       * need one left edge. Right-aligned, `Client` / `Collection` / `Typeface`
+       * gave the column a ragged edge on the side the eye actually scans. */
       return (
-        <div key={`stack-${i}`} className="flex w-full min-w-0 flex-col" style={{ gap: STACK[variant] ?? 'var(--kol-spacing-1)' }}>
+        <div key={`stack-${i}`} className="flex w-full min-w-0 flex-col items-start text-left" style={{ gap: STACK[variant] ?? 'var(--kol-spacing-1)' }}>
           {parts}
         </div>
       )
@@ -190,7 +193,7 @@ export default function ContentText({
           * empty space sat between the two columns. */}
         {kind === 'between' && parts.length > 1
           ? parts.map((p, j) => (
-              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0'}>{p}</div>
+              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0 text-left'}>{p}</div>
             ))
           : parts}
       </div>

package/src/organisms/ContentFilters.jsx

@@ -81,12 +81,11 @@ const ContentFilters = ({
   /* THE LOOK SEAMS. Every one defaults to what the component shipped, so
    * passing nothing renders exactly as before — these exist because the
    * hardcoded values were the wrong call for every consumer but one. */
-  /* MONO + UPPERCASE (user rulings 2026-08-15). Mono because the title is a
-   * NAME that can run long, and `kol-helper-*` is line-height-1 chrome carrying
-   * 500 weight and 0.06em tracking it should not inherit. Uppercase because it
-   * is still part of the header strip. Both knobs, set independently — which is
-   * the whole reason they are two props. */
-  titleClassName = 'kol-mono-14',
+  /* HELPER + UPPERCASE. The title is part of the header STRIP — same chrome as
+   * RECENT/SAVED beside it — and helper is the single-line ramp that strip
+   * runs on. Casing and ramp are separate props precisely so a consumer whose
+   * titles wrap can move to `kol-mono-14` without losing the casing. */
+  titleClassName = 'kol-helper-14',
   titleUppercase = true,
   labelClassName = 'kol-helper-12 text-fg-96',
   labelUppercase = true,
@@ -277,7 +276,7 @@ const ContentFilters = ({
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
             <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
-          <Divider variant="vertical" className="self-stretch py-1" />
+          <Divider variant="vertical" />
           <div className="flex items-center gap-1">
             {/* IconFrame, not a kol-btn with its chrome cancelled inline.
               * 05-control-chrome.md:109 — "any icon-only control in chrome is