@surflane/ui 0.11.0 → 0.13.0

package/dist/select.js

@@ -1,15 +1,37 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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]));
-/** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
-export const Select = function Select({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ref, ...props }) {
+/** 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',
+    count: (count) => `${count} selected`,
+};
+// The value the "all" option carries; it never reaches a form or a callback.
+const ALL = '\u0000all';
+/** A choice from a list, or several with multiple. The ref reaches the trigger
+ * button, as triggerRef does. */
+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) => {
@@ -19,11 +41,16 @@ export const Select = function Select({ options: items, value, defaultValue, onV
             else if (target)
                 target.current = node;
     }, [ref, triggerRef]);
-    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? '');
+    const many = allProps.multiple === true ? allProps : undefined;
+    const one = allProps.multiple === true ? undefined : allProps;
+    const initialValue = many
+        ? (many.defaultValue ?? [])
+        : (one.defaultValue ?? options[0]?.value ?? '');
+    const [localValue, setLocalValue] = React.useState(initialValue);
     const nativeInput = React.useRef(null);
-    const initialValue = defaultValue ?? options[0]?.value ?? '';
-    const resetCallback = React.useRef(onValueChange);
-    resetCallback.current = onValueChange;
+    const resetCallback = React.useRef(undefined);
+    resetCallback.current = allProps.onValueChange;
+    const resetKey = many ? initialValue.toString() : initialValue;
     React.useEffect(() => {
         const owner = nativeInput.current?.form;
         if (!owner)
@@ -35,7 +62,9 @@ export const Select = function Select({ options: items, value, defaultValue, onV
                 if (event.defaultPrevented)
                     return;
                 setLocalValue(initialValue);
-                resetCallback.current?.(initialValue);
+                resetCallback.current?.((Array.isArray(initialValue)
+                    ? [...initialValue]
+                    : initialValue), resetDetails(event));
             }, 0);
             pending.add(timer);
         };
@@ -44,20 +73,79 @@ export const Select = function Select({ options: items, value, defaultValue, onV
             owner.removeEventListener('reset', reset);
             pending.forEach(clearTimeout);
         };
-    }, [initialValue, props.form]);
-    const selected = value ?? localValue;
+        // initialValue is read through resetKey, so a new array of the same values
+        // does not re-register the listener.
+    }, [resetKey, props.form]);
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx('surf-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
-                setLocalValue(v ?? '');
-                onValueChange?.(v ?? '');
-            }, inputRef: (node) => {
-                nativeInput.current = node;
-                if (typeof inputRef === 'function')
-                    inputRef(node);
-                else if (inputRef)
-                    inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'surf-select-trigger', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'surf-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), _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: _jsx(BaseSelect.List, { children: items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'surf-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'surf-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item))) }) }) }) })] }) }));
+    const setInput = (node) => {
+        nativeInput.current = node;
+        if (typeof inputRef === 'function')
+            inputRef(node);
+        else if (inputRef)
+            inputRef.current = node;
+    };
+    // Several values: the "all" option leads the list, and the trigger sums them up.
+    const choosable = options.filter((option) => !option.disabled);
+    const text = { ...multipleLabels, ...(many?.labels ?? {}) };
+    const chosen = many
+        ? (many.value ?? localValue)
+        : [];
+    const everything = choosable.length > 0 &&
+        choosable.every((option) => chosen.includes(option.value));
+    const summary = (values) => values.length === 0
+        ? text.none
+        : choosable.every((option) => values.includes(option.value))
+            ? text.all
+            : values.length === 1
+                ? options.find((option) => option.value === values[0])?.label
+                : text.count(values.length);
+    const selected = many
+        ? everything
+            ? [ALL, ...chosen]
+            : chosen
+        : (one.value ?? localValue);
+    const value = many ? summary(chosen) : _jsx(BaseSelect.Value, {});
+    // Content width: every label the trigger can show, stacked in one cell.
+    const sizes = many
+        ? [
+            text.all,
+            text.none,
+            text.count(options.length),
+            ...options.map((option) => option.label),
+        ]
+        : options.map((option) => option.label);
+    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;
+                    const values = toggledAll
+                        ? everything
+                            ? []
+                            : choosable.map((option) => option.value)
+                        : // Unchecking one option of "all" leaves the others.
+                            list.filter((item) => item !== ALL);
+                    many.onValueChange?.(values, eventDetails);
+                    if (!eventDetails.isCanceled)
+                        setLocalValue(values);
+                }
+                else {
+                    one.onValueChange?.(next ?? '', eventDetails);
+                    if (!eventDetails.isCanceled)
+                        setLocalValue(next ?? '');
+                }
+            }, inputRef: setInput, 
+            // A multiple Select submits its own inputs, without the "all" value.
+            name: many ? undefined : name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'surf-select-trigger', "data-value": many ? chosen.join(' ') : selected, children: [width === 'content' ? (
+                        // Every label sits in one cell, hidden but the chosen one, so the
+                        // 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, { 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,
+                                            }), _jsx(BaseSelect.Separator, { className: 'surf-select-separator' })] })), items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'surf-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'surf-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item)))] }) }) }) })] }) }));
 };
 function renderOption(option) {
-    return (_jsxs(BaseSelect.Item, { className: 'surf-select-item', value: option.value, "data-option-value": option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'surf-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
+    return (_jsxs(BaseSelect.Item, { className: 'surf-select-item', value: option.value, "data-option-value": option.value === ALL ? undefined : option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'surf-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
 }

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type StatusTone } from './status.js';
 export type StatDirection = 'up' | 'down' | 'flat';
 export type StatChangeProps = Omit<React.ComponentPropsWithoutRef<'dd'>, 'children'> & {
     /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
@@ -11,6 +12,19 @@ export type StatChangeProps = Omit<React.ComponentPropsWithoutRef<'dd'>, 'childr
      * still points the way the value moved. */
     lowerIsBetter?: boolean;
 };
+export type StatStatusProps = React.ComponentPropsWithoutRef<'dd'> & {
+    /** The value's state: caution for one to watch, danger for one past its limit. */
+    tone: StatusTone;
+};
+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. */
 export declare const Stat: {
@@ -29,10 +43,16 @@ export declare const Stat: {
     Change: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
         ref?: React.Ref<HTMLElement>;
     }) => React.JSX.Element;
+    Status: ({ tone, className, children, ref, ...props }: StatStatusProps & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element;
     Caption: ({ 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;
+    Group: ({ label, labelHidden, className, children, ref, ...props }: StatGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
 };
 export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
@@ -45,7 +65,11 @@ export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<Rea
     ref?: React.Ref<HTMLElement> | undefined;
 }) => React.JSX.Element, StatChange: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
     ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element, StatStatus: ({ tone, className, children, ref, ...props }: StatStatusProps & {
+    ref?: React.Ref<HTMLElement>;
 }) => 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, labelHidden, className, children, ref, ...props }: StatGroupProps & {
+    ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

package/dist/stat.js

@@ -3,6 +3,7 @@ import { Icon } from './icon.js';
 import { cx } from './class-names.js';
 import { elementPart } from './element-part.js';
 import { formatPercent } from './format.js';
+import { StatusIcon } from './status.js';
 const signed = (value) => formatPercent(value, { signed: true });
 const arrows = { up: 'arrow-up', down: 'arrow-down', flat: 'minus' };
 /** A change against an earlier value: an arrow, a signed figure and its direction's
@@ -12,6 +13,17 @@ const ChangePart = function StatChange({ value, format = signed, direction, lowe
     const tone = way === 'flat' || !lowerIsBetter ? way : way === 'up' ? 'down' : 'up';
     return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('surf-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
 };
+/** The value's state against a threshold, such as "Below 30 GiB": the tone's icon and
+ * text in its color. A caution or danger status colors the value too, and the text
+ * says why, so color is never alone. */
+const StatusPart = function StatStatus({ tone, className, children, ref, ...props }) {
+    return (_jsxs("dd", { ...props, ref: ref, "data-tone": tone, className: cx('surf-stat-status', className), children: [_jsx(StatusIcon, { tone: tone }), children] }));
+};
+/** 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, 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. */
 export const Stat = {
@@ -19,7 +31,9 @@ export const Stat = {
     Label: /* @__PURE__ */ elementPart('dt', 'surf-stat-label'),
     Value: /* @__PURE__ */ elementPart('dd', 'surf-stat-value'),
     Change: ChangePart,
+    Status: StatusPart,
     Caption: /* @__PURE__ */ elementPart('dd', 'surf-stat-caption'),
+    Group: GroupPart,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: StatRoot, Label: StatLabel, Value: StatValue, Change: StatChange, Caption: StatCaption, } = Stat;
+export const { Root: StatRoot, Label: StatLabel, Value: StatValue, Change: StatChange, Status: StatStatus, Caption: StatCaption, Group: StatGroup, } = Stat;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { ComponentSize } from './size.js';
+/** A span of time back from now, or a refresh interval, in milliseconds. */
+export type TimeRangeOption = {
+    value: number;
+    label: string;
+};
+export declare const timeRangeOptions: readonly TimeRangeOption[];
+/** 0 is off. */
+export declare const refreshIntervalOptions: readonly TimeRangeOption[];
+export type TimeRangePickerLabels = {
+    /** The range select's name. */
+    range: string;
+    /** The refresh interval select's name. */
+    refresh: string;
+    /** The button that refreshes now. */
+    refreshNow: string;
+};
+export type TimeRangePickerProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /** Names the group, such as "Dashboard time". */
+    label: string;
+    /** The span back from now, in ms; one of ranges. */
+    range: number;
+    onRangeChange: (range: number) => void;
+    /** The span options, such as timeRangeOptions with translated labels. */
+    ranges?: readonly TimeRangeOption[];
+    /** How often onRefresh runs, in ms; 0 is off. Leave it out for no interval select. */
+    refreshInterval?: number;
+    onRefreshIntervalChange?: (interval: number) => void;
+    refreshIntervals?: readonly TimeRangeOption[];
+    /** Runs when the button is pressed and on every interval while the page is shown.
+     * Leave it out for no refresh button. */
+    onRefresh?: () => void;
+    labels?: Partial<TimeRangePickerLabels>;
+    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
+ * beside it. */
+export declare const TimeRangePicker: ({ label, range, onRangeChange, ranges, refreshInterval, onRefreshIntervalChange, refreshIntervals: intervals, onRefresh, labels, size, className, ref, ...props }: TimeRangePickerProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;