@getdom/studio 0.1.0

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

@@ -0,0 +1,117 @@
+import { DomElementBase, createRoving, defineDomElement } from './base.js';
+
+const itemSelector = [
+	'[role="menuitem"]',
+	'[role="menuitemcheckbox"]',
+	'[role="menuitemradio"]',
+].join(',');
+
+function isDisabled(el) {
+	return el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true';
+}
+
+export class DomMenuElement extends DomElementBase {
+	static get observedAttributes() { return ['orientation']; }
+
+	static __doc = {
+		name: 'dom-menu',
+		description: 'A roving-focus action menu for command lists, static menus, and menu panels.',
+		slots: [{ name: '(default)', description: 'Menu items with role="menuitem", role="menuitemcheckbox", or role="menuitemradio".' }],
+		attributes: [
+			{ name: 'orientation', type: "'vertical' | 'horizontal'", description: 'Arrow-key direction. Defaults to vertical.' },
+		],
+		events: [
+			{ name: 'dom:select', payload: '{ value, item }', description: 'Fired when an item is selected.' },
+			{ name: 'dom:change', payload: '{ value, checked, item }', description: 'Fired when a checkbox or radio menu item changes.' },
+		],
+		keyboard: [
+			{ keys: '↑ / ↓', action: 'Move active item.' },
+			{ keys: 'Home / End', action: 'Jump to first / last item.' },
+			{ keys: 'Enter / Space', action: 'Select active item.' },
+		],
+	};
+
+	constructor() {
+		super();
+		this._roving = null;
+		this._onKey = this._onKey.bind(this);
+		this._onClick = this._onClick.bind(this);
+	}
+
+	connectedCallback() {
+		this.setAttribute('role', this.getAttribute('role') || 'menu');
+		this._refresh();
+		this.on(this, 'keydown', this._onKey);
+		this.on(this, 'click', this._onClick);
+	}
+
+	attributeChangedCallback() {
+		this._refresh();
+	}
+
+	_refresh() {
+		const items = this.items;
+		const orientation = this.getAttribute('orientation') || 'vertical';
+		this.setAttribute('aria-orientation', orientation);
+		items.forEach((item, index) => { item.tabIndex = index === 0 ? 0 : -1; });
+		this._roving = createRoving({ items, orientation, loop: true });
+	}
+
+	get items() {
+		return Array.from(this.querySelectorAll(itemSelector))
+			.filter((item) => item.closest('dom-menu') === this)
+			.filter((item) => !isDisabled(item));
+	}
+
+	_select(item, event) {
+		const role = item.getAttribute('role');
+		const value = item.dataset.value ?? item.textContent.trim();
+
+		if (item.getAttribute('aria-haspopup') === 'menu') {
+			item.setAttribute('aria-expanded', 'true');
+			this.emit('dom:submenu', { value, item, event });
+			return;
+		}
+
+		if (role === 'menuitemcheckbox') {
+			const checked = item.getAttribute('aria-checked') !== 'true';
+			item.setAttribute('aria-checked', String(checked));
+			this.emit('dom:change', { value, checked, item, event });
+		}
+
+		if (role === 'menuitemradio') {
+			for (const radio of this.querySelectorAll('[role="menuitemradio"]')) {
+				radio.setAttribute('aria-checked', String(radio === item));
+			}
+			this.emit('dom:change', { value, checked: true, item, event });
+		}
+
+		this.emit('dom:select', { value, item, event });
+	}
+
+	_onClick(event) {
+		if (event.target.closest('[data-dom-menu-accessory]')) return;
+		const item = event.target.closest(itemSelector);
+		if (!item || !this.contains(item)) return;
+		if (item.closest('dom-menu') !== this) return;
+		if (isDisabled(item)) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		this._select(item, event);
+	}
+
+	_onKey(event) {
+		this._roving?.onKey(event);
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		const item = document.activeElement?.closest?.(itemSelector);
+		if (!item || !this.contains(item) || isDisabled(item)) return;
+		if (document.activeElement?.closest?.('[data-dom-menu-accessory]')) return;
+		if (item.closest('dom-menu') !== this) return;
+		event.preventDefault();
+		this._select(item, event);
+	}
+}
+
+defineDomElement('dom-menu', DomMenuElement);

