@surflane/ui 0.11.0 → 0.13.0

package/dist/css/rules/toggle.css

@@ -6,10 +6,10 @@
   /* Command state uses the whole rounded surface, with no one-sided accent. */
   .surf-toggle {
     background: transparent;
-    border-color: var(--surf-line);
+    border-color: var(--surf-control-border);
   }
   .surf-toggle[data-pressed] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     border-color: var(--surf-control-border);
     color: var(--surf-ink);
   }
@@ -17,11 +17,18 @@
     opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
+  @media (forced-colors: active) {
+    .surf-toggle[data-pressed] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *):is(.surf-toggle) {
     min-block-size: var(--surf-ui-row);
     font-size: var(--surf-ui-font);
-    line-height: var(--surf-ui-leading);
+    line-height: var(--surf-ui-label-leading);
   }
 }

package/dist/css/rules/toolbar.css

@@ -4,10 +4,17 @@
 
 @layer surflane.components {
   .surf-toolbar-button[aria-pressed='true'] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     border-color: var(--surf-control-border);
     color: var(--surf-ink);
   }
+  @media (forced-colors: active) {
+    .surf-toolbar-button[aria-pressed='true'] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
   .surf-toolbar-button[data-disabled],
   .surf-toolbar-input[data-disabled] {
     opacity: var(--surf-control-disabled-opacity);
@@ -16,7 +23,7 @@
   .surf-toolbar {
     padding: var(--surf-space-1);
     border-radius: var(--surf-radius-md);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     gap: var(--surf-space-2);
   }
   .surf-toolbar-group {
@@ -38,7 +45,7 @@
     max-width: 100%;
     border: 0;
     border-radius: max(0px, calc(var(--surf-radius-md) - var(--surf-space-1)));
-    background: var(--surf-canvas);
+    background: var(--surf-plane);
   }
   .surf-toolbar-separator {
     flex: none;

package/dist/css/rules/tree.css

@@ -25,10 +25,13 @@
     transition: background-color var(--surf-duration-fast) var(--surf-ease-out);
   }
   .surf-tree-item:hover {
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-tree-item[aria-selected='true'] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
   }
   .surf-tree-item:focus-visible {
     outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
@@ -52,10 +55,16 @@
     color: inherit;
   }
   .surf-tree-toggle:hover:not(:disabled) {
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-tree-toggle:active:not(:disabled) {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-tree-toggle svg[data-expanded] {
     rotate: 90deg;
@@ -73,6 +82,21 @@
     padding: var(--surf-space-4);
     color: var(--surf-ink-muted);
   }
+  /* On touch the disclosure keeps its size and reaches the row's
+     --surf-control-target-size around it. */
+  @media (max-width: 760px), (pointer: coarse) {
+    .surf-tree-toggle {
+      position: relative;
+    }
+    .surf-tree-toggle::after {
+      content: '';
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: var(--surf-control-target-size);
+      block-size: var(--surf-control-target-size);
+      translate: -50% -50%;
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .surf-tree-item {
       transition: none;
@@ -82,6 +106,7 @@
     .surf-tree-item[aria-selected='true'] {
       background: Highlight;
       color: HighlightText;
+      forced-color-adjust: none;
     }
     .surf-tree-item[aria-disabled='true'] {
       color: GrayText;

package/dist/css/styles.css

@@ -62,6 +62,7 @@
 @import './rules/app-shell.css';
 @import './rules/tree.css';
 @import './rules/date-picker.css';
+@import './rules/time-range-picker.css';
 @import './rules/chart.css';
 @import '@surflane/css/foundations/layout.css';
 @import './rules/layout.css';
@@ -73,8 +74,10 @@
 @import './rules/list.css';
 @import './rules/stat.css';
 @import './rules/sparkline.css';
+@import './rules/bar-list.css';
 @import '@surflane/css/presentation/inline-message.css';
 @import './rules/inline-message.css';
+@import './rules/dashboard.css';
 @import './rules/syntax-highlighter.css';
 @import '@surflane/css/presentation/code.css';
 @import './rules/code.css';

package/dist/css/time-range-picker.css

@@ -0,0 +1,14 @@
+/* Time range picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/item.css';
+@import './rules/icon.css';
+@import './rules/select.css';
+@import './rules/button.css';
+@import './rules/time-range-picker.css';

package/dist/dashboard.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export type DashboardRootProps = React.ComponentPropsWithoutRef<'div'> & {
+    /** Names the dashboard as a region of the page, such as "Cluster overview". */
+    label?: string;
+    /** The most columns a wide screen shows, so a row planned for that many keeps its
+     * proportions and a span keeps its meaning. Narrower screens still fit fewer. */
+    columns?: number;
+};
+export type DashboardPanelLabels = {
+    /** The button that shows the description, given the title. */
+    about: (title: string) => string;
+    loading: string;
+    refreshing: string;
+    error: string;
+    /** Above the last values when a refresh failed. */
+    stale: string;
+    retry: string;
+    empty: string;
+};
+export type DashboardPanelProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> & {
+    title: string;
+    /** What the panel shows and how it is measured, behind an info button by the title. */
+    description?: React.ReactNode;
+    /** The heading level of the title. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /** loading shows a placeholder until the first data arrives; error and empty
+     * replace the content with a message; stale keeps the last content under a caution
+     * that a refresh failed, with retry. */
+    state?: 'ready' | 'loading' | 'error' | 'empty' | 'stale';
+    /** The loading placeholder's height, as tall as the content will be, so the
+     * panels below don't move when the data arrives. 96px without it. */
+    placeholderHeight?: number | string;
+    /** New data is on its way: the content stays, a spinner shows by the title and the
+     * panel is busy for assistive technology. */
+    refreshing?: boolean;
+    /** Shows a retry button in the error message. */
+    onRetry?: () => void;
+    /** Why it failed or why it is empty, in place of the default text. */
+    message?: React.ReactNode;
+    /** Controls at the end of the header, such as a menu. */
+    actions?: React.ReactNode;
+    /** Columns the panel spans where they fit; a phone shows one. */
+    span?: 1 | 2 | 3 | 'full';
+    labels?: Partial<DashboardPanelLabels>;
+};
+export declare const Dashboard: {
+    Root: ({ label, columns, className, style, ref, ...props }: DashboardRootProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Panel: ({ title, description, level, state, refreshing, onRetry, message, actions, span, placeholderHeight, labels, className, children, ref, ...props }: DashboardPanelProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+};
+export declare const DashboardRoot: ({ label, columns, className, style, ref, ...props }: DashboardRootProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, DashboardPanel: ({ title, description, level, state, refreshing, onRetry, message, actions, span, placeholderHeight, labels, className, children, ref, ...props }: DashboardPanelProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/dashboard.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from './button.js';
+import { Card } from './card.js';
+import { Icon } from './icon.js';
+import { InlineMessage } from './inline-message.js';
+import { Popover } from './popover.js';
+import { Skeleton } from './skeleton.js';
+import { Spinner } from './spinner.js';
+import { cx } from './class-names.js';
+/** The panels of a dashboard on a responsive grid: as many columns as fit panels of
+ * --surf-dashboard-panel-min-width (20rem), up to columns, one column on a phone. */
+const Root = function DashboardRoot({ label, columns, className, style, ref, ...props }) {
+    return (_jsx("div", { role: label ? 'region' : undefined, "aria-label": label, ...props, ref: ref, "data-columns": columns, style: columns
+            ? {
+                ...style,
+                '--surf-dashboard-columns': columns,
+            }
+            : style, className: cx('surf-dashboard', className) }));
+};
+const panelLabels = {
+    about: (title) => `About ${title}`,
+    loading: 'Loading',
+    refreshing: 'Refreshing',
+    error: 'This panel could not load.',
+    stale: 'These are the last values: the panel could not refresh.',
+    retry: 'Retry',
+    empty: 'No data in this range.',
+};
+/** One panel of a dashboard: a card with its title, an optional description, the
+ * states of its data and the content. The content takes the room the row gives it. */
+const Panel = function DashboardPanel({ title, description, level = 3, state = 'ready', refreshing = false, onRetry, message, actions, span, placeholderHeight, labels, className, children, ref, ...props }) {
+    const text = { ...panelLabels, ...labels };
+    const id = React.useId();
+    const busy = state === 'loading' || refreshing;
+    const titleRef = React.useRef(null);
+    const retried = React.useRef(false);
+    // Retry takes its own button away when the panel leaves the error, so focus
+    // moves to the panel's title instead of falling to the page.
+    React.useEffect(() => {
+        if (!retried.current)
+            return;
+        retried.current = false;
+        const active = document.activeElement;
+        if (!active || active === document.body)
+            titleRef.current?.focus();
+    }, [state]);
+    const retry = onRetry &&
+        (() => {
+            retried.current = true;
+            onRetry();
+        });
+    return (_jsxs(Card.Root, { role: 'group', "aria-labelledby": `${id}-title`, "aria-busy": busy || undefined, ...props, ref: ref, "data-span": span, "data-state": state, className: cx('surf-dashboard-panel', className), children: [_jsxs("div", { className: 'surf-dashboard-panel-header', children: [_jsx(Card.Title, { level: level, id: `${id}-title`, title: title, ref: titleRef, tabIndex: -1, children: title }), description && (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { variant: 'ghost', size: 'icon-small', "aria-label": text.about(title) }), children: _jsx(Icon, { name: 'info' }) }), _jsx(Popover.Content, { size: 'small', children: _jsx(Popover.Description, { children: description }) })] })), refreshing && state !== 'loading' && (_jsx(Spinner, { size: 'small', label: text.refreshing })), actions && (_jsx("div", { className: 'surf-dashboard-panel-actions', children: actions }))] }), _jsx("div", { className: 'surf-dashboard-panel-body', children: state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { shape: 'block', style: placeholderHeight === undefined
+                                ? undefined
+                                : { blockSize: placeholderHeight } }), _jsx("span", { className: 'surf-feedback-sr', children: text.loading })] })) : state === 'stale' ? (_jsxs(_Fragment, { children: [_jsxs(InlineMessage.Root, { tone: 'caution', children: [_jsx(InlineMessage.Icon, {}), _jsxs(InlineMessage.Content, { children: [_jsx(InlineMessage.Description, { children: message ?? text.stale }), onRetry && (_jsx(InlineMessage.Actions, { children: _jsx(Button, { variant: 'outline', size: 'small', onClick: retry, children: text.retry }) }))] })] }), children] })) : state === 'error' ? (_jsxs(InlineMessage.Root, { tone: 'danger', children: [_jsx(InlineMessage.Icon, {}), _jsxs(InlineMessage.Content, { children: [_jsx(InlineMessage.Description, { children: message ?? text.error }), onRetry && (_jsx(InlineMessage.Actions, { children: _jsx(Button, { variant: 'outline', size: 'small', onClick: retry, children: text.retry }) }))] })] })) : state === 'empty' ? (_jsx("p", { className: 'surf-dashboard-panel-empty', children: message ?? text.empty })) : (children) })] }));
+};
+export const Dashboard = { Root, Panel };
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Root: DashboardRoot, Panel: DashboardPanel } = Dashboard;

