@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/{appearance-context.js → foundation/visual.js}

@@ -1,7 +1,32 @@
-import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import { defaultAppearance } from "./appearance.js";
+const visuals = new WeakMap();
+/** Resolves and memoizes one Visual per Appearance, Theme, and animation preference. */
+export function resolveVisual(appearance, preferences) {
+    let resolved = visuals.get(appearance);
+    if (resolved === undefined)
+        visuals.set(appearance, resolved = new Map());
+    const key = `${preferences.theme}:${preferences.animations}`;
+    const cached = resolved.get(key);
+    if (cached !== undefined)
+        return cached;
+    const duration = preferences.animations ? appearance.transaction.duration : 0;
+    const visual = Object.freeze({
+        appearance,
+        preferences,
+        colors: appearance.colors[preferences.theme],
+        material: appearance.material[preferences.theme],
+        shadow: appearance.shadow[preferences.theme],
+        spacing: appearance.spacing,
+        radius: appearance.radius,
+        duration,
+        easing: cssEasing(appearance.transaction.easing)
+    });
+    resolved.set(key, visual);
+    return visual;
+}
 export const AppearanceContext = createContext(defaultAppearance);
-/** Returns the nearest unresolved appearance, or React UI's default. */
+/** Returns the nearest Appearance, or React UI's default. */
 export function useAppearance() {
     return useContext(AppearanceContext);
 }
@@ -10,35 +35,29 @@ export function usePreferences() {
     const source = useContext(PreferencesContext);
     return useSyncExternalStore(source.subscribe, source.getSnapshot, source.getServerSnapshot);
 }
