@surflane/ui 0.11.0 → 0.13.0

package/dist/alert-dialog.d.ts

@@ -1,35 +1,53 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
 import { DialogFooter, DialogHeader } from './dialog.js';
 declare const AlertDialogContent: ({ size, className, focusBoundaryLabel, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> & {
     /** Width and density; an alert dialog is small unless set. */
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
     focusBoundaryLabel?: string;
 } & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
+declare const AlertDialogTitle: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & {
+    ref?: React.Ref<HTMLHeadingElement> | undefined;
+}) => React.JSX.Element;
+declare const AlertDialogDescription: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element;
 export declare const AlertDialog: {
     Content: ({ size, className, focusBoundaryLabel, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> & {
         /** Width and density; an alert dialog is small unless set. */
-        size?: ComponentSizeAlias;
+        size?: ComponentSize;
         focusBoundaryLabel?: string;
     } & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Header: typeof DialogHeader;
     Footer: typeof DialogFooter;
+    Title: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLHeadingElement> | undefined;
+    }) => React.JSX.Element;
+    Description: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
     Root: typeof BaseAlertDialog.Root;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Trigger: BaseAlertDialog.Trigger;
     Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Handle: typeof BaseAlertDialog.Handle;
     createHandle: typeof BaseAlertDialog.createHandle;
 };
-export { AlertDialogContent };
-export declare const AlertDialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, AlertDialogDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, AlertDialogHandle: typeof BaseAlertDialog.Handle, AlertDialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogRoot: typeof BaseAlertDialog.Root, AlertDialogTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, AlertDialogTrigger: BaseAlertDialog.Trigger, AlertDialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogHeader: typeof DialogHeader, AlertDialogFooter: typeof DialogFooter;
+export { AlertDialogContent, AlertDialogTitle, AlertDialogDescription };
+export declare const AlertDialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, AlertDialogHandle: typeof BaseAlertDialog.Handle, AlertDialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogRoot: typeof BaseAlertDialog.Root, AlertDialogTrigger: BaseAlertDialog.Trigger, AlertDialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogHeader: typeof DialogHeader, AlertDialogFooter: typeof DialogFooter;

package/dist/alert-dialog.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sizeName, skin } from './parts.js';
+import { part, skin, usePortalDirection } from './parts.js';
 import { useDialogFocusBoundary } from './dialog-focus.js';
 import { useComponentSize } from './sizing.js';
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
@@ -8,14 +8,19 @@ import { DialogFooter, DialogHeader } from './dialog.js';
 const AlertDialogContent = function AlertDialogContent({ size, className, focusBoundaryLabel = 'Continue dialog navigation', ref, ...props }) {
     const scheme = useComponentSize(size);
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'surf-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, ref: ref, className: skin('surf-dialog-popup surf-dialog-content surf-confirm-content', className) })] }));
+    const dir = usePortalDirection();
+    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'surf-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { dir: dir, "data-ui-size": scheme, "data-size": size, ...props, ref: ref, className: skin('surf-dialog-popup surf-dialog-content surf-confirm-content', className) })] }));
 };
