@surflane/ui 0.12.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/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.js

@@ -1,5 +1,6 @@
 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
@@ -8,7 +9,12 @@ export const BarList = function BarList({ label, items, max, sorted = true, maxR
     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);
-    const write = (value) => formatValue ? formatValue(value) : number.format(value);
+    // 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)

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

@@ -58,12 +58,14 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'childre
     /** 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. */
+     * 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. */
-    legendLimit?: number;
+    /** 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. */
@@ -108,6 +110,6 @@ export type ChartSeriesMarkProps = {
 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, xScale, yScale, curve, stacked, references, density, legendPosition, legendLimit, 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;

package/dist/chart.js

@@ -7,6 +7,7 @@ import { Table } from './table.js';
 import { Button } from './button.js';
 import { Popover } from './popover.js';
 import { cx } from './parts.js';
+import { useComponentDensity } from './sizing.js';
 const chartLabels = {
     missing: 'Not available',
     empty: 'No numeric measurements to display.',
@@ -70,11 +71,10 @@ const timeSteps = [
     ['month', 6, 182 * DAY],
     ['year', 1, 365 * DAY],
 ];
-/** Ticks on round local times, such as every 6 hours or the first of each month, at
- * most six across the span. */
-function timeTicks(min, max) {
-    const [unit, count] = timeSteps.find(([, , ms]) => (max - min) / ms <= 6) ??
-        timeSteps[timeSteps.length - 1];
+/** Ticks on round local times, such as every 6 hours or the first of each month: at
+ * most six across the span, and no more than fit, so their steps stay even. */
+function timeTicks(min, max, fits = () => true) {
+    const [unit, count] = timeSteps.find(([stepUnit, , ms]) => (max - min) / ms <= 6 && fits(stepUnit, ms)) ?? timeSteps[timeSteps.length - 1];
     const date = new Date(min);
     date.setSeconds(0, 0);
     if (unit === 'minute')
@@ -117,6 +117,36 @@ function logTicks(low, high) {
     return ticks;
 }
 const isNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+/** An element's content width, kept current as it resizes; 0 before it is measured. */
+function useWidth() {
+    const [element, setElement] = React.useState(null);
+    const [width, setWidth] = React.useState(0);
+    React.useLayoutEffect(() => {
+        if (!element)
+            return;
+        setWidth(element.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element]);
+    return [setElement, width, element];
+}
+let measureCanvas;
+/** How wide a tick label draws, in the font it draws in. */
+function textWidth(text, font) {
+    measureCanvas ??= document.createElement('canvas');
+    const context = measureCanvas.getContext('2d');
+    if (!context)
+        return text.length * 7.5;
+    context.font = font;
+    return context.measureText(text).width;
+}
+/** The gap Recharts keeps between tick labels. */
+const TICK_GAP = 24;
+/** The value axis and the plot's right margin: what the plot gives up of the frame. */
+const PLOT_INSET = 56 + 20;
 /** True once the font of the tick labels has loaded. Recharts measures a label to keep
  * it inside the chart and caches that width; measured in the fallback font, the last
  * label overflows by a few pixels once the real font arrives. */
@@ -196,13 +226,14 @@ function FloatingValues({ host, hidden, render, }) {
 }
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export const Chart = function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height, includeZero = true, palette = 'neutral', xScale = 'category', yScale = 'linear', curve = 'linear', stacked = false, references = [], density = 'default', legendPosition = 'top', legendLimit, locale = 'en-US', formatValue, labels, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ref, ...props }) {
+export const Chart = function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height, includeZero = true, palette = 'neutral', xScale = 'category', yScale = 'linear', curve = 'linear', stacked = false, references = [], density: ownDensity, legendPosition = 'top', legendLimit, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ref, ...props }) {
     const text = { ...chartLabels, ...labels };
     const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
     const colorFor = (index) => seriesColor(index, palette, series[index]?.color);
     const timeScale = xScale === 'time';
     const logScale = yScale === 'log';
     const stacks = stacked && type !== 'line';
+    const density = useComponentDensity(ownDensity);
     const compact = density === 'compact';
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
@@ -210,6 +241,24 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
     const [host, setHost] = React.useState(null);
     const fontsReady = useFontReady(host, data.map((d) => d.label).join(''));
     const [floatHost, setFloatHost] = React.useState(null);
+    const [setFrame, frameWidth, frame] = useWidth();
+    // legendLimit='auto': lay every series out, count those on the first line, then
+    // fold the rest, keeping room for the "+N" button. A new width lays them out again.
+    const legendList = React.useRef(null);
+    const [legendFit, setLegendFit] = React.useState();
+    React.useLayoutEffect(() => {
+        if (legendLimit === 'auto')
+            setLegendFit(undefined);
+    }, [legendLimit, frameWidth, series.length]);
+    React.useLayoutEffect(() => {
+        if (legendLimit !== 'auto' || legendFit !== undefined)
+            return;
+        const items = Array.from(legendList.current?.querySelectorAll(':scope > [data-series]') ?? []);
+        if (!items.length)
+            return;
+        const line = items.filter((item) => item.offsetTop === items[0].offsetTop).length;
+        setLegendFit(line >= items.length ? items.length : Math.max(1, line - 1));
+    });
     const [dismissed, setDismissed] = React.useState(false);
     // The table renders once it is first opened, so a page of charts stays light.
     const [tableOpened, setTableOpened] = React.useState(false);
@@ -341,17 +390,31 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
         if (!timeScale || !rows.length)
             return undefined;
         const first = rows[0].time, last = rows[rows.length - 1].time;
-        const { ticks: timeAxisTicks, unit: timeUnit } = timeTicks(first, last);
-        // Bars sit on their time, so half an interval on each side keeps the end ones whole.
-        const pad = type === 'bar' ? (interval || DAY) / 2 : 0;
-        const subDay = timeUnit === 'minute' || timeUnit === 'hour';
-        const tickFormat = new Intl.DateTimeFormat(locale, subDay
+        const formatFor = (unit) => new Intl.DateTimeFormat(locale, unit === 'minute' || unit === 'hour'
             ? { hour: 'numeric', minute: '2-digit' }
-            : timeUnit === 'day'
+            : unit === 'day'
                 ? { month: 'short', day: 'numeric' }
-                : timeUnit === 'month'
+                : unit === 'month'
                     ? { month: 'short', year: 'numeric' }
                     : { year: 'numeric' });
+        // Pick the step from the plot's width and the width its labels draw at, so a
+        // narrow chart steps every 2 or 3 hours instead of dropping uneven ticks.
+        const plotWidth = frameWidth - PLOT_INSET;
+        const font = frame && fontsReady
+            ? `12px ${getComputedStyle(frame).fontFamily}`
+            : undefined;
+        const fits = (unit, ms) => {
+            if (plotWidth <= 0 || !font)
+                return true;
+            const label = Math.max(textWidth(formatFor(unit).format(new Date(first)), font), textWidth(formatFor(unit).format(new Date(2026, 9, 24, 22, 30)), font));
+            const count = Math.floor((last - first) / ms) + 1;
+            return count * (label + TICK_GAP) - TICK_GAP <= plotWidth;
+        };
+        const { ticks: timeAxisTicks, unit: timeUnit } = timeTicks(first, last, fits);
+        // Bars sit on their time, so half an interval on each side keeps the end ones whole.
+        const pad = type === 'bar' ? (interval || DAY) / 2 : 0;
+        const subDay = timeUnit === 'minute' || timeUnit === 'hour';
+        const tickFormat = formatFor(timeUnit);
         const dayFormat = new Intl.DateTimeFormat(locale, {
             month: 'short',
             day: 'numeric',
@@ -367,7 +430,7 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
                     : tickFormat.format(date);
             },
         };
-    }, [rows, timeScale, type, interval, locale]);
+    }, [rows, timeScale, type, interval, locale, frameWidth, frame, fontsReady]);
     const hasValues = values.length > 0;
     const changeHidden = (next) => {
         if (hiddenSeries === undefined)
@@ -390,12 +453,13 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
         ? `${r.label} ${format(r.y)}`
         : `${r.label} ${formatNumber(r.from) ?? text.missing}–${format(r.to)}`;
     const legendButton = (s, index) => (_jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'surf-chart-legend-button', "aria-label": text.series(s.label), "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-legend-${index}` }), _jsx("span", { children: s.label })] }));
-    const shown = legendLimit !== undefined && legendLimit < series.length
-        ? series.slice(0, Math.max(0, legendLimit))
+    const limit = legendLimit === 'auto' ? legendFit : legendLimit;
+    const shown = limit !== undefined && limit < series.length
+        ? series.slice(0, Math.max(0, limit))
         : series;
     const folded = series.slice(shown.length);
-    const legend = (_jsxs("ul", { className: 'surf-chart-legend', "aria-label": text.legend(title), children: [shown.map((s, index) => (_jsx("li", { children: legendButton(s, index) }, s.key))), folded.length > 0 && (_jsx("li", { children: _jsxs(Popover.Root, { children: [_jsxs(Popover.Trigger, { className: 'surf-chart-legend-button surf-chart-legend-more', "aria-label": text.moreSeries(folded.length), children: ["+", folded.length] }), _jsx(Popover.Content, { size: 'small', children: _jsx("ul", { className: 'surf-chart-legend-list', children: folded.map((s, index) => (_jsx("li", { children: legendButton(s, shown.length + index) }, s.key))) }) })] }) })), references.map((reference, index) => (_jsxs("li", { className: 'surf-chart-legend-reference', children: [_jsx(ReferenceMark, { reference: reference }), _jsx("span", { children: referenceText(reference) })] }, index)))] }));
-    return (_jsxs("figure", { ...props, ref: ref, "data-density": density, className: cx('surf-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'surf-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'surf-chart-frame', children: [_jsxs("div", { className: 'surf-chart-key', children: [_jsxs("p", { className: 'surf-chart-axis-label', children: [yLabel, " (", unit, ")"] }), legendPosition === 'top' && legend] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'surf-chart-plot', onKeyDownCapture: (event) => {
+    const legend = (_jsxs("ul", { ref: legendList, className: 'surf-chart-legend', "aria-label": text.legend(title), children: [shown.map((s, index) => (_jsx("li", { "data-series": '', children: legendButton(s, index) }, s.key))), folded.length > 0 && (_jsx("li", { children: _jsxs(Popover.Root, { children: [_jsxs(Popover.Trigger, { className: 'surf-chart-legend-button surf-chart-legend-more', "aria-label": text.moreSeries(folded.length), children: ["+", folded.length] }), _jsx(Popover.Content, { size: 'small', children: _jsx("ul", { className: 'surf-chart-legend-list', children: folded.map((s, index) => (_jsx("li", { children: legendButton(s, shown.length + index) }, s.key))) }) })] }) })), references.map((reference, index) => (_jsxs("li", { className: 'surf-chart-legend-reference', children: [_jsx(ReferenceMark, { reference: reference }), _jsx("span", { children: referenceText(reference) })] }, index)))] }));
+    return (_jsxs("figure", { ...props, ref: ref, "data-density": density, className: cx('surf-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'surf-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'surf-chart-frame', ref: setFrame, children: [_jsxs("div", { className: 'surf-chart-key', children: [_jsxs("p", { className: 'surf-chart-axis-label', children: [yLabel, " (", unit, ")"] }), legendPosition === 'top' && legend] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'surf-chart-plot', onKeyDownCapture: (event) => {
                                     if (event.key === 'Escape')
                                         setDismissed(true);
                                     else if (event.key === 'ArrowLeft' ||
@@ -455,5 +519,5 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
                                     }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) })), legendPosition === 'bottom' && (_jsx("div", { className: 'surf-chart-key', "data-position": 'bottom', children: legend }))] }), hasValues && (_jsx("p", { className: 'surf-chart-help', id: `${id}-keys`, children: text.keyboardHelp })), _jsx("div", { className: 'surf-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'surf-chart-table', onToggle: (event) => {
                     if (event.currentTarget.open)
                         setTableOpened(true);
-                }, children: [_jsx("summary", { children: text.viewTable }), tableOpened && (_jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', numeric: true, children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { numeric: true, children: formatNumber(row.values[s.key]) ?? text.missing }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) }))] })] }));
+                }, children: [_jsx("summary", { children: text.viewTable }), tableOpened && (_jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { density: density, children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', numeric: true, children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { numeric: true, children: formatNumber(row.values[s.key]) ?? text.missing }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) }))] })] }));
 };

package/dist/choice.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 export declare const ChoiceResetPaint: React.Context<number>;
 /** Choice controls follow the surrounding size; `size` sets one control's scale. */
 export type ChoiceSize = {
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 };

package/dist/class-names.d.ts

@@ -1,6 +1,2 @@
 /** Joins class names, skipping empty ones. */
 export declare function cx(...classes: (string | false | null | undefined)[]): string;
-/** The data-size value: a deprecated short spelling (sm, md, lg, icon-sm, icon-xs,
- * icon-lg) renders as its full name, so both spellings meet the same CSS; other values
- * such as xs or icon pass through. */
-export declare function sizeName<Size extends string>(size?: Size): import("./size.js").ComponentSize | Size | "icon-small" | "icon-large" | undefined;

package/dist/class-names.js

@@ -1,18 +1,4 @@
-// Class and data attribute helpers, with no React: server components use them too.
-import { normalizeSize } from './size.js';
 /** Joins class names, skipping empty ones. */
 export function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
-/** The data-size value: a deprecated short spelling (sm, md, lg, icon-sm, icon-xs,
- * icon-lg) renders as its full name, so both spellings meet the same CSS; other values
- * such as xs or icon pass through. */
-export function sizeName(size) {
-    return size === 'sm' || size === 'md' || size === 'lg'
-        ? normalizeSize(size)
-        : size === 'icon-sm' || size === 'icon-xs'
-            ? 'icon-small'
-            : size === 'icon-lg'
-                ? 'icon-large'
-                : size;
-}