@phreshos/react-ui 0.1.36 → 0.1.38

package/README.md

@@ -37,156 +37,155 @@ import { Button, Surface } from "@phreshos/react-ui"
 ```
 
 Without a provider, components use React UI's `defaultAppearance` and reactively
-follow the browser's complete visual preferences. `UIProvider` supplies the
-Appearance, Preferences, and direction explicitly established for a React UI
-subtree. Each omitted property inherits independently from the nearest provider
-or follows its own default resolution. A provider with no properties introduces
-no boundary or behavior.
-React UI also exports `defaultAppearance` for callers that need the value
-explicitly. A complete System Appearance can be passed directly; React UI uses
-the visual fields it owns and ignores additional System fields such as
-wallpapers.
-
-React UI is neutral between left-to-right and right-to-left interfaces.
-An explicit `UIProvider` direction creates a boundary that participates in
-native DOM inheritance without creating a layout box. When direction is
-omitted, the provider leaves DOM inheritance unchanged. React UI reads the
-nearest explicit direction—or `<html dir>` when there is none—only for
-JavaScript behavior and portals that cannot rely on native inheritance.
+follow the browser's visual preferences. `UIProvider` supplies the Appearance,
+Preferences, and direction explicitly established for a subtree. Each omitted
+property inherits independently from the nearest provider. A provider with no
+properties introduces no boundary or behavior. A complete System Appearance can
+be passed directly; React UI uses its visual fields and ignores the rest.
 
-```tsx
-import { UIProvider, Select } from "@phreshos/react-ui"
+React UI is neutral between left-to-right and right-to-left interfaces. An
+explicit `UIProvider` direction creates a boundary that participates in native
+DOM inheritance without creating a layout box. When direction is omitted, React
+UI follows `<html dir>` for JavaScript behavior and portals.
 
-<UIProvider direction="rtl">
-  <Select label="Choice" options={[{ value: "one", label: "One" }]} />
+```tsx
+<UIProvider direction="rtl" preferences={{ theme: "dark" }}>
+  <Application />
 </UIProvider>
 ```
 
-```tsx
-import { UIProvider, Button, useBrowserPreferences } from "@phreshos/react-ui"
-
-function Example() {
-  const browser = useBrowserPreferences()
+## Visual model
 
-  return <UIProvider preferences={{ ...browser, theme: "dark" }}>
-    <Button>Dark subtree</Button>
-  </UIProvider>
-}
-```
+Every component is built from one primitive, `Surface`, and one Material. A
+Surface is where the Material sits relative to its surroundings:
 
-`Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, and `RadioGroup.Item`
-use the shared Surface implementation while retaining their native behavior. Color and material
-are independent inputs. `color` accepts an Appearance color and resting level such
-as `background:base` or `primary:soft`, or a direct CSS color. Surface defaults
-to `background:base`; solid controls default to `default:base`.
-Every independently owned base paint is exposed through its component's
-`color` prop. Hover, press, focus, selection, and inactive treatments derive
-from that base rather than introducing separate color inputs. Surface and solid controls compare
-the fill with an adaptive perceptual boundary biased toward lighter text, then
-use the Appearance candidate on the opposite side; interaction shades keep that
-choice.
-The omitted value follows the component's meaning: neutral controls use
-`default:base`, while a role with inherent visual meaning may choose another
-Appearance color. Every semantic default remains overridable through `color`.
-`size` accepts `xsmall`, `small`, `medium` (default), `large`, or `xlarge`;
-spacing and radius follow Appearance, while typography remains inherited and
-component sizes are relative to the surrounding text. `disabled` prevents activation and focus;
-`pending` prevents activation while retaining focus.
+| Depth | Meaning | Treatment |
+| --- | --- | --- |
+| `raised` (default) | Something you act on | A lit rim with a slight inward spill, and the outer Appearance shadow |
+| `flat` | A region level with its surroundings | A softer rim |
+| `recessed` | Something that holds a value you enter | A slightly deeper paint and a dim rim |
+
+Every Surface shares one Material edge: its rim catches the same light along
+its top and bottom, so neither edge reads as a bevel, and only faintly along
+its sides, and a very thin dark hairline
+separates it from whatever it sits on. Buttons, selected tabs, thumbs, windows,
+and overlays rise. Text fields, tracks, rails, and wells recess. How deep a
+recess sinks and how much light the rim receives follow the lightness of the
+canvas continuously, so every canvas receives a matching treatment.
 
 ```tsx
