# Search Component

Wiederverwendbare Search-Komponente mit semantischem `<search>` Element.

## Baseline Status

**Baseline 2023**: `<search>` Element ist Baseline Newly available.

## Verwendung

### Basis-Verwendung

```html
<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
/>
```

### Mit Varianten

```html
<!-- Header Variante -->
<x-search 
    action="/admin/search"
    method="get"
    placeholder="Search..."
    variant="header"
/>

<!-- Sidebar Variante -->
<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
    variant="sidebar"
/>

<!-- Standalone Variante -->
<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
    variant="standalone"
/>
```

## Attribute

| Attribut | Typ | Standard | Beschreibung |
|----------|-----|----------|-------------|
| `action` | string | `/search` | Form action URL |
| `method` | string | `get` | HTTP method (get/post) |
| `name` | string | `q` | Input name attribute |
| `placeholder` | string | `Search...` | Placeholder text |
| `value` | string | `null` | Initial input value |
| `variant` | string | `standalone` | Variant: `header`, `sidebar`, `standalone` |
| `autocomplete` | boolean | `true` | Enable/disable autocomplete |
| `aria-label` | string | `null` | ARIA label for accessibility |
| `aria-describedby` | string | `null` | ARIA describedby for accessibility |
| `id` | string | `auto-generated` | Input ID |

## Varianten

### Header Variante
Für die Verwendung im Header-Bereich. Automatisch angepasste Breite und Positionierung.

### Sidebar Variante
Für die Verwendung in der Sidebar. Optimiert für schmale Bereiche.

### Standalone Variante
Für eigenständige Search-Formulare. Maximale Breite 600px, zentriert.

## Accessibility

Die Komponente ist vollständig accessibility-konform:

- Semantisches `<search>` Element
- Visuell verstecktes Label für Screen Reader
- ARIA-Attribute unterstützt
- Keyboard-Navigation unterstützt
- Focus-Management

## Beispiele

### Mit Autocomplete deaktiviert

```html
<x-search 
    action="/admin/search"
    method="get"
    placeholder="Search..."
    autocomplete="false"
/>
```

### Mit ARIA-Label

```html
<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
    aria-label="Search the website"
/>
```

## CSS-Klassen

Die Komponente verwendet folgende CSS-Klassen:

- `.admin-search` - Basis-Klasse
- `.admin-search--header` - Header Variante
- `.admin-search--sidebar` - Sidebar Variante
- `.admin-search--standalone` - Standalone Variante
- `.admin-search__input` - Input-Element
- `.admin-search__submit` - Submit-Button
- `.admin-search__icon` - Search-Icon

## Browser-Support

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

## Migration

### Von `<form role="search">` migrieren

**Vorher:**
```html
<form class="admin-search" role="search" action="/search" method="get">
    <input type="search" name="q" placeholder="Search..." />
</form>
```

**Nachher:**
```html
<x-search 
    action="/search"
    method="get"
    name="q"
    placeholder="Search..."
/>
```

Die Komponente generiert automatisch das semantische `<search>` Element mit korrektem HTML-Struktur.