@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/menu.d.ts

@@ -1,51 +1,47 @@
 import type { CSSProperties, ReactElement, RefAttributes } from "react";
 import type { HeaderProps as AriaHeaderProps, MenuItemProps as AriaMenuItemProps, MenuProps as AriaMenuProps, MenuSectionProps as AriaMenuSectionProps, SeparatorProps as AriaSeparatorProps } from "react-aria-components";
-import { type ControlColor } from "./control.js";
-import type { ScaleLevel } from "./scale.js";
-import { type MultipleStringSelection, type MultipleStringSelectionProps, type SingleStringSelectionProps } from "./selection.js";
-type MenuRootBaseProps<T extends object> = Omit<AriaMenuProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onAction" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style"> & Readonly<{
-    readonly className?: string;
-    readonly color?: ControlColor;
-    readonly disabledValues?: readonly string[];
-    readonly onItemAction?: (value: string) => void;
-    readonly size?: ScaleLevel;
-    readonly style?: CSSProperties;
-}>;
-export type MenuNoSelectionProps = Readonly<{
-    selectionMode?: "none";
-    value?: never;
-    defaultValue?: never;
-    onChange?: never;
-}>;
-export type MenuSingleSelectionProps = SingleStringSelectionProps & Readonly<{
-    selectionMode: "single";
+import { type MultipleSelectionProps, type MultipleStringSelection, type NoSelectionProps, type SingleSelectionProps } from "./control/selection.js";
+import type { Color } from "./foundation/color.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+type MenuRootBaseProps<T extends object> = Omit<AriaMenuProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onAction" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style" | "shouldFocusWrap" | "shouldCloseOnSelect"> & RadiusProps & Readonly<{
+    className?: string;
+    /** Whether activating an Item closes the menu. Defaults to `true`. */
+    closeOnSelect?: boolean;
+    /** Color laid beneath selected Items. */
+    color?: Color;
+    /** Whether arrow keys wrap from the last Item to the first. */
+    focusWrap?: boolean;
+    /** Runs with the value of the Item that was activated. */
+    onAction?: (value: string) => void;
+    size?: ScaleLevel;
+    style?: CSSProperties;
 }>;
+export type MenuNoSelectionProps = NoSelectionProps;
+export type MenuSingleSelectionProps = SingleSelectionProps;
 export type MenuMultipleValue = MultipleStringSelection;
