@solvind/web-components

The interactive component layer of the Solvind universal component library. Native Web Components (custom elements) — drop into any framework or none at all.

Install

npm install @solvind/web-components

Use

<script type="module">
  import '@solvind/web-components'
</script>

<sv-dialog heading="Confirm">
  <p>Proceed?</p>
</sv-dialog>

<sv-tabs>
  <button slot="tab">One</button>
  <button slot="tab">Two</button>
  <section slot="panel">…</section>
  <section slot="panel">…</section>
</sv-tabs>

Components

• <sv-dialog> — accessible modal: focus trap, Escape, backdrop
• <sv-tabs> — full WAI-ARIA Tabs pattern, roving tabindex
• <sv-accordion> / <sv-accordion-item> — disclosure pattern
• <sv-toast-group> + SvToast.show() — notification system, aria-live
• <sv-dropdown> — WAI-ARIA MenuButton pattern

Every component implements the full keyboard + ARIA pattern — not a subset.

License

MIT — part of the Solvind library.