@kolkrabbi/kol-component 0.157.0 → 0.159.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.157.0",
+  "version": "0.159.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/Button.jsx

@@ -13,7 +13,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
  * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'nav'|'danger'|'grey'|'control'} props.variant - Visual variant. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
- * @param {'sm'|'md'|'lg'} props.size - Button size (default: 'md')
+ * @param {'xs'|'sm'|'md'|'lg'} props.size - Button size (default: 'md'); xs is the panel rung (ControlsXsRung, 2026-09-01) — kol-mono-8 in a 22px shell (20 icon-only), opt-in by prop
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
  * @param {string} props.iconLeftHover - Icon to show on hover (left position)
@@ -98,6 +98,8 @@ const Button = ({
   // Add size class — pairs the padding rule with its mono type class.
   const sizeClass = size === 'sm'
     ? 'kol-btn-sm kol-mono-12'
+    : size === 'xs'
+    ? 'kol-btn-xs kol-mono-8'
     : size === 'lg'
     ? 'kol-btn-lg kol-mono-16'
     : 'kol-btn-md kol-mono-14'

package/src/atoms/Input.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { toneClass } from '../utilities/tone.js'
 import { glyphSize } from '../hooks/glyphLadders.js'
@@ -11,6 +12,13 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *                                secondary, always subordinate to filled)
  *   tone="inverse"             — the dark chip (`fg-ab-24`) for a washed plane
  *                                (ControlToneInverse, 2026-08-27); same prop on ViewToggle · Dropdown
+ *   size="xs"                  — the panel rung (ControlsXsRung, 2026-09-01):
+ *                                kol-mono-8 in a 22px shell; opt-in by prop
+ *   onCommit                   — `(trimmed) => void` on blur / Enter (Escape
+ *                                restores): the rack commits a module name or a
+ *                                scope expression, not every keystroke. With it
+ *                                the field keeps a local draft seeded from
+ *                                `value`; `onChange` still fires live if given.
  *   variant="ghost"            — legacy alias, resolves to outline
  *   variant="property"         — the Figma property field (PropertyField,
  *                                2026-08-12): filled chrome, dim `affordance`
@@ -46,12 +54,13 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
  */
 
-const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
 
 export default function Input({
   type = 'text',
   value,
   onChange,
+  onCommit,
   variant = 'filled',
   tone = 'default',
   size = 'md',
@@ -100,6 +109,26 @@ export default function Input({
    * `${len}ch` hugs the value with no probe element, and stays number-safe
    * where the HTML `size` attr is ignored (<input type="number">). +2px keeps
    * the caret from clipping at the end. Tracks `value` → controlled only. */
+  /* commit-on-blur/Enter (ControlsXsRung, 2026-09-01 — kol-monitor's panel
+   * TextInput collapsing onto this atom): a local draft, seeded from `value`,
+   * committed trimmed; Escape restores. Only when `onCommit` is given. */
+  const [draft, setDraft] = useState(value ?? '')
+  /* the ref mirrors the draft so a blur that lands in the same tick as the
+   * last keystroke commits what was typed, not the last RENDER's draft */
+  const draftRef = useRef(value ?? '')
+  useEffect(() => { if (onCommit) { setDraft(value ?? ''); draftRef.current = value ?? '' } }, [value, onCommit])
+  const commitProps = onCommit
+    ? {
+        value: draft,
+        onChange: (e) => { draftRef.current = e.target.value; setDraft(e.target.value); onChange?.(e) },
+        onBlur: () => onCommit(String(draftRef.current).trim()),
+        onKeyDown: (e) => {
+          if (e.key === 'Enter') e.currentTarget.blur()
+          if (e.key === 'Escape') { draftRef.current = value ?? ''; setDraft(value ?? ''); e.currentTarget.blur() }
+        },
+      }
+    : null
+
   const propertyLen = Math.max(String(value ?? placeholder ?? '').length, 1)
 
   /* Pin inner input height to the typography token's line-height. Without
@@ -108,7 +137,7 @@ export default function Input({
    * from the font's ascender+descender (font-metric), not strictly from
    * CSS line-height. Result: kol-control-sm ends up 26.5px instead of 26.
    * h-4 / h-[18px] / h-[22px] match the kol-mono-12 / -14 / -16 line-heights. */
-  const heightCls = size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'
+  const heightCls = size === 'xs' ? 'h-3' : size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'
 
   const inputCls = [
     'min-w-0 bg-transparent border-none outline-none text-auto',
@@ -149,9 +178,11 @@ export default function Input({
         * Controlled + no onChange = deliberate display-only → readOnly. */}
       <input
         type={type}
-        {...(value !== undefined
-          ? { value: value ?? '', onChange, readOnly: !onChange || undefined }
-          : { onChange })}
+        {...(commitProps
+          ? commitProps
+          : value !== undefined
+            ? { value: value ?? '', onChange, readOnly: !onChange || undefined }
+            : { onChange })}
         placeholder={placeholder}
         disabled={disabled}
         spellCheck={false}
@@ -159,6 +190,8 @@ export default function Input({
         className={inputCls}
         style={isProperty ? { width: `calc(${propertyLen}ch + 2px)` } : undefined}
         {...inputProps}
+        /* the commit pair LAST, so nothing spread above it can shadow onBlur / onKeyDown */
+        {...(commitProps || {})}
       />
       {unit !== undefined && (
         <span aria-hidden="true" className="text-meta shrink-0">{unit}</span>

package/src/hooks/glyphLadders.js

@@ -24,10 +24,10 @@
  */
 
 /** Icon alone in a pinned square. Pairs with squares 28 · 32 · 36. */
-export const SOLO = { sm: 16, md: 20, lg: 24 }
+export const SOLO = { xs: 12, sm: 16, md: 20, lg: 24 }
 
 /** Icon beside a label, inside the rung's line box. */
-export const ADJACENT = { sm: 14, md: 16, lg: 18 }
+export const ADJACENT = { xs: 10, sm: 14, md: 16, lg: 18 }
 
 /**
  * Indicator glyph — a caret/chevron that DECORATES a control rather than
@@ -37,7 +37,7 @@ export const ADJACENT = { sm: 14, md: 16, lg: 18 }
  * Dropdown's caret each hand-typed their number (Dropdown took the ADJACENT
  * rung, the oversize the user called): two transcriptions, the folklore
  * threshold. */
-export const INDICATOR = { sm: 12, md: 14, lg: 16 }
+export const INDICATOR = { xs: 8, sm: 12, md: 14, lg: 16 }
 
 /**
  * Resolve a glyph size. `solo` picks the ladder; `size` indexes it.

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/molecules/Dropdown.jsx

@@ -32,7 +32,8 @@ import { indicatorSize } from '../hooks/glyphLadders.js'
  * (lg ≥1024 / md ≥768 / sm below) is gone.
  */
 
-const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+/* xs (ControlsXsRung, 2026-09-01): the panel rung, opt-in by prop — the default stays sm (2026-07-28 law) */
+const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
 /* Caret size comes from the INDICATOR ladder (glyphLadders.js) — the private
  * map that lived here was a transcription of ADJACENT, which is the wrong
  * ladder for a decoration: it put a caret one rung HEAVIER than the label

package/src/molecules/Stepper.jsx

@@ -1,8 +1,16 @@
 /**
  * Stepper — number input + chevron buttons, built on the .kol-control shell.
  *
- *   size="sm" (default) / "md" / "lg" — matched padding + type class.
- *   Chevron scale follows the size: 8 / 10 / 12 px each, stacked.
+ *   size="xs" / "sm" (default) / "md" / "lg" — matched padding + type class.
+ *   Chevron scale follows the size: 6 / 8 / 10 / 12 px each, stacked. xs is the
+ *   panel rung (ControlsXsRung, kol-monitor 2026-09-01).
+ *
+ *   options — step through a LIST instead of a number range (the rack's
+ *   ‹ value › Selector, as a variant of this on the ladder; user: "selector
+ *   could be a variant of ours if we make it follow the size ladder"). `value`
+ *   is one of the options, the field is read-only, the chevrons step and WRAP
+ *   at both ends, and `onChange` reports the option in the same event shape
+ *   as the number path — `{ target: { value: option } }`.
  *
  * Loaded from `00-kol/chevron-{up,down}.svg` via the Icon registry — first
  * stroke icons in the kol curated set. For a plain number input without
@@ -10,8 +18,8 @@
  */
 import { Icon } from '@kolkrabbi/kol-icons'
 
-const SIZE_TYPE    = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
-const CHEVRON_SIZE = { sm: 8,             md: 10,            lg: 12 }
+const SIZE_TYPE    = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const CHEVRON_SIZE = { xs: 6,            sm: 8,             md: 10,            lg: 12 }
 
 export default function Stepper({
   value,
@@ -19,18 +27,27 @@ export default function Stepper({
   min,
   max,
   step = 1,
+  options,
   size = 'sm',
   className = '',
   style = {},
   ...props
 }) {
+  /* the list path: wrap at both ends, report the option */
+  const stepList = (dir) => {
+    const i = options.indexOf(value)
+    const n = i < 0 ? 0 : (i + dir + options.length) % options.length
+    onChange?.({ target: { value: options[n] } })
+  }
   const handleIncrement = () => {
+    if (options) return stepList(1)
     const newValue = Number(value) + step
     if (max !== undefined && newValue > max) return
     onChange?.({ target: { value: newValue } })
   }
 
   const handleDecrement = () => {
+    if (options) return stepList(-1)
     const newValue = Number(value) - step
     if (min !== undefined && newValue < min) return
     onChange?.({ target: { value: newValue } })
@@ -64,12 +81,13 @@ export default function Stepper({
   return (
     <div className={shellCls} style={style}>
       <input
-        type="number"
+        type={options ? 'text' : 'number'}
+        readOnly={options ? true : undefined}
         value={value ?? ''}
-        onChange={handleInputChange}
-        min={min}
-        max={max}
-        step={step}
+        onChange={options ? undefined : handleInputChange}
+        min={options ? undefined : min}
+        max={options ? undefined : max}
+        step={options ? undefined : step}
         className="w-full min-w-0 bg-transparent border-none outline-none text-auto hide-number-spinners"
         style={{ paddingRight: `${inputPaddingRight}px` }}
         {...props}

package/src/organisms/SectionNewsletter.jsx

@@ -160,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}