@adecore/ui 0.53.3 → 0.54.1

package/src/AccentSwatches.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Ellipsis } from 'lucide-react';
+import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ColorSwatch } from './ColorSwatch.tsx';
 import { Icon } from './Icon.tsx';

package/src/Banner.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 import { Icon } from './Icon.tsx';
 import { Surface } from './Surface.tsx';
 

package/src/Button.tsx

@@ -1,5 +1,5 @@
-import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
 import clsx from 'clsx';
+import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
 import { buttonClass, type ButtonShape, type ButtonSize, type ButtonVariant } from './button-class.ts';
 
 export type { ButtonShape, ButtonSize, ButtonVariant } from './button-class.ts';

package/src/ButtonGroup.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 export type ButtonGroupProps = useRender.ComponentProps<'div'>;
 

package/src/Checkbox.tsx

@@ -1,7 +1,7 @@
-import type { Ref } from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import clsx from 'clsx';
 import { Check, Minus } from 'lucide-react';
-import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import type { Ref } from 'react';
 import { Icon } from './Icon.tsx';
 
 export interface CheckboxProps {

package/src/ChoiceCards.tsx

@@ -1,8 +1,8 @@
-import { Fragment, useId, type ReactNode, type Ref } from 'react';
-import clsx from 'clsx';
-import type { LucideIcon } from 'lucide-react';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
+import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { Fragment, useId, type ReactNode, type Ref } from 'react';
 import { Icon } from './Icon.tsx';
 
 export interface Choice<Value extends string | number> {

package/src/CloseButton.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
-import { X } from 'lucide-react';
 import { Dialog } from '@base-ui/react/dialog';
+import { X } from 'lucide-react';
+import type { Ref } from 'react';
 import { IconButton, type IconButtonSize } from './IconButton.tsx';
 import type { Shortcut } from './shortcut.ts';
 

package/src/ColorSwatch.tsx

@@ -1,7 +1,7 @@
-import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { Check } from 'lucide-react';
-import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps } from 'react';
 import { Icon } from './Icon.tsx';
 
 /* `focus-ring` for the swatch that is a menu item rather than a button, which the keyboard reaches all the same. */

package/src/ColorWheelPicker.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useId, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import { ColorSwatch } from './ColorSwatch.tsx';
 import { Icon } from './Icon.tsx';
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';

package/src/ColumnResizeHandle.tsx

@@ -1,5 +1,5 @@
-import type { CSSProperties, PointerEvent as ReactPointerEvent, Ref } from 'react';
 import clsx from 'clsx';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, Ref } from 'react';
 import type { ColumnEdge } from './useColumnResize.ts';
 
 export interface ColumnResizeHandleProps {

package/src/CopyButton.tsx

@@ -1,6 +1,6 @@
+import { Check, Copy } from 'lucide-react';
 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';

package/src/DockShell.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { Surface } from './Surface.tsx';
 
 /* How close to the bottom of the window the pointer has to come before a hidden dock slides back. */

package/src/EmptyState.tsx

@@ -1,6 +1,6 @@
-import { cloneElement, isValidElement, type ReactElement, type ReactNode, type Ref } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { cloneElement, isValidElement, type ReactElement, type ReactNode, type Ref } from 'react';
 import { Icon } from './Icon.tsx';
 import { Spinner } from './Spinner.tsx';
 

package/src/ErrorBoundary.tsx

@@ -1,12 +1,13 @@
-import { Component, type ErrorInfo, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { RotateCw, TriangleAlert } from 'lucide-react';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './Button.tsx';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { CopyButton } from './CopyButton.tsx';
 import { errorMessageOf, errorReport, shouldReset, type ResetKeys } from './error-boundary.ts';
 import { Icon } from './Icon.tsx';
+import { ScrollArea } from './ScrollArea.tsx';
 
 export interface ErrorBoundaryProps {
     /* The first line of the message: "Could not show this view". */
@@ -49,7 +50,7 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
     const { t } = useTranslation('ui');
 
     return (
-        <div role="alert" className={clsx('grid place-items-center overflow-auto bg-surface', compact ? 'p-3' : 'p-6', className)}>
+        <ScrollArea role="alert" className={clsx('bg-surface', className)} viewportClassName={clsx('grid place-items-center', compact ? 'p-3' : 'p-6')}>
             <div className={clsx('flex max-w-[360px] flex-col items-center text-center', compact ? 'gap-1' : 'gap-2')}>
                 {!compact && <Icon icon={TriangleAlert} size={20} className="text-status-error" />}
                 <p className="text-sm font-medium text-text">{label}</p>
@@ -69,7 +70,7 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
                     </ButtonGroup>
                 </div>
             </div>
-        </div>
+        </ScrollArea>
     );
 }
 

package/src/Field.tsx

@@ -1,6 +1,6 @@
-import { useId, type ReactNode, type Ref } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useId, type ReactNode, type Ref } from 'react';
 import { FieldContext } from './field-context.ts';
 import { SectionLabel } from './SectionLabel.tsx';
 

package/src/FileIcon.tsx

@@ -1,6 +1,6 @@
-import { useInsertionEffect, type Ref } from 'react';
 import clsx from 'clsx';
-import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.ts';
+import { useInsertionEffect, useSyncExternalStore, type Ref } from 'react';
+import { fileIconFor, fileIconOverrideFor, fileIconOverrideVersion, mountFileIconSprite, subscribeFileIconOverride } from './file-icon.ts';
 
 export interface FileIconProps {
     /* Absolute or relative; only the last segment decides which icon this is. */
@@ -8,7 +8,9 @@ export interface FileIconProps {
 
     size?: number;
     className?: string;
-    ref?: Ref<SVGSVGElement>;
+
+    /* An `<img>` when an override gives the file an icon of the app's own, the `<svg>` otherwise. */
+    ref?: Ref<SVGSVGElement | HTMLImageElement>;
 }
 
 /*
@@ -19,15 +21,22 @@ export function FileIcon({ path, size = 16, className, ref }: FileIconProps) {
     // Before the browser paints, so a `<use>` never points at a symbol that is not in the document yet.
     useInsertionEffect(mountFileIconSprite, []);
 
-    const own = fileIconOverrideFor(path);
+    const version = useSyncExternalStore(subscribeFileIconOverride, fileIconOverrideVersion, fileIconOverrideVersion);
+    const own = overrideFor(path, version);
 
+    // React types a readonly ref object, so the union passes to neither element without a cast; each holds one of its members.
     if (own !== null) {
-        return <img src={own} alt="" width={size} height={size} className={clsx('file-icon', className)} />;
+        return <img ref={ref as Ref<HTMLImageElement>} src={own} alt="" width={size} height={size} className={clsx('file-icon', className)} />;
     }
 
     return (
-        <svg ref={ref} className={clsx('file-icon', className)} width={size} height={size} viewBox="0 0 16 16" aria-hidden>
+        <svg ref={ref as Ref<SVGSVGElement>} className={clsx('file-icon', className)} width={size} height={size} viewBox="0 0 16 16" aria-hidden>
             <use href={`#${fileIconFor(path)}`} />
         </svg>
     );
 }
+
+/* Takes the version so the compiler caches the result on it as well as on the path. */
+function overrideFor(path: string, _version: number): string | null {
+    return fileIconOverrideFor(path);
+}

package/src/Icon.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 
 // The whole client draws at this weight. 2 is Lucide's default, but at 12 and 14 pixels next to
 // text of the same size a hair thinner keeps the glyph from outweighing the words beside it.

package/src/IconButton.tsx

@@ -1,12 +1,12 @@
-import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
-import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE, type IconButtonSize } from './icon-button-size.ts';
 import { Icon } from './Icon.tsx';
 import type { Shortcut } from './shortcut.ts';
 import { Spinner } from './Spinner.tsx';
 import { Tooltip, type TooltipSide } from './Tooltip.tsx';
-import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE, type IconButtonSize } from './icon-button-size.ts';
 
 export type { IconButtonSize };
 