-export type MenuMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
-    selectionMode: "multiple";
-}>;
+export type MenuMultipleSelectionProps = MultipleSelectionProps;
 export type MenuRootProps<T extends object = object> = MenuRootBaseProps<T> & (MenuNoSelectionProps | MenuSingleSelectionProps | MenuMultipleSelectionProps);
 export type MenuRootComponent = <T extends object = object>(properties: MenuRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const MenuRoot: MenuRootComponent;
-export interface MenuItemProps<T = object> extends Omit<AriaMenuItemProps<T>, "className" | "id" | "isDisabled" | "style"> {
+export interface MenuItemProps<T = object> extends Omit<AriaMenuItemProps<T>, "className" | "id" | "isDisabled" | "render" | "style" | "shouldCloseOnSelect"> {
+    /** Identity of this Item within its Menu. */
+    readonly id: string;
     readonly className?: string;
-    readonly color?: ControlColor;
+    /** Whether activating this Item closes the menu, overriding the Menu. */
+    readonly closeOnSelect?: boolean;
+    /** Color laid beneath this Item when it is selected. */
+    readonly color?: Color;
     readonly disabled?: boolean;
-    readonly id?: string;
     readonly style?: CSSProperties;
 }
 export type MenuItemComponent = <T = object>(properties: MenuItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const MenuItem: MenuItemComponent;
-export type MenuSectionProps<T extends object = object> = AriaMenuSectionProps<T>;
-export declare const MenuSection: <T>(props: AriaMenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export type MenuSectionProps<T extends object = object> = Omit<AriaMenuSectionProps<T>, "defaultSelectedKeys" | "selectedKeys" | "onSelectionChange" | "selectionMode" | "disallowEmptySelection" | "shouldCloseOnSelect">;
 export type MenuHeaderProps = AriaHeaderProps;
-export declare const MenuHeader: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
 export type MenuSeparatorProps = AriaSeparatorProps;
-export declare const MenuSeparator: import("react").ForwardRefExoticComponent<AriaSeparatorProps & RefAttributes<HTMLElement>>;
 /** A keyboard-navigable collection of commands or selectable options. */
 export declare const Menu: MenuRootComponent & {
     Item: MenuItemComponent;
-    Section: <T>(props: AriaMenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+    Section: <T extends object = object>(properties: MenuSectionProps<T>) => ReactElement | null;
     Header: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
     Separator: import("react").ForwardRefExoticComponent<AriaSeparatorProps & RefAttributes<HTMLElement>>;
 };

package/dist/menu.js

@@ -1,116 +1,70 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Header as AriaHeader, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, Separator as AriaSeparator } from "react-aria-components";
-import { colorOpacity } from "./color.js";
-import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
-import { multipleSelection, singleSelection, stringKey, toAriaSelection } from "./selection.js";
-const MenuThemeContext = createContext(null);
-const MenuRootImplementation = forwardRef(function MenuRoot(properties, ref) {
-    const { className, color, defaultValue, disabledValues, onChange, onItemAction, selectionMode = "none", size = "medium", style, value, ...native } = properties;
-    const theme = useControlTheme({ color, size });
-    const context = useMemo(() => ({ color, size, theme }), [color, size, theme]);
-    return _jsx(MenuThemeContext.Provider, { value: context, children: _jsx(AriaMenu, { ...native, ...selectionProperties(properties), ref: ref, className: className, disabledKeys: disabledValues, selectionMode: selectionMode === "none" ? undefined : selectionMode, onAction: onItemAction == null ? undefined : key => onItemAction(stringKey(key)), style: {
+import { useControlMetrics } from "./control/control.js";
+import { separatorColor } from "./control/field.js";
+import { itemStyle, itemSurface, SelectionMark } from "./control/item.js";
+import { ariaSelection, stringKey } from "./control/selection.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { collectionHeaderStyle } from "./list-box.js";
+const MenuStyleContext = createContext(null);
+const MenuRootImplementation = forwardRef(function Menu(properties, ref) {
+    const { className, closeOnSelect, color = "primary", defaultValue: _defaultValue, focusWrap, onAction, onChange: _onChange, radius, selectionMode = "none", size, style, value: _value, ...native } = properties;
+    const metrics = useControlMetrics(size, radius);
+    // Items are controls: they take the control radius at their size.
+    const itemRadius = metrics.radius;
+    const context = useMemo(() => ({ color, metrics, itemRadius, selecting: selectionMode !== "none" }), [color, metrics, itemRadius, selectionMode]);
+    const selection = ariaSelection(properties, "none");
+    return _jsx(MenuStyleContext.Provider, { value: context, children: _jsx(AriaMenu, { ...native, ...selection, selectionMode: selection.selectionMode === "none" ? undefined : selection.selectionMode, shouldCloseOnSelect: closeOnSelect, shouldFocusWrap: focusWrap, ref: ref, className: className, onAction: onAction == null ? undefined : key => onAction(stringKey(key)), style: {
                 display: "grid",
-                gap: theme.gap,
-                minWidth: theme.height * 4,
-                padding: theme.gap,
+                gap: 2,
+                minWidth: metrics.height * 5,
+                padding: metrics.listInset,
                 boxSizing: "border-box",
                 outline: "none",
                 fontFamily: "inherit",
-                fontSize: theme.fontSize,
+                fontSize: metrics.fontSize,
                 ...style
             } }) });
 });
-function selectionProperties(properties) {
-    const selectedKeys = toAriaSelection(properties.value);
-    const defaultSelectedKeys = toAriaSelection(properties.defaultValue);
-    const onSelectionChange = properties.onChange == null
-        ? undefined
-        : (selection) => {
-            if (properties.selectionMode === "multiple") {
-                properties.onChange?.(multipleSelection(selection));
-                return;
-            }
-            if (properties.selectionMode === "single")
-                properties.onChange?.(singleSelection(selection));
-        };
-    return {
-        ...(selectedKeys !== undefined ? { selectedKeys } : {}),
-        ...(defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}),
-        ...(onSelectionChange !== undefined ? { onSelectionChange } : {})
-    };
-}
-export const MenuRoot = MenuRootImplementation;
-const MenuItemImplementation = forwardRef(function MenuItem({ className, color, disabled = false, style, ...properties }, ref) {
-    const inherited = useContext(MenuThemeContext);
-    const item = { className, disabled, properties, ref, style };
-    return inherited != null && color === undefined
-        ? _jsx(MenuItemView, { ...item, theme: inherited.theme })
-        : _jsx(ResolvedMenuItem, { ...item, color: color ?? inherited?.color, size: inherited?.size });
+const MenuItemImplementation = forwardRef(function MenuItem({ children, className, closeOnSelect, color, disabled = false, style, textValue, ...properties }, ref) {
+    const { color: inherited, metrics, itemRadius, selecting } = useMenuStyle();
+    const itemColor = color ?? inherited;
+    return _jsx(AriaMenuItem, { ...properties, shouldCloseOnSelect: closeOnSelect, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => itemSurface(metrics.visual, itemColor, {
+            selected: state.isSelected,
+            // Keyboard focus moves the highlight through a menu the way the pointer does;
+            // pointer-restored focus alone must not keep an item highlighted.
+            hovered: state.isHovered || state.isFocusVisible,
+            pressed: state.isPressed,
+            focusVisible: false,
+            disabled: state.isDisabled
+        }, itemRadius)), style: { ...itemStyle(metrics, disabled), ...style }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, selecting && _jsx(SelectionMark, { visible: state.isSelected })] }) });
 });
-function ResolvedMenuItem({ color, size, ...properties }) {
-    return _jsx(MenuItemView, { ...properties, theme: useControlTheme({ color, size }) });
-}
-function MenuItemView({ className, disabled, properties, ref, style, theme }) {
-    return _jsx(AriaMenuItem, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => {
-            const paint = state.isPressed
-                ? theme.paints.palette.pressed
-                : state.isHovered || state.isSelected
-                    ? theme.paints.palette.hover
-                    : { background: "transparent", color: "inherit" };
-            return {
-                ...theme.transition,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: theme.gap,
-                minWidth: 0,
-                minHeight: theme.height,
-                paddingInline: Math.max(8, theme.spacing),
-                boxSizing: "border-box",
-                borderRadius: theme.radius,
-                outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-                outlineOffset: 1,
-                cursor: disabled ? "not-allowed" : "pointer",
-                opacity: disabled ? controlOpacity.disabled : 1,
-                userSelect: "none",
-                ...paint,
-                ...style
-            };
-        } });
-}
-export const MenuItem = MenuItemImplementation;
-export const MenuSection = AriaMenuSection;
-export const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
-    const theme = useMenuTheme();
-    return _jsx(AriaHeader, { ...properties, ref: ref, style: {
-            paddingInline: Math.max(8, theme.spacing),
-            paddingBlock: theme.gap,
-            fontWeight: controlFontWeight,
-            opacity: controlOpacity.secondary,
-            ...style
-        } });
+const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
+    const { metrics } = useMenuStyle();
+    return _jsx(AriaHeader, { ...properties, ref: ref, style: collectionHeaderStyle(metrics, style) });
 });
-export const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }, ref) {
-    const theme = useMenuTheme();
+const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }, ref) {
+    const { metrics } = useMenuStyle();
     return _jsx(AriaSeparator, { ...properties, ref: ref, style: {
             height: 1,
-            marginBlock: theme.gap,
+            marginBlock: 4,
+            marginInline: metrics.inset,
             border: 0,
-            background: colorOpacity(theme.tint, controlOpacity.separator),
+            background: separatorColor(metrics),
             ...style
         } });
 });
-function useMenuTheme() {
-    const inherited = useContext(MenuThemeContext);
-    if (inherited == null)
+function useMenuStyle() {
+    const context = useContext(MenuStyleContext);
+    if (context == null)
         throw new Error("Menu parts must be used inside Menu");
-    return inherited.theme;
+    return context;
 }
 /** A keyboard-navigable collection of commands or selectable options. */
-export const Menu = Object.assign(MenuRoot, {
-    Item: MenuItem,
-    Section: MenuSection,
+export const Menu = Object.assign(MenuRootImplementation, {
+    Item: MenuItemImplementation,
+    Section: AriaMenuSection,
     Header: MenuHeader,
     Separator: MenuSeparator
 });

package/dist/number-field.d.ts

@@ -0,0 +1,17 @@
+import type { NumberFieldProps as AriaNumberFieldProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, ControlOverrides | "value" | "defaultValue" | "onChange" | "className" | "style">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    /** A number, or `null` while the field is empty. */
+    readonly value?: number | null;
+    readonly defaultValue?: number | null;
+    readonly onChange?: (value: number | null) => void;
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}
+/**
+ * A number typed or stepped within a range. It is formatted by the locale and
+ * `formatOptions`, such as a unit, and checked against its range on blur.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/number-field.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Group, Input as AriaInput, NumberField as AriaNumberField } from "react-aria-components";
+import { Minus, Plus } from "lucide-react";
+import { useControlMetrics } from "./control/control.js";
+import { FieldButton } from "./control/field-button.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { iconProps } from "./control/icon.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { nativeTextStyle } from "./control/text-control.js";
+import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
+import { dimmedClass } from "./surface/surface.js";
+/**
+ * A number typed or stepped within a range. It is formatted by the locale and
+ * `formatOptions`, such as a unit, and checked against its range on blur.
+ */
+export const NumberField = forwardRef(function NumberField({ label, description, errorMessage, disabled, readOnly, required, invalid, value, defaultValue, onChange, size, color = "background", radius, style, className, placeholder, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    // React Aria spells an empty number as NaN; React UI spells it as null.
+    const number = (next) => next === null ? Number.NaN : next;
+    return _jsxs(AriaNumberField, { ...properties, ...(value !== undefined ? { value: number(value) } : {}), ...(defaultValue !== undefined ? { defaultValue: number(defaultValue) } : {}), onChange: next => onChange?.(Number.isNaN(next) ? null : next), className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsxs(Group, { render: surfaceRender("div", group => ({
+                    color,
+                    depth: "recessed",
+                    material,
+                    radius: metrics.radius,
+                    interaction: { hovered: group.isHovered, focusVisible: group.isFocusWithin, invalid: group.isInvalid, disabled: group.isDisabled }
+                })), style: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto auto", alignItems: "center", minWidth: 0, height: metrics.height, paddingInlineEnd: 4 }, children: [_jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, style: { ...nativeTextStyle(metrics, false), paddingInlineEnd: metrics.gap, fontVariantNumeric: "tabular-nums" } }), _jsx(FieldButton, { slot: "decrement", metrics: metrics, children: _jsx(Minus, { ...iconProps(14) }) }), _jsx(FieldButton, { slot: "increment", metrics: metrics, children: _jsx(Plus, { ...iconProps(14) }) })] }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
+});

package/dist/panel.d.ts

@@ -1,15 +1,20 @@
 import type { ComponentProps, HTMLAttributes } from "react";
-import { type SurfaceProps } from "./surface.js";
-/** Optional content placed before the inset Panel surface. */
+import { type SurfaceProps } from "./surface/surface.js";
+/** Optional heading placed before the inset Panel content. */
 export type PanelHeaderProps = HTMLAttributes<HTMLDivElement>;
 export declare const PanelHeader: import("react").ForwardRefExoticComponent<PanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-/** The material shell that owns a Panel's vertical composition. */
+/** The raised, frosted shell that owns a Panel's vertical composition. */
 export type PanelRootProps = SurfaceProps;
 export declare const PanelRoot: import("react").ForwardRefExoticComponent<Omit<PanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** The independently configurable inset Surface that owns Panel content. */
+/**
+ * The inset region that holds a Panel's content. It is the Panel's own color,
+ * raised, with a more solid material than the frosted shell, so recessed
+ * fields inside it stand out. It sits `small` spacing inside the frame and
+ * pads its content by the Appearance spacing.
+ */
 export type PanelContentProps = SurfaceProps;
 export declare const PanelContent: import("react").ForwardRefExoticComponent<Omit<PanelContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** A material shell whose named parts remain independently composable. */
+/** A raised shell with an optional header and one inset content region. */
 export declare const Panel: import("react").ForwardRefExoticComponent<Omit<PanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Header: import("react").ForwardRefExoticComponent<PanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<PanelContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/panel.js

@@ -1,18 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, createContext, forwardRef, isValidElement, useContext } from "react";
-import { useAppearance } from "./ui-provider.js";
-import { scale } from "./scale.js";
-import { Surface } from "./surface.js";
-const PanelContext = createContext({ hasHeader: false });
+import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import { headerHeight } from "./foundation/layout.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { paintClass, usePaintClasses } from "./surface/paint-class.js";
+import { Surface } from "./surface/surface.js";
+const PanelContext = createContext({ color: undefined, hasHeader: false, radius: undefined });
 export const PanelHeader = forwardRef(function PanelHeader({ style, ...properties }, ref) {
+    const { spacing } = useVisual();
+    // The same header row as a Window: its height and its side padding.
     return _jsx("div", { ...properties, ref: ref, style: {
+            boxSizing: "border-box",
+            // A grid keeps the header's content full width and centers it in the row.
+            display: "grid",
+            alignContent: "center",
             minWidth: 0,
+            minHeight: headerHeight(spacing),
+            paddingInline: spacing,
+            fontSize: controlFontSizes.medium,
+            fontWeight: controlFontWeight,
             ...style
         } });
 });
-export const PanelRoot = forwardRef(function PanelRoot({ children, style, ...properties }, ref) {
+export const PanelRoot = forwardRef(function Panel({ children, style, ...properties }, ref) {
     const hasHeader = Children.toArray(children).some(child => isValidElement(child) && child.type === PanelHeader);
-    return _jsx(PanelContext.Provider, { value: { hasHeader }, children: _jsx(Surface, { ...properties, ref: ref, style: {
+    // The shell and its content share one radius: the Appearance radius.
+    const radius = resolveRadius(properties.radius ?? "medium", useVisual().radius);
+    return _jsx(PanelContext.Provider, { value: { color: properties.color, hasHeader, radius }, children: _jsx(Surface, { material: "full", ...properties, ref: ref, radius: radius, style: {
                 display: "grid",
                 gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
                 minWidth: 0,
@@ -21,11 +37,16 @@ export const PanelRoot = forwardRef(function PanelRoot({ children, style, ...pro
                 ...style
             }, children: children }) });
 });
-export const PanelContent = forwardRef(function PanelContent({ style, ...properties }, ref) {
-    const inset = scale(useAppearance().spacing, "small");
-    const { hasHeader } = useContext(PanelContext);
-    return _jsx(Surface, { ...properties, ref: ref, style: {
-            position: "relative",
+export const PanelContent = forwardRef(function PanelContent({ className, style, ...properties }, ref) {
+    const { spacing } = useVisual();
+    const inset = scale(spacing, "small");
+    const padding = scale(spacing, "medium");
+    const { color, hasHeader, radius } = useContext(PanelContext);
+    // A zero-specificity class keeps the padding a default: any consumer class
+    // or style still sets its own.
+    const padded = usePaintClasses() ? paintClass(`padding: ${padding}px`) : undefined;
+    return _jsx(Surface, { color: color, material: "extended", radius: radius, ...properties, ref: ref, className: [padded, className].filter(Boolean).join(" ") || undefined, style: {
+            ...(padded === undefined ? { padding } : {}),
             minWidth: 0,
             minHeight: 0,
             margin: inset,
@@ -34,7 +55,7 @@ export const PanelContent = forwardRef(function PanelContent({ style, ...propert
             ...style
         } });
 });
-/** A material shell whose named parts remain independently composable. */
+/** A raised shell with an optional header and one inset content region. */
 export const Panel = Object.assign(PanelRoot, {
     Header: PanelHeader,
     Content: PanelContent

package/dist/popover.d.ts

@@ -1,14 +1,24 @@
 import type { ComponentProps, CSSProperties, ReactNode } from "react";
-import type { DialogProps as AriaDialogProps, DialogTriggerProps as AriaDialogTriggerProps, HeadingProps as AriaHeadingProps, PopoverProps as AriaPopoverProps } from "react-aria-components";
-import { type ButtonProps } from "./button.js";
-import { type SurfaceOwnProps } from "./surface.js";
-export type PopoverRootProps = AriaDialogTriggerProps;
-export declare function PopoverRoot(properties: PopoverRootProps): import("react").JSX.Element;
-export type PopoverTriggerProps = ButtonProps;
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface PopoverContentProps extends Omit<AriaPopoverProps, "children" | "className" | "color" | "style">, SurfaceOwnProps {
+import type { DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, PopoverProps as AriaPopoverProps } from "react-aria-components";
+import { type ButtonActionProps } from "./button.js";
+import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
+import { type Direction } from "./foundation/direction.js";
+import { type SurfaceOwnProps } from "./surface/surface.js";
+export type PopoverRootProps = OverlayRootProps;
+export declare function PopoverRoot({ children, ...state }: PopoverRootProps): import("react").JSX.Element;
+export type PopoverTriggerProps = ButtonActionProps;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * The floating Surface of an overlay. Its open state belongs to the family
+ * root, so this part takes placement, its own Surface, and ordinary element
+ * attributes.
+ */
+export interface PopoverContentProps extends Omit<AriaPopoverProps, AriaOverlayInternals | "children" | "className" | "color" | "style" | "dir">, SurfaceOwnProps {
     readonly children?: ReactNode;
     readonly className?: string;
+    readonly dir?: Direction;
+    /** DOM container that owns the positioned overlay's coordinate space. */
+    readonly portalContainer?: Element;
     readonly style?: CSSProperties;
 }
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
@@ -16,14 +26,18 @@ export type PopoverDialogProps = AriaDialogProps;
 export declare const PopoverDialog: import("react").ForwardRefExoticComponent<AriaDialogProps & import("react").RefAttributes<HTMLElement>>;
 export type PopoverTitleProps = AriaHeadingProps;
 export declare const PopoverTitle: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export type PopoverCloseProps = ButtonProps;
-export declare const PopoverClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverCloseProps = ButtonActionProps;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** Positioned content that holds a Menu; it keeps the Appearance radius like every shell. */
+export declare const MenuContent: import("react").ForwardRefExoticComponent<PopoverContentProps & Readonly<{
+    nonModal?: boolean;
+}> & import("react").RefAttributes<HTMLElement>>;
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export declare const Popover: typeof PopoverRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
     Dialog: import("react").ForwardRefExoticComponent<AriaDialogProps & import("react").RefAttributes<HTMLElement>>;
     Title: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-    Close: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export type PopoverProps = ComponentProps<typeof PopoverRoot>;

package/dist/popover.js

@@ -1,26 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Popover as AriaPopover } from "react-aria-components";
-import { useResolvedAppearance } from "./appearance-context.js";
 import { Button } from "./button.js";
-import { controlFontSizes, controlFontWeight } from "./control.js";
-import MotionStyle, { overlayMotionClass, overlayTransition } from "./motion-style.js";
-import { scale } from "./scale.js";
-import { Surface } from "./surface.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { resolveDirectionalPlacement } from "./overlay-placement.js";
-export function PopoverRoot(properties) {
-    return _jsx(AriaDialogTrigger, { ...properties });
+import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import MotionStyle, { overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
+import { resolveDirectionalPlacement } from "./foundation/overlay-placement.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { floatingShadow } from "./surface/shadow-options.js";
+import { Surface } from "./surface/surface.js";
+export function PopoverRoot({ children, ...state }) {
+    return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
 export const PopoverTrigger = forwardRef(function PopoverTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const PopoverContent = forwardRef(function PopoverContent({ children, className, color, material, radius, shadow, style, offset, placement = "bottom", ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const inset = scale(resolved.appearance.spacing, "small");
-    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
-    const direction = resolveDirection(properties.dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...properties, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+const PositionedContent = forwardRef(function PositionedContent({ children, className, color, material, radius, shadow, style, offset, placement = "bottom", nonModal, dir, portalContainer, ...attributes }, ref) {
+    const visual = useVisual();
+    const inset = scale(visual.spacing, "small");
+    const transition = overlayTransition(visual);
+    const direction = resolveDirection(dir, useDirection());
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...attributes, isNonModal: nonModal, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, shadow: shadow ?? floatingShadow(visual.shadow), radius: radius, style: {
                         boxSizing: "border-box",
                         maxWidth: `calc(100vw - ${inset * 2}px)`,
                         maxHeight: `calc(100vh - ${inset * 2}px)`,
@@ -28,6 +30,9 @@ export const PopoverContent = forwardRef(function PopoverContent({ children, cla
                         ...style
                     }, children: children }) })] });
 });
+export const PopoverContent = forwardRef(function PopoverContent(properties, ref) {
+    return _jsx(PositionedContent, { ...properties, ref: ref });
+});
 export const PopoverDialog = forwardRef(function PopoverDialog({ style, ...properties }, ref) {
     return _jsx(AriaDialog, { ...properties, ref: ref, style: { minWidth: 0, outline: "none", ...style } });
 });
@@ -47,6 +52,8 @@ export const PopoverTitle = forwardRef(function PopoverTitle({ style, ...propert
 export const PopoverClose = forwardRef(function PopoverClose(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref, slot: "close" });
 });
+/** Positioned content that holds a Menu; it keeps the Appearance radius like every shell. */
+export const MenuContent = PositionedContent;
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,

package/dist/progress-bar.d.ts

@@ -1,22 +1,20 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { ProgressBarProps as AriaProgressBarProps } from "react-aria-components";
-import type { ControlColor } from "./control.js";
-import type { ScaleLevel } from "./scale.js";
+import { type Color } from "./foundation/color.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
 type NativeProgressBarProps = Omit<AriaProgressBarProps, "children" | "className" | "isIndeterminate" | "style">;
-export interface ProgressBarProps extends NativeProgressBarProps {
-    /** Native class name applied without replacing the component contract. */
+export interface ProgressBarProps extends NativeProgressBarProps, MaterialOverrides {
     readonly className?: string;
-    /** Color used for the completed or moving portion. */
-    readonly color?: ControlColor;
-    /** Displays progress without asserting a current value. */
+    /** Color of the completed or moving portion. */
+    readonly color?: Color;
+    /** Shows progress without asserting a current value. */
     readonly indeterminate?: boolean;
     /** Visible label associated with the progress value. */
     readonly label?: ReactNode;
-    /** Derives typography and track thickness from Appearance. */
     readonly size?: ScaleLevel;
-    /** Native styles applied after ProgressBar defaults. */
     readonly style?: CSSProperties;
 }
-/** Determinate or indeterminate progress for an operation over time. */
+/** Progress over time: a recessed rail filled in the owner's color. */
 export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};