package/src/pages/lib/headless/popover-panel.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+import type { FloatingPositionOptions, FloatingPositionResult } from './floating.js';
+export declare function preparePopoverPanel(panel: HTMLElement | null, trigger?: HTMLElement | null): void;
+export declare function setPopoverOpen(panel: HTMLElement | null, open: boolean): void;
+export declare function openPopoverPanel(panel: HTMLElement | null, trigger?: HTMLElement | null, options?: FloatingPositionOptions, afterPlace?: () => void): void;
+export declare function closePopoverPanel(panel: HTMLElement | null, options?: { immediate?: boolean }): void;
+export declare function isPopoverOpen(panel: HTMLElement | null): boolean;
+export declare function positionPopoverPanel(panel: HTMLElement | null, trigger: HTMLElement | null, options?: FloatingPositionOptions & { animatePlacement?: boolean }): FloatingPositionResult | undefined;
+export declare function attachPopoverReflow(panel: HTMLElement, trigger: HTMLElement, options?: FloatingPositionOptions): () => void;
+export declare function readFloatingPositionOptions(host: HTMLElement, defaults?: FloatingPositionOptions): FloatingPositionOptions;
+export declare function bindFloatingReflow(host: HTMLElement & { _reflowOff?: (() => void) | null }, panel: HTMLElement, trigger: HTMLElement, options?: FloatingPositionOptions): void;
+export declare function unbindFloatingReflow(host: HTMLElement & { _reflowOff?: (() => void) | null }): void;
+export declare function syncFloatingScrollLock(host: HTMLElement & Record<string, unknown>, panel: HTMLElement, next: boolean, stateKey?: string): void;
+export declare function bindPopoverToggle(panel: HTMLElement, handler: (open: boolean) => void): () => void;
+export declare function lockDocumentScroll(panel?: HTMLElement | null): void;
+export declare function unlockDocumentScroll(panel?: HTMLElement | null): void;
+export declare function ensurePopoverPanelStyles(): void;

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

