@wovenui/components 0.0.0-stage → 1.0.0

package/dist/wovenui-kit.js

@@ -0,0 +1,529 @@
+// @wovenui/components wovenui-kit.js, MIT. Built from src/js.
+// Shared helpers for the kit scripts
+const started = new WeakSet();
+let count = 0;
+
+// Elements matching the selector in root (root included), each returned only once
+function fresh(root, selector) {
+    const found = [...root.querySelectorAll(selector)];
+    if (root.matches?.(selector)) found.unshift(root);
+    return found.filter((el) => !started.has(el) && started.add(el));
+}
+
+// The element's id, assigned when missing
+function idOf(el, prefix) {
+    if (!el.id) el.id = `${prefix}-${++count}`;
+    return el.id;
+}
+
+// True when the component opted into motion and the user allows it
+const animated = (el, name) =>
+    el.matches(`.${name}.animated, .wu-animated .${name}`) &&
+    matchMedia('(prefers-reduced-motion: no-preference)').matches;
+
+// Tabs: WAI-ARIA tabs pattern, roving tabindex, automatic activation
+
+const usable = (tab) =>
+    !tab.disabled && tab.getAttribute('aria-disabled') !== 'true';
+
+function initTabs(root = document) {
+    for (const tabs of fresh(root, '.wu-tabs')) {
+        const list = tabs.querySelector(':scope > .wu-tabs-list');
+        if (!list) continue;
+        const all = [...list.querySelectorAll(':scope > .wu-tabs-tab')];
+        const panels = [...tabs.querySelectorAll(':scope > .wu-tabs-panel')];
+        const panelOf = (tab) =>
+            document.getElementById(tab.getAttribute('aria-controls'));
+
+        list.setAttribute('role', 'tablist');
+        if (tabs.classList.contains('vertical'))
+            list.setAttribute('aria-orientation', 'vertical');
+        all.forEach((tab, i) => {
+            const panel = panelOf(tab) || panels[i];
+            tab.setAttribute('role', 'tab');
+            if (!panel) return;
+            tab.setAttribute('aria-controls', idOf(panel, 'wu-panel'));
+            panel.setAttribute('role', 'tabpanel');
+            panel.setAttribute('aria-labelledby', idOf(tab, 'wu-tab'));
+            if (!panel.hasAttribute('tabindex')) panel.tabIndex = 0;
+        });
+
+        const select = (tab, focus) => {
+            for (const t of all) {
+                const on = t === tab;
+                t.setAttribute('aria-selected', on);
+                t.tabIndex = on ? 0 : -1;
+                const panel = panelOf(t);
+                if (panel) panel.hidden = !on;
+            }
+            if (focus) tab.focus();
+        };
+        const first =
+            all.find((t) => t.getAttribute('aria-selected') === 'true') ||
+            all.find(usable);
+        if (first) select(first);
+
+        list.addEventListener('click', (e) => {
+            const tab = e.target.closest('.wu-tabs-tab');
+            if (all.includes(tab) && usable(tab)) select(tab);
+        });
+
+        list.addEventListener('keydown', (e) => {
+            const items = all.filter(usable);
+            const i = items.indexOf(e.target);
+            if (i < 0) return;
+            const vertical =
+                list.getAttribute('aria-orientation') === 'vertical';
+            const back = getComputedStyle(list).direction === 'rtl' ? 1 : -1;
+            const prev = items.at((i - 1) % items.length);
+            const after = items.at((i + 1) % items.length);
+            const next = {
+                ...(vertical
+                    ? { ArrowUp: prev, ArrowDown: after }
+                    : {
+                          ArrowLeft: items.at((i + back) % items.length),
+                          ArrowRight: items.at((i - back) % items.length),
+                      }),
+                Home: items[0],
+                End: items.at(-1),
+            }[e.key];
+            if (!next) return;
+            e.preventDefault();
+            select(next, true);
+        });
+    }
+}
+
+// Toasts: a polite live region, auto-dismiss paused on hover and focus, never takes focus
+
+const MAX = 3;
+const timers = new WeakMap();
+const keys = new WeakMap();
+const open = new Map();
+const before = new WeakMap();
+const pending = new WeakSet();
+const toastsOf = (region) =>
+    region.querySelectorAll(':scope > .wu-toast:not([hidden])');
+const paused = (region) => region.matches(':hover, :focus-within');
+
+function start(el) {
+    const t = timers.get(el);
+    if (!t || t.id) return;
+    t.start = Date.now();
+    t.id = setTimeout(() => dismiss(el), t.left);
+}
+
+function stop(el) {
+    const t = timers.get(el);
+    if (!t?.id) return;
+    clearTimeout(t.id);
+    t.id = 0;
+    t.left -= Date.now() - t.start;
+}
+
+// Focus target when a focused toast closes: the next toast's close button, else where focus was before
+function focusAfter(el) {
+    const region = el.parentElement;
+    const rest = region ? [...toastsOf(region)].filter((t) => t !== el) : [];
+    const next =
+        rest.find(
+            (t) =>
+                el.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING
+        ) ?? rest.at(-1);
+    const close = next?.querySelector('.wu-toast-close');
+    if (close) return close;
+    const back = region && before.get(region);
+    return back?.isConnected ? back : null;
+}
+
+// Hides the toast, then removes it once its exit transition ends
+function dismiss(el, moveFocus = true) {
+    if (el.hidden) return;
+    if (moveFocus && el.contains(document.activeElement))
+        focusAfter(el)?.focus();
+    stop(el);
+    timers.delete(el);
+    if (open.get(keys.get(el)) === el) open.delete(keys.get(el));
+    el.hidden = true;
+    const done = () => el.remove();
+    Promise.all(el.getAnimations().map((a) => a.finished)).then(done, done);
+}
+
+function arm(el, region, ms) {
+    if (ms > 0) timers.set(el, { left: ms, ms, id: 0 });
+    if (!paused(region)) start(el);
+}
+
+// Closes the oldest toasts that time out, until at most MAX are open; never the new one or a focused one
+function cap(region, added) {
+    const shown = [...toastsOf(region)];
+    let extra = shown.length - MAX;
+    for (const el of shown) {
+        if (extra <= 0) break;
+        if (
+            el === added ||
+            !timers.has(el) ||
+            el.contains(document.activeElement)
+        )
+            continue;
+        dismiss(el, false);
+        extra--;
+    }
+}
+
+function wire(root) {
+    for (const region of fresh(root, '.wu-toast-region')) {
+        const resume = () => toastsOf(region).forEach(start);
+        // detail 0: activated from the keyboard, so focus moves on; a pointer click lets it go
+        region.addEventListener('click', (e) => {
+            const close = e.target.closest('.wu-toast-close');
+            if (close) dismiss(close.closest('.wu-toast'), e.detail === 0);
+        });
+        region.addEventListener('mouseenter', () =>
+            toastsOf(region).forEach(stop)
+        );
+        region.addEventListener('focusin', (e) => {
+            if (e.relatedTarget && !region.contains(e.relatedTarget))
+                before.set(region, e.relatedTarget);
+            toastsOf(region).forEach(stop);
+        });
+        region.addEventListener('mouseleave', () => {
+            if (!region.matches(':focus-within')) resume();
+        });
+        region.addEventListener('focusout', (e) => {
+            if (!region.contains(e.relatedTarget) && !region.matches(':hover'))
+                resume();
+        });
+        for (const el of toastsOf(region))
+            arm(el, region, +(el.dataset.duration ?? 5000));
+    }
+}
+
+const initToast = (root = document) => wire(root);
+
+// Shows a toast; returns its element. duration 0 keeps it until closed.
+// A message and variant already open restart that toast's timer instead of adding another.
+function toast(message, options = {}) {
+    const { title, variant, duration = 5000, closeLabel = 'Close' } = options;
+    const key = `${variant ?? ''}\n${message}`;
+    const same = open.get(key);
+    if (same && !same.hidden && (same.isConnected || pending.has(same))) {
+        const t = timers.get(same);
+        if (t) {
+            stop(same);
+            t.left = t.ms;
+            if (!paused(same.parentElement ?? same)) start(same);
+        }
+        return same;
+    }
+
+    let region = document.querySelector('.wu-toast-region');
+    if (!region) {
+        region = document.createElement('section');
+        region.className = 'wu-toast-region';
+        region.setAttribute('aria-live', 'polite');
+        region.setAttribute('aria-label', 'Notifications');
+        document.body.append(region);
+    }
+    wire(region);
+
+    const el = document.createElement('div');
+    el.className = variant ? `wu-toast ${variant}` : 'wu-toast';
+    const part = (tag, className, text) => {
+        const node = el.appendChild(document.createElement(tag));
+        if (className) node.className = className;
+        if (text) node.textContent = text;
+        return node;
+    };
+    if (title) part('p', 'wu-toast-title', title);
+    part('p', '', message);
+    const close = part('button', 'wu-toast-close');
+    close.type = 'button';
+    close.setAttribute('aria-label', closeLabel);
+    keys.set(el, key);
+    open.set(key, el);
+    pending.add(el);
+
+    // Next task, so a region added just now is known to screen readers first
+    setTimeout(() => {
+        pending.delete(el);
+        if (open.get(key) !== el) return;
+        region.append(el);
+        arm(el, region, duration);
+        cap(region, el);
+    }, 50);
+    return el;
+}
+
+// Autocomplete: WAI-ARIA combobox with a listbox, filters the options in the markup
+
+function initAutocomplete(root = document) {
+    for (const box of fresh(root, '.wu-autocomplete')) {
+        const input = box.querySelector('input');
+        const list = box.querySelector('.wu-autocomplete-list');
+        if (!input || !list) continue;
+        const empty = box.querySelector('.wu-autocomplete-empty');
+        const options = [...list.querySelectorAll('.wu-autocomplete-option')];
+        let active = null;
+
+        input.setAttribute('role', 'combobox');
+        input.setAttribute('aria-autocomplete', 'list');
+        input.setAttribute('aria-controls', idOf(list, 'wu-listbox'));
+        input.autocomplete = 'off';
+        list.setAttribute('role', 'listbox');
+        for (const o of options) {
+            o.setAttribute('role', 'option');
+            idOf(o, 'wu-option');
+        }
+
+        const shown = () =>
+            options.filter(
+                (o) => !o.hidden && o.getAttribute('aria-disabled') !== 'true'
+            );
+        const setActive = (o) => {
+            active?.removeAttribute('aria-selected');
+            active = o;
+            if (o) {
+                o.setAttribute('aria-selected', 'true');
+                input.setAttribute('aria-activedescendant', o.id);
+                o.scrollIntoView({ block: 'nearest' });
+            } else input.removeAttribute('aria-activedescendant');
+        };
+        const open = (on) => {
+            const count = shown().length;
+            list.hidden = !on || !count;
+            if (empty) empty.hidden = !on || count > 0;
+            input.setAttribute('aria-expanded', !list.hidden);
+            setActive(null);
+        };
+        const filter = () => {
+            const q = input.value.trim().toLowerCase();
+            for (const o of options)
+                o.hidden = !o.textContent.toLowerCase().includes(q);
+            open(true);
+        };
+        const choose = (o) => {
+            input.value = o.textContent.trim();
+            open(false);
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        const move = (step) => {
+            if (list.hidden) filter();
+            const items = shown();
+            if (!items.length) return;
+            const i = items.indexOf(active);
+            const n = items.length;
+            setActive(
+                items[i < 0 ? (step > 0 ? 0 : n - 1) : (i + step + n) % n]
+            );
+        };
+
+        open(false);
+        input.addEventListener('input', filter);
+        input.addEventListener('blur', () => open(false));
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                move(e.key === 'ArrowDown' ? 1 : -1);
+            } else if (e.key === 'Enter' && active) {
+                choose(active);
+            } else if (e.key === 'Escape') {
+                if (list.hidden && (!empty || empty.hidden)) input.value = '';
+                open(false);
+            } else return;
+            e.preventDefault();
+        });
+        // Keep focus in the input while picking with the pointer
+        list.addEventListener('mousedown', (e) => e.preventDefault());
+        list.addEventListener('click', (e) => {
+            const o = e.target.closest('.wu-autocomplete-option');
+            if (o && o.getAttribute('aria-disabled') !== 'true') choose(o);
+        });
+    }
+}
+
+// Tables: data table sorting (sets aria-sort and announces the order), selection column and expandable rows
+
+const statuses = new WeakMap();
+// Polite live region after the table, added once so the first announcement is heard
+const statusOf = (table) => {
+    let status = statuses.get(table);
+    if (!status?.isConnected) {
+        status = document.createElement('div');
+        status.className = 'wu-data-table-status';
+        status.setAttribute('role', 'status');
+        table.after(status);
+        statuses.set(table, status);
+    }
+    return status;
+};
+
+const collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+});
+const valueOf = (row, i) => {
+    const cell = row.cells[i];
+    return cell ? (cell.dataset.sortValue ?? cell.textContent.trim()) : '';
+};
+const numberOf = (v) => {
+    const n = v.replace(/[\s,]/g, '');
+    return n && isFinite(n) ? +n : NaN;
+};
+
+function sortTable(table, th) {
+    const body = table.tBodies[0];
+    if (!body) return;
+    const i = th.cellIndex;
+    const dir = th.getAttribute('aria-sort') === 'ascending' ? -1 : 1;
+    for (const h of th.parentElement.cells)
+        if (h !== th) h.removeAttribute('aria-sort');
+    const order = dir > 0 ? 'ascending' : 'descending';
+    th.setAttribute('aria-sort', order);
+    statusOf(table).textContent =
+        `Sorted by ${th.textContent.trim()}, ${order}`;
+
+    // A detail row moves with the row before it
+    const rows = [...body.rows]
+        .filter((r) => !r.classList.contains('wu-table-detail'))
+        .sort((a, b) => {
+            const x = valueOf(a, i);
+            const y = valueOf(b, i);
+            const d = numberOf(x) - numberOf(y);
+            return dir * (isNaN(d) ? collator.compare(x, y) : d);
+        })
+        .flatMap((r) => {
+            const next = r.nextElementSibling;
+            return next?.classList.contains('wu-table-detail')
+                ? [r, next]
+                : [r];
+        });
+    const update = () => body.append(...rows);
+
+    if (!document.startViewTransition || !animated(table, 'wu-data-table'))
+        return update();
+    table.setAttribute('aria-busy', 'true');
+    document
+        .startViewTransition(update)
+        .finished.finally(() => table.removeAttribute('aria-busy'));
+}
+
+function initDataTable(root = document) {
+    for (const table of fresh(root, '.wu-data-table')) {
+        statusOf(table);
+        table.addEventListener('click', (e) => {
+            const th = e.target.closest('.wu-table-sort')?.closest('th');
+            if (th && th.closest('table') === table && th.closest('thead'))
+                sortTable(table, th);
+        });
+    }
+}
+
+// Selection column: row checkboxes in .wu-table-select cells, select-all in the header
+const tables = new WeakSet();
+const selectBox = '.wu-table-select input[type="checkbox"]';
+const allBoxOf = (table) => table.querySelector(`:scope > thead ${selectBox}`);
+const rowBoxesOf = (table) =>
+    [...table.tBodies]
+        .flatMap((body) => [...body.rows])
+        .map((row) => row.querySelector(`:scope > ${selectBox}`))
+        .filter(Boolean);
+
+// Select-all is checked, mixed or clear; rows of a role="grid" table also get aria-selected
+function syncSelection(table) {
+    const boxes = rowBoxesOf(table);
+    const on = boxes.filter((b) => b.checked).length;
+    const all = allBoxOf(table);
+    if (all) {
+        all.checked = on > 0 && on === boxes.length;
+        all.indeterminate = on > 0 && on < boxes.length;
+    }
+    if (/^(tree)?grid$/.test(table.getAttribute('role') ?? ''))
+        for (const b of boxes)
+            b.closest('tr').setAttribute('aria-selected', b.checked);
+}
+
+// Expandable row: the button's aria-controls row, else the next row, when it is a .wu-table-detail
+function setExpanded(button, open) {
+    const id = button.getAttribute('aria-controls');
+    const row = id
+        ? document.getElementById(id)
+        : button.closest('tr')?.nextElementSibling;
+    if (!row?.classList.contains('wu-table-detail')) return;
+    button.setAttribute('aria-controls', idOf(row, 'wu-detail'));
+    button.setAttribute('aria-expanded', open);
+    row.hidden = !open;
+}
+
+function initTable(root = document) {
+    const found = [...root.querySelectorAll('.wu-table')];
+    if (root.matches?.('.wu-table')) found.unshift(root);
+    for (const table of found) {
+        if (tables.has(table)) continue;
+        tables.add(table);
+        const own = (el) => el?.closest('table') === table;
+        syncSelection(table);
+        for (const b of table.querySelectorAll('.wu-table-expand'))
+            if (own(b))
+                setExpanded(b, b.getAttribute('aria-expanded') === 'true');
+
+        table.addEventListener('change', (e) => {
+            const box = e.target.closest?.(selectBox);
+            if (!own(box)) return;
+            if (box === allBoxOf(table))
+                for (const b of rowBoxesOf(table))
+                    if (!b.disabled) b.checked = box.checked;
+            syncSelection(table);
+        });
+        table.addEventListener('click', (e) => {
+            const b = e.target.closest?.('.wu-table-expand');
+            if (own(b))
+                setExpanded(b, b.getAttribute('aria-expanded') !== 'true');
+        });
+    }
+}
+
+// Input clear button: .wu-input-clear inside .wu-input-affix shows while the field has text, clears it and refocuses
+
+function initInputClear(root = document) {
+    for (const button of fresh(root, '.wu-input-clear')) {
+        const input = button
+            .closest('.wu-input-affix')
+            ?.querySelector('input, textarea');
+        if (!input) continue;
+
+        const sync = () => {
+            button.hidden = !input.value || input.disabled || input.readOnly;
+        };
+        button.addEventListener('click', () => {
+            input.value = '';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+            sync();
+            input.focus();
+        });
+        input.addEventListener('input', sync);
+        input.form?.addEventListener('reset', () => setTimeout(sync));
+        sync();
+    }
+}
+
+// @wovenui/components scripts: finds kit components by class and starts them.
+// init(root) starts components added later; each element starts only once.
+
+function init(root = document) {
+    initTabs(root);
+    initToast(root);
+    initAutocomplete(root);
+    initTable(root);
+    initDataTable(root);
+    initInputClear(root);
+}
+
+
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading')
+        document.addEventListener('DOMContentLoaded', () => init());
+    else init();
+}
+
+export { init, toast, dismiss, sortTable, initTabs, initToast, initAutocomplete, initDataTable, initInputClear, initTable };