@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/dropdown-menu.css

@@ -98,9 +98,3 @@
   margin-inline-start: calc(-2px * var(--scale));
   margin-inline-end: 0;
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * DRILL-DOWN ANIMATIONS                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/

package/src/components/dropdown-menu.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
-import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
 import { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';
 import { useCallbackRef } from 'radix-ui/internal';
@@ -24,13 +22,18 @@ import {
   DrillDownRoot,
   SubContext,
   useCreateDrillDownStore,
-  useDrillDownDirection,
   useDrillDownStore,
   usePanelPosition,
   useStackEntry,
   useSubContext,
 } from './_internal/dropdown-menu-drill-down.js';
-import { MenuProvider } from './_internal/menu-context.js';
+import {
+  MenuCloseProvider,
+  MenuGroupLabelProvider,
+  MenuProvider,
+  useMenuGroupLabelId,
+  useMenuGroupLabelledBy,
+} from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
@@ -66,9 +69,13 @@ const DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => {
     [handleOpenChangeProp],
   );
 
+  const close = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+
   return (
     <DropdownMenuOpenContext.Provider value={open}>
-      <DropdownMenuPrimitive.Root {...props} onOpenChange={handleOpenChange} />
+      <MenuCloseProvider value={close}>
+        <DropdownMenuPrimitive.Root {...props} open={open} onOpenChange={handleOpenChange} />
+      </MenuCloseProvider>
     </DropdownMenuOpenContext.Provider>
   );
 };
@@ -231,11 +238,14 @@ type DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.La
 interface DropdownMenuLabelProps
   extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}
 const DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
-  ({ className, ...props }, forwardedRef) => {
-    if (!React.useContext(DrillDownLevelContext)) return null;
+  ({ className, id: idProp, ...props }, forwardedRef) => {
+    const isLevelVisible = React.useContext(DrillDownLevelContext);
+    const id = useMenuGroupLabelId(idProp, isLevelVisible);
+    if (!isLevelVisible) return null;
     return (
       <DropdownMenuPrimitive.Label
         {...props}
+        id={id}
         asChild={false}
         ref={forwardedRef}
         className={classNames('kui-BaseMenuLabel', 'kui-DropdownMenuLabel', className)}
@@ -281,14 +291,22 @@ type DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Gr
 interface DropdownMenuGroupProps
   extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}
 const DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Group
-      {...props}
-      asChild={false}
-      ref={forwardedRef}
-      className={classNames('kui-BaseMenuGroup', 'kui-DropdownMenuGroup', className)}
-    />
-  ),
+  ({ className, 'aria-labelledby': ariaLabelledBy, ...props }, forwardedRef) => {
+    const [labelledBy, setLabelId] = useMenuGroupLabelledBy(ariaLabelledBy);
+    // A drill-down level that is not on screen keeps its groups only to hold the open path.
+    const isLevelVisible = React.useContext(DrillDownLevelContext);
+    return (
+      <MenuGroupLabelProvider value={setLabelId}>
+        <DropdownMenuPrimitive.Group
+          {...(isLevelVisible ? { 'aria-labelledby': labelledBy } : { role: 'none' })}
+          {...props}
+          asChild={false}
+          ref={forwardedRef}
+          className={classNames('kui-BaseMenuGroup', 'kui-DropdownMenuGroup', className)}
+        />
+      </MenuGroupLabelProvider>
+    );
+  },
 );
 DropdownMenuGroup.displayName = 'DropdownMenu.Group';
 
@@ -298,14 +316,21 @@ interface DropdownMenuRadioGroupProps
 const DropdownMenuRadioGroup = React.forwardRef<
   DropdownMenuRadioGroupElement,
   DropdownMenuRadioGroupProps
->(({ className, ...props }, forwardedRef) => (
-  <DropdownMenuPrimitive.RadioGroup
-    {...props}
-    asChild={false}
-    ref={forwardedRef}
-    className={classNames('kui-BaseMenuRadioGroup', 'kui-DropdownMenuRadioGroup', className)}
-  />
-));
+>(({ className, 'aria-labelledby': ariaLabelledBy, ...props }, forwardedRef) => {
+  const [labelledBy, setLabelId] = useMenuGroupLabelledBy(ariaLabelledBy);
+  const isLevelVisible = React.useContext(DrillDownLevelContext);
+  return (
+    <MenuGroupLabelProvider value={setLabelId}>
+      <DropdownMenuPrimitive.RadioGroup
+        {...(isLevelVisible ? { 'aria-labelledby': labelledBy } : { role: 'none' })}
+        {...props}
+        asChild={false}
+        ref={forwardedRef}
+        className={classNames('kui-BaseMenuRadioGroup', 'kui-DropdownMenuRadioGroup', className)}
+      />
+    </MenuGroupLabelProvider>
+  );
+});
 DropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';
 
 type DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;
