page-tools
Configurable toolbar for page-level utilities — print, share, stats — with responsive FAB collapse.
Overview
The <page-tools> component aggregates page-level utilities into a cohesive toolbar. It handles positioning and responsive collapse so individual tools do not need to solve these problems independently.
Any direct child element is treated as a tool — no registry needed. On small viewports, the toolbar collapses into a floating action button (FAB) that opens a native popover panel.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-position |
string | sticky |
Positioning strategy: sticky, fixed, inline |
data-orientation |
string | auto |
Tool strip direction: auto, vertical, horizontal. Auto resolves to vertical for sticky/fixed, horizontal for inline. |
data-gap |
string | s |
Gap between tools: 2xs, xs, s, m, l |
data-fab-icon |
string | ellipsis-vertical |
Icon name for the mobile FAB button |
data-fab-label |
string | Page tools |
Accessible label for the FAB button |
data-breakpoint |
string | 48rem |
Viewport width below which the toolbar collapses to FAB |
Usage
Sticky Sidebar
The most common pattern — placed in a sidebar alongside a table of contents:
<aside> <page-toc levels="h2,h3" scope="article"></page-toc> <page-tools data-position="sticky"> <print-page></print-page> <share-wc variant="icon" size="s"></share-wc> </page-tools></aside>Inline Horizontal
Flows with the document, orientation defaults to horizontal:
<page-tools data-position="inline"> <page-stats data-for="article-content" data-show="reading-time"></page-stats> <print-page></print-page> <share-wc variant="icon" size="s"></share-wc></page-tools>Fixed Viewport Edge
Pinned to the viewport edge, centered vertically:
<page-tools data-position="fixed" data-fab-icon="menu"> <print-page></print-page> <share-wc variant="icon" size="s"></share-wc> <text-reader for="article-content"></text-reader></page-tools>Mobile FAB Collapse
Below the breakpoint (default 48rem), the toolbar collapses into a floating action button. Tapping the FAB opens a native popover panel containing the tools. Tools are DOM-moved (not cloned) so event listeners are preserved.
Custom Tools
Any element works as a tool. Slot in standard VB components, plain links, or custom elements:
<page-tools> <print-page></print-page> <a href="/pdf/this-page.pdf" aria-label="Download PDF"> <icon-wc name="file-text" size="sm"></icon-wc> </a> <my-bookmark-button></my-bookmark-button></page-tools>Progressive Enhancement
Without JavaScript, <page-tools> is styled as a flex container by CSS alone. Children remain visible and functional. The FAB collapse and toolbar semantics are added only when the component upgrades.
Accessibility
The component sets role="toolbar" and aria-label="Page tools" on upgrade. The FAB button has an accessible label, and focus returns to the FAB when the popover is dismissed. The popover supports light dismiss via Escape key.