-/** Reactively reads the browser's complete visual preferences. */
-export function useBrowserPreferences() {
-    return useSyncExternalStore(browserPreferencesSource.subscribe, browserPreferencesSource.getSnapshot, browserPreferencesSource.getServerSnapshot);
+/** Returns the shared resolved Visual for the nearest Appearance and Preferences. */
+export function useVisual() {
+    return resolveVisual(useAppearance(), usePreferences());
 }
-/** Selects the active branch of one complete ThemedValue. */
+/** Selects the active branch of one themed value. */
 export function useThemedValue(value) {
     return value[usePreferences().theme];
 }
-/** Resolves one coherent Appearance snapshot for internal component derivation. */
-export function useResolvedAppearance() {
-    const appearance = useAppearance();
-    const preferences = usePreferences();
-    return useMemo(() => ({
-        appearance,
-        preferences,
-        colors: appearance.colors[preferences.theme],
-        material: appearance.material[preferences.theme],
-        shadow: appearance.shadow[preferences.theme],
-        transaction: appearance.transaction
-    }), [appearance, preferences]);
+/** Reactively reads the browser's complete visual preferences. */
+export function useBrowserPreferences() {
+    return useSyncExternalStore(browserPreferencesSource.subscribe, browserPreferencesSource.getSnapshot, browserPreferencesSource.getServerSnapshot);
 }
-/** Creates a stable source for a complete explicitly supplied Preferences value. */
+/** Creates a stable source for one explicitly supplied Preferences value. */
 export function fixedPreferencesSource(preferences) {
     return {
         getSnapshot: () => preferences,
         getServerSnapshot: () => preferences,
-        subscribe: emptySubscription
+        subscribe: () => () => undefined
     };
 }
+export function cssEasing(easing) {
+    return typeof easing === "string" ? easing : `cubic-bezier(${easing.join(", ")})`;
+}
 const defaultPreferences = Object.freeze({ theme: "light", animations: true });
 const subscribers = new Set();
 let darkPreference;
@@ -47,8 +66,8 @@ let browserSnapshot = defaultPreferences;
 function readBrowserPreferences() {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function")
         return defaultPreferences;
-    darkPreference ??= window.matchMedia(darkThemeQuery);
-    reducedMotionPreference ??= window.matchMedia(reducedMotionQuery);
+    darkPreference ??= window.matchMedia("(prefers-color-scheme: dark)");
+    reducedMotionPreference ??= window.matchMedia("(prefers-reduced-motion: reduce)");
     const theme = darkPreference.matches ? "dark" : "light";
     const animations = !reducedMotionPreference.matches;
     if (browserSnapshot.theme !== theme || browserSnapshot.animations !== animations) {
@@ -78,14 +97,9 @@ function publishBrowserPreferences() {
     for (const subscriber of subscribers)
         subscriber();
 }
-function emptySubscription() {
-    return () => undefined;
-}
 const browserPreferencesSource = {
     getSnapshot: readBrowserPreferences,
     getServerSnapshot: () => defaultPreferences,
     subscribe: subscribeBrowserPreferences
 };
 export const PreferencesContext = createContext(browserPreferencesSource);
-const darkThemeQuery = "(prefers-color-scheme: dark)";
-const reducedMotionQuery = "(prefers-reduced-motion: reduce)";

package/dist/grid.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, CSSProperties } from "react";
-import type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
+import type { LayoutAlignment, LayoutGap, LayoutJustification } from "./foundation/layout.js";
 /** Properties accepted by the Grid layout primitive. */
 export interface GridProps extends ComponentPropsWithoutRef<"div"> {
     /** Equal-width column count or native CSS column-track expression. */

package/dist/grid.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { alignment, justification, resolveGap, tracks } from "./layout.js";
-import { useAppearance } from "./ui-provider.js";
+import { alignment, justification, tracks } from "./foundation/layout.js";
+import { resolveSpacing } from "./foundation/spacing.js";
+import { useVisual } from "./foundation/visual.js";
 /** A predictable CSS Grid container with no visual appearance of its own. */
 export const Grid = forwardRef(function Grid({ align, columns, flow, gap, inline = false, justify, rows, style, ...properties }, ref) {
-    const appearance = useAppearance();
+    const { spacing } = useVisual();
     return _jsx("div", { ...properties, ref: ref, style: {
             ...style,
             display: inline ? "inline-grid" : "grid",
             alignItems: alignment(align) ?? style?.alignItems,
-            gap: gap === undefined ? style?.gap : resolveGap(gap, appearance),
+            gap: gap === undefined ? style?.gap : resolveSpacing(gap, spacing),
             gridAutoFlow: flow ?? style?.gridAutoFlow,
             gridTemplateColumns: tracks(columns, "columns") ?? style?.gridTemplateColumns,
             gridTemplateRows: tracks(rows, "rows") ?? style?.gridTemplateRows,

package/dist/icons/main.d.ts

@@ -1,7 +1,9 @@
 /**
  * Public entry point for icons that belong to the React UI visual language.
  *
- * Icons enter this surface only after their source, accessibility behavior,
- * and customization contract have been established.
+ * Every Lucide icon is available here under its Lucide name. Programs import
+ * icons only from this entry, so the icon source stays an implementation
+ * detail. Inside a UIProvider an icon follows its text size and color with a
+ * constant 1.5px stroke; its own `size`, `color`, or `strokeWidth` still wins.
  */
-export {};
+export * from "lucide-react";

package/dist/icons/main.js

@@ -1,7 +1,9 @@
 /**
  * Public entry point for icons that belong to the React UI visual language.
  *
- * Icons enter this surface only after their source, accessibility behavior,
- * and customization contract have been established.
+ * Every Lucide icon is available here under its Lucide name. Programs import
+ * icons only from this entry, so the icon source stays an implementation
+ * detail. Inside a UIProvider an icon follows its text size and color with a
+ * constant 1.5px stroke; its own `size`, `color`, or `strokeWidth` still wins.
  */
-export {};
+export * from "lucide-react";

package/dist/input.d.ts

@@ -1,4 +1,4 @@
-import type { TextControlProps } from "./text-control.js";
+import { type TextControlProps } from "./control/text-control.js";
 export type InputProps = TextControlProps;
-/** A labeled single-line text control. onChange receives the string value. */
+/** A labeled single-line text field. `onChange` receives the string value. */
 export declare const Input: import("react").ForwardRefExoticComponent<TextControlProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/input.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Input as AriaInput, TextField } from "react-aria-components";
-import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
-import { SurfaceField } from "./control-surface.js";
-import FieldStyle, { textControlClass } from "./field-style.js";
-/** A labeled single-line text control. onChange receives the string value. */
-export const Input = forwardRef(function Input({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, material, shadow, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
-    return _jsxs(TextField, { ...properties, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(SurfaceField, { material: material, shadow: shadow, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("input", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { nativeTextStyle, TextWell } from "./control/text-control.js";
+import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
+import { dimmedClass } from "./surface/surface.js";
+/** A labeled single-line text field. `onChange` receives the string value. */
+export const Input = forwardRef(function Input({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color = "background", radius, style, className, placeholder, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    return _jsxs(TextField, { ...properties, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(TextWell, { color: color, material: material, metrics: metrics, state: state, children: _jsx("input", { ...native }) }), style: nativeTextStyle(metrics, false) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
 });

package/dist/list-box.d.ts

@@ -1,13 +1,20 @@
 import type { CSSProperties, ReactElement, RefAttributes } from "react";
 import type { HeaderProps as AriaHeaderProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps } from "react-aria-components";
-import type { ControlColor } from "./control.js";
-import type { RadiusProps } from "./radius.js";
-import type { ScaleLevel } from "./scale.js";
-import { type MultipleStringSelection, type MultipleStringSelectionProps, type SingleStringSelectionProps } from "./selection.js";
-type ListBoxRootBaseProps<T extends object> = Omit<AriaListBoxProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style"> & RadiusProps & Readonly<{
+import { type ControlMetrics } from "./control/control.js";
+import { type MultipleSelectionProps, type MultipleStringSelection, type SingleStringSelectionProps } 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 ListBoxRootBaseProps<T extends object> = Omit<AriaListBoxProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style" | "shouldFocusOnHover" | "shouldFocusWrap" | "shouldSelectOnPressUp"> & RadiusProps & Readonly<{
     className?: string;
-    color?: ControlColor;
-    disabledValues?: readonly string[];
+    /** Color laid beneath selected Items. */
+    color?: Color;
+    /** Whether pointing at an Item moves focus to it. */
+    focusOnHover?: boolean;
+    /** Whether arrow keys wrap from the last Item to the first. */
+    focusWrap?: boolean;
+    /** Whether an Item is selected when the press ends instead of when it starts. */
+    selectOnPressUp?: boolean;
     size?: ScaleLevel;
     style?: CSSProperties;
 }>;
@@ -15,31 +22,29 @@ export type ListBoxSingleSelectionProps = SingleStringSelectionProps & Readonly<
     selectionMode?: "single";
 }>;
 export type ListBoxMultipleValue = MultipleStringSelection;
-export type ListBoxMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
-    selectionMode: "multiple";
-}>;
-/** Properties accepted by the selectable collection. Single selection is the default. */
+export type ListBoxMultipleSelectionProps = MultipleSelectionProps;
+/** A selectable collection. Single selection is the default. */
 export type ListBoxRootProps<T extends object = object> = ListBoxRootBaseProps<T> & (ListBoxSingleSelectionProps | ListBoxMultipleSelectionProps);
 export type ListBoxRootComponent = <T extends object = object>(properties: ListBoxRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const ListBoxRoot: ListBoxRootComponent;
-export interface ListBoxItemProps<T = object> extends Omit<AriaListBoxItemProps<T>, "className" | "id" | "isDisabled" | "style"> {
+export interface ListBoxItemProps<T = object> extends Omit<AriaListBoxItemProps<T>, "className" | "id" | "isDisabled" | "render" | "style"> {
+    /** Identity of this Item within its collection. */
+    readonly id: string;
     readonly className?: string;
-    readonly color?: ControlColor;
+    /** Color laid beneath this Item when it is selected. */
+    readonly color?: Color;
     readonly disabled?: boolean;
-    readonly id: string;
     readonly style?: CSSProperties;
 }
 export type ListBoxItemComponent = <T = object>(properties: ListBoxItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const ListBoxItem: ListBoxItemComponent;
 export interface ListBoxSectionProps<T extends object = object> extends Omit<AriaListBoxSectionProps<T>, "className" | "style"> {
     readonly className?: string;
     readonly style?: CSSProperties;
 }
 export type ListBoxSectionComponent = <T extends object = object>(properties: ListBoxSectionProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
-export declare const ListBoxSection: ListBoxSectionComponent;
 export type ListBoxHeaderProps = AriaHeaderProps;
-export declare const ListBoxHeader: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
-/** A selectable collection whose items and groups remain independently composable. */
+/** Heading treatment shared by list and menu sections. */
+export declare function collectionHeaderStyle(metrics: ControlMetrics, style?: CSSProperties): CSSProperties;
+/** A selectable collection whose Items and Sections remain independently composable. */
 export declare const ListBox: ListBoxRootComponent & {
     Item: ListBoxItemComponent;
     Section: ListBoxSectionComponent;

package/dist/list-box.js

@@ -1,129 +1,72 @@
 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, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, ListBoxSection as AriaListBoxSection } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { multipleSelection, singleSelection, toAriaSelection } from "./selection.js";
-import { AriaDirectionBoundary } from "./aria-direction.js";
-const ListBoxThemeContext = createContext(null);
-const ListBoxRootImplementation = forwardRef(function ListBoxRoot(properties, ref) {
-    const { className, color, defaultValue, disabledValues, onChange, radius = "medium", selectionMode = "single", shouldFocusOnHover = false, size = "medium", style, value, ...native } = properties;
-    const theme = useControlTheme({ color, radius, size });
-    const context = useMemo(() => ({ color, radius, size, theme }), [color, radius, size, theme]);
+import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { itemStyle, itemSurface, SelectionMark } from "./control/item.js";
+import { ariaSelection } from "./control/selection.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+const ListBoxStyleContext = createContext(null);
+const ListBoxRootImplementation = forwardRef(function ListBox(properties, ref) {
+    const { className, color = "primary", defaultValue: _defaultValue, onChange: _onChange, radius, selectionMode: _selectionMode, focusOnHover = false, focusWrap, selectOnPressUp, 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 }), [color, metrics, itemRadius]);
     const direction = resolveDirection(native.dir, useDirection());
-    const selection = selectionProperties(properties);
-    return _jsx(ListBoxThemeContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaListBox, { ...native, ...selection, ref: ref, dir: direction, selectionMode: selectionMode, shouldFocusOnHover: shouldFocusOnHover, className: className, style: {
+    return _jsx(ListBoxStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaListBox, { ...native, ...ariaSelection(properties, "single"), ref: ref, dir: direction, shouldFocusOnHover: focusOnHover, shouldFocusWrap: focusWrap, shouldSelectOnPressUp: selectOnPressUp, className: className, style: {
                     display: "grid",
-                    gap: theme.gap,
+                    gap: 2,
                     minWidth: 0,
-                    padding: theme.gap,
+                    padding: metrics.listInset,
                     boxSizing: "border-box",
                     outline: "none",
                     fontFamily: "inherit",
-                    fontSize: theme.fontSize,
+                    fontSize: metrics.fontSize,
                     ...style
                 } }) }) });
 });
-export const ListBoxRoot = ListBoxRootImplementation;
-function selectionProperties(properties) {
-    const selectedKeys = toAriaSelection(properties.value);
-    const defaultSelectedKeys = toAriaSelection(properties.defaultValue);
-    const disabledKeys = properties.disabledValues;
-    const onSelectionChange = properties.onChange == null
-        ? undefined
-        : (selection) => {
-            if (properties.selectionMode === "multiple") {
-                properties.onChange?.(multipleSelection(selection));
-                return;
-            }
-            properties.onChange?.(singleSelection(selection));
-        };
-    return {
-        ...(selectedKeys !== undefined ? { selectedKeys } : {}),
-        ...(defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}),
-        ...(disabledKeys !== undefined ? { disabledKeys } : {}),
-        ...(onSelectionChange !== undefined ? { onSelectionChange } : {})
-    };
-}
-const ListBoxItemImplementation = forwardRef(function ListBoxItem({ children, className, color, disabled = false, style, ...properties }, ref) {
-    const inherited = useContext(ListBoxThemeContext);
-    const item = {
-        children,
-        className,
-        disabled,
-        properties: {
-            ...properties,
-            textValue: properties.textValue ?? (typeof children === "string" ? children : undefined)
-        },
-        ref,
-        style
-    };
-    return inherited != null && color === undefined
-        ? _jsx(ListBoxItemView, { ...item, theme: inherited.theme })
-        : _jsx(ResolvedListBoxItem, { ...item, color: color ?? inherited?.color, radius: inherited?.radius, size: inherited?.size });
+const ListBoxItemImplementation = forwardRef(function ListBoxItem({ children, className, color, disabled = false, style, textValue, ...properties }, ref) {
+    const inherited = useListBoxStyle();
+    const itemColor = color ?? inherited.color;
+    const { metrics, itemRadius } = inherited;
+    return _jsx(AriaListBoxItem, { ...properties, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => itemSurface(metrics.visual, itemColor, {
+            selected: state.isSelected,
+            hovered: state.isHovered,
+            pressed: state.isPressed,
+            focusVisible: state.isFocusVisible,
+            disabled: state.isDisabled
+        }, itemRadius)), style: { ...itemStyle(metrics, disabled), ...style }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, _jsx(SelectionMark, { visible: state.isSelected })] }) });
 });
-function ResolvedListBoxItem({ color, radius, size, ...properties }) {
-    return _jsx(ListBoxItemView, { ...properties, theme: useControlTheme({ color, radius, size }) });
-}
-function ListBoxItemView({ children, className, disabled, properties, ref, style, theme }) {
-    return _jsx(AriaListBoxItem, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => ({
-            ...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 && !state.isSelected ? `1px solid ${theme.focusColor}` : "none",
-            outlineOffset: 1,
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? controlOpacity.disabled : 1,
-            userSelect: "none",
-            ...(state.isSelected
-                ? state.isPressed
-                    ? theme.paints.palette.pressed
-                    : state.isHovered
-                        ? theme.paints.palette.hover
-                        : theme.paints.palette.rest
-                : state.isHovered
-                    ? theme.paints.subtle.hover
-                    : { background: "transparent", color: "inherit" }),
-            ...style
-        }), children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, _jsx("span", { "aria-hidden": "true", style: { flexShrink: 0, width: "1em", textAlign: "center" }, children: state.isSelected ? "✓" : null })] }) });
-}
-export const ListBoxItem = ListBoxItemImplementation;
 const ListBoxSectionImplementation = forwardRef(function ListBoxSection({ className, style, ...properties }, ref) {
-    const theme = useListBoxTheme();
-    return _jsx(AriaListBoxSection, { ...properties, ref: ref, className: className, style: {
-            display: "grid",
-            gap: theme.gap,
-            minWidth: 0,
-            ...style
-        } });
+    useListBoxStyle();
+    return _jsx(AriaListBoxSection, { ...properties, ref: ref, className: className, style: { display: "grid", gap: 2, minWidth: 0, ...style } });
 });
-export const ListBoxSection = ListBoxSectionImplementation;
-export const ListBoxHeader = forwardRef(function ListBoxHeader({ style, ...properties }, ref) {
-    const theme = useListBoxTheme();
-    return _jsx(AriaHeader, { ...properties, ref: ref, style: {
-            paddingInline: Math.max(8, theme.spacing),
-            paddingBlock: theme.gap,
-            fontWeight: controlFontWeight,
-            opacity: controlOpacity.secondary,
-            ...style
-        } });
+const ListBoxHeader = forwardRef(function ListBoxHeader({ style, ...properties }, ref) {
+    const { metrics } = useListBoxStyle();
+    return _jsx(AriaHeader, { ...properties, ref: ref, style: collectionHeaderStyle(metrics, style) });
 });
-function useListBoxTheme() {
-    const inherited = useContext(ListBoxThemeContext);
-    if (inherited == null)
+/** Heading treatment shared by list and menu sections. */
+export function collectionHeaderStyle(metrics, style) {
+    return {
+        paddingInline: metrics.inset,
+        paddingBlock: metrics.gap,
+        fontSize: "0.92em",
+        fontWeight: controlFontWeight,
+        opacity: controlOpacity.secondary,
+        ...style
+    };
+}
+function useListBoxStyle() {
+    const context = useContext(ListBoxStyleContext);
+    if (context == null)
         throw new Error("ListBox parts must be used inside ListBox");
-    return inherited.theme;
+    return context;
 }
-/** A selectable collection whose items and groups remain independently composable. */
-export const ListBox = Object.assign(ListBoxRoot, {
-    Item: ListBoxItem,
-    Section: ListBoxSection,
+/** A selectable collection whose Items and Sections remain independently composable. */
+export const ListBox = Object.assign(ListBoxRootImplementation, {
+    Item: ListBoxItemImplementation,
+    Section: ListBoxSectionImplementation,
     Header: ListBoxHeader
 });

package/dist/main.d.ts

@@ -4,18 +4,19 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
-export { defaultAppearance, type Appearance, type AppearanceUpdate, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceShadow, type AppearanceTransaction, type Easing, type ThemedValue } from "./appearance.js";
-export { UIProvider, useAppearance, useBrowserPreferences, useDirection, useDocumentDirection, usePreferences, useThemedValue, type UIProviderProps } from "./ui-provider.js";
-export type { Preferences, PreferencesUpdate, Theme } from "./preferences.js";
-export type { Direction } from "./direction.js";
+export { appearanceLimits, defaultAppearance, type Appearance, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceRange, type AppearanceShadow, type AppearanceTransaction, type AppearanceUpdate, type Easing, type ThemedValue } from "./foundation/appearance.js";
+export { UIProvider, type UIProviderProps } from "./foundation/provider.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./foundation/visual.js";
+export { useDirection, useDocumentDirection, type Direction } from "./foundation/direction.js";
+export type { Preferences, PreferencesUpdate, Theme } from "./foundation/preferences.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Surface, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
-export { defaultColor, type Color, type ColorLevel, type ColorScale } from "./color.js";
+export { Surface, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceDepth, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface/surface.js";
+export { resolveColor, useColor, useContrastingColor, type Color, type ColorLevel, type ColorScale } from "./foundation/color.js";
 export { Panel, type PanelProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
 export { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps, type WindowMoveCaptureProps } from "./window.js";
 export { default as useWindowMoveHandle, type WindowMoveHandle } from "./use-window-move-handle.js";
-export { Button, type ButtonColor, type ButtonProps } from "./button.js";
+export { Button, type ButtonActionProps, type ButtonColor, type ButtonLinkProps, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";
 export { DateField, type DateFieldProps } from "./date-field.js";
@@ -28,8 +29,8 @@ export type { DateRange } from "./date-range.js";
 export { Checkbox, type CheckboxProps } from "./checkbox.js";
 export { RadioGroup, type RadioGroupProps, type RadioGroupItemProps } from "./radio.js";
 export { Switch, type SwitchProps } from "./switch.js";
-export { Select, type SelectProps, type SelectOption } from "./select.js";
-export { ComboBox, type ComboBoxProps, type ComboBoxOption } from "./combo-box.js";
+export { Select, type SelectProps } from "./select.js";
+export { ComboBox, type ComboBoxProps } from "./combo-box.js";
 export { ListBox, type ListBoxProps, type ListBoxSingleSelectionProps, type ListBoxMultipleSelectionProps, type ListBoxMultipleValue, type ListBoxItemProps, type ListBoxSectionProps, type ListBoxHeaderProps } from "./list-box.js";
 export { Tabs, type TabsProps, type TabsListProps, type TabsTabProps, type TabsPanelsProps, type TabsPanelProps } from "./tabs.js";
 export { Table, type TableProps, type TableNoSelectionProps, type TableSingleSelectionProps, type TableMultipleSelectionProps, type TableMultipleValue, type TableSort, type TableSortDirection, type TableHeaderProps, type TableColumnProps, type TableBodyProps, type TableRowProps, type TableCellProps } from "./table.js";
@@ -37,7 +38,19 @@ export { Tree, type TreeProps, type TreeNoSelectionProps, type TreeSingleSelecti
 export { Slider, type SliderProps } from "./slider.js";
 export { ProgressBar, type ProgressBarProps } from "./progress-bar.js";
 export { Spinner, type SpinnerProps } from "./spinner.js";
-export { Readiness, useReadiness, useRequirement, type ReadinessFallback, type ReadinessProps, type ReadinessRequirement, type ReadinessRequirementProps } from "./readiness.js";
+export { NumberField, type NumberFieldProps } from "./number-field.js";
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlItemProps } from "./segmented-control.js";
+export { Alert, type AlertProps } from "./alert.js";
+export { FileTrigger, type FileTriggerProps } from "./file-trigger.js";
+export { DropZone, type DropZoneProps } from "./drop-zone.js";
+export { Fieldset, type FieldsetProps } from "./fieldset.js";
+export { AppLayout, type AppLayoutProps, type AppLayoutRegionProps } from "./app-layout.js";
+export { ColorSwatch, type ColorSwatchProps } from "./color-swatch.js";
+export { ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchPickerItemProps } from "./color-swatch-picker.js";
+export { ColorSlider, type ColorSliderProps } from "./color-slider.js";
+export { ColorArea, type ColorAreaProps } from "./color-area.js";
+export { ColorField, type ColorFieldProps } from "./color-field.js";
+export { ColorPicker, type ColorPickerRootProps, type ColorPickerTriggerProps, type ColorPickerContentProps } from "./color-picker.js";
 export { ScrollArea, type ScrollAreaAxis, type ScrollAreaProps } from "./scroll-area.js";
 export { Toolbar, type ToolbarProps, type ToolbarGroupProps, type ToolbarSeparatorProps } from "./toolbar.js";
 export { Disclosure, type DisclosureProps, type DisclosureTriggerProps, type DisclosureContentProps } from "./disclosure.js";
@@ -46,12 +59,10 @@ export { Popover, type PopoverProps, type PopoverTriggerProps, type PopoverConte
 export { Menu, type MenuProps, type MenuNoSelectionProps, type MenuSingleSelectionProps, type MenuMultipleSelectionProps, type MenuMultipleValue, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps } from "./menu.js";
 export { DropdownMenu, type DropdownMenuProps, type DropdownMenuTriggerProps } from "./dropdown-menu.js";
 export { ContextMenu, type ContextMenuProps, type ContextMenuTriggerProps, type ContextMenuContentProps } from "./context-menu.js";
-export { Dialog, type DialogProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
+export { Dialog, type DialogProps, type DialogTriggerProps, type DialogBackdropProps, type DialogBackdropVariant, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
 export { AlertDialog, type AlertDialogProps, type AlertDialogBackdropProps, type AlertDialogContentProps } from "./alert-dialog.js";
 export { Tooltip, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps } from "./tooltip.js";
-export type { ControlColor } from "./control.js";
-export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
-export { resolveRadius, type Radius, type RadiusProps } from "./radius.js";
-export { resolveSpacing, type Spacing } from "./spacing.js";
-export { useColor, useContrastingColor } from "./color.js";
-export { useScale, type NumericScale, type ScaleLevel } from "./scale.js";
+export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./foundation/layout.js";
+export { resolveRadius, type Radius, type RadiusProps } from "./foundation/radius.js";
+export { resolveSpacing, type Spacing } from "./foundation/spacing.js";
+export { useScale, type NumericScale, type ScaleLevel } from "./foundation/scale.js";

package/dist/main.js

@@ -4,12 +4,14 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
-export { defaultAppearance } from "./appearance.js";
-export { UIProvider, useAppearance, useBrowserPreferences, useDirection, useDocumentDirection, usePreferences, useThemedValue } from "./ui-provider.js";
+export { appearanceLimits, defaultAppearance } from "./foundation/appearance.js";
+export { UIProvider } from "./foundation/provider.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./foundation/visual.js";
+export { useDirection, useDocumentDirection } from "./foundation/direction.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
-export { Surface } from "./surface.js";
-export { defaultColor } from "./color.js";
+export { Surface } from "./surface/surface.js";
+export { resolveColor, useColor, useContrastingColor } from "./foundation/color.js";
 // Context-dependent parts are public only through their owning component family.
 export { Panel } from "./panel.js";
 export { Window } from "./window.js";
@@ -35,7 +37,19 @@ export { Tree } from "./tree.js";
 export { Slider } from "./slider.js";
 export { ProgressBar } from "./progress-bar.js";
 export { Spinner } from "./spinner.js";
-export { Readiness, useReadiness, useRequirement } from "./readiness.js";
+export { NumberField } from "./number-field.js";
+export { SegmentedControl } from "./segmented-control.js";
+export { Alert } from "./alert.js";
+export { FileTrigger } from "./file-trigger.js";
+export { DropZone } from "./drop-zone.js";
+export { Fieldset } from "./fieldset.js";
+export { AppLayout } from "./app-layout.js";
+export { ColorSwatch } from "./color-swatch.js";
+export { ColorSwatchPicker } from "./color-swatch-picker.js";
+export { ColorSlider } from "./color-slider.js";
+export { ColorArea } from "./color-area.js";
+export { ColorField } from "./color-field.js";
+export { ColorPicker } from "./color-picker.js";
 export { ScrollArea } from "./scroll-area.js";
 export { Toolbar } from "./toolbar.js";
 export { Disclosure } from "./disclosure.js";
@@ -47,7 +61,6 @@ export { ContextMenu } from "./context-menu.js";
 export { Dialog } from "./dialog.js";
 export { AlertDialog } from "./alert-dialog.js";
 export { Tooltip } from "./tooltip.js";
-export { resolveRadius } from "./radius.js";
-export { resolveSpacing } from "./spacing.js";
-export { useColor, useContrastingColor } from "./color.js";
-export { useScale } from "./scale.js";
+export { resolveRadius } from "./foundation/radius.js";
+export { resolveSpacing } from "./foundation/spacing.js";
+export { useScale } from "./foundation/scale.js";