# xpl-popover

A popover is an overlay that pops up over all other layers and is triggered by a click or tap, and dismissed by clicking outside the popover or a dismiss icon. Popovers can contain additional actions and allow those actions to be triggered.


### Design Tokens

Tokens used by this component from `@xplortech/apollo-foundation`.

**Color**
- `--xpl-background-surface-default` — content panel background and arrow fill
- `--xpl-background-surface-transparent-10` — shadow primary layer
- `--xpl-background-surface-transparent-5` — shadow secondary layer
- `--xpl-text-default` — content text color
- `--xpl-border-default` — content panel border and arrow stroke

**Spacing**
- `--xpl-space-8` — popover margin (offset from trigger), via `--xpl-popover-margin`
- `--xpl-space-16` — content panel padding (Figma `padding/tight`; corrected from the legacy 24px during the Foundation migration — see `TECH_DEBT.md`)

**Border**
- `--xpl-border-small` — border width (1px)
- `--xpl-border-radius-default` — content panel corner radius (8px)

**Z-index**
- `--xpl-z-index-100` — content panel stacking order
- `--xpl-z-index-900` — arrow stacking order

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute  | Description                                                                                                                                                                             | Type                                                                                                                                                                                               | Default           |
| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| `disabled` | `disabled` | Whether the popover is disabled or not.                                                                                                                                                 | `boolean`                                                                                                                                                                                          | `false`           |
| `display`  | `display`  | The display style of the popover, either as an arrow or a menu. - 'arrow': Displays an arrow pointing to the trigger element. - 'menu': Displays a menu-style popover without an arrow. | `"arrow" \| "menu"`                                                                                                                                                                                | `'arrow'`         |
| `isOpen`   | `is-open`  | Whether the popover is open by default or not.                                                                                                                                          | `boolean`                                                                                                                                                                                          | `false`           |
| `position` | `position` | The position of the trigger element relative to the popover.                                                                                                                            | `"bottom-end" \| "bottom-left" \| "bottom-middle" \| "bottom-right" \| "bottom-start" \| "middle-left" \| "middle-right" \| "top-end" \| "top-left" \| "top-middle" \| "top-right" \| "top-start"` | `'bottom-middle'` |


## Events

| Event          | Description                                         | Type                   |
| -------------- | --------------------------------------------------- | ---------------------- |
| `isOpenChange` | Event emitted when the popover is opened or closed. | `CustomEvent<boolean>` |


## Slots

| Slot              | Description                                           |
| ----------------- | ----------------------------------------------------- |
| `"Inner Content"` | Content inside the popover                            |
| `"trigger"`       | The element that, when clicked, will open the popover |


## Dependencies

### Used by

 - [xpl-input-color](../xpl-input/xpl-input-color)
 - [xpl-top-nav](../xpl-top-nav)

### Graph
```mermaid
graph TD;
  xpl-input-color --> xpl-popover
  xpl-top-nav --> xpl-popover
  style xpl-popover fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*