Zetta v1.6

Components · Overlays & menus

Popover

Non-modal floating panel anchored to a trigger element. Used for contextual detail and user-initiated content. Split from zetta-overlay-v1_4.md (removed in v1.5) in v1.4.

Preview

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Popover" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `popover` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `popover` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

[Trigger button]
       ↓
┌──────────────────────────┐
│  Popover content here    │  ← popover panel
│  Any content is valid    │
└──────────────────────────┘
State Visual
Closed Not rendered
Open Panel visible, anchored to trigger, shadow applied
Closing Fade out, {motion.duration-fast}

When to use

  • Contextual forms or actions anchored to an element (e.g. date picker, color picker, filter panel).
  • Detail previews triggered by user click.

When not to use

  • Brief text labels — use Tooltip.
  • Actions that block the page — use Modal.
  • Contextual action lists — use Dropdown.

Do

  • Close on Escape and click-outside.
  • Trap focus inside the popover while open.
  • Return focus to the trigger on close.
  • Popover content has no specific format requirement — use headings, forms, or lists as needed.
  • Keep content focused: if it needs a title, actions, and body text, consider a Modal instead.

Keyboard

Key Behavior
Enter / Space Open popover (on trigger)
Tab Cycle focus within popover
Escape Close popover, return focus to trigger

Accessibility

  • Trigger: aria-haspopup="dialog", aria-expanded="true/false", aria-controls="popover-id".
  • Panel: role="dialog", aria-labelledby (if panel has a heading).
  • Focus moves to the first focusable element inside the panel on open.
  • No blanket — popover is non-modal.

Spec

Values and token references resolved straight from the Zetta spec.

popover
backgroundColor
{colors.popover}
textColor
{colors.popover-foreground}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
{rounded.base}
shadow
{elevation.shadow.overlay}
padding
{spacing.md}
minWidth
200px