@kolkrabbi/kol-component 0.181.0 → 0.182.0

package/package.json

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

@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * SplitToolButton — single-trigger split tool button + variant menu (the
- * tool-palette idiom: Select · Text · [Shape ◢] · Pattern). A 28×28
+ * tool-palette idiom: Select · Text · [Shape ◢] · Pattern). A pinned-square
  * quiet/pressed trigger shows the current variant while the group is `active`
  * (else the `lastPicked` variant) plus a corner fold indicator; ONE click both
  * arms that variant (`onChange`) and opens the variant menu (floating-ui's own
@@ -14,9 +15,17 @@ import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
  * The trigger is a plain `kol-btn` element, not DS Button: Button doesn't
  * forward refs (the popover must anchor on the real button), can't host the
  * corner fold inside its own box, and `blurOnClick` must blur the button
- * itself. The class output — kol-btn kol-btn-ghost + kol-btn-quiet /
- * kol-btn-pressed — is exactly what `<Button variant="ghost" quiet pressed>`
- * emits, so the visual contract stays Button's.
+ * itself. The class output — kol-btn kol-btn-ghost kol-btn-icon kol-btn-{size}
+ * + kol-btn-quiet / kol-btn-pressed — is exactly what
+ * `<Button variant="ghost" quiet pressed iconOnly>` emits, so the box and the
+ * visual contract stay Button's.
+ *
+ * `size` was a raw px number (28) with a transcribed 14px glyph until 0.182.0:
+ * off the 22 · 26 · 32 · 40 ladder in a set whose whole point is that one row
+ * is one box, and the glyph pinned where the SOLO ladder should have decided
+ * it. kol-fxr's tool rail hand-rolls this trigger at 36/22 rather than
+ * importing it (design-editor-set-is-a-half-port, 2026-09-03) — 36 is not a
+ * rung either, and the DS answer to a bespoke 36 is `size="lg"`.
  *
  * For a text-trigger single-select use `Dropdown`; for the two-button
  * action-half + chevron-half split use `ShapeDropdown`.
@@ -27,7 +36,7 @@ import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
  * @param {Function} props.onChange - Fires with a variant id — on menu pick, and on trigger click while inactive (arming)
  * @param {string} props.lastPicked - Variant id the trigger shows while the group is inactive (default: variants[0])
  * @param {boolean} props.active - Whether this tool group is the active tool — lit trigger, `aria-pressed`
- * @param {number} props.size - Trigger box in px (default: 28)
+ * @param {'xs'|'sm'|'md'|'lg'} props.size - Trigger box on the pinned-square ladder — 22 · 26 · 32 · 40 (default: 'md'). The glyph follows the SOLO ladder; it is never set at the call site
  * @param {boolean} props.blurOnClick - Blur the trigger after click so a canvas can reclaim focus and refresh its cursor (default: false)
  * @param {string} props.aria-label - Trigger label fallback when no variant resolves
  * @param {string} props.className - Additional classes on the trigger
@@ -54,7 +63,7 @@ const SplitToolButton = ({
   onChange,
   lastPicked,
   active = false,
-  size = 28,
+  size = 'md',
   blurOnClick = false,
   className = '',
   'aria-label': ariaLabel,
@@ -91,13 +100,12 @@ const SplitToolButton = ({
         ref={popover.refs.setReference}
         {...popover.getReferenceProps({ onClick: handleTriggerClick })}
         type="button"
-        className={`relative kol-btn kol-btn-ghost ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
-        style={{ width: size, height: size, padding: 6 }}
+        className={`relative kol-btn kol-btn-ghost kol-btn-icon kol-btn-${size} ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
         aria-pressed={active}
         aria-label={label}
         title={title}
       >
-        {triggerVariant && <Icon name={triggerVariant.icon} size={14} />}
+        {triggerVariant && <Icon name={triggerVariant.icon} size={glyphSize(size, true)} />}
         <FoldIndicator />
       </button>
       {/* w-max — floats size to content, the menu-family law (2026-08-09). */}