@kolkrabbi/kol-component 0.98.0 → 0.100.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.98.0",
+  "version": "0.100.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,13 +24,13 @@
     "framer-motion": "^12.0.0",
     "gsap": "^3.13.0",
     "hls.js": "^1.6.0",
-    "opentype.js": "^1.3.4",
+    "opentype.js": "^1.3.4 || ^2.0.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.19.0"
+    "@kolkrabbi/kol-icons": "^0.20.0"
   },
   "files": [
     "src",

package/src/atoms/Tag.jsx

@@ -75,13 +75,12 @@ export default function Tag({
    * SINGLE-LINE chrome — that is exactly the kol-helper-* ramp, whose defining
    * property is `line-height: 1`. The sizes match the scale 1:1 (10/12/14), so
    * this is adopting the existing system, not restating it. */
-  const TYPE = { sm: 'kol-helper-10', md: 'kol-helper-12', lg: 'kol-helper-14' }
+  /* the type rides `.kol-tag--{size}` in kol-theme since 0.69.0 (WorkListingRowsAndFilters) */
 
   const classes = [
     'kol-tag',
     VARIANTS[variant] ?? VARIANTS.primary,
     `kol-tag--${size}`,
-    TYPE[size] ?? TYPE.sm,
     active ? 'is-active' : '',
     className
   ].filter(Boolean).join(' ')

package/src/molecules/ContentCard.jsx

@@ -44,7 +44,8 @@ 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)' },
-  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: 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)' },
   /* 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)' },
@@ -196,7 +197,8 @@ export default function ContentCard({
     frame: frame ?? MEDIA[variant]?.frame ?? false,
     ring: ring ?? MEDIA[variant]?.ring ?? false,
     borderHover: MEDIA[variant]?.borderHover ?? false,
-    zoom: zoom ?? (isHero ? 'hero' : MEDIA[variant]?.zoom ?? false),
+    /* a catalog card with REAL media is image-led: it zooms (ShellHomeSystem) */
+    zoom: zoom ?? (isHero ? 'hero' : variant === 'catalog' ? media != null : MEDIA[variant]?.zoom ?? false),
     fade: MEDIA[variant]?.fade ?? false,
   }
 