+const AlertDialogTitle = /* @__PURE__ */ part(BaseAlertDialog.Title, 'surf-dialog-title');
+const AlertDialogDescription = /* @__PURE__ */ part(BaseAlertDialog.Description, 'surf-dialog-description');
 export const AlertDialog = {
     ...BaseAlertDialog,
     Content: AlertDialogContent,
     Header: DialogHeader,
     Footer: DialogFooter,
+    Title: AlertDialogTitle,
+    Description: AlertDialogDescription,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export { AlertDialogContent };
-export const { Backdrop: AlertDialogBackdrop, Close: AlertDialogClose, Description: AlertDialogDescription, Handle: AlertDialogHandle, Popup: AlertDialogPopup, Portal: AlertDialogPortal, Root: AlertDialogRoot, Title: AlertDialogTitle, Trigger: AlertDialogTrigger, Viewport: AlertDialogViewport, Header: AlertDialogHeader, Footer: AlertDialogFooter, } = AlertDialog;
+export { AlertDialogContent, AlertDialogTitle, AlertDialogDescription };
+export const { Backdrop: AlertDialogBackdrop, Close: AlertDialogClose, Handle: AlertDialogHandle, Popup: AlertDialogPopup, Portal: AlertDialogPortal, Root: AlertDialogRoot, Trigger: AlertDialogTrigger, Viewport: AlertDialogViewport, Header: AlertDialogHeader, Footer: AlertDialogFooter, } = AlertDialog;

package/dist/app-shell.d.ts

@@ -25,6 +25,11 @@ export type AppShellSidebarToggleProps = Omit<ButtonProps, 'children'> & {
     labels?: Partial<AppShellSidebarToggleLabels>;
     children?: React.ReactNode;
 };
+export type AppShellMenuTriggerProps = Omit<ButtonProps, 'children'> & {
+    /** The button's name. Say what it opens. */
+    label?: string;
+    children?: React.ReactNode;
+};
 export type AppShellBrandProps = Omit<useRender.ComponentProps<'div'>, 'ref' | 'children'> & {
     /** The product mark, about 24px. It is decorative: the name names the brand. */
     mark?: React.ReactNode;
@@ -55,6 +60,9 @@ export declare const AppShell: {
     SidebarToggle: ({ labels, className, children, onClick, ref, ...props }: AppShellSidebarToggleProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }) => React.JSX.Element;
+    MenuTrigger: ({ label, className, children, ref, ...props }: AppShellMenuTriggerProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
     Brand: ({ mark, name, description, render, className, ref, ...props }: AppShellBrandProps & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -85,6 +93,8 @@ export declare const AppShellRoot: ({ collapsed, defaultCollapsed, onCollapsedCh
     ref?: React.Ref<HTMLElement>;
 }) => React.JSX.Element, AppShellSidebarToggle: ({ labels, className, children, onClick, ref, ...props }: AppShellSidebarToggleProps & {
     ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, AppShellMenuTrigger: ({ label, className, children, ref, ...props }: AppShellMenuTriggerProps & {
+    ref?: React.Ref<HTMLButtonElement>;
 }) => React.JSX.Element, AppShellBrand: ({ mark, name, description, render, className, ref, ...props }: AppShellBrandProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>, AppShellNav: ({ label, className, children, ref, ...props }: AppShellNavProps & {

package/dist/app-shell.js

@@ -75,6 +75,11 @@ const SidebarToggle = function AppShellSidebarToggle({ labels, className, childr
                     shell.setCollapsed(!shell.collapsed);
             }, children: children ?? _jsx(Icon, { name: 'sidebar' }) }) }));
 };
+/** Opens the caller's navigation, such as a Sheet, where the sidebar is hidden: at
+ * 760px and narrower it shows at the header's end, and above that it is hidden. */
+const MenuTrigger = function AppShellMenuTrigger({ label = 'Open navigation', className, children, ref, ...props }) {
+    return (_jsx(Button, { variant: 'ghost', size: 'icon', ...props, ref: ref, "aria-label": label, className: skin('surf-app-shell-menu-trigger', className), children: children ?? _jsx(Icon, { name: 'menu', decorative: true }) }));
+};
 const Header = function AppShellHeader({ className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, className: cx('surf-app-shell-header', className) }));
 };
@@ -144,6 +149,7 @@ export const AppShell = {
     Header,
     Sidebar,
     SidebarToggle,
+    MenuTrigger,
     Brand,
     Nav,
     Content,
@@ -153,4 +159,4 @@ export const AppShell = {
     Link,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, SidebarToggle: AppShellSidebarToggle, Brand: AppShellBrand, Nav: AppShellNav, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;
+export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, SidebarToggle: AppShellSidebarToggle, MenuTrigger: AppShellMenuTrigger, Brand: AppShellBrand, Nav: AppShellNav, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;

package/dist/autocomplete.d.ts

@@ -4,9 +4,7 @@ declare const AutocompleteRoot: typeof BaseAutocomplete.Root;
 export declare const Autocomplete: {
     Root: typeof BaseAutocomplete.Root;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
-        positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
-    } & {
+    Content: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Popup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -128,8 +126,6 @@ export declare const AutocompleteArrow: React.ForwardRefExoticComponent<Omit<imp
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element, AutocompleteTrigger: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Trigger> & {
     ref?: React.Ref<HTMLButtonElement>;
-}) => React.JSX.Element, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
-    positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
-} & {
+}) => React.JSX.Element, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

package/dist/avatar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 declare const AvatarRoot: ({ size, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> & {
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 } & {
     ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Root>>;
 }) => React.JSX.Element;
@@ -11,12 +11,12 @@ declare const AvatarFallback: ({ children, className, ref, ...props }: React.Com
 }) => React.JSX.Element;
 export declare const Avatar: {
     Root: ({ size, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> & {
-        size?: ComponentSizeAlias;
+        size?: ComponentSize;
     } & {
         ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Root>>;
     }) => React.JSX.Element;
     Status: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
     } & {
         ref?: React.Ref<HTMLSpanElement> | undefined;
     }) => React.JSX.Element;
@@ -24,18 +24,18 @@ export declare const Avatar: {
         ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Fallback>>;
     }) => React.JSX.Element;
     Image: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
     } & {
         ref?: React.Ref<HTMLImageElement> | undefined;
     }) => React.JSX.Element;
 };
 export { AvatarFallback, AvatarRoot };
 export declare const AvatarImage: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
 } & {
     ref?: React.Ref<HTMLImageElement> | undefined;
 }) => React.JSX.Element, AvatarStatus: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
 } & {
     ref?: React.Ref<HTMLSpanElement> | undefined;
 }) => React.JSX.Element;

