Component Quick Reference

Every component in the catalog with the arguments its entry declares, grouped by the chapter that defines it. The entry gives the presentation, slots, events and Theme tokens.

Viewport

Component	Signature
`etaf-viewport-region`	`()`

Native Video

Component	Signature
`etaf-video`	`(&key src (columns 100) (rows 30) (mode 'image) (ramp etaf-video-density-ramp) (audio etaf-video-audio) (volume etaf-video-audio-volume) (speed 1) (autoplay t) handle device-pixel-ratio display-fps position left top z-index)`

Icons

Component	Signature
`etaf-ui-icon`	`(&key name set size color face lines min-width help-echo on-press tab-index aria-label id class ref)`
`etaf-ui-toggle-icon`	`(&key value off on set size color on-color face lines min-width help-echo on-press tab-index aria-label id class ref)`

Containers

Component	Signature
`etaf-panel`	`(&key title variant)`
`etaf-card`	`(&key title description variant)`
`etaf-divider`	`(&key orientation label)`

Feedback and Status

Component	Signature
`etaf-label`	`(&key text variant)`
`etaf-badge`	`(&key text variant)`
`etaf-tag`	`(&key text variant closable on-close)`
`etaf-kbd`	`(&key keys)`
`etaf-progress`	`(&key value max label variant)`
`etaf-alert`	`(&key title message variant dismissible on-dismiss)`
`etaf-empty`	`(&key title description action-label on-action)`
`etaf-statistic`	`(&key label value trend)`
`etaf-skeleton`	`(&key width height)`

Buttons and Choice Controls

Component	Signature
`etaf-button`	`(&key label on-press disabled id ref class color bgcolor border padding font-size font-weight tab-index aria-label aria-selected help-echo hover-content hover-group pointer use variant)`
`etaf-checkbox`	`(&key checked label on-change disabled bind)`
`etaf-switch`	`(&key checked label on-change disabled bind)`
`etaf-radio`	`(&key value options label on-change disabled bind)`
`etaf-segmented`	`(&key value options on-change disabled bind)`
`etaf-slider`	`(&key value min max step label on-change disabled bind)`
`etaf-range`	`(&key value min max step key-step on-change on-commit disabled color track-color bar-height label ref fill-ref)`

Text Input Controls

Component	Signature
`etaf-text-input`	`(&key value bind on-change label placeholder rows width variant disabled read-only submit-on-return on-submit on-cancel on-focus completion-functions keymap hide-label ref)`
`etaf-search-field`	`(&key value bind on-change placeholder width icon on-focus on-submit on-cancel on-clear keymap ref)`
`etaf-number-input`	`(&key value label on-change disabled min max bind hide-label ref)`

Pickers and Menus

Component	Signature
`etaf-select`	`(&key value options label placeholder on-change disabled bind presentation hide-label width ref)`
`etaf-menu`	`(&key label items on-select disabled)`
`etaf-dropdown-menu`	`(&key label items on-select disabled width icon placement)`
`etaf-context-menu`	`(&key label items on-select disabled width)`

Overlays

Component	Signature
`etaf-popover`	`(&key open anchor placement width title on-close)`
`etaf-dialog`	`(&key open title width height compact close-label on-close backdrop)`
`etaf-tooltip`	`(&key open anchor text placement on-close)`
`etaf-toast`	`(&key open anchor message title variant on-close)`
`etaf-drawer`	`(&key open title placement width modal on-close)`

Component	Signature
`etaf-tabs`	`(&key items active on-change variant)`
`etaf-breadcrumb`	`(&key items on-select)`
`etaf-steps`	`(&key items current on-change)`
`etaf-accordion`	`(&key items open on-toggle multiple)`
`etaf-tree`	`(&key items expanded on-toggle on-select)`
`etaf-list`	`(&key items on-select)`
`etaf-pagination`	`(&key controller previous-ref next-ref previous-label next-label class color bgcolor border padding aria-label)`

Data Display

Component	Signature
`etaf-table`	`(&key columns rows row-key row-ref on-row-press row-selected-p)`
`etaf-data-grid`	`(&key controller columns row-key on-row-press row-ref row-selected-p loading-label error-label empty-label)`
`etaf-avatar`	`(&key name initials src size variant lines background shape)`
`etaf-timeline`	`(&key items)`
`etaf-calendar`	`(&key month value on-change label)`

Composite Components

Component	Signature
`etaf-date-picker`	`(&key value label placeholder on-change disabled bind)`
`etaf-command-palette`	`(&key open title items on-select on-close)`

Panels and Windows

Component	Signature
`etaf-resizable-panel`	`(&key x y width height position z-index visible min-width max-width min-height max-height resizable resize-edges resize-refs resize-use on-resize on-move header-style drag-lock-modifier full-bleed font-size font-family ref id class role use overflow)`
`etaf-window-controls`	`(&key mode show-minimize show-maximize show-close active on-minimize on-maximize on-restore on-close group class)`
`etaf-window-chrome`	`(&key title mode show-minimize show-maximize show-close active on-minimize on-maximize on-restore on-close on-move drag-lock-modifier title-font-size font-family group ref class use)`
`etaf-window`	`(&key title mode x y width height z-index visible min-width max-width min-height max-height resizable resize-edges resize-refs resize-use move-use full-bleed on-move on-resize on-focus drag-lock-modifier title-font-size content-font-size font-family controls-group controls-active on-minimize on-maximize on-restore on-close show-minimize show-maximize show-close ref id chrome-ref class use overflow)`

Component	Signature
`etaf-taskbar`	`(&key items active on-select on-launch launcher-label class)`
`etaf-workspace-bar`	`(&key workspaces active on-select on-add on-close add-label brand status layout-label layout-action settings-label settings-action class)`
`etaf-launcher`	`(&key open title items on-select on-close close-label backdrop)`
`etaf-switcher`	`(&key open title items selected on-select on-close close-label backdrop)`
`etaf-splitter`	`(&key orientation ratio min-ratio max-ratio on-change use class overlay z-index divider-content overlay-rect visible)`
`etaf-pane-resizer`	`(&key size side min max on-change on-end line background ref)`

Media and Reactions

Component	Signature
`etaf-media-viewer`	`(&key open kind src source-size title subtitle caption duration on-close on-previous on-next autoplay)`
`etaf-reactions`	`(&key items on-toggle choices add-label)`

Grids and Character Surfaces

Component	Signature
`etaf-tile-grid`	`(&key rows columns cell-width cell-height cell-background cell-color cell-text cell-label cell-image cell-ref on-cell-press on-cell-focus)`
`etaf-text-grid`	`(&key rows columns row-text row-ref label)`
`etaf-playing-card`	`(&key rank suit face-down empty selected disabled on-press label ref columns lines)`