Preview Card

Overview

Preview Card opens a floating panel on hover (after a configurable OpenDelay) or immediately on keyboard focus, and closes after a CloseDelay grace period so the pointer can travel from trigger to card. It is non-modal: no focus trap or scroll lock, and it is not exposed as a dialog to assistive technology.

Anatomy

@using Navius.Primitives.Components.PreviewCard

<NaviusPreviewCard>
    <NaviusPreviewCardTrigger />
    <NaviusPreviewCardPortal>
        <NaviusPreviewCardBackdrop />
        <NaviusPreviewCardPositioner>
            <NaviusPreviewCardPopup>
                <NaviusPreviewCardArrow />
            </NaviusPreviewCardPopup>
        </NaviusPreviewCardPositioner>
    </NaviusPreviewCardPortal>
</NaviusPreviewCard>

Root

Prop	Type	Default	Description
`Open`	`bool`	`false`	Controlled open state. Pair with `OpenChanged` (`@bind-Open`).
`OpenChanged`	`EventCallback<bool>`	-	Fires when the controlled `Open` value should change.
`DefaultOpen`	`bool`	`false`	Initial open state when uncontrolled.
`OpenDelay`	`int`	`600`	Hover-intent delay before opening, in milliseconds.
`CloseDelay`	`int`	`300`	Grace delay before closing after leave/blur, in milliseconds.
`ChildContent`	`RenderFragment?`	-	The preview card’s parts.

Trigger

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Trigger content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `a`.

Portal

Prop	Type	Default	Description
`Container`	`string?`	-	CSS selector for the mount target. `null` uses `document.body`.
`KeepMounted`	`bool`	`false`	Keeps the Popup mounted while closed, for exit animations.
`ChildContent`	`RenderFragment?`	-	The Backdrop and Positioner/Popup.

Backdrop

Prop	Type	Default	Description
`KeepMounted`	`bool`	`false`	Keeps the backdrop mounted while closed, for exit animations.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Positioner

Prop	Type	Default	Description
`Side`	`string`	`"bottom"`	-
`Align`	`string`	`"center"`	-
`SideOffset`	`double`	`0`	-
`AlignOffset`	`double`	`0`	-
`Flip`	`bool`	`true`	-
`AvoidCollisions`	`bool`	`true`	-
`CollisionPadding`	`double?`	-	-
`Sticky`	`string`	`"partial"`	Whether the card stays anchored on cross-axis overflow.
`HideWhenDetached`	`bool`	`false`	-
`ArrowPadding`	`double`	`0`	-
`ChildContent`	`RenderFragment?`	-	The Popup.

Prop	Type	Default	Description
`KeepMounted`	`bool`	`false`	Keeps the popup mounted while closed, for exit animations.
`ChildContent`	`RenderFragment?`	-	The card’s content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Arrow

Prop	Type	Default	Description
`Width`	`double`	`10`	-
`Height`	`double`	`5`	-
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `svg`.

Data attributes

Part	Attribute	Description
Trigger	`data-popup-open`	Present while the preview card is open.
Backdrop	`data-open`	Present while open.
Backdrop	`data-closed`	Present while closing (through the exit transition).
Backdrop	`data-starting-style`	Present at the start of the open transition.
Backdrop	`data-ending-style`	Present at the start of the close transition.
Popup	`data-open`	Present while the preview card is open.
Popup	`data-closed`	Present while closing (through the exit transition).
Popup	`data-starting-style`	Present on the first committed open frame.
Popup	`data-ending-style`	Present while animating out.
Popup	`data-side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`
Popup	`data-align`	`"start"` \| `"center"` \| `"end"`
Arrow	`data-side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`

Keyboard interactions

Key	Behavior
`Tab`	Moves focus to the trigger, which opens the preview card.
`Enter`	Activates the trigger link.
`Escape`	Closes the preview card.

ARIA mechanism

Preview Card is intended for sighted, mouse and keyboard users to preview content behind a link; the Popup renders no ARIA role and is deliberately not exposed as a dialog to assistive technology, so its content should be reachable by other means. Covered by the Playwright browser test suite.