package/src/IconPicker.tsx

@@ -1,14 +1,15 @@
-import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import clsx from 'clsx';
 import { Ban, ChevronDown, Search, X } from 'lucide-react';
+import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './Button.tsx';
 import { EmptyState } from './EmptyState.tsx';
 import { formatNumber } from './format/number.ts';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons, type IconSection } from './icon-picker.ts';
 import { Icon } from './Icon.tsx';
 import { IconButton } from './IconButton.tsx';
-import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons, type IconSection } from './icon-picker.ts';
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';
+import { ScrollArea } from './ScrollArea.tsx';
 import { SectionLabel } from './SectionLabel.tsx';
 import { Tooltip } from './Tooltip.tsx';
 
@@ -277,12 +278,12 @@ function IconPickerPanel({ id, name, sections, headed, value, keywords, searchab
                     )}
                 </div>
             )}
-            <div
-                ref={area}
+            <ScrollArea
+                viewportRef={area}
                 id={`${id}-grid`}
                 role="radiogroup"
                 aria-label={name}
-                className={clsx('relative overflow-y-auto overscroll-contain', headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')}
+                viewportClassName={clsx('relative overscroll-contain', headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')}
                 style={rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }}
                 onScroll={(event) => markStuckHeadings(event.currentTarget)}
                 onKeyDown={moveFocus}
@@ -342,7 +343,7 @@ function IconPickerPanel({ id, name, sections, headed, value, keywords, searchab
                         );
                     })
                 )}
