PrimitivesContain & overlayTray header

Tray header

Side-tray header — the shrink-0 row at the top with title, optional subtitle, and the X close button that dispatches close-side-tray.

<koala-tray-header>

Side tray

header · body · footer

Manage document

Draft contract of sale.pdf

Body scrolls; controls inside it sit on surface-container-low.

title-bind · unsaved-when · placeholder-when

Draft contract of sale

Document name

Type to rename: the heading follows on the first keystroke and takes a dashed warning underline while the edit is unsaved. Empty the field and it goes muted and italic, because "Name this document" is a stand-in and not a name.

a destructive answer takes the tray over, never a modal above it

Manage document

Draft contract of sale.pdf

The document's own record: what it is, and the form that changes it.

Delete this document?

It comes off the list for everyone and goes to the bin, where you can put it back from Restore deleted.

API

title string

class string

subtitle string?

title-icon IconName? (decorative glyph before the title, such as a file type)

title-icon-class string? (token colour class for that glyph)

title-badge-html string? (raw HTML)

title-bind Alpine expression (title follows a renameable subject)

unsaved-when Alpine expression (dashed warning underline)

placeholder-when Alpine expression (muted italic stand-in)