Speed Dial
`pura-speed-dial` is a FAB anchored to a corner of the screen that, on click (or optionally on hover), expands a stack of secondary `pura-speed-dial-action` actions, each with an icon and label. Use it to concentrate primary-action shortcuts on screens like dashboards or mobile apps, where an always-visible button offers quick create, share, or edit. Built on the native Popover API and CSS anchor positioning, it gets ESC-to-close and light-dismiss for free, and exposes an agent-native layer: the host mirrors state in `data-pura-speed-dial-*` attributes, registers in `window.__puraSpeedDials`, and offers a `.state` getter with JSON of the actions, letting agents enumerate and trigger the dial without scraping the shadow DOM.
Preview
<pura-speed-dial label="Quick actions" position="bottom-end">
<pura-speed-dial-action id="acao-novo">
New document
<svg slot="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</pura-speed-dial-action>
<pura-speed-dial-action id="acao-compartilhar">
Share
<svg slot="icon" viewBox="0 0 24 24"><path d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</pura-speed-dial-action>
<pura-speed-dial-action id="acao-editar">
Edit
<svg slot="icon" viewBox="0 0 24 24"><path d="M4 20h4L18 10l-4-4L4 16v4zM14 6l4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</pura-speed-dial-action>
</pura-speed-dial>
<script type="module">
import "/pura/lib/speed-dial.js";
document.querySelector("pura-speed-dial").addEventListener("action", (e) => {
console.log("Action triggered:", e.detail.id, e.detail.label);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
position | string | bottom-end | Viewport corner and fan-out direction: bottom-end, bottom-start, top-end, or top-start. |
open | boolean | false | Reflects and controls the open state of the action stack. |
hover | boolean | false | When present, also expands on hover (clicking still toggles). |
label | string | Ações rápidas | Accessible label (aria-label) for the FAB button. |
disabled | boolean | false | On pura-speed-dial-action: disables the action (no click, no focus). |
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/speed-dial.js"></script>import "./pura/lib/speed-dial.js";