@getdom/studio 0.1.0

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

@@ -0,0 +1,65 @@
+import { DomElementBase, defineDomElement } from './base.js';
+
+export class DomToastRegionElement extends DomElementBase {
+	static __doc = {
+		name: 'dom-toast-region',
+		description: 'A live region for transient notifications. Call show() to add dismissible toasts.',
+		events: [{ name: 'dom:dismiss', payload: '{ id }', description: 'Fired when a toast is dismissed.' }],
+	};
+
+	connectedCallback() {
+		this.setAttribute('role', this.getAttribute('role') || 'region');
+		this.setAttribute('aria-live', this.getAttribute('aria-live') || 'polite');
+		this.setAttribute('aria-relevant', 'additions removals');
+	}
+
+	show({
+		id = crypto.randomUUID(),
+		title = '',
+		description = '',
+		tone = 'default',
+		duration = 4500,
+		html = '',
+		content = null,
+		dismissible = true,
+	} = {}) {
+		const toast = document.createElement('div');
+		toast.dataset.toastId = id;
+		toast.dataset.tone = tone;
+		toast.setAttribute('role', tone === 'danger' ? 'alert' : 'status');
+		const body = document.createElement('div');
+		if (typeof Node !== 'undefined' && content instanceof Node) {
+			body.appendChild(content);
+		} else if (html) {
+			body.innerHTML = html;
+		} else if (title) {
+			const strong = document.createElement('strong');
+			strong.textContent = title;
+			body.appendChild(strong);
+		}
+		if (description) {
+			const text = document.createElement('p');
+			text.textContent = description;
+			body.appendChild(text);
+		}
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.setAttribute('aria-label', 'Dismiss');
+		button.textContent = '×';
+		toast.append(body);
+		if (dismissible) toast.append(button);
+		let dismissed = false;
+		const dismiss = () => {
+			if (dismissed) return;
+			dismissed = true;
+			toast.remove();
+			this.emit('dom:dismiss', { id });
+		};
+		button.addEventListener('click', dismiss);
+		this.appendChild(toast);
+		if (duration > 0) window.setTimeout(dismiss, duration);
+		return id;
+	}
+}
+
+defineDomElement('dom-toast-region', DomToastRegionElement);

package/src/pages/lib/headless/toggle.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 DomToggleElement extends DomElementBase {
+	static readonly observedAttributes?: Array<string>;
+	static readonly __doc?: HeadlessElementDoc;
+	checked: 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;
+}

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

