@kolkrabbi/kol-component 0.324.0 → 0.326.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.324.0",
+  "version": "0.326.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,9 +26,9 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-search": "^0.3.0",
     "@kolkrabbi/kol-growth": "^0.4.0",
-    "@kolkrabbi/kol-markdown": "^0.2.0"
+    "@kolkrabbi/kol-markdown": "^0.2.0",
+    "@kolkrabbi/kol-search": "^0.3.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",
@@ -39,7 +39,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.56.0"
+    "@kolkrabbi/kol-icons": "^0.56.1"
   },
   "files": [
     "src",

package/src/molecules/Dropdown.jsx

@@ -22,6 +22,8 @@ import { glyphSize, indicatorSize } from '../hooks/glyphLadders.js'
  *   tone="inverse"              — the dark chip (`fg-ab-24`) for a washed
  *                                 plane, the panel continuing it (ControlToneInverse,
  *                                 kol-website 2026-08-27); same prop on ViewToggle · Input
+ *   variant="raised"            — the menus' faint raised look (metric R3.4, 2026-10-31): trigger, open trigger and
+ *                                 panel all on oq-08 with the float shadow — one tone, nothing changes on open
  *   variant="outline"           — bordered trigger; open panel carries the
  *     same border, trigger's bottom edge acts as the divider
  *
@@ -222,7 +224,7 @@ const Dropdown = ({
     'kol-btn',
     /* grey is dropdown-only chrome (2026-07-15) — no kol-btn-* class so it
      * never leaks into Button's variant set */
-    resolvedVariant === 'grey' ? 'kol-dd-trigger--grey' : resolvedVariant && `kol-btn-${resolvedVariant}`,
+    resolvedVariant === 'grey' ? 'kol-dd-trigger--grey' : resolvedVariant === 'raised' ? 'kol-dd-trigger--raised' : resolvedVariant && `kol-btn-${resolvedVariant}`,
     `kol-btn-${resolvedSize}`,
     SIZE_TYPE[resolvedSize],
     'kol-dd-trigger',

package/src/molecules/Menu.jsx

@@ -76,7 +76,7 @@ function Rows({ items }) {
         <Rows items={it.items} />
       </MenuFlyout>
     ) : (
-      <MenuRow disabled={it.disabled} rowClass={cls} onClick={it.onClick} iconLeft={icon} shortcut={trailingOf(it)}>
+      <MenuRow href={it.href} disabled={it.disabled} rowClass={cls} onClick={it.onClick} iconLeft={icon} shortcut={trailingOf(it)}>
         {it.label}
       </MenuRow>
     )

package/src/molecules/MenuItem.jsx

@@ -134,15 +134,17 @@ const ROW_BY_SIZE = { xs: 'kol-mono-8 px-2 h-5', sm: 'kol-helper-12 px-2 h-8', m
 /* `flex`, not `inline-flex` (MenuDropdownItemBlockRow, kol-fxr 2026-10-13): as bare children of a
  * content-sized (`w-max`) panel, inline rows measured as ONE line — five starters ≈ 795px. A block
  * row still fills a fixed panel through `w-full` and lets a content-sized one hug its longest label. */
-export function MenuRow({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', rowClass, children }) {
+export function MenuRow({ href, onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', rowClass, children }) {
+  /* `href` makes the row a real link — cmd/ctrl-click and middle-click open a new tab (DocumentHeader, 2026-10-31);
+   * a plain click still runs `onClick` (the app's router), which may preventDefault */
+  const Row = href && !disabled ? 'a' : 'button'
   return (
-    <button
-      type="button"
+    <Row
+      {...(Row === 'a' ? { href, onClick: (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; onClick?.(e) } } : { type: 'button', onClick })}
       data-menu-item
-      onClick={onClick}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
-      disabled={disabled}
+      disabled={Row === 'button' ? disabled : undefined}
       role="menuitem"
       style={height != null ? { height } : undefined}
       className={`kol-menu-btn w-full ${rowClass ?? ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
@@ -155,7 +157,7 @@ export function MenuRow({ onClick, onPointerEnter, onPointerLeave, disabled, pre
         * zero layout shift (MenuItemDescenderClip, 2026-08-12). */}
       <span className="flex-1 truncate leading-normal">{children}</span>
       {shortcut && <span className="kol-helper-10 text-emphasis shrink-0 inline-flex items-center">{shortcut}</span>}
-    </button>
+    </Row>
   )
 }