@vobs/ui 0.2.0 → 1.0.0

package/dist/overlay.js

@@ -1,969 +0,0 @@
-/** @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;
-}