/*! Bench UI 1.3.2 — behaviour layer * Generated by build/build.mjs from tokens/ and src/. Do not edit by hand. * Matthew Higgins Design · studio interface system */ (function (global) { 'use strict'; const VERSION = '1.3.2'; const store = { get(key, fallback) { try { const v = global.localStorage.getItem(key); return v === null ? fallback : v; } catch (_) { return fallback; } }, set(key, value) { try { global.localStorage.setItem(key, value); return true; } catch (_) { return false; } }, remove(key) { try { global.localStorage.removeItem(key); } catch (_) { } }, }; const $ = (sel, root) => (root || document).querySelector(sel); const $$ = (sel, root) => Array.prototype.slice.call((root || document).querySelectorAll(sel)); function on(el, type, handler, opts) { el.addEventListener(type, handler, opts); return () => el.removeEventListener(type, handler, opts); } function emit(target, name, detail) { target.dispatchEvent(new CustomEvent(name, { detail: detail, bubbles: true })); } function el(tag, attrs, children) { const node = document.createElement(tag); if (attrs) { for (const key in attrs) { const value = attrs[key]; if (value === null || value === undefined || value === false) continue; if (key === 'class') node.className = value; else if (key === 'text') node.textContent = value; else if (key === 'html') node.innerHTML = value; else if (key.slice(0, 2) === 'on' && typeof value === 'function') node.addEventListener(key.slice(2).toLowerCase(), value); else node.setAttribute(key, value === true ? '' : value); } } if (children) { (Array.isArray(children) ? children : [children]).forEach((c) => { if (c === null || c === undefined) return; node.appendChild(typeof c === 'string' ? document.createTextNode(c) : c); }); } return node; } const clamp = (n, min, max) => Math.min(max, Math.max(min, n)); function debounce(fn, wait) { let t; return function () { const args = arguments, self = this; clearTimeout(t); t = setTimeout(() => fn.apply(self, args), wait || 0); }; } const FOCUSABLE = [ 'a[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])', 'select:not([disabled])', 'textarea:not([disabled])', 'summary', '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]', ].join(','); function focusables(root) { return $$(FOCUSABLE, root).filter((node) => { if (node.hasAttribute('inert') || node.closest('[inert]')) return false; if (node.getAttribute('aria-hidden') === 'true') return false; return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length); }); } const mounts = []; function register(name, fn) { mounts.push({ name: name, fn: fn }); } function mount(root) { const scope = root || document; mounts.forEach((m) => { try { m.fn(scope); } catch (err) { console.error('[BenchUI] mount "' + m.name + '" failed:', err); } }); emit(scope === document ? document.documentElement : scope, 'bu:mounted', { root: scope }); return scope; } function once(node, flag) { const key = 'buMount' + flag; if (node.dataset[key] === '1') return false; node.dataset[key] = '1'; return true; } const prefersReducedMotion = () => !!(global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches); global.BenchUI = { version: VERSION, store: store, $: $, $$: $$, on: on, el: el, emit: emit, clamp: clamp, debounce: debounce, focusables: focusables, FOCUSABLE: FOCUSABLE, register: register, mount: mount, once: once, prefersReducedMotion: prefersReducedMotion, }; })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; const B = global.BenchUI; const root = document.documentElement; const THEMES = ['light', 'dark', 'auto']; const DENSITIES = ['compact', 'regular', 'touch', 'auto']; const KEY_THEME = 'bu:theme'; const KEY_DENSITY = 'bu:density'; const KEY_ACCENT = 'bu:accent'; const darkQuery = global.matchMedia ? global.matchMedia('(prefers-color-scheme: dark)') : null; const coarseQuery = global.matchMedia ? global.matchMedia('(pointer: coarse)') : null; function getTheme() { const attr = root.getAttribute('data-bu-theme'); if (THEMES.indexOf(attr) !== -1) return attr; const stored = B.store.get(KEY_THEME, null); return THEMES.indexOf(stored) !== -1 ? stored : 'auto'; } function resolveTheme(mode) { const m = mode || getTheme(); if (m === 'auto') return darkQuery && darkQuery.matches ? 'dark' : 'light'; return m; } function withoutTransitions(fn) { const doc = root.ownerDocument; if (!doc || !doc.body) { fn(); return; } root.setAttribute('data-bu-switching', ''); fn(); void root.offsetWidth; if (typeof requestAnimationFrame === 'function') { requestAnimationFrame(() => requestAnimationFrame(() => root.removeAttribute('data-bu-switching'))); } else { root.removeAttribute('data-bu-switching'); } } function setTheme(mode, opts) { const next = THEMES.indexOf(mode) !== -1 ? mode : 'auto'; const options = opts || {}; const target = options.element || root; withoutTransitions(() => target.setAttribute('data-bu-theme', next)); if (target === root && options.persist !== false) B.store.set(KEY_THEME, next); const resolved = resolveTheme(next); if (target === root) { root.style.colorScheme = next === 'auto' ? 'light dark' : next; syncMetaThemeColor(); syncThemeControls(); } B.emit(target === root ? root : target, 'bu:themechange', { theme: next, resolved: resolved }); return next; } function cycleTheme() { const order = ['light', 'dark', 'auto']; const i = order.indexOf(getTheme()); return setTheme(order[(i + 1) % order.length]); } function toggleTheme() { return setTheme(resolveTheme() === 'dark' ? 'light' : 'dark'); } function syncMetaThemeColor() { let meta = document.querySelector('meta[name="theme-color"]:not([media])'); if (!meta) { meta = document.createElement('meta'); meta.setAttribute('name', 'theme-color'); document.head.appendChild(meta); } const surface = getComputedStyle(root).getPropertyValue('--bu-surface').trim(); if (surface) meta.setAttribute('content', surface); } if (darkQuery) { const onSystemChange = () => { if (getTheme() !== 'auto') return; syncMetaThemeColor(); syncThemeControls(); B.emit(root, 'bu:themechange', { theme: 'auto', resolved: resolveTheme('auto') }); }; if (darkQuery.addEventListener) darkQuery.addEventListener('change', onSystemChange); else if (darkQuery.addListener) darkQuery.addListener(onSystemChange); } global.addEventListener('storage', (e) => { if (e.key === KEY_THEME && e.newValue && THEMES.indexOf(e.newValue) !== -1) { setTheme(e.newValue, { persist: false }); } else if (e.key === KEY_DENSITY && e.newValue) { setDensity(e.newValue, { persist: false }); } else if (e.key === KEY_ACCENT && e.newValue) { setAccent(e.newValue, { persist: false }); } }); function getDensity() { const attr = root.getAttribute('data-bu-density'); if (DENSITIES.indexOf(attr) !== -1) return attr; const stored = B.store.get(KEY_DENSITY, null); return DENSITIES.indexOf(stored) !== -1 ? stored : 'regular'; } function resolveDensity(mode) { const m = mode || getDensity(); if (m === 'auto') return coarseQuery && coarseQuery.matches ? 'touch' : 'regular'; return m; } function setDensity(mode, opts) { const next = DENSITIES.indexOf(mode) !== -1 ? mode : 'regular'; const options = opts || {}; const target = options.element || root; withoutTransitions(() => target.setAttribute('data-bu-density', next)); if (target === root && options.persist !== false) B.store.set(KEY_DENSITY, next); B.emit(target, 'bu:densitychange', { density: next, resolved: resolveDensity(next) }); syncThemeControls(); return next; } function getAccent() { return root.getAttribute('data-bu-accent') || B.store.get(KEY_ACCENT, 'blue'); } function setAccent(name, opts) { const options = opts || {}; const target = options.element || root; target.setAttribute('data-bu-accent', name); if (target === root && options.persist !== false) B.store.set(KEY_ACCENT, name); B.emit(target, 'bu:accentchange', { accent: name }); syncThemeControls(); return name; } function setCustomAccent(stops, opts) { const target = (opts && opts.element) || root; const s = typeof stops === 'string' ? { web: stops } : (stops || {}); const base = s.web || s.vivid || s.bright; if (!base) throw new Error('setCustomAccent needs at least a web/vivid colour'); target.setAttribute('data-bu-accent', 'custom'); target.style.setProperty('--bu-ramp-vivid', s.vivid || base); target.style.setProperty('--bu-ramp-web', s.web || base); target.style.setProperty('--bu-ramp-ink', s.ink || 'color-mix(in srgb, ' + base + ' 82%, #000)'); target.style.setProperty('--bu-ramp-bright', s.bright || 'color-mix(in srgb, ' + base + ' 84%, #fff)'); target.style.setProperty('--bu-ramp-soft', s.soft || 'color-mix(in srgb, ' + base + ' 62%, #fff)'); B.emit(target, 'bu:accentchange', { accent: 'custom' }); } function syncThemeControls() { const theme = getTheme(); const density = getDensity(); const accent = getAccent(); B.$$('[data-bu-theme-set]').forEach((node) => { const on = node.getAttribute('data-bu-theme-set') === theme; if (node.hasAttribute('aria-checked') || node.getAttribute('role') === 'radio') node.setAttribute('aria-checked', String(on)); else node.setAttribute('aria-pressed', String(on)); node.classList.toggle('bu-is-active', on); }); B.$$('[data-bu-density-set]').forEach((node) => { const on = node.getAttribute('data-bu-density-set') === density; node.setAttribute('aria-checked', String(on)); node.classList.toggle('bu-is-active', on); }); B.$$('[data-bu-accent-set]').forEach((node) => { const on = node.getAttribute('data-bu-accent-set') === accent; node.setAttribute('aria-checked', String(on)); node.classList.toggle('bu-is-active', on); }); B.$$('[data-bu-theme-label]').forEach((node) => { node.textContent = theme === 'auto' ? 'Auto (' + resolveTheme('auto') + ')' : theme.charAt(0).toUpperCase() + theme.slice(1); }); } B.register('theme', function (scope) { B.$$('[data-bu-theme-set]', scope).forEach((node) => { if (!B.once(node, 'ThemeSet')) return; node.addEventListener('click', () => setTheme(node.getAttribute('data-bu-theme-set'))); }); B.$$('[data-bu-theme-toggle]', scope).forEach((node) => { if (!B.once(node, 'ThemeToggle')) return; node.addEventListener('click', () => (node.dataset.buThemeToggle === 'flip' ? toggleTheme() : cycleTheme())); }); B.$$('[data-bu-density-set]', scope).forEach((node) => { if (!B.once(node, 'DensitySet')) return; node.addEventListener('click', () => setDensity(node.getAttribute('data-bu-density-set'))); }); B.$$('[data-bu-accent-set]', scope).forEach((node) => { if (!B.once(node, 'AccentSet')) return; node.addEventListener('click', () => setAccent(node.getAttribute('data-bu-accent-set'))); }); syncThemeControls(); }); function boot() { if (!root.hasAttribute('data-bu-theme')) setTheme(getTheme(), { persist: false }); else syncMetaThemeColor(); if (!root.hasAttribute('data-bu-density')) { const stored = B.store.get(KEY_DENSITY, null); if (stored) setDensity(stored, { persist: false }); } if (!root.hasAttribute('data-bu-accent')) { const stored = B.store.get(KEY_ACCENT, null); if (stored) setAccent(stored, { persist: false }); } } B.theme = { set: setTheme, get: getTheme, resolved: resolveTheme, cycle: cycleTheme, toggle: toggleTheme, options: THEMES.slice(), sync: syncThemeControls, }; B.density = { set: setDensity, get: getDensity, resolved: resolveDensity, options: DENSITIES.slice() }; B.accent = { set: setAccent, get: getAccent, custom: setCustomAccent }; B.boot = boot; boot(); })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; const B = global.BenchUI; function initSegmented(scope) { B.$$('[data-bu-segmented]', scope).forEach((group) => { if (!B.once(group, 'Segmented')) return; if (!group.getAttribute('role')) group.setAttribute('role', 'radiogroup'); const segments = () => B.$$('[role="radio"], .bu-segment', group).filter((s) => !s.disabled); const select = (segment, focus) => { segments().forEach((s) => { const on = s === segment; s.setAttribute('aria-checked', String(on)); s.tabIndex = on ? 0 : -1; s.classList.toggle('bu-is-active', on); }); if (focus) segment.focus(); B.emit(group, 'bu:change', { value: segment.getAttribute('data-value') || segment.value || segment.textContent.trim(), segment: segment, name: group.getAttribute('data-bu-segmented') || undefined, }); }; const normalise = () => { const list = segments(); list.forEach((segment) => { if (!segment.getAttribute('role')) segment.setAttribute('role', 'radio'); if (!segment.hasAttribute('aria-checked')) { segment.setAttribute('aria-checked', String(segment.classList.contains('bu-is-active'))); } segment.tabIndex = segment.getAttribute('aria-checked') === 'true' ? 0 : -1; }); if (list.length && !list.some((s) => s.getAttribute('aria-checked') === 'true')) { list[0].setAttribute('aria-checked', 'true'); list[0].tabIndex = 0; list[0].classList.add('bu-is-active'); } }; normalise(); group.addEventListener('click', (e) => { const segment = e.target.closest('.bu-segment, [role="radio"]'); if (!segment || !group.contains(segment) || segment.disabled) return; select(segment, false); }); if (global.MutationObserver) { new MutationObserver(normalise).observe(group, { childList: true }); } group.addEventListener('keydown', (e) => { const list = segments(); const i = list.indexOf(document.activeElement); if (i === -1) return; const rtl = getComputedStyle(group).direction === 'rtl'; let next = null; if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = list[(i + (rtl && e.key === 'ArrowRight' ? -1 : 1) + list.length) % list.length]; else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = list[(i + (rtl && e.key === 'ArrowLeft' ? 1 : -1) + list.length) % list.length]; else if (e.key === 'Home') next = list[0]; else if (e.key === 'End') next = list[list.length - 1]; if (!next) return; e.preventDefault(); select(next, true); }); }); } function initGroups(scope) { B.$$('[data-bu-group]', scope).forEach((header) => { if (!B.once(header, 'Group')) return; const id = header.getAttribute('data-bu-group'); const body = document.getElementById(id) || header.parentElement.querySelector('.bu-group__body'); if (!body) return; if (header.tagName !== 'BUTTON' && !header.getAttribute('role')) { header.setAttribute('role', 'button'); if (!header.hasAttribute('tabindex')) header.tabIndex = 0; } if (body.id) header.setAttribute('aria-controls', body.id); const persistKey = header.hasAttribute('data-bu-remember') ? 'bu:group:' + id : null; const stored = persistKey ? B.store.get(persistKey, null) : null; const startOpen = stored !== null ? stored === '1' : header.getAttribute('aria-expanded') !== 'false'; const apply = (open, silent) => { header.setAttribute('aria-expanded', String(open)); body.hidden = !open; if (persistKey) B.store.set(persistKey, open ? '1' : '0'); if (!silent) B.emit(header, 'bu:toggle', { open: open, id: id }); }; apply(startOpen, true); const toggle = () => apply(header.getAttribute('aria-expanded') !== 'true'); header.addEventListener('click', toggle); header.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') { e.preventDefault(); toggle(); } }); }); } function revealGroup(target) { const node = typeof target === 'string' ? document.getElementById(target) : target; if (!node) return null; let body = node.closest('.bu-group__body'); while (body) { const header = body.parentElement && body.parentElement.querySelector('[data-bu-group]'); if (header && header.getAttribute('aria-expanded') !== 'true') header.click(); body = body.parentElement ? body.parentElement.closest('.bu-group__body') : null; } node.scrollIntoView({ block: 'nearest', behavior: B.prefersReducedMotion() ? 'auto' : 'smooth' }); return node; } function initTabs(scope) { B.$$('[data-bu-tabs]', scope).forEach((list) => { if (!B.once(list, 'Tabs')) return; if (!list.getAttribute('role')) list.setAttribute('role', 'tablist'); const tabs = B.$$('[role="tab"], .bu-tab', list).filter((t) => !t.disabled); const panelFor = (tab) => { const id = tab.getAttribute('aria-controls') || tab.getAttribute('data-bu-tab'); return id ? document.getElementById(id) : null; }; const select = (tab, focus) => { tabs.forEach((t) => { const on = t === tab; t.setAttribute('aria-selected', String(on)); t.tabIndex = on ? 0 : -1; const panel = panelFor(t); if (panel) { panel.hidden = !on; if (!panel.getAttribute('role')) panel.setAttribute('role', 'tabpanel'); if (!panel.hasAttribute('tabindex')) panel.tabIndex = 0; } }); if (focus) tab.focus(); B.emit(list, 'bu:tabchange', { tab: tab, value: tab.getAttribute('data-value') || tab.id }); }; tabs.forEach((tab) => { if (!tab.getAttribute('role')) tab.setAttribute('role', 'tab'); tab.addEventListener('click', () => select(tab, false)); }); const initial = tabs.filter((t) => t.getAttribute('aria-selected') === 'true')[0] || tabs[0]; if (initial) select(initial, false); list.addEventListener('keydown', (e) => { const i = tabs.indexOf(document.activeElement); if (i === -1) return; let next = null; if (e.key === 'ArrowRight') next = tabs[(i + 1) % tabs.length]; else if (e.key === 'ArrowLeft') next = tabs[(i - 1 + tabs.length) % tabs.length]; else if (e.key === 'Home') next = tabs[0]; else if (e.key === 'End') next = tabs[tabs.length - 1]; if (!next) return; e.preventDefault(); select(next, true); }); }); } function fillSlider(slider) { const min = parseFloat(slider.min || '0'); const max = parseFloat(slider.max || '100'); const value = parseFloat(slider.value || '0'); const pct = max === min ? 0 : ((value - min) / (max - min)) * 100; slider.style.setProperty('--bu-slider-pct', B.clamp(pct, 0, 100).toFixed(3) + '%'); } function initSliders(scope) { B.$$('input[type="range"].bu-slider', scope).forEach((slider) => { if (!B.once(slider, 'Slider')) return; fillSlider(slider); slider.addEventListener('input', () => fillSlider(slider)); }); B.$$('[data-bu-bind]', scope).forEach((container) => { if (!B.once(container, 'Bind')) return; const name = container.getAttribute('data-bu-bind'); const slider = container.querySelector('input[type="range"]'); const number = container.querySelector('input[type="number"]'); if (!slider || !number) return; const clampToStep = (raw) => { const min = parseFloat(slider.min || number.min || '0'); const max = parseFloat(slider.max || number.max || '100'); const step = parseFloat(slider.step || number.step || '1') || 1; let v = B.clamp(isNaN(raw) ? min : raw, min, max); v = Math.round((v - min) / step) * step + min; const decimals = (String(step).split('.')[1] || '').length; return parseFloat(v.toFixed(decimals)); }; const push = (value, source) => { const v = clampToStep(value); slider.value = String(v); if (document.activeElement !== number || source !== 'number') number.value = String(v); fillSlider(slider); B.emit(container, 'bu:input', { name: name, value: v, source: source }); }; slider.addEventListener('input', () => push(parseFloat(slider.value), 'slider')); number.addEventListener('input', () => { const raw = parseFloat(number.value); if (isNaN(raw)) return; push(raw, 'number'); }); number.addEventListener('change', () => push(parseFloat(number.value), 'number')); fillSlider(slider); }); } function initSteppers(scope) { B.$$('[data-bu-stepper]', scope).forEach((stepper) => { if (!B.once(stepper, 'Stepper')) return; const input = stepper.querySelector('input'); if (!input) return; const step = parseFloat(input.step || '1') || 1; const min = input.min === '' ? -Infinity : parseFloat(input.min); const max = input.max === '' ? Infinity : parseFloat(input.max); const nudge = (direction) => { const current = parseFloat(input.value); const base = isNaN(current) ? (isFinite(min) ? min : 0) : current; const next = B.clamp(base + direction * step, min, max); const decimals = (String(step).split('.')[1] || '').length; input.value = String(parseFloat(next.toFixed(decimals))); input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); sync(); }; const sync = () => { const v = parseFloat(input.value); B.$$('[data-bu-step]', stepper).forEach((btn) => { const dir = parseFloat(btn.getAttribute('data-bu-step')); btn.disabled = dir < 0 ? v <= min : v >= max; }); }; B.$$('[data-bu-step]', stepper).forEach((btn) => { if (!btn.getAttribute('type')) btn.setAttribute('type', 'button'); btn.addEventListener('click', () => nudge(parseFloat(btn.getAttribute('data-bu-step')))); }); input.addEventListener('input', sync); sync(); }); } function initCopy(scope) { B.$$('[data-bu-copy]', scope).forEach((btn) => { if (!B.once(btn, 'Copy')) return; btn.addEventListener('click', async () => { const raw = btn.getAttribute('data-bu-copy'); const source = raw && raw.charAt(0) === '#' ? document.querySelector(raw) : null; const text = source ? (source.value !== undefined ? source.value : source.textContent) : raw; try { await navigator.clipboard.writeText(text); if (B.toast) B.toast('Copied', { variant: 'ok', duration: 1400 }); } catch (_) { if (B.toast) B.toast('Could not copy — the browser blocked clipboard access', { variant: 'error' }); } }); }); } function initCounters(scope) { B.$$('[data-bu-counter]', scope).forEach((input) => { if (!B.once(input, 'Counter')) return; const out = document.getElementById(input.getAttribute('data-bu-counter')); if (!out) return; const max = parseInt(input.getAttribute('maxlength') || '0', 10); const sync = () => { const n = input.value.length; out.textContent = max ? n + ' / ' + max : String(n); out.classList.toggle('bu-text-warn', !!max && n >= max * 0.9 && n < max); out.classList.toggle('bu-text-error', !!max && n >= max); }; input.addEventListener('input', sync); sync(); }); } function initAutogrow(scope) { if (CSS.supports && CSS.supports('field-sizing', 'content')) return; B.$$('textarea[data-bu-autogrow]', scope).forEach((ta) => { if (!B.once(ta, 'Autogrow')) return; const grow = () => { ta.style.height = 'auto'; ta.style.height = ta.scrollHeight + 'px'; }; ta.addEventListener('input', grow); grow(); }); } function initMenus(scope) { B.$$('.bu-menu', scope).forEach((menu) => { if (!B.once(menu, 'Menu')) return; if (!menu.getAttribute('role') && !menu.closest('[role="menu"]')) menu.setAttribute('role', 'menu'); const items = () => B.$$('.bu-menu__item', menu); items().forEach((item) => { if (!item.getAttribute('role')) item.setAttribute('role', 'menuitem'); item.addEventListener('focus', () => { items().forEach((it) => it.removeAttribute('data-active')); item.setAttribute('data-active', ''); }); }); const enabled = () => items().filter((it) => it.getAttribute('aria-disabled') !== 'true' && !it.disabled); const move = (item) => { if (!item) return; items().forEach((it) => { it.tabIndex = it === item ? 0 : -1; }); item.focus(); }; items().forEach((it) => { it.tabIndex = -1; }); const start = items().find((it) => it.getAttribute('aria-checked') === 'true') || enabled()[0]; if (start) start.tabIndex = 0; let typed = ''; let typedTimer = null; menu.addEventListener('keydown', (e) => { const list = enabled(); if (!list.length) return; const i = list.indexOf(document.activeElement); if (e.key === 'ArrowDown') { e.preventDefault(); move(i === -1 ? list[0] : list[(i + 1) % list.length]); return; } if (e.key === 'ArrowUp') { e.preventDefault(); move(i === -1 ? list[list.length - 1] : list[(i - 1 + list.length) % list.length]); return; } if (e.key === 'Home') { e.preventDefault(); move(list[0]); return; } if (e.key === 'End') { e.preventDefault(); move(list[list.length - 1]); return; } if (e.key === 'Tab') { if (B.popover) B.popover.hide(); return; } if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) { clearTimeout(typedTimer); typed += e.key.toLowerCase(); typedTimer = setTimeout(() => { typed = ''; }, 600); const from = i === -1 ? 0 : i + 1; const ordered = list.slice(from).concat(list.slice(0, from)); const match = ordered.find((it) => it.textContent.trim().toLowerCase().indexOf(typed) === 0); if (match) { e.preventDefault(); move(match); } } }); menu.addEventListener('click', (e) => { const item = e.target.closest('.bu-menu__item'); if (item && item.getAttribute('aria-disabled') === 'true') { e.preventDefault(); e.stopPropagation(); } }, true); }); } function initSplit(scope) { B.$$('[data-bu-split]', scope).forEach((split) => { if (!B.once(split, 'Split')) return; const handle = split.querySelector('.bu-split__handle'); const first = split.querySelector('.bu-split__pane'); if (!handle || !first) return; const vertical = split.classList.contains('bu-split--vertical'); const rectSide = vertical ? 'height' : 'width'; const clientAxis = vertical ? 'clientY' : 'clientX'; handle.setAttribute('role', 'separator'); handle.setAttribute('aria-orientation', vertical ? 'horizontal' : 'vertical'); if (!handle.hasAttribute('tabindex')) handle.tabIndex = 0; handle.setAttribute('aria-valuemin', '0'); handle.setAttribute('aria-valuemax', '100'); const min = parseFloat(split.getAttribute('data-bu-split-min') || '120'); const persistKey = split.hasAttribute('data-bu-remember') ? 'bu:split:' + (split.id || split.getAttribute('data-bu-split') || 'default') : null; const defaultSize = parseFloat(split.getAttribute('data-bu-split-default')) || first.getBoundingClientRect()[rectSide]; const extent = () => split.getBoundingClientRect()[rectSide]; const maxFor = () => { const cap = parseFloat(split.getAttribute('data-bu-split-max')); return isNaN(cap) ? Math.max(min, extent() - min - handle.getBoundingClientRect()[rectSide]) : cap; }; const apply = (size) => { const bounded = Math.round(B.clamp(size, min, maxFor())); first.style.flex = '0 0 ' + bounded + 'px'; const pct = extent() ? B.clamp((bounded / extent()) * 100, 0, 100) : 0; handle.setAttribute('aria-valuenow', String(Math.round(pct))); B.emit(split, 'bu:input', { name: 'split', value: bounded }); return bounded; }; const persist = (size) => { if (persistKey) B.store.set(persistKey, String(size)); }; const stored = persistKey ? parseFloat(B.store.get(persistKey, '')) : NaN; apply(isNaN(stored) ? defaultSize : stored); let dragging = false; let startPos = 0; let startSize = 0; handle.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse' && e.button !== 0) return; dragging = true; startPos = e[clientAxis]; startSize = first.getBoundingClientRect()[rectSide]; handle.setAttribute('data-dragging', ''); handle.setPointerCapture(e.pointerId); document.body.style.cursor = vertical ? 'row-resize' : 'col-resize'; document.body.style.userSelect = 'none'; e.preventDefault(); }); handle.addEventListener('pointermove', (e) => { if (!dragging) return; apply(startSize + (e[clientAxis] - startPos)); }); const endDrag = () => { if (!dragging) return; dragging = false; handle.removeAttribute('data-dragging'); document.body.style.cursor = ''; document.body.style.userSelect = ''; persist(first.getBoundingClientRect()[rectSide]); }; handle.addEventListener('pointerup', endDrag); handle.addEventListener('pointercancel', endDrag); handle.addEventListener('keydown', (e) => { const step = 16; const growKey = vertical ? 'ArrowDown' : 'ArrowRight'; const shrinkKey = vertical ? 'ArrowUp' : 'ArrowLeft'; const current = first.getBoundingClientRect()[rectSide]; if (e.key === growKey) { e.preventDefault(); persist(apply(current + step)); } else if (e.key === shrinkKey) { e.preventDefault(); persist(apply(current - step)); } else if (e.key === 'Home') { e.preventDefault(); persist(apply(min)); } else if (e.key === 'End') { e.preventDefault(); persist(apply(maxFor())); } else if (e.key === 'Enter') { e.preventDefault(); persist(apply(defaultSize)); } }); handle.addEventListener('dblclick', () => persist(apply(defaultSize))); }); } function initGrid(scope) { B.$$('.bu-table[data-bu-grid]', scope).forEach((table) => { if (!B.once(table, 'Grid')) return; if (!table.getAttribute('role')) table.setAttribute('role', 'grid'); const rows = () => (table.tBodies[0] ? B.$$('tr', table.tBodies[0]) : []); let anchor = 0; const selectedRows = () => rows().filter((r) => r.getAttribute('aria-selected') === 'true'); const announce = () => B.emit(table, 'bu:selectionchange', { rows: selectedRows() }); const setSelection = (indices) => { rows().forEach((r, idx) => r.setAttribute('aria-selected', indices.has(idx) ? 'true' : 'false')); announce(); }; const selectOnly = (idx) => { anchor = idx; setSelection(new Set([idx])); }; const toggleOne = (idx) => { const now = new Set(); rows().forEach((r, i) => { if (r.getAttribute('aria-selected') === 'true') now.add(i); }); if (now.has(idx)) now.delete(idx); else now.add(idx); anchor = idx; setSelection(now); }; const selectRange = (from, to) => { const a = Math.min(from, to), b = Math.max(from, to); const indices = new Set(); for (let k = a; k <= b; k++) indices.add(k); setSelection(indices); }; const moveFocus = (idx, extend) => { const list = rows(); const bounded = B.clamp(idx, 0, list.length - 1); list.forEach((r, i) => { r.tabIndex = i === bounded ? 0 : -1; }); list[bounded].focus(); if (extend) selectRange(anchor, bounded); else anchor = bounded; return bounded; }; rows().forEach((row, idx) => { if (!row.hasAttribute('aria-selected')) row.setAttribute('aria-selected', 'false'); row.tabIndex = idx === 0 ? 0 : -1; }); table.addEventListener('click', (e) => { const row = e.target.closest('tr'); if (!row || !table.tBodies[0] || row.parentElement !== table.tBodies[0]) return; const idx = rows().indexOf(row); if (idx === -1) return; if (e.shiftKey) selectRange(anchor, idx); else if (e.metaKey || e.ctrlKey) toggleOne(idx); else selectOnly(idx); moveFocus(idx, false); }); table.addEventListener('keydown', (e) => { const list = rows(); const current = list.indexOf(document.activeElement); if (current === -1) return; const wrap = table.closest('.bu-table-wrap'); const rowSpan = list[1] ? list[1].getBoundingClientRect().top - list[0].getBoundingClientRect().top : list[0].getBoundingClientRect().height; const viewport = wrap && rowSpan ? Math.max(1, Math.floor(wrap.clientHeight / rowSpan)) : 10; if (e.key === 'ArrowDown') { e.preventDefault(); moveFocus(current + 1, e.shiftKey); return; } if (e.key === 'ArrowUp') { e.preventDefault(); moveFocus(current - 1, e.shiftKey); return; } if (e.key === 'Home') { e.preventDefault(); moveFocus(0, e.shiftKey); return; } if (e.key === 'End') { e.preventDefault(); moveFocus(list.length - 1, e.shiftKey); return; } if (e.key === 'PageDown') { e.preventDefault(); moveFocus(current + viewport, e.shiftKey); return; } if (e.key === 'PageUp') { e.preventDefault(); moveFocus(current - viewport, e.shiftKey); return; } if (e.key === 'Enter') { e.preventDefault(); B.emit(list[current], 'bu:rowactivate', { row: list[current] }); return; } if (e.key === ' ' || e.key === 'Spacebar') { e.preventDefault(); toggleOne(current); return; } }); }); } let comboboxUid = 0; function initCombobox(scope) { B.$$('[data-bu-combobox]', scope).forEach((root) => { if (!B.once(root, 'Combobox')) return; const input = root.querySelector('.bu-combobox__input'); const list = root.querySelector('.bu-combobox__list'); if (!input || !list) return; const uid = 'bu-combobox-' + (++comboboxUid); if (!list.id) list.id = uid + '-list'; if (!list.getAttribute('role')) list.setAttribute('role', 'listbox'); input.setAttribute('role', 'combobox'); input.setAttribute('aria-autocomplete', 'list'); input.setAttribute('aria-controls', list.id); input.setAttribute('aria-expanded', 'false'); if (!input.hasAttribute('autocomplete')) input.setAttribute('autocomplete', 'off'); list.hidden = true; const options = () => B.$$('.bu-combobox__option', list); options().forEach((opt, idx) => { if (!opt.id) opt.id = uid + '-opt-' + idx; if (!opt.getAttribute('role')) opt.setAttribute('role', 'option'); if (!opt.hasAttribute('aria-selected')) opt.setAttribute('aria-selected', 'false'); }); const visible = () => options().filter((o) => !o.hidden); const isOpen = () => !list.hidden; const setActive = (opt) => { options().forEach((o) => o.removeAttribute('data-active')); if (opt) { opt.setAttribute('data-active', ''); input.setAttribute('aria-activedescendant', opt.id); if (opt.scrollIntoView) opt.scrollIntoView({ block: 'nearest' }); } else { input.removeAttribute('aria-activedescendant'); } }; const open = () => { if (isOpen()) return; list.hidden = false; input.setAttribute('aria-expanded', 'true'); if (!visible().some((o) => o.hasAttribute('data-active'))) setActive(visible()[0]); }; const close = () => { if (!isOpen()) return; list.hidden = true; input.setAttribute('aria-expanded', 'false'); setActive(null); }; const filter = () => { const q = input.value.trim().toLowerCase(); options().forEach((opt) => { const text = (opt.getAttribute('data-filter') || opt.textContent).trim().toLowerCase(); opt.hidden = q.length > 0 && text.indexOf(q) === -1; }); }; const choose = (opt) => { if (!opt) return; options().forEach((o) => o.setAttribute('aria-selected', String(o === opt))); const value = opt.getAttribute('data-value') || opt.textContent.trim(); input.value = value; close(); B.emit(root, 'bu:change', { value: value, option: opt }); }; options().forEach((opt) => { opt.addEventListener('pointerdown', (e) => { e.preventDefault(); choose(opt); }); opt.addEventListener('pointerenter', () => setActive(opt)); }); input.addEventListener('input', () => { filter(); open(); setActive(visible()[0] || null); B.emit(root, 'bu:filter', { value: input.value }); }); input.addEventListener('keydown', (e) => { const items = visible(); const current = items.findIndex((o) => o.hasAttribute('data-active')); if (e.key === 'ArrowDown') { e.preventDefault(); if (!isOpen()) { open(); return; } setActive(items[current === -1 ? 0 : (current + 1) % items.length]); return; } if (e.key === 'ArrowUp') { e.preventDefault(); if (!isOpen()) { open(); return; } setActive(items[current === -1 ? items.length - 1 : (current - 1 + items.length) % items.length]); return; } if (e.key === 'Enter') { if (isOpen() && items[current]) { e.preventDefault(); choose(items[current]); } return; } if (e.key === 'Escape') { if (isOpen()) { e.preventDefault(); close(); } else if (input.value) { e.preventDefault(); input.value = ''; filter(); B.emit(root, 'bu:filter', { value: '' }); } return; } if (e.key === 'Tab') close(); }); input.addEventListener('blur', () => { setTimeout(close, 0); }); filter(); }); } const SCROLL_FADE_MS = 900; function initScrollFade(scope) { B.$$('.bu-scroll--overlay', scope).forEach((region) => { if (!B.once(region, 'ScrollFade')) return; let timer = null; region.addEventListener('scroll', () => { region.setAttribute('data-bu-scrolling', ''); if (timer) clearTimeout(timer); timer = setTimeout(() => { region.removeAttribute('data-bu-scrolling'); timer = null; }, SCROLL_FADE_MS); }, { passive: true }); }); } B.register('controls', function (scope) { initSegmented(scope); initGroups(scope); initTabs(scope); initSliders(scope); initSteppers(scope); initCopy(scope); initCounters(scope); initAutogrow(scope); initMenus(scope); initSplit(scope); initGrid(scope); initCombobox(scope); initScrollFade(scope); }); B.revealGroup = revealGroup; B.fillSlider = fillSlider; })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; const B = global.BenchUI; let lastFocused = null; function openDialog(target, opts) { const dialog = typeof target === 'string' ? document.querySelector(target) : target; if (!dialog) return null; const options = opts || {}; lastFocused = document.activeElement; if (typeof dialog.showModal === 'function' && options.modal !== false) dialog.showModal(); else { dialog.setAttribute('open', ''); trapFocus(dialog); } const preferred = dialog.querySelector('[data-bu-autofocus]') || B.focusables(dialog).filter((n) => !n.hasAttribute('data-bu-close') && !n.classList.contains('bu-btn--destructive'))[0] || B.focusables(dialog)[0]; if (preferred) setTimeout(() => preferred.focus(), 0); B.emit(dialog, 'bu:open', {}); return dialog; } function closeDialog(target, returnValue) { const dialog = typeof target === 'string' ? document.querySelector(target) : target; if (!dialog) return; if (typeof dialog.close === 'function' && dialog.open) dialog.close(returnValue); else dialog.removeAttribute('open'); releaseFocus(dialog); B.emit(dialog, 'bu:close', { returnValue: returnValue }); if (lastFocused && document.contains(lastFocused)) lastFocused.focus(); lastFocused = null; } const traps = new WeakMap(); function trapFocus(container) { const handler = (e) => { if (e.key !== 'Tab') return; const list = B.focusables(container); if (!list.length) return; const first = list[0], last = list[list.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; const esc = (e) => { if (e.key === 'Escape') closeDialog(container); }; document.addEventListener('keydown', handler, true); document.addEventListener('keydown', esc, true); traps.set(container, () => { document.removeEventListener('keydown', handler, true); document.removeEventListener('keydown', esc, true); }); } function releaseFocus(container) { const release = traps.get(container); if (release) { release(); traps.delete(container); } } function confirmDialog(opts) { const o = opts || {}; return new Promise((resolve) => { const confirmBtn = B.el('button', { class: 'bu-btn' + (o.destructive ? ' bu-btn--destructive' : ''), type: 'button', text: o.confirmLabel || (o.destructive ? 'Delete' : 'Continue'), }); const cancelBtn = B.el('button', { class: 'bu-btn bu-btn--secondary', type: 'button', 'data-bu-close': '', text: o.cancelLabel || 'Cancel', }); const dialog = B.el('dialog', { class: 'bu-dialog bu-dialog--alert' + (o.destructive ? ' bu-dialog--destructive' : ''), 'aria-labelledby': 'bu-confirm-title', }, [ B.el('div', { class: 'bu-dialog__head' }, [ B.el('h2', { class: 'bu-dialog__title', id: 'bu-confirm-title', text: o.title || 'Are you sure?' }), o.body ? B.el('p', { class: 'bu-dialog__subtitle', text: o.body }) : null, ]), B.el('div', { class: 'bu-dialog__foot' }, [cancelBtn, confirmBtn]), ]); let answer = false; let settled = false; let watcher = null; const settle = () => { if (settled) return; settled = true; if (watcher) { watcher.disconnect(); watcher = null; } dialog.remove(); resolve(answer); }; confirmBtn.addEventListener('click', () => { answer = true; closeDialog(dialog); settle(); }); cancelBtn.addEventListener('click', () => { closeDialog(dialog); settle(); }); dialog.addEventListener('close', settle); dialog.addEventListener('cancel', settle); document.body.appendChild(dialog); openDialog(dialog); if (typeof MutationObserver === 'function') { watcher = new MutationObserver(() => { if (!dialog.open) settle(); }); watcher.observe(dialog, { attributes: true, attributeFilter: ['open'] }); } }); } function positionPopover(popover, anchor, placement) { const gap = 6; const a = anchor.getBoundingClientRect(); popover.style.visibility = 'hidden'; popover.style.display = 'block'; const p = popover.getBoundingClientRect(); const vw = global.innerWidth, vh = global.innerHeight; let place = placement || 'bottom-start'; if (place.indexOf('bottom') === 0 && a.bottom + gap + p.height > vh && a.top - gap - p.height > 0) { place = place.replace('bottom', 'top'); } else if (place.indexOf('top') === 0 && a.top - gap - p.height < 0 && a.bottom + gap + p.height < vh) { place = place.replace('top', 'bottom'); } const vertical = place.indexOf('top') === 0 ? a.top - p.height - gap : a.bottom + gap; let horizontal; if (place.indexOf('-end') !== -1) horizontal = a.right - p.width; else if (place.indexOf('-center') !== -1) horizontal = a.left + (a.width - p.width) / 2; else horizontal = a.left; horizontal = B.clamp(horizontal, gap, Math.max(gap, vw - p.width - gap)); popover.style.position = 'fixed'; popover.style.insetInlineStart = 'auto'; popover.style.left = Math.round(horizontal) + 'px'; popover.style.top = Math.round(B.clamp(vertical, gap, Math.max(gap, vh - p.height - gap))) + 'px'; popover.style.visibility = ''; popover.setAttribute('data-placement', place); } let openPopover = null; function showPopover(popover, anchor, placement) { hidePopover(); popover.setAttribute('data-open', ''); positionPopover(popover, anchor, placement); anchor.setAttribute('aria-expanded', 'true'); openPopover = { popover: popover, anchor: anchor, placement: placement }; const first = B.focusables(popover)[0]; if (first) setTimeout(() => first.focus(), 0); B.emit(popover, 'bu:open', {}); } function hidePopover(opts) { if (!openPopover) return; const { popover, anchor } = openPopover; const options = opts || {}; const stranded = popover.contains(document.activeElement); popover.removeAttribute('data-open'); popover.style.display = ''; anchor.setAttribute('aria-expanded', 'false'); openPopover = null; B.emit(popover, 'bu:close', {}); if (stranded && options.returnFocus !== false) anchor.focus(); } document.addEventListener('pointerdown', (e) => { if (!openPopover) return; if (openPopover.popover.contains(e.target) || openPopover.anchor.contains(e.target)) return; const targetTakesFocus = !!e.target.closest(B.FOCUSABLE); hidePopover({ returnFocus: !targetTakesFocus }); }); document.addEventListener('keydown', (e) => { if (!openPopover) return; if (e.key === 'Escape') { const a = openPopover.anchor; hidePopover(); a.focus(); } }); global.addEventListener('resize', () => { if (openPopover) positionPopover(openPopover.popover, openPopover.anchor, openPopover.placement); }); let scrollFrame = null; global.addEventListener('scroll', () => { if (!openPopover || scrollFrame) return; scrollFrame = global.requestAnimationFrame(() => { scrollFrame = null; if (openPopover) positionPopover(openPopover.popover, openPopover.anchor, openPopover.placement); }); }, true); function toggleDrawer(target, open) { const drawer = typeof target === 'string' ? document.querySelector(target) : target; if (!drawer) return; const next = open === undefined ? !drawer.hasAttribute('data-open') : open; const scrim = drawer.getAttribute('data-bu-scrim') ? document.querySelector(drawer.getAttribute('data-bu-scrim')) : null; if (next) { drawer.setAttribute('data-open', ''); if (scrim) scrim.setAttribute('data-open', ''); const first = B.focusables(drawer)[0]; if (first) setTimeout(() => first.focus(), 60); } else { drawer.removeAttribute('data-open'); if (scrim) scrim.removeAttribute('data-open'); } B.emit(drawer, next ? 'bu:open' : 'bu:close', {}); } B.register('overlay', function (scope) { B.$$('[data-bu-dialog]', scope).forEach((trigger) => { if (!B.once(trigger, 'DialogTrigger')) return; trigger.addEventListener('click', () => openDialog(trigger.getAttribute('data-bu-dialog'))); }); B.$$('[data-bu-close]', scope).forEach((btn) => { if (!B.once(btn, 'Close')) return; btn.addEventListener('click', () => { const sel = btn.getAttribute('data-bu-close'); const target = sel ? document.querySelector(sel) : btn.closest('dialog, .bu-drawer, .bu-popover'); if (!target) return; if (target.classList.contains('bu-drawer')) toggleDrawer(target, false); else if (target.classList.contains('bu-popover')) hidePopover(); else closeDialog(target, btn.value || 'close'); }); }); B.$$('dialog.bu-dialog, dialog.bu-sheet, dialog.bu-palette', scope).forEach((dialog) => { if (!B.once(dialog, 'DialogBackdrop')) return; dialog.addEventListener('click', (e) => { if (e.target !== dialog) return; if (dialog.classList.contains('bu-dialog--alert')) return; if (dialog.hasAttribute('data-bu-persistent')) return; closeDialog(dialog, 'dismiss'); }); dialog.addEventListener('close', () => { if (lastFocused && document.contains(lastFocused)) { lastFocused.focus(); lastFocused = null; } }); }); B.$$('[data-bu-popover]', scope).forEach((trigger) => { if (!B.once(trigger, 'Popover')) return; const popover = document.querySelector(trigger.getAttribute('data-bu-popover')); if (!popover) return; trigger.setAttribute('aria-haspopup', trigger.getAttribute('aria-haspopup') || 'true'); trigger.setAttribute('aria-expanded', 'false'); trigger.addEventListener('click', (e) => { e.stopPropagation(); if (openPopover && openPopover.popover === popover) { hidePopover(); return; } showPopover(popover, trigger, trigger.getAttribute('data-bu-placement') || 'bottom-start'); }); }); B.$$('[data-bu-drawer]', scope).forEach((trigger) => { if (!B.once(trigger, 'Drawer')) return; trigger.addEventListener('click', () => toggleDrawer(trigger.getAttribute('data-bu-drawer'))); }); B.$$('.bu-scrim[data-bu-closes]', scope).forEach((scrim) => { if (!B.once(scrim, 'Scrim')) return; scrim.addEventListener('click', () => toggleDrawer(scrim.getAttribute('data-bu-closes'), false)); }); }); B.dialog = { open: openDialog, close: closeDialog }; B.confirm = confirmDialog; B.popover = { show: showPopover, hide: hidePopover }; B.drawer = { toggle: toggleDrawer }; })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; const B = global.BenchUI; let politeRegion = null; let assertiveRegion = null; function region(assertive) { const existing = assertive ? assertiveRegion : politeRegion; if (existing && document.contains(existing)) return existing; const node = B.el('div', { class: 'bu-sr-only', 'aria-live': assertive ? 'assertive' : 'polite', 'aria-atomic': 'true', role: assertive ? 'alert' : 'status', }); document.body.appendChild(node); if (assertive) assertiveRegion = node; else politeRegion = node; return node; } function announce(message, assertive) { const node = region(!!assertive); node.textContent = ''; setTimeout(() => { node.textContent = message; }, 40); } const ICONS = { ok: 'M20 6 9 17l-5-5', error: 'M12 8v5M12 16.5v.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z', warn: 'M12 8v5M12 16.5v.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z', info: 'M12 16v-5M12 7.5v.01M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z', }; function toastRegion(placement) { const id = 'bu-toast-region-' + (placement || 'bottom'); let node = document.getElementById(id); if (node) return node; node = B.el('div', { id: id, class: 'bu-toast-region' + (placement === 'top' ? ' bu-toast-region--top' : ''), }); document.body.appendChild(node); return node; } function toast(message, opts) { const o = opts || {}; const variant = o.variant || 'default'; const host = toastRegion(o.placement); const icon = ICONS[variant] ? B.el('span', { class: 'bu-toast__icon', html: '', }) : null; const node = B.el('div', { class: 'bu-toast' + (variant !== 'default' ? ' bu-toast--' + variant : ''), role: variant === 'error' ? 'alert' : 'status', }, [ icon, B.el('span', { class: 'bu-toast__message', text: message }), o.action ? B.el('button', { class: 'bu-btn bu-btn--plain bu-btn--sm bu-toast__action', type: 'button', text: o.action.label, onclick: () => { dismiss(); o.action.onSelect && o.action.onSelect(); }, }) : null, ]); host.appendChild(node); announce(message, variant === 'error'); let timer = null; function dismiss() { if (!node.isConnected) return; clearTimeout(timer); node.setAttribute('data-leaving', ''); setTimeout(() => node.remove(), 220); } const duration = o.duration === 0 ? 0 : (o.duration || (variant === 'error' ? 6000 : 3200)); if (duration) { timer = setTimeout(dismiss, duration); node.addEventListener('pointerenter', () => clearTimeout(timer)); node.addEventListener('pointerleave', () => { timer = setTimeout(dismiss, 1200); }); node.addEventListener('focusin', () => clearTimeout(timer)); } return { element: node, dismiss: dismiss }; } let tip = null; let tipTimer = null; let tipCount = 0; let hideTimer = null; let currentAnchor = null; function ensureTip() { if (tip && document.contains(tip)) return tip; tip = B.el('div', { class: 'bu-tooltip', role: 'tooltip' }); tip.addEventListener('pointerenter', () => clearTimeout(hideTimer)); tip.addEventListener('pointerleave', () => scheduleHide(currentAnchor)); document.body.appendChild(tip); return tip; } function scheduleHide(anchor) { clearTimeout(hideTimer); hideTimer = setTimeout(() => hideTip(anchor), 120); } function showTip(anchor) { const text = anchor.getAttribute('data-bu-tooltip'); if (!text) return; clearTimeout(hideTimer); if (currentAnchor && currentAnchor !== anchor) currentAnchor.removeAttribute('aria-describedby'); currentAnchor = anchor; const node = ensureTip(); node.textContent = text; const key = anchor.getAttribute('data-bu-tooltip-key'); if (key) node.appendChild(B.el('span', { class: 'bu-tooltip__key', text: key })); if (!node.id) node.id = 'bu-tooltip-' + (++tipCount); anchor.setAttribute('aria-describedby', node.id); const a = anchor.getBoundingClientRect(); node.style.visibility = 'hidden'; node.setAttribute('data-visible', ''); const t = node.getBoundingClientRect(); const gap = 6; let top = a.top - t.height - gap; if (top < gap) top = a.bottom + gap; node.style.position = 'fixed'; node.style.top = Math.round(top) + 'px'; node.style.left = Math.round(B.clamp(a.left + (a.width - t.width) / 2, gap, global.innerWidth - t.width - gap)) + 'px'; node.style.visibility = ''; } function hideTip(anchor) { clearTimeout(tipTimer); clearTimeout(hideTimer); if (tip) tip.removeAttribute('data-visible'); const target = anchor || currentAnchor; if (target) target.removeAttribute('aria-describedby'); if (!anchor || anchor === currentAnchor) currentAnchor = null; } B.register('feedback', function (scope) { B.$$('[data-bu-tooltip]', scope).forEach((anchor) => { if (!B.once(anchor, 'Tooltip')) return; const delay = parseInt(anchor.getAttribute('data-bu-tooltip-delay') || '450', 10); anchor.addEventListener('pointerenter', () => { clearTimeout(tipTimer); tipTimer = setTimeout(() => showTip(anchor), delay); }); anchor.addEventListener('pointerleave', () => scheduleHide(anchor)); anchor.addEventListener('focus', () => showTip(anchor)); anchor.addEventListener('blur', () => hideTip(anchor)); anchor.addEventListener('click', () => hideTip(anchor)); }); B.$$('.bu-progress[role="progressbar"]', scope).forEach((bar) => { if (!B.once(bar, 'Progress')) return; const fill = bar.querySelector('.bu-progress__bar'); const sync = () => { const now = parseFloat(bar.getAttribute('aria-valuenow') || '0'); const max = parseFloat(bar.getAttribute('aria-valuemax') || '100'); if (fill) fill.style.setProperty('--bu-progress-pct', B.clamp((now / max) * 100, 0, 100) + '%'); }; new MutationObserver(sync).observe(bar, { attributes: true, attributeFilter: ['aria-valuenow', 'aria-valuemax'] }); sync(); }); }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hideTip(currentAnchor); }); B.toast = toast; B.announce = announce; B.tooltip = { show: showTip, hide: hideTip }; })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; const B = global.BenchUI; const root = document.documentElement; const MARKERS = [ 'data-bu-segmented', 'data-bu-group', 'data-bu-tabs', 'data-bu-bind', 'data-bu-stepper', 'data-bu-dialog', 'data-bu-popover', 'data-bu-drawer', 'data-bu-tooltip', 'data-bu-close', 'data-bu-copy', 'data-bu-counter', 'data-bu-theme-set', 'data-bu-theme-toggle', 'data-bu-density-set', 'data-bu-accent-set', 'data-icon', 'data-icon-inline', 'data-bu-split', 'data-bu-grid', 'data-bu-combobox', ]; const MARKER_SELECTOR = MARKERS.map((m) => '[' + m + ']').join(',') + ',.bu-menu'; function ready(fn) { if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true }); else fn(); } function watch() { if (!global.MutationObserver) return; const rescan = B.debounce(() => B.mount(document), 60); new MutationObserver((records) => { for (const record of records) { for (const node of record.addedNodes) { if (node.nodeType !== 1) continue; if (node.matches && (node.matches(MARKER_SELECTOR) || node.querySelector(MARKER_SELECTOR))) { rescan(); return; } } } }).observe(document.documentElement, { childList: true, subtree: true }); } ready(function () { if (root.hasAttribute('data-bu-manual')) return; B.mount(document); watch(); root.setAttribute('data-bu-ready', ''); }); })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; const B = global.BenchUI; const SVG_NS = 'http://www.w3.org/2000/svg'; function markup(name) { const set = global.BenchUI.icons || {}; return set[name] || ''; } function dress(svg) { svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'none'); svg.setAttribute('stroke', 'currentColor'); svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute('stroke-linejoin', 'round'); svg.setAttribute('aria-hidden', 'true'); } function asSvg(el) { if (el.namespaceURI === SVG_NS) return el; const svg = document.createElementNS(SVG_NS, 'svg'); for (const attr of el.attributes) svg.setAttribute(attr.name, attr.value); el.replaceWith(svg); return svg; } function initInline(scope) { B.$$('[data-icon-inline]', scope).forEach((host) => { if (!B.once(host, 'IconInline')) return; const svg = asSvg(host); dress(svg); svg.innerHTML = markup(svg.getAttribute('data-icon-inline')); }); } function initPrepend(scope) { B.$$('[data-icon]', scope).forEach((el) => { if (!B.once(el, 'Icon')) return; const inner = markup(el.getAttribute('data-icon')); if (!inner) return; const svg = document.createElementNS(SVG_NS, 'svg'); svg.setAttribute('class', 'bu-icon'); dress(svg); svg.innerHTML = inner; el.insertBefore(svg, el.firstChild); }); } B.register('icons', function (scope) { initInline(scope); initPrepend(scope); }); })(typeof window !== 'undefined' ? window : globalThis); (function (global) { 'use strict'; global.BenchUI = global.BenchUI || {}; global.BenchUI.icons = {"chevron-down":"","chevron-up":"","chevron-right":"","chevron-left":"","chevron-expand":"","arrow-right":"","arrow-left":"","arrow-up":"","arrow-down":"","check":"","check-circle":"","close":"","close-circle":"","plus":"","minus":"","search":"","settings":"","gear":"","sun":"","moon":"","display":"","alert-triangle":"","info":"","help":"","download":"","upload":"","copy":"","trash":"","pencil":"","refresh":"","undo":"","redo":"","play":"","pause":"","stop":"","external":"","more-horizontal":"","more-vertical":"","grip":"","menu":"","lock":"","unlock":"","eye":"","eye-off":"","filter":"","calendar":"","clock":"","folder":"","file":"","save":"","link":"","home":"","layers":"","box":"","image":"","ruler":"","message":"","user":"","bell":"","star":"","bookmark":"","sparkle":"","panel-right":"","panel-left":"","maximize":"","minimize":"","sort":"","grid":"","list":"","truck":"","supplier":"","price-tag":"","currency-pound":"","invoice":"","inventory":"","package":"","barcode":"","droplet":"","swatch":"","grain":"","cut":"","sheet":"","edge-band":"","hole":"","file-text":"","folder-open":"","drawing":"","revision":"","approve":"","reject":"","comment-add":"","signature":"","print":"","share":"","attach":"","table":"","columns":"","rows":"","chart":"","trend-up":"","trend-down":"","export":"","import":"","offline":"","cloud":"","cloud-off":"","sync":"","database":"","plug":"","shield":"","key":"","pin":"","split-vertical":"","split-horizontal":"","crosshair":"","zoom-in":"","zoom-out":"","move":"","rotate":"","scale":"","check-square":"","square":"","circle":"","alert-circle":""}; })(typeof window !== 'undefined' ? window : globalThis);

Sign in