-<Button>Cancel</Button>
-<Button color="primary:base" onPress={save}>Save</Button>
-<Button color="danger:soft" size="small">Delete</Button>
+<Surface>Raised</Surface>
+<Surface depth="flat">Level</Surface>
+<Surface depth="recessed">Holds a value</Surface>
 ```
 
-`Surface` is the material- and shadow-owning element. It renders a `div` by default, while
-`as` selects another React element and preserves that element's native properties
-and ref type. Surface owns its paint, opacity, frost, refraction, grain, edge,
-outer shadow, and radius. `radius` accepts a size level, `full`, a
-number in pixels, or a CSS radius and defaults to `medium`.
+`Surface` renders a `div` by default; `as` selects another element or
+component. A host applies the `className`, `style`, and `children` it receives
+on one element and forwards its ref to it. Consumer classes and styles always
+take precedence over Surface's own paint.
 
-```tsx
-<Surface color="background:soft" radius="large">Derived values</Surface>
-<Surface as="button" type="button" color="#345678" radius={18}>Action</Surface>
-<Surface as={Grid} columns={3} gap="medium">Grid content</Surface>
-```
+### Color
 
-`as` can also select an outside React component. A valid Surface host preserves
-the `style`, `dir`, and `children` it receives on one host element and forwards
-its ref to that same element. This lets layout components carry the material
-without a wrapper. The host retains ownership of its own behavior and layout
-properties; Surface retains ownership of material, edge, shadow, radius, and
-required geometry.
+`color` accepts an Appearance color (`primary`), an Appearance color at one
+level (`primary:soft`), or a direct CSS color. Levels move a color toward the
+canvas (`subtle`, `soft`) or toward the content color (`strong`, `intense`), so
+each level keeps its meaning in both Themes.
+
+`default` is a neutral paint close to the canvas; `primary` is the identity
+color. A component's omitted color follows its meaning: neutral controls use
+`default`, fields recess the `background`, and selection, progress, and on-states
+use `primary`. Every owned paint remains customizable through `color`.
+
+Content on a paint uses whichever Appearance content color reads more clearly
+on its resting paint, by perceived lightness contrast. Hover and press move the same base toward the content color; a pressed
+raised Surface settles onto its surroundings. Focus rings in the owner's color,
+or the identity color when the owner is neutral. A focused or invalid value
+holder also claims its hairline. There are no separate state colors.
+
+### Material
 
 `MaterialOptions` defines `opacity`, `backdrop`, `grain`, `grainAmount`,
-`distortion`, and `saturation`. Every material-bearing component, including
-Surface, exposes these values through its `material` prop. Color remains a
-separate property. Omission uses the resource-efficient `basic` rendering mode.
-`none` ignores Material and paints the resolved color as a normal background;
-`basic` adds Material paint, grain, and its edge while remaining solid, with
-Material opacity applied only to the grain; `extended` applies that opacity to
-the complete Material instead; and `full` adds backdrop, distortion, and
-saturation. A `MaterialOptions` object selects full rendering with those
-overrides. Effect options accept a scale level or a direct number; opacity
-affects Surface paint only, never its content. The material edge is part of the
-same Surface rather than a second public entity.
-
-The modes are progressive: each level preserves the rendering of the previous
-one and adds only its own Material capability.
-
-Surface-based controls expose the same separate `color` and `material` props.
-`ShadowOptions` similarly groups `x`, `y`, `blur`, `spread`, and `opacity` under
-the `shadow` prop. Omission or `true` follows the active `appearance.shadow`
-branch, while `false` removes the shadow. Each option accepts a scale level or
-direct number. The shadow is a neutral black
-outer shadow. Surface-based controls expose the same `shadow` prop.
-For text fields and Select, `material` targets the field or trigger; for Checkbox,
-Switch, and RadioGroup.Item, it targets the indicator. RadioGroup supplies material defaults
-to its options, and an Item can override them. Shadow follows the same targets and
-inheritance path.
+`distortion`, and `saturation`. Every Surface-based component accepts them
+through `material`. Rendering is progressive: `none` paints the resolved color
+only; `basic` (default) adds grain and the edge while remaining solid;
+`extended` applies Material opacity; `full` adds backdrop, saturation, and
+distortion. A `MaterialOptions` object selects full rendering with those
+overrides. Backdrop effects are omitted whenever the final paint is opaque.
+
+`shadow` groups `x`, `y`, `blur`, `spread`, and `opacity` for raised Surfaces;
+`false` removes it.
+
+### Radius
+
+`radius` accepts a size level, `full`, pixels, or CSS. Two rules derive every
+default from the Appearance radius:
+
+1. Every Surface carries the Appearance radius. Shells and containers such as
+   Window, Panel and its content, Dialog, and Popover carry it as it is. A
+   control scales it with its height, so the medium control height carries it
+   exactly and every size keeps the same shape, wherever it sits: list Items and
+   the selected Tab are controls.
+2. Shapes whose form is their meaning, such as Radio, Switch, Slider, progress
+   rails, and scrollbar thumbs, stay fully rounded.
+
+## Component rules
+
+Three rules hold across the library, so learning a few components teaches the
+rest.
+
+1. **Everything that owns a paint** accepts `color`, `size`, `radius`,
+   `material`, `disabled`, `className`, and `style`.
+2. **Everything that holds a value is a field**: `label`, `description`,
+   `errorMessage`, `invalid`, `required`, `readOnly`, and `value`,
+   `defaultValue`, `onChange(value)`.
+3. **Every collection is composed of Items** identified by a string `id`:
+   Select, ComboBox, ListBox, Menu, Tabs, Table, Tree, and Accordion. Actions
+   report that identity through `onAction(id)`, and an Item is unavailable
+   through its own `disabled`.
 
 ```tsx
