No matches.
component
Background style of the dialog panel. surface: default surface; sunken: recessed; elevated: raised with shadow; transparent: no background.
Box-shadow border style of the dialog panel. none: no border; default: standard border; bold: stronger emphasis; muted: subtle separation.
The Card the dialog renders its content in (header with the title and close button, body, optional footer). Card surface props that belong to the `<dialog>` (background/border/shadow/radius) and the heading/subheading (use `title` / `subtitle`) are not accepted. Set `contentBackground` for a shell-and-inset look. `false` renders the legacy bare wrapper instead. Popovers (`data-popover`) are bare unless a `card` object is passed.
Semantic feedback color scheme applied to the dialog panel.
Border radius of the dialog panel. Automatically set to none on the attached edge for drawer dialogs.
Border radius for bottom-left and bottom-right corners.
Border radius for top-left and bottom-left corners.
Border radius for top-right and bottom-right corners.
Border radius for top-left and top-right corners.
Elevation shadow of the popover panel. Popovers float over the page, so they carry a shadow by default; pass "none" to flatten it. Popovers used as transparent positioning shells (select / combobox / menu) default to "none" — the child that paints the surface owns the elevation.
Apply a frosted glass effect with backdrop blur to the dialog panel.
Render the small arrow that ties the popover's panel back to its trigger. It tracks the trigger's centre on every reposition and follows the panel through `flip()`, so it always points at the anchor. Set to `false` for surfaces that shouldn't look tethered — a rail flyout or a nested submenu that deliberately overlaps the panel it grows out of.
Positions the dialog along an edge of the screen. Automatically removes the border radius on the attached edge unless overridden.
Fills the viewport: full width, `100dvh` height (tracks mobile browser chrome), no margin and no corner radius. `true` applies at every width; a breakpoint (`"sm"` | `"md"` | `"lg"`) applies only below it — e.g. `fullscreen="sm"` is a full-screen sheet on phones and a regular dialog on larger screens. Combines with `drawer`: the drawer's slide animation is kept, its size and inset are replaced.
Size the popup's width to the anchor/trigger width (trigger-width dropdowns like combobox / select).
The smallest usable height (px) the popup accepts on a side before it flips to the roomier one. For popups that cap themselves to `--popover-available-height` and scroll inside it (a long menu), so they never settle for a sliver. Unset: no minimum.
Keep the popup at least as wide as the anchor/trigger (`min-width`) while letting it grow to fit wider content — select-style dropdowns whose options can exceed the trigger width. Ignored when `matchReferenceWidth` is set.
Internal padding of the dialog panel.
Preferred placement of the popover relative to its trigger/anchor. Consumed by the client positioning controller (Svelte/React); the Astro SSR wrapper applies it via the client `usePopover()` API rather than as a prop.
Override the Floating UI offset between the reference and the popup. `mainAxis` is the gap along the placement axis (default 8; negative values overlap the reference); `crossAxis` slides along the perpendicular axis (default 0).
Explicit z-index for the popover dialog. Non-modal popovers paint in DOM order by default; nested surfaces (e.g. menu submenus) set this per nesting depth so a child always paints above the panel it overlaps.
Extra elements that open the popover on click (open-only — never toggle) and are treated as "inside" by the outside-click handler. Useful when an input field opens an attached calendar/listbox owned by a sibling button.
Element used as the Floating UI positioning reference. Falls back to the trigger element when omitted. Also counts as "inside" for outside-click dismissal, so clicks on the anchor cannot accidentally close the popover.
Delay in ms before a hover trigger closes the popover. Ignored by non-hover strategies. Moving the cursor between trigger and dialog cancels a pending close.
Custom mousedown handler. When provided, replaces the default backdrop-click-to-close behavior. Used by Popover to also check the trigger element.
When true, this dialog does not participate in the dialog stack. Useful for popovers and non-blocking overlays. Auto-detected for popovers.
Elements treated as "inside" by the outside-click handler without any trigger wiring — clicking them neither opens nor closes the popover. For nested floating surfaces that belong to this popover but render outside its DOM subtree (e.g. a menu's portaled submenu dialogs).
When true, opens as a modal dialog using showModal() — blocks interaction with the rest of the page and enables the backdrop.
When true, prevents body scroll while the dialog is open. Uses a counter to handle stacked dialogs correctly.
Delay in ms before a hover trigger opens the popover. Ignored by non-hover strategies.
How the trigger opens/closes the popover. "click" toggles on click. "hover" opens on mouseenter (after openDelay) and closes on mouseleave. "focus" opens on focus. "hover-focus" combines both. "manual" leaves event wiring to the consumer.
When true, focus moves naturally into the dialog on open. When false (the default), the popover restores focus + scroll position after the native dialog focusing steps. Set to true for autocomplete listboxes and similar overlays where keyboard navigation inside is the primary interaction.
Accessible label of the header close button (its `aria-label`). Override it to localize the dialog. `passThrough.closeButton.props["aria-label"]` and `closeButtonProps["aria-label"]` still take precedence.
Props to customize the close button (merged with defaults).
Secondary text displayed below the title. Renders the subheading row, which also accepts subheading-leading and subheading-trailing slots. The rendered subtitle becomes the dialog's `aria-describedby` unless you set one yourself.
Text displayed in the dialog header. When provided, the header is rendered with the title, close button, and any heading or subheading slots. The rendered title also names the dialog: the root gets `aria-labelledby` pointing at it unless you set `aria-label` / `aria-labelledby` yourself.
Render-prop for the trigger; spread the supplied props onto your element.
Per-slot style and attribute override bag for customizing the popover's rendered elements.
Astro / vanilla: serialize the props into `data-popover-config` so the client runtime hydrates this popover (positioning, light dismiss, open state) and `getPindoba(el, "popover")` can `update()` it. Without it an Astro popover is wired by `usePopover()`. Frameworks with their own reactivity don't need it.