@womp/kookie-ui 0.24.0 → 0.25.0

package/src/components/toolbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import classNames from 'classnames';
 import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
@@ -62,8 +63,6 @@ function useToolbarOverflow(): boolean {
   return React.useContext(InOverflowContext);
 }
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 // ============================================================================
 // Toolbar (root)
 // ============================================================================
@@ -246,6 +245,7 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
         iconOnly={iconOnly}
         disabled={off}
         color={color}
+        pressed={props['aria-pressed'] === undefined ? undefined : isPressed(props['aria-pressed'])}
       >
         {rest.children}
       </ToolbarOverflowItem>
@@ -315,6 +315,8 @@ interface ToolbarOverflowItemProps extends Omit<React.ComponentPropsWithoutRef<'
   iconOnly?: boolean;
   disabled?: boolean;
   color?: ButtonProps['color'];
+  /** A toggle's pressed state. A toggle becomes a checkbox item, so the menu still says whether it is on. */
+  pressed?: boolean;
 }
 
 /**
@@ -323,7 +325,7 @@ interface ToolbarOverflowItemProps extends Omit<React.ComponentPropsWithoutRef<'
  * words. What prices a box (size, variant, emphasis, iconOnly) does not come across.
  */
 const ToolbarOverflowItem = React.forwardRef<HTMLDivElement, ToolbarOverflowItemProps>(
-  ({ asChild, iconOnly, disabled, color, children, 'aria-label': label, ...props }, forwardedRef) => {
+  ({ asChild, iconOnly, disabled, color, pressed, children, 'aria-label': label, ...props }, forwardedRef) => {
     const words = iconOnly ? label : undefined;
     const itemProps = {
       ...props,
@@ -341,6 +343,14 @@ const ToolbarOverflowItem = React.forwardRef<HTMLDivElement, ToolbarOverflowItem
         </DropdownMenu.Item>
       );
     }
+    if (pressed !== undefined) {
+      return (
+        <DropdownMenu.CheckboxItem {...itemProps} ref={forwardedRef} checked={pressed}>
+          {children}
+          {words}
+        </DropdownMenu.CheckboxItem>
+      );
+    }
     return (
       <DropdownMenu.Item {...itemProps} ref={forwardedRef}>
         {children}
@@ -401,11 +411,11 @@ const ToolbarOverflow = React.forwardRef<HTMLDivElement, ToolbarOverflowProps>(
       setMeasuredCount(count);
       setShown(count);
     }
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
       widths.current = [];
     }, [count]);
 
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
       const root = rootRef.current;
       if (!root) return;
 
@@ -511,6 +521,8 @@ type SlotEntry = { id: string; node: React.ReactNode };
 const EMPTY_ENTRIES: readonly SlotEntry[] = [];
 const slotEntries = new Map<string, readonly SlotEntry[]>();
 const slotListeners = new Set<() => void>();
+/** How many ToolbarSlots of each name are mounted, to warn when one Fill would render twice. */
+const mountedSlots = new Map<string, number>();
 
 function subscribeSlots(listener: () => void) {
   slotListeners.add(listener);
@@ -537,7 +549,10 @@ function removeSlotEntry(name: string, id: string) {
 }
 
 interface ToolbarSlotProps {
-  /** Which `ToolbarFill` renders here. Use one name per slot. Defaults to `default`. */
+  /**
+   * Which `ToolbarFill` renders here. Defaults to `default`. Names are global to the page: mount one
+   * slot per name, or the fill renders in each of them (development builds warn).
+   */
   name?: string;
 }
 
@@ -549,6 +564,18 @@ interface ToolbarSlotProps {
  * the controls take the toolbar's size and join its arrow-key row. It adds no element.
  */
 function ToolbarSlot({ name = 'default' }: ToolbarSlotProps) {
+  useLayoutEffect(() => {
+    const count = (mountedSlots.get(name) ?? 0) + 1;
+    mountedSlots.set(name, count);
+    if (count > 1 && process.env.NODE_ENV !== 'production') {
+      console.warn(`[kookie-ui] ToolbarSlot: ${count} slots named "${name}" are mounted. Each renders the ToolbarFill's controls, so they appear more than once. Give each slot its own name.`);
+    }
+    return () => {
+      const left = (mountedSlots.get(name) ?? 1) - 1;
+      if (left > 0) mountedSlots.set(name, left);
+      else mountedSlots.delete(name);
+    };
+  }, [name]);
   const entries = React.useSyncExternalStore(
     subscribeSlots,
     () => slotEntries.get(name) ?? EMPTY_ENTRIES,
@@ -581,10 +608,10 @@ interface ToolbarFillProps {
  */
 function ToolbarFill({ name = 'default', children }: ToolbarFillProps) {
   const id = React.useId();
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     setSlotEntry(name, id, children);
   }, [name, id, children]);
-  useIsomorphicLayoutEffect(() => () => removeSlotEntry(name, id), [name, id]);
+  useLayoutEffect(() => () => removeSlotEntry(name, id), [name, id]);
   return null;
 }
 ToolbarFill.displayName = 'Toolbar.Fill';

package/src/components/tooltip.css

@@ -5,7 +5,7 @@
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
-  transform-origin: var(--radix-tooltip-content-transform-origin)
+  transform-origin: var(--radix-tooltip-content-transform-origin);
 }
 
 .kui-TooltipText {
@@ -17,3 +17,10 @@
 .kui-TooltipArrow {
   fill: var(--neutral-12);
 }
+
+/* High contrast mode replaces the background colour, so give the tooltip a real edge. */
+@media (forced-colors: active) {
+  .kui-TooltipContent {
+    border: 1px solid CanvasText;
+  }
+}

package/src/components/tooltip.tsx

@@ -10,6 +10,30 @@ import { tooltipPropDefs } from './tooltip.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
+/** The rest before a tooltip opens, in milliseconds. */
+const TOOLTIP_DELAY = 200;
+
+/** True inside a `TooltipProvider`, so a Tooltip knows it need not bring its own. */
+const TooltipProviderContext = React.createContext(false);
+
+interface TooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {}
+
+/**
+ * Groups the tooltips inside it: the first one waits `delayDuration` (200ms), and the next ones
+ * open at once while the pointer moves between them. Put it once near the root of the app.
+ * A Tooltip outside one still works, with the same delay, but each one waits on its own.
+ */
+function TooltipProvider({ delayDuration = TOOLTIP_DELAY, children, ...props }: TooltipProviderProps) {
+  return (
+    <TooltipProviderContext.Provider value={true}>
+      <TooltipPrimitive.Provider delayDuration={delayDuration} {...props}>
+        {children}
+      </TooltipPrimitive.Provider>
+    </TooltipProviderContext.Provider>
+  );
+}
+TooltipProvider.displayName = 'TooltipProvider';
+
 type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
 type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs>;
 interface TooltipProps
@@ -34,7 +58,8 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
     ...tooltipContentProps
   } = extractProps(props, tooltipPropDefs);
   const rootProps = { open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent };
-  return (
+  const hasProvider = React.useContext(TooltipProviderContext);
+  const tooltip = (
     <TooltipPrimitive.Root {...rootProps}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
@@ -56,8 +81,10 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
       </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   );
+  // Radix needs a provider above every tooltip. Outside a TooltipProvider, bring one.
+  return hasProvider ? tooltip : <TooltipPrimitive.Provider delayDuration={TOOLTIP_DELAY}>{tooltip}</TooltipPrimitive.Provider>;
 });
 Tooltip.displayName = 'Tooltip';
 
-export { Tooltip };
-export type { TooltipProps };
+export { Tooltip, TooltipProvider };
+export type { TooltipProps, TooltipProviderProps };

package/src/components/virtual-menu.css

@@ -47,3 +47,83 @@
   /* - cursor, user-select */
   /* - transition */
 }
+
+/*
+ * On its own (in a Popover, a panel), the list is not inside a menu surface, so it sets the
+ * menu row tokens itself at its `size`. The class is only added outside a menu.
+ */
+.kui-VirtualMenuRoot:where(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3, .kui-r-size-4) {
+  --base-menu-item-height: max(24px, calc(var(--base-menu-line-height) + 2 * var(--base-menu-item-padding-y)));
+  --base-menu-item-padding-x: calc(
+    var(--base-menu-item-px) + min(var(--radius-full, 0px), var(--base-menu-item-px-pill) - var(--base-menu-item-px))
+  );
+  --base-menu-item-padding-left: var(--base-menu-item-padding-x);
+  --base-menu-item-padding-right: var(--base-menu-item-padding-x);
+  --base-menu-content-padding: 0px;
+
+  & :where(.kui-BaseMenuItem[data-highlighted]) {
+    background-color: var(--accent-4);
+  }
+
+  @media (prefers-contrast: more) {
+    & :where(.kui-BaseMenuItem[data-highlighted]) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+    }
+  }
+
+  @media (forced-colors: active) {
+    & :where(.kui-BaseMenuItem[data-highlighted]) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-1) {
+  --base-menu-item-padding-y: var(--row-inset-1);
+  --base-menu-item-px: var(--control-px-1);
+  --base-menu-item-px-pill: var(--control-px-pill-1);
+  --base-menu-item-gap: var(--control-gap-1);
+  --base-menu-item-radius: var(--radius-row-1);
+  --base-menu-icon-size: var(--icon-size-1);
+  --base-menu-font-size: var(--font-size-1);
+  --base-menu-line-height: var(--line-height-1);
+  --base-menu-letter-spacing: var(--letter-spacing-1);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-2) {
+  --base-menu-item-padding-y: var(--row-inset-2);
+  --base-menu-item-px: var(--control-px-2);
+  --base-menu-item-px-pill: var(--control-px-pill-2);
+  --base-menu-item-gap: var(--control-gap-2);
+  --base-menu-item-radius: var(--radius-row-2);
+  --base-menu-icon-size: var(--icon-size-2);
+  --base-menu-font-size: var(--font-size-2);
+  --base-menu-line-height: var(--line-height-2);
+  --base-menu-letter-spacing: var(--letter-spacing-2);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-3) {
+  --base-menu-item-padding-y: var(--row-inset-3);
+  --base-menu-item-px: var(--control-px-3);
+  --base-menu-item-px-pill: var(--control-px-pill-3);
+  --base-menu-item-gap: var(--control-gap-3);
+  --base-menu-item-radius: var(--radius-row-3);
+  --base-menu-icon-size: var(--icon-size-3);
+  --base-menu-font-size: var(--font-size-3);
+  --base-menu-line-height: var(--line-height-3);
+  --base-menu-letter-spacing: var(--letter-spacing-3);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-4) {
+  --base-menu-item-padding-y: var(--row-inset-4);
+  --base-menu-item-px: var(--control-px-4);
+  --base-menu-item-px-pill: var(--control-px-pill-4);
+  --base-menu-item-gap: var(--control-gap-4);
+  --base-menu-item-radius: var(--radius-row-4);
+  --base-menu-icon-size: var(--icon-size-4);
+  --base-menu-font-size: var(--font-size-4);
+  --base-menu-line-height: var(--line-height-4);
+  --base-menu-letter-spacing: var(--letter-spacing-4);
+}

package/src/components/virtual-menu.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { useLayoutEffect } from 'radix-ui/internal';
 import { useMenuContext, useMenuClose, getMenuItemHeight } from './_internal/menu-context.js';
 
 import type { MenuSize } from './_internal/menu-context.js';
@@ -55,37 +56,58 @@ interface VirtualMenuRenderItemProps<T> {
   'data-highlighted': true | undefined;
   /** Data attribute for event delegation */
   'data-index': number;
+  /** Number of items in the whole list, since only some rows are mounted */
+  'aria-setsize': number;
+  /** Position of this row in the whole list, from 1 */
+  'aria-posinset': number;
   /** Mouse enter handler */
   onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
   /** Mouse leave handler */
-  onMouseLeave: () => void;
+  onMouseLeave: (e: React.MouseEvent<HTMLElement>) => void;
   /** Click handler */
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
   /** Keyboard handler for Enter/Space activation */
   onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
 }
 
-interface VirtualMenuProps<T> {
+/** How rows are drawn: one of `itemLabel` or `renderItem` is required. */
+type VirtualMenuRowProps<T> =
+  | {
+      /**
+       * Simple label accessor for basic text items.
+       * Can be a property key or a function.
+       * @example
+       * itemLabel="name"
+       * itemLabel={(item) => item.name}
+       */
+      itemLabel: keyof T | ((item: T) => React.ReactNode);
+      renderItem?: undefined;
+    }
+  | {
+      itemLabel?: undefined;
+      /**
+       * Custom component for rendering items.
+       * Must be memoized (React.memo) for optimal performance.
+       * @example
+       * const MyItem = React.memo(({ item, ...props }) => (
+       *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>
+       * ));
+       * <VirtualMenu items={items} renderItem={MyItem} />
+       */
+      renderItem: React.ComponentType<VirtualMenuRenderItemProps<T>>;
+    };
+
+/** Attributes of the list element that pass through, such as `id`, `aria-labelledby` or `data-*`. */
+type VirtualMenuDivProps = Omit<
+  React.ComponentPropsWithoutRef<'div'>,
+  'children' | 'onSelect' | 'role' | 'tabIndex' | 'aria-activedescendant'
+>;
+
+type VirtualMenuProps<T> = VirtualMenuDivProps & VirtualMenuRowProps<T> & VirtualMenuOwnProps<T>;
+
+interface VirtualMenuOwnProps<T> {
   /** Array of items to render */
   items: T[];
-  /**
-   * Simple label accessor for basic text items.
-   * Can be a property key or a function.
-   * @example
-   * itemLabel="name"
-   * itemLabel={(item) => item.name}
-   */
-  itemLabel?: keyof T | ((item: T) => React.ReactNode);
-  /**
-   * Custom component for rendering items.
-   * Must be memoized (React.memo) for optimal performance.
-   * @example
-   * const MyItem = React.memo(({ item, ...props }) => (
-   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>
-   * ));
-   * <VirtualMenu items={items} renderItem={MyItem} />
-   */
-  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;
   /**
    * Menu size - controls item height.
    * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.
@@ -104,18 +126,24 @@ interface VirtualMenuProps<T> {
   overscan?: number;
   /** Callback when an item is selected */
   onSelect?: (item: T, index: number) => void;
-  /** Additional class name */
-  className?: string;
-  /** Additional styles */
-  style?: React.CSSProperties;
-  /** Accessible label for the menu */
-  'aria-label'?: string;
 }
 
 // ============================================================================
 // Internal Memoized Item Component
 // ============================================================================
 
+/**
+ * Rows get a new style object every render, so style is compared by the two values the
+ * list sets. Every other prop is compared shallowly, so aria-*, data-* and handlers update.
+ */
+function areRowPropsEqual<P extends { style?: React.CSSProperties }>(prev: P, next: P) {
+  if (prev.style?.height !== next.style?.height) return false;
+  if (prev.style?.transform !== next.style?.transform) return false;
+  const prevKeys = Object.keys(prev) as (keyof P)[];
+  if (prevKeys.length !== Object.keys(next).length) return false;
+  return prevKeys.every((key) => key === 'style' || Object.is(prev[key], next[key]));
+}
+
 interface SimpleItemProps {
   label: React.ReactNode;
   isHighlighted: boolean;
@@ -124,8 +152,10 @@ interface SimpleItemProps {
   tabIndex: number;
   'data-highlighted': true | undefined;
   'data-index': number;
+  'aria-setsize': number;
+  'aria-posinset': number;
   onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
-  onMouseLeave: () => void;
+  onMouseLeave: (e: React.MouseEvent<HTMLElement>) => void;
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
 }
@@ -139,6 +169,8 @@ const SimpleItem = React.memo(
     tabIndex,
     'data-highlighted': dataHighlighted,
     'data-index': dataIndex,
+    'aria-setsize': setSize,
+    'aria-posinset': posInSet,
     onMouseEnter,
     onMouseLeave,
     onClick,
@@ -153,6 +185,8 @@ const SimpleItem = React.memo(
         tabIndex={tabIndex}
         data-highlighted={dataHighlighted}
         data-index={dataIndex}
+        aria-setsize={setSize}
+        aria-posinset={posInSet}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onClick={onClick}
@@ -162,17 +196,7 @@ const SimpleItem = React.memo(
       </div>
     );
   },
-  (prev, next) => {
-    // Custom comparison - only re-render if these change
-    if (prev.label !== next.label) return false;
-    if (prev['data-highlighted'] !== next['data-highlighted']) return false;
-    if (prev.style.height !== next.style.height) return false;
-    if (prev.style.transform !== next.style.transform) return false;
-    if (prev.tabIndex !== next.tabIndex) return false;
-    if (prev.id !== next.id) return false;
-    // Event handlers are stable, skip comparison
-    return true;
-  },
+  areRowPropsEqual,
 );
 
 // ============================================================================
@@ -189,7 +213,7 @@ function useMeasuredRowHeight(
   size: MenuSize | undefined,
 ) {
   const [height, setHeight] = React.useState<number | undefined>(undefined);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const root = rootRef.current;
     if (!enabled || !root) return;
     const probe = document.createElement('div');
@@ -216,7 +240,9 @@ function VirtualMenuRootInner<T>(
     onSelect,
     className,
     style,
-    'aria-label': ariaLabel,
+    onKeyDown,
+    onFocus,
+    ...rootProps
   }: VirtualMenuProps<T>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
@@ -287,7 +313,7 @@ function VirtualMenuRootInner<T>(
   const virtualItems = virtualizer.getVirtualItems();
 
   // Re-measure cached rows when the resolved row height changes.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     virtualizer.measure();
   }, [virtualizer, estimatedItemSize]);
 
@@ -307,6 +333,10 @@ function VirtualMenuRootInner<T>(
   }, [isInsideMenu]);
 
   // Refs for stable handler references
+  const onKeyDownRef = React.useRef(onKeyDown);
+  const onFocusRef = React.useRef(onFocus);
+  onKeyDownRef.current = onKeyDown;
+  onFocusRef.current = onFocus;
   const itemsRef = React.useRef(items);
   const onSelectRef = React.useRef(onSelect);
   const closeMenuRef = React.useRef(closeMenu);
@@ -341,7 +371,11 @@ function VirtualMenuRootInner<T>(
     if (index != null) selectIndex(Number(index));
   }, [selectIndex]);
 
-  const noop = React.useCallback(() => {}, []);
+  // Leaving a row clears its highlight, as a Radix item does on pointer leave.
+  const handleItemMouseLeave = React.useCallback((e: React.MouseEvent<HTMLElement>) => {
+    const index = Number(e.currentTarget.dataset.index);
+    setHighlightedIndex((current) => (current === index ? -1 : current));
+  }, []);
 
   // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)
   const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {
@@ -354,7 +388,9 @@ function VirtualMenuRootInner<T>(
   }, [selectIndex]);
 
   // Keyboard navigation
-  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDownRef.current?.(e);
+    if (e.defaultPrevented) return;
     const currentItems = itemsRef.current;
     const currentHighlightedIndex = highlightedIndexRef.current;
 
@@ -395,19 +431,27 @@ function VirtualMenuRootInner<T>(
         break;
       }
       case 'Tab': {
-        e.preventDefault();
+        // Inside a menu, Tab does not leave it. On its own, the list is one tab stop.
+        if (isInsideMenu) e.preventDefault();
         break;
       }
       case 'Escape': {
         // Inside a menu, the menu handles Escape and returns focus to its trigger.
-        if (!isInsideMenu) (e.currentTarget as HTMLElement).blur();
+        if (!isInsideMenu) e.currentTarget.blur();
         break;
       }
+      default: {
+        // The parent menu's typeahead would move focus off the list onto one of its items.
+        if (isInsideMenu && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+          e.stopPropagation();
+        }
+      }
     }
   }, [selectIndex, isInsideMenu]);
 
   // Keyboard focus on the list highlights the first row when none is highlighted.
   const handleFocus = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {
+    onFocusRef.current?.(e);
     if (e.target !== e.currentTarget) return;
     if (highlightedIndexRef.current < 0 && itemsRef.current.length > 0) setHighlightedIndex(0);
   }, []);
