@kolkrabbi/kol-component 0.123.0 → 0.124.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.123.0",
+  "version": "0.124.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,20 @@ 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,
   defaultOpen = false,
   className = ''
 }) => {
@@ -108,7 +122,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 +153,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 +173,7 @@ 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}
                 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,7 +99,7 @@ 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, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
   return (
     <button
       type="button"
@@ -102,6 +107,7 @@ export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut
       onClick={onClick}
       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>}