Navigation
Compact Action Dock
Compact action dock with proximity scaling
detent-compact-action-dock
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-cinematic
- Group
- Navigation
7.1 KB gzip for the class module · inlines the shared spring
Variants
Each action is one real button. Hovering or focusing an item scales it with the pinned
springSnappy (380 / 30 / 0.5), lifts it 2 px and shows its tooltip; Escape dismisses
the tooltip without moving focus. The badge caps at 99+ and the active item is announced with
aria-current="page".
The same four items at size="lg", variant="icon-label", anchored bottom-left:
the label is the accessible name and no tooltip is rendered at all. The third action is disabled, so it leaves the
tab order. The bottom-center position and the sm size are shown in the API tables and the
example module instead.
Recorded states
hoverrecorded state; no setteractiverecorded state; no setter
Usage
Import
import '/components/compact-action-dock/define.js';
// or register it yourself
import { DetentCompactActionDock } from '/components/compact-action-dock/compact-action-dock.js';Attributes
active-idhide-on-scrollpositionsizevariant
Properties
items
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/compact-action-dock.ts. The snippet below is generated from the catalogued attributes.
<detent-compact-action-dock
active-id
hide-on-scroll
position="bottom-right"
size="md"
variant="icon-only"
></detent-compact-action-dock>Property-only values
const element = document.querySelector('detent-compact-action-dock');
if (element !== null) {
// items: DockItem[]
element.items = [];
}Source
The pinned upstream source for this row:
src/components/ui/SmallFloatingDock.tsxsha256 57ea59760b3c…
Native files
The native module and its artifacts:
src/components/compact-action-dock/compact-action-dock.tssrc/components/compact-action-dock/styles.csssrc/components/compact-action-dock/define.tsdocs/components/compact-action-dock.mdsite/examples/compact-action-dock.tstests/browser/compact-action-dock.spec.tsevidence/components/compact-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. |
hide-on-scroll | hideOnScroll | boolean | false | Presence semantics: present means true, absent means false. |
position | position | 'bottom-right' | 'bottom-center' | 'bottom-left' | 'bottom-right' | Kebab-case attribute; camelCase property. |
size | size | 'sm' | 'md' | 'lg' | 'md' | Kebab-case attribute; camelCase property. |
variant | variant | 'icon-only' | 'icon-label' | 'icon-only' | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
items | DockItem[] | [] | 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.
- item.icon is a documented local icon name (sparkles, terminal, code, bell, search, settings) with the label first character as a text fallback, instead of a ReactNode.
- className is dropped in favour of the parts and custom properties.
- The badge fill is darkened to #be123c with white ink (6.29:1) because upstream rose-500 on white measured about 3.6:1 at 9px (PC-12.6).
- The proximity-aware hover scale is implemented as the per-item hover scale the pinned source actually performs; no pointer-distance gradient exists in the source.
- hide-on-scroll animates the presence spring out before the dock becomes hidden and un-hides before animating back in.
- The badge is aria-hidden and never joins the accessible name, and there is no roving tabindex (one plain button per item, as upstream).
What it does
A minimal floating dock for three to five primary actions: hover scaling, numeric badges, contextual tooltips, three screen positions and optional hide-on-scroll.
Upstream behaviour
- Proximity-aware hover scale with elastic spring snap-back physics
- Supports 3 to 5 actions with numeric unread badges and contextual tooltips
- Configurable screen positioning (bottom-right, bottom-center, bottom-left)
- Optional hide-on-scroll behavior with smooth viewport transitions
- Full keyboard tab navigation and WCAG AA focus rings
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.
- item.icon is a documented local icon name (sparkles, terminal, code, bell, search, settings) with the label first character as a text fallback, instead of a ReactNode.
- className is dropped in favour of the parts and custom properties.
- The badge fill is darkened to #be123c with white ink (6.29:1) because upstream rose-500 on white measured about 3.6:1 at 9px (PC-12.6).
- The proximity-aware hover scale is implemented as the per-item hover scale the pinned source actually performs; no pointer-distance gradient exists in the source.
- hide-on-scroll animates the presence spring out before the dock becomes hidden and un-hides before animating back in.
- The badge is aria-hidden and never joins the accessible name, and there is no roving tabindex (one plain button per item, as upstream).