@kolkrabbi/kol-component 0.317.1 → 0.317.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.1",
+  "version": "0.317.2",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.53.1"
+    "@kolkrabbi/kol-icons": "^0.53.2"
   },
   "files": [
     "src",

package/src/molecules/TabsRow.jsx

@@ -266,7 +266,8 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
 }
 
 function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size }) {
-  /* `size="md"` (2026-10-29, the user's ref — Adobe's tab strip): the sans body face, a 20px glyph, a 48px row, 24 between tabs */
+  /* `size="md"` (2026-10-29, the user's ref — Adobe's tab strip): the sans body face at medium weight, a 20px glyph at a
+   * 2 stroke (`.kol-tab-md`, the theme), a 48px row, 24 between tabs — review 8: *"the problem … was thickness and stroke"* */
   const md = size === 'md'
   const listRef = useRef(null)
   const activeIdx = tabs.findIndex((t) => t.id === value)
@@ -301,7 +302,7 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size
               tabIndex={isActive || (activeIdx === -1 && i === 0) ? 0 : -1}
               onClick={() => onChange?.(t.id)}
               className={[
-                `group ${md ? 'kol-sans-body-02 gap-2.5' : 'kol-mono-12 gap-2'} flex items-center cursor-pointer border-b-2`,
+                `group ${md ? 'kol-tab-md kol-sans-body-02 font-medium gap-2.5' : 'kol-mono-12 gap-2'} flex items-center cursor-pointer border-b-2`,
                 isActive
                   ? 'text-emphasis border-fg'
                   : 'text-meta hover:text-emphasis border-transparent',

package/src/organisms/ColorPickerPopover.jsx

@@ -74,9 +74,8 @@ function ChannelStrip({ ch, hex, hsva, onHsva }) {
         onKeyDown={(e) => { const d = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 }[e.key]; if (d) { e.preventDefault(); set(value + d * (e.shiftKey ? 10 : 1)) } }}>
         <span className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ left: `${pct}%`, boxShadow: '0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.35)', background: hex.slice(0, 7) }} />
       </div>
-      <div className="w-14 shrink-0">
-        <Input size="sm" type="number" value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
-      </div>
+      {/* the box hugs three characters by the Input's own `chars` — a utility width is not guaranteed in every consumer (review 8, ref 81) */}
+      <Input size="sm" type="number" chars={3} value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
     </div>
   )
 }
@@ -212,7 +211,7 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
     return hsva && (
       <div className={`flex w-full flex-col gap-3 ${className}`.trim()}>
         <div className="flex items-center justify-between gap-3">
-          <span className="kol-sans-body-02 text-emphasis">{title ?? label}</span>
+          <span className="kol-eyebrow text-fg-80">{title ?? label}</span>
           {modes && <Dropdown variant="nav" size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
         </div>
         {hexField}