Admin Topbar

admin-topbar

CSS-only

Module-tier shell top chrome bar. Provides icon + heading + description + action-clusters layout via slot vocabulary.

Role

This is a CSS-only structural stub — no JavaScript, no behavior. The shell host (<admin-shell>) styles it via tag-presence. Authors compose it with sibling bespoke children to express semantic shell-tier structure.

Composition

Typical placement inside <admin-shell>:

<admin-topbar> <icon-ui slot="icon" name="house"></icon-ui> <span slot="heading">Dashboard</span> <span slot="description">Workspace overview</span> <button-ui slot="action" variant="ghost">Settings</button-ui> </admin-topbar>

Slot vocabulary

See the admin-shell demo for the full composition pattern. CSS-only stubs declare slot intent; the parent shell handles layout.