# Popover

A non modal layer anchored to its trigger that holds a few controls or details for one item.

* Kind: component
* Page: https://design.werklist.com/components/popover
* Version: 2.1.2

## When to use it

* A small task on one item, such as rescheduling an interview or logging a call with a candidate
* Details of one item that people glance at and close
* A short form tied to a row, on wide screens

## When not to use it

* A name or a shortcut: use a tooltip
* A list of commands: use a menu
* A decision that must come first: use a dialog
* A warning: use a dialog or an inline message
* A popover opened from a popover
* Opening on hover: a popover opens on a click or a key

## Anatomy

* Layer: above the page (--layer-popover)
* Width: from the trigger's width to 404 px, and at most the window width less 16 px
* Padding: 12 px (--space-3)
* Radius: 12 px (--radius-xl)
* Title, optional: 14 px on 20 px, weight 500 (--type-nav, --text)
* Body text: 14 px on 22 px (--type-small, --text)
* Buttons: 36 px high, 44 px on touch screens
* Gap to the trigger: 8 px (--space-2)
* Window margin: 8 px (--space-2)
* Placement: below the trigger with the start edges aligned, or the end edges for a trigger at the end of a row. Upward when less than 280 px remain below and there is more room above. Never over its own trigger
* Maximum height: 70 percent of the window, or the room on its side when that is less. The content scrolls on its own
* Surface with a mouse: raised fill and shadow. In the dark theme a 1 px top highlight and a 0.5 px ring (--glass-fill-raised, --elevation-3, --glass-highlight, --glass-ring-raised)
* Surface on a touch screen: opaque, no blur (--surface-1)

## Variants

* Anchored: Wide screens and details on phones
* As a bottom sheet: A popover that holds a form or more than one control, on a touch screen below 640 px

## States

* Opening: Fades in over 150 ms, moving 4 px away from the trigger and growing from 98 percent (--duration-fast, --ease-soft)
* Closing: Reverse over 150 ms (--duration-fast, --ease-standard)
* Reduced motion: Opacity only (--duration-fast)
* Trigger open: aria-expanded true on the trigger

## Keyboard

* Enter or Space on the trigger: Opens the popover, focus on its first control
* Tab, Shift+Tab: Move through the popover. Leaving it closes it and continues in page order after the trigger
* Escape: Closes it, focus back on the trigger

## Accessibility

* role dialog without aria-modal. Aria-labelledby its title or an aria-label naming the object, such as Interview with Sunita Rai
* Trigger: aria-haspopup dialog, aria-expanded, aria-controls
* Focus moves in on open and back to the trigger on Escape. The popover itself takes tabindex -1 when it has no control
* Nothing the task depends on lives only in a popover
* One popover or menu open at a time. Escape closes the front layer first

## Content

* A title of a few words, the details, one or two actions
* The content may end with one link to the full record, which opens in the same tab
* No warnings

## Tokens

* --layer-popover
* --glass-fill-raised
* --glass-highlight
* --glass-ring-raised
* --elevation-3
* --surface-1
* --radius-xl
* --space-2
* --space-3
* --type-nav
* --type-small
* --text
* --duration-fast
* --ease-soft
* --ease-standard