Dock
The Dock is a centered, rounded bar of icon buttons that smoothly magnify (scale up) as the pointer gets closer, with a cosine falloff: the item under the cursor grows the most and its neighbors grow less. Use it for quick navigation of shortcuts or apps, pinned to the bottom of the screen or inline. It includes an agent-native layer: the dock exposes role="toolbar" and registers itself in window.__puraDocks by data-pura-id, and it mirrors live state through data-pura-dock-* attributes on the host and items, so agents can enumerate docks and read the count/labels without touching the shadow DOM.
Preview
<pura-dock label="Shortcuts" magnify="1.7" reach="120" id="meu-dock">
<pura-dock-item label="Home" active>🏠</pura-dock-item>
<pura-dock-item label="Messages">💬</pura-dock-item>
<pura-dock-item label="Calendar">📅</pura-dock-item>
<pura-dock-item label="Settings">⚙️</pura-dock-item>
<pura-dock-item label="Trash" disabled>🗑️</pura-dock-item>
</pura-dock>
<script type="module">
import "/pura/lib/dock.js";
document.getElementById("meu-dock").addEventListener("dock-item-activate", (e) => {
console.log("Item activated:", e.detail.label);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
fixed | boolean | false | Pins the dock to the bottom-center of the viewport (position: fixed, bottom-center, z-index 50). |
magnify | number | 1.6 | Maximum scale of the item under the pointer. Values >= 1; invalid values fall back to 1.6. |
reach | number | 110 | Proximity radius in px over which the magnification decays. Larger = more neighbors scale up. |
label | string | Dock | Accessible name of the dock (aria-label of the inner role=toolbar track). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/dock.js"></script>import "./pura/lib/dock.js";