# `src/components/popover/Popover.ts`:

## class: `Popover`, `btu-popover`

### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

### Mixins

| Name                | Module                         | Package |
| ------------------- | ------------------------------ | ------- |
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |

### Fields

| Name                   | Privacy | Type                                     | Default    | Description                                                                                                                                                 | Inherited From |
| ---------------------- | ------- | ---------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `position`             |         | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Position relative to the trigger element.&#xA;Auto-flips when constrained by the viewport.                                                                  |                |
| `trigger`              |         | `'click' \| 'hover' \| 'focus'`          | `'click'`  | How the popover is activated.&#xA;- 'click': Toggle on click with light dismiss&#xA;- 'hover': Show on mouseenter with delay&#xA;- 'focus': Show on focusin |                |
| `delay`                |         | `number`                                 | `300`      | Show delay in milliseconds (hover trigger only).                                                                                                            |                |
| `offset`               |         | `PopoverOffset \| null`                  | `null`     | Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).                                                                                         |                |
| `noArrow`              |         | `boolean`                                | `false`    | Hide the arrow pseudo-element.                                                                                                                              |                |
| `open`                 |         | `boolean`                                | `false`    | Programmatic open/close state (reflected).                                                                                                                  |                |
| `panelLabel`           |         | `string`                                 | `''`       | Accessible label for the popover panel (applied as aria-label on the dialog).                                                                               |                |
| `_onTriggerMouseLeave` | private |                                          |            |                                                                                                                                                             |                |
| `_onTriggerFocusIn`    | private |                                          |            |                                                                                                                                                             |                |
| `_onTriggerFocusOut`   | private |                                          |            |                                                                                                                                                             |                |
| `_onPanelMouseEnter`   | private |                                          |            |                                                                                                                                                             |                |
| `_onPanelMouseLeave`   | private |                                          |            |                                                                                                                                                             |                |
| `_onNativeToggle`      | private |                                          |            |                                                                                                                                                             |                |
| `_onKeyDown`           | private |                                          |            |                                                                                                                                                             |                |

### Methods

| Name   | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `emit` |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |

### Events

| Name               | Type          | Description                   | Inherited From |
| ------------------ | ------------- | ----------------------------- | -------------- |
| `btu-popover-show` | `CustomEvent` | Fired when the popover opens  |                |
| `btu-popover-hide` | `CustomEvent` | Fired when the popover closes |                |

### Attributes

| Name          | Field      | Inherited From |
| ------------- | ---------- | -------------- |
| `position`    | position   |                |
| `trigger`     | trigger    |                |
| `delay`       | delay      |                |
| `offset`      | offset     |                |
| `noArrow`     | noArrow    |                |
| `open`        | open       |                |
| `panel-label` | panelLabel |                |
| `no-arrow`    | noArrow    |                |

### CSS Properties

| Name                         | Default | Description                                                                           |
| ---------------------------- | ------- | ------------------------------------------------------------------------------------- |
| `--popover-color-background` |         | Panel background color (default: var(--btu-theme-white))                              |
| `--popover-color-content`    |         | Panel text color (default: oklch(var(--btu-theme-gray-900)))                          |
| `--popover-border-radius`    |         | Panel corner radius (default: theme borderRadius.lg)                                  |
| `--popover-offset`           |         | Gap between trigger and panel (default: 8px; see btu-popover-offset-{sm\|md\|lg\|xl}) |
| `--popover-arrow-size`       |         | Width/height of the pointer arrow (default: 8px)                                      |

### Slots

| Name      | Description                                          |
| --------- | ---------------------------------------------------- |
| `trigger` | The element that activates the popover               |
| `content` | Rich HTML content displayed inside the popover panel |

<hr/>

## Exports

| Kind                        | Name          | Declaration | Module                            | Package |
| --------------------------- | ------------- | ----------- | --------------------------------- | ------- |
| `js`                        | `default`     | Popover     | src/components/popover/Popover.ts |         |
| `custom-element-definition` | `btu-popover` | Popover     | src/components/popover/Popover.ts |         |