package/dist/date-picker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
 import { type DatePickerProps as AriaDatePickerProps, type DateValue, type ValidationResult } from 'react-aria-components/DatePicker';
 import { type DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker';
 import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from 'react-aria-components/TimeField';
@@ -13,9 +14,37 @@ type FieldContent = {
 type CalendarContent = {
     calendarLabel?: string;
 };
-export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, 'children'> & FieldContent & CalendarContent;
-export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, 'children'> & FieldContent & CalendarContent;
-export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, 'children'> & FieldContent;
+/** The names every other Surflane field takes. react-aria's spellings keep working. */
+type FieldStates<Change> = {
+    /** The field's and its calendar's size; without it, the surrounding SizeProvider's. */
+    size?: ComponentSize;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Marks the value invalid, as aria-invalid does on other fields. */
+    invalid?: boolean;
+    onValueChange?: Change;
+    /** @deprecated Use `disabled`. Removed in a later minor. */
+    isDisabled?: boolean;
+    /** @deprecated Use `readOnly`. Removed in a later minor. */
+    isReadOnly?: boolean;
+    /** @deprecated Use `required`. Removed in a later minor. */
+    isRequired?: boolean;
+    /** @deprecated Use `invalid`. Removed in a later minor. */
+    isInvalid?: boolean;
+    /** @deprecated Use `onValueChange`. Removed in a later minor. */
+    onChange?: Change;
+};
+type PopupStates = {
+    /** Whether the calendar is open, controlled. */
+    open?: boolean;
+    /** @deprecated Use `open`. Removed in a later minor. */
+    isOpen?: boolean;
+};
+type AriaNames = 'children' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'isOpen' | 'onChange';
+export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, AriaNames> & FieldContent & CalendarContent & FieldStates<AriaDatePickerProps<T>['onChange']> & PopupStates;
+export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, AriaNames> & FieldContent & CalendarContent & FieldStates<AriaDateRangePickerProps<T>['onChange']> & PopupStates;
+export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, AriaNames> & FieldContent & FieldStates<AriaTimeFieldProps<T>['onChange']>;
 /** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
  * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
 export declare function DatePicker<T extends DateValue>({ label, description, errorMessage, calendarLabel, className, ...props }: DatePickerProps<T>): React.JSX.Element;

package/dist/date-picker.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from './icon.js';
-import { useComponentSize } from './sizing.js';
+import { ComponentSizeContext, useComponentSize, } from './sizing.js';
 import { DatePicker as AriaDatePicker, DateInput, DateSegment, Group, Label, Text, FieldError, Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, Button, Popover, } from 'react-aria-components/DatePicker';
 import { DateRangePicker as AriaDateRangePicker, RangeCalendar, } from 'react-aria-components/DateRangePicker';
 import { TimeField as AriaTimeField, } from 'react-aria-components/TimeField';
@@ -10,6 +10,45 @@ import { Dialog } from 'react-aria-components/Dialog';
 import { skin } from './parts.js';
 import { useLocale } from 'react-aria-components/I18nProvider';
 export { I18nProvider as DateLocaleProvider } from 'react-aria-components/I18nProvider';
+/** Surflane's field names to react-aria's, the new spelling first. */
+function ariaStates({ size: _size, disabled, readOnly, required, invalid, onValueChange, isDisabled, isReadOnly, isRequired, isInvalid, onChange, open, isOpen, }) {
+    const opened = open ?? isOpen;
+    return {
+        isDisabled: disabled ?? isDisabled,
+        isReadOnly: readOnly ?? isReadOnly,
+        isRequired: required ?? isRequired,
+        isInvalid: invalid ?? isInvalid,
+        onChange: onValueChange ?? onChange,
+        ...(opened === undefined ? {} : { isOpen: opened }),
+    };
+}
+const stateNames = [
+    'size',
+    'disabled',
+    'readOnly',
+    'required',
+    'invalid',
+    'onValueChange',
+    'isDisabled',
+    'isReadOnly',
+    'isRequired',
+    'isInvalid',
+    'onChange',
+    'open',
+    'isOpen',
+];
+/** The props a react-aria field passes on, without the names ariaStates maps. */
+function rest(props) {
+    const copy = { ...props };
+    for (const name of stateNames)
+        delete copy[name];
+    return copy;
+}
+/** An explicit size scopes the field and the calendar it opens. */
+function SizedField({ size, children, }) {
+    const scheme = useComponentSize(size);
+    return (_jsx(ComponentSizeContext.Provider, { value: scheme, children: children(size ? scheme : undefined) }));
+}
 function Segments({ slot }) {
     return (_jsx(DateInput, { slot: slot, className: 'surf-date-input', children: (segment) => (_jsx(DateSegment, { segment: segment, className: 'surf-date-segment' })) }));
 }
@@ -50,11 +89,11 @@ function CalendarPopup({ label, range }) {
 /** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
  * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
 export function DatePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
-    return (_jsxs(AriaDatePicker, { ...props, className: skin('surf-date-picker', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsxs(Group, { className: 'surf-date-group', children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] }));
+    return (_jsx(SizedField, { size: props.size, children: (scheme) => (_jsxs(AriaDatePicker, { ...rest(props), ...ariaStates(props), "data-ui-size": scheme, className: skin('surf-date-picker', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsxs(Group, { className: 'surf-date-group', children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] })) }));
 }
 export function DateRangePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
-    return (_jsxs(AriaDateRangePicker, { ...props, className: skin('surf-date-picker surf-date-range-picker', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsxs(Group, { className: 'surf-date-group', children: [_jsxs("div", { className: 'surf-date-range-inputs', children: [_jsx(Segments, { slot: 'start' }), _jsx("span", { "aria-hidden": 'true', className: 'surf-date-range-separator', children: "\u2013" }), _jsx(Segments, { slot: 'end' })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] }));
+    return (_jsx(SizedField, { size: props.size, children: (scheme) => (_jsxs(AriaDateRangePicker, { ...rest(props), ...ariaStates(props), "data-ui-size": scheme, className: skin('surf-date-picker surf-date-range-picker', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsxs(Group, { className: 'surf-date-group', children: [_jsxs("div", { className: 'surf-date-range-inputs', children: [_jsx(Segments, { slot: 'start' }), _jsx("span", { "aria-hidden": 'true', className: 'surf-date-range-separator', children: "\u2013" }), _jsx(Segments, { slot: 'end' })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] })) }));
 }
 export function TimeField({ label, description, errorMessage, className, ...props }) {
-    return (_jsxs(AriaTimeField, { ...props, className: skin('surf-time-field', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsx("div", { className: 'surf-date-group', children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
+    return (_jsx(SizedField, { size: props.size, children: (scheme) => (_jsxs(AriaTimeField, { ...rest(props), ...ariaStates(props), "data-ui-size": scheme, className: skin('surf-time-field', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsx("div", { className: 'surf-date-group', children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] })) }));
 }

package/dist/dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 /** Visible icon close action; inherits Dialog focus and dismissal behavior. */
 declare const DialogCloseButton: ({ className, "aria-label": label, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Close>, "children"> & {
@@ -7,7 +7,7 @@ declare const DialogCloseButton: ({ className, "aria-label": label, ref, ...prop
 }) => React.JSX.Element;
 declare const DialogContent: ({ size, className, children, closeLabel, closeDisabled, focusBoundaryLabel, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & {
     /** Width and density: small 420px, default 640px, large 840px. */
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
     closeLabel?: string;
     closeDisabled?: boolean;
     focusBoundaryLabel?: string;
@@ -19,10 +19,20 @@ declare const DialogBody: ({ className, ref, ...props }: React.ComponentProps<"d
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const DialogTitle: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & {
+    ref?: React.Ref<HTMLHeadingElement> | undefined;
+}) => React.JSX.Element;
+declare const DialogDescription: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element;
 export declare const Dialog: {
     Content: ({ size, className, children, closeLabel, closeDisabled, focusBoundaryLabel, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & {
         /** Width and density: small 420px, default 640px, large 840px. */
-        size?: ComponentSizeAlias;
+        size?: ComponentSize;
         closeLabel?: string;
         closeDisabled?: boolean;
         focusBoundaryLabel?: string;
@@ -37,17 +47,25 @@ export declare const Dialog: {
     CloseButton: ({ className, "aria-label": label, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Close>, "children"> & {
         ref?: React.Ref<HTMLButtonElement>;
     }) => React.JSX.Element;
+    Title: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/dialog").DialogTitleProps, "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/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element;
     Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Trigger: BaseDialog.Trigger;
     createHandle: typeof BaseDialog.createHandle;
     Handle: typeof BaseDialog.Handle;
 };
-export { DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, };
-export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, DialogDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, DialogHandle: typeof BaseDialog.Handle, DialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogRoot: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element, DialogTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, DialogTrigger: BaseDialog.Trigger, DialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, DialogTitle, DialogDescription, };
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, DialogHandle: typeof BaseDialog.Handle, DialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogRoot: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element, DialogTrigger: BaseDialog.Trigger, DialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/dialog.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from './icon.js';
-import { sizeName, skin, cx } from './parts.js';
+import { part, skin, cx, usePortalDirection } from './parts.js';
 import { useDialogFocusBoundary } from './dialog-focus.js';
 import { useComponentSize } from './sizing.js';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
@@ -12,7 +12,8 @@ const DialogCloseButton = function DialogCloseButton({ className, 'aria-label':
 const DialogContent = function DialogContent({ size, className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ref, ...props }) {
     const scheme = useComponentSize(size);
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'surf-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, ref: ref, className: skin('surf-dialog-popup surf-dialog-content', className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
+    const dir = usePortalDirection();
+    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'surf-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { dir: dir, "data-ui-size": scheme, "data-size": size, ...props, ref: ref, className: skin('surf-dialog-popup surf-dialog-content', className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
 };
 function DialogHeader({ className, ...props }) {
     return _jsx("div", { ...props, className: cx('surf-dialog-header', className) });
@@ -23,6 +24,8 @@ const DialogBody = function DialogBody({ className, ref, ...props }) {
 function DialogFooter({ className, ...props }) {
     return _jsx("div", { ...props, className: cx('surf-dialog-footer', className) });
 }
+const DialogTitle = /* @__PURE__ */ part(BaseDialog.Title, 'surf-dialog-title');
+const DialogDescription = /* @__PURE__ */ part(BaseDialog.Description, 'surf-dialog-description');
 export const Dialog = {
     ...BaseDialog,
     Content: DialogContent,
@@ -30,7 +33,9 @@ export const Dialog = {
     Body: DialogBody,
     Footer: DialogFooter,
     CloseButton: DialogCloseButton,
+    Title: DialogTitle,
+    Description: DialogDescription,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export { DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, };
-export const { Backdrop: DialogBackdrop, Close: DialogClose, Description: DialogDescription, Handle: DialogHandle, Popup: DialogPopup, Portal: DialogPortal, Root: DialogRoot, Title: DialogTitle, Trigger: DialogTrigger, Viewport: DialogViewport, } = Dialog;
+export { DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, DialogTitle, DialogDescription, };
+export const { Backdrop: DialogBackdrop, Close: DialogClose, Handle: DialogHandle, Popup: DialogPopup, Portal: DialogPortal, Root: DialogRoot, Trigger: DialogTrigger, Viewport: DialogViewport, } = Dialog;

package/dist/drawer.d.ts

@@ -4,14 +4,22 @@ import { Footer, Header, type PanelOptions, type PanelSide } from './panel.js';
 declare function DrawerRoot({ side, modal, ...props }: Omit<React.ComponentProps<typeof BaseDrawer.Root>, 'swipeDirection'> & {
     side?: PanelSide;
 }): React.JSX.Element;
-declare const DrawerContent: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup> & PanelOptions & {
+declare const DrawerContent: ({ size, flush, closeLabel, focusBoundaryLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDrawer.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 DrawerTitle({ className, ...props }: React.ComponentProps<typeof BaseDrawer.Title>): React.JSX.Element;
 declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof BaseDrawer.Description>): React.JSX.Element;
 export declare const Drawer: {
     Root: typeof DrawerRoot;
-    Content: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup> & PanelOptions & {
+    Content: ({ size, flush, closeLabel, focusBoundaryLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDrawer.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;
     PrimitiveContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/drawer.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 { Drawer as BaseDrawer } from '@base-ui/react/drawer';
 import { Body, Footer, Header, } from './panel.js';
@@ -19,11 +20,13 @@ function DrawerRoot({ side = 'bottom', modal = true, ...props }) {
     };
     return (_jsx(DrawerSide.Provider, { value: { side, modal }, children: _jsx(BaseDrawer.Root, { ...props, modal: modal, swipeDirection: direction[side] }) }));
 }
-const DrawerContent = function DrawerContent({ size, flush, closeLabel = 'Close panel', className, children, ref, ...props }) {
+const DrawerContent = function DrawerContent({ 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(DrawerSide);
     const KeyboardProvider = side === 'bottom' ? BaseDrawer.VirtualKeyboardProvider : React.Fragment;
-    return (_jsx(KeyboardProvider, { children: _jsx(BaseDrawer.Portal, { children: _jsxs("div", { className: 'surf-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDrawer.Backdrop, { className: 'surf-panel-backdrop' })), _jsx(BaseDrawer.Viewport, { className: 'surf-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDrawer.Popup, { ...props, ref: ref, className: skin('surf-panel surf-drawer', className), "data-side": side, "data-size": normalizeSize(size) ?? 'large', "data-flush": flush || undefined, children: [_jsx("div", { className: 'surf-drawer-handle', "aria-hidden": 'true' }), _jsx(BaseDrawer.Close, { className: 'surf-panel-close surf-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), _jsx(BaseDrawer.Content, { className: 'surf-panel-content', children: children })] }) })] }) }) }));
+    return (_jsx(KeyboardProvider, { children: _jsx(BaseDrawer.Portal, { ref: portalRef, children: _jsxs("div", { className: 'surf-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDrawer.Backdrop, { className: 'surf-panel-backdrop' })), _jsx(BaseDrawer.Viewport, { className: 'surf-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDrawer.Popup, { dir: dir, ...props, ref: ref, className: skin('surf-panel surf-drawer', className), "data-side": side, "data-size": normalizeSize(size) ?? 'large', "data-flush": flush || undefined, children: [_jsx("div", { className: 'surf-drawer-handle', "aria-hidden": 'true' }), _jsx(BaseDrawer.Close, { className: 'surf-panel-close surf-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), _jsx(BaseDrawer.Content, { className: 'surf-panel-content', children: children })] }) })] }) }) }));
 };
 function DrawerTitle({ className, ...props }) {
     return (_jsx(BaseDrawer.Title, { ...props, className: skin('surf-panel-title', className) }));

package/dist/icon.d.ts

@@ -23,6 +23,7 @@ declare const shapes: {
     'arrow-back': React.JSX.Element;
     'arrow-up': React.JSX.Element;
     'arrow-down': React.JSX.Element;
+    refresh: React.JSX.Element;
     sort: React.JSX.Element;
     'external-link': React.JSX.Element;
     copy: React.JSX.Element;
@@ -31,6 +32,18 @@ declare const shapes: {
     calendar: React.JSX.Element;
     user: React.JSX.Element;
     settings: React.JSX.Element;
+    server: React.JSX.Element;
+    database: React.JSX.Element;
+    disk: React.JSX.Element;
+    chip: React.JSX.Element;
+    memory: React.JSX.Element;
+    network: React.JSX.Element;
+    bolt: React.JSX.Element;
+    token: React.JSX.Element;
+    thermometer: React.JSX.Element;
+    pin: React.JSX.Element;
+    list: React.JSX.Element;
+    grid: React.JSX.Element;
 };
 export type IconName = keyof typeof shapes;
 export declare const iconNames: readonly IconName[];
@@ -43,11 +56,8 @@ type Semantics = {
 };
 export type IconProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'name' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden' | 'tabIndex' | 'focusable' | 'width' | 'height' | 'viewBox' | 'strokeWidth' | 'fill' | 'stroke' | 'title'> & Semantics & {
     name: IconName;
-    /**
-     * 14, 16 or 20px; 16px when omitted. Deprecated, removed in a later minor: sm
-     * (16px, now default), md (20px, now large) and lg (24px, off the scale).
-     */
-    size?: ComponentSize | 'sm' | 'md' | 'lg';
+    /** 14, 16 or 20px; 16px when omitted. */
+    size?: ComponentSize;
 };
 /** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
 export declare const Icon: ({ name, size, decorative, label, className, ref, ...props }: IconProps & {