@surflane/ui 0.12.0 → 0.13.0

package/dist/select.js

@@ -4,9 +4,21 @@ import * as React from 'react';
 import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
 import { Select as BaseSelect } from '@base-ui/react/select';
-import { sizeName, cx } from './parts.js';
+import { cx, usePortalDirection } from './parts.js';
 const isGroup = (item) => 'options' in item;
 const flatten = (items) => items.flatMap((item) => (isGroup(item) ? item.options : [item]));
+/** What a form reset reports: it has already happened, so it can't be canceled. */
+function resetDetails(event) {
+    return {
+        reason: 'none',
+        event,
+        trigger: undefined,
+        cancel() { },
+        allowPropagation() { },
+        isCanceled: false,
+        isPropagationAllowed: false,
+    };
+}
 const multipleLabels = {
     all: 'All',
     none: 'None',
@@ -19,6 +31,7 @@ const ALL = '\u0000all';
 export const Select = function Select(allProps) {
     const { options: items, className, inputRef, triggerRef, size, width = 'fill', ref, multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, labels: _labels, ...props } = allProps;
     const scheme = useComponentSize(size);
+    const dir = usePortalDirection();
     const options = flatten(items);
     // One stable callback, so the trigger ref is not detached on every render.
     const setTrigger = React.useCallback((node) => {
@@ -51,7 +64,7 @@ export const Select = function Select(allProps) {
                 setLocalValue(initialValue);
                 resetCallback.current?.((Array.isArray(initialValue)
                     ? [...initialValue]
-                    : initialValue));
+                    : initialValue), resetDetails(event));
             }, 0);
             pending.add(timer);
         };
@@ -101,7 +114,7 @@ export const Select = function Select(allProps) {
             ...options.map((option) => option.label),
         ]
         : options.map((option) => option.label);