package/dist/avatar.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from './icon.js';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 import { useComponentSize } from './sizing.js';
-import { sizeName, skin, part } from './parts.js';
+import { skin, part } from './parts.js';
 const AvatarRoot = function AvatarRoot({ size, className, ref, ...props }) {
     const scheme = useComponentSize(size);
-    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": sizeName(size), "data-ui-size": scheme, className: skin('surf-avatar', className) }));
+    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": size, "data-ui-size": scheme, className: skin('surf-avatar', className) }));
 };
 const AvatarFallback = function AvatarFallback({ children, className, ref, ...props }) {
     return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('surf-avatar-fallback', className), children: children ?? _jsx(Icon, { name: 'user' }) }));

package/dist/bar-list.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export type BarListItem = {
+    id: string;
+    /** What the row measures, such as a directory or a project. */
+    label: string;
+    /** A second, quieter name under the label, such as a path. */
+    detail?: string;
+    value: number;
+    /** The value as written, such as "412 GiB". Defaults to the formatted value. */
+    text?: string;
+};
+export type BarListProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /** Names the list, such as "Disk used by directory". */
+    label: string;
+    items: readonly BarListItem[];
+    /** The value a full bar stands for. Defaults to the largest value. */
+    max?: number;
+    /** Orders the rows from the largest value down. Turn it off to keep your order. */
+    sorted?: boolean;
+    /** The rows shown before the list scrolls inside itself. */
+    maxRows?: number;
+    /** Writes a value that has no text. */
+    formatValue?: (value: number) => string;
+    locale?: string;
+};
+/** A ranked list of named values, each with a bar in proportion to the largest, such
+ * as disk by directory or tokens by project. Names and values are text; the bars are
+ * decoration. */
+export declare const BarList: ({ label, items, max, sorted, maxRows, formatValue, locale, className, style, ref, ...props }: BarListProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/bar-list.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './class-names.js';
+import { missingValue } from './format.js';
+import { ScrollArea } from './scroll-area.js';
+/** A ranked list of named values, each with a bar in proportion to the largest, such
+ * as disk by directory or tokens by project. Names and values are text; the bars are
+ * decoration. */
+export const BarList = function BarList({ label, items, max, sorted = true, maxRows, formatValue, locale, className, style, ref, ...props }) {
+    const rows = sorted ? [...items].sort((a, b) => b.value - a.value) : items;
+    const top = max ?? rows.reduce((largest, item) => Math.max(largest, item.value), 0);
+    const number = new Intl.NumberFormat(locale);
+    // A value that is missing reads as the dash every other number helper writes.
+    const write = (value) => !Number.isFinite(value)
+        ? missingValue
+        : formatValue
+            ? formatValue(value)
+            : number.format(value);
+    const scrolls = maxRows !== undefined && rows.length > maxRows;
+    const list = (_jsx("ol", { className: 'surf-bar-list-items', "aria-label": label, children: rows.map((item) => {
+            const share = top > 0 && Number.isFinite(item.value)
+                ? Math.min(100, Math.max(0, (item.value / top) * 100))
+                : 0;
+            return (_jsxs("li", { className: 'surf-bar-list-item', children: [_jsxs("span", { className: 'surf-bar-list-label', children: [_jsx("span", { className: 'surf-bar-list-name', title: item.label, children: item.label }), item.detail && (_jsx("span", { className: 'surf-bar-list-detail', title: item.detail, children: item.detail }))] }), _jsx("span", { className: 'surf-bar-list-bar', "aria-hidden": 'true', children: _jsx("span", { className: 'surf-bar-list-fill', style: { inlineSize: `${share}%` } }) }), _jsx("span", { className: 'surf-bar-list-value', children: item.text ?? write(item.value) })] }, item.id));
+        }) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-bar-list', className), "data-detail": items.some((item) => item.detail) || undefined, style: scrolls
+            ? {
+                ...style,
+                '--surf-bar-list-rows': maxRows,
+            }
+            : style, children: scrolls ? (_jsx(ScrollArea, { orientation: 'vertical', label: label, children: list })) : (list) }));
+};

package/dist/bottom-navigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { StatusTone } from './status.js';
 export type BottomNavigationRootProps = React.ComponentPropsWithoutRef<'nav'> & {
     /** Names the navigation, such as "Primary". */
     'aria-label': string;
@@ -20,17 +21,20 @@ export type BottomNavigationItemProps = Omit<useRender.ComponentProps<'a'>, 'ref
     /** What the badge means, read after the label, such as "3 unread". A count reads
      * as its number without it; a dot needs it. */
     badgeLabel?: string;
+    /** The badge's color, by what it means: danger for what needs action now,
+     * caution for what needs a look soon, neutral for news. */
+    badgeTone?: StatusTone;
 };
 export declare const BottomNavigation: {
     Root: ({ visible, position, className, children, ref, ...props }: BottomNavigationRootProps & {
         ref?: React.Ref<HTMLElement>;
     }) => React.JSX.Element;
-    Item: ({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }: BottomNavigationItemProps & {
+    Item: ({ icon, label, current, badge, badgeLabel, badgeTone, render, className, ref, ...props }: BottomNavigationItemProps & {
         ref?: React.Ref<HTMLAnchorElement>;
     }) => React.JSX.Element;
 };
 export declare const BottomNavigationRoot: ({ visible, position, className, children, ref, ...props }: BottomNavigationRootProps & {
     ref?: React.Ref<HTMLElement>;
-}) => React.JSX.Element, BottomNavigationItem: ({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }: BottomNavigationItemProps & {
+}) => React.JSX.Element, BottomNavigationItem: ({ icon, label, current, badge, badgeLabel, badgeTone, render, className, ref, ...props }: BottomNavigationItemProps & {
     ref?: React.Ref<HTMLAnchorElement>;
 }) => React.JSX.Element;

package/dist/bottom-navigation.js

@@ -9,7 +9,7 @@ const Root = function BottomNavigationRoot({ visible = 'mobile', position = 'fix
 };
 /** One destination: an icon above its label. Pass a router's link element as
  * `render` to keep client navigation. */
-const Item = function BottomNavigationItem({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }) {
+const Item = function BottomNavigationItem({ icon, label, current, badge, badgeLabel, badgeTone = 'danger', render, className, ref, ...props }) {
     const count = typeof badge === 'number' && badge > 0
         ? badge > 99
             ? '99+'
@@ -25,7 +25,7 @@ const Item = function BottomNavigationItem({ icon, label, current, badge, badgeL
             ...props,
             'aria-current': current ? 'page' : props['aria-current'],
             className: cx('surf-bottom-nav-item', className),
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'surf-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'surf-bottom-nav-badge', "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'surf-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'surf-feedback-sr', children: [", ", spoken] }))] })),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'surf-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'surf-bottom-nav-badge', "data-tone": badgeTone, "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'surf-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'surf-feedback-sr', children: [", ", spoken] }))] })),
         },
     });
     return _jsx("li", { className: 'surf-bottom-nav-entry', children: link });

