@kolkrabbi/kol-component 0.123.0 → 0.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.123.0",
+  "version": "0.125.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

@@ -47,6 +47,33 @@ const Dropdown = ({
   size,
   variant = 'primary',
   tone = 'default',
+  /* DropdownGhostWidthAndListHeight (kol-mirror 2026-08-28 — user, on the
+   * studio's 30-option Source picker in a ~300px shelf: "1 it's way too tall,
+   * 2 it's not fitting"):
+   *   `maxRows`   how many rows the panel shows before the list scrolls
+   *               (default 10). Popover's size middleware clamps the panel to
+   *               the VIEWPORT, which does nothing for a 30-row slab opened at
+   *               the top of a tall page — and its inline maxHeight cannot be
+   *               overridden from a consumer stylesheet, so the ceiling is ours.
+   *   `rowHeight` the row pitch (number = px, or any CSS length) for a chrome
+   *               whose own rows are shorter than the h-8 rung. Inline on the
+   *               row, because `h-8` is a utility and a rule cannot out-rank it.
+   * Both write variables on the panel that `.kol-dd-list` reads. */
+  maxRows = 10,
+  rowHeight,
+  /* `onOptionHover(value | null)` (DropdownOptionHoverPreview, kol-mirror
+   * 2026-08-28): the pointer entering a row reports its value, leaving reports
+   * `null` — so a picker over a VISUAL setting can preview the hovered option
+   * live and revert on leave. mirror's blend-mode picker applies the hovered
+   * mode to the composite: you scrub 16 modes against the actual image instead
+   * of committing to each one to look at it. The same case is every picker over
+   * easing curves, palettes, filters, fonts — the DS owns the panel, only the
+   * consumer knows what to preview, so this reports and nothing else.
+   *
+   * `null` fires ON CLOSE too, and that half is load-bearing: a panel dismissed
+   * while a row is hovered would otherwise leave the consumer previewing
+   * forever. It never fires while closed — a closed dropdown has no rows. */
+  onOptionHover,
   defaultOpen = false,
   className = ''
 }) => {
@@ -82,6 +109,21 @@ const Dropdown = ({
     setIsOpen(false)
   }
 
+  /* the hover report, and the close that ends it. `hovered` is a ref, not
+   * state — the preview is the consumer's business and re-rendering the panel
+   * on every row crossed would be a render per pointermove for nothing. */
+  const hovered = useRef(null)
+  const reportHover = (v) => {
+    if (hovered.current === v) return
+    hovered.current = v
+    onOptionHover?.(v)
+  }
+  useEffect(() => {
+    if (isOpen || hovered.current == null) return
+    hovered.current = null
+    onOptionHover?.(null)
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const currentOption = options.find((opt) => opt.value === value) || options[0]
 
   /* A clamped list (Popover caps the panel to the viewport) can open with the
@@ -108,7 +150,7 @@ const Dropdown = ({
   ].filter(Boolean).join(' ')
 
   return (
-    <div className={`relative inline-block align-middle ${className}`}>
+    <div className={`kol-dd-root relative inline-block align-middle ${className}`}>
       <button
         ref={popover.refs.setReference}
         {...popover.getReferenceProps()}
@@ -139,6 +181,10 @@ const Dropdown = ({
         panel={false}
         focus={false}
         className={`kol-dd-panel kol-dd-panel--${resolvedVariant} ${toneClass(tone)}`.trim()}
+        style={{
+          '--kol-dd-max-rows': maxRows ?? 10,
+          ...(rowHeight != null ? { '--kol-dd-row-h': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight } : null),
+        }}
       >
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 
@@ -155,6 +201,9 @@ const Dropdown = ({
                  * all — and this was the last one left, the option row's ink
                  * brighten. The check mark is what marks the current value. */
                 hover={false}
+                height={rowHeight}
+                onPointerEnter={onOptionHover ? () => reportHover(option.value) : undefined}
+                onPointerLeave={onOptionHover ? () => reportHover(null) : undefined}
                 onClick={() => handleSelect(option)}
                 shortcut={isActive ? <Icon name="check" size={11} /> : undefined}
               >

package/src/molecules/MenuItem.jsx

@@ -79,6 +79,11 @@ export function MenuItem({
 /**
  * MenuDropdownItem — action row inside a MenuItem's dropdown panel.
  *
+ * `height` (default none — the `h-8` rung) — an inline row height, for a panel
+ * in a chrome whose own rows are shorter (DropdownGhostWidthAndListHeight,
+ * kol-mirror 2026-08-28: its controls sit in 24px rows and the DS row was a
+ * third taller). Inline because `h-8` is a utility and a rule cannot out-rank it.
+ *
  * `hover` (default true) — `false` drops the ink brighten, for a panel ruled
  * to carry NO hover state at all (user 2026-08-28, on `Dropdown`: "delete any
  * hover state on dropdowns"). Scoped to the caller: a MenuItem's own menu keeps
@@ -94,14 +99,17 @@ export function MenuItem({
  *   - children  — main label, flex-1.
  *   - shortcut  — trailing content (text shortcut hint, ✓ marker, or icon).
  */
-export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut, hover = true, children }) {
+export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
   return (
     <button
       type="button"
       data-menu-item
       onClick={onClick}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
       disabled={disabled}
       role="menuitem"
+      style={height != null ? { height } : undefined}
       className={`w-full kol-helper-12 px-3 h-8 shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
     >
       {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}