@getdom/studio 0.1.0

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

@@ -0,0 +1,391 @@
+import { DomElementBase, defineDomElement } from './base.js';
+import {
+	bindPopoverToggle,
+	bindFloatingReflow,
+	closePopoverPanel,
+	isPopoverOpen,
+	openPopoverPanel,
+	positionPopoverPanel,
+	preparePopoverPanel,
+	readFloatingPositionOptions,
+	syncFloatingScrollLock,
+	unbindFloatingReflow,
+} from './popover-panel.js';
+
+const TRIGGER_SELECTOR = [
+	'button',
+	'a[href]',
+	'input:not([type="hidden"])',
+	'select',
+	'textarea',
+	'[role="button"]',
+	'[role="link"]',
+	'[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+function isNativeTrigger(element) {
+	return ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element?.tagName);
+}
+
+function resolveTriggerElement(root) {
+	if (!root) return null;
+	if (root.matches(TRIGGER_SELECTOR)) return root;
+	return root.querySelector(TRIGGER_SELECTOR) || root.firstElementChild || root;
+}
+
+// <dom-popover>
+//   <button slot="trigger">Open</button>
+//   <div slot="panel">…</div>
+// </dom-popover>
+//
+// Built on the native HTML Popover API (`popover="auto"`). The browser handles
+// top-layer promotion, light-dismiss, and Esc — we just wire the trigger and
+// surface our usual dom:open / dom:close events.
+export class DomPopoverElement extends DomElementBase {
+	static get observedAttributes() {
+		return ['open', 'align', 'offset', 'placement', 'collision-padding', 'floating-mode', 'flip', 'lock-scroll', 'trigger', 'hover-close-delay', 'data-trigger-id'];
+	}
+
+	static __doc = {
+		name: 'dom-popover',
+		description: 'Floating panel anchored to a trigger. Built on the native HTML Popover API — top layer, light-dismiss and Esc are handled by the browser.',
+		slots: [
+			{ name: 'trigger', description: 'Element that toggles the panel when clicked.' },
+			{ name: 'panel', description: 'Panel content. Gets popover="auto" applied automatically.' },
+		],
+		attributes: [
+			{ name: 'open', type: 'boolean', description: 'Reflects open state.' },
+			{ name: 'placement', type: "'top' | 'right' | 'bottom' | 'left' | '<side>-<align>'", description: 'Preferred placement before collision handling (default bottom).' },
+			{ name: 'align', type: "'left' | 'right' | 'center'", description: 'Horizontal alignment under the trigger (default left).' },
+			{ name: 'offset', type: 'number', description: 'Gap in pixels between trigger and panel (default 8).' },
+			{ name: 'collision-padding', type: 'number', description: 'Viewport padding used when flipping or shifting the panel (default 8).' },
+			{ name: 'floating-mode', type: "'viewport' | 'anchor'", description: 'viewport keeps the panel inside the browser; anchor keeps it attached to the trigger while scrolling.' },
+			{ name: 'flip', type: 'boolean', description: 'Allow the panel to flip to the opposite side when it would collide with the viewport.' },
+			{ name: 'lock-scroll', type: 'boolean', description: 'Lock document scrolling while the panel is open.' },
+			{ name: 'trigger', type: "'click' | 'hover' | 'hover-click'", description: 'How the trigger opens the panel. hover-click opens on hover and pins open on click.' },
+			{ name: 'hover-close-delay', type: 'number', description: 'Delay before closing a hover-triggered panel after pointer/focus leaves.' },
+			{ name: 'data-trigger-id', type: 'string', description: 'Id of an external trigger element.' },
+			{ name: 'data-panel-id', type: 'string', description: 'Id of an external (teleported) panel element.' },
+		],
+		events: [
+			{ name: 'dom:open', description: 'Fired when the panel opens.' },
+			{ name: 'dom:close', description: 'Fired when the panel closes.' },
+		],
+		keyboard: [
+			{ keys: 'Click trigger', action: 'Toggles the panel.' },
+			{ keys: 'Click outside', action: 'Light-dismiss via the native popover API.' },
+			{ keys: 'Esc', action: 'Closes the panel.' },
+		],
+		example: `<dom-popover>
+  <button slot="trigger">More</button>
+  <div slot="panel">
+    <p>Anything you like — text, buttons, even forms.</p>
+  </div>
+</dom-popover>`,
+	};
+
+	constructor() {
+		super();
+		this._open = false;
+		this._unbindToggle = null;
+		this._reflowOff = null;
+		this._triggerOff = null;
+		this._panelHoverOff = null;
+		this._scrollLocked = false;
+		this._dismissOff = null;
+		this._dismissBindFrame = 0;
+		this._hoverCloseTimer = 0;
+		this._hoverPinned = false;
+	}
+
+	_positionOpts() {
+		return readFloatingPositionOptions(this, { offset: 8, flip: true });
+	}
+
+	_bindReflow() {
+		bindFloatingReflow(this, this._panel, this._trigger, this._positionOpts());
+	}
+
+	_unbindReflow() {
+		unbindFloatingReflow(this);
+	}
+
+	_bindDismiss() {
+		this._unbindDismiss();
+		this._dismissBindFrame = requestAnimationFrame(() => {
+			const onPointerDown = (event) => {
+				const target = event.target;
+				if (this._panel?.contains(target) || this._trigger?.contains(target)) return;
+				this._syncOpen(false, false);
+			};
+			const onKeydown = (event) => {
+				if (event.key !== 'Escape') return;
+				event.preventDefault();
+				this._syncOpen(false, false);
+			};
+			document.addEventListener('pointerdown', onPointerDown, true);
+			document.addEventListener('keydown', onKeydown, true);
+			this._dismissOff = () => {
+				document.removeEventListener('pointerdown', onPointerDown, true);
+				document.removeEventListener('keydown', onKeydown, true);
+			};
+		});
+	}
+
+	_unbindDismiss() {
+		if (this._dismissBindFrame) {
+			cancelAnimationFrame(this._dismissBindFrame);
+			this._dismissBindFrame = 0;
+		}
+		this._dismissOff?.();
+		this._dismissOff = null;
+	}
+
+	_triggerMode() {
+		return this.getAttribute('trigger') || 'click';
+	}
+
+	_isHoverMode() {
+		return this._triggerMode() === 'hover' || this._triggerMode() === 'hover-click';
+	}
+
+	_isHoverClickMode() {
+		return this._triggerMode() === 'hover-click';
+	}
+
+	_hoverCloseDelay() {
+		return Math.max(0, Number(this.getAttribute('hover-close-delay') || 140));
+	}
+
+	_clearHoverClose() {
+		if (!this._hoverCloseTimer) return;
+		clearTimeout(this._hoverCloseTimer);
+		this._hoverCloseTimer = 0;
+	}
+
+	_openFromHover() {
+		this._clearHoverClose();
+		this._syncOpen(true, false);
+	}
+
+	_closeFromHoverSoon() {
+		if (this._hoverPinned) return;
+		this._clearHoverClose();
+		this._hoverCloseTimer = setTimeout(() => {
+			this._hoverCloseTimer = 0;
+			if (this._hoverPinned) return;
+			this._syncOpen(false, false);
+		}, this._hoverCloseDelay());
+	}
+
+	_pinFromClick() {
+		this._clearHoverClose();
+		this._hoverPinned = true;
+		this._syncOpen(true, false);
+	}
+
+	_bindPanelHover() {
+		this._unbindPanelHover();
+		if (!this._isHoverMode() || !this._panel) return;
+		const offPointerEnter = this.on(this._panel, 'pointerenter', () => this._clearHoverClose());
+		const offPointerLeave = this.on(this._panel, 'pointerleave', () => this._closeFromHoverSoon());
+		const offMouseEnter = this.on(this._panel, 'mouseenter', () => this._clearHoverClose());
+		const offMouseLeave = this.on(this._panel, 'mouseleave', () => this._closeFromHoverSoon());
+		const offFocusIn = this.on(this._panel, 'focusin', () => this._clearHoverClose());
+		const offFocusOut = this.on(this._panel, 'focusout', () => this._closeFromHoverSoon());
+		this._panelHoverOff = () => {
+			offPointerEnter?.();
+			offPointerLeave?.();
+			offMouseEnter?.();
+			offMouseLeave?.();
+			offFocusIn?.();
+			offFocusOut?.();
+		};
+	}
+
+	_unbindPanelHover() {
+		this._panelHoverOff?.();
+		this._panelHoverOff = null;
+	}
+
+	_syncScrollLock(next) {
+		syncFloatingScrollLock(this, this._panel, next);
+	}
+
+	connectedCallback() {
+		this._trigger = this._resolveTrigger();
+		this._panel = this._resolvePanel();
+		if (!this._trigger) return;
+
+		if (this._panel) this._preparePanel();
+		this._prepareTrigger();
+
+		if (this.hasAttribute('open')) this.open = true;
+	}
+
+	_prepareTrigger() {
+		this._triggerOff?.();
+		this._triggerOff = null;
+		this._unbindPanelHover();
+		if (!this._trigger) return;
+		this._trigger.setAttribute('aria-haspopup', 'dialog');
+		this._trigger.setAttribute('aria-expanded', String(this._open));
+		if (!isNativeTrigger(this._trigger) && !this._trigger.hasAttribute('role')) {
+			this._trigger.setAttribute('role', 'button');
+		}
+		if (!isNativeTrigger(this._trigger) && !this._trigger.hasAttribute('tabindex')) {
+			this._trigger.setAttribute('tabindex', '0');
+		}
+		if (this._isHoverMode()) {
+			const offPointerEnter = this.on(this._trigger, 'pointerenter', () => this._openFromHover());
+			const offPointerLeave = this.on(this._trigger, 'pointerleave', () => this._closeFromHoverSoon());
+			const offMouseEnter = this.on(this._trigger, 'mouseenter', () => this._openFromHover());
+			const offMouseLeave = this.on(this._trigger, 'mouseleave', () => this._closeFromHoverSoon());
+			const offFocusIn = this.on(this._trigger, 'focusin', () => this._openFromHover());
+			const offFocusOut = this.on(this._trigger, 'focusout', () => this._closeFromHoverSoon());
+			const offClick = this._isHoverClickMode() ? this.on(this._trigger, 'click', () => this._pinFromClick()) : null;
+			const offKeydown = this._isHoverClickMode() ? this.on(this._trigger, 'keydown', (event) => {
+				if (event.key !== 'Enter' && event.key !== ' ') return;
+				event.preventDefault();
+				this._pinFromClick();
+			}) : null;
+			this._bindPanelHover();
+			this._triggerOff = () => {
+				offPointerEnter?.();
+				offPointerLeave?.();
+				offMouseEnter?.();
+				offMouseLeave?.();
+				offFocusIn?.();
+				offFocusOut?.();
+				offClick?.();
+				offKeydown?.();
+			};
+			return;
+		}
+
+		const offClick = this.on(this._trigger, 'click', () => this.toggle());
+		const offKeydown = this.on(this._trigger, 'keydown', (event) => {
+			if (event.key !== 'Enter' && event.key !== ' ') return;
+			event.preventDefault();
+			this.toggle();
+		});
+		this._triggerOff = () => {
+			offClick?.();
+			offKeydown?.();
+		};
+	}
+
+	_resolveTrigger() {
+		const id = this.dataset.triggerId;
+		if (id) return resolveTriggerElement(document.getElementById(id));
+		const root = this.querySelector('[slot="trigger"], [data-trigger]');
+		return resolveTriggerElement(root);
+	}
+
+	_preparePanel() {
+		if (!this._panel.classList.contains('dom-popover-panel')) {
+			this._panel.classList.add('dom-popover-panel');
+		}
+		preparePopoverPanel(this._panel, this._trigger);
+		this._panel.setAttribute('popover', 'manual');
+		this._unbindToggle?.();
+		this._unbindToggle = bindPopoverToggle(this._panel, (open) => this._syncOpen(open, true));
+		this._bindPanelHover();
+	}
+
+	_resolvePanel() {
+		const inner = this.querySelector('[slot="panel"], [data-panel]');
+		if (inner) return inner;
+		const id = this.dataset.panelId;
+		return id ? document.getElementById(id) : null;
+	}
+
+	_ensurePanel() {
+		if (!this._trigger || !this._trigger.isConnected) {
+			this._trigger = this._resolveTrigger();
+			if (this._trigger) this._prepareTrigger();
+		}
+		if (!this._panel || !this._panel.isConnected) {
+			this._panel = this._resolvePanel();
+			if (this._panel) this._preparePanel();
+		}
+		return this._panel;
+	}
+
+	_placePanel() {
+		positionPopoverPanel(this._panel, this._trigger, this._positionOpts());
+	}
+
+	_syncOpen(next, fromPopover = false) {
+		if (!this._ensurePanel()) return;
+		if (next && this._open) {
+			this._placePanel();
+			return;
+		}
+		if (!next && !this._open) return;
+
+		if (next) {
+			if (!fromPopover) {
+				openPopoverPanel(this._panel, this._trigger, this._positionOpts());
+			} else {
+				this._placePanel();
+			}
+			this._bindReflow();
+			this._syncScrollLock(true);
+			this._bindDismiss();
+		} else {
+			this._hoverPinned = false;
+			this._unbindReflow();
+			this._unbindDismiss();
+			this._syncScrollLock(false);
+			if (!fromPopover) closePopoverPanel(this._panel);
+		}
+
+		this._open = next;
+		this.setBoolAttr('open', next);
+		this._trigger?.setAttribute('aria-expanded', String(next));
+		this.emit(next ? 'dom:open' : 'dom:close');
+	}
+
+	attributeChangedCallback(name) {
+		if (name === 'data-trigger-id' || name === 'trigger') {
+			this._trigger = this._resolveTrigger();
+			if (this._trigger) this._prepareTrigger();
+		}
+		if (!this._open || !this._panel || !this._trigger) return;
+		if (name === 'lock-scroll') {
+			this._syncScrollLock(true);
+		}
+		if (name === 'align' || name === 'offset' || name === 'placement' || name === 'collision-padding' || name === 'floating-mode' || name === 'flip') {
+			positionPopoverPanel(this._panel, this._trigger, this._positionOpts());
+		}
+	}
+
+	get open() { return this._open; }
+	set open(value) {
+		const next = !!value;
+		if (next === this._open) return;
+		if (!this._ensurePanel()) return;
+		this._syncOpen(next, false);
+	}
+
+	toggle() {
+		if (!this._ensurePanel()) return;
+		this._syncOpen(!this._open, false);
+	}
+
+	disconnectedCallback() {
+		this._unbindToggle?.();
+		this._unbindToggle = null;
+		this._unbindReflow();
+		this._triggerOff?.();
+		this._triggerOff = null;
+		this._unbindPanelHover();
+		this._clearHoverClose();
+		this._unbindDismiss();
+		this._syncScrollLock(false);
+		super.disconnectedCallback();
+	}
+}
+
+defineDomElement('dom-popover', DomPopoverElement);

