<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: components/velin-segmented-control.js -->

# <velin-segmented-control>

Source: `components/velin-segmented-control.js`

## Minimal working example
Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed):

```html
<velin-segmented-control aria-label="View mode">
              <button type="button" selected>List</button>
              <button type="button">Grid</button>
              <button type="button">Board</button>
            </velin-segmented-control>
```

_Example derived from human component docs (`exampleSource: human-doc`; fail-closed extract — not a second SoT)._

## Accessibility
WCAG contract status: **pass** (framework target: AAA).

- **Roles:** `group`
- **Keyboard:** Roving
- **Required attributes:** `aria-label`

## Attributes
| Attribute | Notes |
| --- | --- |
| `aria-label` | Observed — triggers `attributeChangedCallback` when changed (required by a11y contract) |
## Events
- `velin-change` (bubbles)
## CSS parts
_None._
## Slots
- `(default)`
## Public API
_No public methods detected._
## Related resources
- Generated API docs (canonical): [`velin-segmented-control.md`](./velin-segmented-control.md)
- Generated index: [README.md](./README.md)
- CLI API: `npx velinstyle wc api velin-segmented-control`
- Human docs EN (tutorial): `docs/components/segmented-control.html`
- Human docs DE (tutorial, lang-map): `docs/components/segmentsteuerung.html`
- Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`