@@ -301,7 +303,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' : ''} ${className}`.trim(),
+    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(),
     style: {
       /* same reason as ContentRow: rest colours are PROPERTIES, because an
        * inline background/borderColor outranks the hover class and the step
@@ -309,6 +311,7 @@ export default function ContentCard({
       '--kol-card-bg': box.bg ?? undefined,
       '--kol-card-border': box.border ? (selected ? 'var(--kol-fg-64)' : box.border) : undefined,
       '--kol-content-hover-bg': hoverBg ?? undefined,
+      '--kol-content-hover-border': box.frameHover ?? undefined,
       aspectRatio: box.height || expanded ? undefined : (box.layout !== 'stack' ? r : undefined),
       height: box.height,
       gridColumn: expanded ? 'span 2' : undefined,

package/src/molecules/ContentRow.jsx

@@ -12,7 +12,8 @@ import ContentText from './ContentText.jsx'
  *
  * @param {string}    variant   default | catalog | print | article | work | typeface
  * @param {ReactNode} media     thumb content (omit → placeholder)
- * @param {number}    thumb     thumb edge px — overrides the ruled default; 0 hides
+ * @param {number|'fill'} thumb  thumb edge px — overrides the ruled default; 0 hides; `'fill'` = a square
+ *                             the height of the row's content, whatever the rung (WorkListingRowsAndFilters)
  * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default
  * @param {number}    paddingY  vertical padding px — overrides the ruled default
  * @param {boolean}   selected
@@ -38,7 +39,12 @@ const BOX = {
   article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)', hover: 'var(--kol-oq-02)' },
   /* work and typeface step UP at md — the shipped rows both do, and a work row
    * at a fixed 96 cannot hold the display-03 line it was ruled to carry. */
-  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true },
+  /* RULED ON /work (WorkListingRowsAndFilters, 2026-08-27): min-height 168 ("div
+   * 8"), 16 padding at every width ("16px padding, that's fine"), the thumb FILLS
+   * the content height (136 in a 168 row) with no hairline, the frame steps
+   * transparent → fg-08 on hover ("0 → 16 is a big jump"). No md step: the rows
+   * were approved at their base values. */
+  work:     { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false },
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
@@ -63,6 +69,7 @@ export default function ContentRow({
 }) {
   const box = BOX[variant] ?? BOX.default
   const thumbPx = thumb ?? box.thumb
+  const padY = (paddingY != null ? `${paddingY}px` : String(box.pad)).trim().split(/\s+/)[0]
 
   /* The md: STEP is a custom property, not a Tailwind variant. Tailwind cannot
    * generate `md:min-h-40` from package source (the SegmentedToggle rule), and
@@ -76,7 +83,10 @@ export default function ContentRow({
     '--kol-row-gap-md': box.gapMd,
     '--kol-row-min-h': box.minH != null ? `${box.minH}px` : undefined,
     '--kol-row-min-h-md': box.minHMd != null ? `${box.minHMd}px` : undefined,
-    '--kol-row-thumb': `${thumbPx}px`,
+    /* `fill` = the rung minus the vertical padding — a definite number, not a
+     * stretch (a min-height row has no definite cross size, so a stretched
+     * aspect-ratio square resolved to the image's intrinsic width) */
+    '--kol-row-thumb': thumbPx === 'fill' ? `calc(${box.minH ?? 96}px - 2 * ${padY})` : `${thumbPx}px`,
     '--kol-row-thumb-md': box.thumbMd != null ? `${box.thumbMd}px` : undefined,
     '--kol-content-hover-bg': box.hover,
     '--kol-content-hover-border': box.frameHover,
@@ -103,7 +113,7 @@ export default function ContentRow({
     </>
   ) : (
     <>
-      {thumbPx > 0 && (
+      {(thumbPx === 'fill' || thumbPx > 0) && (
         /* THE THUMB IS A FIXED SQUARE BOX (ContentRowsAndPrintCard, user
          * 2026-08-27: "the image should not control height, image should fit
          * the row image placeholder") — `--kol-row-thumb` wide, square, at the
@@ -111,7 +121,7 @@ export default function ContentRow({
          * media object-covers into it; row height = max(thumb, text). This
          * retires the 2026-08-15 fill-the-height ruling and the `thumbSquare`
          * exception it needed. Rows never zoom their thumb — cards keep theirs. */
-        <div className="kol-row-thumb shrink-0 self-start">
+        <div className={`kol-row-thumb shrink-0 self-start ${thumbPx === 'fill' ? 'is-fill' : ''}`.trim()}>
           <ContentMedia
             ratio={null}
             border={box.thumbBorder ?? false}

package/src/molecules/ContentText.jsx

@@ -52,7 +52,9 @@ const RAMP = {
     row:  { title: 'kol-sans-heading-05 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
   },
   catalog: {
-    card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta' },
+    /* detail truncates (ShellHomeSystem, 2026-08-27): a wrapping blurb set three
+     * cards' plates at three heights and misaligned the media */
+    card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta truncate' },
     row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
   },
   print: {
@@ -85,7 +87,10 @@ const RAMP = {
      * `kol-mono-12 text-fg-64` · description `kol-sans-heading-03 text-auto`.
      * Title and type are the pair — same rung, same full ink; only the year
      * steps down. */
-    row:  { title: 'kol-mono-12 text-body uppercase truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', tags: 'flex flex-wrap items-center gap-1.5' },
+    /* RULED ON /work beside the local WorkListItem (WorkListingRowsAndFilters,
+     * 2026-08-27): the typeface row's voices — title + type kol-mono-14 full
+     * ink, the year kol-mono-12 fg-64. Body unchanged (the site passes its face). */
+    row:  { title: 'kol-mono-14 uppercase text-emphasis truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64', tags: 'flex flex-wrap items-center gap-1.5' },
   },
   typeface: {
     /* RULED ON SCREEN (TypefaceCardAndRow, kol-website 2026-08-27): name and

package/src/molecules/SectionText.jsx

@@ -85,7 +85,7 @@ export default function SectionText({
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
       {eb && <span className={cls(`kol-section-text-eyebrow ${ebClass}`, 'eyebrow')} style={slotStyle.eyebrow ?? slotStyle.label}>{eb}</span>}
-      {headline && <Headline className={cls(`${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
+      {headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
       {body && (typeof body === 'string' ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p> : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)}
       {children}
       {actions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}

package/src/organisms/ContentCollection.jsx

@@ -98,6 +98,10 @@ export default function ContentCollection({
       key={form}
       className={`m-0 list-none p-0 ${colsCls} ${className}`.replace(/\s+/g, ' ').trim()}
       style={{
+        /* the ROW's md step is a container query (kol-theme .kol-row) and nothing
+         * declared a container until 2026-08-27 (WorkListingRowsAndFilters) — the
+         * wall is one, so a row inside it steps on the wall's own width */
+        containerType: 'inline-size',
         display: 'grid',
         /* with `cols` the classes carry the tracks — an inline template would outrank them */
         gridTemplateColumns: colsCls

package/src/organisms/ContentFilters.jsx

@@ -42,6 +42,8 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {boolean} props.titleUppercase      — cases the title (default false)
  * @param {string}  props.labelClassName      — filter-group label type/ink
  * @param {boolean} props.labelUppercase      — cases the group label (default true)
+ * groups: `{ label, key, values, stack?, className?, wrapClassName? }` — a group with ≤ 6 values stacks by
+ * default (`stack: false` opts out); `className` / `wrapClassName` are per-group seams
  * @param {string}  props.tagVariant          — filter chip variant ('primary' grey fill)
  * @param {string}  props.tagSize             — filter chip size
  * @param {string}  props.tagActiveClassName  — chip ink, selected
@@ -240,8 +242,13 @@ const ContentFilters = ({
     </div>
   ) : null
 
-  const renderFilterGroup = (group) => (
-    <div key={group.key} className={`flex flex-col gap-3 ${group.stack ? 'shrink-0' : 'min-w-0 flex-1'}`}>
+  const renderFilterGroup = (group) => {
+    /* a SHORT group (≤ 6 values) stacks by default (WorkListingRowsAndFilters, 2026-08-27 —
+     * user: "why do I have to say it every time? why do you default to 50/50?");
+     * `stack: false` opts out, `stack: true` forces */
+    const stacked = group.stack ?? (group.values?.length ?? 0) <= 6
+    return (
+    <div key={group.key} className={`flex flex-col gap-3 ${stacked ? 'shrink-0' : 'min-w-0 flex-1'} ${group.className ?? ''}`.trim()}>
       {/* THE CATEGORY LABEL IS THE ACTIVE INK — `kol-helper-12` at `text-fg-96`,
         * the same full opacity a SELECTED layout item wears (user ruling
         * 2026-08-15: "TAGS and other categories are ACTIVE state full opacity").
@@ -255,7 +262,9 @@ const ContentFilters = ({
       <h4 className={labelClassName} style={labelUppercase ? { textTransform: 'uppercase' } : undefined}>
         {group.label}
       </h4>
-      <div className={group.stack ? 'flex flex-col items-start gap-2' : 'flex flex-wrap gap-2'}>
+      {/* the fluid group keeps 48px of room on its right (it ran flush to the
+        * panel's edge); `group.wrapClassName` is the per-group seam */}
+      <div className={`${stacked ? 'flex flex-col items-start gap-2' : 'flex flex-wrap gap-2 pr-12'} ${group.wrapClassName ?? ''}`.trim()}>
         {group.values.map((value) => (
           <Tag
             key={value}
@@ -272,6 +281,7 @@ const ContentFilters = ({
       </div>
     </div>
   )
+  }
 
   return (
     /* minHeight 0 on both this root and the body below: without it a flex
@@ -466,7 +476,8 @@ const ContentFilters = ({
       )}
 
       <div style={{ marginTop: 'var(--kol-spacing-6)', display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
-        {renderItem(filteredItems, viewMode, layout)}
+        {/* the items panel is a CONTAINER (WorkListingRowsAndFilters, 2026-08-27) — rows step on its width */}
+        <div style={{ containerType: 'inline-size' }}>{renderItem(filteredItems, viewMode, layout)}</div>
       </div>
     </div>
   )