package/src/pages/lib/headless/radio-group.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+import { DomElementBase } from './base.js';
+export declare class DomRadioGroupElement extends DomElementBase {
+	static readonly observedAttributes?: Array<string>;
+	static readonly __doc?: HeadlessElementDoc;
+	value: string;
+	readonly radios: Array<HTMLElement>;
+}
+export interface HeadlessElementDoc {
+	name?: string;
+	description?: string;
+	slots?: Array<Record<string, unknown>>;
+	attributes?: Array<Record<string, unknown>>;
+	events?: Array<Record<string, unknown>>;
+	keyboard?: Array<Record<string, unknown>>;
+	example?: string;
+	[key: string]: unknown;
+}

package/src/pages/lib/headless/radio-group.js

@@ -0,0 +1,100 @@
+import { DomElementBase, createRoving, defineDomElement } from './base.js';
+
+function valueOf(radio) {
+	return radio.dataset.value ?? radio.textContent.trim();
+}
+
+export class DomRadioGroupElement extends DomElementBase {
+	static get observedAttributes() { return ['value', 'orientation']; }
+
+	static __doc = {
+		name: 'dom-radio-group',
+		description: 'A radio group with roving focus and single-value selection.',
+		slots: [{ name: '(default)', description: 'Radio options with role="radio" and data-value.' }],
+		attributes: [
+			{ name: 'value', type: 'string', description: 'Selected value.' },
+			{ name: 'orientation', type: "'vertical' | 'horizontal'", description: 'Arrow-key direction. Defaults to vertical.' },
+		],
+		events: [{ name: 'dom:change', payload: '{ value, radio }', description: 'Fired when selected value changes.' }],
+		keyboard: [
+			{ keys: '↑ / ↓ or ← / →', action: 'Move selection depending on orientation.' },
+			{ keys: 'Home / End', action: 'Jump to first / last option.' },
+			{ keys: 'Space / Enter', action: 'Select focused option.' },
+		],
+	};
+
+	constructor() {
+		super();
+		this._roving = null;
+		this._refreshing = false;
+		this._onKey = this._onKey.bind(this);
+		this._onClick = this._onClick.bind(this);
+	}
+
+	connectedCallback() {
+		this.setAttribute('role', this.getAttribute('role') || 'radiogroup');
+		this._refresh();
+		this.on(this, 'keydown', this._onKey);
+		this.on(this, 'click', this._onClick);
+	}
+
+	attributeChangedCallback() {
+		this._refresh();
+	}
+
+	get value() { return this.getAttribute('value') || ''; }
+	set value(value) {
+		if (value == null || value === '') this.removeAttribute('value');
+		else this.setAttribute('value', value);
+	}
+
+	get radios() {
+		return Array.from(this.querySelectorAll('[role="radio"]'))
+			.filter((radio) => !radio.hasAttribute('disabled') && radio.getAttribute('aria-disabled') !== 'true');
+	}
+
+	_refresh() {
+		const radios = this.radios;
+		const orientation = this.getAttribute('orientation') || 'vertical';
+		this.setAttribute('aria-orientation', orientation);
+		let active = Math.max(0, radios.findIndex((radio) => valueOf(radio) === this.value));
+		radios.forEach((radio, index) => {
+			radio.tabIndex = index === active ? 0 : -1;
+			radio.setAttribute('aria-checked', String(valueOf(radio) === this.value));
+		});
+		this._refreshing = true;
+		this._roving = createRoving({
+			items: radios,
+			orientation,
+			loop: true,
+			onSelect: (_, radio) => this._select(radio),
+		});
+		this._roving.setActive(active, { focus: false, select: false });
+		this._refreshing = false;
+	}
+
+	_select(radio, event) {
+		const value = valueOf(radio);
+		if (value === this.value) return;
+		this.value = value;
+		this._refresh();
+		if (!this._refreshing) this.emit('dom:change', { value, radio, event });
+	}
+
+	_onClick(event) {
+		const radio = event.target.closest('[role="radio"]');
+		if (!radio || !this.contains(radio)) return;
+		this._select(radio, event);
+	}
+
+	_onKey(event) {
+		this._roving?.onKey(event);
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		const radio = document.activeElement?.closest?.('[role="radio"]');
+		if (!radio || !this.contains(radio)) return;
+		event.preventDefault();
+		this._select(radio, event);
+	}
+}
+
+defineDomElement('dom-radio-group', DomRadioGroupElement);

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

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+import { DomElementBase } from './base.js';
+export declare class DomTabsElement extends DomElementBase {
+	static readonly observedAttributes?: Array<string>;
+	static readonly __doc?: HeadlessElementDoc;
+	value: string | null;
+}
+export interface HeadlessElementDoc {
+	name?: string;
+	description?: string;
+	slots?: Array<Record<string, unknown>>;
+	attributes?: Array<Record<string, unknown>>;
+	events?: Array<Record<string, unknown>>;
+	keyboard?: Array<Record<string, unknown>>;
+	example?: string;
+	[key: string]: unknown;
+}

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

