@kolkrabbi/kol-component 0.159.0 → 0.161.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.159.0",
+  "version": "0.161.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/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/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/molecules/Dropdown.jsx

@@ -184,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),
         }}
       >
@@ -202,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

@@ -12,6 +12,15 @@
  *   at both ends, and `onChange` reports the option in the same event shape
  *   as the number path — `{ target: { value: option } }`.
  *
+ *   layout="inline" — `‹ value ›` on ONE line (StepperInlineVariant, kol-monitor
+ *   2026-09-02; the rack's Selector shape, the other half of its collapse onto
+ *   this): the chevrons flank the value as left/right hit targets, the value is
+ *   centred in a 3ch floor so the row does not jitter as it steps, and there is
+ *   NO `.kol-control` field chrome — it is inline text on the panel. Value
+ *   `text-fg-64`, chevrons `text-fg-40`, type from the size ladder; casing is the
+ *   caller's. Works for `options` and for the number range alike. Default
+ *   `stacked` is the field with the chevron stack, exactly as before.
+ *
  * 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
  * bump affordance, use `<Input type="number" />`.
@@ -28,6 +37,7 @@ export default function Stepper({
   max,
   step = 1,
   options,
+  layout = 'stacked',
   size = 'sm',
   className = '',
   style = {},
@@ -63,6 +73,23 @@ export default function Stepper({
     onChange?.(e)
   }
 
+  /* INLINE — ‹ value › with no field: the chevrons are the hit targets, the
+   * value is text on the panel. `min-w-[3ch]` holds the width across steps. */
+  if (layout === 'inline') {
+    const chev = CHEVRON_SIZE[size]
+    return (
+      <div className={`inline-flex items-center justify-center gap-0.5 select-none ${SIZE_TYPE[size]} ${className}`.trim()} style={style}>
+        <button type="button" onClick={handleDecrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Previous">
+          <Icon name="chevron-left" size={chev} />
+        </button>
+        <span className="min-w-[3ch] text-center text-fg-64" {...props}>{value ?? ''}</span>
+        <button type="button" onClick={handleIncrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Next">
+          <Icon name="chevron-right" size={chev} />
+        </button>
+      </div>
+    )
+  }
+
   const shellCls = [
     'kol-control',
     'kol-control--filled',