@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/toolbar.tsx

@@ -1,17 +1,21 @@
 'use client';
 
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import classNames from 'classnames';
 import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
 import { toolbarRootPropDefs } from './toolbar.props.js';
 import { Button } from './button.js';
+import * as DropdownMenu from './dropdown-menu.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
+import { layoutPropDefs } from '../props/layout.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
 import type { ButtonProps } from './button.js';
+import type { LayoutProps } from '../props/layout.props.js';
 import type { TextProps } from './text.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -42,12 +46,21 @@ const ToolbarContext = React.createContext<ToolbarContextValue | null>(null);
 /** Set by a `ToolbarGroup`: its children rest quiet, and `disabled` turns them all off. */
 const ToolbarGroupContext = React.createContext<{ disabled: boolean } | null>(null);
 
-function useToolbarContext(consumer: string): ToolbarContextValue {
-  const context = React.useContext(ToolbarContext);
-  if (!context) {
-    throw new Error(`${consumer} must be rendered inside a Toolbar.`);
-  }
-  return context;
+/**
+ * True while a subtree is drawn into a `ToolbarOverflow`'s menu instead of into the row (v2
+ * `InOverflow`). The parts answer it themselves: a `ToolbarButton` renders a menu item, a
+ * `ToolbarGroup` a menu group, a `ToolbarSeparator` a menu separator.
+ */
+const InOverflowContext = React.createContext(false);
+
+/**
+ * True while this subtree is drawn into a `ToolbarOverflow`'s "More" menu instead of the row.
+ *
+ * The toolbar's own parts handle this already. Use it in your own component inside a
+ * `ToolbarOverflow` to render a different form in the menu.
+ */
+function useToolbarOverflow(): boolean {
+  return React.useContext(InOverflowContext);
 }
 
 // ============================================================================
@@ -58,7 +71,8 @@ type ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;
 
 interface ToolbarProps
   extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,
-    ToolbarOwnProps {
+    ToolbarOwnProps,
+    LayoutProps {
   /**
    * Gives every control a surface of its own, for a row that content passes behind, such as
    * `Shell.PaneHeader float`. Buttons rest `raised` instead of `soft`, and a group's well is
@@ -86,7 +100,8 @@ interface ToolbarProps
  * ```
  */
 const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {
-  // In a Shell pane's header or footer, a toolbar with no size rests one step above the Shell's.
+  // Inside a Shell (a pane's header or footer, or the content area), a toolbar with no size
+  // rests one step above the Shell's. A pane's scrolling list has no band.
   const band = usePaneBandSize();
   // Elsewhere it takes the nearest Theme's size.
   const size: ToolbarSize = useThemeSize(props.size ?? band ?? undefined, toolbarRootPropDefs.size);
@@ -94,6 +109,7 @@ const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwa
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     { ...props, size },
     toolbarRootPropDefs,
+    layoutPropDefs,
   );
 
   const context = React.useMemo(() => ({ size, orientation, backdrop }), [size, orientation, backdrop]);
@@ -125,15 +141,28 @@ interface ToolbarGroupProps extends ComponentPropsWithout<'div', RemovedProps> {
  * Controls that belong together, drawn as one quiet well that stands level with a button
  * beside it. Buttons inside it rest as `ghost` unless they state a `variant`.
  * To cluster controls without a well, use a `Flex`.
+ *
+ * In a `ToolbarOverflow`'s menu it is a menu group. Outside a `Toolbar` (rendered through a
+ * portal, for example) it still draws its well, as a horizontal group.
  */
 const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(
   ({ className, disabled = false, children, ...props }, forwardedRef) => {
-    const { orientation } = useToolbarContext('ToolbarGroup');
+    const toolbar = React.useContext(ToolbarContext);
+    const overflow = React.useContext(InOverflowContext);
     const group = React.useMemo(() => ({ disabled }), [disabled]);
+
+    if (overflow) {
+      return (
+        <DropdownMenu.Group {...props} ref={forwardedRef} className={className}>
+          <ToolbarGroupContext.Provider value={group}>{children}</ToolbarGroupContext.Provider>
+        </DropdownMenu.Group>
+      );
+    }
+
     return (
       <div
         role="group"
-        data-orientation={orientation}
+        data-orientation={toolbar?.orientation ?? 'horizontal'}
         data-disabled={disabled || undefined}
         {...props}
         ref={forwardedRef}
@@ -150,7 +179,7 @@ ToolbarGroup.displayName = 'Toolbar.Group';
 // ToolbarButton
 // ============================================================================
 
-type ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild' | 'variant' | 'emphasis'>;
+type ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'variant' | 'emphasis'>;
 
 /** A labelled button: takes every `Button` prop. */
 type ToolbarTextButtonProps = ToolbarButtonBaseProps &
@@ -172,29 +201,77 @@ function isPressed(value: React.AriaAttributes['aria-pressed']) {
   return value === true || value === 'true';
 }
 
+/** Does an `asChild` child render a native `<button>`? Only then is it a Radix Toolbar.Button. */
+function isButtonElement(children: React.ReactNode) {
+  return React.isValidElement(children) && children.type === 'button';
+}
+
 /**
  * A `Button` that joins the toolbar's keyboard navigation, so a row of them is one tab stop.
  *
  * Set `iconOnly` (with an `aria-label`) for a symbol-only control. Set `aria-pressed` for a
- * control that toggles; a pressed button wears Button's pressed look.
+ * control that toggles; a pressed button wears Button's pressed look. Set `asChild` to render
+ * your own element, such as a link: `<ToolbarButton asChild><a href="/docs">Docs</a></ToolbarButton>`.
+ * A link stays in the arrow-key row and gets no `type` attribute.
  *
  * It takes the toolbar's `size`, and rests as a gray `soft` button (`raised` in a toolbar with
- * `backdrop`, gray `ghost` inside a `ToolbarGroup`). A stated `size`, `variant` or `color` wins; a stated `variant` without a
- * `color` takes Button's own default colour. It throws outside a `Toolbar`.
+ * `backdrop`, gray `ghost` inside a `ToolbarGroup`). A stated `size`, `variant` or `color` wins; a
+ * stated `variant` without a `color` takes Button's own default colour.
+ *
+ * In a `ToolbarOverflow`'s menu it renders a menu item; an icon-only button uses its
+ * `aria-label` as the item's text. Outside a `Toolbar` (rendered through a React portal, for
+ * example) it renders a plain Button with the same rest look, as its own tab stop. Use
+ * `ToolbarSlot` and `ToolbarFill` for a control that should join the row's arrow keys.
  */
 const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, forwardedRef) => {
-  const toolbar = useToolbarContext('ToolbarButton');
+  const toolbar = React.useContext(ToolbarContext);
   const group = React.useContext(ToolbarGroupContext);
-  const { iconOnly, size, variant, emphasis, color, disabled, ...rest } = props;
+  const overflow = React.useContext(InOverflowContext);
+  const { iconOnly, size, variant, emphasis, color, disabled, asChild, onKeyDown, ...rest } = props;
+  const off = disabled || group?.disabled || undefined;
+
+  if (overflow) {
+    return (
+      <ToolbarOverflowItem
+        // Only what a menu row means comes across; Button's box props (size, loading,
+        // tooltip, fullWidth and the rest) would land on the DOM as unknown attributes.
+        id={rest.id}
+        className={rest.className}
+        style={rest.style}
+        onClick={rest.onClick as React.MouseEventHandler<HTMLDivElement> | undefined}
+        aria-label={rest['aria-label']}
+        ref={forwardedRef as unknown as React.Ref<HTMLDivElement>}
+        asChild={asChild}
+        iconOnly={iconOnly}
+        disabled={off}
+        color={color}
+        pressed={props['aria-pressed'] === undefined ? undefined : isPressed(props['aria-pressed'])}
+      >
+        {rest.children}
+      </ToolbarOverflowItem>
+    );
+  }
+
+  // In a vertical toolbar, Up and Down belong to the toolbar. A menu trigger rendering this
+  // hands its open-on-arrow handler in through `onKeyDown`; those two keys skip it (v2).
+  const handleKeyDown =
+    toolbar?.orientation === 'vertical' && onKeyDown
+      ? (event: React.KeyboardEvent<HTMLButtonElement>) => {
+          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') return;
+          onKeyDown(event);
+        }
+      : onKeyDown;
 
   const pressed = isPressed(props['aria-pressed']);
   const stateProps =
     'data-state' in props || props['aria-pressed'] === undefined ? {} : { 'data-state': pressed ? 'on' : 'off' };
 
   const shared = {
-    size: size ?? toolbar.size,
+    size: size ?? toolbar?.size,
     // A caller states the look by `variant` or the rank by `emphasis`, never both.
-    ...(emphasis !== undefined ? { emphasis } : { variant: variant ?? (group ? 'ghost' : toolbar.backdrop ? 'raised' : 'soft') }),
+    ...(emphasis !== undefined
+      ? { emphasis }
+      : { variant: variant ?? (group ? 'ghost' : toolbar?.backdrop ? 'raised' : 'soft') }),
     // The gray rest is a pair with the default variant: a caller who states a variant or an
     // emphasis gets Button's own colour for it unless they state a colour too.
     color: color ?? (variant || emphasis ? undefined : 'gray'),
@@ -202,16 +279,343 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
   } as const;
 
   // The text and icon-only branches share every prop but the name; one Button renders both.
-  const buttonProps = { ...rest, ...(iconOnly ? { iconOnly: true } : {}), ...shared } as ButtonProps;
+  const buttonProps = {
+    ...rest,
+    ...(iconOnly ? { iconOnly: true } : {}),
+    ...(asChild ? { asChild: true } : {}),
+    ...(handleKeyDown ? { onKeyDown: handleKeyDown } : {}),
+    ...shared,
+  } as ButtonProps;
+
+  // Outside a toolbar there is no row to join: a plain Button, not a throw.
+  if (!toolbar) {
+    return <Button {...buttonProps} ref={forwardedRef} disabled={off} />;
+  }
+
+  // A link (or any non-button child) joins the row as a Radix Toolbar.Link, which sets no
+  // `type`. Toolbar.Button would stamp `type="button"` on it.
+  if (asChild && !isButtonElement(rest.children)) {
+    return (
+      <ToolbarPrimitive.Link asChild ref={forwardedRef as unknown as React.Ref<HTMLAnchorElement>}>
+        <Button {...buttonProps} disabled={off} />
+      </ToolbarPrimitive.Link>
+    );
+  }
 
   return (
-    <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={disabled || group?.disabled || undefined}>
+    <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={off}>
       <Button {...buttonProps} />
     </ToolbarPrimitive.Button>
   );
 });
 ToolbarButton.displayName = 'Toolbar.Button';
 
+interface ToolbarOverflowItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect' | 'color'> {
+  asChild?: boolean;
+  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;
+}
+
+/**
+ * A ToolbarButton drawn into the overflow menu: the same element, as a menu item. An icon-only
+ * button's `aria-label` becomes the item's text beside its icon, since a menu row has room for
+ * words. What prices a box (size, variant, emphasis, iconOnly) does not come across.
+ */
+const ToolbarOverflowItem = React.forwardRef<HTMLDivElement, ToolbarOverflowItemProps>(
+  ({ asChild, iconOnly, disabled, color, pressed, children, 'aria-label': label, ...props }, forwardedRef) => {
+    const words = iconOnly ? label : undefined;
+    const itemProps = {
+      ...props,
+      ...(iconOnly ? {} : label ? { 'aria-label': label } : {}),
+      disabled,
+      ...(color ? { color: color as DropdownMenu.ItemProps['color'] } : {}),
+    };
+    if (asChild && React.isValidElement<{ children?: React.ReactNode }>(children)) {
+      const child = words
+        ? React.cloneElement(children, undefined, children.props.children, <span>{words}</span>)
+        : children;
+      return (
+        <DropdownMenu.Item {...itemProps} ref={forwardedRef} asChild>
+          {child}
+        </DropdownMenu.Item>
+      );
+    }
+    if (pressed !== undefined) {
+      return (
+        <DropdownMenu.CheckboxItem {...itemProps} ref={forwardedRef} checked={pressed}>
+          {children}
+          {words}
+        </DropdownMenu.CheckboxItem>
+      );
+    }
+    return (
+      <DropdownMenu.Item {...itemProps} ref={forwardedRef}>
+        {children}
+        {words}
+      </DropdownMenu.Item>
+    );
+  },
+);
+ToolbarOverflowItem.displayName = 'Toolbar.OverflowItem';
+
+// ============================================================================
+// ToolbarOverflow
+// ============================================================================
+
+interface ToolbarOverflowProps extends ComponentPropsWithout<'div', RemovedProps> {
+  /** The accessible name of the "More" button. Defaults to `More`. */
+  label?: string;
+  /** The controls in the cluster, in order. The ones that don't fit move into the "More" menu. */
+  children?: React.ReactNode;
+}
+
+/** Three filled dots for the "More" button. Internal, so the library carries no icon set. */
+function MoreIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" aria-hidden xmlns="http://www.w3.org/2000/svg">
+      <circle cx="3.25" cy="8" r="1.25" />
+      <circle cx="8" cy="8" r="1.25" />
+      <circle cx="12.75" cy="8" r="1.25" />
+    </svg>
+  );
+}
+
+/**
+ * A cluster of controls that collapses into a "More" menu when the row runs out of room.
+ *
+ * It takes the room the row leaves, and when its controls don't fit, they move into the menu
+ * from the end of the cluster. A `ToolbarButton` shows as a menu item there, and a
+ * `ToolbarGroup` as a menu group. Use `useToolbarOverflow()` in your own components to render a
+ * different form in the menu.
+ *
+ * It measures on mount and on resize (v2 ToolbarOverflow): each control's width is cached while
+ * it is in the row, since a hidden control has no width to measure.
+ */
+const ToolbarOverflow = React.forwardRef<HTMLDivElement, ToolbarOverflowProps>(
+  ({ label = 'More', className, children, ...props }, forwardedRef) => {
+    const items = React.Children.toArray(children);
+    const count = items.length;
+
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const widths = React.useRef<number[]>([]);
+    const triggerWidth = React.useRef(0);
+    const [shown, setShown] = React.useState(count);
+    const [tick, setTick] = React.useState(0);
+
+    // A different set of children is a different set of widths: show them all and measure again.
+    const [measuredCount, setMeasuredCount] = React.useState(count);
+    if (measuredCount !== count) {
+      setMeasuredCount(count);
+      setShown(count);
+    }
+    useLayoutEffect(() => {
+      widths.current = [];
+    }, [count]);
+
+    useLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root) return;
+
+      // The root's children are one seat per visible child, then the trigger.
+      const kids = Array.from(root.children) as HTMLElement[];
+      const visible = Math.min(shown, count);
+      for (let i = 0; i < visible; i++) {
+        const el = kids[i];
+        if (el) widths.current[i] = el.offsetWidth;
+      }
+      const trigger = kids[visible];
+      if (trigger) triggerWidth.current = trigger.offsetWidth;
+
+      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+      const available = root.clientWidth;
+
+      let total = 0;
+      let counted = 0;
+      for (let i = 0; i < count; i++) {
+        const width = widths.current[i];
+        // Never seen in the row, so there is nothing to decide with yet.
+        if (width === undefined) return;
+        // An empty seat leaves the layout, so it spends no gap.
+        if (width === 0) continue;
+        total += width + (counted > 0 ? gap : 0);
+        counted += 1;
+      }
+
+      let next = count;
+      if (total > available) {
+        // Before the trigger exists, the row's height stands in for its width: an icon-only
+        // button is square. The next pass, before paint, corrects it.
+        const budget = available - (triggerWidth.current || root.clientHeight) - gap;
+        let used = 0;
+        let drawn = 0;
+        next = 0;
+        for (let i = 0; i < count; i++) {
+          const own = widths.current[i]!;
+          if (own > 0) {
+            const width = own + (drawn > 0 ? gap : 0);
+            if (used + width > budget) break;
+            used += width;
+            drawn += 1;
+          }
+          next += 1;
+        }
+      }
+      if (next !== shown) setShown(next);
+    }, [shown, count, tick]);
+
+    // Watch the row and every seat in it: a control whose content changes (a page's actions
+    // arriving after navigation) changes its width without the row's width changing.
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (!root || typeof ResizeObserver === 'undefined') return;
+      const observer = new ResizeObserver(() => setTick((n) => n + 1));
+      observer.observe(root);
+      for (const seat of Array.from(root.children)) observer.observe(seat);
+      return () => observer.disconnect();
+    }, [shown, count]);
+
+    const attach = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        rootRef.current = node;
+        if (typeof forwardedRef === 'function') forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef],
+    );
+
+    return (
+      <div {...props} ref={attach} className={classNames('kui-ToolbarOverflow', className)}>
+        {items.slice(0, shown).map((item, i) => (
+          // The seat is a position in the row, so its key is the index.
+          <div key={i} className="kui-ToolbarOverflowSeat">
+            {item}
+          </div>
+        ))}
+        {shown < count ? (
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <ToolbarButton iconOnly aria-label={label}>
+                <MoreIcon />
+              </ToolbarButton>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+              <InOverflowContext.Provider value>{items.slice(shown)}</InOverflowContext.Provider>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        ) : null}
+      </div>
+    );
+  },
+);
+ToolbarOverflow.displayName = 'Toolbar.Overflow';
+
+// ============================================================================
+// ToolbarSlot and ToolbarFill
+// ============================================================================
+
+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);
+  return () => {
+    slotListeners.delete(listener);
+  };
+}
+
+function setSlotEntry(name: string, id: string, node: React.ReactNode) {
+  const list = slotEntries.get(name) ?? EMPTY_ENTRIES;
+  const index = list.findIndex((entry) => entry.id === id);
+  const next = index === -1 ? [...list, { id, node }] : list.map((entry) => (entry.id === id ? { id, node } : entry));
+  slotEntries.set(name, next);
+  slotListeners.forEach((listener) => listener());
+}
+
+function removeSlotEntry(name: string, id: string) {
+  const list = slotEntries.get(name);
+  if (!list) return;
+  const next = list.filter((entry) => entry.id !== id);
+  if (next.length === 0) slotEntries.delete(name);
+  else slotEntries.set(name, next);
+  slotListeners.forEach((listener) => listener());
+}
+
+interface ToolbarSlotProps {
+  /**
+   * 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;
+}
+
+/**
+ * A place in a toolbar that content elsewhere in the app fills, such as a page adding its own
+ * actions to a header toolbar the layout owns.
+ *
+ * It renders whatever the `ToolbarFill` with the same `name` holds, as if it were written here:
+ * 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,
+    () => EMPTY_ENTRIES,
+  );
+  return (
+    <>
+      {entries.map((entry) => (
+        <React.Fragment key={entry.id}>{entry.node}</React.Fragment>
+      ))}
+    </>
+  );
+}
+ToolbarSlot.displayName = 'Toolbar.Slot';
+
+interface ToolbarFillProps {
+  /** The `ToolbarSlot` to render into. Defaults to `default`. */
+  name?: string;
+  /** The controls to show in the slot, such as `ToolbarButton`s. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Sends its children to the `ToolbarSlot` with the same `name`, and renders nothing where it
+ * is written. Use it instead of a React portal: a portal keeps the page's React tree, so a
+ * ToolbarButton in it can't join the toolbar's arrow keys.
+ *
+ * The children render inside the toolbar, so they read the toolbar's context, not the page's.
+ * They appear after the page mounts on the client, not in server-rendered HTML.
+ */
+function ToolbarFill({ name = 'default', children }: ToolbarFillProps) {
+  const id = React.useId();
+  useLayoutEffect(() => {
+    setSlotEntry(name, id, children);
+  }, [name, id, children]);
+  useLayoutEffect(() => () => removeSlotEntry(name, id), [name, id]);
+  return null;
+}
+ToolbarFill.displayName = 'Toolbar.Fill';
+
 // ============================================================================
 // ToolbarSeparator
 // ============================================================================
@@ -220,11 +624,25 @@ type ToolbarSeparatorProps = ComponentPropsWithout<typeof ToolbarPrimitive.Separ
 
 /**
  * A gray hairline between two clusters, announced as a separator. Its direction is always
- * opposite to the toolbar's.
+ * opposite to the toolbar's. In a `ToolbarOverflow`'s menu it is a menu separator.
  */
 const ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
   ({ className, ...props }, forwardedRef) => {
-    useToolbarContext('ToolbarSeparator');
+    const toolbar = React.useContext(ToolbarContext);
+    const overflow = React.useContext(InOverflowContext);
+    if (overflow) return <DropdownMenu.Separator {...props} ref={forwardedRef} className={className} />;
+    if (!toolbar) {
+      return (
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          data-orientation="vertical"
+          {...props}
+          ref={forwardedRef}
+          className={classNames('kui-ToolbarSeparator', className)}
+        />
+      );
+    }
     return (
       <ToolbarPrimitive.Separator
         {...props}
@@ -259,7 +677,9 @@ interface ToolbarTitleProps {
  */
 const ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(
   ({ className, children, style, id }, forwardedRef) => {
-    const { size } = useToolbarContext('ToolbarTitle');
+    const toolbar = React.useContext(ToolbarContext);
+    const themeSize = useThemeSize<ToolbarSize>(undefined, toolbarRootPropDefs.size);
+    const size = toolbar?.size ?? themeSize;
     if (children === undefined || children === null || children === false) return null;
     return (
       <Text
@@ -289,6 +709,9 @@ const Toolbar = Object.assign(ToolbarRoot, {
   Button: ToolbarButton,
   Separator: ToolbarSeparator,
   Title: ToolbarTitle,
+  Overflow: ToolbarOverflow,
+  Slot: ToolbarSlot,
+  Fill: ToolbarFill,
 });
 
 export {
@@ -297,11 +720,18 @@ export {
   ToolbarButton,
   ToolbarSeparator,
   ToolbarTitle,
+  ToolbarOverflow,
+  ToolbarSlot,
+  ToolbarFill,
+  useToolbarOverflow,
   ToolbarRoot as Root,
   ToolbarGroup as Group,
   ToolbarButton as Button,
   ToolbarSeparator as Separator,
   ToolbarTitle as Title,
+  ToolbarOverflow as Overflow,
+  ToolbarSlot as Slot,
+  ToolbarFill as Fill,
 };
 export type {
   ToolbarProps,
@@ -309,9 +739,15 @@ export type {
   ToolbarButtonProps,
   ToolbarSeparatorProps,
   ToolbarTitleProps,
+  ToolbarOverflowProps,
+  ToolbarSlotProps,
+  ToolbarFillProps,
   ToolbarProps as RootProps,
   ToolbarGroupProps as GroupProps,
   ToolbarButtonProps as ButtonProps,
   ToolbarSeparatorProps as SeparatorProps,
   ToolbarTitleProps as TitleProps,
+  ToolbarOverflowProps as OverflowProps,
+  ToolbarSlotProps as SlotProps,
+  ToolbarFillProps as FillProps,
 };

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;
+  }
+}