package/dist/button.d.ts

@@ -1,17 +1,12 @@
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import { useRender } from '@base-ui/react/use-render';
-import { type ComponentSizeAlias } from './sizing.js';
-/** Visual priority. `default` is deprecated: it is `primary` under its former name, and
- * is removed in a later minor. Without a variant a button is `primary`. */
-export type ButtonVariant = 'primary' | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
-/**
- * small, default and large set the size scheme; icon, icon-small and icon-large are
- * square icon buttons. Deprecated, removed in a later minor: sm, md and lg (write the
- * full names), icon-sm, icon-xs and icon-lg (icon-small, icon-large) and xs, which is
- * off the scale and keeps 24px on touch screens.
- */
-export type ButtonSize = ComponentSizeAlias | 'icon' | 'icon-small' | 'icon-large' | 'xs' | 'icon-xs' | 'icon-sm' | 'icon-lg';
+import { type ComponentSize } from './sizing.js';
+/** Visual priority. Without a variant a button is `primary`. */
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+/** small, default and large set the size scheme; icon, icon-small and icon-large are
+ * square icon buttons on the same scale. */
+export type ButtonSize = ComponentSize | 'icon' | 'icon-small' | 'icon-large';
 export type ButtonProps = Omit<React.ComponentProps<typeof BaseButton>, 'ref'> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/button.js

