# Popover

Anchored floating panel with CDK overlay. Click the trigger to toggle.

## Import

```ts
import { PopoverTriggerDirective, PopoverContentDirective } from '@edsis/component/popover';
```

## Usage

```html
<button Button [PopoverTrigger]="content" side="bottom" align="start">Open</button>

<ng-template PopoverContent #content="PopoverContent">
  <div class="w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md">
    Popover body
  </div>
</ng-template>
```

## API

### `PopoverTriggerDirective` (`[PopoverTrigger]`)

| Input            | Type                                     | Default    |
| ---------------- | ---------------------------------------- | ---------- |
| `PopoverTrigger` | `PopoverContentDirective`                | —          |
| `side`           | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` |
| `align`          | `'start' \| 'center' \| 'end'`           | `'center'` |
| `disabled`       | `boolean`                                | `false`    |

Exposes `isOpen()` signal. Trigger automatically sets `aria-haspopup="dialog"`
and `aria-expanded` on the host.

### `PopoverContentDirective` (`ng-template[PopoverContent]`)

Marker directive that exposes the template via `exportAs="PopoverContent"`.

## Accessibility

- Close on `Escape`.
- Close on backdrop click.
- Trigger reflects state via `aria-expanded` and `aria-haspopup`.