@adecore/ui 0.20.0 → 0.21.0

package/dist/Pill.d.ts

@@ -16,6 +16,7 @@ export interface PillProps {
     children: ReactNode;
     tone?: keyof typeof TONES;
     shape?: keyof typeof SHAPES;
+    size?: 'md' | 'sm';
     mono?: boolean;
     onClick?: () => void;
     pressed?: boolean;
@@ -23,5 +24,5 @@ export interface PillProps {
     className?: string;
     ref?: Ref<HTMLElement>;
 }
-export declare function Pill({ icon, children, tone, shape, mono, onClick, pressed, disabled, className, ref }: PillProps): import("react").JSX.Element;
+export declare function Pill({ icon, children, tone, shape, size, mono, onClick, pressed, disabled, className, ref }: PillProps): import("react").JSX.Element;
 export {};

package/dist/Pill.js

@@ -16,13 +16,18 @@ const TONES = {
 };
 /* The corners of a button, so a pill reads as a small label of the same family and not as a badge. A tag, at the end of a line of prose, is tighter and heavier. */
 const SHAPES = {
-    pill: 'rounded-md px-2 py-0.5',
-    tag: 'rounded-md px-1.5 py-0.5 font-medium'
+    pill: 'rounded-md',
+    tag: 'rounded-md font-medium'
+};
+/* The text stays at the theme's smallest size, so `sm` gives up padding: 20px tall instead of 24. */
+const PADDING = {
+    pill: { md: 'px-2 py-0.5', sm: 'px-1.5' },
+    tag: { md: 'px-1.5 py-0.5', sm: 'px-1' }
 };
 /* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
-export function Pill({ icon, children, tone = 'muted', shape = 'pill', mono = false, onClick, pressed, disabled, className, ref }) {
+export function Pill({ icon, children, tone = 'muted', shape = 'pill', size = 'md', mono = false, onClick, pressed, disabled, className, ref }) {
     // Never broken inside itself: in a row that wraps, a pill that does not fit moves to the next line whole.
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], PADDING[shape][size], TONES[tone], mono && 'font-mono', className);
     if (!onClick) {
         return (_jsxs("span", { ref: ref, className: shared, children: [icon, children] }));
     }

package/dist/Slider.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'react';
+export interface SliderProps {
+    value: number;
+    onValueChange(value: number): void;
+    min: number;
+    max: number;
+    step?: number;
+    decimals?: number;
+    unit?: string;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Slider({ value, onValueChange, min, max, step, decimals, unit, label, disabled, className, ref }: SliderProps): import("react").JSX.Element;

package/dist/Slider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import clsx from 'clsx';
+import { Slider as BaseSlider } from '@base-ui-components/react/slider';
+import { formatFixed } from './format/number.js';
+import { placesOf } from './step-places.js';
+/* A number picked along a range: the label and the value on one line, the track under them. */
+export function Slider({ value, onValueChange, min, max, step = 1, decimals = placesOf(step), unit, label, disabled, className, ref }) {
+    const labelId = useId();
+    const reading = formatFixed(value, decimals);
+    // Base UI adds steps in floating point, so 0.2 plus 0.1 would arrive as 0.30000000000000004.
+    const places = Math.max(placesOf(step), placesOf(min));
+    // Base UI's Page Up jumps 10 whatever the range; a tenth of the range suits 0 to 1 as well as 0 to 1000.
+    const largeStep = Math.max(step, Math.round((max - min) / 10 / step) * step);
+    return (_jsxs(BaseSlider.Root, { ref: ref, value: value, onValueChange: (next) => onValueChange(Number(next.toFixed(places))), min: min, max: max, step: step, largeStep: largeStep, disabled: disabled, "aria-labelledby": labelId, className: clsx('flex flex-col gap-1 data-disabled:opacity-50', className), children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx("span", { id: labelId, className: "min-w-0 truncate text-text", children: label }), _jsxs("span", { "aria-hidden": true, className: "shrink-0 text-text-muted tabular-nums", children: [reading, unit] })] }), _jsx(BaseSlider.Control, { className: "flex h-5 touch-none items-center px-2 select-none", children: _jsxs(BaseSlider.Track, { className: "relative h-1 w-full rounded-full bg-border-strong", children: [_jsx(BaseSlider.Indicator, { className: "rounded-full bg-accent" }), _jsx(BaseSlider.Thumb, { getAriaValueText: () => `${reading}${unit ?? ''}`, className: "block size-4 rounded-full bg-surface-raised shadow-raised outline-offset-2 outline-accent has-focus-visible:outline-2" })] }) })] }));
+}

