@kolkrabbi/kol-component 0.192.0 → 0.193.0

package/package.json

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

@@ -77,6 +77,11 @@ const Dropdown = ({
    * while a row is hovered would otherwise leave the consumer previewing
    * forever. It never fires while closed — a closed dropdown has no rows. */
   onOptionHover,
+  /* OPTIONS may carry more than `{ value, label }`: `icon` puts a glyph in the
+   * row's line box (ADJACENT ladder — it sits beside a label), and `shortcut`
+   * prints on every row that is NOT the current one, the tick taking that slot
+   * when it is. Both were added for the tool-palette idiom and are general —
+   * a menu of tools and a menu of anything else want the same two columns. */
   /* ICON-ONLY TRIGGER — an icon name, or a pre-rendered node dropped in where
    * the glyph goes. The trigger becomes the pinned square (`kol-btn-icon`) at
    * the current size, with no label, no ghost widths and no caret; the panel
@@ -259,8 +264,25 @@ const Dropdown = ({
                 onPointerEnter={onOptionHover ? () => reportHover(option.value) : undefined}
                 onPointerLeave={onOptionHover ? () => reportHover(null) : undefined}
                 onClick={() => handleSelect(option)}
-                shortcut={isActive ? <Icon name="check" size={resolvedSize === 'xs' ? indicatorSize('xs') : 11} /> : undefined}
+                /* The active row's mark is the CHECK, always — it is what says
+                 * which value is current, and nothing may take that slot from
+                 * it. An option's own `shortcut` shows on the rows that are
+                 * not current, which is the tool-palette idiom: the keystroke
+                 * that would arm this variant, replaced by the tick once it
+                 * is armed (editor-set-is-behind-its-source, 2026-09-03). */
+                shortcut={
+                  isActive
+                    ? <Icon name="check" size={resolvedSize === 'xs' ? indicatorSize('xs') : 11} />
+                    : option.shortcut
+                }
               >
+                {/* an option's leading glyph — the ADJACENT ladder, because it
+                  * sits in a line box beside a label, never the solo rung */}
+                {option.icon && (
+                  <span className="shrink-0 inline-flex items-center" style={{ marginRight: 'var(--kol-spacing-2)' }}>
+                    <Icon name={option.icon} size={glyphSize(resolvedSize)} />
+                  </span>
+                )}
                 {option.label}
               </MenuDropdownItem>
             )

package/src/molecules/SplitToolButton.jsx

@@ -30,6 +30,22 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * For a text-trigger single-select use `Dropdown`; for the two-button
  * action-half + chevron-half split use `ShapeDropdown`.
  *
+ * WHY THIS IS STILL ITS OWN COMPONENT, after `Dropdown` grew the icon-only
+ * square trigger it was asked to (2026-09-03, `editor-set-is-behind-its-
+ * source`). The ticket's premise — *"it hand-rolls a `<button>` re-emitting
+ * Button's classes"* — is gone: since 0.182.0 this wears
+ * `kol-btn-icon kol-btn-{size}`, the same class output at the same rungs, so
+ * there is no second implementation of the box left to collapse. What remains
+ * is ONE behaviour Dropdown does not have and should not grow for one caller:
+ * a click on the trigger both ARMS the last-picked variant and opens the menu,
+ * so a tool is selected and re-pickable in one gesture. Dropdown is a
+ * controlled select — its trigger opens, it does not choose — and giving it an
+ * `onTriggerClick` seam to serve this would be a seam for exactly one consumer.
+ * Two components, one class output, one popover utility, one glyph ladder: the
+ * duplication the ticket named is closed, and the difference that is left is
+ * real. What DID move to Dropdown is the part that generalises — per-option
+ * `icon` and `shortcut` rows, which any menu wants.
+ *
  * @param {Object} props
  * @param {{id: string, label: string, icon: string, shortcut?: string}[]} props.variants - Variants: menu rows + trigger glyph
  * @param {string} props.value - Active variant id (controlled)