@@ -338,7 +363,7 @@ const DropdownMenuRadioItem = React.forwardRef<
         className,
       )}
     >
-      {children}
+      <Slot.Slottable>{children}</Slot.Slottable>
       <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
         <ThickDotIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -379,7 +404,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         className,
       )}
     >
-      {children}
+      <Slot.Slottable>{children}</Slot.Slottable>
       <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
         <ThickCheckIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -409,28 +434,44 @@ const DropdownMenuSub: React.FC<DropdownMenuSubProps> = ({
   const subContextValue = React.useMemo(() => ({ id, label }), [id, label]);
   const isOpenInDrillDown = usePanelPosition(drillDownStore, id) !== 'closed';
 
-  // Drill-down: `open` and `defaultOpen` drive the stack; the stack drives
-  // `onOpenChange`. A controlled `open` is applied when it changes.
+  const handleOpenChange = useCallbackRef(onOpenChange);
+  const isControlled = open !== undefined;
+
+  // Drill-down, controlled: navigating asks `onOpenChange` and leaves the stack to `open`.
+  React.useLayoutEffect(() => {
+    if (!drillDownStore || !isControlled) return;
+    drillDownStore.setController(id, handleOpenChange);
+    return () => drillDownStore.setController(id, null);
+  }, [drillDownStore, isControlled, id, handleOpenChange]);
+
   React.useLayoutEffect(() => {
     if (!drillDownStore || open === undefined) return;
-    if (open && !drillDownStore.isOpen(id)) drillDownStore.push(id, null);
-    else if (!open && drillDownStore.isOpen(id)) drillDownStore.close(id);
+    if (open && !drillDownStore.isOpen(id)) drillDownStore.open(id, drillDownStore.takePendingModality(id));
+    else if (!open && drillDownStore.isOpen(id)) drillDownStore.close(id, drillDownStore.takePendingModality(id));
   }, [drillDownStore, open, id]);
 
-  const defaultOpenRef = React.useRef(defaultOpen);
+  // A `defaultOpen` push on mount is the starting state, not a change to report.
+  const defaultOpenRef = React.useRef(open === undefined && Boolean(defaultOpen));
   React.useLayoutEffect(() => {
-    if (drillDownStore && defaultOpenRef.current && open === undefined) drillDownStore.push(id, null);
+    if (drillDownStore && defaultOpenRef.current) drillDownStore.open(id);
+    else defaultOpenRef.current = false;
     // Only on mount, like an uncontrolled default.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleOpenChange = useCallbackRef(onOpenChange);
+  // Uncontrolled, the stack drives `onOpenChange`. Controlled, it reports only a close
+  // the `open` prop did not ask for, such as a parent level closing.
   const wasOpenRef = React.useRef(isOpenInDrillDown);
   React.useEffect(() => {
     if (!drillDownStore || wasOpenRef.current === isOpenInDrillDown) return;
     wasOpenRef.current = isOpenInDrillDown;
+    if (isOpenInDrillDown && defaultOpenRef.current) {
+      defaultOpenRef.current = false;
+      return;
+    }
+    if (open !== undefined && open === isOpenInDrillDown) return;
     handleOpenChange(isOpenInDrillDown);
-  }, [drillDownStore, isOpenInDrillDown, handleOpenChange]);
+  }, [drillDownStore, isOpenInDrillDown, handleOpenChange, open]);
 
   // Radix Sub stays mounted in both behaviors so switching behavior does not
   // remount the subtree. It only renders context; in drill-down its trigger
@@ -480,8 +521,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     };
 
     return (
+      // The row navigates within the same menu, so it announces no popup.
       <DropdownMenuPrimitive.Item
-        aria-haspopup="menu"
         {...subTriggerProps}
         data-drill-down-trigger={subContext.id}
         data-drill-down-name={subTriggerProps.textValue}
@@ -734,7 +775,6 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
   ({ store, sub, ...props }, forwardedRef) => {
     const position = usePanelPosition(store, sub.id);
     const entry = useStackEntry(store, sub.id);
-    const direction = useDrillDownDirection(position === 'top' ? store : null);
 
     if (position === 'closed') return null;
 
@@ -760,7 +800,6 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
         ref={forwardedRef}
         data-drill-down-panel={sub.id}
         data-drill-down-active={isTop ? true : undefined}
-        data-animation-direction={isTop ? (direction ?? undefined) : undefined}
         className={classNames('kui-DropdownMenuDrillDownPanel', className)}
       >
         {isTop && (
@@ -769,7 +808,9 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
             <DropdownMenuPrimitive.Separator className="kui-BaseMenuSeparator kui-DropdownMenuSeparator" />
           </>
         )}
-        <DrillDownLevelContext.Provider value={isTop}>{children}</DrillDownLevelContext.Provider>
+        <MenuGroupLabelProvider value={null}>
+          <DrillDownLevelContext.Provider value={isTop}>{children}</DrillDownLevelContext.Provider>
+        </MenuGroupLabelProvider>
       </div>
     );
   },
@@ -805,7 +846,6 @@ export {
   DropdownMenuSubTrigger as SubTrigger,
   DropdownMenuSubContent as SubContent,
   DropdownMenuSeparator as Separator,
-  VirtualMenu as Virtual,
 };
 
 export type {

package/src/components/heading.props.tsx

@@ -14,7 +14,7 @@ const as = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const headingPropDefs = {
-  as: { type: 'enum', values: as, default: 'h1' },
+  as: { type: 'enum', values: as, default: 'h2' },
   ...asChildPropDef,
   size: {
     type: 'enum',

package/src/components/heading.tsx

@@ -7,11 +7,11 @@ import { extractProps } from '../helpers/extract-props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
-type HeadingElement = React.ElementRef<'h1'>;
+type HeadingElement = React.ElementRef<'h2'>;
 type HeadingOwnProps = GetPropDefTypes<typeof headingPropDefs>;
 interface CommonHeadingProps extends HeadingOwnProps {}
-type HeadingH1Props = { as?: 'h1' } & ComponentPropsWithout<'h1', RemovedProps>;
-type HeadingH2Props = { as: 'h2' } & ComponentPropsWithout<'h2', RemovedProps>;
+type HeadingH1Props = { as: 'h1' } & ComponentPropsWithout<'h1', RemovedProps>;
+type HeadingH2Props = { as?: 'h2' } & ComponentPropsWithout<'h2', RemovedProps>;
 type HeadingH3Props = { as: 'h3' } & ComponentPropsWithout<'h3', RemovedProps>;
 type HeadingH4Props = { as: 'h4' } & ComponentPropsWithout<'h4', RemovedProps>;
 type HeadingH5Props = { as: 'h5' } & ComponentPropsWithout<'h5', RemovedProps>;
@@ -27,7 +27,7 @@ const Heading = React.memo(
       children,
       className,
       asChild,
-      as: Tag = 'h1',
+      as: Tag = 'h2',
       color,
       ...headingProps
     } = extractProps(props, headingPropDefs);

package/src/components/icons.tsx

@@ -146,4 +146,14 @@ const FileTextIcon = React.forwardRef<IconElement, IconProps>((_props, _forwarde
 });
 FileTextIcon.displayName = 'FileTextIcon';
 
-export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon };
+/** The tick a button shows in place of its icon while `done`. Drawn on the 24 grid at the icon set's stroke. */
+const TickIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
+      <path d="M5 12.75L9.5 17.25L19 7.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+});
+TickIcon.displayName = 'TickIcon';
+
+export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon, TickIcon };

package/src/components/image.css

@@ -12,6 +12,11 @@
   background-color: var(--neutral-a3);
 }
 
+/* Native width and height attributes give the ratio; the height follows the width when it shrinks */
+:where(.kui-Image[width][height]) {
+  height: auto;
+}
+
 .kui-Image:where([data-status='loaded']) {
   background-color: transparent;
 }

package/src/components/image.tsx

@@ -16,21 +16,45 @@ type ImageElement = React.ElementRef<'img'>;
 type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs>;
 type ImageStatus = 'loading' | 'loaded' | 'error';
 
-interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'width' | 'height' | 'src' | 'alt'>, WidthProps, HeightProps, ImageOwnProps {
+interface ImageProps
+  extends ComponentPropsWithout<'img', RemovedProps | 'width' | 'height' | 'src' | 'alt'>,
+    Omit<WidthProps, 'width'>,
+    Omit<HeightProps, 'height'>,
+    ImageOwnProps {
   src: string;
   /** Required. Pass `""` for a decorative picture. */
   alt: string;
+  /**
+   * A number is the picture's intrinsic width in pixels, written as the `width` attribute, so the
+   * browser reserves its box before it loads. A string or responsive object sets the CSS width.
+   */
+  width?: WidthProps['width'] | number;
+  /** A number is the intrinsic height attribute; a string or responsive object sets the CSS height. */
+  height?: HeightProps['height'] | number;
 }
 
 /**
  * A plain `<img>` that loads lazily, fills its box by `fit` and takes the theme's corner.
  * One element and no wrapper: `width`, `height`, `className` and `style` all land on the
- * `<img>` itself.
+ * `<img>` itself. Numeric `width` and `height` are the native attributes, which reserve the box.
  *
  * Until it loads it rests on a quiet neutral fill, which is also what stays if it fails.
  */
 const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {
-  const { className, alt, radius, loading = 'lazy', decoding = 'async', onLoad, onError, ...imageProps } = extractProps(props, imagePropDefs, widthPropDefs, heightPropDefs);
+  // Numbers are the native attributes, which give the browser an aspect ratio before load.
+  const { width, height, ...layoutProps } = props;
+  const widthAttribute = typeof width === 'number' ? width : undefined;
+  const heightAttribute = typeof height === 'number' ? height : undefined;
+  const { className, alt, radius, loading = 'lazy', decoding = 'async', onLoad, onError, ...imageProps } = extractProps(
+    {
+      ...layoutProps,
+      width: typeof width === 'number' ? undefined : width,
+      height: typeof height === 'number' ? undefined : height,
+    },
+    imagePropDefs,
+    widthPropDefs,
+    heightPropDefs,
+  );
 
   const [status, setStatus] = React.useState<ImageStatus>('loading');
   const ref = React.useRef<HTMLImageElement>(null);
@@ -47,6 +71,8 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   return (
     <img
       {...imageProps}
+      width={widthAttribute}
+      height={heightAttribute}
       ref={setRefs}
       alt={alt}
       loading={loading}

package/src/components/index.tsx

@@ -55,13 +55,20 @@ export {
   ToolbarButton,
   ToolbarSeparator,
   ToolbarTitle,
+  ToolbarOverflow,
+  ToolbarSlot,
+  ToolbarFill,
+  useToolbarOverflow,
   type ToolbarProps,
   type ToolbarGroupProps,
   type ToolbarButtonProps,
   type ToolbarSeparatorProps,
   type ToolbarTitleProps,
+  type ToolbarOverflowProps,
+  type ToolbarSlotProps,
+  type ToolbarFillProps,
 } from './toolbar.js';
-export { Tooltip, type TooltipProps } from './tooltip.js';
+export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps } from './tooltip.js';
 export { VirtualMenu, type VirtualMenuProps, type VirtualMenuItemProps, type VirtualMenuRenderItemProps } from './virtual-menu.js';
 export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';
 export * as Sidebar from './sidebar.js';

package/src/components/kbd.css

@@ -22,11 +22,12 @@
   word-spacing: var(--raised-word-spacing);
   border-radius: var(--radius-control-2);
   
-  /* No size prop: the size-1 box */
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  padding: var(--space-2) var(--space-3);
+  /* No size prop: the key follows the text around it, a step smaller, in the size-1 box's
+     proportions. In 14px text that is the size-1 box (12px type, 4px by 8px padding). */
+  font-size: 0.85em;
+  line-height: calc(16 / 12);
+  letter-spacing: 0;
+  padding: calc(4em / 12) calc(8em / 12);
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;

package/src/components/link.css

@@ -81,11 +81,7 @@
   }
 }
 
-/* all focused states underline */
-
-.kui-Link:where(:focus-visible) {
-  text-decoration-line: none;
-}
+/* Focus keeps the link's own underline setting; the focus outline marks focus. */
 
 /* Enhancement – hide underline for when Link's only child is a Code where underline is hard to see */
 .kui-Link:where(:has(.kui-Code:not(.kui-variant-ghost):only-child)) {

package/src/components/message-scroller.tsx

@@ -24,7 +24,7 @@
  * The viewport is its own scroller. Kookie's `ScrollArea` is Radix's, and Radix cannot hand its
  * viewport element to another library, so the transcript scrolls natively with a thin scrollbar.
  *
- * Requires React 19, which the primitive needs.
+ * Requires React 19, which the primitive needs: it reads `ref` as a prop.
  */
 
 import * as React from 'react';
@@ -61,8 +61,8 @@ interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 /** Holds the scroll state. Everything else goes inside it. */
-const Root = React.forwardRef<HTMLDivElement, RootProps>(
-  ({ autoScroll = true, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollMargin, className, children, ...props }, forwardedRef) => (
+const Root = React.forwardRef<HTMLDivElement, RootProps>(({ autoScroll = true, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollMargin, className, children, ...props }, forwardedRef) => {
+  return (
     <Primitive.Provider
       autoScroll={autoScroll}
       defaultScrollPosition={defaultScrollPosition}
@@ -73,8 +73,8 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
         {children}
       </Primitive.Root>
     </Primitive.Provider>
-  ),
-);
+  );
+});
 Root.displayName = 'MessageScroller.Root';
 
 interface ViewportProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -97,13 +97,7 @@ const Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, '
   return (
     // The primitive names an unnamed viewport "Messages", in English. An empty name is skipped by
     // accessible-name computation, so a transcript is only named when the app names it.
-    <Primitive.Viewport
-      aria-label={label ?? ''}
-      {...props}
-      ref={ref}
-      data-fade={fade ? '' : undefined}
-      className={classNames('kui-MessageScrollerViewport', className)}
-    />
+    <Primitive.Viewport aria-label={label ?? ''} {...props} ref={ref} data-fade={fade ? '' : undefined} className={classNames('kui-MessageScrollerViewport', className)} />
   );
 });
 Viewport.displayName = 'MessageScroller.Viewport';
