@getdom/studio 0.1.0

package/src/pages/lib/css/color.js

@@ -0,0 +1,245 @@
+export function cssColorToHex(value, fallback = '#000000') {
+	const color = String(value || '').trim();
+	if (!color) return fallback;
+	return parseKnownColorToHex(color) || resolveBrowserColorToHex(color) || fallback;
+}
+
+export function cssColorWithAlpha(value, alpha = 100) {
+	const color = String(value || '#000000').trim();
+	const opacity = clamp(Number(alpha), 0, 100);
+
+	if (isHexColor(color)) return hexToRgba(color, opacity);
+
+	const rgb = parseRgbColor(color);
+	if (rgb) {
+		const [red, green, blue] = rgb.channels;
+		return `rgba(${red}, ${green}, ${blue}, ${Number(opacity / 100).toFixed(2)})`;
+	}
+
+	if (/^oklch\(/i.test(color)) {
+		return setFunctionalColorAlpha(color, opacity);
+	}
+
+	if (opacity >= 100) return color;
+	return `color-mix(in oklch, ${color} ${opacity}%, transparent)`;
+}
+
+export function colorToHexAlpha(value) {
+	const color = String(value || '').trim();
+	if (color === 'transparent') return { hex: '#000000', alpha: 0, color: '#000000' };
+
+	if (isHexColor(color)) {
+		const clean = color.replace('#', '');
+		const hasShortAlpha = clean.length === 4;
+		const hasAlpha = clean.length === 8 || hasShortAlpha;
+		const alphaValue = hasShortAlpha
+			? Number.parseInt(clean.at(-1) + clean.at(-1), 16)
+			: clean.length === 8
+				? Number.parseInt(clean.slice(6, 8), 16)
+				: 255;
+		const hex = expandHex(color);
+		const alpha = hasAlpha ? Math.round((alphaValue / 255) * 100) : 100;
+		return { hex, alpha, color: hex };
+	}
+
+	if (/^oklch\(/i.test(color)) {
+		const hex = oklchToHex(color);
+		return { hex, alpha: parseFunctionalAlpha(color), color: stripFunctionalAlpha(color) };
+	}
+
+	const rgb = parseRgbColor(color);
+	if (rgb) {
+		const hex = rgbToHex(rgb.channels.map((channel) => channel / 255));
+		return { hex, alpha: rgb.alpha, color: hex };
+	}
+
+	return { hex: cssColorToHex(color), alpha: 100, color };
+}
+
+export function isHexColor(value) {
+	return /^#[0-9a-f]{3,8}$/i.test(String(value || '').trim());
+}
+
+export function expandHex(hex) {
+	const clean = String(hex || '').replace('#', '').trim();
+	if (clean.length === 3 || clean.length === 4) {
+		return `#${clean.slice(0, 3).split('').map((part) => part + part).join('').toLowerCase()}`;
+	}
+	return `#${clean.slice(0, 6).padEnd(6, '0').toLowerCase()}`;
+}
+
+export function hexToRgba(hex, alpha = 100) {
+	const [red, green, blue] = hexToRgb(hex).map((channel) => Math.round(channel * 255));
+	return `rgba(${red}, ${green}, ${blue}, ${Number(clamp(Number(alpha), 0, 100) / 100).toFixed(2)})`;
+}
+
+export function hexToOklch(hex) {
+	const [red, green, blue] = hexToRgb(hex).map(srgbToLinear);
+	const l = 0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue;
+	const m = 0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue;
+	const s = 0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue;
+	const lRoot = Math.cbrt(l);
+	const mRoot = Math.cbrt(m);
+	const sRoot = Math.cbrt(s);
+	const lightness = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
+	const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
+	const b = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
+	const chroma = Math.sqrt((a * a) + (b * b));
+	const hue = chroma < 0.0005 ? 0 : (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
+
+	return `oklch(${formatNumber(lightness)} ${formatNumber(chroma)} ${formatNumber(hue)})`;
+}
+
+export function oklchToHex(value) {
+	const match = String(value || '').match(/oklch\(\s*([0-9.]+%?)\s+([0-9.]+)\s+([0-9.]+)/i);
+	if (!match) return '#000000';
+
+	const lightness = clamp(match[1].endsWith('%') ? Number.parseFloat(match[1]) / 100 : Number.parseFloat(match[1]), 0, 1);
+	const chroma = Number.parseFloat(match[2]);
+	const hue = Number.parseFloat(match[3]) * Math.PI / 180;
+	const a = Math.cos(hue) * chroma;
+	const b = Math.sin(hue) * chroma;
+	const lRoot = lightness + 0.3963377774 * a + 0.2158037573 * b;
+	const mRoot = lightness - 0.1055613458 * a - 0.0638541728 * b;
+	const sRoot = lightness - 0.0894841775 * a - 1.291485548 * b;
+	const l = lRoot ** 3;
+	const m = mRoot ** 3;
+	const s = sRoot ** 3;
+	const red = linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+	const green = linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+	const blue = linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s);
+
+	return rgbToHex([red, green, blue]);
+}
+
+export function hexToRgb(hex) {
+	const clean = expandHex(hex).replace('#', '');
+	const value = Number.parseInt(clean, 16);
+
+	return [
+		((value >> 16) & 255) / 255,
+		((value >> 8) & 255) / 255,
+		(value & 255) / 255,
+	];
+}
+
+export function rgbToHex(values) {
+	return `#${values
+		.map((value) => Math.round(clamp(value, 0, 1) * 255).toString(16).padStart(2, '0'))
+		.join('')}`;
+}
+
+export function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+
+function parseRgbColor(value) {
+	const match = String(value || '').trim().match(/^rgba?\((.+)\)$/i);
+	if (!match) return null;
+
+	const body = match[1].trim();
+	const [channelPart, alphaPart] = body.includes('/')
+		? body.split('/').map((part) => part.trim())
+		: [body, null];
+	const channelValues = channelPart.includes(',')
+		? channelPart.split(',').slice(0, 3)
+		: channelPart.split(/\s+/).slice(0, 3);
+	const alphaValue = alphaPart ?? (body.includes(',') ? body.split(',')[3] : null);
+	const channels = channelValues.map((part) => clamp(Number.parseFloat(part), 0, 255));
+
+	if (channels.length !== 3 || channels.some((channel) => !Number.isFinite(channel))) return null;
+
+	return {
+		channels: channels.map(Math.round),
+		alpha: parseAlpha(alphaValue),
+	};
+}
+
+function parseKnownColorToHex(color) {
+	if (isHexColor(color)) return expandHex(color);
+	if (/^oklch\(/i.test(color)) return oklchToHex(color);
+
+	const rgb = parseRgbColor(color);
+	if (rgb) return rgbToHex(rgb.channels.map((channel) => channel / 255));
+
+	const srgb = parseSrgbColorFunction(color);
+	if (srgb) return rgbToHex(srgb);
+
+	return null;
+}
+
+function parseSrgbColorFunction(value) {
+	const match = String(value || '').trim().match(/^color\(\s*srgb\s+(.+)\)$/i);
+	if (!match) return null;
+
+	const channelPart = match[1].split('/')[0].trim();
+	const channels = channelPart.split(/\s+/).slice(0, 3).map((part) => {
+		const raw = part.trim();
+		if (raw.endsWith('%')) return clamp(Number.parseFloat(raw) / 100, 0, 1);
+		return clamp(Number.parseFloat(raw), 0, 1);
+	});
+
+	if (channels.length !== 3 || channels.some((channel) => !Number.isFinite(channel))) return null;
+	return channels;
+}
+
+function resolveBrowserColorToHex(value) {
+	if (typeof document === 'undefined') return null;
+	if (typeof CSS !== 'undefined' && CSS.supports && !CSS.supports('color', value)) return null;
+
+	const swatch = document.createElement('span');
+	swatch.style.color = value;
+	swatch.style.position = 'fixed';
+	swatch.style.pointerEvents = 'none';
+	swatch.style.visibility = 'hidden';
+
+	if (!swatch.style.color) return null;
+
+	document.documentElement.append(swatch);
+	const computed = getComputedStyle(swatch).color;
+	swatch.remove();
+
+	return parseKnownColorToHex(computed);
+}
+
+function parseFunctionalAlpha(value) {
+	const match = String(value || '').match(/\/\s*([0-9.]+%?)/);
+	return parseAlpha(match?.[1]);
+}
+
+function parseAlpha(value) {
+	if (value === undefined || value === null || value === '') return 100;
+
+	const raw = String(value).trim();
+	if (raw.endsWith('%')) return clamp(Number.parseFloat(raw), 0, 100);
+
+	const number = Number.parseFloat(raw);
+	if (!Number.isFinite(number)) return 100;
+	return number <= 1 ? Math.round(number * 100) : clamp(number, 0, 100);
+}
+
+function stripFunctionalAlpha(value) {
+	const match = String(value || '').trim().match(/^([a-z]+)\((.*)\)$/i);
+	if (!match) return value;
+
+	return `${match[1]}(${match[2].split('/')[0].trim()})`;
+}
+
+function setFunctionalColorAlpha(value, alpha) {
+	const match = String(value || '').trim().match(/^([a-z]+)\((.*)\)$/i);
+	if (!match) return value;
+
+	return `${match[1]}(${match[2].split('/')[0].trim()} / ${alpha}%)`;
+}
+
+function srgbToLinear(value) {
+	return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+
+function linearToSrgb(value) {
+	return value <= 0.0031308 ? 12.92 * value : 1.055 * (value ** (1 / 2.4)) - 0.055;
+}
+
+function formatNumber(value) {
+	return Number(value.toFixed(3)).toString();
+}

package/src/pages/lib/headless/accordion.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+import { DomElementBase } from './base.js';
+export declare class DomAccordionItemElement extends DomElementBase {
+	toggle(): void;
+}
+export declare class DomAccordionElement extends DomElementBase {}

package/src/pages/lib/headless/accordion.js

@@ -0,0 +1,246 @@
+import { DomElementBase, defineDomElement, uid } from './base.js';
+
+// <dom-accordion multiple>
+//   <dom-accordion-item>
+//     <button slot="header">Title</button>
+//     <div slot="content">…</div>
+//   </dom-accordion-item>
+// </dom-accordion>
+export class DomAccordionItemElement extends DomElementBase {
+	static get observedAttributes() { return ['open']; }
+
+	static __doc = {
+		name: 'dom-accordion-item',
+		description: 'A single collapsible section. Lives inside an <dom-accordion> host.',
+		slots: [
+			{ name: 'header', description: 'The clickable header. Carries aria-expanded.' },
+			{ name: 'content', description: 'The collapsible region. Hidden when closed.' },
+		],
+		attributes: [
+			{ name: 'open', type: 'boolean', description: 'Reflects the open state of the item.' },
+		],
+		events: [
+			{ name: 'dom:change', payload: '{ open }', description: 'Fired when the item is opened or closed.' },
+		],
+		keyboard: [
+			{ keys: 'Enter / Space', action: 'Toggle the section (when header is focused).' },
+		],
+		example: `<dom-accordion-item open>
+  <button slot="header">Section A</button>
+  <div slot="content">Lorem ipsum…</div>
+</dom-accordion-item>`,
+	};
+
+	connectedCallback() {
+		this._header = this.querySelector('[slot="header"], [data-header]');
+		this._contentSlot = this.querySelector('[slot="content"], [data-content]');
+		if (!this._header || !this._contentSlot) return;
+		this._ready = false;
+		this._content = this._ensurePanel(this._contentSlot);
+
+		const id = uid('acc');
+		this._header.id = this._header.id || `${id}-h`;
+		this._content.id = this._content.id || `${id}-c`;
+		this._header.setAttribute('aria-controls', this._content.id);
+		this._content.setAttribute('role', 'region');
+		this._content.setAttribute('aria-labelledby', this._header.id);
+		this._content.style.overflow = 'hidden';
+		this._content.style.willChange = 'height, opacity, transform';
+		this._content.style.transition = this._content.style.transition || this._enterTransition();
+		this._sync({ animate: false });
+		this._ready = true;
+
+		this.on(this._header, 'click', () => this.toggle());
+		this.on(this._header, 'keydown', (e) => {
+			if (e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				this.toggle();
+			}
+		});
+	}
+
+	_ensurePanel(content) {
+		const existing = content.parentElement?.dataset?.accordionPanel === 'true'
+			? content.parentElement
+			: null;
+		if (existing) return existing;
+
+		const panel = document.createElement('div');
+		panel.dataset.accordionPanel = 'true';
+		content.before(panel);
+		panel.append(content);
+		return panel;
+	}
+
+	attributeChangedCallback() {
+		this._sync({ animate: this._ready });
+	}
+
+	_sync({ animate = true } = {}) {
+		if (!this._header || !this._content) return;
+		const open = this.boolAttr('open');
+		this._header.setAttribute('aria-expanded', String(open));
+		this._content.setAttribute('aria-hidden', String(!open));
+		this._content.dataset.state = open ? 'open' : 'closed';
+
+		if (!animate || this._prefersReducedMotion()) {
+			this._finishTransition();
+			this._content.hidden = !open;
+			this._content.style.height = open ? '' : '0px';
+			this._content.style.opacity = open ? '1' : '0';
+			this._content.style.transform = open ? '' : 'translateY(-6px)';
+			return;
+		}
+
+		if (open) {
+			this._expand();
+			return;
+		}
+		this._collapse();
+	}
+
+	toggle() {
+		const parent = this.closest('dom-accordion');
+		const multi = parent?.hasAttribute('multiple');
+		const next = !this.boolAttr('open');
+		if (next && parent && !multi) {
+			parent.querySelectorAll('dom-accordion-item[open]').forEach((it) => {
+				if (it !== this) it.removeAttribute('open');
+			});
+		}
+		this.setBoolAttr('open', next);
+		this.emit('dom:change', { open: next });
+	}
+
+	_expand() {
+		this._finishTransition();
+		this._content.style.transition = this._enterTransition();
+		const startHeight = this._content.hidden ? 0 : this._content.getBoundingClientRect().height;
+		this._content.hidden = false;
+		this._content.style.height = `${startHeight}px`;
+		this._content.style.opacity = startHeight > 0 ? this._computedOpacity() : '0';
+		this._content.style.transform = 'translateY(-6px)';
+		this._afterFrame(() => {
+			this._content.style.height = `${this._content.scrollHeight}px`;
+			this._content.style.opacity = '1';
+			this._content.style.transform = 'translateY(0)';
+			this._onTransitionEnd(() => {
+				this._content.style.height = '';
+				this._content.style.transform = '';
+			});
+		});
+	}
+
+	_collapse() {
+		this._finishTransition();
+		this._content.hidden = false;
+		this._content.style.transition = 'none';
+		const startHeight = this._content.getBoundingClientRect().height || this._content.scrollHeight;
+		const startOpacity = Number(this._computedOpacity()) || 1;
+		const duration = 340;
+		const startedAt = performance.now();
+		this._content.style.height = `${startHeight}px`;
+		this._content.style.opacity = String(startOpacity);
+		this._content.style.transform = 'translateY(0)';
+		this._content.offsetHeight;
+		const animate = () => {
+			const progress = Math.min((performance.now() - startedAt) / duration, 1);
+			const eased = this._easeInOut(progress);
+			const nextHeight = startHeight * (1 - eased);
+			this._content.style.height = `${nextHeight}px`;
+			this._content.style.opacity = String(Math.max(0.01, startOpacity * (1 - eased)));
+			this._content.style.transform = `translateY(${-3 * eased}px)`;
+			if (progress < 1) {
+				this._collapseFrame = requestAnimationFrame(animate);
+				return;
+			}
+			this._collapseFrame = null;
+			this._content.style.height = '0px';
+			this._content.style.opacity = '0';
+			this._content.style.transform = 'translateY(-6px)';
+			this._content.hidden = true;
+			this._content.style.transition = this._enterTransition();
+		};
+		this._collapseFrame = requestAnimationFrame(animate);
+	}
+
+	_easeInOut(progress) {
+		return progress < 0.5
+			? 4 * progress * progress * progress
+			: 1 - Math.pow(-2 * progress + 2, 3) / 2;
+	}
+
+	_enterTransition() {
+		return 'height 300ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms ease, transform 300ms cubic-bezier(0.32, 0.72, 0, 1)';
+	}
+
+	_afterFrame(callback) {
+		requestAnimationFrame(() => requestAnimationFrame(callback));
+	}
+
+	_onTransitionEnd(callback) {
+		const token = Symbol('accordion-transition');
+		this._transitionToken = token;
+		const done = (event) => {
+			if (event && event.target !== this._content) return;
+			if (event && event.propertyName !== 'height') return;
+			if (this._transitionToken !== token) return;
+			this._content.removeEventListener('transitionend', done);
+			clearTimeout(this._transitionTimer);
+			this._transitionOff = null;
+			callback();
+		};
+		this._content.addEventListener('transitionend', done);
+		this._transitionOff = () => this._content.removeEventListener('transitionend', done);
+		this._transitionTimer = setTimeout(() => done(), 360);
+	}
+
+	_finishTransition() {
+		if (this._collapseFrame) cancelAnimationFrame(this._collapseFrame);
+		this._collapseFrame = null;
+		if (this._transitionTimer) clearTimeout(this._transitionTimer);
+		this._transitionOff?.();
+		this._transitionOff = null;
+		this._transitionToken = null;
+	}
+
+	_computedOpacity() {
+		return getComputedStyle(this._content).opacity || '1';
+	}
+
+	_prefersReducedMotion() {
+		return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+	}
+}
+
+export class DomAccordionElement extends DomElementBase {
+	static __doc = {
+		name: 'dom-accordion',
+		description: 'Disclosure-panel group containing one or more <dom-accordion-item> children.',
+		slots: [
+			{ name: '(default)', description: 'A list of <dom-accordion-item> children.' },
+		],
+		attributes: [
+			{ name: 'multiple', type: 'boolean', description: 'Allow multiple items to be open at once. Otherwise opening one closes the others.' },
+		],
+		events: [],
+		keyboard: [],
+		example: `<dom-accordion multiple>
+  <dom-accordion-item open>
+    <button slot="header">Section A</button>
+    <div slot="content">Lorem ipsum…</div>
+  </dom-accordion-item>
+  <dom-accordion-item>
+    <button slot="header">Section B</button>
+    <div slot="content">Dolor sit amet…</div>
+  </dom-accordion-item>
+</dom-accordion>`,
+	};
+
+	connectedCallback() {
+		this.setAttribute('role', 'group');
+	}
+}
+
+defineDomElement('dom-accordion-item', DomAccordionItemElement);
+defineDomElement('dom-accordion', DomAccordionElement);

package/src/pages/lib/headless/autocomplete.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+import { ComboBase } from './combobox.js';
+export declare class DomAutocompleteElement extends ComboBase {}

package/src/pages/lib/headless/autocomplete.js

@@ -0,0 +1,33 @@
+import { defineDomElement } from './base.js';
+import { ComboBase } from './combobox.js';
+
+export class DomAutocompleteElement extends ComboBase {
+	static __doc = {
+		name: 'dom-autocomplete',
+		description: 'Free-text autocomplete. Suggestions are optional; typed values are valid and Enter commits the current text.',
+		slots: [
+			{ name: 'input', description: 'The text input. Gets role="combobox" and aria-controls wired automatically.' },
+			{ name: 'list', description: 'Optional suggestions. The list may be updated by a framework or server lookup.' },
+		],
+		attributes: [
+			{ name: 'value', type: 'string', description: 'Current text value.' },
+			{ name: 'open', type: 'boolean', description: 'Reflects whether suggestions are visible.' },
+			{ name: 'placement', type: 'string', description: 'Preferred floating placement before collision handling.' },
+			{ name: 'floating-mode', type: "'viewport' | 'anchor'", description: 'viewport keeps suggestions inside the browser; anchor keeps them attached to the input while scrolling.' },
+			{ name: 'data-menu-id', type: 'string', description: 'Id of an external or teleported suggestion list.' },
+		],
+		events: [
+			{ name: 'dom:input', payload: '{ value }', description: 'Fired whenever the text value changes.' },
+			{ name: 'dom:query', payload: '{ query }', description: 'Fired whenever the user types. Useful for server lookups.' },
+			{ name: 'dom:select', payload: '{ value, label, option }', description: 'Fired when a suggestion is selected.' },
+			{ name: 'dom:custom', payload: '{ value, label }', description: 'Cancelable event fired when Enter commits free text.' },
+			{ name: 'dom:change', payload: '{ value, option, custom }', description: 'Fired when text or a suggestion is committed.' },
+		],
+	};
+
+	get _freeText() { return true; }
+	get _valueMode() { return 'text'; }
+	get _activeOnFilter() { return false; }
+}
+
+defineDomElement('dom-autocomplete', DomAutocompleteElement);

package/src/pages/lib/headless/base.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+export declare const isBrowser: boolean;
+export declare function uid(prefix?: string): string;
+export declare function defineDomElement(name: string, ctor: CustomElementConstructor): void;
+export declare class DomElementBase extends HTMLElement {
+	emit<T = unknown>(type: string, detail?: T): void;
+	on(target: EventTarget, type: string, handler: EventListenerOrEventListenerObject, opts?: AddEventListenerOptions | boolean): () => void;
+	disconnectedCallback(): void;
+	boolAttr(name: string): boolean;
+	setBoolAttr(name: string, value: boolean): void;
+}
+export declare function focusTrap(container: HTMLElement): () => void;
+export interface RovingOptions {
+	items?: Array<HTMLElement>;
+	orientation?: 'horizontal' | 'vertical';
+	loop?: boolean;
+	onSelect?: (index: number, item: HTMLElement) => void;
+}
+export interface RovingController {
+	readonly index: number;
+	setActive(index: number, options?: { focus?: boolean; select?: boolean }): void;
+	onKey(event: KeyboardEvent): void;
+}
+export declare function createRoving(options?: RovingOptions): RovingController;

package/src/pages/lib/headless/base.js

@@ -0,0 +1,127 @@
+// DOM Studio — headless web component primitives
+//
+// The headless layer is pure DOM + JS. It carries the behavioural contract
+// (state, ARIA wiring, keyboard handling, event emission) so the same logic
+// can be consumed as a plain custom element or wrapped by any framework.
+
+const isBrowser = typeof window !== 'undefined' && typeof customElements !== 'undefined';
+
+let uidCounter = 0;
+export function uid(prefix = 'el') {
+	uidCounter += 1;
+	return `${prefix}-${uidCounter.toString(36)}`;
+}
+
+export function defineDomElement(name, ctor) {
+	if (!isBrowser) return;
+	if (!customElements.get(name)) {
+		customElements.define(name, ctor);
+	}
+}
+
+export class DomElementBase extends (isBrowser ? HTMLElement : class {}) {
+	constructor() {
+		super();
+		this._listeners = new Map();
+	}
+
+	emit(type, detail) {
+		this.dispatchEvent(
+			new CustomEvent(type, { detail, bubbles: true, composed: true }),
+		);
+	}
+
+	on(target, type, handler, opts) {
+		target.addEventListener(type, handler, opts);
+		const key = Symbol();
+		this._listeners.set(key, () => target.removeEventListener(type, handler, opts));
+		return () => {
+			const off = this._listeners.get(key);
+			if (off) {
+				off();
+				this._listeners.delete(key);
+			}
+		};
+	}
+
+	disconnectedCallback() {
+		for (const off of this._listeners.values()) off();
+		this._listeners.clear();
+	}
+
+	boolAttr(name) {
+		return this.hasAttribute(name) && this.getAttribute(name) !== 'false';
+	}
+
+	setBoolAttr(name, value) {
+		const hasAttr = this.hasAttribute(name);
+		if (value && !hasAttr) this.setAttribute(name, '');
+		else if (!value && hasAttr) this.removeAttribute(name);
+	}
+}
+
+// Tiny focus-trap used by dialog & combobox panel.
+export function focusTrap(container) {
+	const sel = [
+		'a[href]', 'button:not([disabled])', 'input:not([disabled])',
+		'select:not([disabled])', 'textarea:not([disabled])',
+		'[tabindex]:not([tabindex="-1"])',
+	].join(',');
+	const onKey = (e) => {
+		if (e.key !== 'Tab') return;
+		const nodes = container.querySelectorAll(sel);
+		if (!nodes.length) return;
+		const first = nodes[0];
+		const last = nodes[nodes.length - 1];
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	};
+	container.addEventListener('keydown', onKey);
+	return () => container.removeEventListener('keydown', onKey);
+}
+
+// Simple roving-tabindex helper for lists (tabs, menus, accordion).
+export function createRoving({ items, orientation = 'horizontal', loop = true, onSelect } = {}) {
+	let index = 0;
+	const horiz = orientation === 'horizontal';
+	const nextKey = horiz ? 'ArrowRight' : 'ArrowDown';
+	const prevKey = horiz ? 'ArrowLeft' : 'ArrowUp';
+
+	const setActive = (i, options = {}) => {
+		const { focus = true, select = true } = options;
+		if (!items.length) return;
+		if (loop) i = (i + items.length) % items.length;
+		else i = Math.max(0, Math.min(items.length - 1, i));
+		index = i;
+		items.forEach((el, idx) => {
+			el.tabIndex = idx === i ? 0 : -1;
+		});
+		if (focus) items[i]?.focus();
+		if (select) onSelect?.(i, items[i]);
+	};
+
+	const onKey = (e) => {
+		if (e.key === nextKey) {
+			e.preventDefault();
+			setActive(index + 1);
+		} else if (e.key === prevKey) {
+			e.preventDefault();
+			setActive(index - 1);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			setActive(0);
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			setActive(items.length - 1);
+		}
+	};
+
+	return { setActive, onKey, get index() { return index; } };
+}
+
+export { isBrowser };