Appearance

Offer a custom color (a ColorPicker popover) and, with `surface`, a neutral/tinted surface choice for it.

The palettes offered as color swatches, after the theme's own colors. Unset: every color family the theme ships. `[]` offers none.

The sections shown, in order. A locked field's section is never shown. `radius` is opt-in.

The selection before anything is stored, and what Reset returns to.

Fields forced on every value; their sections are hidden.

Called after every change, including ones from another instance or tab.

Controlled selection. Pair with `onValueChange`.

Control size of every Choice and Button in the panel.

Milliseconds a pick waits before it reaches the page, so the selection thumb slides before the page re-colors. `0` under `prefers-reduced-motion`.

Where the selection is kept between visits. Astro: a `{ load, save }` adapter can't be serialized, so it falls back to `"local"`.

localStorage key for the palette and density.

The element the palette and density apply to.

localStorage key for the mode, shared with ThemeModeSelect.

Localized strings. Unset keys keep their English defaults.

The theme the swatches are generated against.

An already-running controller (AppearancePicker passes its own). When set, the panel neither creates nor starts one, and the controller options above are ignored.

Seeds the ids of every control in the panel.

Per-slot escape hatch. DOM slots take `style` and `props`; child components (`*Choice`, `*Button`, `customPopover`, `colorPicker`) take `props`.

Astro / vanilla: serialize the props into `data-appearance-panel-config` so the client runtime hydrates this instance and `getPindoba(el, "appearance-panel")` can `update()` it. Frameworks with their own reactivity don't need it.

Offer a custom color (a ColorPicker popover) and, with `surface`, a neutral/tinted surface choice for it.

The palettes offered as color swatches, after the theme's own colors. Unset: every color family the theme ships. `[]` offers none.

The sections shown, in order. A locked field's section is never shown. `radius` is opt-in.

The selection before anything is stored, and what Reset returns to.

Fields forced on every value; their sections are hidden.

Bindable open state of the popover.

Control size of every Choice and Button in the panel.

Milliseconds a pick waits before it reaches the page, so the selection thumb slides before the page re-colors. `0` under `prefers-reduced-motion`.

Where the selection is kept between visits. Astro: a `{ load, save }` adapter can't be serialized, so it falls back to `"local"`.

Placement of the popover relative to the trigger.

localStorage key for the palette and density.

localStorage key for the mode, shared with ThemeModeSelect.

Localized strings. Unset keys keep their English defaults.

Localized trigger and popover names. Unset keys keep their English defaults.

The theme the swatches are generated against.

Seeds the ids of every control in the panel.

Per-slot escape hatch. DOM slots take `style` and `props`; child components (`*Choice`, `*Button`, `customPopover`, `colorPicker`) take `props`.

Per-slot escape hatch for the picker's own parts; the panel inside takes `passThrough`.

Astro / vanilla: serialize the props into `data-appearance-picker-config` so the client runtime hydrates this instance and `getPindoba(el, "appearance-picker")` can `update()` it. Frameworks with their own reactivity don't need it.