-<Button color="primary:base" material="full">Save</Button>
-<Surface material={{ opacity: 0.6, backdrop: 0 }}>Translucent</Surface>
-<Input label="Name" radius="large" material={{ grain: "small" }} shadow={{ blur: "small" }} />
+<Button color="primary" onPress={install}>Install</Button>
+
+<Input label="Name" value={name} onChange={setName} />
+
+<Select label="Program" value={program} onChange={setProgram}>
+  <Select.Item id="tilo">Tilo</Select.Item>
+  <Select.Item id="lemo">Lemo</Select.Item>
+</Select>
 ```
 
-`Panel` composes an outer `Surface`, an optional header, and an inset content
-`Surface`. Both materials retain Surface defaults; the content inset follows
-Appearance spacing. Positioning, modality, and lifecycle belong to the caller.
+`size` accepts `xsmall`, `small`, `medium` (default), `large`, or `xlarge`.
+Spacing and radius follow Appearance; typography is inherited and applied once
+at each component's root. `disabled` prevents activation and focus; `pending`
+prevents activation while retaining focus.
 
 Component families use one public path: the family name is the root and parts
-that depend on it are properties of that family. For example, use
-`Panel.Header` and `Dialog.Title`; those parts are not separate top-level
-components. Components with independent contracts remain top-level exports.
+that depend on it are its properties, such as `Panel.Header` and
+`Dialog.Title`.
 
-```tsx
-import { Panel } from "@phreshos/react-ui"
+`Panel` is a frosted shell with an optional header and one content region. The
+content takes the shell's color, raised with the `extended` material and the
+same Appearance radius, sits half the spacing inside the shell, and pads its
+content by the spacing. The header is the same row as a Window header.
 
+```tsx
 <Panel>
-  <Panel.Header><h2>Title</h2></Panel.Header>
-  <Panel.Content style={{ padding: 16 }}>Content</Panel.Content>
+  <Panel.Header>Connection</Panel.Header>
+  <Panel.Content style={{ padding: 12 }}>Connected to the local System.</Panel.Content>
 </Panel>
 ```
 
-Native properties and the root ref target the outer Surface. `Panel.Header`
-owns the optional leading region, while `Panel.Content` is the independently
-configurable inner Surface.
-
 `Window` provides one Surface with a ready header-and-content layout.
 `Window.Header.Identity` presents the icon and truncating title,
