Layout component reference

• Stack and Inline default gap to md. Stack lays out vertically; Inline lays out horizontally.

• Flex defaults direction=row, align=stretch, justify=start, gap=none, and wrap=false.

• Grid defaults to 12 columns, spacing=md, and align=stretch. minItemWidth switches it to auto-fit responsive columns.

• Page defaults size=xl and padding=lg. Section defaults to a section root, titleSize=h2, and spacing=lg.

• Toolbar defaults as=div, align=center, justify=between, gap=md, and wrap=true.

• AppBar defaults as=header and position=sticky. Sidebar defaults padding=md.

• Spacer defaults size=md and axis=block; it is aria-hidden because it is layout-only.

• Shell accepts header, sidebar, rail, and children as explicit application regions. The application owns landmark labels and responsive visibility.

• SplitPane accepts aside and children directly and also exposes Root, Aside, and Main members. It defaults side=left, ratio=1fr 2fr, and gap=md.

• Card defaults as=section, tone=neutral, and surface=default. Card.Root exposes Header, Media, Content, and Actions members.

• Table.Root owns native table structure inside a scroll wrapper. Use Table.Caption rather than a caption prop, and keep Head, Body, Row, HeaderCell, and Cell in valid table order.

• Table.Data receives columns and rows, defaults compact=false, and stringifies a cell when the column has no render function.

Resizable changes the size of its root in pixels. orientation describes the separator: vertical adjusts width; horizontal adjusts height. Set value for controlled size or defaultValue for an initial size, and set min and max to keep the region usable. Put Panel and Handle directly inside Resizable so the handle receives its configuration.