@kolkrabbi/kol-component 0.158.0 → 0.160.0

package/package.json

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

@@ -23,12 +23,13 @@ const VARIANT_MAP = {
 }
 
 const SIZE_MAP = {
+  xs: 'kol-badge-xs',
   sm: 'kol-badge-sm',
   md: 'kol-badge-md',
   lg: 'kol-badge-lg'
 }
 
-const ICON_SIZES = { sm: 12, md: 14, lg: 16 }
+const ICON_SIZES = { xs: 10, sm: 12, md: 14, lg: 16 }
 
 const Badge = ({
   children,

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/IconFrame.jsx

@@ -61,7 +61,7 @@ import { toneClass } from '../utilities/tone.js'
  *
  * @param {string} name       icon name (kol-icons)
  * @param {string} variant    primary|secondary|accent|outline|ghost|nav|grey|danger
- * @param {string} size       sm|md|lg — square + glyph together
+ * @param {string} size       xs|sm|md|lg — square + glyph together (xs = 20px square, 12 glyph; the panel rung, 2026-09-01)
  * @param {string} radius     sm (default, the system's 4px) | full (9999px).
  *                            Two values, nothing between: a round frame is its
  *                            own chrome idiom (edge-straddling controls, avatars),

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/atoms/SegmentedToggle.jsx

@@ -47,7 +47,7 @@
  *   className — additional classes on the outer shell
  */
 export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', ariaLabel, className = '' }) {
-  const cellType = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
+  const cellType = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
   const stateless = value == null
   const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
 

package/src/atoms/Tag.jsx

@@ -1,6 +1,6 @@
 import { Icon } from '@kolkrabbi/kol-icons'
 
-const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
+const ICON_SIZES = { xs: 8, sm: 10, md: 12, lg: 14 }
 
 /**
  * Tag — the INTERACTIVE chip: filterable, selectable, removable.
@@ -35,7 +35,7 @@ const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
  * @param {ReactNode} children   label content
  * @param {string}    text       content fallback when no children (brand SwatchControls)
  * @param {string}    variant    'primary' | 'secondary' | 'inverse' · `tertiary` = secondary's fill, no outline, mono at fg-80 (2026-08-27)
- * @param {string}    size       'sm' | 'md' | 'lg' — `sm` is the default and
+ * @param {string}    size       'xs' | 'sm' | 'md' | 'lg' — `sm` is the default and
  *                               should stay the answer; `lg` needs a reason
  * @param {boolean}   active     selected state (filter chips)
  * @param {boolean}   hash       prepend `#` (default true); false for plain labels

package/src/atoms/Textarea.jsx

@@ -31,7 +31,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * Pairs with `<Input>` for single-line.
  */
 
-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 Textarea({
   value,

package/src/atoms/ToggleSwitch.jsx

@@ -7,15 +7,16 @@ import React from 'react'
  *   variant="primary"        — filled shell (surface-secondary), button geometry
  *   variant="outline"        — bordered shell (border-oq-16), button geometry
  *
- *   size="sm" / "md" (default) / "lg" — shells match button heights
- *     (26/32/40); the track scales with size in all variants.
+ *   size="xs" / "sm" / "md" (default) / "lg" — shells match button heights
+ *     (22/26/32/40); the track scales with size in all variants. xs is the
+ *     panel rung (2026-09-01).
  *
  * Legacy aliases: 'plain' → bare · 'default' (the old boxed look) → outline.
  * Type via kol-mono-{12,14,16}; no auto-uppercase — casing is authored at
  * the call site (KOL no-auto-casing rule).
  */
 
-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' }
 const LEGACY_VARIANTS = { plain: 'bare', default: 'outline' }
 
 const ToggleSwitch = ({

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/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
@@ -183,6 +184,8 @@ const Dropdown = ({
         className={`kol-dd-panel kol-dd-panel--${resolvedVariant} ${toneClass(tone)}`.trim()}
         style={{
           '--kol-dd-max-rows': maxRows ?? 10,
+          /* xs rows are 20px; the panel's max-height reads the row height */
+          ...(resolvedSize === 'xs' && rowHeight == null ? { '--kol-dd-row-h': '20px' } : null),
           ...(rowHeight != null ? { '--kol-dd-row-h': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight } : null),
         }}
       >
@@ -201,11 +204,12 @@ const Dropdown = ({
                  * all — and this was the last one left, the option row's ink
                  * brighten. The check mark is what marks the current value. */
                 hover={false}
+                size={resolvedSize}
                 height={rowHeight}
                 onPointerEnter={onOptionHover ? () => reportHover(option.value) : undefined}
                 onPointerLeave={onOptionHover ? () => reportHover(null) : undefined}
                 onClick={() => handleSelect(option)}
-                shortcut={isActive ? <Icon name="check" size={11} /> : undefined}
+                shortcut={isActive ? <Icon name="check" size={resolvedSize === 'xs' ? indicatorSize('xs') : 11} /> : undefined}
               >
                 {option.label}
               </MenuDropdownItem>

package/src/molecules/MenuItem.jsx

@@ -99,7 +99,14 @@ export function MenuItem({
  *   - children  — main label, flex-1.
  *   - shortcut  — trailing content (text shortcut hint, ✓ marker, or icon).
  */
-export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
+/* the row follows the trigger's rung (DropdownXsList, kol-monitor 2026-09-01):
+ * at xs the list kept sm rows — kol-helper-12 in a 32px pitch — inside a panel
+ * fused to an 8px-type trigger, so the options truncated. One map, both ends. */
+/* xs wears the TRIGGER's face (kol-mono-8), not the helper: the trigger's ghost
+ * stack reserves the widest label in its own face, and a row set in a different
+ * one measured 3px wider and clipped the selected row beside its check. */
+const ROW_BY_SIZE = { xs: 'kol-mono-8 px-2 h-5', sm: 'kol-helper-12 px-3 h-8', md: 'kol-helper-12 px-3 h-8', lg: 'kol-helper-12 px-3 h-8' }
+export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', children }) {
   return (
     <button
       type="button"
@@ -110,7 +117,7 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
       disabled={disabled}
       role="menuitem"
       style={height != null ? { height } : undefined}
-      className={`w-full kol-helper-12 px-3 h-8 shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
+      className={`w-full ${ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
     >
       {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
       {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}

package/src/molecules/SearchInput.jsx

@@ -33,7 +33,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {Function} onClear      () => void — trailing × click; × renders only when set and value is non-empty
  * @param {string}   shortcutHint caller-authored kbd chip (e.g. "⌘K"); shown while the value is empty
  * @param {Function} onFocus      (event) => void — input focus
- * @param {string}   size         'sm' | 'md' — kol-control size + matched mono type class
+ * @param {string}   size         'xs' | 'sm' | 'md' — kol-control size + matched mono type class (xs = the panel rung, 2026-09-01)
  * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare/expanding)
  * @param {string}   tone         'default' | 'inverse' — the dark chip for a washed plane (ControlToneInverse, 2026-08-27); on the expanding pill it is the OPEN fill
  * @param {boolean}  bare         borderless inline field for overlay panels (full width, no shell chrome; keeps icon/clear/chip slots)
@@ -67,7 +67,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * The flat `{ sm: 14, md: 14 }` it used to carry was the ADJACENT sm rung
  * frozen for both sizes — right ladder, no size. */
-const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
+const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14' }
 
 export default function SearchInput({
   value = '',

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}