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