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

# <velin-persist>

Source: `components/velin-persist.js`

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

```html
<velin-persist key="contact-demo">
  <form class="velin-stack velin-gap-3" style="max-width:20rem">
    <label class="velin-form-label">Name <input class="velin-form-control" name="name" type="text" autocomplete="name"></label>
    <label class="velin-form-label">Email <input class="velin-form-control" name="email" type="email" autocomplete="email"></label>
    <button type="submit" class="velin-btn velin-btn--primary">Submit (clears draft)</button>
  </form>
</velin-persist>
```

_Example from curated docgen starter map._

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

- **Keyboard:** N/A
- **Notes:** display:contents; auto-saves form field values (WCAG 3.3.7 Redundant Entry helper). Clears on form submit.

## Attributes
| Attribute | Notes |
| --- | --- |
| `key` | Observed — triggers `attributeChangedCallback` when changed |
| `storage` | Observed — triggers `attributeChangedCallback` when changed |
## Events
- `velin-persist-clear` (bubbles)
- `velin-persist-error` (bubbles)
- `velin-persist-restore` (bubbles)
## CSS parts
_None._
## Slots
_None._
## Public API
| Kind | Name |
| --- | --- |
| Method | `clear()` |
| Property | `storageKey` |
## Related resources
- Generated API docs (canonical): [`velin-persist.md`](./velin-persist.md)
- Generated index: [README.md](./README.md)
- CLI API: `npx velinstyle wc api velin-persist`
- Human docs EN (tutorial): `docs/components/persist.html`
- Human docs DE (tutorial, lang-map): `docs/components/persist-de.html`
- Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`
