@adecore/ui 0.15.0 → 0.16.0-beta.0

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

@@ -9,7 +9,7 @@ export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, Dialo
 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, TabsValue } from './tabs/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/locales/en.json

@@ -57,6 +57,7 @@
         "actionsFor": "Actions for {{name}}"
     },
     "tabs": {
-        "more": "More"
+        "more": "More",
+        "close": "Close tab"
     }
 }

package/dist/locales/nl.json

@@ -57,6 +57,7 @@
         "actionsFor": "Acties voor {{name}}"
     },
     "tabs": {
-        "more": "Meer"
+        "more": "Meer",
+        "close": "Tabblad sluiten"
     }
 }

package/dist/tabs/parts.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ReactElement } from 'react';
+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;
@@ -8,11 +8,17 @@ export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueC
 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, ...props }: TabsListProps): import("react").JSX.Element;
-export declare function TabsTab({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>): import("react").JSX.Element;
+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

@@ -1,14 +1,16 @@
 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 } from 'lucide-react';
+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. */
@@ -35,11 +37,12 @@ const sameIndices = (left, right) => left !== null && left.length === right.leng
  * 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, ...props }) {
+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);
@@ -52,7 +55,9 @@ export function TabsList({ className, children, ...props }) {
         }
         const fit = () => {
             const style = getComputedStyle(host);
-            const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+            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);
@@ -62,14 +67,47 @@ export function TabsList({ className, children, ...props }) {
         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))) }) })] })), _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) => (_jsx("span", { className: TAB, children: tab.props.children }, tab.key))), _jsxs("span", { className: MORE, children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] })] })] }));
+    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 })] })] })] }));
 }
-export function TabsTab({ className, ...props }) {
-    return _jsx(BaseTabs.Tab, { className: withClass(TAB, className), ...props });
+/* 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. */
@@ -81,8 +119,8 @@ export function TabsCount({ value, render, className, ref, ...props }) {
         defaultTagName: 'span',
         props: {
             ...props,
-            children: formatNumber(value),
-            className: clsx('rounded-full bg-surface-sunken px-1.5 text-xs text-text-muted tabular-nums', inMenu && 'ml-auto', className)
+            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.15.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/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

@@ -23,7 +23,7 @@ export type {
 } 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, TabsValue } from './tabs/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/locales/en.json

@@ -1,62 +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}}"
-  },
-  "tabs": {
-    "more": "More"
-  }
 }

package/src/locales/nl.json

@@ -1,62 +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}}"
-  },
-  "tabs": {
-    "more": "Meer"
-  }
 }

package/src/tabs/parts.tsx

@@ -1,13 +1,26 @@
-import { Children, createContext, isValidElement, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactElement } from 'react';
+import {
+    Children,
+    createContext,
+    isValidElement,
+    useContext,
+    useLayoutEffect,
+    useRef,
+    useState,
+    type ComponentProps,
+    type ReactElement,
+    type ReactNode
+} from 'react';
 import clsx from 'clsx';
-import { ChevronDown } from 'lucide-react';
+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;
@@ -53,6 +66,8 @@ export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }: T
 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 =>
@@ -63,11 +78,12 @@ const sameIndices = (left: readonly number[] | null, right: readonly number[]):
  * 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, ...props }: TabsListProps) {
+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(
@@ -83,7 +99,9 @@ export function TabsList({ className, children, ...props }: TabsListProps) {
         }
         const fit = (): void => {
             const style = getComputedStyle(host);
-            const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+            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);
@@ -93,6 +111,9 @@ export function TabsList({ className, children, ...props }: TabsListProps) {
         const observer = new ResizeObserver(fit);
         observer.observe(host);
         observer.observe(row);
+        if (tail.current !== null) {
+            observer.observe(tail.current);
+        }
         return () => observer.disconnect();
     });
 
@@ -121,10 +142,16 @@ export function TabsList({ className, children, ...props }: TabsListProps) {
                     </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}>
@@ -136,8 +163,74 @@ export function TabsList({ className, children, ...props }: TabsListProps) {
     );
 }
 
-export function TabsTab({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>) {
-    return <BaseTabs.Tab className={withClass(TAB, className)} {...props} />;
+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;
@@ -155,8 +248,8 @@ export function TabsCount({ value, render, className, ref, ...props }: TabsCount
         defaultTagName: 'span',
         props: {
             ...props,
-            children: formatNumber(value),
-            className: clsx('rounded-full bg-surface-sunken px-1.5 text-xs text-text-muted tabular-nums', inMenu && 'ml-auto', className)
+            children: <Pill className="tabular-nums">{formatNumber(value)}</Pill>,
+            className: clsx('inline-flex shrink-0', inMenu && 'ml-auto', className)
         }
     });
     return value === 0 ? null : element;