Editor Canvas Toolbar
editor-canvas-toolbar
CSS-only
Module-tier canvas toolbar — chrome bar inside <editor-canvas> that holds view-mode tabs, breadcrumbs, or canvas-scoped actions.
Role
Replaces the ad-hoc <div data-view-strip> pattern. Sits as the first child of <editor-canvas>; the canvas's flex-column layout positions it above the content body automatically. Sticky to the canvas scroll surface so tabs stay visible during scroll.
Distinct from <editor-toolbar> — that one is app-scope (top of <editor-shell>, holds document-wide actions); this one is canvas-scope (top of <editor-canvas>, holds view-mode affordances).
Composition
Typical view-tabs usage inside <editor-canvas>:
<editor-canvas>
<editor-canvas-toolbar>
<tabs-ui value="preview" variant="underline">
<tab-ui value="preview" text="Preview" icon="eye"></tab-ui>
<tab-ui value="schema" text="Schema" icon="brackets-curly"></tab-ui>
<tab-ui value="dom" text="DOM" icon="code"></tab-ui>
</tabs-ui>
</editor-canvas-toolbar>
<div data-view-body>
<!-- one of [data-view] visible at a time -->
</div>
</editor-canvas>
Slot vocabulary
Mirrors the <editor-toolbar> / <editor-statusbar> slot conventions:
<editor-canvas-toolbar>
<span slot="action-leading">
<button-ui icon="arrow-left" variant="ghost" size="sm"></button-ui>
</span>
<span slot="title">Untitled.fig</span>
<span slot="action">
<button-ui icon="gear" variant="ghost" size="sm"></button-ui>
</span>
</editor-canvas-toolbar>
Tokens
/* Defaults — override on editor-shell or editor-canvas-toolbar */
--editor-canvas-toolbar-bg: var(--editor-panel-bg);
--editor-canvas-toolbar-px: var(--a-space-3);
--editor-canvas-toolbar-gap: var(--a-space-2);