-            </div>
+            </ScrollArea>
             {onClear && (
                 <div className="flex border-t border-border p-1">
                     <Button size="sm" disabled={disabled || value === null} onClick={onClear}>

package/src/Input.tsx

@@ -1,6 +1,6 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
 import { fieldControlProps, useFieldControl } from './field-context.ts';
 import { Icon } from './Icon.tsx';
 

package/src/Kbd.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
+import type { ReactNode, Ref } from 'react';
 import { isApplePlatform } from './platform.ts';
 import { formatShortcut, shortcutParts, type Shortcut } from './shortcut.ts';
 

package/src/ListRow.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 const VARIANT = {
     /* A row of a list that reads as a table and fills the width of its panel: commits, processes,

package/src/Meter.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface MeterProps {
     /* In the unit of `min` and `max`, held to them. Null draws an empty track, for a level not measured yet. */

package/src/MiddleTruncate.tsx

@@ -1,7 +1,7 @@
-import { useLayoutEffect, useState, type Ref } from 'react';
 import clsx from 'clsx';
-import { fitMiddle, type MiddleCut } from './middle-truncate.ts';
+import { useLayoutEffect, useState, type Ref } from 'react';
 import { mergeRefs } from './merge-refs.ts';
+import { fitMiddle, type MiddleCut } from './middle-truncate.ts';
 import { Tooltip } from './Tooltip.tsx';
 
 export interface MiddleTruncateProps {

package/src/PanelEmpty.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode, Ref } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 import { EmptyState } from './EmptyState.tsx';
 
 export interface PanelEmptyProps {

package/src/PanelHeader.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import { SectionLabel } from './SectionLabel.tsx';
 
 export type PanelHeaderProps = useRender.ComponentProps<'header'> & {

package/src/Pill.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
+import type { ReactNode, Ref } from 'react';
 
 /* Every ground is an alpha over whatever the pill stands on, the way a border is: a solid sunken ground read as a hole on a dark row. */
 const TONES = {

package/src/ProjectSwitcher.tsx

@@ -1,7 +1,7 @@
-import type { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { ChevronDown, History } from 'lucide-react';
+import type { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import * as Menu from './menu/index.parts.ts';
 import { ProjectSwitcherRow } from './project-switcher-row.tsx';

package/src/PromptDialog.tsx

@@ -1,6 +1,6 @@
+import type { LucideIcon } from 'lucide-react';
 import { useState, type ReactNode, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { LucideIcon } from 'lucide-react';
 import { Button } from './Button.tsx';
 import { DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle } from './dialog/parts.tsx';
 import { Field, FormError } from './Field.tsx';

package/src/RelativeTime.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 import { formatAge, formatDayClockWithYear, useFormatLocale } from './format/index.ts';
 import { Tooltip, type TooltipSide } from './Tooltip.tsx';
 import { useNow } from './useNow.ts';

package/src/ScrollArea.tsx

@@ -0,0 +1,47 @@
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useState, type CSSProperties, type Ref } from 'react';
+import { mergeRefs } from './merge-refs.ts';
+import { useOverlayScrollbars, type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
+
+export type ScrollAreaProps = Omit<useRender.ComponentProps<'div'>, 'className' | 'ref'> & {
+    /* The directions the content scrolls in; the other one clips. */
+    axis?: ScrollAreaAxis;
+
+    /* The outer box, which holds the bars and takes the size. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+
+    /* The element that scrolls, for a virtualizer or code that sets the scroll position. */
+    viewportRef?: Ref<HTMLElement>;
+
+    /* Padding and layout of the content. `render` and the remaining props land on the viewport too. */
+    viewportClassName?: string;
+
+    /* Pixels of the bottom edge a layer over the area covers, such as a docked input. The bars end above it. */
+    coveredBottom?: number;
+};
+
+/* A box that scrolls natively under thin bars that float over its content and show only while it scrolls. */
+export function ScrollArea({ axis = 'y', className, viewportClassName, viewportRef, coveredBottom, ref, render, ...props }: ScrollAreaProps) {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const scrollbars = useOverlayScrollbars(viewport, { axis });
+
+    const content = useRender<Record<string, never>, HTMLElement>({
+        render,
+        ref: mergeRefs<HTMLElement>(setViewport, viewportRef),
+        defaultTagName: 'div',
+        props: { ...props, 'data-axis': axis, className: clsx('ade-scroll-viewport', viewportClassName) }
+    });
+
+    return (
+        <div
+            ref={ref}
+            className={clsx('ade-scroll-area', className)}
+            style={coveredBottom ? ({ '--scrollbar-covered-bottom': `${coveredBottom}px` } as CSSProperties) : undefined}
+        >
+            {content}
+            {scrollbars}
+        </div>
+    );
+}

package/src/SectionLabel.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 /* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
 const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';

package/src/SegmentBar.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, type Ref } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState, type Ref } from 'react';
 import { mergeRefs } from './merge-refs.ts';
 import { Tooltip } from './Tooltip.tsx';
 import { useMeasuredWidth } from './useMeasuredWidth.ts';

package/src/Segmented.tsx

@@ -1,6 +1,6 @@
-import type { KeyboardEvent, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import type { KeyboardEvent, Ref } from 'react';
 import { Icon } from './Icon.tsx';
 import { segmentedStop, segmentedTarget } from './segmented-keys.ts';
 import { Tooltip } from './Tooltip.tsx';

package/src/Select.tsx

@@ -1,7 +1,7 @@
-import type { Ref } from 'react';
 import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import { MENU_LABEL } from './menu/parts.tsx';
@@ -9,6 +9,7 @@ import { renderPositioner } from './popup-layer.ts';
 import { RowContent } from './select-row.tsx';
 import { isGroup, rowClassName, triggerClassName, type SelectGroup, type SelectItem } from './select-shared.ts';
 import { SelectSearch } from './SelectSearch.tsx';
+import { useOverlayScrollbars } from './useOverlayScrollbars.tsx';
 
 export type { SelectGroup, SelectItem };
 
@@ -74,6 +75,8 @@ function PlainSelect<T extends string>({
     const groups = items.length > 0 && isGroup(items[0]!) ? (items as SelectGroup<T>[]) : null;
     const flat = groups ? groups.flatMap((group) => group.items) : (items as SelectItem<T>[]);
     const selected = flat.find((item) => item.value === value) ?? null;
+    const [list, setList] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(list);
 
     return (
         <BaseSelect.Root
@@ -99,7 +102,7 @@ function PlainSelect<T extends string>({
                     alignItemWithTrigger={false}
                 >
                     <BaseSelect.Popup className="menu-popup">
-                        <BaseSelect.List className="max-h-80 overflow-auto">
+                        <BaseSelect.List ref={setList} className="max-h-80 overflow-auto">
                             {groups
                                 ? groups.map((group) => (
                                       <BaseSelect.Group key={group.label}>
@@ -112,6 +115,7 @@ function PlainSelect<T extends string>({
                                 : flat.map((item) => <Row key={item.value} item={item} picked={item.value === value} />)}
                         </BaseSelect.List>
                     </BaseSelect.Popup>
+                    {scrollbars}
                 </BaseSelect.Positioner>
             </BaseSelect.Portal>
         </BaseSelect.Root>

package/src/SelectSearch.tsx

@@ -1,14 +1,15 @@
-import { useState } from 'react';
 import { Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { ChevronDown, Search } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import { MENU_LABEL } from './menu/parts.tsx';
 import { renderPositioner } from './popup-layer.ts';
-import type { SelectProps } from './Select.tsx';
 import { RowContent } from './select-row.tsx';
 import { isGroup, rowClassName, triggerClassName, type SelectGroup, type SelectItem } from './select-shared.ts';
+import type { SelectProps } from './Select.tsx';
+import { useOverlayScrollbars } from './useOverlayScrollbars.tsx';
 
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
 export function SelectSearch<T extends string>({
@@ -38,6 +39,8 @@ export function SelectSearch<T extends string>({
         : flat.map((item) => item.value);
 
     const searchLabel = searchPlaceholder ?? t('select.search');
+    const [list, setList] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(list);
 
     const renderRow = (itemValue: T) => {
         const item = byValue.get(itemValue)!;
@@ -87,16 +90,20 @@ export function SelectSearch<T extends string>({
                             />
                         </label>
                         <Combobox.Empty className="px-3 py-4 text-center text-xs text-text-faint empty:hidden">{t('select.noMatch', { query })}</Combobox.Empty>
-                        <Combobox.List className="min-h-0 overflow-auto">
-                            {groups
-                                ? (group: { value: string; items: T[] }) => (
-                                      <Combobox.Group key={group.value} items={group.items}>
-                                          <Combobox.GroupLabel className={MENU_LABEL}>{group.value}</Combobox.GroupLabel>
-                                          <Combobox.Collection>{renderRow}</Combobox.Collection>
-                                      </Combobox.Group>
-                                  )
-                                : renderRow}
-                        </Combobox.List>
+                        {/* Out to the popup's edge on the right, so the bar lies where a menu's does. */}
+                        <div className="relative -mr-1 flex min-h-0 flex-col">
+                            <Combobox.List ref={setList} className="min-h-0 overflow-auto pr-1">
+                                {groups
+                                    ? (group: { value: string; items: T[] }) => (
+                                          <Combobox.Group key={group.value} items={group.items}>
+                                              <Combobox.GroupLabel className={MENU_LABEL}>{group.value}</Combobox.GroupLabel>
+                                              <Combobox.Collection>{renderRow}</Combobox.Collection>
+                                          </Combobox.Group>
+                                      )
+                                    : renderRow}
+                            </Combobox.List>
+                            {scrollbars}
+                        </div>
                     </Combobox.Popup>
                 </Combobox.Positioner>
             </Combobox.Portal>

package/src/Separator.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface SeparatorProps {
     orientation?: 'vertical' | 'horizontal';

package/src/ShortcutHints.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import { isApplePlatform } from './platform.ts';
-import { formatShortcut } from './shortcut.ts';
 import { ModifierHold, placeHint, shortcutHintTargets } from './shortcut-hints.ts';
+import { formatShortcut } from './shortcut.ts';
 
 interface PlacedHint {
     id: number;

package/src/Skeleton.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface SkeletonProps {
     /* The width, and a height other than the one line of 16px. */

package/src/Slider.tsx

@@ -1,6 +1,6 @@
-import { useId, type Ref } from 'react';
-import clsx from 'clsx';
 import { Slider as BaseSlider } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { useId, type Ref } from 'react';
 import { formatFixed } from './format/number.ts';
 import { placesOf } from './step-places.ts';
 

package/src/SlidingColumn.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, type RefObject } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, type RefObject } from 'react';
 import { ColumnResizeHandle } from './ColumnResizeHandle.tsx';
 import { mergeRefs } from './merge-refs.ts';
 import { useColumnResize } from './useColumnResize.ts';

package/src/Spinner.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, CSSProperties } from 'react';
 import clsx from 'clsx';
+import type { ComponentProps, CSSProperties } from 'react';
 
 const DOTS = [0, 1, 2];
 

package/src/SplitButton.tsx

@@ -1,6 +1,6 @@
-import { useState, type ComponentProps, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState, type ComponentProps, type ReactNode } from 'react';
 import { splitFrameClass, splitHalfClass, type ButtonSize, type ButtonVariant } from './button-class.ts';
 import { Icon } from './Icon.tsx';
 import { MenuPopup, MenuRoot, MenuTrigger, type MenuPopupProps } from './menu/parts.tsx';