@@ -0,0 +1,309 @@
+import { isBrowser, uid } from './base.js';
+import {
+	applyFloatingPosition,
+	autoUpdateFloating,
+} from './floating.js';
+import {
+	beginFloatingEffectEnter,
+	beginFloatingEffectLeave,
+	hasFloatingEffect,
+	prepareFloatingEffect,
+	resetFloatingEffectState,
+} from './floating-effect.js';
+
+/** Wire a panel for the native Popover API (top layer + light dismiss). */
+export function preparePopoverPanel(panel, trigger) {
+	if (!panel) return;
+	const id = uid('pop');
+	panel.id = panel.id || `${id}-panel`;
+	if (!panel.hasAttribute('popover')) {
+		panel.setAttribute('popover', 'auto');
+	}
+	prepareFloatingEffect(panel);
+	trigger?.setAttribute('aria-controls', panel.id);
+}
+
+export function setPopoverOpen(panel, open) {
+	if (!panel) return;
+	if (open) openPopoverPanel(panel);
+	else closePopoverPanel(panel);
+}
+
+function sideOf(placement = 'bottom') {
+	return String(placement).split('-')[0] || 'bottom';
+}
+
+/** Show a popover panel and anchor it under `trigger` (re-run after top-layer promotion). */
+export function openPopoverPanel(panel, trigger, options = {}, afterPlace) {
+	if (!panel) return;
+	delete panel.dataset.leaving;
+	delete panel.dataset.skipLeave;
+	panel.dataset.side = sideOf(options.placement);
+	panel.dataset.placement = options.placement || 'bottom';
+	const place = () => {
+		if (trigger) positionPopoverPanel(panel, trigger, { ...options, animatePlacement: true });
+		afterPlace?.();
+	};
+	const animated = beginFloatingEffectEnter(panel, {
+		beforeMeasure: () => {
+			if (!isPopoverOpen(panel)) panel.showPopover?.();
+			place();
+		},
+		beforeFrame: place,
+		delayFrames: 1,
+		shouldContinue: () => isPopoverOpen(panel),
+	});
+	if (!animated) {
+		if (!isPopoverOpen(panel)) panel.showPopover?.();
+		place();
+	}
+}
+
+function finishClose(panel) {
+	panel.dataset.skipLeave = 'true';
+	if (isPopoverOpen(panel)) panel.hidePopover?.();
+	delete panel.dataset.skipLeave;
+	resetFloatingEffectState(panel);
+}
+
+export function closePopoverPanel(panel, { immediate = false } = {}) {
+	if (!panel) return;
+	beginFloatingEffectLeave(panel, {
+		immediate: immediate || !isPopoverOpen(panel),
+		finish: () => finishClose(panel),
+		shouldContinue: () => isPopoverOpen(panel),
+	});
+}
+
+export function isPopoverOpen(panel) {
+	return !!panel?.matches?.(':popover-open');
+}
+
+/** Anchor a top-layer popover panel under its trigger (fixed coords). */
+export function positionPopoverPanel(panel, trigger, { align = 'left', offset = 8, placement = 'bottom', padding = 8, mode = 'viewport', flip = true, animatePlacement } = {}) {
+	if (!panel || !trigger || typeof window === 'undefined') return;
+	const result = applyFloatingPosition(trigger, panel, { align, offset, placement, padding, mode, flip });
+	if (result) {
+		const shouldAnimatePlacement = panel.dataset.entering || panel.dataset.leaving
+			? true
+			: animatePlacement ?? !result.flipped;
+		panel.toggleAttribute('data-placement-ready', true);
+		panel.toggleAttribute('data-animate-placement', shouldAnimatePlacement);
+	}
+	return result;
+}
+
+/** Keep the panel aligned while scrolling or resizing. Returns an unbind fn. */
+export function attachPopoverReflow(panel, trigger, options = {}) {
+	const update = () => positionPopoverPanel(panel, trigger, options);
+	update();
+	return autoUpdateFloating(trigger, panel, update);
+}
+
+export function readFloatingPositionOptions(host, defaults = {}) {
+	const {
+		align = 'left',
+		offset = 8,
+		placement = 'bottom',
+		padding = 8,
+		mode = 'viewport',
+		flip,
+	} = defaults;
+	const options = {
+		align: host.getAttribute('align') || align,
+		offset: Number(host.getAttribute('offset') || offset),
+		placement: host.getAttribute('placement') || placement,
+		padding: Number(host.getAttribute('collision-padding') || padding),
+		mode: host.getAttribute('floating-mode') || mode,
+	};
+	if (flip !== undefined) options.flip = host.getAttribute('flip') !== 'false';
+	return options;
+}
+
+export function bindFloatingReflow(host, panel, trigger, options = {}) {
+	host._reflowOff?.();
+	host._reflowOff = attachPopoverReflow(panel, trigger, options);
+}
+
+export function unbindFloatingReflow(host) {
+	host._reflowOff?.();
+	host._reflowOff = null;
+}
+
+export function syncFloatingScrollLock(host, panel, next, stateKey = '_scrollLocked') {
+	if (next && host.hasAttribute('lock-scroll') && !host[stateKey]) {
+		lockDocumentScroll(panel);
+		host[stateKey] = true;
+	} else if ((!next || !host.hasAttribute('lock-scroll')) && host[stateKey]) {
+		unlockDocumentScroll(panel);
+		host[stateKey] = false;
+	}
+}
+
+/** Sync host state when the browser opens/closes the popover. Returns an unbind fn. */
+export function bindPopoverToggle(panel, handler) {
+	const onBeforeToggle = (e) => {
+		if (
+			e.newState === 'closed'
+			&& panel.dataset.skipLeave !== 'true'
+			&& hasFloatingEffect(panel)
+			&& isPopoverOpen(panel)
+		) {
+			e.preventDefault();
+			handler(false);
+			closePopoverPanel(panel);
+		}
+	};
+	const onToggle = (e) => handler(e.newState === 'open');
+	panel.addEventListener('beforetoggle', onBeforeToggle);
+	panel.addEventListener('toggle', onToggle);
+	return () => {
+		panel.removeEventListener('beforetoggle', onBeforeToggle);
+		panel.removeEventListener('toggle', onToggle);
+	};
+}
+
+let scrollLockCount = 0;
+let previousHtmlOverflow = '';
+let previousHtmlOverscrollBehavior = '';
+let previousBodyOverflow = '';
+let previousBodyPaddingRight = '';
+let previousBodyOverscrollBehavior = '';
+let scrollLockOff = null;
+let touchStartY = 0;
+const scrollLockPanels = new Set();
+
+function lockedPanelFor(target) {
+	for (const panel of scrollLockPanels) {
+		if (panel?.isConnected && panel.contains(target)) return panel;
+	}
+	return null;
+}
+
+function closestScrollable(target, panel) {
+	let node = target instanceof Element ? target : target?.parentElement;
+	while (node && node !== document.body) {
+		if (node instanceof Element) {
+			const style = window.getComputedStyle(node);
+			const overflow = `${style.overflowY} ${style.overflow}`;
+			if (/(auto|scroll|overlay)/.test(overflow) && node.scrollHeight > node.clientHeight) {
+				return node;
+			}
+		}
+		if (node === panel) break;
+		node = node.parentElement;
+	}
+	return null;
+}
+
+function canScrollElement(element, deltaY) {
+	if (!element || !deltaY) return false;
+	if (deltaY < 0) return element.scrollTop > 0;
+	return element.scrollTop + element.clientHeight < element.scrollHeight - 1;
+}
+
+function canScrollInsideLockedPanel(target, deltaY) {
+	const panel = lockedPanelFor(target);
+	if (!panel) return false;
+	return canScrollElement(closestScrollable(target, panel), deltaY);
+}
+
+function bindScrollLockEvents() {
+	const onWheel = (event) => {
+		if (canScrollInsideLockedPanel(event.target, event.deltaY)) return;
+		event.preventDefault();
+	};
+	const onTouchStart = (event) => {
+		touchStartY = event.touches?.[0]?.clientY ?? 0;
+	};
+	const onTouchMove = (event) => {
+		const nextY = event.touches?.[0]?.clientY ?? touchStartY;
+		const deltaY = touchStartY - nextY;
+		if (canScrollInsideLockedPanel(event.target, deltaY)) {
+			touchStartY = nextY;
+			return;
+		}
+		event.preventDefault();
+	};
+	const onKeydown = (event) => {
+		if (lockedPanelFor(event.target)) return;
+		if (!['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', ' '].includes(event.key)) return;
+		event.preventDefault();
+	};
+	document.addEventListener('wheel', onWheel, { capture: true, passive: false });
+	document.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
+	document.addEventListener('touchmove', onTouchMove, { capture: true, passive: false });
+	document.addEventListener('keydown', onKeydown, true);
+	return () => {
+		document.removeEventListener('wheel', onWheel, true);
+		document.removeEventListener('touchstart', onTouchStart, true);
+		document.removeEventListener('touchmove', onTouchMove, true);
+		document.removeEventListener('keydown', onKeydown, true);
+	};
+}
+
+export function lockDocumentScroll(panel) {
+	if (!isBrowser) return;
+	if (panel) scrollLockPanels.add(panel);
+	scrollLockCount += 1;
+	if (scrollLockCount > 1) return;
+	previousHtmlOverflow = document.documentElement.style.overflow;
+	previousHtmlOverscrollBehavior = document.documentElement.style.overscrollBehavior;
+	previousBodyOverflow = document.body.style.overflow;
+	previousBodyPaddingRight = document.body.style.paddingRight;
+	previousBodyOverscrollBehavior = document.body.style.overscrollBehavior;
+	const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+	document.documentElement.style.overflow = 'hidden';
+	document.documentElement.style.overscrollBehavior = 'contain';
+	document.body.style.overflow = 'hidden';
+	document.body.style.overscrollBehavior = 'contain';
+	if (scrollbarWidth > 0) {
+		document.body.style.paddingRight = `${scrollbarWidth}px`;
+	}
+	scrollLockOff = bindScrollLockEvents();
+}
+
+export function unlockDocumentScroll(panel) {
+	if (!isBrowser || scrollLockCount === 0) return;
+	if (panel) scrollLockPanels.delete(panel);
+	scrollLockCount -= 1;
+	if (scrollLockCount > 0) return;
+	scrollLockPanels.clear();
+	scrollLockOff?.();
+	scrollLockOff = null;
+	document.documentElement.style.overflow = previousHtmlOverflow;
+	document.documentElement.style.overscrollBehavior = previousHtmlOverscrollBehavior;
+	document.body.style.overflow = previousBodyOverflow;
+	document.body.style.paddingRight = previousBodyPaddingRight;
+	document.body.style.overscrollBehavior = previousBodyOverscrollBehavior;
+}
+
+const STYLE_ID = 'dom-popover-panel-styles';
+
+/** Hide closed popover panels and neutralize native popover chrome. */
+export function ensurePopoverPanelStyles() {
+	if (!isBrowser || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement('style');
+	style.id = STYLE_ID;
+	style.textContent = `
+	@layer base {
+		:where([popover].dom-popover-panel, [popover].dom-dropdown-menu) {
+			background: transparent;
+			border: 0;
+			box-shadow: none;
+			color: inherit;
+			margin: 0;
+			overflow: visible;
+			padding: 0;
+		}
+	}
+
+	[popover].dom-popover-panel:not(:popover-open),
+	[popover].dom-dropdown-menu:not(:popover-open) {
+		display: none !important;
+	}
+	`;
+	document.head.appendChild(style);
+}
+
+ensurePopoverPanelStyles();

package/src/pages/lib/headless/popover.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 DomPopoverElement extends DomElementBase {
+	static readonly observedAttributes?: Array<string>;
+	static readonly __doc?: HeadlessElementDoc;
+	open: boolean;
+	toggle(): void;
+}
+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;
+}