@@ -131,45 +125,62 @@ Item.displayName = 'MessageScroller.Item';
 
 type ButtonProps = Omit<KuiButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
-  /** Accessible name, in your words. Default "Jump to the latest". */
-  'aria-label'?: string;
-  /** `end` jumps to the latest message (default); `start` to the first. */
-  direction?: 'start' | 'end';
-  /** Scroll behaviour of the jump. Default `smooth`. */
-  behavior?: ScrollBehavior;
-};
+    /** Accessible name, in your words. Default "Jump to the latest". */
+    'aria-label'?: string;
+    /** `end` jumps to the latest message (default); `start` to the first. */
+    direction?: 'start' | 'end';
+    /** Scroll behaviour of the jump. Default `auto`, an instant jump with no long animation. */
+    behavior?: ScrollBehavior;
+  };
 
 /**
  * Jumps back to the latest message. It renders only while the reader is away from the end.
  * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ direction = 'end', behavior, className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
-    <Primitive.Button
-      direction={direction}
-      {...(behavior ? { behavior } : {})}
-      render={
-        <KuiButton
-          iconOnly
-          {...props}
-          ref={forwardedRef}
-          size={size}
-          {...(emphasis ? { emphasis } : { variant })}
-          color={color}
-          radius={radius}
-          aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
-          className={classNames('kui-MessageScrollerButton', className)}
-          data-direction={direction}
-        >
-          {children ?? (
-            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
-              <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          )}
-        </KuiButton>
-      }
-    />
-  ),
+  ({ direction = 'end', behavior = 'auto', className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, onClick, ...props }, forwardedRef) => {
+    const { scrollToEnd, scrollToStart } = useMessageScroller();
+
+    // The primitive blurs the button on click, which drops keyboard focus to the page. Kookie
+    // jumps itself and moves focus to the viewport instead, since the button hides at the end.
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      const viewport = event.currentTarget.closest('.kui-MessageScrollerRoot')?.querySelector<HTMLElement>('.kui-MessageScrollerViewport');
+      viewport?.focus({ preventScroll: true });
+      if (direction === 'start') scrollToStart({ behavior });
+      else scrollToEnd({ behavior });
+    };
+
+    return (
+      <Primitive.Button
+        direction={direction}
+        behavior={behavior}
+        onClick={handleClick}
+        render={
+          <KuiButton
+            iconOnly
+            {...props}
+            ref={forwardedRef}
+            size={size}
+            {...(emphasis ? { emphasis } : { variant })}
+            color={color}
+            radius={radius}
+            aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
+            className={classNames('kui-MessageScrollerButton', className)}
+            data-direction={direction}
+          >
+            {children ?? (
+              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
+                <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </KuiButton>
+        }
+      />
+    );
+  },
 );
 Button.displayName = 'MessageScroller.Button';
 

package/src/components/navbar.css

@@ -61,7 +61,15 @@
   min-width: 0;
 }
 
-/* Ensure Actions always stays in the right column */
+/* Each slot keeps its column, so Navigation stays centred with no Logo beside it */
+.kui-NavbarLogo {
+  grid-column: 1;
+}
+
+.kui-NavbarNavigation {
+  grid-column: 2;
+}
+
 .kui-NavbarActions {
   grid-column: 3;
 }