@adecore/ui 0.14.0 → 0.16.0-beta.0

package/dist/Pill.js

@@ -1,25 +1,30 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-/* What the label says about the thing it names, drawn as its ground. */
+/*
+ * What the label says about the thing it names, drawn as its ground. Every ground is an alpha over
+ * whatever the pill stands on, the way a border is: in the dark theme it lifts a shade off the row
+ * under it, in the light theme it sinks one. A solid sunken ground read as a hole on a dark row.
+ */
 const TONES = {
-    muted: 'bg-surface-sunken text-text-muted',
-    /* Lifted off a sunken header, for a label that should stand out as a control. */
-    raised: 'bg-surface-active text-text-muted',
+    muted: 'bg-text/7 text-text-muted',
+    /* A step further off the ground, for a label that should stand out as a control. */
+    raised: 'bg-text/12 text-text-muted',
     idle: 'bg-status-idle/15 text-status-idle',
     needsYou: 'bg-status-needs-you/15 text-status-needs-you',
     error: 'bg-status-error/15 text-status-error',
-    accent: 'bg-accent-soft text-accent'
+    accent: 'bg-accent/16 text-accent'
 };
-/* A pill rides in a header or a row; a tag sits at the end of a line of prose, tighter and bolder. */
+/* 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-full px-2 py-0.5',
+    pill: 'rounded-md px-2 py-0.5',
     tag: 'rounded-md px-1.5 py-0.5 font-medium'
 };
 /* 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 }) {
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 text-xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    // 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);
     if (!onClick) {
         return (_jsxs("span", { ref: ref, className: shared, children: [icon, children] }));
     }
-    return (_jsxs("button", { ref: ref, type: "button", "aria-pressed": pressed, disabled: disabled, className: clsx(shared, 'enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-surface-active aria-pressed:text-text'), onClick: onClick, children: [icon, children] }));
+    return (_jsxs("button", { ref: ref, type: "button", "aria-pressed": pressed, disabled: disabled, className: clsx(shared, 'enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-text/14 aria-pressed:text-text'), onClick: onClick, children: [icon, children] }));
 }

package/dist/Switch.js

@@ -3,5 +3,7 @@ import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
 /* On or off, as a switch rather than a checkbox: a setting that takes effect the moment it flips. */
 export function Switch({ checked, onCheckedChange, label, disabled, className, ref }) {
-    return (_jsx(BaseSwitch.Root, { ref: ref, checked: checked, onCheckedChange: (next) => onCheckedChange(next), "aria-label": label, disabled: disabled, className: clsx('relative h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50', className), children: _jsx(BaseSwitch.Thumb, { className: "block h-4 w-4 rounded-full bg-surface-raised shadow-raised transition-transform data-checked:translate-x-4" }) }));
+    return (_jsx(BaseSwitch.Root, { ref: ref, checked: checked, onCheckedChange: (next) => onCheckedChange(next), "aria-label": label, disabled: disabled, 
+        // Base UI renders the root as a `span`, which ignores its size outside a flex row unless it lays out as a box.
+        className: clsx('relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50', className), children: _jsx(BaseSwitch.Thumb, { className: "block h-4 w-4 rounded-full bg-surface-raised shadow-raised transition-transform data-checked:translate-x-4" }) }));
 }

package/dist/format/index.d.ts