-`Window.Header.Center` is optional flexible space, and
-`Window.Header.Actions` aligns compact controls at the end. `Window.Content`
-fills the remaining area without deciding its overflow behavior. The header
-uses the enclosing Surface rather than creating another material layer, and it
-can also be composed independently inside any Surface. Its controls are React
-UI Buttons; callers connect them to their own window operations. Pointer and
-double-click handlers on the header can implement a drag area, while the center
-and actions keep their interactions separate.
+`Window.Header.Center` is optional flexible space, and `Window.Header.Actions`
+aligns compact controls at the end. `Window.Content` fills the remaining area
+without deciding its overflow. Its controls are Buttons; callers connect them to
+their own window operations, and `beginMoveGesture` hands an intentional header
+drag to a window host.
 
 ```tsx
 <Window>
-  <Window.Header active={active} onPointerDown={beginDrag}>
+  <Window.Header active={active}>
     <Window.Header.Identity icon={icon} title={title} />
     <Window.Header.Actions>
       <Window.Header.Minimize onPress={minimize} />
@@ -209,8 +208,8 @@ semantic content remains explicit.
   <DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>
   <DropdownMenu.Content>
     <Menu aria-label="Document actions">
-      <Menu.Item onAction={open}>Open</Menu.Item>
-      <Menu.Item color="danger:base" onAction={remove}>Delete</Menu.Item>
+      <Menu.Item id="open" onAction={open}>Open</Menu.Item>
+      <Menu.Item id="delete" onAction={remove}>Delete</Menu.Item>
     </Menu>
   </DropdownMenu.Content>
 </DropdownMenu>
@@ -218,9 +217,9 @@ semantic content remains explicit.
 
 `Popover` presents anchored non-modal content. `DropdownMenu` and
 `ContextMenu` open the same `Menu` contract through different interactions.
-Menu is selection-free by default. Selectable menus use string identities
-through `value`, `defaultValue`, `onChange`, and `disabledValues`, matching the
-other selectable collections; root-level command dispatch uses `onItemAction`.
+Menu is selection-free by default. Selectable menus use the same string
+selection contract as the other collections, and root-level command dispatch
+uses `onAction(id)`.
 `Dialog` blocks interaction behind it and may be dismissable, while
 `AlertDialog` requires an explicit decision by default. `Tooltip` supplies a
 short description on focus or hover. Portal cleanup, focus restoration,
@@ -229,31 +228,11 @@ component-owned.
 
 ## Inputs
 
-Every input uses Appearance colors and the same five `size` levels as Button.
-`color` selects the fill independently from material. Input, Textarea, Select,
-and Button use `default:base` when it is omitted. Invalid
-fields use danger instead. Text fields share Surface's glass edge. Interaction shades
-derive from the base color's lightness, and text or selection marks use the Appearance
-background or foreground that is perceptually opposite the base fill.
-That text or mark color stays unchanged across interaction shades.
-These are component-owned derivations, not additional Appearance settings.
-Theme names never imply particular colors. No component requires a Client or
-Server SDK.
-
-Fields distinguish hover, pointer focus, keyboard focus, and invalid state.
-Shared CSS transitions use `appearance.transaction` for colors and corner
-radius. The material fill and opacity values transition on the painted layers, not on the
-Surface host. Select menus scale from `1.05` to `1` while fading in, and reverse
-that motion when exiting, using React Aria's animation lifecycle. Preferences with animations disabled make
-these changes immediate without changing the Appearance value.
-Blur, distortion, geometry, and Surface host opacity are not transitioned; gradients
-and structurally removed effects change directly rather than adding extra
-layers or keeping disabled effects alive.
-
-Motion animates toggle presses, selection marks, and switch travel. CSS transitions
-animate paint and the Select chevron. Preferences with animations disabled remove spatial
-feedback and make state transitions immediate. Slider values and native input
-behavior are never delayed by visual animation.
+Text fields, Select, ComboBox, and the date fields recess the `background` by
+default. Checkbox, Switch, and RadioGroup indicators are recessed beds that rise
+in their color when selected. Slider and ProgressBar fill a recessed rail with
+their color. Motion follows `appearance.transaction`; Preferences with
+animations disabled make every change immediate without changing Appearance.
 
 | Component | Value contract | Purpose |
 | --- | --- | --- |
@@ -268,11 +247,15 @@ behavior are never delayed by visual animation.
 | `Checkbox` | `checked`, `defaultChecked`, `onChange(boolean)` | Independent selection; `indeterminate` represents a mixed state |
 | `Switch` | `checked`, `defaultChecked`, `onChange(boolean)` | An on/off setting |
 | `RadioGroup` / `RadioGroup.Item` | Group `value`, `defaultValue`, `onChange(string)`; Item `value` | One exclusive choice; vertical by default, optionally horizontal |
-| `Select` | `value: string \| null`, `defaultValue`, `onChange(string \| null)` | One choice from `options: { value, label, disabled? }[]` |
-| `ComboBox` | Selected `value: string \| null` and query `inputValue: string` | One searchable choice from `options: { value, label, disabled? }[]` |
+| `Select` | `value: string \| null`, `defaultValue`, `onChange(string \| null)` | One choice from its `Select.Item`s |
+| `ComboBox` | Selected `value: string \| null` and query `inputValue: string` | One searchable choice from its `ComboBox.Item`s |
 | `ListBox` | Single string or multiple string-array `value`, `defaultValue`, and `onChange` | A visible selectable collection with composable items and sections |
 | `Tree` | Optional selection plus controlled or uncontrolled string-array expansion | Nested hierarchical navigation with arbitrary branch depth |
 | `Slider` | `value`, `defaultValue`, `onChange(number)` | One numeric value; `minValue`, `maxValue`, `step`, and `onChangeEnd`; horizontal by default |
+| `NumberField` | `value: number \| null`, `defaultValue`, `onChange(number \| null)` | A number typed or stepped within `minValue` and `maxValue`, formatted by `formatOptions` |
+| `SegmentedControl` / `SegmentedControl.Item` | `value`, `defaultValue`, `onChange(string)`; Item `id` | One of a few visible options, on the Tabs track |
+| `ColorField`, `ColorSlider`, `ColorArea`, `ColorSwatchPicker` | Hex `value: string`, `defaultValue`, `onChange(string)` | A color typed, moved along one or two channels, or chosen from swatches; inside a `ColorPicker` they edit its color |
+| `DropZone` / `FileTrigger` | `onDrop(File[])` / `onSelect(File[])` | Files dragged onto an area, or chosen from the system file chooser |
 
 Use `label` for visible labels, or `aria-label` / `aria-labelledby` for an
 accessible name without visible text. `description` provides associated help.
@@ -313,14 +296,14 @@ import { parseDate, parseTime } from "@internationalized/date"
   <RadioGroup.Item label="Grid" value="grid" />
   <RadioGroup.Item label="List" value="list" />
 </RadioGroup>
-<Select label="Sort" name="sort" options={[
-  { value: "name", label: "Name" },
-  { value: "date", label: "Date" }
-]} />
-<ComboBox label="Region" name="region" options={[
-  { value: "eu", label: "Europe" },
-  { value: "us", label: "United States" }
-]} />
+<Select label="Sort" name="sort">
+  <Select.Item id="name">Name</Select.Item>
+  <Select.Item id="date">Date</Select.Item>
+</Select>
+<ComboBox label="Region" name="region">
+  <ComboBox.Item id="eu">Europe</ComboBox.Item>
+  <ComboBox.Item id="us">United States</ComboBox.Item>
+</ComboBox>
 <ListBox aria-label="Programs" defaultValue="editor">
   <ListBox.Section id="productivity">
     <ListBox.Header>Productivity</ListBox.Header>
@@ -360,16 +343,13 @@ accessible disclosure control; `Tree.Collection` recursively renders
 data-backed child collections.
 
 Each control delegates focus, keyboard, form, and selection behavior to its
-accessible behavioral primitive rather than recreating those systems. Select's
-popup and ComboBox's searchable popup use Surface defaults. Toggle indicators use Motion internally and respect
-animation preferences. The preview Program demonstrates each input's
-sizes, colors, state, and interaction without overriding its visual defaults.
+accessible behavioral primitive rather than recreating those systems.
 
 ## Tabs
 
 `Tabs` organizes related peer views under one selected string identity. Its
-horizontal list divides the available width equally, while its active indicator
-moves continuously between selections.
+list is a recessed track divided into equal columns, and the selected Tab rises
+out of it, moving continuously between selections.
 
 ```tsx
 <Tabs defaultValue="overview">
