@vobs/ui 0.1.0

package/dist/overlay.js

@@ -0,0 +1,969 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { classNames, createButtonPrimitive, createUiDomPlan, } from './primitives.js';
+export function createOverlayStack(options) {
+    const entries = [];
+    const portalTarget = options.portalTarget;
+    const scrollTarget = options.scrollLockTarget ?? options.document.body;
+    let scrollLockCount = 0;
+    let previousOverflow = '';
+    const onKeyDown = (event) => {
+        const top = entries.at(-1);
+        if (top === undefined)
+            return;
+        if (event.key === 'Escape' && top.closeOnEscape) {
+            event.preventDefault();
+            top.handle.close('escape');
+            return;
+        }
+        if (event.key === 'Tab' && top.modal && top.element !== undefined) {
+            trapFocus(event, top.element);
+        }
+    };
+    const onPointerDown = (event) => {
+        const top = entries.at(-1);
+        const target = event.target;
+        if (top === undefined ||
+            !top.closeOnOutside ||
+            top.element === undefined ||
+            !isNode(target) ||
+            top.element.contains(target)) {
+            return;
+        }
+        event.preventDefault();
+        top.handle.close('outside');
+    };
+    options.document.addEventListener('keydown', onKeyDown);
+    options.document.addEventListener('pointerdown', onPointerDown);
+    const stack = {
+        get size() {
+            return entries.length;
+        },
+        get top() {
+            return entries.at(-1)?.handle;
+        },
+        open(openOptions) {
+            const previouslyFocused = activeHtmlElement(options.document);
+            const modal = openOptions.modal ?? (openOptions.kind === undefined || openOptions.kind === 'dialog');
+            const entry = createEntry(openOptions, modal, entries.length + 1, previouslyFocused);
+            entries.push(entry);
+            if (portalTarget !== undefined && entry.element !== undefined)
+                portalTarget.append(entry.element);
+            if (modal)
+                lockScroll();
+            focusInitialElement(openOptions.initialFocus, entry.element);
+            return entry.handle;
+        },
+        destroy() {
+            for (const entry of [...entries].reverse())
+                entry.handle.destroy();
+            options.document.removeEventListener('keydown', onKeyDown);
+            options.document.removeEventListener('pointerdown', onPointerDown);
+        },
+    };
+    function createEntry(openOptions, modal, layer, previouslyFocused) {
+        const plans = openOptions.kind === undefined || openOptions.kind === 'dialog'
+            ? createDialogOverlayPlans({
+                id: openOptions.id,
+                titleId: `${openOptions.id}-title`,
+                descriptionId: `${openOptions.id}-description`,
+                modal,
+            })
+            : createPositionedOverlayPlans({
+                id: openOptions.id,
+                kind: openOptions.kind,
+            });
+        let active = true;
+        const handle = {
+            id: openOptions.id,
+            kind: openOptions.kind ?? 'dialog',
+            modal,
+            layer,
+            plans,
+            ...(openOptions.element === undefined ? {} : { element: openOptions.element }),
+            close(reason = 'programmatic') {
+                if (!active)
+                    return;
+                openOptions.onClose?.(reason);
+                handle.destroy();
+            },
+            destroy() {
+                if (!active)
+                    return;
+                active = false;
+                const index = entries.indexOf(entry);
+                if (index >= 0)
+                    entries.splice(index, 1);
+                if (modal)
+                    unlockScroll();
+                openOptions.element?.remove();
+                if (openOptions.restoreFocus !== false)
+                    previouslyFocused?.focus();
+            },
+        };
+        const entry = {
+            handle,
+            ...(openOptions.element === undefined ? {} : { element: openOptions.element }),
+            closeOnEscape: openOptions.closeOnEscape ?? true,
+            closeOnOutside: openOptions.closeOnOutside ?? true,
+            modal,
+        };
+        return entry;
+    }
+    function lockScroll() {
+        scrollLockCount += 1;
+        if (scrollLockCount !== 1)
+            return;
+        previousOverflow = scrollTarget.style.overflow;
+        scrollTarget.style.overflow = 'hidden';
+    }
+    function unlockScroll() {
+        if (scrollLockCount === 0)
+            return;
+        scrollLockCount -= 1;
+        if (scrollLockCount === 0)
+            scrollTarget.style.overflow = previousOverflow;
+    }
+    return stack;
+}
+export function createDialogOverlayPlans(options) {
+    const modal = options.modal ?? true;
+    return {
+        root: createUiDomPlan('div', 'overlay-root', {
+            state: 'open',
+            attrs: { 'data-overlay-root': options.id },
+        }),
+        ...(modal
+            ? {
+                backdrop: createUiDomPlan('div', 'overlay-backdrop', {
+                    state: 'open',
+                    attrs: { 'data-overlay-backdrop': options.id },
+                }),
+            }
+            : {}),
+        surface: createUiDomPlan('div', 'dialog', {
+            state: 'open',
+            attrs: {
+                id: options.id,
+                role: 'dialog',
+                'aria-modal': modal ? 'true' : undefined,
+                'aria-labelledby': options.titleId,
+                'aria-describedby': options.descriptionId,
+                tabindex: -1,
+            },
+        }),
+    };
+}
+export function createModalOverlayPlans(options) {
+    return createDialogOverlayPlans({ ...options, modal: true });
+}
+export function createPositionedOverlayPlans(options) {
+    const attrs = {
+        id: options.id,
+        role: overlayRole(options.kind),
+        'data-placement': options.placement ?? 'bottom-start',
+        tabindex: -1,
+    };
+    return {
+        root: createUiDomPlan('div', 'overlay-root', {
+            state: 'open',
+            attrs: { 'data-overlay-root': options.id },
+        }),
+        surface: createUiDomPlan('div', options.kind, {
+            state: 'open',
+            attrs,
+        }),
+    };
+}
+export function createDialogPlans(options) {
+    const overlay = createDialogOverlayPlans(options);
+    const actions = (options.actions ?? []).map((action) => createButtonPrimitive({
+        label: action.label,
+        variant: action.tone === 'primary' ? 'solid' : 'soft',
+        disabled: action.disabled === true,
+        className: classNames('kui-dialog-action', action.tone === undefined ? undefined : `kui-dialog-action--${action.tone}`),
+        attrs: {
+            id: `${options.id}-${action.id}-action`,
+            'data-action-id': action.id,
+            'data-tone': action.tone ?? 'default',
+        },
+    }));
+    return {
+        ...overlay,
+        surface: {
+            ...overlay.surface,
+            attrs: {
+                ...overlay.surface.attrs,
+                'data-size': options.size ?? 'md',
+                'data-tone': options.tone ?? 'default',
+            },
+        },
+        header: createUiDomPlan('header', 'dialog-header', {
+            attrs: { 'data-dialog-section': 'header' },
+        }),
+        title: createUiDomPlan('h2', 'dialog-title', {
+            attrs: { id: options.titleId },
+        }),
+        ...(options.descriptionId === undefined
+            ? {}
+            : {
+                description: createUiDomPlan('p', 'dialog-description', {
+                    attrs: { id: options.descriptionId },
+                }),
+            }),
+        ...(options.closeLabel === undefined
+            ? {}
+            : {
+                closeButton: createButtonPrimitive({
+                    label: options.closeLabel,
+                    variant: 'ghost',
+                    iconOnly: true,
+                    className: 'kui-dialog-close',
+                    attrs: { id: `${options.id}-close`, 'data-dialog-close': '' },
+                }),
+            }),
+        body: createUiDomPlan('div', 'dialog-body', {
+            attrs: { 'data-dialog-section': 'body' },
+        }),
+        ...(actions.length === 0
+            ? {}
+            : {
+                footer: createUiDomPlan('footer', 'dialog-footer', {
+                    attrs: { 'data-dialog-section': 'footer' },
+                }),
+            }),
+        actions,
+    };
+}
+export function createOverlayTriggerPlan(options) {
+    const open = options.open === true;
+    return createButtonPrimitive({
+        label: options.label,
+        disabled: options.disabled === true,
+        variant: 'soft',
+        className: classNames('kui-overlay-trigger', options.kind === undefined ? undefined : `kui-${options.kind}-trigger`),
+        attrs: {
+            id: options.id,
+            'aria-haspopup': triggerPopupKind(options.kind),
+            'aria-expanded': options.kind === 'tooltip' ? undefined : open ? 'true' : 'false',
+            'aria-controls': open && options.kind !== 'tooltip' ? options.controlsId : undefined,
+            'aria-describedby': options.kind === 'tooltip' && open ? options.controlsId : undefined,
+            'data-overlay-trigger': options.controlsId,
+        },
+    });
+}
+export function createTooltipPlans(options) {
+    const overlay = createPositionedOverlayPlans({
+        id: options.id,
+        kind: 'tooltip',
+        placement: options.placement ?? 'bottom-start',
+    });
+    return {
+        ...overlay,
+        root: rootWithOpenState(overlay.root, options.open),
+        surface: {
+            ...surfaceWithOpenState(overlay.surface, options.open),
+            attrs: {
+                ...overlay.surface.attrs,
+                'data-state': options.open === true ? 'open' : 'closed',
+                'data-strategy': options.strategy ?? 'hover',
+                'data-delay-ms': options.delayMs ?? 400,
+                hidden: options.open === true ? undefined : true,
+            },
+        },
+        trigger: createOverlayTriggerPlan({
+            id: options.triggerId,
+            controlsId: options.id,
+            label: options.label,
+            open: options.open === true,
+            disabled: options.disabled === true,
+            kind: 'tooltip',
+        }),
+        arrow: createOverlayArrowPlan(options.placement),
+    };
+}
+export function createPopoverPlans(options) {
+    const overlay = createPositionedOverlayPlans({
+        id: options.id,
+        kind: 'popover',
+        placement: options.placement ?? 'bottom-start',
+    });
+    return {
+        ...overlay,
+        root: rootWithOpenState(overlay.root, options.open),
+        surface: {
+            ...surfaceWithOpenState(overlay.surface, options.open),
+            attrs: {
+                ...overlay.surface.attrs,
+                'data-state': options.open === true ? 'open' : 'closed',
+                'aria-labelledby': options.titleId,
+                'aria-describedby': options.descriptionId,
+                hidden: options.open === true ? undefined : true,
+            },
+        },
+        trigger: createOverlayTriggerPlan({
+            id: options.triggerId,
+            controlsId: options.id,
+            label: options.label,
+            open: options.open === true,
+            kind: 'popover',
+        }),
+        arrow: createOverlayArrowPlan(options.placement),
+        ...(options.titleId === undefined
+            ? {}
+            : {
+                header: createUiDomPlan('header', 'popover-header'),
+                title: createUiDomPlan('h3', 'popover-title', { attrs: { id: options.titleId } }),
+            }),
+        body: createUiDomPlan('div', 'popover-body'),
+        ...(options.descriptionId === undefined
+            ? {}
+            : {
+                footer: createUiDomPlan('footer', 'popover-footer', {
+                    attrs: { id: options.descriptionId },
+                }),
+            }),
+    };
+}
+export function createDropdownMenuPlans(options) {
+    const overlay = createPositionedOverlayPlans({
+        id: options.id,
+        kind: 'dropdown',
+        placement: options.placement ?? 'bottom-start',
+    });
+    const activeId = activeDropdownItemId(options.items, options.activeId);
+    const menu = dropdownMenuPlan(overlay.surface, options.open, 'dropdown');
+    return {
+        ...overlay,
+        root: rootWithOpenState(overlay.root, options.open),
+        surface: menu,
+        trigger: createOverlayTriggerPlan({
+            id: options.triggerId,
+            controlsId: options.id,
+            label: options.label,
+            open: options.open === true,
+            kind: 'dropdown',
+        }),
+        menu,
+        items: options.items.map((item) => dropdownItemPlan(options.id, item, activeId)),
+        shortcuts: options.items.map((item) => dropdownShortcutPlan(options.id, item)),
+    };
+}
+export function createContextMenuPlans(options) {
+    const overlay = createPositionedOverlayPlans({
+        id: options.id,
+        kind: 'context-menu',
+        placement: options.placement ?? 'bottom-start',
+    });
+    const activeId = activeDropdownItemId(options.items, options.activeId);
+    const style = options.x === undefined || options.y === undefined
+        ? undefined
+        : `--kui-context-menu-x: ${options.x}px; --kui-context-menu-y: ${options.y}px;`;
+    const menu = dropdownMenuPlan({
+        ...overlay.surface,
+        className: `${overlay.surface.className} kui-context-menu`,
+        attrs: { ...overlay.surface.attrs, style },
+    }, options.open, 'context-menu');
+    return {
+        ...overlay,
+        root: rootWithOpenState(overlay.root, options.open),
+        surface: menu,
+        menu,
+        items: options.items.map((item) => dropdownItemPlan(options.id, item, activeId)),
+        shortcuts: options.items.map((item) => dropdownShortcutPlan(options.id, item)),
+    };
+}
+export function createDropdownMenuPermissionRemoteActionContract(options) {
+    const disabled = options.disabled === true;
+    const knownIds = new Set(options.items.map((item) => item.id));
+    const allowedInputIds = normalizeOverlayMenuIds(options.allowedIds, knownIds);
+    const deniedInputIds = normalizeOverlayMenuIds(options.deniedIds, knownIds);
+    const remoteActionInputIds = normalizeOverlayMenuIds(options.remoteActionIds, knownIds);
+    const remoteActionDisabledInputIds = normalizeOverlayMenuIds(options.remoteActionDisabledIds, knownIds);
+    const remoteActionLoadingInputIds = normalizeOverlayMenuIds(options.remoteActionLoadingIds, knownIds);
+    const submenuLoadingInputIds = normalizeOverlayMenuIds(options.submenuLoadingIds, knownIds);
+    const allowedSet = new Set(allowedInputIds);
+    const deniedSet = new Set(deniedInputIds);
+    const remoteActionSet = new Set(remoteActionInputIds);
+    const remoteActionDisabledSet = new Set(remoteActionDisabledInputIds);
+    const remoteActionLoadingSet = new Set(remoteActionLoadingInputIds);
+    const submenuLoadingSet = new Set(submenuLoadingInputIds);
+    const hasAllowedIds = options.allowedIds !== undefined;
+    const items = options.items.map((item) => dropdownPermissionRemoteActionItemContract(item, {
+        allowed: allowedSet.has(item.id),
+        denied: deniedSet.has(item.id),
+        disabled,
+        disabledReason: normalizedOverlayMenuReason(options.disabledReasons?.[item.id]),
+        hasAllowedIds,
+        remoteAction: remoteActionSet.has(item.id),
+        remoteActionDisabled: remoteActionDisabledSet.has(item.id),
+        remoteActionDisabledReason: normalizedOverlayMenuReason(options.remoteActionDisabledReasons?.[item.id]),
+        remoteActionError: normalizedOverlayMenuReason(options.remoteActionErrors?.[item.id]),
+        remoteActionLoading: remoteActionLoadingSet.has(item.id),
+        submenuError: normalizedOverlayMenuReason(options.submenuErrors?.[item.id]),
+        submenuItemCount: normalizedOverlayMenuItemCount(options.submenuItemCounts?.[item.id]),
+        submenuLoading: submenuLoadingSet.has(item.id),
+    }));
+    const allowedIds = items.filter((item) => item.permission === 'allowed').map((item) => item.id);
+    const deniedIds = items.filter((item) => item.permission === 'denied').map((item) => item.id);
+    const remoteActionIds = items.filter((item) => item.remoteAction).map((item) => item.id);
+    const remoteActionDisabledIds = items
+        .filter((item) => item.remoteAction && item.remoteActionState === 'disabled')
+        .map((item) => item.id);
+    const remoteActionLoadingIds = items
+        .filter((item) => item.remoteAction && item.remoteActionState === 'pending')
+        .map((item) => item.id);
+    const remoteActionErrorIds = items
+        .filter((item) => item.remoteActionError !== '')
+        .map((item) => item.id);
+    const submenuLoadingIds = items
+        .filter((item) => item.submenuState === 'loading')
+        .map((item) => item.id);
+    const submenuErrorIds = items
+        .filter((item) => item.submenuState === 'error')
+        .map((item) => item.id);
+    const disabledReasonCount = items.filter((item) => item.disabledReason !== '').length;
+    const state = dropdownMenuPermissionRemoteActionState({
+        deniedCount: deniedIds.length,
+        itemCount: options.items.length,
+        remoteActionLoadingCount: remoteActionLoadingIds.length,
+        submenuErrorCount: submenuErrorIds.length,
+    });
+    return {
+        state,
+        disabled,
+        itemCount: options.items.length,
+        allowedCount: allowedIds.length,
+        deniedCount: deniedIds.length,
+        disabledReasonCount,
+        remoteActionCount: remoteActionIds.length,
+        remoteActionDisabledCount: remoteActionDisabledIds.length,
+        remoteActionLoadingCount: remoteActionLoadingIds.length,
+        remoteActionErrorCount: remoteActionErrorIds.length,
+        submenuLoadingCount: submenuLoadingIds.length,
+        submenuErrorCount: submenuErrorIds.length,
+        allowedIds,
+        deniedIds,
+        remoteActionIds,
+        remoteActionDisabledIds,
+        remoteActionLoadingIds,
+        remoteActionErrorIds,
+        submenuLoadingIds,
+        submenuErrorIds,
+        items,
+        attrs: {
+            'data-dropdown-permission-remote-contract': 'true',
+            'data-dropdown-permission-remote-state': state,
+            'data-state': state,
+            'data-disabled': disabled ? 'true' : undefined,
+            'data-item-count': options.items.length,
+            'data-allowed-count': allowedIds.length,
+            'data-denied-count': deniedIds.length,
+            'data-disabled-reason-count': disabledReasonCount,
+            'data-remote-action-count': remoteActionIds.length,
+            'data-remote-action-disabled-count': remoteActionDisabledIds.length,
+            'data-remote-action-loading-count': remoteActionLoadingIds.length,
+            'data-remote-action-error-count': remoteActionErrorIds.length,
+            'data-submenu-loading-count': submenuLoadingIds.length,
+            'data-submenu-error-count': submenuErrorIds.length,
+            'data-allowed-ids': allowedIds.join(','),
+            'data-denied-ids': deniedIds.join(','),
+            'data-remote-action-ids': remoteActionIds.join(','),
+            'data-remote-action-disabled-ids': remoteActionDisabledIds.join(','),
+            'data-remote-action-loading-ids': remoteActionLoadingIds.join(','),
+            'data-remote-action-error-ids': remoteActionErrorIds.join(','),
+            'data-submenu-loading-ids': submenuLoadingIds.join(','),
+            'data-submenu-error-ids': submenuErrorIds.join(','),
+            'aria-busy': remoteActionLoadingIds.length > 0 || submenuLoadingIds.length > 0 ? 'true' : undefined,
+        },
+    };
+}
+export function createDropdownMenuSubmenuPortalStateContract(options) {
+    const submenuIds = new Set(options.items.filter((item) => item.kind === 'submenu').map((item) => item.id));
+    const openPathIds = normalizeOverlayMenuIds(options.openPathIds, submenuIds);
+    const mountedInputIds = normalizeOverlayMenuIds(options.mountedIds, submenuIds);
+    const openSet = new Set(openPathIds);
+    const mountedSet = new Set(mountedInputIds);
+    const items = options.items
+        .filter((item) => item.kind === 'submenu')
+        .map((item) => dropdownMenuSubmenuPortalItemContract(item, {
+        focusReturnId: normalizedOverlayMenuReason(options.focusReturnIds?.[item.id]),
+        mounted: mountedSet.has(item.id),
+        openPathIndex: openPathIds.indexOf(item.id),
+        parentOverlayId: normalizedOverlayMenuReason(options.parentOverlayIds?.[item.id]),
+        placement: options.placements?.[item.id],
+        portalTargetId: normalizedOverlayMenuReason(options.portalTargetIds?.[item.id]),
+        open: openSet.has(item.id),
+    }));
+    const mountedIds = items.filter((item) => item.mounted).map((item) => item.id);
+    const portalMissingIds = items
+        .filter((item) => item.state === 'portal-missing')
+        .map((item) => item.id);
+    const portalTargetIds = items
+        .map((item) => item.portalTargetId)
+        .filter((id, index, ids) => id !== '' && ids.indexOf(id) === index);
+    const state = dropdownMenuSubmenuPortalContractState({
+        mountedCount: mountedIds.length,
+        openCount: openPathIds.length,
+        portalMissingCount: portalMissingIds.length,
+        submenuCount: items.length,
+    });
+    return {
+        state,
+        submenuCount: items.length,
+        openCount: openPathIds.length,
+        mountedCount: mountedIds.length,
+        portalMissingCount: portalMissingIds.length,
+        openPathIds,
+        mountedIds,
+        portalMissingIds,
+        portalTargetIds,
+        items,
+        attrs: {
+            'data-dropdown-submenu-portal-contract': 'true',
+            'data-dropdown-submenu-portal-state': state,
+            'data-submenu-count': items.length,
+            'data-open-submenu-count': openPathIds.length,
+            'data-mounted-submenu-count': mountedIds.length,
+            'data-portal-missing-count': portalMissingIds.length,
+            'data-open-path-ids': openPathIds.join(','),
+            'data-mounted-submenu-ids': mountedIds.join(','),
+            'data-portal-missing-ids': portalMissingIds.join(','),
+            'data-portal-target-ids': portalTargetIds.join(','),
+        },
+    };
+}
+export function createPopconfirmPlans(options) {
+    const overlay = createPositionedOverlayPlans({
+        id: options.id,
+        kind: 'popover',
+        placement: options.placement ?? 'bottom-start',
+    });
+    return {
+        ...overlay,
+        root: rootWithOpenState(overlay.root, options.open),
+        surface: {
+            ...surfaceWithOpenState(overlay.surface, options.open),
+            className: `${overlay.surface.className} kui-popconfirm`,
+            attrs: {
+                ...overlay.surface.attrs,
+                'data-state': options.open === true ? 'open' : 'closed',
+                role: 'dialog',
+                'aria-labelledby': options.titleId,
+                'aria-describedby': options.descriptionId,
+                'data-tone': options.tone ?? 'danger',
+                hidden: options.open === true ? undefined : true,
+            },
+        },
+        trigger: createOverlayTriggerPlan({
+            id: options.triggerId,
+            controlsId: options.id,
+            label: options.label,
+            open: options.open === true,
+            kind: 'popover',
+        }),
+        arrow: createOverlayArrowPlan(options.placement),
+        title: createUiDomPlan('h3', 'popconfirm-title', { attrs: { id: options.titleId } }),
+        ...(options.descriptionId === undefined
+            ? {}
+            : {
+                description: createUiDomPlan('p', 'popconfirm-description', {
+                    attrs: { id: options.descriptionId },
+                }),
+            }),
+        footer: createUiDomPlan('footer', 'popconfirm-footer'),
+        cancelButton: createButtonPrimitive({
+            label: options.cancelLabel ?? 'Cancel',
+            variant: 'ghost',
+            size: 'sm',
+            attrs: { 'data-popconfirm-action': 'cancel' },
+        }),
+        confirmButton: createButtonPrimitive({
+            label: options.confirmLabel ?? 'Confirm',
+            variant: options.tone === 'primary' ? 'solid' : 'soft',
+            size: 'sm',
+            className: classNames('kui-popconfirm-confirm', `kui-popconfirm-confirm--${options.tone ?? 'danger'}`),
+            attrs: { 'data-popconfirm-action': 'confirm', 'data-tone': options.tone ?? 'danger' },
+        }),
+    };
+}
+export function getNextDropdownItemId(items, activeId, key) {
+    const enabled = dropdownFocusableItems(items);
+    if (enabled.length === 0)
+        return activeId;
+    const currentIndex = Math.max(-1, enabled.findIndex((item) => item.id === activeId));
+    if (key === 'Home')
+        return enabled[0]?.id;
+    if (key === 'End')
+        return enabled.at(-1)?.id;
+    if (key === 'ArrowUp')
+        return enabled.at(currentIndex - 1)?.id ?? enabled.at(-1)?.id;
+    if (key === 'ArrowDown')
+        return enabled[(currentIndex + 1) % enabled.length]?.id;
+    return activeId;
+}
+export function shouldOpenOverlayForTriggerKey(key) {
+    return key === 'Enter' || key === ' ' || key === 'ArrowDown' || key === 'ArrowUp';
+}
+export function shouldCloseOverlayForKey(key) {
+    return key === 'Escape';
+}
+export function shouldSelectDropdownItem(key) {
+    return key === 'Enter' || key === ' ';
+}
+function activeHtmlElement(document) {
+    const active = document.activeElement;
+    return isHTMLElement(active) ? active : undefined;
+}
+function focusInitialElement(initialFocus, element) {
+    if (initialFocus !== undefined) {
+        initialFocus.focus();
+        return;
+    }
+    const target = element === undefined ? undefined : (firstFocusable(element) ?? element);
+    target?.focus();
+}
+function trapFocus(event, root) {
+    const focusable = findFocusable(root);
+    if (focusable.length === 0) {
+        event.preventDefault();
+        root.focus();
+        return;
+    }
+    const current = root.ownerDocument.activeElement;
+    const currentIndex = focusable.findIndex((item) => item === current);
+    const nextIndex = event.shiftKey
+        ? currentIndex <= 0
+            ? focusable.length - 1
+            : currentIndex - 1
+        : currentIndex === focusable.length - 1
+            ? 0
+            : currentIndex + 1;
+    if (currentIndex < 0 || nextIndex !== currentIndex + (event.shiftKey ? -1 : 1)) {
+        event.preventDefault();
+        focusable[nextIndex]?.focus();
+    }
+}
+function firstFocusable(root) {
+    return findFocusable(root)[0];
+}
+function findFocusable(root) {
+    return Array.from(root.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((element) => !element.hasAttribute('disabled') && element.tabIndex >= 0);
+}
+function createOverlayArrowPlan(placement = 'bottom-start') {
+    return createUiDomPlan('span', 'overlay-arrow', {
+        attrs: { 'aria-hidden': 'true', 'data-placement': placement },
+    });
+}
+function rootWithOpenState(plan, open = false) {
+    return {
+        ...plan,
+        attrs: { ...plan.attrs, 'data-state': open ? 'open' : 'closed' },
+    };
+}
+function surfaceWithOpenState(plan, open = false) {
+    return {
+        ...plan,
+        attrs: { ...plan.attrs, 'data-state': open ? 'open' : 'closed' },
+    };
+}
+function triggerPopupKind(kind) {
+    if (kind === 'tooltip')
+        return undefined;
+    if (kind === 'dropdown' || kind === 'context-menu')
+        return 'menu';
+    return 'dialog';
+}
+function dropdownMenuPlan(surface, open, kind) {
+    return {
+        ...surfaceWithOpenState(surface, open),
+        attrs: {
+            ...surface.attrs,
+            'data-state': open === true ? 'open' : 'closed',
+            role: 'menu',
+            'data-menu-kind': kind,
+            hidden: open === true ? undefined : true,
+        },
+    };
+}
+function dropdownItemPlan(rootId, item, activeId) {
+    const kind = item.kind ?? 'item';
+    const active = item.id === activeId;
+    const separator = kind === 'separator';
+    const remoteActionState = dropdownItemRemoteActionState(item);
+    const submenuState = dropdownItemSubmenuState(item);
+    return createUiDomPlan('div', 'dropdown-item', {
+        state: separator || item.disabled === true
+            ? 'disabled'
+            : active
+                ? 'active'
+                : item.checked === true
+                    ? 'checked'
+                    : 'idle',
+        ...(item.disabled === true || separator ? { disabled: true } : {}),
+        className: classNames(item.danger === true ? 'kui-dropdown-item--danger' : undefined),
+        attrs: {
+            id: `${rootId}-${item.id}-item`,
+            role: separator ? 'separator' : menuItemRole(kind),
+            tabindex: active && !separator && item.disabled !== true ? 0 : -1,
+            'aria-disabled': item.disabled === true ? 'true' : undefined,
+            'aria-haspopup': kind === 'submenu' ? 'menu' : undefined,
+            'aria-expanded': kind === 'submenu' ? (item.expanded === true ? 'true' : 'false') : undefined,
+            'aria-busy': item.remoteActionLoading === true || item.submenuLoading === true ? 'true' : undefined,
+            'aria-checked': kind === 'checkbox' || kind === 'radio' ? String(item.checked === true) : undefined,
+            'data-item-id': item.id,
+            'data-kind': kind,
+            'data-label': item.label,
+            'data-group-id': item.groupId,
+            'data-danger': item.danger === true ? '' : undefined,
+            'data-shortcut': item.shortcut,
+            'data-permission': item.permission,
+            'data-disabled-reason': item.disabledReason,
+            'data-remote-action': item.remoteAction === true ? 'true' : undefined,
+            'data-remote-action-state': remoteActionState,
+            'data-remote-action-disabled-reason': item.remoteActionDisabledReason,
+            'data-remote-action-error': item.remoteActionError,
+            'data-can-invoke-remote-action': remoteActionState === 'available' && item.disabled !== true ? 'true' : undefined,
+            'data-submenu-state': submenuState,
+            'data-submenu-error': item.submenuError,
+            'data-submenu-item-count': item.submenuItemCount,
+            'data-submenu-portal-state': item.submenuPortalState,
+            'data-submenu-portal-target': item.submenuPortalTargetId,
+            'data-submenu-open-path-index': item.submenuOpenPathIndex,
+            'data-submenu-focus-return': item.submenuFocusReturnId,
+            'data-submenu-parent-overlay': item.submenuParentOverlayId,
+            'data-submenu-placement': item.submenuPlacement,
+            'aria-controls': item.submenuPortalTargetId,
+        },
+    });
+}
+function dropdownShortcutPlan(rootId, item) {
+    return createUiDomPlan('kbd', 'dropdown-shortcut', {
+        attrs: {
+            id: `${rootId}-${item.id}-shortcut`,
+            'aria-hidden': 'true',
+            'data-shortcut': item.shortcut,
+        },
+    });
+}
+function activeDropdownItemId(items, activeId) {
+    const enabled = dropdownFocusableItems(items);
+    return enabled.some((item) => item.id === activeId) ? activeId : enabled[0]?.id;
+}
+function dropdownFocusableItems(items) {
+    return items.filter((item) => item.disabled !== true && item.kind !== 'separator');
+}
+function menuItemRole(kind) {
+    if (kind === 'checkbox')
+        return 'menuitemcheckbox';
+    if (kind === 'radio')
+        return 'menuitemradio';
+    return 'menuitem';
+}
+function dropdownMenuSubmenuPortalItemContract(item, options) {
+    const mounted = options.mounted || options.open;
+    const state = options.open && options.portalTargetId === ''
+        ? 'portal-missing'
+        : options.open
+            ? 'open'
+            : mounted
+                ? 'mounted'
+                : 'closed';
+    const openPathIndex = options.openPathIndex < 0 ? undefined : options.openPathIndex;
+    const contractItem = {
+        ...item,
+        ...(options.open ? { expanded: true } : {}),
+        submenuPortalState: state,
+        ...(options.portalTargetId === '' ? {} : { submenuPortalTargetId: options.portalTargetId }),
+        ...(openPathIndex === undefined ? {} : { submenuOpenPathIndex: openPathIndex }),
+        ...(options.focusReturnId === '' ? {} : { submenuFocusReturnId: options.focusReturnId }),
+        ...(options.parentOverlayId === '' ? {} : { submenuParentOverlayId: options.parentOverlayId }),
+        ...(options.placement === undefined ? {} : { submenuPlacement: options.placement }),
+    };
+    return {
+        id: item.id,
+        item: contractItem,
+        state,
+        open: options.open,
+        mounted,
+        portalTargetId: options.portalTargetId,
+        focusReturnId: options.focusReturnId,
+        parentOverlayId: options.parentOverlayId,
+        placement: options.placement,
+        openPathIndex,
+        attrs: {
+            'data-item-id': item.id,
+            'data-submenu-portal-state': state,
+            'data-submenu-portal-target': options.portalTargetId,
+            'data-submenu-open-path-index': openPathIndex,
+            'data-submenu-focus-return': options.focusReturnId,
+            'data-submenu-parent-overlay': options.parentOverlayId,
+            'data-submenu-placement': options.placement,
+            'aria-controls': options.portalTargetId === '' ? undefined : options.portalTargetId,
+            'aria-expanded': options.open ? 'true' : item.expanded === true ? 'true' : 'false',
+        },
+    };
+}
+function dropdownPermissionRemoteActionItemContract(item, options) {
+    const permission = options.denied || (options.hasAllowedIds && !options.allowed) ? 'denied' : 'allowed';
+    const baseDisabledReason = options.disabledReason || normalizedOverlayMenuReason(item.disabledReason);
+    const disabledReason = permission === 'denied' && baseDisabledReason === ''
+        ? 'Permission required'
+        : baseDisabledReason;
+    const disabled = options.disabled || item.disabled === true || permission === 'denied';
+    const remoteAction = options.remoteAction ||
+        options.remoteActionDisabled ||
+        options.remoteActionLoading ||
+        options.remoteActionError !== '' ||
+        item.remoteAction === true ||
+        item.remoteActionDisabled === true ||
+        item.remoteActionLoading === true ||
+        normalizedOverlayMenuReason(item.remoteActionError) !== '';
+    const remoteActionError = options.remoteActionError || normalizedOverlayMenuReason(item.remoteActionError);
+    const remoteActionDisabled = options.remoteActionDisabled || item.remoteActionDisabled === true;
+    const remoteActionLoading = options.remoteActionLoading || item.remoteActionLoading === true;
+    const remoteActionDisabledReason = options.remoteActionDisabledReason ||
+        normalizedOverlayMenuReason(item.remoteActionDisabledReason);
+    const remoteActionState = remoteActionLoading && remoteActionError === ''
+        ? 'pending'
+        : remoteActionDisabled || disabled || remoteActionError !== ''
+            ? 'disabled'
+            : 'available';
+    const submenuError = options.submenuError || normalizedOverlayMenuReason(item.submenuError);
+    const submenuLoading = options.submenuLoading || item.submenuLoading === true;
+    const submenuItemCount = options.submenuItemCount ?? item.submenuItemCount;
+    const contractItem = {
+        ...item,
+        disabled,
+        ...(disabledReason === '' ? {} : { disabledReason }),
+        permission,
+        ...(remoteAction ? { remoteAction: true } : {}),
+        ...(remoteActionState === 'disabled' ? { remoteActionDisabled: true } : {}),
+        ...(remoteActionState === 'pending' ? { remoteActionLoading: true } : {}),
+        ...(remoteActionDisabledReason === '' ? {} : { remoteActionDisabledReason }),
+        ...(remoteActionError === '' ? {} : { remoteActionError }),
+        ...(submenuError === '' ? {} : { submenuError }),
+        ...(submenuItemCount === undefined ? {} : { submenuItemCount }),
+        ...(submenuLoading ? { submenuLoading: true } : {}),
+    };
+    const submenuState = dropdownItemSubmenuState(contractItem);
+    return {
+        id: item.id,
+        item: contractItem,
+        permission,
+        disabled,
+        disabledReason,
+        remoteAction,
+        remoteActionState,
+        remoteActionDisabledReason,
+        remoteActionError,
+        submenuState,
+        submenuError,
+        submenuItemCount,
+        attrs: {
+            'data-item-id': item.id,
+            'data-permission': permission,
+            'data-disabled-reason': disabledReason,
+            'data-remote-action': remoteAction ? 'true' : undefined,
+            'data-remote-action-state': remoteAction ? remoteActionState : undefined,
+            'data-remote-action-disabled-reason': remoteActionDisabledReason,
+            'data-remote-action-error': remoteActionError,
+            'data-can-invoke-remote-action': remoteAction && remoteActionState === 'available' && !disabled ? 'true' : undefined,
+            'data-submenu-state': submenuState,
+            'data-submenu-error': submenuError,
+            'data-submenu-item-count': submenuItemCount,
+            'aria-disabled': disabled ? 'true' : undefined,
+            'aria-busy': remoteActionState === 'pending' || submenuState === 'loading' ? 'true' : undefined,
+        },
+    };
+}
+function dropdownMenuPermissionRemoteActionState(options) {
+    if (options.itemCount === 0)
+        return 'empty';
+    if (options.remoteActionLoadingCount > 0)
+        return 'remote-pending';
+    if (options.submenuErrorCount > 0)
+        return 'submenu-error';
+    if (options.deniedCount > 0)
+        return 'permission-limited';
+    return 'ready';
+}
+function dropdownMenuSubmenuPortalContractState(options) {
+    if (options.submenuCount === 0)
+        return 'empty';
+    if (options.portalMissingCount > 0)
+        return 'portal-missing';
+    if (options.openCount > 0)
+        return 'open';
+    if (options.mountedCount > 0)
+        return 'mounted';
+    return 'closed';
+}
+function dropdownItemRemoteActionState(item) {
+    if (item.remoteAction !== true)
+        return undefined;
+    if (item.remoteActionLoading === true &&
+        normalizedOverlayMenuReason(item.remoteActionError) === '') {
+        return 'pending';
+    }
+    if (item.remoteActionDisabled === true ||
+        item.disabled === true ||
+        normalizedOverlayMenuReason(item.remoteActionError) !== '') {
+        return 'disabled';
+    }
+    return 'available';
+}
+function dropdownItemSubmenuState(item) {
+    if (item.kind !== 'submenu')
+        return undefined;
+    if (item.submenuLoading === true)
+        return 'loading';
+    if (normalizedOverlayMenuReason(item.submenuError) !== '')
+        return 'error';
+    if (item.expanded === true)
+        return 'open';
+    if ((item.submenuItemCount ?? 0) > 0)
+        return 'ready';
+    return 'closed';
+}
+function normalizeOverlayMenuIds(value, knownIds) {
+    if (value === undefined)
+        return [];
+    const values = Array.isArray(value)
+        ? value
+        : [...value];
+    const result = [];
+    for (const id of values) {
+        if (!knownIds.has(id) || result.includes(id))
+            continue;
+        result.push(id);
+    }
+    return result;
+}
+function normalizedOverlayMenuReason(value) {
+    return value?.trim() ?? '';
+}
+function normalizedOverlayMenuItemCount(value) {
+    if (value === undefined || !Number.isFinite(value))
+        return undefined;
+    return Math.max(0, Math.trunc(value));
+}
+function overlayRole(kind) {
+    switch (kind) {
+        case 'tooltip':
+            return 'tooltip';
+        case 'dropdown':
+        case 'context-menu':
+            return 'menu';
+        default:
+            return 'dialog';
+    }
+}
+function isNode(value) {
+    return typeof Node !== 'undefined' && value instanceof Node;
+}
+function isHTMLElement(value) {
+    return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}