@kolkrabbi/kol-component 0.99.0 → 0.100.1

package/package.json

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

@@ -87,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>
   )

package/src/organisms/SettingsPanel.jsx

@@ -1,5 +1,4 @@
 import Button from '../atoms/Button.jsx'
-import Tag from '../atoms/Tag.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
 import ToggleSwitch from '../atoms/ToggleSwitch.jsx'
 import ShellDrawer from '../molecules/ShellDrawer.jsx'
@@ -137,10 +136,11 @@ export function SettingsChoice({ options = [], value, onChange, ariaLabel }) {
   return <SegmentedToggle size="sm" value={value} onChange={onChange} options={opts} ariaLabel={ariaLabel} />
 }
 
-/* The chips are the DS `Tag` ("the tag ticket" — SettingsPanelChromeAndColumnPreview,
- * user 2026-08-27: same chrome as Tag everywhere else, not a third look): `md`
- * (helper-12), `inverse` when on, `secondary` when off, as a button. The old
- * `.kol-control` string stays exported for consumers that typed it. */
+/* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
+ * 0.98.0 Tag pills): `.kol-control` sm on kol-mono-12, filled when on, meta ink
+ * when off, the count in meta after the label — the SAME string ContentFilters'
+ * kind chips, ViewToggle's text variant and the SELECT / FLAT strip wear. No
+ * Tag, no uppercase, no inverse. */
 export const CHIP_CLS = 'kol-control kol-control-sm kol-mono-12'
 export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text-meta hover:text-emphasis'}`
 
@@ -156,18 +156,16 @@ export function SettingsChipRow({ options = [], selected = [], onToggle }) {
   return (
     <div className="flex flex-wrap gap-1">
       {options.map((o) => (
-        <Tag
+        <button
           key={String(o.value)}
-          size="md"
-          hash={false}
-          variant={on.has(o.value) ? 'inverse' : 'secondary'}
-          active={on.has(o.value)}
+          type="button"
           aria-pressed={on.has(o.value)}
           onClick={() => onToggle?.(o.value)}
+          className={chipCls(on.has(o.value))}
         >
           {o.label ?? String(o.value)}
           {o.count > 0 && <span className="text-meta"> {o.count}</span>}
-        </Tag>
+        </button>
       ))}
     </div>
   )