Picker panel

The floating layer of the date and time pickers. React <PickerPanel> (packages/ui/src/components/PickerPanel.tsx) portals .dp-scrim + .dp-panel to document.body, positions the panel to its anchor with the shared place() primitive and turns into a bottom sheet under 720px. It is not .acrm-popover — that layer pins to the trigger width and caps at 360px, while the range calendar needs 540px.

When to use

• Hosting a Calendar (264 / 540px) or a Time list (132px) next to a .dp-field anchor — Date field, Date range, Time field all use it.
• Any picker body whose width comes from its content, not from the trigger.

When not to use

• Menus, selects and pickers of options — Popover / Picker menu (.acrm-popover).
• Inline calendars in the rail or in a filter chip menu — render Calendar directly, no panel.
• Dialogs with a footer of actions — Dialog.

Anatomy

• .dp-scrim: fixed, full viewport, z-index: 100, transparent on desktop; mousedown closes.
• .dp-panel: fixed, z-index: 101, --surface-100, 1px --border-strong, --radius-md, --shadow-pop, padding --sp-2; width shrinks to the child (.dp-pop, .dp-timelist).
• Position: place(anchorRect, size, 'start') — below the anchor, flips above at the bottom edge, clipped to the viewport; re-measured on scroll and resize, closes when the anchor leaves the viewport. dep forces a re-measure when the body height changes.
• Mobile ≤720px .sheet: bottom sheet full width, max-height: 86vh, --radius-xl top corners, drag handle ::before 36×4, dimmed scrim rgba(0,0,0,.32), aria-modal; touch targets 44px (days, options, foot buttons), one month.
• Role dialog with ariaLabel from the host ("Vybrat datum", "Vybrat rozsah", "Čas").

Best practices

Do

• Anchor to the whole .dp-field (not the input) so the panel aligns with the field edge.
• Pass dep with the value when the body height changes (range head, "Vymazat" foot).
• Let the host return focus on close (onClose → inputRef.focus()).

Don't

• Reusing .acrm-popover for a calendar — width and max-width are wrong for 540px.
• Adding a header, title or close button to the panel; the body (presets, grid, foot) is the whole content.
• Stacking a second panel: at most one is open, and the host relies on that for blur handling.

Content

• The panel has no copy of its own; labels come from the host (ariaLabel) and the body.
• Foot action inside the body is "Vymazat" (.dp-clear), optional "Přidat čas" (.dp-addtime) in the task panel.

Related

• calendar, time-field — the bodies.
• popover (Popover family) — the general menu layer this is deliberately not.
• dialog — the mobile sheet shares its drag-handle affordance.