@kolkrabbi/kol-component 0.28.0 → 0.29.0

package/package.json

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

@@ -168,7 +168,9 @@ export default function FieldRow({
     ) : empty
   } else if (type === 'file') {
     control = value ? (
-      <Tag variant="secondary" size="sm" hash={false} onRemove={onChange ? () => onChange(null) : undefined}>
+      /* kol-tag--data: a filename renders VERBATIM — the chip uppercase is
+       * for label strings, and transforming data misquotes it (2026-08-09). */
+      <Tag variant="secondary" size="sm" hash={false} className="kol-tag--data" onRemove={onChange ? () => onChange(null) : undefined}>
         {value.name ?? value}
       </Tag>
     ) : empty

package/src/organisms/RecordManager.jsx

@@ -184,16 +184,16 @@ export default function RecordManager({
         render: (row) => {
           const i = rows.indexOf(row)
           return (
-            {/* REST-VISIBLE (2026-08-09 — "Im looking for this handle"): the
-              * reference draws the grip dim at rest; hover-only hid the whole
-              * reorder affordance. */}
+            /* REST-VISIBLE (2026-08-09 — "Im looking for this handle"): the
+             * reference draws the grip dim at rest; hover-only hid the whole
+             * reorder affordance. */
             <button
               type="button"
               aria-label={reorderLabel(i + 1)}
               className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis"
               onPointerDown={(e) => startDrag(e, i)}
             >
-              <Icon name="resize-grip" size={14} />
+              <Icon name="drag-handle" size={14} />
             </button>
           )
         },
@@ -235,15 +235,18 @@ export default function RecordManager({
       {hasToolbar && (
         <div className="flex items-center gap-1 pb-3">
           {onAdd && <Button variant="nav" size="md" iconOnly="plus" iconSize={14} onClick={onAdd} aria-label="Add" />}
-          {onSortToggle && <Button variant="nav" size="md" iconOnly="swap" iconSize={14} onClick={onSortToggle} aria-label="Sort" />}
-          {onFilterToggle && <Button variant="nav" size="md" iconOnly="filter" iconSize={14} onClick={onFilterToggle} aria-label="Filter" />}
+          {/* the reference cluster (user screenshots 2026-08-09): ↑↓ pair,
+            * ≡ lines, and search as an ICON that expands into the field
+            * (SearchInput's expanding mode) — not an always-open input. */}
+          {onSortToggle && <Button variant="nav" size="md" iconOnly="arrows-vertical" iconSize={14} onClick={onSortToggle} aria-label="Sort" />}
+          {onFilterToggle && <Button variant="nav" size="md" iconOnly="filter-lines" iconSize={14} onClick={onFilterToggle} aria-label="Filter" />}
           {onQueryChange && (
             <SearchInput
+              expanding
               value={query ?? ''}
               onChange={(e) => onQueryChange(e?.target ? e.target.value : e)}
               placeholder={searchPlaceholder}
               size="sm"
-              className="ml-2"
             />
           )}
           {/* trailing overflow — the reference toolbar's far-right … (surface