@@ -402,8 +382,8 @@ the requested column and direction without taking ownership of the data order.
   onSortChange={setSort}
 >
   <Table.Header>
-    <Table.Column id="name" isRowHeader allowsSorting>Name</Table.Column>
-    <Table.Column id="state" allowsSorting>State</Table.Column>
+    <Table.Column id="name" rowHeader sortable>Name</Table.Column>
+    <Table.Column id="state" sortable>State</Table.Column>
   </Table.Header>
   <Table.Body>
     <Table.Row id="editor">
@@ -437,7 +417,7 @@ indeterminate progress omits the current value and presents ongoing activity.
 
 The default range is `0` through `100`. `formatOptions` controls the generated
 value text, while `valueLabel` supplies an explicit visible and accessible
-value. Color, size, typography, and motion follow the active React UI contracts.
+value. It fills a recessed rail with `primary` unless `color` says otherwise.
 
 ## Development
 

package/dist/accordion.d.ts

@@ -1,14 +1,14 @@
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type { DisclosureGroupProps as AriaDisclosureGroupProps } from "react-aria-components";
-import type { ControlColor } from "./control.js";
+import type { Color } from "./foundation/color.js";
 import { DisclosureContent, DisclosureTrigger, type DisclosureRootProps } from "./disclosure.js";