@@ -0,0 +1,162 @@
+import { DomElementBase, defineDomElement, isBrowser } from './base.js';
+
+const STYLE_ID = 'dom-toggle-styles';
+
+/**
+ * Install the shared switch styles used by every headless toggle instance.
+ *
+ * @returns {void}
+ */
+function ensureToggleStyles() {
+	if (!isBrowser || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement('style');
+	style.id = STYLE_ID;
+	style.textContent = `
+dom-toggle {
+	position: relative;
+	display: inline-flex;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	height: var(--dom-toggle-height, 1.5rem);
+	width: var(--dom-toggle-width, 2.75rem);
+	cursor: pointer;
+	border: 0;
+	padding: 0;
+	border-radius: 9999px;
+	background: var(--input);
+	transition: background-color 150ms ease;
+	vertical-align: middle;
+}
+dom-toggle:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+dom-toggle[aria-checked="true"] {
+	background: var(--primary);
+}
+dom-toggle[aria-disabled="true"] {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+dom-toggle::after {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: var(--dom-toggle-padding, 2px);
+	width: var(--dom-toggle-thumb-size, 1.25rem);
+	height: var(--dom-toggle-thumb-size, 1.25rem);
+	border-radius: 9999px;
+	background: var(--canvas);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+	transform: translateY(-50%);
+	transition: transform 150ms ease;
+	pointer-events: none;
+}
+dom-toggle[aria-checked="true"]::after {
+	transform: translate(var(--dom-toggle-thumb-offset, 1.25rem), -50%);
+}
+`;
+	document.head.appendChild(style);
+}
+
+ensureToggleStyles();
+
+// <dom-toggle checked></dom-toggle>
+export class DomToggleElement extends DomElementBase {
+	/**
+	 * Return attributes that should resync the switch accessibility state.
+	 *
+	 * @returns {string[]}
+	 */
+	static get observedAttributes() { return ['checked', 'disabled']; }
+
+	static __doc = {
+		name: 'dom-toggle',
+		description: 'Accessible switch with role="switch", keyboard support, and aria-checked maintained as you toggle.',
+		slots: [],
+		attributes: [
+			{ name: 'checked', type: 'boolean', description: 'Reflects on/off state.' },
+			{ name: 'disabled', type: 'boolean', description: 'Disables the toggle.' },
+			{ name: 'aria-label', type: 'string', description: 'Accessible name when no visible label is provided.' },
+		],
+		events: [
+			{ name: 'dom:change', payload: '{ checked }', description: 'Fired when the toggle is flipped.' },
+		],
+		keyboard: [
+			{ keys: 'Space / Enter', action: 'Toggle the value.' },
+			{ keys: 'Tab', action: 'Move focus through toggles in source order.' },
+		],
+		example: `<dom-toggle checked aria-label="Notifications"></dom-toggle>
+
+<script type="module">
+  import '@getdom/studio/headless';
+  document.querySelector('dom-toggle')
+    .addEventListener('dom:change', (e) => console.log(e.detail.checked));
+<\/script>`,
+	};
+
+	/**
+	 * Configure switch semantics, focusability, and interaction handlers.
+	 *
+	 * @returns {void}
+	 */
+	connectedCallback() {
+		this.setAttribute('role', 'switch');
+		this.tabIndex = this.hasAttribute('disabled') ? -1 : 0;
+		this._sync();
+		this.on(this, 'click', () => this.toggle());
+		this.on(this, 'keydown', (e) => {
+			if (e.key === ' ' || e.key === 'Enter') {
+				e.preventDefault();
+				this.toggle();
+			}
+		});
+	}
+
+	/**
+	 * Resync ARIA and focus state after an observed attribute changes.
+	 *
+	 * @returns {void}
+	 */
+	attributeChangedCallback() { this._sync(); }
+
+	/**
+	 * Reflect checked and disabled state to ARIA attributes and keyboard focus.
+	 *
+	 * @returns {void}
+	 */
+	_sync() {
+		this.setAttribute('aria-checked', String(this.checked));
+		const disabled = this.hasAttribute('disabled');
+		this.tabIndex = disabled ? -1 : 0;
+		if (disabled) this.setAttribute('aria-disabled', 'true');
+		else this.removeAttribute('aria-disabled');
+	}
+
+	/**
+	 * Read the reflected checked state.
+	 *
+	 * @returns {boolean}
+	 */
+	get checked() { return this.boolAttr('checked'); }
+
+	/**
+	 * Reflect a new checked state onto the element.
+	 *
+	 * @param {boolean} value - Whether the switch should be checked.
+	 */
+	set checked(value) { this.setBoolAttr('checked', !!value); }
+
+	/**
+	 * Toggle the switch state and emit the change event.
+	 *
+	 * @returns {void}
+	 */
+	toggle() {
+		if (this.hasAttribute('disabled')) return;
+		this.checked = !this.checked;
+		this.emit('dom:change', { checked: this.checked });
+	}
+}
+
+defineDomElement('dom-toggle', DomToggleElement);

package/src/pages/lib/headless/tooltip-controller.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// Generated by scripts/generate-types.mjs. Do not edit by hand.
+export type DomTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface DomTooltipOptions {
+	text?: string;
+	placement?: DomTooltipPlacement;
+	delay?: number;
+	offset?: number;
+	collisionPadding?: number;
+	floatingMode?: 'viewport' | 'anchor';
+	flip?: boolean;
+}
+export declare class DomTooltipController {
+	constructor(trigger: HTMLElement, options?: DomTooltipOptions, eventTarget?: EventTarget);
+	readonly trigger: HTMLElement;
+	readonly eventTarget: EventTarget;
+	update(options?: DomTooltipOptions): void;
+	show(): void;
+	hide(): void;
+	destroy(): void;
+}
+export declare function attachTooltip(trigger: HTMLElement, options?: DomTooltipOptions, eventTarget?: EventTarget): DomTooltipController;