Navigation
Action Dock
Magnifying action dock with spring feedback
detent-action-dock
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-cinematic
- Group
- Navigation
4.5 KB gzip for the class module · inlines the shared spring
Variants
Move the pointer across the dock: each action's width springs along the pinned curve (40 px at 120 px away, 56 px
under the pointer) with the upstream
stiffness 180 / damping 14 / mass 0.1 physics. The tooltip appears on hover and on keyboard focus;
Tab reaches every action and Enter/Space activates it.
The active action carries aria-current="true" and the indicator dot; the glyph, tooltip and dot are
aria-hidden, so each action is announced once, by its label. A dock with no
active-id marks nothing.
With prefers-reduced-motion: reduce the magnification and the tooltip fade are removed: every action
stays at its 40 px base and the dock schedules no animation frame. The twenty-six-pixel gap keeps every hit area at
least 40 px wide.
Recorded states
activerecorded state; no setter
Usage
Import
import '/components/action-dock/define.js';
// or register it yourself
import { DetentActionDock } from '/components/action-dock/action-dock.js';Attributes
active-id
Properties
itemsactiveId
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/action-dock.ts. The snippet below is generated from the catalogued attributes.
<detent-action-dock
active-id
></detent-action-dock>Property-only values
const element = document.querySelector('detent-action-dock');
if (element !== null) {
// items: DockItem[]
element.items = [];
}Source
The pinned upstream source for this row:
src/components/ui/FloatingActionDock.tsxsha256 7c3050937887…
Native files
The native module and its artifacts:
src/components/action-dock/action-dock.tssrc/components/action-dock/styles.csssrc/components/action-dock/define.tsdocs/components/action-dock.mdsite/examples/action-dock.tstests/browser/action-dock.spec.tsevidence/components/action-dock.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
active-id | activeId | string | undefined | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
items | DockItem[] | [] | Property-only: assign from script; not accepted as an attribute. |
activeId | string | undefined | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
No slots are recorded for this component.
CSS customisation
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- isActive, item and mouseX are internal DockIcon params, not host API; the derived is-active and the pointer MotionValue cannot be exposed meaningfully on a host, so the row lists only active-id and items/activeId.
- item.icon is text: the row records no slots.
- badge is declared upstream but never read.
- Glyph and active-border colours were corrected for the 3:1 non-text ratio.
- aria-current is added and the tooltip, glyph and indicator are aria-hidden.
- There is no roving tabindex: one real button per action.
- Framer useSpring becomes the shared spring helper at the same 180/14/0.1 physics, and there is no whileTap scale because the row records no pressed state.
- Reduced motion removes the magnification.
What it does
A floating dock of quick actions that magnify under the pointer, with tooltips and an active indicator.
Upstream behaviour
- Continuous distance interpolation curve
- Tooltips with instant spring opacity
- Active status indicator dot
Differences from upstream
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- isActive, item and mouseX are internal DockIcon params, not host API; the derived is-active and the pointer MotionValue cannot be exposed meaningfully on a host, so the row lists only active-id and items/activeId.
- item.icon is text: the row records no slots.
- badge is declared upstream but never read.
- Glyph and active-border colours were corrected for the 3:1 non-text ratio.
- aria-current is added and the tooltip, glyph and indicator are aria-hidden.
- There is no roving tabindex: one real button per action.
- Framer useSpring becomes the shared spring helper at the same 180/14/0.1 physics, and there is no whileTap scale because the row records no pressed state.
- Reduced motion removes the magnification.