@kolkrabbi/kol-component 0.35.0 → 0.36.0

package/package.json

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

@@ -9,6 +9,14 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *                                treatment (2026-07-08 chrome law: one
  *                                secondary, always subordinate to filled)
  *   variant="ghost"            — legacy alias, resolves to outline
+ *   variant="property"         — the Figma property field (PropertyField,
+ *                                2026-08-12): filled chrome, dim `affordance`
+ *                                (letter or icon node) at a 6px gap, the value
+ *                                HUGS its own length (mono ch-width — number-
+ *                                safe, no `size` attr), and `unit` renders
+ *                                IMMEDIATELY after the value (`0°`, `100%`).
+ *                                Shell fills its cell, content left-packed.
+ *                                Width tracks `value` — controlled usage only.
  *
  *   size="sm" / "md" (default) / "lg" — matched padding + type class
  *
@@ -47,6 +55,8 @@ export default function Input({
   prefix,
   suffix,
   slotLeft,
+  affordance,
+  unit,
   iconLeft,
   iconSize = null,
   placeholder,
@@ -66,7 +76,9 @@ export default function Input({
   const resolvedIconSize = iconSize ?? glyphSize(size)
 
   // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
-  const resolvedVariant = variant === 'ghost' ? 'outline' : variant
+  // property rides the filled chrome — it is a behaviour variant, not new paint.
+  const isProperty = variant === 'property'
+  const resolvedVariant = variant === 'ghost' ? 'outline' : isProperty ? 'filled' : variant
 
   const shellCls = [
     'kol-control',
@@ -74,9 +86,16 @@ export default function Input({
     `kol-control-${size}`,
     SIZE_TYPE[size],
     'cursor-text',
+    isProperty && 'w-full',
     className,
   ].filter(Boolean).join(' ')
 
+  /* Property width: the shell type is mono, so every glyph is exactly 1ch —
+   * `${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. */
+  const propertyLen = Math.max(String(value ?? placeholder ?? '').length, 1)
+
   /* Pin inner input height to the typography token's line-height. Without
    * this the `<input>` renders ~0.5px taller than the equivalent <button>
    * or <label> at the same kol-mono-N — Chromium computes input height
@@ -88,7 +107,7 @@ export default function Input({
   const inputCls = [
     'min-w-0 bg-transparent border-none outline-none text-auto',
     heightCls,
-    !fixedChars && 'flex-1',
+    !fixedChars && !isProperty && 'flex-1',
     /* Balance the dim prefix/suffix visual weight with extra inner padding
      * on the opposite side. Without this the bright value sits closer to
      * the affordance than to the empty edge, reads off-balance. */
@@ -115,6 +134,9 @@ export default function Input({
       {prefix !== undefined && (
         <span aria-hidden="true" className="text-meta pr-1 shrink-0">{prefix}</span>
       )}
+      {affordance !== undefined && (
+        <span aria-hidden="true" className="text-meta pr-1.5 shrink-0 inline-flex items-center">{affordance}</span>
+      )}
       {/* Controlled only when a `value` prop is passed — otherwise stay
         * uncontrolled so prop-less usages (search stubs, quick demos) type
         * normally instead of freezing on a value-without-onChange input.
@@ -129,8 +151,12 @@ export default function Input({
         spellCheck={false}
         size={fixedChars ? chars : undefined}
         className={inputCls}
+        style={isProperty ? { width: `calc(${propertyLen}ch + 2px)` } : undefined}
         {...inputProps}
       />
+      {unit !== undefined && (
+        <span aria-hidden="true" className="text-meta shrink-0">{unit}</span>
+      )}
       {suffix !== undefined && (
         <span aria-hidden="true" className="text-meta pl-1 shrink-0">{suffix}</span>
       )}

package/src/atoms/SegmentedToggle.jsx

@@ -23,9 +23,17 @@
  * the group on the active cell, ←/→ (or ↑/↓) move selection + focus.
  *
  * Props:
- *   value     — current option value
+ *   value     — current option value. `null`/`undefined` = STATELESS mode
+ *               (the segmented state law, 2026-08-12): role `group`, no
+ *               aria-checked, no selected styling — a pure one-shot ACTION
+ *               strip (canvas alignment, transform cluster); onChange is the
+ *               action dispatch.
  *   onChange  — handler (newValue) => void
  *   options   — [{ value, label, ariaLabel? }]
+ *   variant   — 'default' (shipped chrome: shared outer stroke + dividers,
+ *               filled active cell) | 'filled' (the state law's tiles: every
+ *               cell a surface-secondary tile with 1px transparent gaps, NO
+ *               outline shell; the inset ring marks ONLY the selected cell).
  *   size      — mirrors Button exactly: 'sm' (26px, mono-12, 4/12 pad) |
  *               'md' (default, 32px, mono-14, 6/16 pad) | 'lg' (40px,
  *               mono-16, 8/20 pad). Same cell padding + mono type as the
@@ -34,11 +42,13 @@
  *   ariaLabel — accessible name for the group
  *   className — additional classes on the outer shell
  */
-export default function SegmentedToggle({ value, onChange, options = [], size = 'md', ariaLabel, className = '' }) {
+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 stateless = value == null
   const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
 
   const handleKeyDown = (e) => {
+    if (stateless) return // plain button row — Tab moves focus, arrows do nothing
     const dir = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[e.key]
     if (!dir || !options.length) return
     e.preventDefault()
@@ -49,21 +59,21 @@ export default function SegmentedToggle({ value, onChange, options = [], size =
 
   return (
     <div
-      role="radiogroup"
+      role={stateless ? 'group' : 'radiogroup'}
       aria-label={ariaLabel}
       onKeyDown={handleKeyDown}
-      className={['kol-seg', size !== 'md' && `kol-seg--${size}`, className].filter(Boolean).join(' ')}
+      className={['kol-seg', variant === 'filled' && 'kol-seg--filled', size !== 'md' && `kol-seg--${size}`, className].filter(Boolean).join(' ')}
     >
       {options.map((opt, i) => {
-        const isActive = opt.value === value
+        const isActive = !stateless && opt.value === value
         return (
           <button
             key={opt.value}
             type="button"
-            role="radio"
-            aria-checked={isActive}
+            role={stateless ? undefined : 'radio'}
+            aria-checked={stateless ? undefined : isActive}
             aria-label={opt.ariaLabel}
-            tabIndex={i === focusIdx ? 0 : -1}
+            tabIndex={stateless ? 0 : (i === focusIdx ? 0 : -1)}
             onClick={() => onChange?.(opt.value)}
             className={['kol-seg-cell', cellType, isActive && 'is-active'].filter(Boolean).join(' ')}
           >