@surflane/ui 0.12.0 → 0.13.0

package/dist/css/rules/tabs.css

@@ -14,7 +14,7 @@
     min-width: 0;
     max-width: 100%;
     padding: var(--surf-space-1);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     border-radius: var(--surf-radius-md);
     overflow: auto;
     scrollbar-width: thin;
@@ -38,15 +38,23 @@
     white-space: nowrap;
     outline: none;
   }
+  /* State layers paint over the tab's own fill, so hovering or pressing the
+     selected tab keeps it selected. */
   .surf-tabs-tab:hover:not(:disabled):not([data-disabled]) {
     color: var(--surf-ink);
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-tabs-tab:active:not(:disabled):not([data-disabled]) {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-tabs-tab[data-active] {
-    background: var(--surf-canvas);
+    background-color: var(--surf-plane);
     color: var(--surf-ink);
     font-weight: var(--surf-weight-medium);
   }
@@ -77,12 +85,12 @@
     height: var(--active-tab-height);
     box-sizing: border-box;
     border: 0;
-    background: var(--surf-canvas);
+    background: var(--surf-plane);
     border-radius: var(--surf-control-radius);
     pointer-events: none;
   }
   .surf-tabs-list:has(.surf-tabs-indicator) .surf-tabs-tab[data-active] {
-    background: transparent;
+    background-color: transparent;
     border-color: transparent;
   }
   .surf-tabs[data-orientation='vertical'] {

package/dist/css/rules/textarea.css

@@ -13,6 +13,34 @@
     scrollbar-width: thin;
     scrollbar-color: var(--surf-scrollbar-thumb) var(--surf-scrollbar-track);
   }
+  /* Embedded: the pane it fills draws the boundary, so the editor keeps the pane's
+     plane and no edge of its own. An outside halo would fall on the pane's edge,
+     so focus is a ring inside it, and an invalid value an edge inside it. */
+  .surf-textarea[data-variant='embedded'] {
+    inline-size: 100%;
+    padding: var(--surf-space-4);
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    resize: none;
+  }
+  .surf-textarea[data-variant='embedded']:focus {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 var(--surf-focus-ring-width)
+      var(--surf-control-focus);
+  }
+  .surf-textarea[data-variant='embedded'][aria-invalid='true'] {
+    box-shadow: inset 0 0 0 1px var(--surf-status-danger-fg);
+  }
+  .surf-textarea[data-variant='embedded'][aria-invalid='true']:focus {
+    box-shadow: inset 0 0 0 var(--surf-focus-ring-width)
+      var(--surf-status-danger-fg);
+  }
+  @media (forced-colors: active) {
+    .surf-textarea[data-variant='embedded']:focus {
+      outline-offset: var(--surf-focus-ring-inset);
+    }
+  }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *).surf-textarea {

package/dist/css/rules/toast.css

@@ -32,7 +32,9 @@
     box-sizing: border-box;
     width: 100%;
     padding: var(--surf-space-4);
-    border: 0;
+    /* No backdrop sets a toast apart from the same-tone page, and its shadow fades
+       in the dark theme: it keeps the floating edge. */
+    border: 1px solid var(--surf-menu-border);
     border-radius: var(--surf-radius-lg);
     background: var(--surf-menu-background);
     color: var(--surf-ink);

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/dashboard.d.ts

@@ -1,11 +1,19 @@
 import * as React from 'react';
-export type DashboardRootProps = React.ComponentPropsWithoutRef<'div'>;
+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;
 };
@@ -16,8 +24,12 @@ export type DashboardPanelProps = Omit<React.ComponentPropsWithoutRef<'div'>, 't
     /** 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. */
-    state?: 'ready' | 'loading' | 'error' | '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;
@@ -32,15 +44,15 @@ export type DashboardPanelProps = Omit<React.ComponentPropsWithoutRef<'div'>, 't
     labels?: Partial<DashboardPanelLabels>;
 };
 export declare const Dashboard: {
-    Root: ({ className, ref, ...props }: DashboardRootProps & {
+    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, labels, className, children, ref, ...props }: DashboardPanelProps & {
+    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: ({ className, ref, ...props }: DashboardRootProps & {
+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, labels, className, children, ref, ...props }: DashboardPanelProps & {
+}) => 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

@@ -10,25 +10,50 @@ 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), one column on a phone. */
-const Root = function DashboardRoot({ className, ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('surf-dashboard', className) }));
+ * --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, labels, className, children, ref, ...props }) {
+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;
-    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`, 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' }), _jsx("span", { className: 'surf-feedback-sr', children: text.loading })] })) : state === 'error' ? (_jsxs(InlineMessage.Root, { tone: 'danger', children: [_jsx(InlineMessage.Icon, { tone: 'danger' }), _jsxs(InlineMessage.Content, { children: [_jsx(InlineMessage.Description, { children: message ?? text.error }), onRetry && (_jsx(InlineMessage.Actions, { children: _jsx(Button, { variant: 'outline', size: 'small', onClick: onRetry, children: text.retry }) }))] })] })) : state === 'empty' ? (_jsx("p", { className: 'surf-dashboard-panel-empty', children: message ?? text.empty })) : (children) })] }));
+    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.

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>>;