@kolkrabbi/kol-component 0.32.2 → 0.32.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.32.2",
+  "version": "0.32.4",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.12.1"
+    "@kolkrabbi/kol-icons": "^0.13.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Popover.jsx

@@ -67,7 +67,8 @@ export function usePopover({
   if (matchReferenceWidth) {
     middleware.push(
       sizeMw({
-        apply({ rects, elements }) {
+        padding: 8,
+        apply({ rects, elements, availableHeight }) {
           /* FLOOR again, not exact (2026-08-09 evening, user: "if you have
            * to truncate 'centered' then its too narrow" — overrides the
            * morning's exact-width reading of the one-piece ruling for the
@@ -81,8 +82,14 @@ export function usePopover({
            * row. Letting the panel size itself was the broken middle: an
            * abs-positioned float with auto width sizes against available
            * space, not content. Sole consumer is Dropdown. */
+          /* VIEWPORT CLAMP (2026-08-09, kol-ds-fxr lobby ticket): flip is
+           * off on Dropdown (fused edge), so a long list (the labs 30-item
+           * "Add FX…" picker) otherwise renders past the viewport bottom.
+           * Cap the panel to the space below the trigger; .kol-dd-list
+           * scrolls inside (panel is a flex column in kol-theme). */
           Object.assign(elements.floating.style, {
             width: `${rects.reference.width}px`,
+            maxHeight: `${Math.max(0, Math.floor(availableHeight))}px`,
           })
         },
       })

package/src/molecules/Dropdown.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
@@ -79,6 +79,16 @@ const Dropdown = ({
 
   const currentOption = options.find((opt) => opt.value === value) || options[0]
 
+  /* A clamped list (Popover caps the panel to the viewport) can open with the
+   * checked row past the fold — scroll it into reach. Keyboard focus after
+   * that scrolls natively; the list's children are the option buttons 1:1. */
+  const listRef = useRef(null)
+  useEffect(() => {
+    if (!isOpen) return
+    const idx = options.findIndex((opt) => opt.value === currentOption?.value)
+    listRef.current?.children[idx]?.scrollIntoView({ block: 'nearest' })
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const triggerCls = [
     'kol-btn',
     /* grey is dropdown-only chrome (2026-07-15) — no kol-btn-* class so it
@@ -125,7 +135,7 @@ const Dropdown = ({
       >
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 
-        <div className="kol-dd-list" role="listbox">
+        <div ref={listRef} className="kol-dd-list" role="listbox">
           {options.map((option) => {
             const isActive = option.value === currentOption?.value
             return (

package/src/molecules/FieldRow.jsx

@@ -52,15 +52,17 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
   const toneCls = activeOpt?.tone ? ` kol-status-chip--${activeOpt.tone}` : ''
   /* BUILT ON THE COVER-FOCUS SPECS (user ruling 2026-08-09: "same component
    * as cover focus"): the chip wears the Dropdown-sm trigger metrics — the
-   * kol-btn-sm box (py-1 px-3) and mono-12 type — as a pill with the tone
-   * tint. The caret is a direct child of the flex row, centred by
-   * items-center; it cannot sit off the label's middle. */
+   * kol-btn-sm box (py-1 px-3) and mono-12 type at its OWN 16px leading, so
+   * the pill stands the trigger's 24px (a leading-none had shrunk it to 20;
+   * user re-call same day: "like dropdown small in size"). The caret is a
+   * direct child of the flex row, centred by items-center; it cannot sit off
+   * the label's middle. */
   const chip = (interactive) => (
     <button
       type="button"
       disabled={!interactive || undefined}
       aria-expanded={interactive ? open : undefined}
-      className={`kol-status-chip${toneCls} kol-mono-12 inline-flex items-center gap-1 rounded-full border-0 px-2 py-1 leading-none${interactive ? ' cursor-pointer' : ''}`}
+      className={`kol-status-chip${toneCls} kol-mono-12 inline-flex items-center gap-1 rounded-full border-0 px-3 py-1${interactive ? ' cursor-pointer' : ''}`}
       onClick={interactive ? () => setOpen((o) => !o) : undefined}
     >
       {activeOpt?.label ?? value}