@@ -0,0 +1,119 @@
+import { DomElementBase, defineDomElement, uid, createRoving } from './base.js';
+
+// <dom-tabs value="overview">
+// 	<div role="tablist">
+// 		<button data-tab="overview">Overview</button>
+// 	</div>
+// 	<div data-panel="overview">…</div>
+// </dom-tabs>
+export class DomTabsElement extends DomElementBase {
+	static get observedAttributes() { return ['value']; }
+
+	static __doc = {
+		name: 'dom-tabs',
+		description: 'Tab list with managed ARIA, roving tabindex and panel linking via data-tab / data-panel pairs.',
+		slots: [
+			{ name: '(structural)', description: 'Pair each <button data-tab="key"> with a panel <div data-panel="key">. The tablist wrapper carries role="tablist".' },
+		],
+		attributes: [
+			{ name: 'value', type: 'string', description: 'Active tab key. Mirrors the currently-selected data-tab value.' },
+		],
+		events: [
+			{ name: 'dom:change', payload: '{ value }', description: 'Fired when the active tab changes.' },
+		],
+		keyboard: [
+			{ keys: '← / →', action: 'Move to previous / next tab.' },
+			{ keys: 'Home / End', action: 'Jump to first / last tab.' },
+			{ keys: 'Enter / Space', action: 'Activate focused tab.' },
+		],
+		example: `<dom-tabs value="overview">
+\t<div role="tablist">
+\t\t<button data-tab="overview">Overview</button>
+\t\t<button data-tab="pricing">Pricing</button>
+\t</div>
+\t<div data-panel="overview">Overview content…</div>
+\t<div data-panel="pricing">Pricing content…</div>
+</dom-tabs>`,
+	};
+
+	connectedCallback() {
+		if (this._connected) return;
+		this._connected = true;
+		this._observer = new MutationObserver(() => this._refresh());
+		this._observer.observe(this, { childList: true, subtree: true });
+		this._refresh();
+	}
+
+	disconnectedCallback() {
+		this._observer?.disconnect();
+		this._observer = null;
+		this._teardownTabs();
+		this._connected = false;
+		super.disconnectedCallback();
+	}
+
+	_refresh() {
+		this._teardownTabs();
+		this._tablist = this.querySelector('[role="tablist"], [data-tablist]');
+		this._tabs = Array.from(this.querySelectorAll('[data-tab]'));
+		this._panels = Array.from(this.querySelectorAll('[data-panel]'));
+		if (!this._tabs.length) return;
+
+		const id = uid('tabs');
+		this._tablist?.setAttribute('role', 'tablist');
+		this._tabs.forEach((tab, i) => {
+			tab.setAttribute('role', 'tab');
+			tab.id = tab.id || `${id}-tab-${i}`;
+			const key = tab.dataset.tab;
+			const panel = this._panels.find((p) => p.dataset.panel === key);
+			if (panel) {
+				panel.setAttribute('role', 'tabpanel');
+				panel.id = panel.id || `${id}-panel-${i}`;
+				panel.setAttribute('aria-labelledby', tab.id);
+				tab.setAttribute('aria-controls', panel.id);
+			}
+			this._tabOffs.push(this.on(tab, 'click', () => { this.value = key; }));
+		});
+
+		this._roving = createRoving({
+			items: this._tabs,
+			orientation: 'horizontal',
+			onSelect: (_, el) => { this.value = el.dataset.tab; },
+		});
+		if (this._tablist) this._tabOffs.push(this.on(this._tablist, 'keydown', this._roving.onKey));
+
+		const current = this.getAttribute('value');
+		const next = this._tabs.some((tab) => tab.dataset.tab === current)
+			? current
+			: this._tabs[0].dataset.tab;
+		this.value = next;
+	}
+
+	_teardownTabs() {
+		for (const off of this._tabOffs || []) off();
+		this._tabOffs = [];
+	}
+
+	get value() { return this.getAttribute('value'); }
+	set value(next) {
+		// Always run the DOM sync — even when `next` equals the current attribute
+		// (which happens on initial render when `<dom-tabs value="…">` ships
+		// with the value pre-set), otherwise panels stay visible until the first
+		// tab click. Only the change event is gated on an actual change.
+		const prev = this.getAttribute('value');
+		if (prev !== next) this.setAttribute('value', next);
+		if (!this._tabs || !this._panels) return;
+		this._tabs.forEach((tab) => {
+			const active = tab.dataset.tab === next;
+			tab.setAttribute('aria-selected', String(active));
+			tab.tabIndex = active ? 0 : -1;
+			tab.toggleAttribute('data-active', active);
+		});
+		this._panels.forEach((panel) => {
+			panel.hidden = panel.dataset.panel !== next;
+		});
+		if (prev !== next) this.emit('dom:change', { value: next });
+	}
+}
+
+defineDomElement('dom-tabs', DomTabsElement);

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

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+import { DomElementBase } from './base.js';
+export interface HeadlessToastOptions {
+	title?: string;
+	description?: string;
+	duration?: number;
+	tone?: string;
+	[key: string]: unknown;
+}
+export declare class DomToastRegionElement extends DomElementBase {
+	show(options?: HeadlessToastOptions): string;
+}