@getdom/studio 0.1.0

package/src/pages/components/dialog/useDialogs.js

@@ -0,0 +1,253 @@
+import { ref } from 'vue';
+
+/**
+ * @typedef {import('vue').Component} DialogComponent
+ * @typedef {Record<string, unknown>} DialogProps
+ * @typedef {Array<{ component: string, props?: Record<string, unknown> }>} DialogFormSchema
+ *
+ * @typedef {Object} DialogOptions
+ * @property {string} [id] Stable dialog id. Generated automatically when omitted.
+ * @property {string} [title] Dialog title.
+ * @property {string} [description] Supporting text under the title.
+ * @property {string} [message] Body text for the default dialog body.
+ * @property {DialogComponent|string} [component] Component rendered as the dialog body.
+ * @property {DialogProps} [props] Props passed to a custom component body.
+ * @property {DialogFormSchema} [formSchema] DomForm children schema rendered as a dialog form.
+ * @property {Record<string, unknown>} [formValues] Initial values for a schema dialog form.
+ * @property {boolean} [backdrop] Show the visual backdrop. Defaults to true.
+ * @property {boolean} [static] Disable backdrop and Esc dismissal.
+ * @property {boolean} [showCancel] Render a cancel action in the default footer.
+ * @property {boolean} [footer] Set false to hide the default footer.
+ * @property {string} [cancelText] Cancel button label.
+ * @property {string} [confirmText] Confirm button label.
+ * @property {string} [invalidMessage] Validation message shown by schema dialog forms.
+ * @property {'default'|'danger'|string} [tone] Visual tone for the confirm button.
+ * @property {'dialog'|'confirm'|'form'|string} [type] Dialog interaction type.
+ *
+ * Promise returned by dialog helpers. Resolves with submitted form data, a custom
+ * component payload, or a truthy/falsey result for default and confirm dialogs.
+ * The assigned dialog id is exposed on `.id`.
+ * @typedef {Promise<unknown> & { id: string }} DialogPromise
+ *
+ * @typedef {Object} DialogApi
+ * @property {import('vue').Ref<Array<DialogOptions & { id: string }>>} dialogStack Reactive dialog array for <DomDialogStack>.
+ * @property {(input?: string|DialogOptions|DialogComponent, propsOrOptions?: DialogProps|DialogOptions, options?: DialogOptions) => DialogPromise} showDialog Show a dialog and resolve with the user action.
+ * @property {(input?: string|DialogOptions, options?: DialogOptions) => Promise<boolean>} confirmDialog Show a confirmation dialog and resolve true or false.
+ * @property {(input: DialogComponent|DialogFormSchema, propsOrOptions?: DialogProps|DialogOptions, options?: DialogOptions) => DialogPromise} dialogForm Show a custom component or schema-driven form dialog.
+ * @property {(id: string, value?: unknown) => void} resolveDialog Resolve and remove a dialog by id.
+ * @property {(id: string, value?: unknown) => void} dismissDialog Dismiss and remove a dialog by id.
+ * @property {() => void} clearDialogs Dismiss all dialogs.
+ */
+
+/**
+ * Creates a small controlled dialog store for <DomDialogStack>.
+ *
+ * @param {DialogOptions} [defaults] Options applied to every dialog shown by this store.
+ * @returns {DialogApi}
+ */
+export function useDialogs(defaults = {}) {
+	const dialogStack = ref([]);
+	const pending = new Map();
+
+	/**
+	 * Show a programmatic dialog.
+	 *
+	 * Strings and plain objects render a default body/footer:
+	 * `showDialog({ title: 'Saved', message: 'Everything is up to date.' })`.
+	 *
+	 * Components render as custom dialog bodies:
+	 * `showDialog(InviteForm, { email }, { title: 'Invite teammate' })`.
+	 *
+	 * @param {string|DialogOptions|DialogComponent} [input] Dialog title string, full dialog options, or Vue component body.
+	 * @param {DialogProps|DialogOptions} [propsOrOptions] Props for component dialogs, or option overrides for default dialogs.
+	 * @param {DialogOptions} [options] Additional options when the first argument is a Vue component.
+	 * @returns {DialogPromise}
+	 */
+	function showDialog(input = {}, propsOrOptions = {}, options = {}) {
+		const dialog = normalizeDialog(input, propsOrOptions, options, defaults);
+		const promise = createDialogPromise(dialog);
+		dialogStack.value = [...dialogStack.value, dialog];
+		return promise;
+	}
+
+	/**
+	 * Show a confirmation dialog and resolve with a boolean.
+	 *
+	 * `confirmDialog('Archive project?', { tone: 'danger', confirmText: 'Archive' })`.
+	 *
+	 * @param {string|DialogOptions} [input] Confirmation title string or full dialog options.
+	 * @param {DialogOptions} [options] Additional option overrides merged into the confirm dialog.
+	 * @returns {Promise<boolean>} True when confirmed, false when cancelled or dismissed.
+	 */
+	function confirmDialog(input = {}, options = {}) {
+		const base = typeof input === 'string' ? { title: input } : { ...input };
+		return showDialog({
+			type: 'confirm',
+			confirmText: 'Confirm',
+			...base,
+			...options,
+		}).then(Boolean);
+	}
+
+	/**
+	 * Show a custom component dialog or render a DomForm from a children schema.
+	 *
+	 * Component forms:
+	 * `dialogForm(InviteForm, { defaultEmail }, { title: 'Invite teammate' })`.
+	 *
+	 * Schema forms:
+	 * `dialogForm(schema, { initialValues: { email: '' } }, { title: 'Invite' })`.
+	 *
+	 * @param {DialogComponent|DialogFormSchema} input Vue component body or DomForm children schema.
+	 * @param {DialogProps|DialogOptions} [propsOrOptions] Component props, or for schema forms `{ initialValues, values, ...dialogOptions }`.
+	 * @param {DialogOptions} [options] Dialog chrome overrides such as title, description, and confirmText.
+	 * @returns {DialogPromise}
+	 */
+	function dialogForm(input, propsOrOptions = {}, options = {}) {
+		if (Array.isArray(input)) {
+			const { initialValues, values, ...dialogOptions } = propsOrOptions || {};
+			return showDialog({
+				title: 'Form',
+				confirmText: 'Submit',
+				footer: false,
+				...dialogOptions,
+				...options,
+				type: 'form',
+				formSchema: input,
+				formValues: values || initialValues || {},
+			});
+		}
+
+		return showDialog(input, propsOrOptions, {
+			footer: false,
+			...options,
+		});
+	}
+
+	/**
+	 * Resolve and remove a dialog. Wire to <DomDialogStack> `@resolve`.
+	 *
+	 * @param {string} id Dialog id from the returned promise `.id` or `dialogStack` entry.
+	 * @param {unknown} [value] Value passed to the dialog promise resolver. Defaults to `true`.
+	 * @returns {void}
+	 */
+	function resolveDialog(id, value = true) {
+		settle(id, value);
+	}
+
+	/**
+	 * Dismiss and remove a dialog. Wire to <DomDialogStack> `@dismiss`.
+	 *
+	 * @param {string} id Dialog id from the returned promise `.id` or `dialogStack` entry.
+	 * @param {unknown} [value] Value passed to the dialog promise resolver. Defaults to `false`.
+	 * @returns {void}
+	 */
+	function dismissDialog(id, value = false) {
+		settle(id, value);
+	}
+
+	/**
+	 * Dismiss all visible dialogs. Each open promise resolves with `false`.
+	 *
+	 * @returns {void}
+	 */
+	function clearDialogs() {
+		for (const dialog of dialogStack.value) dismissDialog(dialog.id);
+	}
+
+	/**
+	 * @param {DialogOptions & { id: string }} dialog
+	 * @returns {DialogPromise}
+	 */
+	function createDialogPromise(dialog) {
+		let resolver = null;
+		const promise = new Promise((resolvePromise) => {
+			resolver = resolvePromise;
+		});
+		pending.set(dialog.id, resolver);
+		promise.id = dialog.id;
+		return promise;
+	}
+
+	/**
+	 * @param {string} id
+	 * @param {unknown} value
+	 * @returns {void}
+	 */
+	function settle(id, value) {
+		const resolver = pending.get(id);
+		pending.delete(id);
+		dialogStack.value = dialogStack.value.filter((dialog) => dialog.id !== id);
+		if (resolver) resolver(value);
+	}
+
+	return {
+		dialogStack,
+		showDialog,
+		confirmDialog,
+		dialogForm,
+		resolveDialog,
+		dismissDialog,
+		clearDialogs,
+	};
+}
+
+/**
+ * Merge caller input into a normalized dialog record for the stack.
+ *
+ * @param {string|DialogOptions|DialogComponent} input
+ * @param {DialogProps|DialogOptions} propsOrOptions
+ * @param {DialogOptions} options
+ * @param {DialogOptions} defaults
+ * @returns {DialogOptions & { id: string }}
+ */
+function normalizeDialog(input, propsOrOptions, options, defaults) {
+	const isComponentDialog = isDialogComponent(input);
+	const base = isComponentDialog
+		? { component: input, props: propsOrOptions || {}, footer: false }
+		: typeof input === 'string'
+			? { title: input }
+			: { ...input };
+	const overrides = isComponentDialog ? options : propsOrOptions;
+
+	return {
+		id: createDialogId(),
+		type: 'dialog',
+		backdrop: true,
+		static: false,
+		footer: true,
+		cancelText: 'Cancel',
+		confirmText: 'OK',
+		invalidMessage: 'Complete the required fields before continuing.',
+		tone: 'default',
+		...defaults,
+		...base,
+		...overrides,
+		props: {
+			...(defaults.props || {}),
+			...(base.props || {}),
+			...(overrides.props || {}),
+		},
+	};
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is DialogComponent}
+ */
+function isDialogComponent(value) {
+	return Boolean(
+		value
+		&& (typeof value === 'function'
+			|| (typeof value === 'object'
+				&& (value.setup || value.render || value.template || value.__name || value.__file))),
+	);
+}
+
+/**
+ * @returns {string}
+ */
+function createDialogId() {
+	if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID();
+	return `dialog-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}

package/src/pages/components/drawer/DomDrawer.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { computed, onMounted, ref, useId, watch } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Drawer',
+		tag: '<DomDrawer>',
+		description: 'A slide-out panel for navigation menus, filters, or secondary app panels with backdrop dismiss, drag dismiss, scroll lock, and focus trap built in.',
+		slots: [
+			{ name: 'trigger', description: 'Element that opens the drawer when clicked (omit when controlling open state yourself).' },
+			{ name: '(default)', description: 'Panel body.' },
+			{ name: 'header', description: 'Replace the default header row (title + close button).' },
+			{ name: 'footer', description: 'Optional footer below the scrollable body.' },
+		],
+		keyboard: [
+			{ keys: 'Esc', action: 'Closes the drawer.' },
+			{ keys: 'Tab / Shift+Tab', action: 'Focus stays within the panel while open.' },
+			{ keys: 'Click backdrop', action: 'Dismisses the drawer. Add `static` on the host to disable.' },
+			{ keys: 'Drag handle', action: 'Bottom drawers can be dragged down from the pill handle to close.' },
+		],
+	},
+});
+
+
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Whether the drawer is open.' },
+	},
+	side: {
+		type: String,
+		default: 'right',
+		_edit: { options: ['left', 'right', 'bottom'], description: 'Edge the panel slides in from.' },
+	},
+	title: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional heading at the top of the panel.' },
+	},
+	width: {
+		type: String,
+		default: 'var(--container-sm)',
+		_edit: {
+			description: 'Panel width as a CSS length — pick a Tailwind container variable or type your own (e.g. 50rem).',
+			component: 'DomCombobox',
+			props: {
+				// Tailwind v4 max-w-* resolves to var(--container-*). Store the variable so
+				// theme overrides apply; combobox hints show the matching utility name.
+				options: [
+					{ value: 'var(--container-3xs)', label: 'var(--container-3xs) · max-w-3xs' },
+					{ value: 'var(--container-2xs)', label: 'var(--container-2xs) · max-w-2xs' },
+					{ value: 'var(--container-xs)', label: 'var(--container-xs) · max-w-xs' },
+					{ value: 'var(--container-sm)', label: 'var(--container-sm) · max-w-sm' },
+					{ value: 'var(--container-md)', label: 'var(--container-md) · max-w-md' },
+					{ value: 'var(--container-lg)', label: 'var(--container-lg) · max-w-lg' },
+					{ value: 'var(--container-xl)', label: 'var(--container-xl) · max-w-xl' },
+					{ value: 'var(--container-2xl)', label: 'var(--container-2xl) · max-w-2xl' },
+					{ value: 'var(--container-3xl)', label: 'var(--container-3xl) · max-w-3xl' },
+					{ value: 'var(--container-4xl)', label: 'var(--container-4xl) · max-w-4xl' },
+					{ value: 'var(--container-5xl)', label: 'var(--container-5xl) · max-w-5xl' },
+					{ value: 'var(--container-6xl)', label: 'var(--container-6xl) · max-w-6xl' },
+					{ value: 'var(--container-7xl)', label: 'var(--container-7xl) · max-w-7xl' },
+				],
+				placeholder: 'var(--container-sm)',
+			},
+		},
+	},
+	static: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Disable backdrop-click dismiss. Esc and data-close still work.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'open', 'close']);
+
+const drawer = ref(null);
+const uniqueId = useId();
+const titleId = computed(() => (props.title ? `dom-drawer-${uniqueId}-title` : ''));
+
+const hostStyle = computed(() => ({
+	'--dom-drawer-width': props.width,
+}));
+
+function setOpen(v) {
+	if (drawer.value) drawer.value.open = v;
+}
+
+onMounted(async () => {
+	await import('../../lib/headless/drawer.js');
+	drawer.value?.addEventListener('dom:open', () => {
+		emit('update:modelValue', true);
+		emit('open');
+	});
+	drawer.value?.addEventListener('dom:close', () => {
+		emit('update:modelValue', false);
+		emit('close');
+	});
+	if (props.modelValue) setOpen(true);
+});
+
+watch(() => props.modelValue, setOpen);
+
+defineExpose({
+	open: () => setOpen(true),
+	close: () => setOpen(false),
+	toggle: () => { if (drawer.value) drawer.value.toggle(); },
+	get element() { return drawer.value; },
+});
+</script>
+
+<template>
+		<dom-drawer
+			ref="drawer"
+			:side="side"
+			:static="static || null"
+			:style="hostStyle"
+			:aria-labelledby="titleId || null"
+		>
+		<span slot="trigger" class="contents">
+			<slot name="trigger" />
+		</span>
+		<div
+			class="skin-overlay flex h-full flex-col"
+		>
+			<button
+				v-if="side === 'bottom'"
+				data-drag-handle
+				type="button"
+				class="group mx-auto mt-1 flex h-9 w-28 shrink-0 items-center justify-center"
+				aria-label="Drag to close drawer"
+			>
+				<span class="block h-1.5 w-12 rounded-full bg-muted-fg/35 transition group-hover:bg-muted-fg/50"></span>
+			</button>
+			<header v-if="title || $slots.header" class="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-4">
+				<slot name="header">
+						<h2 v-if="title" :id="titleId" class="text-base font-semibold tracking-tight text-canvas-fg">{{ title }}</h2>
+				</slot>
+				<button
+					data-close
+					type="button"
+					class="skin-control inline-flex size-9 shrink-0 items-center justify-center rounded-full text-muted-fg transition hover:brightness-[0.98]"
+					aria-label="Close"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
+						<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
+					</svg>
+				</button>
+			</header>
+			<div class="min-h-0 flex-1 overflow-y-auto">
+				<slot />
+			</div>
+			<footer v-if="$slots.footer" class="shrink-0 border-t border-border p-4">
+				<slot name="footer" />
+			</footer>
+		</div>
+	</dom-drawer>
+</template>

package/src/pages/components/dropdown/DomDropdown.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, shallowRef, useId, useSlots } from 'vue';
+import { resolveFloatingTeleportTarget } from '../../lib/vue/floatingTeleportTarget.js';
+
+defineOptions({
+	__doc: {
+		name: 'Dropdown',
+		tag: '<DomDropdown>',
+		description: 'A menu that opens from a button — fully keyboard accessible, with focus return, optional scroll lock, and outside-click handling.',
+		slots: [
+			{ name: '(default)', payload: '{ close, open, toggle }', description: 'Custom panel content, usually a DomMenu composed with MenuItem rows.' },
+			{ name: 'trigger', description: 'Replaces the inner content of the trigger button.' },
+			{ name: 'item', payload: '{ item, index }', description: 'Replaces the rendering of each menu item.' },
+			{ name: 'panel', payload: '{ close, open, toggle }', description: 'Replaces menu items with custom dropdown content, such as a tree view or form.' },
+		],
+		events: [
+			{ name: 'select', payload: '(value: string)', description: 'Fired when a menu item is chosen.' },
+		],
+		keyboard: [
+			{ keys: 'Enter / Space / ↓', action: 'Open menu (when trigger is focused).' },
+			{ keys: '↑ / ↓', action: 'Move active item.' },
+			{ keys: 'Home / End', action: 'Jump to first / last item.' },
+			{ keys: 'Enter', action: 'Select active item.' },
+			{ keys: 'Esc / Tab', action: 'Close menu and return focus.' },
+		],
+	},
+});
+
+const menuId = `dom-dropdown-${useId()}`;
+
+const props = defineProps({
+	items: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Menu items shown when the dropdown opens.',
+			props: {
+				compact: true,
+				addLabel: '+ Add item',
+				schema: [
+					{ key: 'label', label: 'Label', placeholder: 'Menu item', default: (index) => `Item ${index + 1}` },
+					{ key: 'value', label: 'Value', placeholder: 'item-value', default: (index) => `item-${index + 1}` },
+				],
+			},
+		},
+	},
+	label: {
+		type: String,
+		default: 'Options',
+		_edit: { description: 'Trigger button label (overridden by the #trigger slot if used).' },
+	},
+	align: {
+		type: String,
+		default: 'left',
+		_edit: {
+			options: ['left', 'right'],
+			description: 'Where the menu opens relative to the trigger.',
+		},
+	},
+	placement: {
+		type: String,
+		default: 'bottom',
+		_edit: {
+			options: ['bottom', 'top', 'right', 'left'],
+			description: 'Preferred side before collision handling.',
+		},
+	},
+	collisionPadding: {
+		type: Number,
+		default: 8,
+		_edit: { description: 'Viewport padding used when the menu flips or shifts.' },
+	},
+	floatingMode: {
+		type: String,
+		default: 'viewport',
+		_edit: { options: ['viewport', 'anchor'], description: 'viewport keeps the menu inside the browser; anchor keeps it attached while scrolling.' },
+	},
+	lockScroll: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Lock browser scrolling while the dropdown is open.' },
+	},
+	width: {
+		type: String,
+		default: 'min-w-[12rem]',
+		_edit: { description: 'Tailwind width utility for the menu (e.g. min-w-[16rem]).' },
+	},
+	panelType: {
+		type: String,
+		default: 'menu',
+		_edit: {
+			options: ['menu', 'tree', 'dialog', 'listbox', 'grid'],
+			description: 'Accessible popup type. Use tree/dialog/etc when rendering the #panel slot.',
+		},
+	},
+	autoFocusPanel: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Focus the first focusable element when opening a custom panel.' },
+	},
+	focusValue: {
+		type: [String, Number],
+		default: null,
+		_edit: { description: 'Menu item value to prefer when opening from the keyboard.' },
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Disable the trigger and prevent the dropdown from opening.' },
+	},
+	triggerClass: {
+		type: [String, Array, Object],
+		default: null,
+		_edit: { description: 'Override the trigger button classes when composing dropdowns into toolbars or compact controls.' },
+	},
+	showIndicator: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the chevron indicator in the trigger.' },
+	},
+});
+const emit = defineEmits(['select']);
+
+const root = ref(null);
+const isMounted = ref(false);
+const teleportTarget = shallowRef(null);
+const slots = useSlots();
+const hasDefaultPanel = computed(() => Boolean(slots.default && !slots.panel));
+const hasCustomPanel = computed(() => Boolean(slots.panel || slots.default));
+
+onMounted(async () => {
+	teleportTarget.value = resolveFloatingTeleportTarget(root.value);
+	isMounted.value = true;
+	await nextTick();
+	await import('../../lib/headless/dropdown.js');
+	root.value?.addEventListener('dom:select', (e) => emit('select', e.detail.value));
+});
+
+/**
+ * Resolve the visible label for a dropdown item.
+ *
+ * @param {string|number|Record<string, unknown>} item Dropdown item definition.
+ * @returns {unknown} Item label, value fallback, or primitive item.
+ */
+function labelOf(item) {
+	return item && typeof item === 'object' ? (item.label ?? item.value) : item;
+}
+
+/**
+ * Resolve the submitted value for a dropdown item.
+ *
+ * @param {string|number|Record<string, unknown>} item Dropdown item definition.
+ * @returns {unknown} Item value, label fallback, or primitive item.
+ */
+function valueOf(item) {
+	return item && typeof item === 'object' ? (item.value ?? item.label) : item;
+}
+
+/**
+ * Open the dropdown panel programmatically.
+ *
+ * @returns {void}
+ */
+function open() {
+	if (root.value) root.value.open = true;
+}
+
+/**
+ * Close the dropdown panel programmatically.
+ *
+ * @returns {void}
+ */
+function close() {
+	if (root.value) root.value.open = false;
+}
+
+/**
+ * Toggle the dropdown panel programmatically.
+ *
+ * @returns {void}
+ */
+function toggle() {
+	root.value?.toggle?.();
+}
+
+/**
+ * Forward custom panel selections and close one-shot menu rows.
+ *
+ * @param {CustomEvent<{ value?: string, item?: Element }>} event Selection event from nested menu primitives.
+ * @returns {void}
+ */
+function onPanelDomSelect(event) {
+	if (!slots.default) return;
+	emit('select', event.detail?.value);
+	const role = event.detail?.item?.getAttribute?.('role');
+	if (role === 'menuitemcheckbox' || role === 'menuitemradio') return;
+	close();
+}
+
+defineExpose({
+	open,
+	close,
+	toggle,
+});
+</script>
+
+<template>
+	<dom-dropdown
+		ref="root"
+		:data-menu-id="menuId"
+		:align="align"
+		:offset="4"
+		:placement="placement"
+		:collision-padding="collisionPadding"
+		:floating-mode="floatingMode"
+		:lock-scroll="lockScroll ? '' : null"
+		class="relative inline-block"
+	>
+		<button
+			slot="trigger"
+			type="button"
+			:disabled="disabled || null"
+			:class="triggerClass || 'skin-control inline-flex h-10 items-center gap-2 rounded-full px-4 text-sm font-medium transition hover:brightness-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed disabled:opacity-50'"
+		>
+			<slot name="trigger">{{ label }}</slot>
+			<svg v-if="showIndicator" viewBox="0 0 20 20" class="size-4 opacity-70" fill="none">
+				<path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+			</svg>
+		</button>
+		<Teleport :to="teleportTarget || 'body'" :disabled="!isMounted || !teleportTarget">
+			<div
+				:id="menuId"
+				popover="manual"
+				class="dom-dropdown-menu dom-floating-transition"
+				:class="[width, hasDefaultPanel ? '' : 'skin-popover rounded-2xl p-1']"
+				:data-composite-panel="hasCustomPanel ? 'true' : null"
+				:data-haspopup="hasCustomPanel ? panelType : null"
+				:data-autofocus-panel="autoFocusPanel ? null : 'false'"
+				:data-focus-value="focusValue === null || focusValue === undefined || focusValue === '' ? null : String(focusValue)"
+				@dom:select="onPanelDomSelect"
+			>
+				<slot v-if="$slots.panel" name="panel" :close="close" :open="open" :toggle="toggle" />
+				<slot v-else-if="$slots.default" :close="close" :open="open" :toggle="toggle" />
+				<template v-else>
+					<template v-for="(item, i) in items" :key="valueOf(item) ?? i">
+						<hr v-if="item && item.separator" class="my-1 border-t border-border" />
+						<button
+							v-else
+							role="menuitem"
+							:data-value="valueOf(item)"
+							class="block w-full rounded-xl px-3 py-2 text-left text-sm outline-none transition hover:bg-accent focus:bg-accent"
+						>
+							<slot name="item" :item="item" :index="i">{{ labelOf(item) }}</slot>
+						</button>
+					</template>
+				</template>
+			</div>
+		</Teleport>
+	</dom-dropdown>
+</template>