Package Exports
- @dufeut/waria
Readme
Waria
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/wariaUsage
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">
<button slot="tab" name="tab1">Tab 1</button>
<button slot="tab" name="tab2">Tab 2</button>
<div slot="panel" name="tab1">Content 1</div>
<div slot="panel" name="tab2">Content 2</div>
</w-tabs>Example: Dialog Component
slots:
triggercontentclose
<w-dialog id="dialog_one">
<button slot="trigger" style="cursor: pointer">Open Dialog</button>
<div
slot="content"
label="Example Dialog"
style="
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
max-width: 400px;
"
>
<h3>Dialog Title</h3>
<p>
This is a modal dialog. Press Escape or click the close button to close
it.
</p>
<button slot="close" style="padding: 0.5rem 1rem; cursor: pointer">
Close
</button>
</div>
</w-dialog>
<script>
// Close Dialog: `dialog_one` every 2 seconds.
const dialog = document.getElementById("dialog_one");
setInterval(() => {
dialog.close();
}, 2000);
// Listen to Open
document.getElementById("dialog_one").addEventListener("open", () => {
console.log("opened");
});
</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 |