@@ -3,21 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import { useRender } from '@base-ui/react/use-render';
 import { useComponentSize } from './sizing.js';
-import { sizeName, skin, cx } from './parts.js';
-/** The size scheme a button size implies: icon sizes follow the scale, xs and icon
- * keep the surrounding scheme. */
+import { skin, cx } from './parts.js';
+/** The size scheme a button size implies: icon sizes follow the scale, and icon keeps
+ * the surrounding scheme. */
 function schemeOf(size) {
-    return size === 'icon-small' || size === 'icon-sm' || size === 'icon-xs'
+    return size === 'icon-small'
         ? 'small'
-        : size === 'icon-large' || size === 'icon-lg'
+        : size === 'icon-large'
             ? 'large'
-            : size === 'xs' || size === 'icon'
+            : size === 'icon'
                 ? undefined
                 : size;
 }
 export const Button = function Button({ className, variant = 'primary', size, ref, ...props }) {
     const scheme = useComponentSize(schemeOf(size));
-    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('surf-button', className), "data-variant": variant, "data-size": sizeName(size), "data-ui-size": scheme }));
+    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('surf-button', className), "data-variant": variant, "data-size": size, "data-ui-size": scheme }));
 };
 /** A link that looks like a Button. It navigates, so it stays a link for assistive
  * technology; pass a router's link element as `render` to keep client navigation. */
