Mushilu-San UI Popover
A floating panel that opens from a trigger and holds richer content than a menu.
Selector: mui-popover
import { Popover, PopoverTrigger } from '@mushilu-san/ui/overlays';Loading example…
Overview
muiPopoverTrigger element. open is a two-way model, placement sets the side, and heading names the panel.
closeOnEscape or closeOnOutsideClick are turned off. The trigger carries aria-expanded and aria-haspopup.
When to use
A small form, filter or details panel tied to one button. Richer content than a menu list can hold.
When not to use
A list of actions. Use a dropdown menu. Use Dropdown menu instead.A short hint on hover. Use a tooltip. Use Tooltip instead.
Guidelines
Do
Give the panel a heading that says what it is for. Put focus inside the panel when it has form fields.
Don't
Do not open a popover on hover. Use a hover card for that.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
trigger | button (native) | aria-expanded and aria-haspopup are set automatically. |
panel | dialog | aria-modal="true". |
Keyboard
| Keys | Action |
|---|---|
| EnterSpace | |
| Escape | |
| TabShiftTab |
Name the panel with heading, since it is announced when it opens.
API
Popover
| Name | Type | Default | Description |
|---|---|---|---|
placement | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left' | 'right' | 'top' | 'bottom' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom' | Preferred placement of the panel relative to the trigger. |
heading | string | undefined | — | Optional accessible heading inside the panel. |
closeOnOutsideClick | boolean | true | Closes the panel on a click outside it. Default `true`. Accepts attribute presence, e.g. <… closeOnOutsideClick>. |
closeOnEscape | boolean | true | Closes the panel on Escape. Default `true`. Accepts attribute presence, e.g. <… closeOnEscape>. |
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way open state. |
| Name | Type | Description |
|---|---|---|
opened | void | Emits when the panel opens. |
closed | void | Emits when the panel closes, however it was closed. |
CSS parts
::part(heading)::part(panel)::part(root)
PopoverTrigger
CSS parts
::part(trigger)
Tokens
--mui-color-surface-raised--mui-color-border--mui-shadow-4--mui-radius-md--mui-color-focus-ring