package/dist/Stepper.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.js';
 import { formatFixed } from './format/number.js';
 import { IconButton } from './IconButton.js';
-const placesOf = (step) => String(step).split('.')[1]?.length ?? 0;
+import { placesOf } from './step-places.js';
 /* A number between minus and plus, in one sunken group so the three read as a single control. */
 export function Stepper({ value, onValueChange, min, max, step, decimals = placesOf(step), unit, label, className, ref }) {
     const { t } = useTranslation('ui');

package/dist/Toasts.js

@@ -42,7 +42,7 @@ function ToastCard({ toast, footer, onDismiss }) {
     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;
-    return (_jsxs(Surface, { className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3", children: [_jsx("span", { className: clsx(TITLE_LINE, 'w-4 justify-center'), children: toast.kind === 'progress' ? (_jsx(Spinner, { size: 16, className: TONE.progress })) : (_jsx(Icon, { icon: ICON[toast.kind], size: 16, className: TONE[toast.kind] })) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1", children: [_jsx("span", { className: "text-sm text-text", children: toast.title }), toast.description !== undefined && toast.description !== '' && (_jsx("span", { className: "text-xs break-words text-pretty text-text-muted", children: toast.description })), actions.length > 1 && (_jsx("span", { className: "mt-1 flex flex-wrap items-center gap-x-4 gap-y-1", children: actions.map((action) => (_jsx(ActionButton, { action: action }, action.label))) })), footer?.(toast)] }), actions.length === 1 && (_jsx("span", { className: TITLE_LINE, children: _jsx(ActionButton, { action: actions[0] }) })), countdown !== undefined ? (_jsx(TimerRing, { deadline: countdown, onDismiss: onDismiss }, countdown.start)) : (_jsx(IconButton, { icon: X, size: "xs", label: t('action.dismiss'), className: clsx('-my-px', leaves && 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'), onClick: onDismiss }))] }));
+    return (_jsxs(Surface, { className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3", children: [_jsx("span", { className: clsx(TITLE_LINE, 'w-4 justify-center'), children: toast.kind === 'progress' ? (_jsx(Spinner, { size: 16, className: TONE.progress })) : (_jsx(Icon, { icon: ICON[toast.kind], size: 16, className: TONE[toast.kind] })) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1", children: [_jsx("span", { className: "text-sm break-words text-text", children: toast.title }), toast.description !== undefined && toast.description !== '' && (_jsx("span", { className: "text-xs break-words text-pretty text-text-muted", children: toast.description })), actions.length > 1 && (_jsx("span", { className: "mt-1 flex flex-wrap items-center gap-x-4 gap-y-1", children: actions.map((action) => (_jsx(ActionButton, { action: action }, action.label))) })), footer?.(toast)] }), actions.length === 1 && (_jsx("span", { className: TITLE_LINE, children: _jsx(ActionButton, { action: actions[0] }) })), countdown !== undefined ? (_jsx(TimerRing, { deadline: countdown, onDismiss: onDismiss }, countdown.start)) : (_jsx(IconButton, { icon: X, size: "xs", label: t('action.dismiss'), className: clsx('-my-px', leaves && 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'), onClick: onDismiss }))] }));
 }
 /*
  * Bottom right, over everything: what an action is doing while it runs and how it went when it is

package/dist/Tooltip.d.ts

@@ -1,4 +1,5 @@
-import { type ReactElement, type ReactNode } from 'react';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
 import type { Shortcut } from './shortcut.ts';
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 export declare function TooltipProvider({ children }: {
@@ -6,11 +7,14 @@ export declare function TooltipProvider({ children }: {
 }): import("react").JSX.Element;
 export interface TooltipProps {
     label: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    anchor?: ComponentProps<typeof BaseTooltip.Positioner>['anchor'];
     kbd?: Shortcut | string;
     side?: TooltipSide;
     sideOffset?: number;
     name?: boolean;
     disabled?: boolean;
-    children: ReactElement<Record<string, unknown>>;
+    children?: ReactElement<Record<string, unknown>>;
 }
-export declare function Tooltip({ label, kbd, side, sideOffset, name, disabled, children }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ label, open, onOpenChange, anchor, kbd, side, sideOffset, name, disabled, children }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip.js

@@ -8,7 +8,7 @@ export function TooltipProvider({ children }) {
     return (_jsx(BaseTooltip.Provider, { delay: 150, closeDelay: 0, children: children }));
 }
 /* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
-export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }) {
+export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }) {
     // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
     const hintRef = useCallback((element) => {
         if (element === null || kbd === undefined || typeof kbd === 'string') {
@@ -16,6 +16,6 @@ export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false
         }
         return registerShortcutHint(element, kbd);
     }, [kbd]);
-    return (_jsxs(BaseTooltip.Root, { disabled: disabled, children: [_jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { className: "tooltip-popup", children: _jsxs(BaseTooltip.Viewport, { className: "max-w-72 px-[9px] py-[5px] text-pretty", children: [_jsx("span", { className: "wrap-anywhere", children: label }), kbd !== undefined &&
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled, open: open, onOpenChange: onOpenChange, disableHoverablePopup: children === undefined, children: [children && _jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { anchor: anchor, side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { role: "tooltip", className: "tooltip-popup", children: _jsxs(BaseTooltip.Viewport, { className: "max-w-72 px-[9px] py-[5px] text-pretty", children: [_jsx("span", { className: "wrap-anywhere", children: label }), kbd !== undefined &&
                                     (typeof kbd === 'string' ? (_jsx(Kbd, { variant: "inline", className: "ml-2", children: kbd })) : (_jsx(Kbd, { shortcut: kbd, variant: "inline", className: "ml-2" })))] }) }) }) })] }));
 }

package/dist/file-tree/use-slots.js

@@ -1,4 +1,5 @@
 import { useEffect, useId, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { pathOfRow, visibleRows } from './helpers.js';
 import { FILE_TREE_CSS } from './style.js';
 // beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
@@ -134,7 +135,8 @@ export function useFileTreeSlots(model, frame, label) {
                 .join('|');
             if (snapshot !== key) {
                 snapshot = key;
-                setSlots(next);
+                // Recycled rows must paint with their new portal contents in the same frame.
+                flushSync(() => setSlots(next));
             }
             position();
         };

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { Select, type SelectGroup, type SelectItem, type SelectProps } from './S
 export { Separator, type SeparatorProps } from './Separator.tsx';
 export { ShortcutHints } from './ShortcutHints.tsx';
 export { Skeleton, type SkeletonProps } from './Skeleton.tsx';
+export { Slider, type SliderProps } from './Slider.tsx';
 export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
 export { Spinner, type SpinnerProps } from './Spinner.tsx';
 export { Stepper, type StepperProps } from './Stepper.tsx';

package/dist/index.js

@@ -45,6 +45,7 @@ export { Select } from './Select.js';
 export { Separator } from './Separator.js';
 export { ShortcutHints } from './ShortcutHints.js';
 export { Skeleton } from './Skeleton.js';
+export { Slider } from './Slider.js';
 export { SlidingColumn } from './SlidingColumn.js';
 export { Spinner } from './Spinner.js';
 export { Stepper } from './Stepper.js';

package/dist/step-places.d.ts

@@ -0,0 +1 @@
+export declare const placesOf: (step: number) => number;

package/dist/step-places.js

@@ -0,0 +1,2 @@
+/* The places after the separator that `step` is written with, so a step of 0.1 shows `1,0` and never `1`. */
+export const placesOf = (step) => String(step).split('.')[1]?.length ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "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",
@@ -78,6 +78,7 @@
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.5",
     "@types/bun": "^1.4.2",
     "@types/opentype.js": "^1.3.10",
     "@types/react": "^19.3.0",
@@ -88,7 +89,6 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",
-    "typescript": "^7.0.2",
-    "@happy-dom/global-registrator": "^20.14.5"
+    "typescript": "^7.0.2"
   }
 }

package/src/Pill.tsx

@@ -18,8 +18,14 @@ const TONES = {
 
 /* The corners of a button, so a pill reads as a small label of the same family and not as a badge. A tag, at the end of a line of prose, is tighter and heavier. */
 const SHAPES = {
-    pill: 'rounded-md px-2 py-0.5',
-    tag: 'rounded-md px-1.5 py-0.5 font-medium'
+    pill: 'rounded-md',
+    tag: 'rounded-md font-medium'
+};
+
+/* The text stays at the theme's smallest size, so `sm` gives up padding: 20px tall instead of 24. */
+const PADDING = {
+    pill: { md: 'px-2 py-0.5', sm: 'px-1.5' },
+    tag: { md: 'px-1.5 py-0.5', sm: 'px-1' }
 };
 
 export interface PillProps {
@@ -27,6 +33,7 @@ export interface PillProps {
     children: ReactNode;
     tone?: keyof typeof TONES;
     shape?: keyof typeof SHAPES;
+    size?: 'md' | 'sm';
     /* A branch name or a count reads better in the monospace face. */
     mono?: boolean;
     /* With a handler the pill is a button; without one it is a label. */
@@ -39,9 +46,9 @@ export interface PillProps {
 }
 
 /* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
-export function Pill({ icon, children, tone = 'muted', shape = 'pill', mono = false, onClick, pressed, disabled, className, ref }: PillProps) {
+export function Pill({ icon, children, tone = 'muted', shape = 'pill', size = 'md', mono = false, onClick, pressed, disabled, className, ref }: PillProps) {
     // Never broken inside itself: in a row that wraps, a pill that does not fit moves to the next line whole.
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], PADDING[shape][size], TONES[tone], mono && 'font-mono', className);
     if (!onClick) {
         return (
             <span ref={ref} className={shared}>

package/src/Slider.tsx

@@ -0,0 +1,68 @@
+import { useId, type Ref } from 'react';
+import clsx from 'clsx';
+import { Slider as BaseSlider } from '@base-ui-components/react/slider';
+import { formatFixed } from './format/number.ts';
+import { placesOf } from './step-places.ts';
+
+export interface SliderProps {
+    value: number;
+    onValueChange(value: number): void;
+    min: number;
+    max: number;
+    step?: number;
+    /* Places after the separator, always shown. Defaults to the places `step` is written with. */
+    decimals?: number;
+    /* Printed right after the number, such as `px` or `%`. */
+    unit?: string;
+    /* Shown above the track and read as the slider's name. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* A number picked along a range: the label and the value on one line, the track under them. */
+export function Slider({ value, onValueChange, min, max, step = 1, decimals = placesOf(step), unit, label, disabled, className, ref }: SliderProps) {
+    const labelId = useId();
+    const reading = formatFixed(value, decimals);
+    // Base UI adds steps in floating point, so 0.2 plus 0.1 would arrive as 0.30000000000000004.
+    const places = Math.max(placesOf(step), placesOf(min));
+    // Base UI's Page Up jumps 10 whatever the range; a tenth of the range suits 0 to 1 as well as 0 to 1000.
+    const largeStep = Math.max(step, Math.round((max - min) / 10 / step) * step);
+
+    return (
+        <BaseSlider.Root
+            ref={ref}
+            value={value}
+            onValueChange={(next) => onValueChange(Number(next.toFixed(places)))}
+            min={min}
+            max={max}
+            step={step}
+            largeStep={largeStep}
+            disabled={disabled}
+            aria-labelledby={labelId}
+            className={clsx('flex flex-col gap-1 data-disabled:opacity-50', className)}
+        >
+            <div className="flex items-baseline justify-between gap-3 text-xs">
+                <span id={labelId} className="min-w-0 truncate text-text">
+                    {label}
+                </span>
+                {/* The thumb already says the value through `aria-valuetext`. */}
+                <span aria-hidden className="shrink-0 text-text-muted tabular-nums">
+                    {reading}
+                    {unit}
+                </span>
+            </div>
+            {/* The padding gives the thumb room at either end; Base UI leaves it out of the pointer's position. */}
+            <BaseSlider.Control className="flex h-5 touch-none items-center px-2 select-none">
+                <BaseSlider.Track className="relative h-1 w-full rounded-full bg-border-strong">
+                    <BaseSlider.Indicator className="rounded-full bg-accent" />
+                    <BaseSlider.Thumb
+                        getAriaValueText={() => `${reading}${unit ?? ''}`}
+                        className="block size-4 rounded-full bg-surface-raised shadow-raised outline-offset-2 outline-accent has-focus-visible:outline-2"
+                    />
+                </BaseSlider.Track>
+            </BaseSlider.Control>
+        </BaseSlider.Root>
+    );
+}

package/src/Stepper.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { formatFixed } from './format/number.ts';
 import { IconButton } from './IconButton.tsx';
+import { placesOf } from './step-places.ts';
 
 export interface StepperProps {
     value: number;
@@ -21,8 +22,6 @@ export interface StepperProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-const placesOf = (step: number): number => String(step).split('.')[1]?.length ?? 0;
-
 /* A number between minus and plus, in one sunken group so the three read as a single control. */
 export function Stepper({ value, onValueChange, min, max, step, decimals = placesOf(step), unit, label, className, ref }: StepperProps) {
     const { t } = useTranslation('ui');

package/src/Toasts.tsx

@@ -82,7 +82,7 @@ function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; fo
                 )}
             </span>
             <div className="flex min-w-0 grow flex-col gap-1">
-                <span className="text-sm text-text">{toast.title}</span>
+                <span className="text-sm break-words text-text">{toast.title}</span>
                 {/* Wraps rather than clips: the line under the title is the one that says what went
                    wrong, and a reason cut off at the card's edge is no reason at all. */}
                 {toast.description !== undefined && toast.description !== '' && (

package/src/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type ReactElement, type ReactNode } from 'react';
+import { useCallback, type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
 import { Kbd } from './Kbd.tsx';
 import type { Shortcut } from './shortcut.ts';
@@ -17,6 +17,10 @@ export function TooltipProvider({ children }: { children: ReactNode }) {
 
 export interface TooltipProps {
     label: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    /* A virtual anchor positions a controlled hint over canvas content without adding an input target. */
+    anchor?: ComponentProps<typeof BaseTooltip.Positioner>['anchor'];
     /* A shortcut, or a short phrase about a key that is not one ("Shift skips the cache"). */
     kbd?: Shortcut | string;
     side?: TooltipSide;
@@ -27,11 +31,11 @@ export interface TooltipProps {
     /* Keeps the hint closed, for a trigger that only needs one some of the time. */
     disabled?: boolean;
     /* The trigger element. Its own children and handlers are kept; Base UI merges the tooltip props in. */
-    children: ReactElement<Record<string, unknown>>;
+    children?: ReactElement<Record<string, unknown>>;
 }
 
 /* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
-export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }: TooltipProps) {
+export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }: TooltipProps) {
     // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
     const hintRef = useCallback(
         (element: HTMLElement | null) => {
@@ -44,11 +48,11 @@ export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false
     );
 
     return (
-        <BaseTooltip.Root disabled={disabled}>
-            <BaseTooltip.Trigger ref={hintRef} render={children} aria-label={name && typeof label === 'string' ? label : undefined} />
+        <BaseTooltip.Root disabled={disabled} open={open} onOpenChange={onOpenChange} disableHoverablePopup={children === undefined}>
+            {children && <BaseTooltip.Trigger ref={hintRef} render={children} aria-label={name && typeof label === 'string' ? label : undefined} />}
             <BaseTooltip.Portal>
-                <BaseTooltip.Positioner side={side} sideOffset={sideOffset} className="tooltip-positioner">
-                    <BaseTooltip.Popup className="tooltip-popup">
+                <BaseTooltip.Positioner anchor={anchor} side={side} sideOffset={sideOffset} className="tooltip-positioner">
+                    <BaseTooltip.Popup role="tooltip" className="tooltip-popup">
                         <BaseTooltip.Viewport className="max-w-72 px-[9px] py-[5px] text-pretty">
                             <span className="wrap-anywhere">{label}</span>
                             {/* The viewport wraps its children in a div of its own, so the 8px

package/src/file-tree/use-slots.ts

@@ -1,4 +1,5 @@
 import { useEffect, useId, useState } from 'react';
+import { flushSync } from 'react-dom';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
 import { pathOfRow, visibleRows } from './helpers.ts';
 import { FILE_TREE_CSS } from './style.ts';
@@ -153,7 +154,8 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 .join('|');
             if (snapshot !== key) {
                 snapshot = key;
-                setSlots(next);
+                // Recycled rows must paint with their new portal contents in the same frame.
+                flushSync(() => setSlots(next));
             }
             position();
         };

package/src/index.ts

@@ -61,6 +61,7 @@ export { Select, type SelectGroup, type SelectItem, type SelectProps } from './S
 export { Separator, type SeparatorProps } from './Separator.tsx';
 export { ShortcutHints } from './ShortcutHints.tsx';
 export { Skeleton, type SkeletonProps } from './Skeleton.tsx';
+export { Slider, type SliderProps } from './Slider.tsx';
 export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
 export { Spinner, type SpinnerProps } from './Spinner.tsx';
 export { Stepper, type StepperProps } from './Stepper.tsx';

package/src/step-places.ts

@@ -0,0 +1,2 @@
+/* The places after the separator that `step` is written with, so a step of 0.1 shows `1,0` and never `1`. */
+export const placesOf = (step: number): number => String(step).split('.')[1]?.length ?? 0;