@adecore/ui 0.33.3 → 0.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.33.3",
+  "version": "0.34.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Banner.tsx

@@ -13,13 +13,20 @@ const TONE: Record<BannerTone, string> = {
     neutral: 'text-text-muted'
 };
 
+const OVERLAY = 'absolute inset-x-0 top-3 z-20';
+
 export interface BannerProps {
     icon: LucideIcon;
     tone: BannerTone;
     message: ReactNode;
     /* The buttons that answer the line. */
     children?: ReactNode;
-    /* Where the strip stands; by default centered along the top of the positioned parent. */
+    /*
+     * `overlay` floats the glass strip centered along the top of the positioned parent; `inline` stands
+     * in the flow and fills its row. Under `overlay` a `className` replaces the overlay position instead
+     * of adding to it, so its utilities never meet the component's own.
+     */
+    placement?: 'overlay' | 'inline';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
@@ -28,16 +35,33 @@ export interface BannerProps {
  * The strip over a view: one line and the buttons that answer it. It is where anything that waits
  * for a person goes (a conflict, a failure, a request), because a corner toast is read after the fact
  * and a decision has to be where the eyes already are. One at a time: the slot is one row and the
- * caller picks what stands in it.
+ * caller picks what stands in it. Inline, it is a notice that belongs to the page it stands in.
  */
-export function Banner({ icon, tone, message, children, className = 'absolute inset-x-0 top-3 z-20', ref }: BannerProps) {
+export function Banner({ icon, tone, message, children, placement = 'overlay', className, ref }: BannerProps) {
+    const line = (
+        <>
+            <Icon icon={icon} size={16} className={clsx('shrink-0', TONE[tone])} />
+            <span className="grow">{message}</span>
+            {children}
+        </>
+    );
+
+    if (placement === 'inline') {
+        return (
+            <div
+                ref={ref}
+                className={clsx('flex items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2 text-sm text-text', className)}
+                role="status"
+                aria-live="polite"
+            >
+                {line}
+            </div>
+        );
+    }
+
     return (
-        <div ref={ref} className={clsx('pointer-events-auto flex justify-center px-4', className)} role="status" aria-live="polite">
-            <Surface className="flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text">
-                <Icon icon={icon} size={16} className={clsx('shrink-0', TONE[tone])} />
-                <span className="grow">{message}</span>
-                {children}
-            </Surface>
+        <div ref={ref} className={clsx('pointer-events-auto flex justify-center px-4', className ?? OVERLAY)} role="status" aria-live="polite">
+            <Surface className="flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text">{line}</Surface>
         </div>
     );
 }

package/src/CopyButton.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Copy } from 'lucide-react';
+import { Button, type ButtonSize, type ButtonVariant } from './Button.tsx';
+import { copyText } from './clipboard.ts';
+import { Icon } from './Icon.tsx';
+import { IconButton, type IconButtonSize } from './IconButton.tsx';
+import type { TooltipSide } from './Tooltip.tsx';
+
+const COPIED_MS = 1500;
+
+interface CopyButtonBase {
+    text: string;
+    /* The accessible name and the tooltip of the icon, or the word on the button with `showLabel`. */
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+interface CopyIconButtonProps extends CopyButtonBase {
+    showLabel?: false;
+    size?: IconButtonSize;
+    tooltipSide?: TooltipSide;
+}
+
+interface CopyLabelButtonProps extends CopyButtonBase {
+    showLabel: true;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}
+
+export type CopyButtonProps = CopyIconButtonProps | CopyLabelButtonProps;
+
+/* A button that puts text on the clipboard and shows a check and "Copied" for a moment once it got there. */
+export function CopyButton(props: CopyButtonProps) {
+    const { text, label, disabled, className, ref } = props;
+    const { t } = useTranslation('ui');
+    const [copiedAt, setCopiedAt] = useState<number | null>(null);
+
+    useEffect(() => {
+        if (copiedAt === null) {
+            return;
+        }
+        const timer = window.setTimeout(() => setCopiedAt(null), COPIED_MS);
+        return () => window.clearTimeout(timer);
+    }, [copiedAt]);
+
+    const copied = copiedAt !== null;
+    const name = label ?? t('action.copy');
+    const copy = async (): Promise<void> => {
+        // A refusal goes unconfirmed and unreported: a person can do nothing about it (`clipboard.ts`).
+        if (await copyText(text)) {
+            setCopiedAt(Date.now());
+        }
+    };
+
+    const button = props.showLabel ? (
+        <Button ref={ref} variant={props.variant} size={props.size} disabled={disabled} className={className} onClick={() => void copy()}>
+            <Icon icon={copied ? Check : Copy} size={props.size === 'xs' ? 12 : 14} />
+            {copied ? t('action.copied') : name}
+        </Button>
+    ) : (
+        <IconButton
+            ref={ref}
+            icon={copied ? Check : Copy}
+            label={name}
+            tooltip={copied ? t('action.copied') : name}
+            tooltipSide={props.tooltipSide}
+            size={props.size}
+            disabled={disabled}
+            className={className}
+            onClick={() => void copy()}
+        />
+    );
+    return (
+        <>
+            {button}
+            {/* The check is only drawn, and a focused button's new name is not always read out. A new node
+                per copy, as a region whose text stays the same says nothing for the second one. */}
+            <span role="status" className="sr-only">
+                <span key={copiedAt}>{copied ? t('action.copied') : ''}</span>
+            </span>
+        </>
+    );
+}

package/src/ErrorBoundary.tsx

@@ -1,13 +1,12 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react';
 import clsx from 'clsx';
-import { Copy, RotateCw, TriangleAlert } from 'lucide-react';
+import { RotateCw, TriangleAlert } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './Button.tsx';
 import { ButtonGroup } from './ButtonGroup.tsx';
-import { copyText } from './clipboard.ts';
+import { CopyButton } from './CopyButton.tsx';
 import { errorMessageOf, errorReport, shouldReset, type ResetKeys } from './error-boundary.ts';
 import { Icon } from './Icon.tsx';
-import { IconButton } from './IconButton.tsx';
 
 export interface ErrorBoundaryProps {
     /* What failed, as the first line of the message: "Could not show this view". */
@@ -61,7 +60,7 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
                         </Button>
                     )}
                     <ButtonGroup>
-                        <IconButton icon={Copy} size="sm" label={t('action.copyError')} onClick={() => copyText(errorReport(label, error, componentStack))} />
+                        <CopyButton text={errorReport(label, error, componentStack)} label={t('action.copyError')} size="sm" />
                     </ButtonGroup>
                 </div>
             </div>

package/src/ProjectSwitcher.tsx

@@ -32,6 +32,7 @@ export interface ProjectSwitcherProps<Item extends ProjectSwitcherItem = Project
     before?: ReactNode;
     /* Menu items in one group with Recent projects, such as opening a folder or creating a project. */
     children?: ReactNode;
+    /* What the trigger reads while `current` is null; next to a current project, it comes before that name in the accessible name. */
     label?: string;
     disabled?: boolean;
     open?: boolean;
@@ -58,18 +59,19 @@ export function ProjectSwitcher<Item extends ProjectSwitcherItem>({
     ref
 }: ProjectSwitcherProps<Item>) {
     const { t } = useTranslation('ui');
+    const empty = label ?? t('projectSwitcher.label');
 
     return (
         <Menu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
             <Menu.Trigger
                 ref={ref}
                 disabled={disabled}
-                aria-label={label ?? current?.name ?? t('projectSwitcher.label')}
+                aria-label={current === null ? empty : label === undefined ? current.name : `${label}: ${current.name}`}
                 className={clsx('project-switcher-trigger', className)}
             >
                 {leading}
                 {current?.icon}
-                <span className="truncate text-sm font-medium text-text">{current?.name ?? t('projectSwitcher.label')}</span>
+                <span className="truncate text-sm font-medium text-text">{current?.name ?? empty}</span>
                 <Icon icon={ChevronDown} size={14} className="shrink-0 text-text-muted" />
             </Menu.Trigger>
             <Menu.Popup className="min-w-60">

package/src/RelativeTime.tsx

@@ -0,0 +1,44 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { formatAge, formatDayClockWithYear, useFormatLocale } from './format/index.ts';
+import { Tooltip, type TooltipSide } from './Tooltip.tsx';
+import { useNow } from './useNow.ts';
+
+/* The finest step of an age is a minute, so half of one keeps it at most thirty seconds behind. */
+const TICK_MS = 30_000;
+
+export interface RelativeTimeProps {
+    /* `null`, `undefined` or an invalid date for a moment that is not known, drawn as a dash. */
+    at: Date | number | null | undefined;
+    tooltipSide?: TooltipSide;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+
+/* A moment as its age, `3m ago`, counting on while it is on screen, with the exact time on hover and on keyboard focus. */
+export function RelativeTime({ at, tooltipSide, className, ref }: RelativeTimeProps) {
+    // The formatters read the locale from a module, not from an input, so a compiled render would keep its first words.
+    'use no memo';
+    useFormatLocale();
+    const now = useNow(TICK_MS);
+    if (at === null || at === undefined || Number.isNaN(new Date(at).getTime())) {
+        return (
+            <span ref={ref} className={className}>
+                -
+            </span>
+        );
+    }
+    return (
+        <Tooltip label={formatDayClockWithYear(at)} side={tooltipSide}>
+            {/* Text is no tab stop of its own, and a hint that only the pointer can open is lost to the keyboard. */}
+            <time
+                ref={ref as Ref<HTMLTimeElement>}
+                dateTime={new Date(at).toISOString()}
+                tabIndex={0}
+                className={clsx('focus-ring rounded-sm whitespace-nowrap', className)}
+            >
+                {formatAge(at, now)}
+            </time>
+        </Tooltip>
+    );
+}

package/src/Segmented.tsx

@@ -2,11 +2,15 @@ import type { KeyboardEvent, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
 import { Icon } from './Icon.tsx';
+import { segmentedStop, segmentedTarget } from './segmented-keys.ts';
+import { Tooltip } from './Tooltip.tsx';
 
 export interface SegmentedOption<T extends string> {
     id: T;
     label: string;
     icon?: LucideIcon;
+    /* Dims the option and takes it out of the tab order and the arrow keys; the rest of the group stays usable. */
+    disabled?: boolean;
 }
 
 export interface SegmentedProps<T extends string> {
@@ -18,30 +22,41 @@ export interface SegmentedProps<T extends string> {
     disabled?: boolean;
     /* `vertical` stacks the options in a column as wide as its container, for labels too long to stand side by side. */
     orientation?: 'horizontal' | 'vertical';
+    /* 32 pixels high at `md` and 28 at `sm`, the heights of `Input`, `Select` and `Button`. */
+    size?: 'md' | 'sm';
+    /* Draws every option with an icon as a square, the label as its accessible name and its tooltip. One without an icon keeps its label. */
+    iconOnly?: boolean;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-const STEPS: Readonly<Record<string, number>> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+const SIZE = {
+    md: { track: 'rounded-lg', row: 'min-h-8', option: 'min-h-7 rounded-md px-3 py-1', square: 'size-7 rounded-md', icon: 14 },
+    sm: { track: 'rounded-md', row: 'min-h-7', option: 'min-h-6 rounded-sm px-2.5 py-0.5', square: 'size-6 rounded-sm', icon: 12 }
+} as const;
 
 /*
  * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
  * group: one tab stop, and the arrows pick and focus the next option, around the ends.
  */
-export function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation = 'horizontal', className, ref }: SegmentedProps<T>) {
+export function Segmented<T extends string>({
+    value,
+    onValueChange,
+    options,
+    label,
+    disabled,
+    orientation = 'horizontal',
+    size = 'md',
+    iconOnly = false,
+    className,
+    ref
+}: SegmentedProps<T>) {
     const vertical = orientation === 'vertical';
-    const picked = options.findIndex((option) => option.id === value);
-    const stop = picked === -1 ? 0 : picked;
+    const sizing = SIZE[size];
+    const stop = segmentedStop(options, value);
 
     function move(event: KeyboardEvent<HTMLButtonElement>, index: number) {
-        const next =
-            event.key in STEPS
-                ? (index + STEPS[event.key]! + options.length) % options.length
-                : event.key === 'Home'
-                  ? 0
-                  : event.key === 'End'
-                    ? options.length - 1
-                    : null;
+        const next = segmentedTarget(options, index, event.key);
         if (next === null) {
             return;
         }
@@ -54,33 +69,45 @@ export function Segmented<T extends string>({ value, onValueChange, options, lab
         <div
             ref={ref}
             className={clsx(
-                'flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium',
-                vertical ? 'w-full flex-col items-stretch gap-0.5' : 'min-h-8 w-fit items-center',
+                'flex bg-surface-sunken p-0.5 text-xs font-medium',
+                sizing.track,
+                vertical ? 'w-full flex-col items-stretch gap-0.5' : clsx(sizing.row, 'w-fit items-center'),
                 className
             )}
             role="radiogroup"
             aria-label={label}
             aria-orientation={vertical ? 'vertical' : undefined}
         >
-            {options.map((option, index) => (
-                <button
-                    key={option.id}
-                    type="button"
-                    role="radio"
-                    aria-checked={value === option.id}
-                    tabIndex={index === stop ? 0 : -1}
-                    disabled={disabled}
-                    className={clsx(
-                        'flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50',
-                        value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'
-                    )}
-                    onClick={() => onValueChange(option.id)}
-                    onKeyDown={(event) => move(event, index)}
-                >
-                    {option.icon && <Icon icon={option.icon} size={14} className="shrink-0" />}
-                    {option.label}
-                </button>
-            ))}
+            {options.map((option, index) => {
+                const square = iconOnly && option.icon !== undefined;
+                const button = (
+                    <button
+                        key={option.id}
+                        type="button"
+                        role="radio"
+                        aria-checked={value === option.id}
+                        tabIndex={index === stop ? 0 : -1}
+                        disabled={disabled || option.disabled}
+                        className={clsx(
+                            'flex items-center transition-colors disabled:opacity-50',
+                            square ? clsx(sizing.square, 'justify-center') : clsx(sizing.option, 'gap-1.5 text-left'),
+                            value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted enabled:hover:text-text'
+                        )}
+                        onClick={() => onValueChange(option.id)}
+                        onKeyDown={(event) => move(event, index)}
+                    >
+                        {option.icon && <Icon icon={option.icon} size={sizing.icon} className="shrink-0" />}
+                        {!square && option.label}
+                    </button>
+                );
+                return square ? (
+                    <Tooltip key={option.id} label={option.label} name>
+                        {button}
+                    </Tooltip>
+                ) : (
+                    button
+                );
+            })}
         </div>
     );
 }

package/src/Toasts.tsx

@@ -70,7 +70,7 @@ function ActionButton({ action }: { action: ToastAction }) {
 function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; footer?: (toast: T) => ReactNode; onDismiss(): void }) {
     const { t } = useTranslation('ui');
     // A toast that goes by itself keeps its close button out of sight until the pointer or the keyboard is on it.
-    const leaves = toast.kind === 'deleted' || (toast.kind === 'success' && toast.persist !== true);
+    const leaves = toast.deadline !== undefined;
     const actions = [...(toast.action === undefined ? [] : [toast.action]), ...(toast.actions ?? [])];
     // An offer that runs out shows how long it has left instead.
     const countdown = actions.length > 0 ? toast.deadline : undefined;

package/src/combobox/index.parts.ts

@@ -0,0 +1,12 @@
+export {
+    ComboboxCollection as Collection,
+    ComboboxEmpty as Empty,
+    ComboboxGroup as Group,
+    ComboboxGroupLabel as GroupLabel,
+    ComboboxInput as Input,
+    ComboboxItem as Item,
+    ComboboxList as List,
+    ComboboxPopup as Popup,
+    ComboboxRoot as Root,
+    ComboboxStatus as Status
+} from './parts.tsx';

package/src/combobox/parts.tsx

@@ -0,0 +1,147 @@
+import type { ComponentProps, ReactNode } from 'react';
+import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { withClass } from '../class-name.ts';
+import { fieldControlProps, useFieldControl } from '../field-context.ts';
+import { Icon } from '../Icon.tsx';
+import { Kbd } from '../Kbd.tsx';
+import { MENU_LABEL } from '../menu/parts.tsx';
+import { splitPlacement, type PlacementKey } from '../placement.ts';
+import { renderPositioner } from '../popup-layer.ts';
+import type { Shortcut } from '../shortcut.ts';
+
+/* A line in the list instead of rows: nothing found, a search still running. It takes no room while it has nothing to say. */
+const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
+
+/* The field keeps free text: Base UI's autocomplete, whose suggestions only offer text, rather than its combobox, which holds a value. */
+export const ComboboxRoot = Autocomplete.Root;
+
+export type ComboboxInputProps = Omit<ComponentProps<typeof Autocomplete.Input>, 'size' | 'className'> & {
+    className?: string;
+    /* The heights of `Input`. */
+    size?: 'md' | 'sm';
+    mono?: boolean;
+    /* Drawn in front of the text. `className` then goes to the box around the icon and the input; `ref` stays on the input. */
+    icon?: LucideIcon;
+};
+
+/* The field the suggestions open under, drawn as the library's `Input`. */
+export function ComboboxInput({ size = 'md', mono = false, icon, className, id, ...props }: ComboboxInputProps) {
+    const field = useFieldControl();
+    const small = size === 'sm';
+    const control = { ...fieldControlProps(field, id), ...props };
+
+    if (icon === undefined) {
+        return <Autocomplete.Input {...control} className={clsx('field', small && 'field-sm', mono && 'font-mono text-code', className)} />;
+    }
+
+    // The group is what the popup lines up with, so a list under a field with an icon is as wide as the whole box.
+    return (
+        <Autocomplete.InputGroup className={clsx('field relative flex p-0', small && 'field-sm', className)}>
+            <Icon
+                icon={icon}
+                size={small ? 12 : 14}
+                className={clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5')}
+            />
+            <Autocomplete.Input
+                {...control}
+                className={clsx(
+                    'min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint',
+                    small ? 'pr-2 pl-7' : 'pr-2.5 pl-8',
+                    mono && 'font-mono text-code'
+                )}
+            />
+        </Autocomplete.InputGroup>
+    );
+}
+
+type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementKey>;
+
+export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
+
+/* The portal, the positioner and the menu surface of the suggestions: under the field and at least as wide as it. */
+export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6, className, ...props }: ComboboxPopupProps) {
+    const [placement, popupProps] = splitPlacement(props);
+    return (
+        <Autocomplete.Portal>
+            <Autocomplete.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
+                <Autocomplete.Popup className={withClass('menu-popup min-w-(--anchor-width)', className)} {...popupProps} />
+            </Autocomplete.Positioner>
+        </Autocomplete.Portal>
+    );
+}
+
+export function ComboboxList(props: ComponentProps<typeof Autocomplete.List>) {
+    const { t } = useTranslation('ui');
+    return <Autocomplete.List aria-label={t('combobox.suggestions')} {...props} />;
+}
+
+export type ComboboxItemProps = ComponentProps<typeof Autocomplete.Item> & {
+    /* Before the label, such as a 14px icon or a file's mark. */
+    icon?: ReactNode;
+    /* Beside the label and the first to give way when the row is narrow, such as the folder a file sits in. */
+    hint?: ReactNode;
+    /* A second line under the label. */
+    description?: ReactNode;
+    /* At the end of the row, before the shortcut: a state, a count, a reference. */
+    trailing?: ReactNode;
+    shortcut?: Shortcut;
+    /* Leaves the row out: only what makes it an option (the highlight, Enter, the click) stays, for a row that lays out itself, such as lines of source. */
+    unstyled?: boolean;
+};
+
+/*
+ * One suggestion. Its children are the label. `onClick` runs for a click and for Enter on the
+ * highlighted row; Base UI clicks the row for Enter, so a modifier held with Enter is read in the
+ * field's `onKeyDown` instead.
+ */
+export function ComboboxItem({ icon, hint, description, trailing, shortcut, unstyled = false, className, children, ...props }: ComboboxItemProps) {
+    if (unstyled) {
+        return (
+            <Autocomplete.Item className={className} {...props}>
+                {children}
+            </Autocomplete.Item>
+        );
+    }
+    const label = <span className="min-w-0 truncate">{children}</span>;
+    return (
+        <Autocomplete.Item className={withClass(clsx('menu-item', description !== undefined && 'items-start'), className)} {...props}>
+            {icon !== undefined && <span className="flex h-lh shrink-0 items-center text-text-faint">{icon}</span>}
+            {description === undefined ? (
+                label
+            ) : (
+                <span className="flex min-w-0 flex-col">
+                    {label}
+                    <span className="truncate text-xs text-text-faint">{description}</span>
+                </span>
+            )}
+            {hint !== undefined && <span className="min-w-0 shrink-1000 truncate text-xs/[inherit] text-text-faint">{hint}</span>}
+            {(trailing !== undefined || shortcut !== undefined) && (
+                <span className="ml-auto flex h-lh shrink-0 items-center gap-2 pl-3">
+                    {trailing}
+                    {shortcut !== undefined && <Kbd shortcut={shortcut} />}
+                </span>
+            )}
+        </Autocomplete.Item>
+    );
+}
+
+export const ComboboxGroup = Autocomplete.Group;
+
+export function ComboboxGroupLabel({ className, ...props }: ComponentProps<typeof Autocomplete.GroupLabel>) {
+    return <Autocomplete.GroupLabel className={withClass(MENU_LABEL, className)} {...props} />;
+}
+
+export const ComboboxCollection = Autocomplete.Collection;
+
+/* Its children show only while the list has no rows. Needs `items` on the root. */
+export function ComboboxEmpty({ className, ...props }: ComponentProps<typeof Autocomplete.Empty>) {
+    return <Autocomplete.Empty className={withClass(LIST_NOTE, className)} {...props} />;
+}
+
+/* A line read out as it changes, such as a search that is still running or how many it found. It stays mounted; only its children come and go. */
+export function ComboboxStatus({ className, ...props }: ComponentProps<typeof Autocomplete.Status>) {
+    return <Autocomplete.Status className={withClass(LIST_NOTE, className)} {...props} />;
+}

package/src/command-palette/index.parts.ts

@@ -0,0 +1,16 @@
+/* A command palette is a combobox in a dialog; its rows, groups and notes are the combobox's own. */
+export {
+    ComboboxCollection as Collection,
+    ComboboxEmpty as Empty,
+    ComboboxGroup as Group,
+    ComboboxGroupLabel as GroupLabel,
+    ComboboxItem as Item,
+    ComboboxStatus as Status
+} from '../combobox/parts.tsx';
+export {
+    CommandPaletteFooter as Footer,
+    CommandPaletteInput as Input,
+    CommandPaletteList as List,
+    CommandPalettePopup as Popup,
+    CommandPaletteRoot as Root
+} from './parts.tsx';