Usage
Panel is one tile of a workspace: a bordered surface with a header and, when needed, a body. It imports no layout library, owns no position or size, and does not track windows. Whether a panel is popped out is the header's variant, which the host sets.Panel — Root section; give it aria-label when it should be a region landmark.PanelHeader — Title or tabs, actions, pop-out, collapse, dock-back, fullscreen and the actions menu (last at the inline end unless actionable={false}).PanelBody — Named inline-size container (panel) for content queries.PanelError — role="alert" failure state that keeps the header reachable.children may be only a PanelHeader. The root hugs the header in an auto block-size parent and still fills a fixed-height tile. Popped-out window-frame padding applies only when a PanelBody is present. In Figma, the Show body boolean toggles the Body frame layer (not a slot property); in code, mount PanelBody when the tile shows content below the header.entrance on Panel plays one animation when the host sets it: PanelEntrance.Panel fades and scales the whole panel in (a layout that lands, a panel that docks back), and PanelEntrance.Body fades only the body (a panel whose content left for its own window). entranceOrder (0 to 3) staggers panels that enter together. The host clears the prop on the animationend that bubbles up from the panel. Under reduced motion the scale and the stagger stop and the fade stays.PanelHeader takes dragSource and dropTarget to make the docked row a native HTML5 drag source and drop target, for a layout whose drops read the browser's DataTransfer. PanelBody takes overlay, a layer over the whole body that exists only while it is set (a drop zone shown during a drag), and positioned to anchor absolutely placed content to the body.Card or page chrome.Drawer.