API and Development
Panel and its parts (PanelHeader, PanelBody, PanelError, header controls) ship from @prepared911/ui/panel. The header's variant selects docked, desktop popped-out, or browser popped-out chrome.| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | A {@link PanelHeader } and, when needed, a {@link PanelBody }. Header-only tiles omit the body. |
aria-label | LocalizedMessage | — | Accessible name of the panel. With a name the panel is a region landmark; without one it is an unnamed section,
which is not. Give it the title the header shows when the panel is one of the page's few main regions. |
aria-labelledby | string | — | Id of the element that names the panel, instead of aria-label. |
className | string | — | @deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern. |
entrance | PanelEntrance | — | Plays a one-off entrance when the prop is set: {@link PanelEntrance.Panel} fades and scales the whole panel in,
{@link PanelEntrance.Body} fades the body in. The move is --duration-moderate on --easing-enter, half of
--scale-enter-subtle, and stops under reduced motion while the fade stays. The host sets it when a layout lands
or a panel docks or pops out, and clears it on the bubbling animationend; the panel never clears it. |
entranceOrder | PanelEntranceOrder | 0 | Position of this panel among the panels entering together: 1 to 3 wait that many --duration-glide-stagger
steps before they start, so a layout lands one panel after another. The host caps the position at 3. Ignored
without entrance, and zero under reduced motion. |
headerDivider | boolean | false | Draws a line under the header row, in the panel's edge color, to separate the title and its controls from the content. A docked header only: a popped-out window already sets its content apart. |
id | string | — | Element id. |
ref | Ref<HTMLElement> | — | Ref to the root section. |
Panel entrance (PanelEntrance.Panel or PanelEntrance.Body) and entranceOrder play a one-off entrance; the host clears the prop on the bubbling animationend.PanelHeader dragSource and dropTarget attach native HTML5 drag listeners to the docked row and set draggable and tabindex="-1" on it.PanelBody overlay renders a layer over the whole body while it is set, fading in when it appears; positioned makes the body the positioning context.PanelPlaceholder entering plays the entrance of a popped-out panel's placeholder.PanelBody when a tile should show only the header strip. Popped-out frame padding and the gap before the body apply only when a body is mounted.