<baht-popover>

A floating panel anchored to a trigger: filters, a quick edit, a details card. The first child is the trigger; everything after it becomes the panel, a non-modal dialog named by label.

Filters

Status

Apply

Opening moves focus into the panel; Escape closes and returns focus to the trigger.

<baht-popover style="display:block;min-height:220px" label="Filters">
  <baht-button variant="secondary" icon="search">Filters</baht-button>
  <div style="display:grid;gap:10px">
    <label style="display:grid;gap:4px;font-size:14px">Status <input class="baht-control" value="Open"/></label>
    <baht-button size="sm">Apply</baht-button>
  </div>
</baht-popover>

Clicking the trigger toggles the panel. A click outside or Escape closes it (Escape is marked handled, so a surrounding <baht-modal> stays open). The trigger gets aria-haspopup="dialog", aria-expanded and aria-controls. Set open from code to show or hide it; baht-toggle fires only for the user’s own toggles.

Props

Name	Type	Default	Description
`open`	`boolean`	`false`	Shown or hidden; the host may set it
`label`	`string`	`''`	Accessible name of the panel
`placement`	`PopoverPlacement`	`'bottom-start'`	bottom-start \| bottom-end \| top-start \| top-end

Events

Event	detail	Description
`baht-toggle`	`{ open }`	The user opened or closed it
`name`	CustomEvent