JavaScript

Most kit components are CSS only. A few need a small script, with no dependencies:

• Tabs: keyboard handling and panel switching
• Toast: toast(), auto-close, pause on hover and focus
• Autocomplete: filtering and keyboard handling
• Data table: sorting and its announcement
• Table: row selection with select all, and expandable rows
• Input: the clear button, which shows while the field has text

The script finds these components by class and starts them on DOMContentLoaded. There is no setup attribute. State lives in attributes (aria-selected, aria-expanded, aria-sort, hidden), and the CSS styles those attributes.

Modals, drawers, dropdowns, popovers and accordions need no script: they use <dialog>, popover, invoker commands and <details>.

Drop-in script

A classic script that exposes the global WovenUIKit:

<script src="node_modules/@wovenui/components/dist/wovenui-kit.iife.js" defer></script>

WovenUIKit.toast('Your changes are live.', { title: 'Saved', variant: 'success' });

ES module

import { init, toast } from '@wovenui/components/js';

Importing the module starts the components already on the page, as the drop-in script does.

Content added later

init(element) starts the components inside an element, and the element itself when it is one. Each element starts once, so calling init() again on the same content does nothing.

import { init } from '@wovenui/components/js';

const panel = document.getElementById('settings');
panel.innerHTML = await fetch('/settings/partial').then((response) => response.text());
init(panel);

toast()

toast('Your changes are live.', { title: 'Saved', variant: 'success' });
toast('Upload failed.', { title: 'Error', variant: 'danger', duration: 0 }); // stays until closed

Option	Value
title	Title text
variant	brand, success, danger, warning or info
duration	Milliseconds before it closes, 5000 by default; 0 keeps it until closed
closeLabel	aria-label of the close button, Close by default

It returns the toast element and adds a wu-toast-region when the page has none. Toasts pause while the region is hovered or focused and never take focus. At most three stay open, and a repeat of an open message restarts that toast instead of adding one. See Toast.

Exports

Export	Use
init(root)	Starts every kit component inside root, document by default
toast(message, options)	Shows a toast and returns its element
dismiss(element)	Closes a toast
sortTable(table, th)	Sorts a data table by a header cell
initTabs, initToast, initAutocomplete, initDataTable, initTable, initInputClear	Start one kind of component inside a root

Frameworks

Apps built with a framework such as React, Ember or Vue can skip this script and keep the CSS: the components set the same attributes (aria-selected, aria-expanded, aria-sort, hidden) from their own state.