@adecore/ui 0.14.0 → 0.15.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/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, 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,8 @@
         "label": "Projects",
         "recent": "Recent projects",
         "actionsFor": "Actions for {{name}}"
+    },
+    "tabs": {
+        "more": "More"
     }
 }

package/dist/locales/nl.json

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

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,18 @@
+import { type ComponentProps, type ReactElement } 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;
+};
+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 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;

package/dist/tabs/parts.js

@@ -0,0 +1,89 @@
+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 { 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 { MenuItem, MenuPopup, MenuRoot, MenuTrigger } from '../menu/parts.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, ...props }) {
+    const { t } = useTranslation('ui');
+    const { value, select } = useContext(SelectionContext);
+    const strip = useRef(null);
+    const measure = 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 room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+            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);
+        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 })] })] })] }));
+}
+export function TabsTab({ className, ...props }) {
+    return _jsx(BaseTabs.Tab, { className: withClass(TAB, className), ...props });
+}
+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: formatNumber(value),
+            className: clsx('rounded-full bg-surface-sunken px-1.5 text-xs text-text-muted tabular-nums', 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.15.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/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, 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

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

package/src/locales/nl.json

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

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,163 @@
+import { Children, createContext, isValidElement, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactElement } from 'react';
+import clsx from 'clsx';
+import { ChevronDown } 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 { MenuItem, MenuPopup, MenuRoot, MenuTrigger } from '../menu/parts.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;
+};
+
+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, ...props }: TabsListProps) {
+    const { t } = useTranslation('ui');
+    const { value, select } = useContext(SelectionContext);
+    const strip = useRef<HTMLDivElement>(null);
+    const measure = 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 room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+            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);
+        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>
+            )}
+            <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}
+                    </span>
+                ))}
+                <span className={MORE}>
+                    {t('tabs.more')}
+                    <Icon icon={ChevronDown} size={14} />
+                </span>
+            </div>
+        </div>
+    );
+}
+
+export function TabsTab({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>) {
+    return <BaseTabs.Tab className={withClass(TAB, className)} {...props} />;
+}
+
+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: formatNumber(value),
+            className: clsx('rounded-full bg-surface-sunken px-1.5 text-xs text-text-muted tabular-nums', 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);