-    return (_jsx("span", { className: cx('surf-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-width": width, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, multiple: multiple, value: selected, onValueChange: (next) => {
+    return (_jsx("span", { className: cx('surf-select', className), "data-size": size, "data-ui-size": scheme, "data-width": width, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, multiple: multiple, value: selected, onValueChange: (next, eventDetails) => {
                 if (many) {
                     const list = next ?? [];
                     const toggledAll = list.includes(ALL) !== everything;
@@ -111,12 +124,14 @@ export const Select = function Select(allProps) {
                             : choosable.map((option) => option.value)
                         : // Unchecking one option of "all" leaves the others.
                             list.filter((item) => item !== ALL);
-                    setLocalValue(values);
-                    many.onValueChange?.(values);
+                    many.onValueChange?.(values, eventDetails);
+                    if (!eventDetails.isCanceled)
+                        setLocalValue(values);
                 }
                 else {
-                    setLocalValue(next ?? '');
-                    one.onValueChange?.(next ?? '');
+                    one.onValueChange?.(next ?? '', eventDetails);
+                    if (!eventDetails.isCanceled)
+                        setLocalValue(next ?? '');
                 }
             }, inputRef: setInput, 
             // A multiple Select submits its own inputs, without the "all" value.
@@ -125,7 +140,7 @@ export const Select = function Select(allProps) {
                         // trigger is as wide as the longest.
                         _jsxs("span", { className: 'surf-select-sizer', children: [_jsx("span", { className: 'surf-select-value', children: value }), sizes.map((label, index) => (_jsx("span", { "aria-hidden": 'true', children: label }, index)))] })) : many ? (_jsx("span", { className: 'surf-select-value', children: value })) : (value), _jsx(BaseSelect.Icon, { className: 'surf-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), many &&
                     name &&
-                    chosen.map((item) => (_jsx("input", { type: 'hidden', name: name, value: item, form: form }, item))), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'surf-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'surf-select-popup', "data-ui-size": scheme, children: _jsxs(BaseSelect.List, { children: [many && (_jsxs(_Fragment, { children: [renderOption({
+                    chosen.map((item) => (_jsx("input", { type: 'hidden', name: name, value: item, form: form }, item))), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { dir: dir, className: 'surf-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'surf-select-popup', "data-ui-size": scheme, children: _jsxs(BaseSelect.List, { children: [many && (_jsxs(_Fragment, { children: [renderOption({
                                                 value: ALL,
                                                 label: text.all,
                                                 disabled: choosable.length === 0,

package/dist/sheet.d.ts

@@ -4,14 +4,22 @@ import { Footer, Header, type PanelOptions, type PanelSide } from './panel.js';
 declare function SheetRoot({ side, modal, ...props }: React.ComponentProps<typeof BaseDialog.Root> & {
     side?: PanelSide;
 }): React.JSX.Element;
-declare const SheetContent: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & PanelOptions & {
+declare const SheetContent: ({ size, flush, closeLabel, focusBoundaryLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & PanelOptions & {
+    /** Names the focus guards at the panel's edges, which VoiceOver reaches past
+     * the last control, as Dialog's do. */
+    focusBoundaryLabel?: string;
+} & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
 declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof BaseDialog.Title>): React.JSX.Element;
 declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof BaseDialog.Description>): React.JSX.Element;
 export declare const Sheet: {
     Root: typeof SheetRoot;
-    Content: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & PanelOptions & {
+    Content: ({ size, flush, closeLabel, focusBoundaryLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & PanelOptions & {
+        /** Names the focus guards at the panel's edges, which VoiceOver reaches past
+         * the last control, as Dialog's do. */
+        focusBoundaryLabel?: string;
+    } & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Header: typeof Header;

package/dist/sheet.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon } from './icon.js';
-import { skin } from './parts.js';
+import { useDialogFocusBoundary } from './dialog-focus.js';
+import { skin, usePortalDirection } from './parts.js';
 import { useComponentSize, normalizeSize } from './sizing.js';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { Body, Footer, Header, } from './panel.js';
@@ -13,10 +14,12 @@ const SheetSide = /* @__PURE__ */ React.createContext({
 function SheetRoot({ side = 'right', modal = true, ...props }) {
     return (_jsx(SheetSide.Provider, { value: { side, modal }, children: _jsx(BaseDialog.Root, { ...props, modal: modal }) }));
 }
-const SheetContent = function SheetContent({ size, flush, closeLabel = 'Close panel', className, children, ref, ...props }) {
+const SheetContent = function SheetContent({ size, flush, closeLabel = 'Close panel', focusBoundaryLabel = 'Continue panel navigation', className, children, ref, ...props }) {
     const scheme = useComponentSize(size);
+    const dir = usePortalDirection();
+    const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
     const { side, modal } = React.useContext(SheetSide);
-    return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: 'surf-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'surf-panel-backdrop' })), _jsx("div", { className: 'surf-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: skin('surf-panel', className), "data-side": side, "data-size": normalizeSize(size) ?? 'default', "data-flush": flush || undefined, children: [_jsx(BaseDialog.Close, { className: 'surf-panel-close surf-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), children] }) })] }) }));
+    return (_jsx(BaseDialog.Portal, { ref: portalRef, children: _jsxs("div", { className: 'surf-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'surf-panel-backdrop' })), _jsx("div", { className: 'surf-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDialog.Popup, { dir: dir, ...props, ref: ref, className: skin('surf-panel', className), "data-side": side, "data-size": normalizeSize(size) ?? 'default', "data-flush": flush || undefined, children: [_jsx(BaseDialog.Close, { className: 'surf-panel-close surf-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), children] }) })] }) }));
 };
 function SheetTitle({ className, ...props }) {
     return (_jsx(BaseDialog.Title, { ...props, className: skin('surf-panel-title', className) }));

package/dist/size.d.ts

@@ -1,7 +1,9 @@
 export type ComponentSize = 'small' | 'default' | 'large';
-/**
- * @deprecated The short spellings sm, md and lg render as small, default and large.
- * Write the full names; the aliases are removed in a later minor.
- */
-export type ComponentSizeAlias = ComponentSize | 'sm' | 'md' | 'lg';
-export declare function normalizeSize(size?: ComponentSizeAlias): ComponentSize | undefined;
+/** How tightly a screen packs its blocks: compact tightens gaps, insets and touch growth. */
+export type ComponentDensity = 'default' | 'compact';
+/** @deprecated The short spellings sm, md and lg were removed in 0.13, so this is
+ * ComponentSize under its former name. Write ComponentSize; this name is removed in a
+ * later minor. */
+export type ComponentSizeAlias = ComponentSize;
+/** A component's size: the one place components read it, kept for server components. */
+export declare function normalizeSize(size?: ComponentSize): ComponentSize | undefined;

package/dist/size.js

@@ -1,9 +1,4 @@
+/** A component's size: the one place components read it, kept for server components. */
 export function normalizeSize(size) {
-    return size === 'sm'
-        ? 'small'
-        : size === 'md'
-            ? 'default'
-            : size === 'lg'
-                ? 'large'
-                : size;
+    return size;
 }

package/dist/sizing.d.ts

@@ -1,13 +1,20 @@
 import * as React from 'react';
-import { normalizeSize, type ComponentSize, type ComponentSizeAlias } from './size.js';
-export { normalizeSize, type ComponentSize, type ComponentSizeAlias };
+import { normalizeSize, type ComponentDensity, type ComponentSize, type ComponentSizeAlias } from './size.js';
+export { normalizeSize, type ComponentDensity, type ComponentSize, type ComponentSizeAlias, };
 export declare const ComponentSizeContext: React.Context<ComponentSize | undefined>;
 /** Explicit sizes override the surrounding scheme; portals retain React context. */
-export declare function useComponentSize(size?: ComponentSizeAlias): ComponentSize | undefined;
+export declare function useComponentSize(size?: ComponentSize): ComponentSize | undefined;
+export declare const ComponentDensityContext: React.Context<ComponentDensity | undefined>;
+/** A component's own density, else the surrounding one, else default. */
+export declare function useComponentDensity(density?: ComponentDensity): ComponentDensity;
 /** No layout box: grid/flex items and semantic children retain their own layout.
- * For table internals, place the provider outside the table, never inside tbody. */
-export declare function SizeProvider({ size, children, }: {
-    size: ComponentSize;
+ * For table internals, place the provider outside the table, never inside tbody.
+ * Either prop may be left out to keep the surrounding size or density. */
+export declare function SizeProvider({ size, density, children, }: {
+    size?: ComponentSize;
+    /** compact tightens the gaps and insets of the blocks inside, and keeps controls
+     * at their size on touch screens instead of growing them to 44px. */
+    density?: ComponentDensity;
     children: React.ReactNode;
 }): React.JSX.Element;
 /** The size context for a part a server component renders with an explicit size, so

package/dist/sizing.js

@@ -2,17 +2,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { normalizeSize, } from './size.js';
-export { normalizeSize };
+export { normalizeSize, };
 export const ComponentSizeContext = /* @__PURE__ */ React.createContext(undefined);
 /** Explicit sizes override the surrounding scheme; portals retain React context. */
 export function useComponentSize(size) {
     const inherited = React.useContext(ComponentSizeContext);
     return normalizeSize(size) ?? inherited;
 }
+export const ComponentDensityContext = /* @__PURE__ */ React.createContext(undefined);
+/** A component's own density, else the surrounding one, else default. */
+export function useComponentDensity(density) {
+    const inherited = React.useContext(ComponentDensityContext);
+    return density ?? inherited ?? 'default';
+}
 /** No layout box: grid/flex items and semantic children retain their own layout.
- * For table internals, place the provider outside the table, never inside tbody. */
-export function SizeProvider({ size, children, }) {
-    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: 'surf-size-scope', "data-ui-size": size, children: children }) }));
+ * For table internals, place the provider outside the table, never inside tbody.
+ * Either prop may be left out to keep the surrounding size or density. */
+export function SizeProvider({ size, density, children, }) {
+    const inheritedSize = React.useContext(ComponentSizeContext);
+    const inheritedDensity = React.useContext(ComponentDensityContext);
+    return (_jsx(ComponentSizeContext.Provider, { value: size ?? inheritedSize, children: _jsx(ComponentDensityContext.Provider, { value: density ?? inheritedDensity, children: _jsx("div", { className: 'surf-size-scope', "data-ui-size": size, "data-ui-density": density, children: children }) }) }));
 }
 /** The size context for a part a server component renders with an explicit size, so
  * the popups it portals keep that size. */

package/dist/sparkline.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentSizeAlias } from './size.js';
+import type { ComponentSize } from './size.js';
 export type SparklineTrend = 'auto' | 'up' | 'down' | 'flat' | 'neutral';
 export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'role' | 'aria-label'> & {
     /** Values in order. A missing value leaves a gap. */
@@ -8,7 +8,7 @@ export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'childr
      * line is an image; this is its name. */
     label: string;
     /** 24, 32 or 48px tall. Set --surf-sparkline-height for another height. */
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
     /** A reference line: a value, the first value, or none. */
     baseline?: number | 'first' | 'none';
     /** Marks the last value with a dot. */

package/dist/sparkline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, sizeName } from './class-names.js';
+import { cx } from './class-names.js';
 const finite = (value) => typeof value === 'number' && Number.isFinite(value);
 /** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
  * when people need to read values. */
@@ -41,7 +41,7 @@ export const Sparkline = function Sparkline({ data, label, size, baseline = 'non
     let end = data.length - 1;
     while (end >= 0 && !finite(data[end]))
         end--;
-    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('surf-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'surf-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'surf-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
+    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('surf-sparkline', className), "data-size": size, "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'surf-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'surf-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
             // A zero-length segment with a round cap stays a circle however the
             // line stretches.
             _jsx("path", { className: 'surf-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));

package/dist/spinner.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './size.js';
+import { type ComponentSize } from './size.js';
 export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
     label?: string;
     decorative?: boolean;
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 };
 /** Use decorative within a loading region that already owns the announcement. */
 export declare const Spinner: ({ label, decorative, size, className, ref, ...props }: SpinnerProps & {

package/dist/spinner.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeSize } from './size.js';
-import { sizeName, cx } from './class-names.js';
+import { cx } from './class-names.js';
 /** Use decorative within a loading region that already owns the announcement. */
 export const Spinner = function Spinner({ label = 'Loading', decorative = false, size, className, ref, ...props }) {
     // An omitted size follows the surrounding size scope through CSS.
     const scheme = normalizeSize(size);
-    return (_jsxs("span", { ...props, ref: ref, className: cx('surf-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'surf-feedback-sr', children: label })] }));
+    return (_jsxs("span", { ...props, ref: ref, className: cx('surf-spinner', className), "data-size": size, "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'surf-feedback-sr', children: label })] }));
 };

package/dist/stat.d.ts

@@ -20,6 +20,10 @@ export type StatGroupProps = React.ComponentPropsWithoutRef<'div'> & {
     /** What every value in the group measures, such as "GPU temperature". It shows
      * above them and names the group. */
     label: string;
+    /** Names the group without showing the label, where a heading above already says
+     * it, such as the title of the Dashboard.Panel that holds the group. Give it a
+     * name of its own, such as "Free disk by node", so the two groups read apart. */
+    labelHidden?: boolean;
 };
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
@@ -46,7 +50,7 @@ export declare const Stat: {
         size?: import("./size.js").ComponentSize;
         ref?: React.Ref<HTMLElement> | undefined;
     }) => React.JSX.Element;
-    Group: ({ label, className, children, ref, ...props }: StatGroupProps & {
+    Group: ({ label, labelHidden, className, children, ref, ...props }: StatGroupProps & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
 };
@@ -66,6 +70,6 @@ export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<Rea
 }) => React.JSX.Element, StatCaption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
     ref?: React.Ref<HTMLElement> | undefined;
-}) => React.JSX.Element, StatGroup: ({ label, className, children, ref, ...props }: StatGroupProps & {
+}) => React.JSX.Element, StatGroup: ({ label, labelHidden, className, children, ref, ...props }: StatGroupProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

package/dist/stat.js

@@ -21,8 +21,8 @@ const StatusPart = function StatStatus({ tone, className, children, ref, ...prop
 };
 /** Several values of one measure side by side, such as one per node: a shared label
  * over Stat.Roots whose own labels name each. */
-const GroupPart = function StatGroup({ label, className, children, ref, ...props }) {
-    return (_jsxs("div", { role: 'group', "aria-label": label, ...props, ref: ref, className: cx('surf-stat-group', className), children: [_jsx("span", { className: 'surf-stat-group-label', "aria-hidden": 'true', children: label }), _jsx("div", { className: 'surf-stat-group-items', children: children })] }));
+const GroupPart = function StatGroup({ label, labelHidden = false, className, children, ref, ...props }) {
+    return (_jsxs("div", { role: 'group', "aria-label": label, ...props, ref: ref, className: cx('surf-stat-group', className), children: [!labelHidden && (_jsx("span", { className: 'surf-stat-group-label', "aria-hidden": 'true', children: label })), _jsx("div", { className: 'surf-stat-group-items', children: children })] }));
 };
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */

package/dist/table.d.ts

@@ -15,7 +15,8 @@ declare const RootPart: ({ className, size, ref, ...rest }: Omit<Omit<React.Deta
 export type TableDensity = 'default' | 'compact';
 export type TableVariant = 'plain' | 'lined' | 'grid' | 'striped';
 declare const TableRoot: ({ density, variant, stickyHeader, ref, ...props }: React.ComponentPropsWithoutRef<typeof RootPart> & {
-    /** compact tightens rows for scanning many records with a pointer. */
+    /** compact tightens rows for scanning many records with a pointer. Without it the
+     * table follows a SizeProvider density; default keeps it roomy inside a compact one. */
     density?: TableDensity;
     /**
      * plain separates rows by space; lined draws lines between rows, grid between
@@ -56,7 +57,10 @@ declare const TableSortHeader: ({ sort, onSort, disabled, children, className, r
     ref?: React.Ref<HTMLTableCellElement>;
 }) => React.JSX.Element;
 /** One-line text that ends in an ellipsis. String content also becomes the title. */
-declare const TableTruncate: ({ className, title, children, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+declare const TableTruncate: ({ measure, className, title, style, children, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+    /** The widest it gets before the ellipsis, such as '44ch' for long image
+     * references; 32ch without it. */
+    measure?: string;
     ref?: React.Ref<HTMLSpanElement>;
 }) => React.JSX.Element;
 /** A full-width body row for loading, empty, error and permission messages. It has no hover. */
@@ -80,7 +84,8 @@ export declare const Table: {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Root: ({ density, variant, stickyHeader, ref, ...props }: React.ComponentPropsWithoutRef<typeof RootPart> & {
-        /** compact tightens rows for scanning many records with a pointer. */
+        /** compact tightens rows for scanning many records with a pointer. Without it the
+         * table follows a SizeProvider density; default keeps it roomy inside a compact one. */
         density?: TableDensity;
         /**
          * plain separates rows by space; lined draws lines between rows, grid between
@@ -126,7 +131,10 @@ export declare const Table: {
     Cell: ({ align, numeric, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof CellPart>, "align"> & CellLayout & {
         ref?: React.Ref<HTMLTableCellElement>;
     }) => React.JSX.Element;
-    Truncate: ({ className, title, children, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+    Truncate: ({ measure, className, title, style, children, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+        /** The widest it gets before the ellipsis, such as '44ch' for long image
+         * references; 32ch without it. */
+        measure?: string;
         ref?: React.Ref<HTMLSpanElement>;
     }) => React.JSX.Element;
     Message: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"td"> & {

package/dist/table.js

@@ -9,7 +9,7 @@ const TableContainer = function TableContainer({ bleed, rootClassName, ref, ...p
 };
 const RootPart = /* @__PURE__ */ elementPart('table', 'surf-table');
 const TableRoot = function TableRoot({ density, variant, stickyHeader, ref, ...props }) {
-    return (_jsx(RootPart, { ...props, ref: ref, "data-density": density === 'compact' ? 'compact' : undefined, "data-variant": variant && variant !== 'plain' ? variant : undefined, "data-sticky-header": stickyHeader || undefined }));
+    return (_jsx(RootPart, { ...props, ref: ref, "data-density": density, "data-variant": variant && variant !== 'plain' ? variant : undefined, "data-sticky-header": stickyHeader || undefined }));
 };
 const layout = ({ align, numeric }) => ({
     'data-align': numeric ? 'end' : align,
@@ -36,8 +36,13 @@ const TableSortHeader = function TableSortHeader({ sort, onSort, disabled, child
     return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: cx('surf-table-sort-header', className), children: _jsxs(Button, { variant: 'ghost', className: 'surf-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
 };
 /** One-line text that ends in an ellipsis. String content also becomes the title. */
-const TableTruncate = function TableTruncate({ className, title, children, ref, ...props }) {
-    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: cx('surf-table-truncate', className), children: children }));
+const TableTruncate = function TableTruncate({ measure, className, title, style, children, ref, ...props }) {
+    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), style: measure
+            ? {
+                ...style,
+                '--surf-table-truncate-measure': measure,
+            }
+            : style, className: cx('surf-table-truncate', className), children: children }));
 };
 /** A full-width body row for loading, empty, error and permission messages. It has no hover. */
 const TableMessage = function TableMessage({ className, ref, ...props }) {

package/dist/textarea.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 /** A multi-line text field. Inside Field.Root it takes the label, description and
  * error from the field, as Input does. */
-export declare const Textarea: ({ className, size, rows, cols, wrap, ref, ...props }: React.ComponentPropsWithoutRef<"textarea"> & {
-    size?: ComponentSizeAlias;
+export declare const Textarea: ({ className, size, variant, rows, cols, wrap, ref, ...props }: React.ComponentPropsWithoutRef<"textarea"> & {
+    size?: ComponentSize;
+    /** `embedded` fills the pane it sits in, such as an editor beside a preview: no
+     * edge or corners of its own, and focus as a ring inside it. */
+    variant?: "default" | "embedded";
 } & {
     ref?: React.Ref<HTMLTextAreaElement>;
 }) => React.JSX.Element;

package/dist/textarea.js

@@ -5,7 +5,7 @@ import { Field as BaseField } from '@base-ui/react/field';
 import { cx } from './parts.js';
 /** A multi-line text field. Inside Field.Root it takes the label, description and
  * error from the field, as Input does. */
-export const Textarea = function Textarea({ className, size, rows, cols, wrap, ref, ...props }) {
+export const Textarea = function Textarea({ className, size, variant = 'default', rows, cols, wrap, ref, ...props }) {
     const scheme = useComponentSize(size);
-    return (_jsx(BaseField.Control, { ...props, ref: ref, "data-ui-size": scheme, render: _jsx("textarea", { rows: rows, cols: cols, wrap: wrap }), className: cx('surf-input surf-textarea', className) }));
+    return (_jsx(BaseField.Control, { ...props, ref: ref, "data-ui-size": scheme, "data-variant": variant === 'embedded' ? variant : undefined, render: _jsx("textarea", { rows: rows, cols: cols, wrap: wrap }), className: cx('surf-input surf-textarea', className) }));
 };

package/dist/time-range-picker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentSizeAlias } from './size.js';
+import type { ComponentSize } from './size.js';
 /** A span of time back from now, or a refresh interval, in milliseconds. */
 export type TimeRangeOption = {
     value: number;
@@ -32,7 +32,7 @@ export type TimeRangePickerProps = Omit<React.ComponentPropsWithoutRef<'div'>, '
      * Leave it out for no refresh button. */
     onRefresh?: () => void;
     labels?: Partial<TimeRangePickerLabels>;
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 };
 /** The span a monitoring screen shows, back from now, with how often it refreshes and
  * a button to refresh now. For a fixed span between two dates, put a DateRangePicker

package/dist/time-range-picker.js

@@ -61,9 +61,9 @@ export const TimeRangePicker = function TimeRangePicker({ label, range, onRangeC
         value: String(option.value),
         label: option.label,
     }));
-    return (_jsxs("div", { role: 'group', "aria-label": label, ...props, ref: ref, className: cx('surf-time-range', className), children: [_jsx(Select, { width: 'content', size: size, options: options(ranges), value: String(range), onValueChange: (value) => onRangeChange(Number(value)), "aria-label": text.range }), refreshInterval !== undefined && (_jsx(Select, { width: 'content', size: size, options: options(intervals), value: String(refreshInterval), onValueChange: (value) => onRefreshIntervalChange?.(Number(value)), "aria-label": text.refresh })), onRefresh && (_jsx(Button, { variant: 'outline', size: size === 'small' || size === 'sm'
+    return (_jsxs("div", { role: 'group', "aria-label": label, ...props, ref: ref, className: cx('surf-time-range', className), children: [_jsx(Select, { width: 'content', size: size, options: options(ranges), value: String(range), onValueChange: (value) => onRangeChange(Number(value)), "aria-label": text.range }), refreshInterval !== undefined && (_jsx(Select, { width: 'content', size: size, options: options(intervals), value: String(refreshInterval), onValueChange: (value) => onRefreshIntervalChange?.(Number(value)), "aria-label": text.refresh })), onRefresh && (_jsx(Button, { variant: 'outline', size: size === 'small'
                     ? 'icon-small'
-                    : size === 'large' || size === 'lg'
+                    : size === 'large'
                         ? 'icon-large'
                         : 'icon', "aria-label": text.refreshNow, onClick: () => onRefresh(), children: _jsx(Icon, { name: 'refresh' }) }))] }));
 };

package/dist/toggle.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 export declare function Toggle<Value extends string>({ className, size, ref, ...props }: BaseToggle.Props<Value> & {
-    size?: ComponentSizeAlias | 'icon';
+    size?: ComponentSize | 'icon';
     ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;

package/dist/toggle.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useComponentSize } from './sizing.js';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-import { sizeName, skin } from './parts.js';
+import { skin } from './parts.js';
 export function Toggle({ className, size, ref, ...props }) {
     const scheme = useComponentSize(size === 'icon' ? undefined : size);
-    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('surf-button surf-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('surf-button surf-toggle', className), "data-size": size, "data-ui-size": scheme }));
 }

package/dist/toolbar.d.ts

@@ -1,10 +1,14 @@
 import * as React from 'react';
+declare const RootPart: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
+/** Home and End reach the first and last item, as they do in ToggleGroup, Tabs and
+ * Menubar; Base UI's toolbar leaves them out. Inside an input they move the caret. */
+declare function Root({ onKeyDown, ...props }: React.ComponentProps<typeof RootPart>): React.JSX.Element;
 export declare const Toolbar: {
-    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
-    } & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    }) => React.JSX.Element;
+    Root: typeof Root;
     Group: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./size.js").ComponentSize;
     } & {
@@ -47,12 +51,9 @@ export declare const ToolbarButton: ({ ref, ...props }: Omit<Omit<Omit<import("@
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
-}) => React.JSX.Element, ToolbarRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
-} & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-}) => React.JSX.Element, ToolbarSeparator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+}) => React.JSX.Element, ToolbarRoot: typeof Root, ToolbarSeparator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element;
+export {};

package/dist/toolbar.js

@@ -1,9 +1,31 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
 import { part } from './parts.js';
+const RootPart = /* @__PURE__ */ part(BaseToolbar.Root, 'surf-toolbar');
+/** Home and End reach the first and last item, as they do in ToggleGroup, Tabs and
+ * Menubar; Base UI's toolbar leaves them out. Inside an input they move the caret. */
+function Root({ onKeyDown, ...props }) {
+    return (_jsx(RootPart, { ...props, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            const toolbar = event.currentTarget;
+            if (event.defaultPrevented ||
+                (event.key !== 'Home' && event.key !== 'End') ||
+                event.target.matches('input, textarea'))
+                return;
+            const items = [
+                ...toolbar.querySelectorAll('[tabindex]'),
+            ].filter((item) => item.closest('[role="toolbar"]') === toolbar);
+            const item = event.key === 'Home' ? items[0] : items.at(-1);
+            if (!item)
+                return;
+            event.preventDefault();
+            item.focus();
+        } }));
+}
 export const Toolbar = {
     ...BaseToolbar,
-    Root: /* @__PURE__ */ part(BaseToolbar.Root, 'surf-toolbar'),
+    Root,
     Group: /* @__PURE__ */ part(BaseToolbar.Group, 'surf-toolbar-group'),
     Button: /* @__PURE__ */ part(BaseToolbar.Button, 'surf-button surf-toolbar-button'),
     Link: /* @__PURE__ */ part(BaseToolbar.Link, 'surf-button surf-toolbar-link'),

package/dist/tooltip.d.ts

@@ -14,8 +14,6 @@ export type TooltipProps = {
     shortcut?: string;
     /** Keeps the tooltip from opening while the trigger stays as it is. */
     disabled?: boolean;
-    /** @deprecated Use `disabled`. Removed in a later minor. */
-    enabled?: boolean;
     children: React.ReactElement;
 } & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>;
-export declare function Tooltip({ label, shortcut, disabled, enabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;
+export declare function Tooltip({ label, shortcut, disabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;

package/dist/tooltip.js

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useComponentSize } from './sizing.js';
+import { usePortalDirection } from './parts.js';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 export function TooltipProvider({ delayDuration = 150, skipDelayDuration = 300, children, }) {
     return (_jsx(BaseTooltip.Provider, { delay: delayDuration, closeDelay: 0, timeout: skipDelayDuration, children: children }));
 }
-export function Tooltip({ label, shortcut, disabled = false, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
+export function Tooltip({ label, shortcut, disabled = false, side = 'right', align, sideOffset = 10, children, }) {
     const scheme = useComponentSize();
+    const dir = usePortalDirection();
     // Disabling keeps the trigger mounted, so turning the tooltip on or off never
     // moves focus.
-    return (_jsxs(BaseTooltip.Root, { disabled: disabled || !enabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'surf-positioner surf-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'surf-tooltip', "data-ui-size": scheme, children: [label, shortcut && (_jsx("kbd", { className: 'surf-tooltip-shortcut', children: shortcut }))] }) }) })] }));
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { dir: dir, side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'surf-positioner surf-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'surf-tooltip', "data-ui-size": scheme, children: [label, shortcut && (_jsx("kbd", { className: 'surf-tooltip-shortcut', children: shortcut }))] }) }) })] }));
 }

package/dist/tree.d.ts

@@ -30,10 +30,8 @@ export type TreeProps = {
     size?: ComponentSize;
     virtualized?: boolean;
     labels?: Partial<TreeLabels>;
-    /** @deprecated Use `labels.empty`. Removed in a later minor. */
-    emptyLabel?: string;
     dir?: 'ltr' | 'rtl';
     className?: string;
 };
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
-export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, labels, emptyLabel, dir, className, }: TreeProps): React.JSX.Element;
+export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, labels, dir, className, }: TreeProps): React.JSX.Element;