Waria

Framework-agnostic UI primitives via native Web Components (ESM).

Documentation | GitHub

Features

• 30+ Accessible Components - WCAG 2.1 Level AA compliant UI primitives
• Zero Dependencies - Pure vanilla JavaScript
• Unstyled & Composable - Bring your own styles, complete design freedom
• Framework Agnostic - Works with Vue, Svelte, React, Preact, Alpine.js, or vanilla JS
• Native ESM - Modern JavaScript modules, no build tools required
• Accessibility First - Full ARIA support, keyboard navigation, focus management
• Performance Optimized - Lightweight, efficient, and fast
• TypeScript - Full type safety and excellent DX
• Web Standards - Built on Web Components and modern web APIs

Installation

npm install @dufeut/waria

Usage

ES Modules

import { App } from "@dufeut/waria";

App.start({
  hash: true, // Use hash-based routing
});

IIFE (Script Tag)

<script src="https://unpkg.com/@dufeut/waria/dist/waria.iife.js"></script>
<script>
  waria.App.start({ hash: true });
</script>

Example: Tabs Component

<w-tabs value="tab1">
  <w-slot list>
    <div>
      <w-slot tab name="tab1"><button>Tab 1</button></w-slot>
      <w-slot tab name="tab2"><button>Tab 2</button></w-slot>
    </div>
  </w-slot>
  <w-slot panels>
    <div>
      <w-slot panel name="tab1"><div>Content 1</div></w-slot>
      <w-slot panel name="tab2"><div>Content 2</div></w-slot>
    </div>
  </w-slot>
</w-tabs>

Example: Dialog Component

slots:

• trigger
• body
• close

<w-dialog id="dialog_one">
  <w-slot trigger><button>Open Dialog</button></w-slot>
  <w-slot body>
    <div>
      <h3>Dialog Title</h3>
      <p>
        This is a modal dialog. Press Escape or click the close button to close
        it.
      </p>
      <w-slot close><button>Close</button></w-slot>
    </div>
  </w-slot>
</w-dialog>
<script>
  const dialog = document.getElementById("dialog_one");
  dialog.addEventListener("open", () => console.log("opened"));
  dialog.addEventListener("close", () => console.log("closed"));
</script>

Event Handlers

Use w-* attributes for inline event handling:

<w-dialog w-open="console.log('opened')" w-close="console.log('closed')">
  ...
</w-dialog>

<w-menu w-select="handleSelect(event.detail)"> ... </w-menu>

Or use addEventListener:

dialog.addEventListener("open", (e) => console.log("opened"));

Components

Category	Components
Core	Accordion, Collapsible, Tabs, Tree
Form	Choice (Radio/Checkbox), Label, Range, Select, Spinbutton, Switch, Toggles
Overlay	Context Menu, Dialog, Hover Card, Menu, Popover, Toast, Tooltip
Layout	Aspect Ratio, Avatar, Carousel, Link, Scrollbar, Separator
Data	Feed, Grid, Treegrid
Feedback	Progressbar
Utility	Breadcrumb, Navigation, Toolbar, View

License

BSD-3-Clause

References

• ARIA Patterns
• ARIA Specification
• ARIA Authoring Practices Guide
• WCAG 2.1 Guidelines