@@ -440,14 +484,19 @@ function VirtualMenuRootInner<T>(
 
   return (
     <div
+      {...rootProps}
       ref={setRootRef}
       role={isInsideMenu ? 'group' : 'menu'}
-      aria-label={ariaLabel}
       aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onFocus={handleFocus}
-      className={classNames('kui-VirtualMenuRoot', className)}
+      className={classNames(
+        'kui-VirtualMenuRoot',
+        // On its own, the list draws menu rows at its own size (virtual-menu.css).
+        !isInsideMenu && `kui-r-size-${sizeProp ?? '2'}`,
+        className,
+      )}
       style={rootStyle}
     >
       <div className="kui-VirtualMenuViewport" style={viewportStyle}>
@@ -465,11 +514,14 @@ function VirtualMenuRootInner<T>(
             id: getItemId(index),
             isHighlighted,
             style: itemStyle,
-            tabIndex: isHighlighted ? 0 : -1,
+            // The list holds focus and points aria-activedescendant at the row, so it is the only tab stop.
+            tabIndex: -1,
             'data-highlighted': isHighlighted ? true as const : undefined,
             'data-index': index,
+            'aria-setsize': items.length,
+            'aria-posinset': index + 1,
             onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: noop,
+            onMouseLeave: handleItemMouseLeave,
             onClick: handleItemClick,
             onKeyDown: handleItemKeyDown,
           };
@@ -533,19 +585,8 @@ const VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemPro
 
 VirtualMenuItemInner.displayName = 'VirtualMenu.Item';
 
-// Memoized with custom comparison
-const VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {
-  const prevStyle = prevProps.style as React.CSSProperties | undefined;
-  const nextStyle = nextProps.style as React.CSSProperties | undefined;
-  if (prevStyle?.height !== nextStyle?.height) return false;
-  if (prevStyle?.transform !== nextStyle?.transform) return false;
-  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;
-  if (prevProps.tabIndex !== nextProps.tabIndex) return false;
-  if (prevProps.id !== nextProps.id) return false;
-  if (prevProps.className !== nextProps.className) return false;
-  if (prevProps.children !== nextProps.children) return false;
-  return true;
-});
+// Style is compared by height and transform; every other prop shallowly.
+const VirtualMenuItem = React.memo(VirtualMenuItemInner, areRowPropsEqual);
 
 // ============================================================================
 // Exports

package/src/helpers/get-margin-styles.ts

@@ -7,21 +7,19 @@ import type { MarginProps } from '../props/margin.props.js';
 const marginValues = marginPropDefs.m.values;
 const marginValueSet: ReadonlySet<string> = new Set(marginValues);
 
-// Static table so the common case — a component with no margin props at all —
+// Built once from the prop defs, so the custom properties are the ones the
+// stylesheet reads. The common case, a component with no margin props at all,
 // is seven property reads and nothing else.
+const MARGIN_KEYS = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'] as const;
 const MARGIN_PROPS: ReadonlyArray<{
   key: keyof MarginProps;
   className: string;
   customProperties: `--${string}`[];
-}> = [
-  { key: 'm', className: 'kui-r-m', customProperties: ['--margin'] },
-  { key: 'mx', className: 'kui-r-mx', customProperties: ['--margin-left', '--margin-right'] },
-  { key: 'my', className: 'kui-r-my', customProperties: ['--margin-top', '--margin-bottom'] },
-  { key: 'mt', className: 'kui-r-mt', customProperties: ['--margin-top'] },
-  { key: 'mr', className: 'kui-r-mr', customProperties: ['--margin-right'] },
-  { key: 'mb', className: 'kui-r-mb', customProperties: ['--margin-bottom'] },
-  { key: 'ml', className: 'kui-r-ml', customProperties: ['--margin-left'] },
-];
+}> = MARGIN_KEYS.map((key) => ({
+  key,
+  className: marginPropDefs[key].className,
+  customProperties: [...marginPropDefs[key].customProperties] as `--${string}`[],
+}));
 
 export function getMarginStyles(props: MarginProps) {
   let classes: string[] | undefined;