@@ -1,6 +1,6 @@
 export { formatClock, formatDateTime, formatDay, formatDayClock, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.ts';
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from './duration.ts';
 export { FALLBACK_LOCALE, formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
-export { formatBytes, formatDecimal, formatMoney, formatNumber, formatPercent, formatTokens, formatUsdSignificant } from './number.ts';
+export { formatBytes, formatDecimal, formatFixed, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, formatTokens, formatUsdSignificant } from './number.ts';
 export { FORMAT_LANGUAGE, FORMAT_REGIONS, FORMAT_REGION_CHOICES, FORMAT_SYSTEM, formatRegionFrom, regionName } from './regions.ts';
 export { localTimeZone } from './time-zone.ts';

package/dist/format/index.js

@@ -2,6 +2,6 @@
 export { formatClock, formatDateTime, formatDay, formatDayClock, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.js';
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from './duration.js';
 export { FALLBACK_LOCALE, formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale } from './locale.js';
-export { formatBytes, formatDecimal, formatMoney, formatNumber, formatPercent, formatTokens, formatUsdSignificant } from './number.js';
+export { formatBytes, formatDecimal, formatFixed, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, formatTokens, formatUsdSignificant } from './number.js';
 export { FORMAT_LANGUAGE, FORMAT_REGIONS, FORMAT_REGION_CHOICES, FORMAT_SYSTEM, formatRegionFrom, regionName } from './regions.js';
 export { localTimeZone } from './time-zone.js';

package/dist/format/number.d.ts

@@ -1,6 +1,8 @@
 export declare const formatNumber: (value: number) => string;
 export declare const formatDecimal: (value: number) => string;
 export declare const formatFixed: (value: number, decimals: number) => string;
+export declare const formatRounded: (value: number, decimals: number) => string;
+export declare const formatNumeral: (numeral: string | number) => string;
 export declare const formatPercent: (value: number) => string;
 export declare const formatMoney: (value: number, currency: string, maximumFractionDigits?: number) => string;
 export declare const formatUsdSignificant: (value: number) => string;

package/dist/format/number.js

@@ -7,14 +7,43 @@ export const formatNumber = (value) => numberFormatter(WHOLE).format(Math.round(
 export const formatDecimal = (value) => numberFormatter(ONE_DECIMAL).format(value);
 const fixedSpecs = new Map();
 /* Always `decimals` places, so values that follow each other keep one width: `1,0` and `1,5`, never `1` and `1,5`. */
-export const formatFixed = (value, decimals) => {
+export const formatFixed = (value, decimals) => numberFormatter(fixedSpec(decimals)).format(value);
+const fixedSpec = (decimals) => {
     let spec = fixedSpecs.get(decimals);
     if (spec === undefined) {
         spec = { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
         fixedSpecs.set(decimals, spec);
     }
+    return spec;
+};
+const roundedSpecs = new Map();
+/* At most `decimals` places, trailing zeros dropped, for a figure whose fraction may or may not be there: `39`, `1,95`. */
+export const formatRounded = (value, decimals) => {
+    let spec = roundedSpecs.get(decimals);
+    if (spec === undefined) {
+        spec = { maximumFractionDigits: decimals };
+        roundedSpecs.set(decimals, spec);
+    }
     return numberFormatter(spec).format(value);
 };
+/* Intl takes at most this many fraction digits. */
+const MAX_FRACTION_DIGITS = 100;
+const NUMERAL = /^[+-]?\d+(?:\.(\d+))?$/;
+/*
+ * A numeral as a database writes it (`12900`, `-0.50`, `9007199254740993`), in the region's notation
+ * with every digit kept: a decimal or a big integer arrives as text, and a float would round it.
+ * Text that is no plain numeral, such as `NaN` or `1e999`, comes back as it is.
+ */
+export const formatNumeral = (numeral) => {
+    const text = typeof numeral === 'number' ? String(numeral) : numeral.trim();
+    const match = NUMERAL.exec(text);
+    if (match === null) {
+        return text;
+    }
+    const decimals = Math.min(match[1]?.length ?? 0, MAX_FRACTION_DIGITS);
+    // A string goes to Intl as it is, so it formats the exact decimal and not the nearest double.
+    return numberFormatter(fixedSpec(decimals)).format(text);
+};
 /* Percent as Activity Monitor writes it: a decimal under ten, where the difference still shows. */
 export const formatPercent = (value) => `${value < 10 ? formatDecimal(value) : formatNumber(value)}%`;
 /*

package/dist/index.d.ts

@@ -1,11 +1,15 @@
 export * as ContextMenu from './context-menu/index.parts.ts';
 export * as Dialog from './dialog/index.parts.ts';
+export * as KeyValueList from './key-value-list/index.parts.ts';
 export * as Menu from './menu/index.parts.ts';
 export * as Popover from './popover/index.parts.ts';
 export * as PreviewCard from './preview-card/index.parts.ts';
+export * as Tabs from './tabs/index.parts.ts';
 export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogTextProps, DialogTitleProps } from './dialog/parts.tsx';
 export type { MenuCheckProps, MenuHintProps, MenuLabelProps, MenuPopupProps, MenuRowActionProps, MenuRowProps, MenuRowSubmenuTriggerProps } from './menu/parts.tsx';
+export type { KeyValueListItemProps, KeyValueListNameProps, KeyValueListRootProps, KeyValueListValueProps } from './key-value-list/parts.tsx';
 export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
+export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue } from './tabs/parts.tsx';
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button.tsx';

package/dist/index.js

@@ -4,9 +4,11 @@
  */
 export * as ContextMenu from './context-menu/index.parts.js';
 export * as Dialog from './dialog/index.parts.js';
+export * as KeyValueList from './key-value-list/index.parts.js';
 export * as Menu from './menu/index.parts.js';
 export * as Popover from './popover/index.parts.js';
 export * as PreviewCard from './preview-card/index.parts.js';
+export * as Tabs from './tabs/index.parts.js';
 export { AccentSwatches } from './AccentSwatches.js';
 export { Banner } from './Banner.js';
 export { Button } from './Button.js';

package/dist/key-value-list/index.parts.d.ts

@@ -0,0 +1 @@
+export { KeyValueListItem as Item, KeyValueListName as Name, KeyValueListRoot as Root, KeyValueListValue as Value } from './parts.tsx';

package/dist/key-value-list/index.parts.js

@@ -0,0 +1 @@
+export { KeyValueListItem as Item, KeyValueListName as Name, KeyValueListRoot as Root, KeyValueListValue as Value } from './parts.js';

package/dist/key-value-list/parts.d.ts

@@ -0,0 +1,13 @@
+import { useRender } from '@base-ui-components/react/use-render';
+export type KeyValueListRootProps = useRender.ComponentProps<'dl'> & {
+    divided?: boolean;
+};
+export declare function KeyValueListRoot({ divided, render, className, ref, ...props }: KeyValueListRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type KeyValueListItemProps = useRender.ComponentProps<'div'>;
+export declare function KeyValueListItem({ render, className, ref, ...props }: KeyValueListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type KeyValueListNameProps = useRender.ComponentProps<'dt'>;
+export declare function KeyValueListName({ render, className, ref, ...props }: KeyValueListNameProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type KeyValueListValueProps = useRender.ComponentProps<'dd'> & {
+    mono?: boolean;
+};
+export declare function KeyValueListValue({ mono, render, className, ref, ...props }: KeyValueListValueProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/key-value-list/parts.js

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+/*
+ * The names take the width of the widest one, up to two fifths of the list, and a longer name wraps
+ * there. Every item is a subgrid of the list, so the names line up across rows and a hairline runs
+ * under both columns.
+ */
+export function KeyValueListRoot({ divided = false, render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'dl',
+        props: {
+            ...props,
+            className: clsx('grid min-w-0 grid-cols-[fit-content(40%)_minmax(0,1fr)] gap-x-3 text-xs', divided ? 'divide-y divide-border-soft *:py-1.5' : 'gap-y-1', className)
+        }
+    });
+}
+export function KeyValueListItem({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'div', props: { ...props, className: clsx('col-span-2 grid grid-cols-subgrid', className) } });
+}
+export function KeyValueListName({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'dt', props: { ...props, className: clsx('min-w-0 break-words text-text-faint', className) } });
+}
+/* Selectable, unlike the interface around it, so a long value can be copied. */
+export function KeyValueListValue({ mono = false, render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'dd',
+        props: { ...props, className: clsx('min-w-0 break-words text-text select-text', mono && 'font-mono text-code', className) }
+    });
+}

package/dist/locales/en.json

@@ -55,5 +55,9 @@
         "label": "Projects",
         "recent": "Recent projects",
         "actionsFor": "Actions for {{name}}"
+    },
+    "tabs": {
+        "more": "More",
+        "close": "Close tab"
     }
 }

package/dist/locales/nl.json

@@ -55,5 +55,9 @@
         "label": "Projecten",
         "recent": "Recente projecten",
         "actionsFor": "Acties voor {{name}}"
+    },
+    "tabs": {
+        "more": "Meer",
+        "close": "Tabblad sluiten"
     }
 }

package/dist/tabs/index.parts.d.ts

@@ -0,0 +1 @@
+export { TabsCount as Count, TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab } from './parts.tsx';

package/dist/tabs/index.parts.js

@@ -0,0 +1 @@
+export { TabsCount as Count, TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab } from './parts.js';

package/dist/tabs/overflow.d.ts

@@ -0,0 +1 @@
+export declare const shownTabs: (widths: readonly number[], room: number, gap: number, more: number, picked: number) => number[];

package/dist/tabs/overflow.js

@@ -0,0 +1,29 @@
+/*
+ * The tabs a strip shows, by index, given the width of every tab, the room the strip has, the gap
+ * between two tabs and the width of the button that opens the rest. Everything fits, or the tabs fit
+ * from the start up to the button. The picked tab is never left to the menu: it takes the place of
+ * the last ones that no longer fit beside it.
+ */
+export const shownTabs = (widths, room, gap, more, picked) => {
+    const span = (indices) => indices.reduce((sum, index) => sum + widths[index], 0) + gap * Math.max(0, indices.length - 1);
+    const all = widths.map((_, index) => index);
+    // Half a pixel of slack, since a measured width is fractional and the room is not.
+    if (span(all) <= room + 0.5) {
+        return all;
+    }
+    const limit = room - more - gap + 0.5;
+    const shown = [];
+    for (const index of all) {
+        if (span([...shown, index]) > limit) {
+            break;
+        }
+        shown.push(index);
+    }
+    if (picked < 0 || picked >= widths.length || shown.includes(picked)) {
+        return shown;
+    }
+    while (shown.length > 0 && span([...shown, picked]) > limit) {
+        shown.pop();
+    }
+    return [...shown, picked];
+};

package/dist/tabs/parts.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Tabs as BaseTabs } from '@base-ui-components/react/tabs';
+import { useRender } from '@base-ui-components/react/use-render';
+export type TabsValue = BaseTabs.Tab.Value;
+export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueChange'> & {
+    onValueChange?(value: TabsValue): void;
+};
+export declare function TabsRoot({ value, defaultValue, onValueChange, ...props }: TabsRootProps): import("react").JSX.Element;
+export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'className'> & {
+    className?: string;
+    end?: ReactNode;
+};
+export declare function TabsList({ className, children, end, ...props }: TabsListProps): import("react").JSX.Element;
+type TabProps = ComponentProps<typeof BaseTabs.Tab>;
+export type TabsTabProps = TabProps & {
+    onClose?(): void;
+};
+export declare function TabsTab({ className, onClose, children, ...props }: TabsTabProps): import("react").JSX.Element;
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/tabs").TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export type TabsCountProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+    value: number;
+};
+export declare function TabsCount({ value, render, className, ref, ...props }: TabsCountProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export {};

package/dist/tabs/parts.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useLayoutEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ChevronDown, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Tabs as BaseTabs } from '@base-ui-components/react/tabs';
+import { useRender } from '@base-ui-components/react/use-render';
+import { withClass } from '../class-name.js';
+import { formatNumber } from '../format/number.js';
+import { Icon } from '../Icon.js';
+import { IconButton } from '../IconButton.js';
+import { MenuItem, MenuPopup, MenuRoot, MenuTrigger } from '../menu/parts.js';
+import { Pill } from '../Pill.js';
+import { shownTabs } from './overflow.js';
+const SelectionContext = createContext({ value: undefined, select: () => { } });
+/* Whether a part is drawn in the menu of tabs that do not fit, where a count goes to the end of its row. */
+const InMenuContext = createContext(false);
+/* The underline sits over the strip's border rather than above it, without a negative margin that would make the strip scroll. */
+const TAB = 'relative flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium text-text-muted hover:text-text data-[active]:text-text data-[disabled]:opacity-50 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 data-[active]:after:bg-text';
+/* The button that opens the tabs that do not fit reads as one more tab, at the very end of the strip. */
+const MORE = clsx(TAB, 'ml-auto data-[popup-open]:text-text');
+/* Holds the picked tab itself, uncontrolled or not, so a tab picked from the menu of the strip changes it too. */
+export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }) {
+    const [own, setOwn] = useState(defaultValue);
+    const current = value === undefined ? own : value;
+    const select = (next) => {
+        if (value === undefined) {
+            setOwn(next);
+        }
+        onValueChange?.(next);
+    };
+    return (_jsx(SelectionContext, { value: { value: current, select }, children: _jsx(BaseTabs.Root, { value: current, onValueChange: (next) => select(next), ...props }) }));
+}
+const sameIndices = (left, right) => left !== null && left.length === right.length && left.every((index, at) => index === right[at]);
+/*
+ * The tabs that fit, and a menu at the end of the strip with the ones that do not. Every tab is measured
+ * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
+ * since the menu repeats what a tab holds.
+ */
+export function TabsList({ className, children, end, ...props }) {
+    const { t } = useTranslation('ui');
+    const { value, select } = useContext(SelectionContext);
+    const strip = useRef(null);
+    const measure = useRef(null);
+    const tail = useRef(null);
+    // Null until the first measure, which runs before the first paint.
+    const [shown, setShown] = useState(null);
+    const tabs = Children.toArray(children).filter((child) => isValidElement(child) && child.type === TabsTab);
+    const picked = tabs.findIndex((tab) => tab.props.value === value);
+    useLayoutEffect(() => {
+        const host = strip.current;
+        const row = measure.current;
+        if (!host || !row) {
+            return;
+        }
+        const fit = () => {
+            const style = getComputedStyle(host);
+            const gap = parseFloat(style.columnGap) || 0;
+            const taken = tail.current === null ? 0 : tail.current.getBoundingClientRect().width + gap;
+            const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
+            const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
+            const more = cells.pop() ?? 0;
+            const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, picked);
+            setShown((current) => (sameIndices(current, next) ? current : next));
+        };
+        fit();
+        const observer = new ResizeObserver(fit);
+        observer.observe(host);
+        observer.observe(row);
+        if (tail.current !== null) {
+            observer.observe(tail.current);
+        }
+        return () => observer.disconnect();
+    });
+    const visible = shown === null ? tabs : shown.map((index) => tabs[index]);
+    const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
+    return (_jsxs("div", { ref: strip, className: clsx('relative flex items-center gap-4 border-b border-border', className), children: [_jsx(BaseTabs.List, { className: "flex min-w-0 items-end gap-4", ...props, children: visible }), hidden.length > 0 && (_jsxs(MenuRoot, { children: [_jsxs(MenuTrigger, { className: MORE, children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] }), _jsx(MenuPopup, { align: "end", className: "min-w-48", children: _jsx(InMenuContext, { value: true, children: hidden.map((tab) => (_jsx(MenuItem, { disabled: tab.props.disabled, onClick: () => select(tab.props.value), children: tab.props.children }, tab.key))) }) })] })), end !== undefined && end !== null && (_jsx("div", { ref: tail, className: clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto'), children: end })), _jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute top-0 left-0 flex gap-4", children: [tabs.map((tab) => (_jsxs("span", { className: TAB, children: [tab.props.children, tab.props.onClose !== undefined && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsxs("span", { className: MORE, children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] })] })] }));
+}
+/* The close button stays out of the tab order, so a closable tab is still one stop; the keys close it from the tab itself. */
+export function TabsTab({ className, onClose, children, ...props }) {
+    const { t } = useTranslation('ui');
+    if (onClose === undefined) {
+        return (_jsx(BaseTabs.Tab, { className: withClass(TAB, className), ...props, children: children }));
+    }
+    const { onKeyDown, onAuxClick, onMouseDown, ...rest } = props;
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (!e.defaultPrevented && e.target === e.currentTarget && (e.key === 'Delete' || e.key === 'Backspace')) {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    // A middle press starts autoscroll on some platforms; the release is what closes.
+    const handleMouseDown = (e) => {
+        onMouseDown?.(e);
+        if (e.button === 1) {
+            e.preventDefault();
+        }
+    };
+    const handleAuxClick = (e) => {
+        onAuxClick?.(e);
+        if (!e.defaultPrevented && e.button === 1) {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    return (_jsxs(BaseTabs.Tab, { nativeButton: false, render: _jsx("div", {}), className: withClass(TAB, className), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onAuxClick: handleAuxClick, ...rest, children: [children, _jsx(IconButton, { icon: X, size: "2xs", label: t('tabs.close'), tabIndex: -1, onClick: (e) => {
+                    e.stopPropagation();
+                    onClose();
+                } })] }));
+}
+export const TabsPanel = BaseTabs.Panel;
+/* How much a tab holds, after its label. Nothing at zero: an empty view needs no number to say so. */
+export function TabsCount({ value, render, className, ref, ...props }) {
+    const inMenu = useContext(InMenuContext);
+    const element = useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            children: _jsx(Pill, { className: "tabular-nums", children: formatNumber(value) }),
+            className: clsx('inline-flex shrink-0', inMenu && 'ml-auto', className)
+        }
+    });
+    return value === 0 ? null : element;
+}

package/dist/theme.css

@@ -154,6 +154,9 @@
     /* No default palette: a component reaches only the semantic colors below. */
     --color-*: initial;
     --spacing: round(0.25rem, 1px);
+    /* Only for a label that rides in a row of `xs`, such as a pill: 12px, the smallest the theme sets. */
+    --text-2xs: round(0.8rem, 1px);
+    --text-2xs--line-height: round(1.25rem, 1px);
     --text-xs: round(0.875rem, 1px);
     --text-xs--line-height: round(1.25rem, 1px);
     --text-sm: round(0.9375rem, 1px);

package/package.json

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

package/src/Pill.tsx

@@ -1,20 +1,24 @@
 import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
 
-/* What the label says about the thing it names, drawn as its ground. */
+/*
+ * What the label says about the thing it names, drawn as its ground. Every ground is an alpha over
+ * whatever the pill stands on, the way a border is: in the dark theme it lifts a shade off the row
+ * under it, in the light theme it sinks one. A solid sunken ground read as a hole on a dark row.
+ */
 const TONES = {
-    muted: 'bg-surface-sunken text-text-muted',
-    /* Lifted off a sunken header, for a label that should stand out as a control. */
-    raised: 'bg-surface-active text-text-muted',
+    muted: 'bg-text/7 text-text-muted',
+    /* A step further off the ground, for a label that should stand out as a control. */
+    raised: 'bg-text/12 text-text-muted',
     idle: 'bg-status-idle/15 text-status-idle',
     needsYou: 'bg-status-needs-you/15 text-status-needs-you',
     error: 'bg-status-error/15 text-status-error',
-    accent: 'bg-accent-soft text-accent'
+    accent: 'bg-accent/16 text-accent'
 };
 
-/* A pill rides in a header or a row; a tag sits at the end of a line of prose, tighter and bolder. */
+/* 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-full px-2 py-0.5',
+    pill: 'rounded-md px-2 py-0.5',
     tag: 'rounded-md px-1.5 py-0.5 font-medium'
 };
 
@@ -36,7 +40,8 @@ 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) {
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 text-xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    // 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);
     if (!onClick) {
         return (
             <span ref={ref} className={shared}>
@@ -51,7 +56,7 @@ export function Pill({ icon, children, tone = 'muted', shape = 'pill', mono = fa
             type="button"
             aria-pressed={pressed}
             disabled={disabled}
-            className={clsx(shared, 'enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-surface-active aria-pressed:text-text')}
+            className={clsx(shared, 'enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-text/14 aria-pressed:text-text')}
             onClick={onClick}
         >
             {icon}

package/src/Switch.tsx

@@ -21,8 +21,9 @@ export function Switch({ checked, onCheckedChange, label, disabled, className, r
             onCheckedChange={(next) => onCheckedChange(next)}
             aria-label={label}
             disabled={disabled}
+            // Base UI renders the root as a `span`, which ignores its size outside a flex row unless it lays out as a box.
             className={clsx(
-                'relative h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50',
+                'relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50',
                 className
             )}
         >

package/src/format/index.ts

@@ -15,6 +15,17 @@ export {
 } from './datetime.ts';
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from './duration.ts';
 export { FALLBACK_LOCALE, formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
-export { formatBytes, formatDecimal, formatMoney, formatNumber, formatPercent, formatTokens, formatUsdSignificant } from './number.ts';
+export {
+    formatBytes,
+    formatDecimal,
+    formatFixed,
+    formatMoney,
+    formatNumber,
+    formatNumeral,
+    formatPercent,
+    formatRounded,
+    formatTokens,
+    formatUsdSignificant
+} from './number.ts';
 export { FORMAT_LANGUAGE, FORMAT_REGIONS, FORMAT_REGION_CHOICES, FORMAT_SYSTEM, formatRegionFrom, regionName } from './regions.ts';
 export { localTimeZone } from './time-zone.ts';

package/src/format/number.ts

@@ -12,15 +12,50 @@ export const formatDecimal = (value: number): string => numberFormatter(ONE_DECI
 const fixedSpecs = new Map<number, Intl.NumberFormatOptions>();
 
 /* Always `decimals` places, so values that follow each other keep one width: `1,0` and `1,5`, never `1` and `1,5`. */
-export const formatFixed = (value: number, decimals: number): string => {
+export const formatFixed = (value: number, decimals: number): string => numberFormatter(fixedSpec(decimals)).format(value);
+
+const fixedSpec = (decimals: number): Intl.NumberFormatOptions => {
     let spec = fixedSpecs.get(decimals);
     if (spec === undefined) {
         spec = { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
         fixedSpecs.set(decimals, spec);
     }
+    return spec;
+};
+
+const roundedSpecs = new Map<number, Intl.NumberFormatOptions>();
+
+/* At most `decimals` places, trailing zeros dropped, for a figure whose fraction may or may not be there: `39`, `1,95`. */
+export const formatRounded = (value: number, decimals: number): string => {
+    let spec = roundedSpecs.get(decimals);
+    if (spec === undefined) {
+        spec = { maximumFractionDigits: decimals };
+        roundedSpecs.set(decimals, spec);
+    }
     return numberFormatter(spec).format(value);
 };
 
+/* Intl takes at most this many fraction digits. */
+const MAX_FRACTION_DIGITS = 100;
+
+const NUMERAL = /^[+-]?\d+(?:\.(\d+))?$/;
+
+/*
+ * A numeral as a database writes it (`12900`, `-0.50`, `9007199254740993`), in the region's notation
+ * with every digit kept: a decimal or a big integer arrives as text, and a float would round it.
+ * Text that is no plain numeral, such as `NaN` or `1e999`, comes back as it is.
+ */
+export const formatNumeral = (numeral: string | number): string => {
+    const text = typeof numeral === 'number' ? String(numeral) : numeral.trim();
+    const match = NUMERAL.exec(text);
+    if (match === null) {
+        return text;
+    }
+    const decimals = Math.min(match[1]?.length ?? 0, MAX_FRACTION_DIGITS);
+    // A string goes to Intl as it is, so it formats the exact decimal and not the nearest double.
+    return numberFormatter(fixedSpec(decimals)).format(text as Intl.StringNumericLiteral);
+};
+
 /* Percent as Activity Monitor writes it: a decimal under ten, where the difference still shows. */
 export const formatPercent = (value: number): string => `${value < 10 ? formatDecimal(value) : formatNumber(value)}%`;
 

package/src/index.ts

@@ -5,9 +5,11 @@
 
 export * as ContextMenu from './context-menu/index.parts.ts';
 export * as Dialog from './dialog/index.parts.ts';
+export * as KeyValueList from './key-value-list/index.parts.ts';
 export * as Menu from './menu/index.parts.ts';
 export * as Popover from './popover/index.parts.ts';
 export * as PreviewCard from './preview-card/index.parts.ts';
+export * as Tabs from './tabs/index.parts.ts';
 
 export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogTextProps, DialogTitleProps } from './dialog/parts.tsx';
 export type {
@@ -19,7 +21,9 @@ export type {
     MenuRowProps,
     MenuRowSubmenuTriggerProps
 } from './menu/parts.tsx';
+export type { KeyValueListItemProps, KeyValueListNameProps, KeyValueListRootProps, KeyValueListValueProps } from './key-value-list/parts.tsx';
 export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
+export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue } from './tabs/parts.tsx';
 
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';

package/src/key-value-list/index.parts.ts

@@ -0,0 +1 @@
+export { KeyValueListItem as Item, KeyValueListName as Name, KeyValueListRoot as Root, KeyValueListValue as Value } from './parts.tsx';

package/src/key-value-list/parts.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+
+export type KeyValueListRootProps = useRender.ComponentProps<'dl'> & {
+    /* A hairline between rows, for a long list such as the headers of a message. Without it the rows sit close, for a few facts in a card. */
+    divided?: boolean;
+};
+
+/*
+ * The names take the width of the widest one, up to two fifths of the list, and a longer name wraps
+ * there. Every item is a subgrid of the list, so the names line up across rows and a hairline runs
+ * under both columns.
+ */
+export function KeyValueListRoot({ divided = false, render, className, ref, ...props }: KeyValueListRootProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'dl',
+        props: {
+            ...props,
+            className: clsx(
+                'grid min-w-0 grid-cols-[fit-content(40%)_minmax(0,1fr)] gap-x-3 text-xs',
+                divided ? 'divide-y divide-border-soft *:py-1.5' : 'gap-y-1',
+                className
+            )
+        }
+    });
+}
+
+export type KeyValueListItemProps = useRender.ComponentProps<'div'>;
+
+export function KeyValueListItem({ render, className, ref, ...props }: KeyValueListItemProps) {
+    return useRender({ render, ref, defaultTagName: 'div', props: { ...props, className: clsx('col-span-2 grid grid-cols-subgrid', className) } });
+}
+
+export type KeyValueListNameProps = useRender.ComponentProps<'dt'>;
+
+export function KeyValueListName({ render, className, ref, ...props }: KeyValueListNameProps) {
+    return useRender({ render, ref, defaultTagName: 'dt', props: { ...props, className: clsx('min-w-0 break-words text-text-faint', className) } });
+}
+
+export type KeyValueListValueProps = useRender.ComponentProps<'dd'> & {
+    /* A value read back letter by letter, such as a header, an id or a path. */
+    mono?: boolean;
+};
+
+/* Selectable, unlike the interface around it, so a long value can be copied. */
+export function KeyValueListValue({ mono = false, render, className, ref, ...props }: KeyValueListValueProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'dd',
+        props: { ...props, className: clsx('min-w-0 break-words text-text select-text', mono && 'font-mono text-code', className) }
+    });
+}

package/src/locales/en.json

@@ -1,59 +1,63 @@
 {
-  "action": {
-    "cancel": "Cancel",
-    "copy": "Copy",
-    "copyError": "Copy error",
-    "dismiss": "Dismiss",
-    "reload": "Reload",
-    "retry": "Try again",
-    "select": "Select",
-    "selectAll": "Select all"
-  },
-  "accent": {
-    "more": "More colors"
-  },
-  "settings": {
-    "title": "Settings",
-    "section": "Settings section",
-    "sections": "Settings sections",
-    "close": "Close settings",
-    "failed": "This settings page failed to render",
-    "search": {
-      "placeholder": "Search settings",
-      "clear": "Clear search",
-      "none": "Nothing matches \"{{query}}\".",
-      "results": "Search results",
-      "pane": "Section"
+    "action": {
+        "cancel": "Cancel",
+        "copy": "Copy",
+        "copyError": "Copy error",
+        "dismiss": "Dismiss",
+        "reload": "Reload",
+        "retry": "Try again",
+        "select": "Select",
+        "selectAll": "Select all"
+    },
+    "accent": {
+        "more": "More colors"
+    },
+    "settings": {
+        "title": "Settings",
+        "section": "Settings section",
+        "sections": "Settings sections",
+        "close": "Close settings",
+        "failed": "This settings page failed to render",
+        "search": {
+            "placeholder": "Search settings",
+            "clear": "Clear search",
+            "none": "Nothing matches \"{{query}}\".",
+            "results": "Search results",
+            "pane": "Section"
+        }
+    },
+    "controls": {
+        "stepper": {
+            "smaller": "Smaller",
+            "larger": "Larger",
+            "smallerFor": "{{label}}: smaller",
+            "largerFor": "{{label}}: larger"
+        }
+    },
+    "iconPicker": {
+        "label": "Icon",
+        "none": "No icon",
+        "search": "Find an icon",
+        "clear": "Clear search",
+        "noMatch": "No icon matches “{{query}}”"
+    },
+    "zoom": {
+        "out": "Zoom out",
+        "in": "Zoom in",
+        "presets": "Zoom presets",
+        "fit": "Zoom to fit",
+        "fitEverything": "Fit everything"
+    },
+    "waveform": {
+        "position": "{{time}} of {{duration}}"
+    },
+    "projectSwitcher": {
+        "label": "Projects",
+        "recent": "Recent projects",
+        "actionsFor": "Actions for {{name}}"
+    },
+    "tabs": {
+        "more": "More",
+        "close": "Close tab"
     }
-  },
-  "controls": {
-    "stepper": {
-      "smaller": "Smaller",
-      "larger": "Larger",
-      "smallerFor": "{{label}}: smaller",
-      "largerFor": "{{label}}: larger"
-    }
-  },
-  "iconPicker": {
-    "label": "Icon",
-    "none": "No icon",
-    "search": "Find an icon",
-    "clear": "Clear search",
-    "noMatch": "No icon matches “{{query}}”"
-  },
-  "zoom": {
-    "out": "Zoom out",
-    "in": "Zoom in",
-    "presets": "Zoom presets",
-    "fit": "Zoom to fit",
-    "fitEverything": "Fit everything"
-  },
-  "waveform": {
-    "position": "{{time}} of {{duration}}"
-  },
-  "projectSwitcher": {
-    "label": "Projects",
-    "recent": "Recent projects",
-    "actionsFor": "Actions for {{name}}"
-  }
 }

package/src/locales/nl.json

@@ -1,59 +1,63 @@
 {
-  "action": {
-    "cancel": "Annuleren",
-    "copy": "Kopiëren",
-    "copyError": "Fout kopiëren",
-    "dismiss": "Sluiten",
-    "reload": "Herladen",
-    "retry": "Opnieuw proberen",
-    "select": "Selecteren",
-    "selectAll": "Alles selecteren"
-  },
-  "accent": {
-    "more": "Meer kleuren"
-  },
-  "settings": {
-    "title": "Instellingen",
-    "section": "Onderdeel van de instellingen",
-    "sections": "Onderdelen van de instellingen",
-    "close": "Instellingen sluiten",
-    "failed": "Deze instellingenpagina kon niet worden getekend",
-    "search": {
-      "placeholder": "Instellingen zoeken",
-      "clear": "Zoekopdracht wissen",
-      "none": "Niets komt overeen met \"{{query}}\".",
-      "results": "Zoekresultaten",
-      "pane": "Onderdeel"
+    "action": {
+        "cancel": "Annuleren",
+        "copy": "Kopiëren",
+        "copyError": "Fout kopiëren",
+        "dismiss": "Sluiten",
+        "reload": "Herladen",
+        "retry": "Opnieuw proberen",
+        "select": "Selecteren",
+        "selectAll": "Alles selecteren"
+    },
+    "accent": {
+        "more": "Meer kleuren"
+    },
+    "settings": {
+        "title": "Instellingen",
+        "section": "Onderdeel van de instellingen",
+        "sections": "Onderdelen van de instellingen",
+        "close": "Instellingen sluiten",
+        "failed": "Deze instellingenpagina kon niet worden getekend",
+        "search": {
+            "placeholder": "Instellingen zoeken",
+            "clear": "Zoekopdracht wissen",
+            "none": "Niets komt overeen met \"{{query}}\".",
+            "results": "Zoekresultaten",
+            "pane": "Onderdeel"
+        }
+    },
+    "controls": {
+        "stepper": {
+            "smaller": "Kleiner",
+            "larger": "Groter",
+            "smallerFor": "{{label}}: kleiner",
+            "largerFor": "{{label}}: groter"
+        }
+    },
+    "iconPicker": {
+        "label": "Icoon",
+        "none": "Geen icoon",
+        "search": "Zoek een icoon",
+        "clear": "Zoekopdracht wissen",
+        "noMatch": "Geen icoon past bij “{{query}}”"
+    },
+    "zoom": {
+        "out": "Uitzoomen",
+        "in": "Inzoomen",
+        "presets": "Zoomstanden",
+        "fit": "Zoomen tot alles past",
+        "fitEverything": "Alles laten passen"
+    },
+    "waveform": {
+        "position": "{{time}} van {{duration}}"
+    },
+    "projectSwitcher": {
+        "label": "Projecten",
+        "recent": "Recente projecten",
+        "actionsFor": "Acties voor {{name}}"
+    },
+    "tabs": {
+        "more": "Meer",
+        "close": "Tabblad sluiten"
     }
-  },
-  "controls": {
-    "stepper": {
-      "smaller": "Kleiner",
-      "larger": "Groter",
-      "smallerFor": "{{label}}: kleiner",
-      "largerFor": "{{label}}: groter"
-    }
-  },
-  "iconPicker": {
-    "label": "Icoon",
-    "none": "Geen icoon",
-    "search": "Zoek een icoon",
-    "clear": "Zoekopdracht wissen",
-    "noMatch": "Geen icoon past bij “{{query}}”"
-  },
-  "zoom": {
-    "out": "Uitzoomen",
-    "in": "Inzoomen",
-    "presets": "Zoomstanden",
-    "fit": "Zoomen tot alles past",
-    "fitEverything": "Alles laten passen"
-  },
-  "waveform": {
-    "position": "{{time}} van {{duration}}"
-  },
-  "projectSwitcher": {
-    "label": "Projecten",
-    "recent": "Recente projecten",
-    "actionsFor": "Acties voor {{name}}"
-  }
 }

package/src/tabs/index.parts.ts

@@ -0,0 +1 @@
+export { TabsCount as Count, TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab } from './parts.tsx';

package/src/tabs/overflow.ts

@@ -0,0 +1,29 @@
+/*
+ * The tabs a strip shows, by index, given the width of every tab, the room the strip has, the gap
+ * between two tabs and the width of the button that opens the rest. Everything fits, or the tabs fit
+ * from the start up to the button. The picked tab is never left to the menu: it takes the place of
+ * the last ones that no longer fit beside it.
+ */
+export const shownTabs = (widths: readonly number[], room: number, gap: number, more: number, picked: number): number[] => {
+    const span = (indices: readonly number[]): number => indices.reduce((sum, index) => sum + widths[index]!, 0) + gap * Math.max(0, indices.length - 1);
+    const all = widths.map((_, index) => index);
+    // Half a pixel of slack, since a measured width is fractional and the room is not.
+    if (span(all) <= room + 0.5) {
+        return all;
+    }
+    const limit = room - more - gap + 0.5;
+    const shown: number[] = [];
+    for (const index of all) {
+        if (span([...shown, index]) > limit) {
+            break;
+        }
+        shown.push(index);
+    }
+    if (picked < 0 || picked >= widths.length || shown.includes(picked)) {
+        return shown;
+    }
+    while (shown.length > 0 && span([...shown, picked]) > limit) {
+        shown.pop();
+    }
+    return [...shown, picked];
+};

package/src/tabs/parts.tsx

@@ -0,0 +1,256 @@
+import {
+    Children,
+    createContext,
+    isValidElement,
+    useContext,
+    useLayoutEffect,
+    useRef,
+    useState,
+    type ComponentProps,
+    type ReactElement,
+    type ReactNode
+} from 'react';
+import clsx from 'clsx';
+import { ChevronDown, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Tabs as BaseTabs } from '@base-ui-components/react/tabs';
+import { useRender } from '@base-ui-components/react/use-render';
+import { withClass } from '../class-name.ts';
+import { formatNumber } from '../format/number.ts';
+import { Icon } from '../Icon.tsx';
+import { IconButton } from '../IconButton.tsx';
+import { MenuItem, MenuPopup, MenuRoot, MenuTrigger } from '../menu/parts.tsx';
+import { Pill } from '../Pill.tsx';
+import { shownTabs } from './overflow.ts';
+
+export type TabsValue = BaseTabs.Tab.Value;
+
+interface Selection {
+    value: TabsValue;
+    select(value: TabsValue): void;
+}
+
+const SelectionContext = createContext<Selection>({ value: undefined, select: () => {} });
+
+/* Whether a part is drawn in the menu of tabs that do not fit, where a count goes to the end of its row. */
+const InMenuContext = createContext(false);
+
+/* The underline sits over the strip's border rather than above it, without a negative margin that would make the strip scroll. */
+const TAB =
+    'relative flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium text-text-muted hover:text-text data-[active]:text-text data-[disabled]:opacity-50 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 data-[active]:after:bg-text';
+
+/* The button that opens the tabs that do not fit reads as one more tab, at the very end of the strip. */
+const MORE = clsx(TAB, 'ml-auto data-[popup-open]:text-text');
+
+export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueChange'> & {
+    onValueChange?(value: TabsValue): void;
+};
+
+/* Holds the picked tab itself, uncontrolled or not, so a tab picked from the menu of the strip changes it too. */
+export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }: TabsRootProps) {
+    const [own, setOwn] = useState<TabsValue>(defaultValue);
+    const current = value === undefined ? own : value;
+    const select = (next: TabsValue): void => {
+        if (value === undefined) {
+            setOwn(next);
+        }
+        onValueChange?.(next);
+    };
+    return (
+        <SelectionContext value={{ value: current, select }}>
+            <BaseTabs.Root value={current} onValueChange={(next) => select(next)} {...props} />
+        </SelectionContext>
+    );
+}
+
+export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'className'> & {
+    /* On the strip, which runs the width of the pane; padding here insets the tabs from its edges. */
+    className?: string;
+    /* Drawn after the tabs, such as a button that adds one. It keeps its own width: the tabs fit in what is left. */
+    end?: ReactNode;
+};
+
+const sameIndices = (left: readonly number[] | null, right: readonly number[]): boolean =>
+    left !== null && left.length === right.length && left.every((index, at) => index === right[at]);
+
+/*
+ * The tabs that fit, and a menu at the end of the strip with the ones that do not. Every tab is measured
+ * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
+ * since the menu repeats what a tab holds.
+ */
+export function TabsList({ className, children, end, ...props }: TabsListProps) {
+    const { t } = useTranslation('ui');
+    const { value, select } = useContext(SelectionContext);
+    const strip = useRef<HTMLDivElement>(null);
+    const measure = useRef<HTMLDivElement>(null);
+    const tail = useRef<HTMLDivElement>(null);
+    // Null until the first measure, which runs before the first paint.
+    const [shown, setShown] = useState<number[] | null>(null);
+    const tabs = Children.toArray(children).filter(
+        (child): child is ReactElement<ComponentProps<typeof TabsTab>> => isValidElement(child) && child.type === TabsTab
+    );
+    const picked = tabs.findIndex((tab) => tab.props.value === value);
+
+    useLayoutEffect(() => {
+        const host = strip.current;
+        const row = measure.current;
+        if (!host || !row) {
+            return;
+        }
+        const fit = (): void => {
+            const style = getComputedStyle(host);
+            const gap = parseFloat(style.columnGap) || 0;
+            const taken = tail.current === null ? 0 : tail.current.getBoundingClientRect().width + gap;
+            const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
+            const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
+            const more = cells.pop() ?? 0;
+            const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, picked);
+            setShown((current) => (sameIndices(current, next) ? current : next));
+        };
+        fit();
+        const observer = new ResizeObserver(fit);
+        observer.observe(host);
+        observer.observe(row);
+        if (tail.current !== null) {
+            observer.observe(tail.current);
+        }
+        return () => observer.disconnect();
+    });
+
+    const visible = shown === null ? tabs : shown.map((index) => tabs[index]!);
+    const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
+
+    return (
+        <div ref={strip} className={clsx('relative flex items-center gap-4 border-b border-border', className)}>
+            <BaseTabs.List className="flex min-w-0 items-end gap-4" {...props}>
+                {visible}
+            </BaseTabs.List>
+            {hidden.length > 0 && (
+                <MenuRoot>
+                    <MenuTrigger className={MORE}>
+                        {t('tabs.more')}
+                        <Icon icon={ChevronDown} size={14} />
+                    </MenuTrigger>
+                    <MenuPopup align="end" className="min-w-48">
+                        <InMenuContext value>
+                            {hidden.map((tab) => (
+                                <MenuItem key={tab.key} disabled={tab.props.disabled} onClick={() => select(tab.props.value)}>
+                                    {tab.props.children}
+                                </MenuItem>
+                            ))}
+                        </InMenuContext>
+                    </MenuPopup>
+                </MenuRoot>
+            )}
+            {end !== undefined && end !== null && (
+                <div ref={tail} className={clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto')}>
+                    {end}
+                </div>
+            )}
+            <div ref={measure} aria-hidden inert className="pointer-events-none invisible absolute top-0 left-0 flex gap-4">
+                {tabs.map((tab) => (
+                    <span key={tab.key} className={TAB}>
+                        {tab.props.children}
+                        {tab.props.onClose !== undefined && <span className="size-5 shrink-0" />}
+                    </span>
+                ))}
+                <span className={MORE}>
+                    {t('tabs.more')}
+                    <Icon icon={ChevronDown} size={14} />
+                </span>
+            </div>
+        </div>
+    );
+}
+
+type TabProps = ComponentProps<typeof BaseTabs.Tab>;
+
+export type TabsTabProps = TabProps & {
+    /* Makes the tab closable: a close button in it, a middle click, and Delete or Backspace while the tab has focus. */
+    onClose?(): void;
+};
+
+/* The close button stays out of the tab order, so a closable tab is still one stop; the keys close it from the tab itself. */
+export function TabsTab({ className, onClose, children, ...props }: TabsTabProps) {
+    const { t } = useTranslation('ui');
+
+    if (onClose === undefined) {
+        return (
+            <BaseTabs.Tab className={withClass(TAB, className)} {...props}>
+                {children}
+            </BaseTabs.Tab>
+        );
+    }
+
+    const { onKeyDown, onAuxClick, onMouseDown, ...rest } = props;
+
+    const handleKeyDown = (e: Parameters<NonNullable<TabProps['onKeyDown']>>[0]): void => {
+        onKeyDown?.(e);
+        if (!e.defaultPrevented && e.target === e.currentTarget && (e.key === 'Delete' || e.key === 'Backspace')) {
+            e.preventDefault();
+            onClose();
+        }
+    };
+
+    // A middle press starts autoscroll on some platforms; the release is what closes.
+    const handleMouseDown = (e: Parameters<NonNullable<TabProps['onAuxClick']>>[0]): void => {
+        onMouseDown?.(e);
+        if (e.button === 1) {
+            e.preventDefault();
+        }
+    };
+
+    const handleAuxClick = (e: Parameters<NonNullable<TabProps['onAuxClick']>>[0]): void => {
+        onAuxClick?.(e);
+        if (!e.defaultPrevented && e.button === 1) {
+            e.preventDefault();
+            onClose();
+        }
+    };
+
+    return (
+        <BaseTabs.Tab
+            nativeButton={false}
+            render={<div />}
+            className={withClass(TAB, className)}
+            onKeyDown={handleKeyDown}
+            onMouseDown={handleMouseDown}
+            onAuxClick={handleAuxClick}
+            {...rest}
+        >
+            {children}
+            <IconButton
+                icon={X}
+                size="2xs"
+                label={t('tabs.close')}
+                tabIndex={-1}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onClose();
+                }}
+            />
+        </BaseTabs.Tab>
+    );
+}
+
+export const TabsPanel = BaseTabs.Panel;
+
+export type TabsCountProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+    value: number;
+};
+
+/* How much a tab holds, after its label. Nothing at zero: an empty view needs no number to say so. */
+export function TabsCount({ value, render, className, ref, ...props }: TabsCountProps) {
+    const inMenu = useContext(InMenuContext);
+    const element = useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            children: <Pill className="tabular-nums">{formatNumber(value)}</Pill>,
+            className: clsx('inline-flex shrink-0', inMenu && 'ml-auto', className)
+        }
+    });
+    return value === 0 ? null : element;
+}

package/src/theme.css

@@ -154,6 +154,9 @@
     /* No default palette: a component reaches only the semantic colors below. */
     --color-*: initial;
     --spacing: round(0.25rem, 1px);
+    /* Only for a label that rides in a row of `xs`, such as a pill: 12px, the smallest the theme sets. */
+    --text-2xs: round(0.8rem, 1px);
+    --text-2xs--line-height: round(1.25rem, 1px);
     --text-xs: round(0.875rem, 1px);
     --text-xs--line-height: round(1.25rem, 1px);
     --text-sm: round(0.9375rem, 1px);