-import { type LayoutGap } from "./layout.js";
-import type { RadiusProps } from "./radius.js";
-import type { ScaleLevel } from "./scale.js";
+import type { LayoutGap } from "./foundation/layout.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
 type AccordionRootBaseProps = Omit<AriaDisclosureGroupProps, "allowsMultipleExpanded" | "className" | "defaultExpandedKeys" | "expandedKeys" | "isDisabled" | "onExpandedChange" | "style"> & RadiusProps & Readonly<{
     children?: ReactNode;
     className?: string;
-    color?: ControlColor;
+    color?: Color;
     disabled?: boolean;
     gap?: LayoutGap;
     size?: ScaleLevel;
@@ -29,7 +29,8 @@ export type AccordionMultipleExpansionProps = Readonly<{
 export type AccordionRootProps = AccordionRootBaseProps & (AccordionSingleExpansionProps | AccordionMultipleExpansionProps);
 /** A coordinated group of identified Disclosure items. */
 export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface AccordionItemProps extends Omit<DisclosureRootProps, "defaultExpanded" | "expanded" | "onChange"> {
+export interface AccordionItemProps extends Omit<DisclosureRootProps, "defaultExpanded" | "expanded" | "id" | "onExpandedChange"> {
+    /** Identity of this Item within its Accordion. */
     readonly id: string;
 }
 /** One identified Disclosure governed by its nearest Accordion. */

package/dist/accordion.js

@@ -2,18 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { DisclosureGroup as AriaDisclosureGroup } from "react-aria-components";
 import { DisclosureContent, DisclosureRoot, DisclosureTrigger } from "./disclosure.js";
-import { resolveGap } from "./layout.js";
-import { stringKeys } from "./selection.js";
-import { useAppearance } from "./ui-provider.js";
+import { resolveSpacing } from "./foundation/spacing.js";
+import { useVisual } from "./foundation/visual.js";
+import { stringKeys } from "./control/selection.js";
 const AccordionThemeContext = createContext(null);
 /** A coordinated group of identified Disclosure items. */
 export const AccordionRoot = forwardRef(function AccordionRoot(properties, ref) {
     const { children, className, color, defaultValue, disabled = false, gap = "xsmall", multiple = false, onChange, radius = "medium", size = "medium", style, value, ...native } = properties;
-    const appearance = useAppearance();
+    const { spacing } = useVisual();
     const context = useMemo(() => ({ color, radius, size }), [color, radius, size]);
     return _jsx(AccordionThemeContext.Provider, { value: context, children: _jsx(AriaDisclosureGroup, { ...native, ...expansionProperties(properties), ref: ref, allowsMultipleExpanded: multiple, className: className, isDisabled: disabled, style: {
                 display: "grid",
-                gap: resolveGap(gap, appearance),
+                gap: resolveSpacing(gap, spacing),
                 width: "100%",
                 minWidth: 0,
                 ...style

package/dist/alert-dialog.d.ts

@@ -9,7 +9,7 @@ export type AlertDialogContentProps = Omit<DialogContentProps, "role">;
 export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
 /** A dialog requiring an explicit decision rather than ambient dismissal. */
 export declare const AlertDialog: typeof AlertDialogRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./button.js").ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
     Header: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -17,6 +17,6 @@ export declare const AlertDialog: typeof AlertDialogRoot & {
     Description: import("react").ForwardRefExoticComponent<import("react-aria-components").TextProps & import("react").RefAttributes<HTMLElement>>;
     Body: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-    Close: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("./button.js").ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export type AlertDialogProps = ComponentProps<typeof AlertDialogRoot>;

package/dist/alert-dialog.js

@@ -4,8 +4,10 @@ import { DialogBackdrop, DialogBody, DialogClose, DialogContent, DialogDescripti
 export function AlertDialogRoot(properties) {
     return _jsx(DialogRoot, { ...properties });
 }
+// An alert asks for an explicit decision, so neither pressing outside nor
+// Escape dismisses it unless the caller allows that.
 export const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop(properties, ref) {
-    return _jsx(DialogBackdrop, { ...properties, ref: ref, isDismissable: properties.isDismissable ?? false, isKeyboardDismissDisabled: properties.isKeyboardDismissDisabled ?? true });
+    return _jsx(DialogBackdrop, { ...properties, ref: ref, dismissable: properties.dismissable ?? false, keyboardDismissable: properties.keyboardDismissable ?? false });
 });
 export const AlertDialogContent = forwardRef(function AlertDialogContent(properties, ref) {
     return _jsx(DialogContent, { ...properties, ref: ref, role: "alertdialog" });

package/dist/alert.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type Color } from "./foundation/color.js";
+import { type SurfaceProps } from "./surface/surface.js";
+export interface AlertProps extends Omit<SurfaceProps, "color" | "title" | "children"> {
+    /** The meaning, as a color role: `info` by default; `warning` and `danger` also interrupt. */
+    readonly color?: Color;
+    readonly title?: ReactNode;
+    /** Replaces the icon of the color's meaning; `false` leaves the Alert without one. */
+    readonly icon?: ReactNode | false;
+    readonly children?: ReactNode;
+}
+/**
+ * A message that stays in place, such as a failed save. It is painted in the
+ * subtle level of its color, like a selection, and leads with the icon of its
+ * meaning. Warnings and dangers are announced as they appear.
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/alert.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { controlFontSizes, controlFontWeight, useControlMetrics } from "./control/control.js";
+import { iconProps } from "./control/icon.js";
+import { colorLevel, resolveColor } from "./foundation/color.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { Surface } from "./surface/surface.js";
+const meaningIcons = { danger: CircleAlert, warning: TriangleAlert, success: CircleCheck };
+/**
+ * A message that stays in place, such as a failed save. It is painted in the
+ * subtle level of its color, like a selection, and leads with the icon of its
+ * meaning. Warnings and dangers are announced as they appear.
+ */
+export const Alert = forwardRef(function Alert({ color = "info", title, icon, children, radius, style, ...properties }, ref) {
+    const metrics = useControlMetrics();
+    const { colors } = metrics.visual;
+    const urgent = color === "danger" || color === "warning";
+    const MeaningIcon = meaningIcons[color] ?? Info;
+    return _jsxs(Surface, { ...properties, ref: ref, role: urgent ? "alert" : "status", color: colorLevel(resolveColor(color, colors), "subtle", colors), depth: "flat", radius: radius ?? resolveRadius("medium", metrics.visual.radius), style: {
+            display: "grid",
+            gridTemplateColumns: icon === false ? "minmax(0, 1fr)" : "auto minmax(0, 1fr)",
+            alignItems: "start",
+            gap: metrics.gap * 2,
+            padding: metrics.spacing,
+            fontSize: controlFontSizes.medium,
+            lineHeight: 1.45,
+            ...style
+        }, children: [icon !== false && _jsx("span", { style: { display: "grid", height: "1.45em", alignItems: "center" }, children: icon ?? _jsx(MeaningIcon, { ...iconProps(16) }) }), _jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [title != null && _jsx("strong", { style: { fontWeight: controlFontWeight }, children: title }), children != null && _jsx("div", { children: children })] })] });
+});

package/dist/app-layout.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    readonly children: ReactNode;
+    /** The sidebar's width; eighteen times the Appearance spacing by default. */
+    readonly sidebarWidth?: CSSProperties["width"];
+}
+export type AppLayoutRegionProps = HTMLAttributes<HTMLElement>;
+export declare const AppLayout: import("react").ForwardRefExoticComponent<AppLayoutProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Sidebar: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Footer: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+};