# Popover Component

Wiederverwendbare Popover-Komponente mit nativer Popover API.

## Baseline Status

**Baseline 2025**: Popover API ist Baseline Newly available.

## Verwendung

### Basis-Verwendung

```html
<button popovertarget="my-popover">Open Popover</button>

<x-popover id="my-popover" type="auto">
    <p>Popover content</p>
</x-popover>
```

### Mit Positionierung

```html
<button popovertarget="user-menu-popover">User Menu</button>

<x-popover id="user-menu-popover" type="auto" position="bottom-end">
    <ul role="menu">
        <li><a href="/profile">Profile</a></li>
        <li><a href="/settings">Settings</a></li>
    </ul>
</x-popover>
```

## Attribute

| Attribut | Typ | Standard | Beschreibung |
|----------|-----|----------|-------------|
| `id` | string | `auto-generated` | Popover ID (erforderlich für popovertarget) |
| `type` | string | `auto` | Popover-Typ: `auto` oder `manual` |
| `popover` | string | `auto` | Alias für `type` |
| `position` | string | `null` | Position: `bottom-start`, `bottom-end`, `top-start`, `top-end` |
| `anchor` | string | `null` | CSS Anchor Element ID (für Anchor Positioning) |
| `aria-label` | string | `null` | ARIA label für accessibility |
| `aria-labelledby` | string | `null` | ARIA labelledby für accessibility |

## Popover-Typen

### Auto Popover (`type="auto"`)

- Automatisches Dismissal beim Klick außerhalb
- Automatisches Dismissal beim ESC-Key
- Automatisches Dismissal beim Klick auf einen anderen Popover-Trigger
- Automatisches Focus-Management

### Manual Popover (`type="manual"`)

- Manuelles Management erforderlich
- Kein automatisches Dismissal
- Für komplexe Interaktionen geeignet

## Positionierung

Die Komponente unterstützt verschiedene Positionierungen:

- `bottom-start` - Unten links
- `bottom-end` - Unten rechts
- `top-start` - Oben links
- `top-end` - Oben rechts

## Trigger-Button

Der Trigger-Button benötigt das `popovertarget` Attribut:

```html
<button popovertarget="my-popover" aria-haspopup="true" aria-expanded="false">
    Open Popover
</button>
```

Das `aria-expanded` Attribut wird automatisch aktualisiert, wenn der Popover geöffnet/geschlossen wird.

## Accessibility

Die Komponente ist vollständig accessibility-konform:

- Native Browser-Support für Keyboard-Navigation
- Automatisches Focus-Management
- ESC-Key Support (native)
- ARIA-Attribute unterstützt
- Screen Reader Support

## JavaScript Integration

Die Popover API funktioniert ohne JavaScript, aber für erweiterte Features kann JavaScript verwendet werden:

```javascript
const popover = document.getElementById('my-popover');
const trigger = document.querySelector('[popovertarget="my-popover"]');

// Popover öffnen
popover.showPopover();

// Popover schließen
popover.hidePopover();

// Popover togglen
popover.togglePopover();

// Event Listener
popover.addEventListener('toggle', (e) => {
    const isOpen = popover.matches(':popover-open');
    trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
```

## View Transitions

Die Komponente unterstützt View Transitions für animierte Übergänge:

```css
[popover].admin-popover {
    view-transition-name: admin-popover;
}
```

## CSS-Klassen

Die Komponente verwendet folgende CSS-Klassen:

- `.admin-popover` - Basis-Klasse
- `.admin-popover--auto` - Auto Popover Variante
- `.admin-popover--manual` - Manual Popover Variante
- `.admin-popover--bottom-start` - Position bottom-start
- `.admin-popover--bottom-end` - Position bottom-end
- `.admin-popover--top-start` - Position top-start
- `.admin-popover--top-end` - Position top-end

## Browser-Support

- Chrome 125+
- Firefox 129+
- Safari 18+
- Edge 125+

## Migration

### Von Custom Dropdown migrieren

**Vorher:**
```html
<div class="dropdown" data-dropdown>
    <button data-dropdown-trigger="menu">Menu</button>
    <ul class="dropdown-menu" data-dropdown-content="menu">
        <li><a href="/item1">Item 1</a></li>
        <li><a href="/item2">Item 2</a></li>
    </ul>
</div>
```

**Nachher:**
```html
<button popovertarget="menu-popover">Menu</button>

<x-popover id="menu-popover" type="auto" position="bottom-start">
    <ul role="menu">
        <li><a href="/item1">Item 1</a></li>
        <li><a href="/item2">Item 2</a></li>
    </ul>
</x-popover>
```

**JavaScript entfernen:**
Das Custom Dropdown-Management JavaScript kann entfernt werden, da die Popover API native Funktionalität bietet.