@@ -31,7 +31,7 @@ export const LinkButton = function LinkButton({ render, className, variant = 'pr
             ...props,
             className: cx('surf-button', className),
             'data-variant': variant,
-            'data-size': sizeName(size),
+            'data-size': size,
             'data-ui-size': scheme,
         },
     });

package/dist/card.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Surface } from './layout.js';
-declare const CardRoot: ({ className, padding, ref, ...props }: React.ComponentPropsWithoutRef<typeof Surface> & {
+import { type ComponentSize } from './size.js';
+declare const CardRoot: ({ className, padding, size, ref, ...props }: React.ComponentPropsWithoutRef<typeof Surface> & {
+    /** The card's padding, title and the controls inside, as a SizeProvider would set. */
+    size?: ComponentSize;
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
 declare const CardTitle: ({ level, className, ref, ...props }: React.ComponentPropsWithoutRef<"h3"> & {
@@ -292,11 +295,13 @@ declare const CardTitle: ({ level, className, ref, ...props }: React.ComponentPr
     exportparts?: string | undefined | undefined;
 }, HTMLHeadingElement>;
 export declare const Card: {
-    Root: ({ className, padding, ref, ...props }: React.ComponentPropsWithoutRef<typeof Surface> & {
+    Root: ({ className, padding, size, ref, ...props }: React.ComponentPropsWithoutRef<typeof Surface> & {
+        /** The card's padding, title and the controls inside, as a SizeProvider would set. */
+        size?: ComponentSize;
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Header: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
         ref?: React.Ref<HTMLDivElement> | undefined;
     }) => React.JSX.Element;
     Title: ({ level, className, ref, ...props }: React.ComponentPropsWithoutRef<"h3"> & {
@@ -588,29 +593,29 @@ export declare const Card: {
         exportparts?: string | undefined | undefined;
     }, HTMLHeadingElement>;
     Description: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
         ref?: React.Ref<HTMLParagraphElement> | undefined;
     }) => React.JSX.Element;
     Body: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
         ref?: React.Ref<HTMLDivElement> | undefined;
     }) => React.JSX.Element;
     Footer: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
         ref?: React.Ref<HTMLDivElement> | undefined;
     }) => React.JSX.Element;
 };
 export { CardRoot, CardTitle };
 export declare const CardHeader: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element, CardDescription: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
     ref?: React.Ref<HTMLParagraphElement> | undefined;
 }) => React.JSX.Element, CardBody: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element, CardFooter: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element;

package/dist/card.js

@@ -3,8 +3,13 @@ import * as React from 'react';
 import { Surface } from './layout.js';
 import { cx } from './class-names.js';
 import { elementPart } from './element-part.js';
-const CardRoot = function CardRoot({ className, padding, ref, ...props }) {
-    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: cx('surf-card', className) }));
+import { normalizeSize } from './size.js';
+import { SizeScope } from './sizing.js';
+const CardRoot = function CardRoot({ className, padding, size, ref, ...props }) {
+    const scheme = normalizeSize(size);
+    const card = (_jsx(Surface, { ...props, padding: padding, ref: ref, "data-ui-size": scheme, className: cx('surf-card', className) }));
+    // Only an explicit size opens a client boundary, so popups inside keep it.
+    return scheme ? _jsx(SizeScope, { size: scheme, children: card }) : card;
 };
 const CardTitle = function CardTitle({ level = 3, className, ref, ...props }) {
     return React.createElement(`h${level}`, {

package/dist/chart.d.ts

@@ -1,12 +1,32 @@
 import * as React from 'react';
 export type ChartDatum = {
     id: string;
+    /** What the readout and the table call the row, such as its full date and time. */
     label: string;
+    /** When the row was measured, in ms since the epoch or as a Date. Required for
+     * xScale="time", where it places the row on the axis. */
+    time?: number | Date;
     values: Readonly<Record<string, number | null | undefined>>;
 };
 export type ChartSeries = {
     key: string;
     label: string;
+    /** A color of your own, such as var(--surf-chart-category-3), in place of the
+     * palette's. Marks and dashes still tell the series apart. */
+    color?: string;
+};
+export type ChartTone = 'neutral' | 'caution' | 'danger';
+/** A threshold line at y, or a band from one value to another, such as a target
+ * range. The legend names it with its value. */
+export type ChartReference = {
+    y: number;
+    label: string;
+    tone?: ChartTone;
+} | {
+    from: number;
+    to: number;
+    label: string;
+    tone?: ChartTone;
 };
 export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children' | 'title'> & {
     title: string;
@@ -17,13 +37,35 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'childre
     xLabel: string;
     yLabel: string;
     type?: 'line' | 'bar' | 'area';
+    /** Plot height in px: 280 by default, 180 when compact. */
     height?: number;
     /** Keeps 0 on the value axis. Turn it off for values far from zero, such as
      * prices, so the line uses the height; bars always start at zero. */
     includeZero?: boolean;
-    /** neutral tells series apart by ink, dashes and markers. categorical adds six hues,
-     * for categories that color must separate, such as buckets or sectors. */
+    /** neutral tells series apart by ink, dashes and markers. categorical adds twelve
+     * hues, for categories that color must separate, such as buckets or sectors. */
     palette?: 'neutral' | 'categorical';
+    /** category spaces the rows evenly and names them by label. time places them by
+     * data[].time, puts ticks on round times and breaks a line where sampling stops. */
+    xScale?: 'category' | 'time';
+    /** log suits values across orders of magnitude, such as prefill and decode
+     * throughput. Zero and negative values stay off the plot and in the table. */
+    yScale?: 'linear' | 'log';
+    /** step holds each value until the next, for values sampled when they change. */
+    curve?: 'linear' | 'step';
+    /** Stacks bar and area series, so the top of the stack is their total. */
+    stacked?: boolean;
+    /** Thresholds and target bands over the plot. The value axis reaches them. */
+    references?: readonly ChartReference[];
+    /** compact keeps the plot, legend and floating values for a dashboard card; the
+     * caption, keyboard help and readout stay for assistive technology. Without it the
+     * chart follows a SizeProvider density. Its data table takes the same density. */
+    density?: 'default' | 'compact';
+    /** Above the plot, beside the value axis name, or below it. */
+    legendPosition?: 'top' | 'bottom';
+    /** Shows this many series in the legend; the rest fold behind a "+N" button. auto
+     * keeps the legend on one line: as many as fit the chart's width, the rest folded. */
+    legendLimit?: number | 'auto';
     locale?: string;
     /** Formats a value for the readout, the table and the value axis ticks. The unit
      * follows it in the readout and the table, and names the axis. */
@@ -52,9 +94,22 @@ export type ChartLabels = {
     legend: (title: string) => string;
     /** A legend button that shows or hides a series. */
     series: (label: string) => string;
+    /** The button that opens the series past legendLimit. */
+    moreSeries: (count: number) => string;
+    /** The sum of stacked series in the readout. */
+    total: string;
+};
+export type ChartSeriesMarkProps = {
+    type?: 'line' | 'bar' | 'area';
+    /** The series' place in the chart's series, which sets its dash, marker and color. */
+    index: number;
+    palette?: 'neutral' | 'categorical';
+    color?: string;
 };
+/** A series' swatch as Chart's legend draws it, for a legend or key of your own. */
+export declare function ChartSeriesMark({ type, index, palette, color, }: ChartSeriesMarkProps): React.JSX.Element;
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export declare const Chart: ({ title, description, data, series, unit, xLabel, yLabel, type, height, includeZero, palette, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, className, ref, ...props }: ChartProps & {
+export declare const Chart: ({ title, description, data, series, unit, xLabel, yLabel, type, height, includeZero, palette, xScale, yScale, curve, stacked, references, density: ownDensity, legendPosition, legendLimit, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, className, ref, ...props }: ChartProps & {
     ref?: React.Ref<HTMLElement>;
 }) => React.JSX.Element;