Popover | astryx-vue

Name	Type	Default	Description
`placement`	`'above' \| 'below' \| 'start' \| 'end'`	`'below'`	Side of the trigger. Flips when there is no room.
`alignment`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment along the placement axis.
`isOpen`	`boolean`	—	Controlled visibility. When unset, the trigger manages visibility.
`isEnabled`	`boolean`	`true`	Prevents the trigger from opening the surface when false.
`width`	`number \| string`	Trigger width	Surface width. Numbers are pixels. When unset, the surface is at least as wide as the trigger and at most 320px (and never wider than the viewport).
`padding`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10`	`3`	Inner padding, mapped to the `--astryx-spacing-*` tokens.
`label`	`string`	—	Accessible name of the dialog. Provide it when `role` is `dialog`.
`role`	`'dialog' \| 'none'`	`'dialog'`	Use `dialog` for interactive content. Use `none` when the content already has its own role.
`isModal`	`boolean`	`true`	Keeps Tab focus inside the surface while it is open. Applies to `dialog` only.
`hasCloseButton`	`boolean`	`true`	Shows a close button that is visible only when focused.
`closeButtonLabel`	`string`	`'Close'`	Text and accessible name of the close button.
`hasAutoFocus`	`boolean`	`true`	Moves focus into the surface when it opens.
`hasLightDismiss`	`boolean`	`true`	Closes when the user presses outside the surface and the trigger.
`hasEscapeDismiss`	`boolean`	`true`	Closes when the user presses Escape.

Events

openChange(isOpen: boolean): fires when the surface opens or closes, including when the user dismisses it.

css

.my-popover {
  --astryx-popover-background: #fff;
  --astryx-popover-foreground: #000;
}