@vobs/ui 0.1.0

package/dist/navigation.js

@@ -0,0 +1,1707 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { createDialogOverlayPlans, createDialogPlans, } from './overlay.js';
+import { classNames, createUiDomPlan } from './primitives.js';
+export function createTabsPlans(options) {
+    const orientation = options.orientation ?? 'horizontal';
+    return {
+        root: createUiDomPlan('div', 'tabs', {
+            state: 'idle',
+            attrs: {
+                id: options.id,
+                role: 'tablist',
+                'aria-orientation': orientation,
+                ...options.attrs,
+            },
+        }),
+        tabs: options.items.map((item) => {
+            const selected = item.id === options.activeId;
+            return createUiDomPlan('button', 'tab', {
+                state: selected ? 'active' : item.disabled === true ? 'disabled' : 'idle',
+                ...(item.disabled === true ? { disabled: true } : {}),
+                attrs: {
+                    id: `${options.id}-${item.id}-tab`,
+                    type: 'button',
+                    role: 'tab',
+                    'aria-selected': selected ? 'true' : 'false',
+                    'aria-controls': `${options.id}-${item.id}-panel`,
+                    tabindex: selected ? 0 : -1,
+                    'data-tab-id': item.id,
+                    'data-overflow': item.overflow === true ? 'true' : undefined,
+                    'data-persisted-active': item.persistedActive === true ? 'true' : undefined,
+                    'data-disabled-reason': item.disabledReason,
+                    'aria-disabled': item.disabledReason === undefined ? undefined : 'true',
+                },
+            });
+        }),
+        panels: options.items.map((item) => {
+            const selected = item.id === options.activeId;
+            return createUiDomPlan('div', 'tabpanel', {
+                state: selected ? 'active' : 'idle',
+                attrs: {
+                    id: `${options.id}-${item.id}-panel`,
+                    role: 'tabpanel',
+                    'aria-labelledby': `${options.id}-${item.id}-tab`,
+                    tabindex: 0,
+                    hidden: selected ? undefined : true,
+                },
+            });
+        }),
+    };
+}
+export function createTabsOverflowPersistenceContract(options) {
+    const knownIds = new Set(options.items.map((item) => item.id));
+    const overflowInputIds = normalizeKnownIds(options.overflowIds, knownIds);
+    const maxVisible = options.maxVisible === undefined
+        ? options.items.length
+        : Math.max(1, Math.trunc(options.maxVisible));
+    const derivedOverflowIds = options.items.length > maxVisible ? options.items.slice(maxVisible).map((item) => item.id) : [];
+    const overflowIds = normalizeKnownIds([...overflowInputIds, ...derivedOverflowIds], knownIds);
+    const overflowIdSet = new Set(overflowIds);
+    const persistedActiveId = options.persistedActiveId !== undefined && knownIds.has(options.persistedActiveId)
+        ? options.persistedActiveId
+        : '';
+    const activeId = knownIds.has(options.activeId)
+        ? options.activeId
+        : (options.items.find((item) => item.disabled !== true)?.id ?? '');
+    const orientation = options.orientation ?? 'horizontal';
+    const items = options.items.map((item) => tabsOverflowPersistenceItemContract(item, {
+        active: item.id === activeId,
+        disabledReason: normalizedDisabledReason(options.disabledReasons?.[item.id] ?? item.disabledReason),
+        overflow: overflowIdSet.has(item.id),
+        persistedActive: item.id === persistedActiveId,
+    }));
+    const visibleIds = items.filter((item) => !item.overflow).map((item) => item.id);
+    const disabledReasonIds = items
+        .filter((item) => item.disabledReason !== '')
+        .map((item) => item.id);
+    const overflowState = items.length === 0 ? 'empty' : overflowIds.length > 0 ? 'overflow' : 'expanded';
+    const persistenceState = items.length === 0
+        ? 'empty'
+        : persistedActiveId === ''
+            ? 'clean'
+            : persistedActiveId === activeId
+                ? 'restored'
+                : 'dirty';
+    return {
+        overflowState,
+        persistenceState,
+        activeId,
+        persistedActiveId,
+        orientation,
+        itemCount: items.length,
+        visibleCount: visibleIds.length,
+        overflowCount: overflowIds.length,
+        disabledReasonCount: disabledReasonIds.length,
+        overflowIds,
+        visibleIds,
+        disabledReasonIds,
+        items,
+        attrs: {
+            'data-tabs-overflow-persistence-contract': 'true',
+            'data-tabs-overflow-state': overflowState,
+            'data-tabs-persistence-state': persistenceState,
+            'data-active-id': activeId,
+            'data-persisted-active-id': persistedActiveId,
+            'data-orientation': orientation,
+            'data-item-count': items.length,
+            'data-visible-count': visibleIds.length,
+            'data-overflow-count': overflowIds.length,
+            'data-disabled-reason-count': disabledReasonIds.length,
+            'data-overflow-ids': overflowIds.join(','),
+            'data-visible-ids': visibleIds.join(','),
+            'data-disabled-reason-ids': disabledReasonIds.join(','),
+        },
+    };
+}
+export function createCommandPalettePlans(options) {
+    const open = options.open === true;
+    const enabledItems = options.items.filter((item) => item.disabled !== true);
+    const activeId = open && enabledItems.some((item) => item.id === options.activeId)
+        ? options.activeId
+        : enabledItems[0]?.id;
+    const visibleGroups = commandPaletteGroupsForItems(options.items, options.groups ?? []);
+    return {
+        root: createUiDomPlan('div', 'command-palette', {
+            state: open ? 'open' : 'closed',
+            attrs: {
+                id: options.id,
+                role: 'dialog',
+                'aria-modal': 'true',
+                'aria-labelledby': options.labelId,
+                'aria-describedby': options.describedBy,
+                hidden: open ? undefined : true,
+                'data-count': options.items.length,
+            },
+        }),
+        input: createUiDomPlan('input', 'command-palette-input', {
+            attrs: {
+                id: `${options.id}-input`,
+                type: 'search',
+                role: 'combobox',
+                autocomplete: 'off',
+                value: options.query,
+                placeholder: options.placeholder ?? 'Search commands',
+                'aria-expanded': open ? 'true' : 'false',
+                'aria-controls': `${options.id}-listbox`,
+                'aria-activedescendant': activeId === undefined ? undefined : commandPaletteItemDomId(options.id, activeId),
+                'aria-labelledby': options.labelId,
+                'aria-describedby': options.describedBy,
+            },
+        }),
+        listbox: createUiDomPlan('div', 'command-palette-listbox', {
+            state: options.items.length === 0 ? 'empty' : 'filled',
+            attrs: {
+                id: `${options.id}-listbox`,
+                role: 'listbox',
+            },
+        }),
+        groups: visibleGroups.map((group) => createUiDomPlan('div', 'command-palette-group', {
+            attrs: {
+                role: 'group',
+                'aria-labelledby': `${options.id}-${group.id}-group-label`,
+                'data-group-id': group.id,
+            },
+        })),
+        groupLabels: visibleGroups.map((group) => createUiDomPlan('div', 'command-palette-group-label', {
+            attrs: {
+                id: `${options.id}-${group.id}-group-label`,
+                'data-label': group.label,
+            },
+        })),
+        items: options.items.map((item) => {
+            const active = item.id === activeId;
+            const selected = item.id === options.selectedId;
+            return createUiDomPlan('div', 'command-palette-item', {
+                state: item.disabled === true ? 'disabled' : active ? 'active' : selected ? 'selected' : 'idle',
+                ...(item.disabled === true ? { disabled: true } : {}),
+                attrs: {
+                    id: commandPaletteItemDomId(options.id, item.id),
+                    role: 'option',
+                    tabindex: active && item.disabled !== true ? 0 : -1,
+                    'aria-selected': selected ? 'true' : 'false',
+                    'aria-disabled': item.disabled === true ? 'true' : undefined,
+                    'data-command-id': item.id,
+                    'data-kind': item.kind ?? 'action',
+                    'data-group-id': item.groupId,
+                    'data-label': item.label,
+                    'data-description': item.description,
+                    'data-href': item.href,
+                    'data-permission': item.permission,
+                    'data-recent': item.recent === true || item.kind === 'recent' ? 'true' : undefined,
+                    'data-disabled-reason': item.disabledReason,
+                },
+            });
+        }),
+        shortcuts: options.items.map((item) => createUiDomPlan('kbd', 'command-palette-shortcut', {
+            attrs: {
+                'aria-hidden': 'true',
+                'data-shortcut': item.shortcut,
+            },
+        })),
+        empty: options.items.length === 0
+            ? createUiDomPlan('div', 'command-palette-empty', {
+                attrs: {
+                    role: 'status',
+                    'aria-live': 'polite',
+                    'data-label': 'No commands found',
+                },
+            })
+            : undefined,
+    };
+}
+export function createCommandPalettePermissionRecentContract(options) {
+    const query = options.query?.trim() ?? '';
+    const keyword = query.toLowerCase();
+    const allowedIds = normalizeCommandIds(options.allowedIds);
+    const deniedIds = normalizeCommandIds(options.deniedIds);
+    const knownIds = new Set(options.items.map((item) => item.id));
+    const recentIds = normalizeCommandPaletteRecentIds(options.recentIds ?? [], knownIds, options.maxRecent);
+    const recentOrder = new Map(recentIds.map((id, index) => [id, index]));
+    const allContracts = options.items.map((item, index) => commandPalettePermissionRecentItemContract(item, {
+        allowedIds,
+        deniedIds,
+        disabledReason: normalizedDisabledReason(options.disabledReasons?.[item.id]),
+        index,
+        recent: recentOrder.has(item.id),
+        recentGroupId: (options.recentGroup ?? defaultCommandPaletteRecentGroup).id,
+    }));
+    const visibleContracts = allContracts
+        .filter((item) => keyword === '' || commandPaletteItemMatches(item.item, keyword))
+        .filter((item) => options.hideDenied !== true || item.permission === 'allowed')
+        .sort((a, b) => commandPaletteRecentSort(a, b, recentOrder));
+    const selected = allContracts.find((item) => item.id === options.selectedId);
+    const canPersistSelected = selected !== undefined && selected.permission === 'allowed' && selected.item.disabled !== true;
+    const nextRecentIds = canPersistSelected
+        ? normalizeCommandPaletteRecentIds([selected.id, ...recentIds.filter((id) => id !== selected.id)], knownIds, options.maxRecent)
+        : recentIds;
+    const allowedCount = allContracts.filter((item) => item.permission === 'allowed').length;
+    const deniedCount = allContracts.length - allowedCount;
+    const disabledReasonCount = allContracts.filter((item) => item.disabledReason !== '').length;
+    const visibleGroups = commandPaletteGroupsForItems(visibleContracts.map((item) => item.item), [options.recentGroup ?? defaultCommandPaletteRecentGroup, ...(options.groups ?? [])]);
+    const state = commandPalettePermissionRecentState({
+        deniedCount,
+        totalCount: allContracts.length,
+        visibleCount: visibleContracts.length,
+        query,
+    });
+    return {
+        state,
+        query,
+        totalCount: allContracts.length,
+        visibleCount: visibleContracts.length,
+        allowedCount,
+        deniedCount,
+        recentCount: recentIds.length,
+        disabledReasonCount,
+        recentIds,
+        nextRecentIds,
+        groups: visibleGroups,
+        items: visibleContracts,
+        attrs: {
+            'data-command-permission-recent-contract': 'true',
+            'data-state': state,
+            'data-command-query': query,
+            'data-total-count': allContracts.length,
+            'data-visible-count': visibleContracts.length,
+            'data-allowed-count': allowedCount,
+            'data-denied-count': deniedCount,
+            'data-recent-count': recentIds.length,
+            'data-disabled-reason-count': disabledReasonCount,
+            'data-recent-ids': recentIds.join(','),
+            'data-next-recent-ids': nextRecentIds.join(','),
+        },
+    };
+}
+export function getNextTabId(items, activeId, key, orientation = 'horizontal') {
+    return getNextRovingId(items, activeId, key, orientation, false);
+}
+export function filterCommandPaletteItems(items, query, limit = items.length) {
+    const keyword = query.trim().toLowerCase();
+    const result = [];
+    for (const item of items) {
+        if (keyword === '' || commandPaletteItemMatches(item, keyword)) {
+            result.push(item);
+            if (result.length >= limit)
+                break;
+        }
+    }
+    return result;
+}
+export function getNextCommandPaletteItemId(items, activeId, key) {
+    const enabled = items.filter((item) => item.disabled !== true);
+    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 shouldOpenCommandPaletteForKey(key, metaKey = false, ctrlKey = false) {
+    return key.toLowerCase() === 'k' && (metaKey || ctrlKey);
+}
+export function shouldCloseCommandPaletteForKey(key) {
+    return key === 'Escape';
+}
+export function shouldSelectCommandPaletteItem(key) {
+    return key === 'Enter';
+}
+export function createBreadcrumbPlans(items) {
+    return {
+        root: createUiDomPlan('nav', 'breadcrumb', {
+            attrs: { 'aria-label': 'Breadcrumb' },
+        }),
+        list: createUiDomPlan('ol', 'breadcrumb-list'),
+        items: items.map((item, index) => createUiDomPlan('li', 'breadcrumb-item', {
+            state: item.current === true || index === items.length - 1 ? 'current' : 'idle',
+            attrs: {
+                'data-href': item.href,
+                'aria-current': item.current === true ? 'page' : undefined,
+                'data-item-id': item.id,
+                'data-icon': item.icon === undefined ? undefined : String(item.icon),
+                'data-collapsed': item.collapsed === true ? 'true' : undefined,
+                'data-overflow': item.overflow === true ? 'true' : undefined,
+                'data-path-index': item.pathIndex,
+                'data-path-summary': item.pathSummary,
+            },
+        })),
+    };
+}
+export function createBreadcrumbResponsiveStateContract(options) {
+    const ids = breadcrumbIds(options.items);
+    const knownIds = new Set(ids);
+    const collapsedIds = normalizeKnownIds(options.collapsedIds, knownIds);
+    const iconIds = normalizeKnownIds(options.iconIds, knownIds);
+    const collapsedSet = new Set(collapsedIds);
+    const iconSet = new Set(iconIds);
+    const overflowId = options.overflowId !== undefined && knownIds.has(options.overflowId) ? options.overflowId : '';
+    const visibleLimit = options.maxVisible === undefined
+        ? options.items.length
+        : Math.max(1, Math.trunc(options.maxVisible));
+    const currentPathSummary = options.items.map((item) => item.label).join(' / ');
+    const items = options.items.map((item, index) => {
+        const id = ids[index] ?? String(index);
+        const overflow = id === overflowId;
+        const collapsed = !overflow &&
+            (collapsedSet.has(id) ||
+                (options.items.length > visibleLimit && index > 0 && index < options.items.length - 1));
+        return breadcrumbResponsiveItemContract(item, {
+            collapsed,
+            icon: iconSet.has(id) || item.icon !== undefined,
+            id,
+            overflow,
+            pathIndex: index,
+            pathSummary: currentPathSummary,
+        });
+    });
+    const visibleIds = items
+        .filter((item) => !item.collapsed || item.overflow)
+        .map((item) => item.id);
+    const state = items.length === 0
+        ? 'empty'
+        : items.some((item) => item.overflow)
+            ? 'overflow'
+            : items.some((item) => item.collapsed)
+                ? 'collapsed'
+                : 'expanded';
+    return {
+        state,
+        itemCount: items.length,
+        visibleCount: visibleIds.length,
+        collapsedCount: items.filter((item) => item.collapsed).length,
+        iconCount: items.filter((item) => item.icon).length,
+        overflowId,
+        currentPathSummary,
+        collapsedIds: items.filter((item) => item.collapsed).map((item) => item.id),
+        iconIds: items.filter((item) => item.icon).map((item) => item.id),
+        visibleIds,
+        items,
+        attrs: {
+            'data-breadcrumb-responsive-contract': 'true',
+            'data-breadcrumb-responsive-state': state,
+            'data-item-count': items.length,
+            'data-visible-count': visibleIds.length,
+            'data-collapsed-count': items.filter((item) => item.collapsed).length,
+            'data-icon-count': items.filter((item) => item.icon).length,
+            'data-overflow-id': overflowId,
+            'data-current-path-summary': currentPathSummary,
+            'data-collapsed-ids': items
+                .filter((item) => item.collapsed)
+                .map((item) => item.id)
+                .join(','),
+            'data-icon-ids': items
+                .filter((item) => item.icon)
+                .map((item) => item.id)
+                .join(','),
+            'data-visible-ids': visibleIds.join(','),
+        },
+    };
+}
+export function createMenuPlans(options) {
+    const activeId = activeMenuItemId(options.items, options.activeId);
+    const orientation = options.orientation ?? 'vertical';
+    return {
+        root: createUiDomPlan('div', 'menu', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: {
+                id: options.id,
+                role: 'menu',
+                'aria-label': options.label,
+                'aria-orientation': orientation,
+                ...options.attrs,
+                'data-orientation': orientation,
+                'data-count': options.items.length,
+            },
+        }),
+        items: options.items.map((item) => createMenuItemPlan(options.id, item, item.id === activeId)),
+        shortcuts: options.items.map((item) => item.shortcut === undefined
+            ? undefined
+            : createUiDomPlan('kbd', 'menu-item-shortcut', {
+                attrs: {
+                    'aria-hidden': 'true',
+                    'data-shortcut': item.shortcut,
+                },
+            })),
+    };
+}
+export function createMenuPermissionRemoteActionContract(options) {
+    const disabled = options.disabled === true;
+    const knownIds = new Set(options.items.map((item) => item.id));
+    const allowedInputIds = normalizeKnownIds(options.allowedIds, knownIds);
+    const deniedInputIds = normalizeKnownIds(options.deniedIds, knownIds);
+    const remoteActionInputIds = normalizeKnownIds(options.remoteActionIds, knownIds);
+    const remoteActionDisabledInputIds = normalizeKnownIds(options.remoteActionDisabledIds, knownIds);
+    const remoteActionLoadingInputIds = normalizeKnownIds(options.remoteActionLoadingIds, knownIds);
+    const submenuLoadingInputIds = normalizeKnownIds(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) => menuPermissionRemoteActionItemContract(item, {
+        denied: deniedSet.has(item.id),
+        disabled,
+        disabledReason: normalizedDisabledReason(options.disabledReasons?.[item.id]),
+        hasAllowedIds,
+        allowed: allowedSet.has(item.id),
+        remoteAction: remoteActionSet.has(item.id),
+        remoteActionDisabled: remoteActionDisabledSet.has(item.id),
+        remoteActionDisabledReason: normalizedDisabledReason(options.remoteActionDisabledReasons?.[item.id]),
+        remoteActionError: normalizedDisabledReason(options.remoteActionErrors?.[item.id]),
+        remoteActionLoading: remoteActionLoadingSet.has(item.id),
+        submenuError: normalizedDisabledReason(options.submenuErrors?.[item.id]),
+        submenuItemCount: normalizedMenuItemCount(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 = menuPermissionRemoteActionState({
+        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-menu-permission-remote-contract': 'true',
+            'data-menu-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 createMenuSubmenuPortalStateContract(options) {
+    const submenuIds = new Set(options.items.filter((item) => item.kind === 'submenu').map((item) => item.id));
+    const openPathIds = normalizeKnownIds(options.openPathIds, submenuIds);
+    const mountedInputIds = normalizeKnownIds(options.mountedIds, submenuIds);
+    const openSet = new Set(openPathIds);
+    const mountedSet = new Set(mountedInputIds);
+    const items = options.items
+        .filter((item) => item.kind === 'submenu')
+        .map((item) => menuSubmenuPortalItemContract(item, {
+        focusReturnId: normalizedDisabledReason(options.focusReturnIds?.[item.id]),
+        mounted: mountedSet.has(item.id),
+        openPathIndex: openPathIds.indexOf(item.id),
+        parentOverlayId: normalizedDisabledReason(options.parentOverlayIds?.[item.id]),
+        placement: options.placements?.[item.id],
+        portalTargetId: normalizedDisabledReason(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 = menuSubmenuPortalContractState({
+        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-menu-submenu-portal-contract': 'true',
+            'data-menu-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 getNextMenuItemId(items, activeId, key) {
+    return getNextRovingId(menuFocusableItems(items), activeId, key, 'vertical', true);
+}
+export function createDrawerOverlayPlans(options) {
+    const side = options.side ?? 'right';
+    const size = options.size ?? 'md';
+    const plans = createDialogOverlayPlans({ ...options, modal: true });
+    return {
+        ...plans,
+        surface: {
+            ...plans.surface,
+            className: classNames(plans.surface.className, 'kui-drawer', `kui-drawer--${side}`, `kui-drawer--${size}`, options.className),
+            attrs: {
+                ...plans.surface.attrs,
+                ...options.attrs,
+                'data-side': side,
+                'data-size': size,
+                'data-long-content': options.longContent === true ? 'true' : undefined,
+            },
+        },
+    };
+}
+export function createDrawerPlans(options) {
+    const side = options.side ?? 'right';
+    const size = options.size ?? 'md';
+    const plans = createDialogPlans({
+        id: options.id,
+        titleId: options.titleId,
+        modal: true,
+        size: size === 'full' ? 'lg' : size,
+        ...(options.descriptionId === undefined ? {} : { descriptionId: options.descriptionId }),
+        ...(options.closeLabel === undefined ? {} : { closeLabel: options.closeLabel }),
+    });
+    return {
+        ...plans,
+        side,
+        surface: {
+            ...plans.surface,
+            className: classNames(plans.surface.className, 'kui-drawer', `kui-drawer--${side}`, `kui-drawer--${size}`, options.className),
+            attrs: {
+                ...plans.surface.attrs,
+                ...options.attrs,
+                'data-side': side,
+                'data-size': size,
+                'data-long-content': options.longContent === true ? 'true' : undefined,
+            },
+        },
+    };
+}
+export function createDrawerNestedOverlayCoordinationContract(options) {
+    const nestedOverlayIds = normalizeUniqueIds(options.nestedOverlayIds);
+    const nestedOverlaySet = new Set(nestedOverlayIds);
+    const nestedModalIds = normalizeKnownIds(options.nestedModalIds, nestedOverlaySet);
+    const focusReturnId = normalizedDisabledReason(options.focusReturnId);
+    const activeOverlayId = normalizedDisabledReason(options.activeOverlayId) || nestedOverlayIds.at(-1) || '';
+    const scrollContainerId = normalizedDisabledReason(options.scrollContainerId);
+    const scrollContained = options.scrollContained === true || scrollContainerId !== '' || nestedOverlayIds.length > 0;
+    const actions = drawerPinnedActionContracts(options);
+    const pinnedActionIds = actions.map((action) => action.id);
+    const pendingActionIds = actions
+        .filter((action) => action.state === 'pending')
+        .map((action) => action.id);
+    const disabledActionIds = actions
+        .filter((action) => action.state === 'disabled')
+        .map((action) => action.id);
+    const state = drawerNestedOverlayCoordinationState({
+        focusReturnId,
+        nestedOverlayCount: nestedOverlayIds.length,
+        pendingActionCount: pendingActionIds.length,
+    });
+    return {
+        state,
+        nestedOverlayCount: nestedOverlayIds.length,
+        nestedModalCount: nestedModalIds.length,
+        pinnedActionCount: actions.length,
+        pendingActionCount: pendingActionIds.length,
+        disabledActionCount: disabledActionIds.length,
+        activeOverlayId,
+        focusReturnId,
+        scrollContainerId,
+        scrollContained,
+        nestedOverlayIds,
+        nestedModalIds,
+        pinnedActionIds,
+        pendingActionIds,
+        disabledActionIds,
+        actions,
+        attrs: {
+            'data-drawer-nested-overlay-contract': 'true',
+            'data-drawer-coordination-state': state,
+            'data-nested-overlay-count': nestedOverlayIds.length,
+            'data-nested-modal-count': nestedModalIds.length,
+            'data-active-overlay-id': activeOverlayId,
+            'data-nested-overlay-ids': nestedOverlayIds.join(','),
+            'data-nested-modal-ids': nestedModalIds.join(','),
+            'data-focus-return-id': focusReturnId,
+            'data-scroll-container-id': scrollContainerId,
+            'data-scroll-contained': scrollContained ? 'true' : undefined,
+            'data-pinned-action-count': actions.length,
+            'data-pending-action-count': pendingActionIds.length,
+            'data-disabled-action-count': disabledActionIds.length,
+            'data-pinned-action-ids': pinnedActionIds.join(','),
+            'data-pending-action-ids': pendingActionIds.join(','),
+            'data-disabled-action-ids': disabledActionIds.join(','),
+            'aria-busy': pendingActionIds.length > 0 ? 'true' : undefined,
+        },
+    };
+}
+export function createStepsPlans(options) {
+    const orientation = options.orientation ?? 'horizontal';
+    const currentId = options.currentId ?? options.items.find((item) => item.disabled !== true)?.id;
+    return {
+        root: createUiDomPlan('nav', 'steps', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: {
+                id: options.id,
+                'aria-label': options.label ?? 'Steps',
+                ...options.attrs,
+                'data-orientation': orientation,
+                'data-current-id': currentId,
+                'data-count': options.items.length,
+            },
+        }),
+        list: createUiDomPlan('ol', 'steps-list', { attrs: { role: 'list' } }),
+        items: options.items.map((item, index) => createUiDomPlan('li', 'step', {
+            state: stepStatus(item, currentId),
+            attrs: {
+                'data-step-id': item.id,
+                'data-index': index,
+                'data-status': stepStatus(item, currentId),
+                'data-timeline-index': item.timelineIndex,
+                'data-timeline-state': item.timelineState,
+                'data-previous-step-id': item.previousStepId,
+                'data-next-step-id': item.nextStepId,
+                'data-validation-state': item.validationState,
+                'data-blocking-reason': item.blockingReason,
+                'data-return-state': item.returnState,
+                'data-returnable': item.returnable === true ? 'true' : undefined,
+                'aria-invalid': item.validationState === 'invalid' ? 'true' : undefined,
+            },
+        })),
+        indicators: options.items.map((item, index) => createUiDomPlan('span', 'step-indicator', {
+            attrs: {
+                'aria-hidden': 'true',
+                'data-step-id': item.id,
+                'data-index': index + 1,
+                'data-status': stepStatus(item, currentId),
+            },
+        })),
+        triggers: options.items.map((item) => createStepTriggerPlan(item, currentId, options.clickable)),
+        descriptions: options.items.map((item) => item.description === undefined
+            ? undefined
+            : createUiDomPlan('p', 'step-description', {
+                attrs: { 'data-description': item.description },
+            })),
+    };
+}
+export function getNextStepId(items, activeId, key, orientation = 'horizontal') {
+    return getNextRovingId(items, activeId, key, orientation, false);
+}
+export function createStepsTimelineValidationContract(options) {
+    const knownIds = new Set(options.items.map((item) => item.id));
+    const completedIds = normalizeKnownIds(options.completedIds, knownIds);
+    const returnableInputIds = normalizeKnownIds(options.returnableIds, knownIds);
+    const completedSet = new Set(completedIds);
+    const returnableSet = new Set(returnableInputIds);
+    const currentId = options.currentId !== undefined && knownIds.has(options.currentId)
+        ? options.currentId
+        : (options.items.find((item) => item.disabled !== true)?.id ?? '');
+    const currentIndex = options.items.findIndex((item) => item.id === currentId);
+    const items = options.items.map((item, index) => stepsTimelineValidationItemContract(item, {
+        blockingReason: normalizedDisabledReason(options.blockingReasons?.[item.id]),
+        completed: completedSet.has(item.id),
+        current: item.id === currentId,
+        currentIndex,
+        index,
+        nextStepId: options.items[index + 1]?.id ?? '',
+        previousStepId: options.items[index - 1]?.id ?? '',
+        returnable: returnableSet.has(item.id),
+        validationState: options.validationStates?.[item.id],
+    }));
+    const returnableIds = items
+        .filter((item) => item.returnState === 'returnable')
+        .map((item) => item.id);
+    const blockedIds = items
+        .filter((item) => item.validationState === 'blocked')
+        .map((item) => item.id);
+    const invalidIds = items
+        .filter((item) => item.validationState === 'invalid')
+        .map((item) => item.id);
+    const warningIds = items
+        .filter((item) => item.validationState === 'warning')
+        .map((item) => item.id);
+    const state = stepsTimelineValidationState({
+        blockedCount: blockedIds.length,
+        invalidCount: invalidIds.length,
+        stepCount: options.items.length,
+        warningCount: warningIds.length,
+    });
+    return {
+        state,
+        currentId,
+        stepCount: options.items.length,
+        completedCount: completedIds.length,
+        returnableCount: returnableIds.length,
+        blockedCount: blockedIds.length,
+        invalidCount: invalidIds.length,
+        warningCount: warningIds.length,
+        completedIds,
+        returnableIds,
+        blockedIds,
+        invalidIds,
+        warningIds,
+        items,
+        attrs: {
+            'data-steps-timeline-validation-contract': 'true',
+            'data-steps-validation-state': state,
+            'data-current-step-id': currentId,
+            'data-step-count': options.items.length,
+            'data-completed-step-count': completedIds.length,
+            'data-returnable-step-count': returnableIds.length,
+            'data-blocked-step-count': blockedIds.length,
+            'data-invalid-step-count': invalidIds.length,
+            'data-warning-step-count': warningIds.length,
+            'data-completed-step-ids': completedIds.join(','),
+            'data-returnable-step-ids': returnableIds.join(','),
+            'data-blocked-step-ids': blockedIds.join(','),
+            'data-invalid-step-ids': invalidIds.join(','),
+            'data-warning-step-ids': warningIds.join(','),
+        },
+    };
+}
+export function createCollapsePlans(options) {
+    const mode = options.mode ?? 'multiple';
+    const openIds = normalizedOpenIds(options.openIds);
+    const effectiveOpenIds = mode === 'accordion' ? new Set([...openIds].slice(0, 1)) : new Set(openIds);
+    return {
+        root: createUiDomPlan('div', 'collapse', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: {
+                id: options.id,
+                role: mode === 'accordion' ? 'presentation' : undefined,
+                'aria-label': options.label,
+                ...options.attrs,
+                'data-mode': mode,
+                'data-open-count': effectiveOpenIds.size,
+                'data-animated': options.animated === true ? 'true' : undefined,
+            },
+        }),
+        items: options.items.map((item) => {
+            const open = effectiveOpenIds.has(item.id);
+            return createUiDomPlan('div', 'collapse-item', {
+                state: item.disabled === true ? 'disabled' : open ? 'open' : 'closed',
+                ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+                attrs: {
+                    'data-item-id': item.id,
+                    'data-open': open ? 'true' : 'false',
+                    'data-lazy-state': item.lazyState,
+                    'data-lazy-error': item.lazyError,
+                    'data-persisted-open': item.persistedOpen === true ? 'true' : undefined,
+                    'data-nested-level': item.nestedLevel,
+                    'data-parent-panel-id': item.parentPanelId,
+                    'data-disabled-reason': item.disabledReason,
+                },
+            });
+        }),
+        triggers: options.items.map((item) => {
+            const open = effectiveOpenIds.has(item.id);
+            return createUiDomPlan('button', 'collapse-trigger', {
+                state: item.disabled === true ? 'disabled' : open ? 'open' : 'closed',
+                ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+                attrs: {
+                    id: `${options.id}-${item.id}-trigger`,
+                    type: 'button',
+                    'aria-expanded': open ? 'true' : 'false',
+                    'aria-controls': `${options.id}-${item.id}-panel`,
+                    'data-item-id': item.id,
+                    'data-title': item.title,
+                    'data-lazy-state': item.lazyState,
+                    'data-lazy-error': item.lazyError,
+                    'data-persisted-open': item.persistedOpen === true ? 'true' : undefined,
+                    'data-nested-level': item.nestedLevel,
+                    'data-parent-panel-id': item.parentPanelId,
+                    'data-disabled-reason': item.disabledReason,
+                    'aria-busy': item.lazyState === 'loading' ? 'true' : undefined,
+                },
+            });
+        }),
+        indicators: options.items.map((item) => createUiDomPlan('span', 'collapse-indicator', {
+            attrs: {
+                'aria-hidden': 'true',
+                'data-item-id': item.id,
+                'data-open': effectiveOpenIds.has(item.id) ? 'true' : 'false',
+                'data-lazy-state': item.lazyState,
+            },
+        })),
+        panels: options.items.map((item) => {
+            const open = effectiveOpenIds.has(item.id);
+            return createUiDomPlan('div', 'collapse-panel', {
+                state: open ? 'open' : 'closed',
+                attrs: {
+                    id: `${options.id}-${item.id}-panel`,
+                    role: 'region',
+                    'aria-labelledby': `${options.id}-${item.id}-trigger`,
+                    hidden: open ? undefined : true,
+                    'data-item-id': item.id,
+                    'data-description': item.description,
+                    'data-lazy-state': item.lazyState,
+                    'data-lazy-error': item.lazyError,
+                    'data-persisted-open': item.persistedOpen === true ? 'true' : undefined,
+                    'data-nested-level': item.nestedLevel,
+                    'data-parent-panel-id': item.parentPanelId,
+                    'aria-busy': item.lazyState === 'loading' ? 'true' : undefined,
+                },
+            });
+        }),
+    };
+}
+export function createCollapseLazyPersistenceContract(options) {
+    const knownIds = new Set(options.items.map((item) => item.id));
+    const openIds = normalizeKnownIds(options.openIds, knownIds);
+    const persistedOpenIds = normalizeKnownIds(options.persistedOpenIds, knownIds);
+    const lazyLoadingIds = normalizeKnownIds(options.lazyLoadingIds, knownIds);
+    const lazyLoadedIds = normalizeKnownIds(options.lazyLoadedIds, knownIds);
+    const persistedOpenSet = new Set(persistedOpenIds);
+    const lazyLoadingSet = new Set(lazyLoadingIds);
+    const lazyLoadedSet = new Set(lazyLoadedIds);
+    const items = options.items.map((item) => collapseLazyPersistenceItemContract(item, {
+        disabledReason: normalizedDisabledReason(options.disabledReasons?.[item.id]),
+        lazyError: normalizedDisabledReason(options.lazyErrors?.[item.id]),
+        lazyLoaded: lazyLoadedSet.has(item.id),
+        lazyLoading: lazyLoadingSet.has(item.id),
+        nestedLevel: normalizedMenuItemCount(options.nestedLevels?.[item.id]) ?? 0,
+        parentPanelId: normalizedDisabledReason(options.nestedParents?.[item.id]),
+        persistedOpen: persistedOpenSet.has(item.id),
+    }));
+    const lazyErrorIds = items.filter((item) => item.lazyState === 'error').map((item) => item.id);
+    const disabledReasonIds = items
+        .filter((item) => item.disabledReason !== '')
+        .map((item) => item.id);
+    const nestedIds = items.filter((item) => item.nestedLevel > 0).map((item) => item.id);
+    const state = lazyLoadingIds.length > 0
+        ? 'loading'
+        : lazyErrorIds.length > 0
+            ? 'lazy-error'
+            : disabledReasonIds.length > 0
+                ? 'disabled-limited'
+                : 'ready';
+    const persistenceState = persistedOpenIds.length === 0
+        ? 'empty'
+        : arraysEqual(openIds, persistedOpenIds)
+            ? 'restored'
+            : 'dirty';
+    return {
+        state,
+        persistenceState,
+        itemCount: items.length,
+        lazyLoadingCount: lazyLoadingIds.length,
+        lazyLoadedCount: lazyLoadedIds.length,
+        lazyErrorCount: lazyErrorIds.length,
+        persistedOpenCount: persistedOpenIds.length,
+        disabledReasonCount: disabledReasonIds.length,
+        nestedCount: nestedIds.length,
+        openIds,
+        persistedOpenIds,
+        lazyLoadingIds,
+        lazyLoadedIds,
+        lazyErrorIds,
+        disabledReasonIds,
+        nestedIds,
+        items,
+        attrs: {
+            'data-collapse-lazy-persistence-contract': 'true',
+            'data-collapse-advanced-state': state,
+            'data-collapse-persistence-state': persistenceState,
+            'data-item-count': items.length,
+            'data-lazy-loading-count': lazyLoadingIds.length,
+            'data-lazy-loaded-count': lazyLoadedIds.length,
+            'data-lazy-error-count': lazyErrorIds.length,
+            'data-persisted-open-count': persistedOpenIds.length,
+            'data-disabled-reason-count': disabledReasonIds.length,
+            'data-nested-count': nestedIds.length,
+            'data-open-ids': openIds.join(','),
+            'data-persisted-open-ids': persistedOpenIds.join(','),
+            'data-lazy-loading-ids': lazyLoadingIds.join(','),
+            'data-lazy-loaded-ids': lazyLoadedIds.join(','),
+            'data-lazy-error-ids': lazyErrorIds.join(','),
+            'data-disabled-reason-ids': disabledReasonIds.join(','),
+            'data-nested-ids': nestedIds.join(','),
+            'aria-busy': lazyLoadingIds.length > 0 ? 'true' : undefined,
+        },
+    };
+}
+export function getNextCollapseTriggerId(items, activeId, key) {
+    return getNextRovingId(items.map((item) => ({
+        id: item.id,
+        label: item.title,
+        ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+    })), activeId, key, 'vertical', true);
+}
+export function getNextAccordionOpenIds(openIds, itemId) {
+    return openIds.has(itemId) ? new Set() : new Set([itemId]);
+}
+export function getNextCollapseOpenIds(openIds, itemId) {
+    const next = new Set(openIds);
+    if (next.has(itemId)) {
+        next.delete(itemId);
+    }
+    else {
+        next.add(itemId);
+    }
+    return next;
+}
+function commandPaletteItemDomId(rootId, itemId) {
+    return `${rootId}-${itemId}-command`;
+}
+const defaultCommandPaletteRecentGroup = { id: 'recent', label: 'Recent' };
+function commandPalettePermissionRecentItemContract(item, options) {
+    const permission = options.deniedIds.has(item.id) ||
+        (options.allowedIds.size > 0 && !options.allowedIds.has(item.id))
+        ? 'denied'
+        : 'allowed';
+    const disabledReason = permission === 'denied' && options.disabledReason === ''
+        ? 'Permission required'
+        : options.disabledReason;
+    const disabled = item.disabled === true || permission === 'denied';
+    const contractItem = {
+        ...item,
+        ...(options.recent ? { groupId: options.recentGroupId, kind: 'recent', recent: true } : {}),
+        disabled,
+        ...(disabledReason === '' ? {} : { disabledReason }),
+        permission,
+    };
+    return {
+        id: item.id,
+        index: options.index,
+        item: contractItem,
+        permission,
+        recent: options.recent,
+        disabledReason,
+        attrs: {
+            'data-command-id': item.id,
+            'data-permission': permission,
+            'data-recent': options.recent ? 'true' : undefined,
+            'data-disabled-reason': disabledReason,
+            'aria-disabled': disabled ? 'true' : undefined,
+        },
+    };
+}
+function commandPaletteGroupsForItems(items, groups) {
+    const seen = new Set();
+    const result = [];
+    for (const item of items) {
+        const groupId = item.groupId;
+        if (groupId === undefined || seen.has(groupId))
+            continue;
+        seen.add(groupId);
+        result.push(groups.find((group) => group.id === groupId) ?? { id: groupId, label: groupId });
+    }
+    return result;
+}
+function commandPaletteItemMatches(item, keyword) {
+    return (item.label.toLowerCase().includes(keyword) ||
+        item.description?.toLowerCase().includes(keyword) === true ||
+        item.href?.toLowerCase().includes(keyword) === true ||
+        item.keywords?.some((value) => value.toLowerCase().includes(keyword)) === true);
+}
+function commandPaletteRecentSort(a, b, recentOrder) {
+    const aRecent = recentOrder.get(a.id);
+    const bRecent = recentOrder.get(b.id);
+    if (aRecent !== undefined && bRecent !== undefined)
+        return aRecent - bRecent;
+    if (aRecent !== undefined)
+        return -1;
+    if (bRecent !== undefined)
+        return 1;
+    return a.index - b.index;
+}
+function commandPalettePermissionRecentState(options) {
+    if (options.totalCount === 0)
+        return 'empty';
+    if (options.visibleCount === 0)
+        return 'filtered';
+    if (options.deniedCount > 0)
+        return 'permission-limited';
+    return 'ready';
+}
+function normalizeCommandIds(value) {
+    if (value === undefined)
+        return new Set();
+    const values = Array.isArray(value)
+        ? value
+        : [...value];
+    return new Set(values.filter((id) => id.length > 0));
+}
+function normalizeUniqueIds(value) {
+    if (value === undefined)
+        return [];
+    const result = [];
+    for (const id of value) {
+        if (id === '' || result.includes(id))
+            continue;
+        result.push(id);
+    }
+    return result;
+}
+function normalizeKnownIds(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 normalizeCommandPaletteRecentIds(value, knownIds, maxRecent = value.length) {
+    const limit = Math.max(0, Math.trunc(maxRecent));
+    if (limit === 0)
+        return [];
+    const result = [];
+    for (const id of value) {
+        if (!knownIds.has(id) || result.includes(id))
+            continue;
+        result.push(id);
+        if (result.length >= limit)
+            break;
+    }
+    return result;
+}
+function normalizedDisabledReason(value) {
+    return value?.trim() ?? '';
+}
+function normalizedMenuItemCount(value) {
+    if (value === undefined || !Number.isFinite(value))
+        return undefined;
+    return Math.max(0, Math.trunc(value));
+}
+function drawerPinnedActionContracts(options) {
+    const actions = options.pinnedActions ?? [];
+    const knownIds = new Set(actions.map((action) => action.id));
+    const pendingIds = new Set(normalizeKnownIds(options.pendingActionIds, knownIds));
+    const disabledIds = new Set(normalizeKnownIds(options.disabledActionIds, knownIds));
+    return actions
+        .filter((action, index) => action.id !== '' && actions.findIndex((item) => item.id === action.id) === index)
+        .map((action) => drawerPinnedActionContract(action, {
+        disabled: disabledIds.has(action.id),
+        disabledReason: normalizedDisabledReason(options.disabledReasons?.[action.id]),
+        pending: pendingIds.has(action.id),
+    }));
+}
+function drawerPinnedActionContract(action, options) {
+    const pending = options.pending || action.pending === true;
+    const disabled = options.disabled || action.disabled === true;
+    const disabledReason = options.disabledReason || normalizedDisabledReason(action.disabledReason);
+    const state = pending ? 'pending' : disabled ? 'disabled' : 'available';
+    const contractAction = {
+        ...action,
+        ...(disabled ? { disabled: true } : {}),
+        ...(pending ? { pending: true } : {}),
+        ...(disabledReason === '' ? {} : { disabledReason }),
+    };
+    return {
+        id: action.id,
+        action: contractAction,
+        state,
+        disabledReason,
+        attrs: {
+            'data-action-id': action.id,
+            'data-pinned-action-state': state,
+            'data-disabled-reason': disabledReason,
+            'aria-disabled': state === 'disabled' ? 'true' : undefined,
+            'aria-busy': state === 'pending' ? 'true' : undefined,
+        },
+    };
+}
+function drawerNestedOverlayCoordinationState(options) {
+    if (options.pendingActionCount > 0)
+        return 'action-pending';
+    if (options.nestedOverlayCount > 0)
+        return 'nested-overlay-open';
+    if (options.focusReturnId !== '')
+        return 'focus-return-ready';
+    return 'idle';
+}
+function collapseLazyPersistenceItemContract(item, options) {
+    const lazyState = options.lazyLoading && options.lazyError === ''
+        ? 'loading'
+        : options.lazyError !== ''
+            ? 'error'
+            : options.lazyLoaded
+                ? 'loaded'
+                : (item.lazyState ?? 'idle');
+    const disabledReason = options.disabledReason || normalizedDisabledReason(item.disabledReason);
+    const nestedLevel = Math.max(0, options.nestedLevel);
+    const contractItem = {
+        ...item,
+        lazyState,
+        ...(options.lazyError === '' ? {} : { lazyError: options.lazyError }),
+        ...(options.persistedOpen ? { persistedOpen: true } : {}),
+        ...(nestedLevel === 0 ? {} : { nestedLevel }),
+        ...(options.parentPanelId === '' ? {} : { parentPanelId: options.parentPanelId }),
+        ...(disabledReason === '' ? {} : { disabled: true, disabledReason }),
+    };
+    return {
+        id: item.id,
+        item: contractItem,
+        lazyState,
+        lazyError: options.lazyError,
+        persistedOpen: options.persistedOpen,
+        disabledReason,
+        nestedLevel,
+        parentPanelId: options.parentPanelId,
+        attrs: {
+            'data-item-id': item.id,
+            'data-lazy-state': lazyState,
+            'data-lazy-error': options.lazyError,
+            'data-persisted-open': options.persistedOpen ? 'true' : undefined,
+            'data-nested-level': nestedLevel,
+            'data-parent-panel-id': options.parentPanelId,
+            'data-disabled-reason': disabledReason,
+            'aria-disabled': disabledReason !== '' ? 'true' : undefined,
+            'aria-busy': lazyState === 'loading' ? 'true' : undefined,
+        },
+    };
+}
+function breadcrumbIds(items) {
+    return items.map((item, index) => item.id ?? item.href ?? String(index));
+}
+function breadcrumbResponsiveItemContract(item, options) {
+    const contractItem = {
+        ...item,
+        id: options.id,
+        ...(options.icon ? { icon: item.icon ?? true } : {}),
+        ...(options.collapsed ? { collapsed: true } : {}),
+        ...(options.overflow ? { overflow: true } : {}),
+        pathIndex: options.pathIndex,
+        pathSummary: options.pathSummary,
+    };
+    return {
+        id: options.id,
+        item: contractItem,
+        collapsed: options.collapsed,
+        icon: options.icon,
+        overflow: options.overflow,
+        pathIndex: options.pathIndex,
+        pathSummary: options.pathSummary,
+        attrs: {
+            'data-item-id': options.id,
+            'data-icon': options.icon ? String(contractItem.icon ?? true) : undefined,
+            'data-collapsed': options.collapsed ? 'true' : undefined,
+            'data-overflow': options.overflow ? 'true' : undefined,
+            'data-path-index': options.pathIndex,
+            'data-path-summary': options.pathSummary,
+            'aria-hidden': options.collapsed && !options.overflow ? 'true' : undefined,
+        },
+    };
+}
+function tabsOverflowPersistenceItemContract(item, options) {
+    const contractItem = {
+        ...item,
+        ...(options.disabledReason === ''
+            ? {}
+            : { disabled: true, disabledReason: options.disabledReason }),
+        ...(options.overflow ? { overflow: true } : {}),
+        ...(options.persistedActive ? { persistedActive: true } : {}),
+    };
+    return {
+        id: item.id,
+        item: contractItem,
+        active: options.active,
+        overflow: options.overflow,
+        persistedActive: options.persistedActive,
+        disabledReason: options.disabledReason,
+        attrs: {
+            'data-tab-id': item.id,
+            'data-overflow': options.overflow ? 'true' : undefined,
+            'data-persisted-active': options.persistedActive ? 'true' : undefined,
+            'data-disabled-reason': options.disabledReason,
+            'aria-disabled': options.disabledReason !== '' ? 'true' : undefined,
+        },
+    };
+}
+function arraysEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return a.every((value, index) => value === b[index]);
+}
+function getNextRovingId(items, activeId, key, orientation, verticalKeys) {
+    const enabled = items.filter((item) => item.disabled !== true);
+    if (enabled.length === 0)
+        return activeId;
+    const currentIndex = Math.max(0, enabled.findIndex((item) => item.id === activeId));
+    const previousKey = orientation === 'vertical' || verticalKeys ? 'ArrowUp' : 'ArrowLeft';
+    const nextKey = orientation === 'vertical' || verticalKeys ? 'ArrowDown' : 'ArrowRight';
+    if (key === 'Home')
+        return enabled[0]?.id ?? activeId;
+    if (key === 'End')
+        return enabled.at(-1)?.id ?? activeId;
+    if (key === previousKey)
+        return enabled.at(currentIndex - 1)?.id ?? enabled.at(-1)?.id ?? activeId;
+    if (key === nextKey)
+        return enabled[(currentIndex + 1) % enabled.length]?.id ?? activeId;
+    return activeId;
+}
+function menuFocusableItems(items) {
+    return items.filter((item) => item.disabled !== true && menuItemFocusable(item));
+}
+function activeMenuItemId(items, activeId) {
+    const focusable = menuFocusableItems(items);
+    return focusable.some((item) => item.id === activeId) ? activeId : focusable[0]?.id;
+}
+function menuItemFocusable(item) {
+    return item.kind !== 'separator' && item.kind !== 'section';
+}
+function createMenuItemPlan(rootId, item, active) {
+    const kind = item.kind ?? 'item';
+    const separator = kind === 'separator';
+    const section = kind === 'section';
+    const submenuState = menuItemSubmenuState(item);
+    const remoteActionState = menuItemRemoteActionState(item);
+    return createUiDomPlan('div', section ? 'menu-section' : 'menu-item', {
+        state: item.disabled === true
+            ? 'disabled'
+            : active
+                ? 'active'
+                : item.checked === true
+                    ? 'checked'
+                    : 'idle',
+        ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+        ...(item.danger === true ? { className: 'kui-menu-item--danger' } : {}),
+        attrs: {
+            id: `${rootId}-${item.id}`,
+            role: separator ? 'separator' : section ? 'presentation' : menuItemRole(kind),
+            tabindex: menuItemFocusable(item) ? (active ? 0 : -1) : undefined,
+            'aria-checked': kind === 'checkbox' || kind === 'radio'
+                ? item.checked === true
+                    ? 'true'
+                    : 'false'
+                : undefined,
+            'aria-haspopup': kind === 'submenu' ? 'menu' : undefined,
+            'aria-expanded': kind === 'submenu' ? (item.expanded === true ? 'true' : 'false') : undefined,
+            'aria-disabled': item.disabled === true ? 'true' : undefined,
+            'aria-busy': item.remoteActionLoading === true || item.submenuLoading === true ? 'true' : undefined,
+            'data-menu-id': rootId,
+            'data-item-id': item.id,
+            'data-kind': kind,
+            'data-label': item.label,
+            'data-shortcut': item.shortcut,
+            'data-section-id': item.sectionId,
+            'data-danger': item.danger === true ? 'true' : undefined,
+            '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 menuSubmenuPortalItemContract(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 menuPermissionRemoteActionItemContract(item, options) {
+    const permission = options.denied || (options.hasAllowedIds && !options.allowed) ? 'denied' : 'allowed';
+    const baseDisabledReason = options.disabledReason || normalizedDisabledReason(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 ||
+        normalizedDisabledReason(item.remoteActionError) !== '';
+    const remoteActionError = options.remoteActionError || normalizedDisabledReason(item.remoteActionError);
+    const remoteActionDisabled = options.remoteActionDisabled || item.remoteActionDisabled === true;
+    const remoteActionLoading = options.remoteActionLoading || item.remoteActionLoading === true;
+    const remoteActionDisabledReason = options.remoteActionDisabledReason || normalizedDisabledReason(item.remoteActionDisabledReason);
+    const remoteActionState = remoteActionLoading && remoteActionError === ''
+        ? 'pending'
+        : remoteActionDisabled || disabled || remoteActionError !== ''
+            ? 'disabled'
+            : 'available';
+    const submenuError = options.submenuError || normalizedDisabledReason(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 = menuItemSubmenuState(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 menuPermissionRemoteActionState(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 menuSubmenuPortalContractState(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 menuItemRemoteActionState(item) {
+    if (item.remoteAction !== true)
+        return undefined;
+    if (item.remoteActionLoading === true &&
+        normalizedDisabledReason(item.remoteActionError) === '') {
+        return 'pending';
+    }
+    if (item.remoteActionDisabled === true ||
+        item.disabled === true ||
+        normalizedDisabledReason(item.remoteActionError) !== '') {
+        return 'disabled';
+    }
+    return 'available';
+}
+function menuItemSubmenuState(item) {
+    if (item.kind !== 'submenu')
+        return undefined;
+    if (item.submenuLoading === true)
+        return 'loading';
+    if (normalizedDisabledReason(item.submenuError) !== '')
+        return 'error';
+    if (item.expanded === true)
+        return 'open';
+    if ((item.submenuItemCount ?? 0) > 0)
+        return 'ready';
+    return 'closed';
+}
+function menuItemRole(kind) {
+    if (kind === 'checkbox')
+        return 'menuitemcheckbox';
+    if (kind === 'radio')
+        return 'menuitemradio';
+    return 'menuitem';
+}
+function stepStatus(item, currentId) {
+    if (item.disabled === true)
+        return 'disabled';
+    if (item.status !== undefined)
+        return item.status;
+    if (item.id === currentId)
+        return 'current';
+    return 'pending';
+}
+function stepsTimelineValidationItemContract(item, options) {
+    const timelineState = options.current
+        ? 'current'
+        : options.currentIndex >= 0 && options.index < options.currentIndex
+            ? 'past'
+            : options.completed
+                ? 'past'
+                : 'future';
+    const blockingReason = options.blockingReason || normalizedDisabledReason(item.blockingReason);
+    const validationState = blockingReason !== ''
+        ? 'blocked'
+        : (options.validationState ??
+            item.validationState ??
+            (options.completed ? 'valid' : 'unchecked'));
+    const returnable = options.returnable && !options.current && item.disabled !== true;
+    const returnState = options.current
+        ? 'current'
+        : returnable
+            ? 'returnable'
+            : 'locked';
+    const contractItem = {
+        ...item,
+        timelineIndex: options.index,
+        timelineState,
+        validationState,
+        ...(blockingReason === '' ? {} : { blockingReason }),
+        returnState,
+        ...(returnable ? { returnable: true } : {}),
+        ...(options.previousStepId === '' ? {} : { previousStepId: options.previousStepId }),
+        ...(options.nextStepId === '' ? {} : { nextStepId: options.nextStepId }),
+        ...(validationState === 'blocked' ? { disabled: true } : {}),
+        ...(validationState === 'blocked' || validationState === 'invalid'
+            ? { status: validationState === 'invalid' ? 'error' : 'disabled' }
+            : {}),
+    };
+    return {
+        id: item.id,
+        item: contractItem,
+        timelineIndex: options.index,
+        timelineState,
+        validationState,
+        blockingReason,
+        returnState,
+        previousStepId: options.previousStepId,
+        nextStepId: options.nextStepId,
+        attrs: {
+            'data-step-id': item.id,
+            'data-timeline-index': options.index,
+            'data-timeline-state': timelineState,
+            'data-previous-step-id': options.previousStepId,
+            'data-next-step-id': options.nextStepId,
+            'data-validation-state': validationState,
+            'data-blocking-reason': blockingReason,
+            'data-return-state': returnState,
+            'data-returnable': returnable ? 'true' : undefined,
+            'aria-invalid': validationState === 'invalid' ? 'true' : undefined,
+            'aria-disabled': validationState === 'blocked' ? 'true' : undefined,
+        },
+    };
+}
+function stepsTimelineValidationState(options) {
+    if (options.stepCount === 0)
+        return 'empty';
+    if (options.blockedCount > 0)
+        return 'blocked';
+    if (options.invalidCount > 0)
+        return 'invalid';
+    if (options.warningCount > 0)
+        return 'warning';
+    return 'ready';
+}
+function createStepTriggerPlan(item, currentId, clickable = false) {
+    const status = stepStatus(item, currentId);
+    const active = item.id === currentId;
+    const interactive = clickable && item.disabled !== true;
+    const tag = interactive ? (item.href === undefined ? 'button' : 'a') : 'span';
+    return createUiDomPlan(tag, 'step-trigger', {
+        ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+        state: status,
+        attrs: {
+            type: tag === 'button' ? 'button' : undefined,
+            href: tag === 'a' ? item.href : undefined,
+            tabindex: interactive ? 0 : undefined,
+            'aria-current': active ? 'step' : undefined,
+            'aria-disabled': item.disabled === true ? 'true' : undefined,
+            'data-step-id': item.id,
+            'data-label': item.label,
+            'data-status': status,
+            'data-clickable': interactive ? 'true' : undefined,
+            'data-timeline-index': item.timelineIndex,
+            'data-timeline-state': item.timelineState,
+            'data-previous-step-id': item.previousStepId,
+            'data-next-step-id': item.nextStepId,
+            'data-validation-state': item.validationState,
+            'data-blocking-reason': item.blockingReason,
+            'data-return-state': item.returnState,
+            'data-returnable': item.returnable === true ? 'true' : undefined,
+            'aria-invalid': item.validationState === 'invalid' ? 'true' : undefined,
+        },
+    });
+}
+function normalizedOpenIds(value) {
+    if (value === undefined)
+        return new Set();
+    return value instanceof Set ? value : new Set(value);
+}
+export function createNavListPlans(options) {
+    const groups = options.groups.map((group) => {
+        const items = group.items.map((item) => {
+            const state = item.disabled === true ? 'disabled' : item.active === true ? 'active' : 'idle';
+            const plan = createUiDomPlan(item.href === undefined ? 'button' : 'a', 'nav-list-item', {
+                state,
+                ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+                ...(item.href === undefined ? {} : { attrs: { href: item.href } }),
+            });
+            return {
+                ...plan,
+                itemId: item.id,
+                state,
+                ...(item.icon === undefined
+                    ? {}
+                    : {
+                        icon: createUiDomPlan('img', 'nav-list-icon', {
+                            attrs: { alt: '', 'data-icon': item.icon },
+                        }),
+                    }),
+                label: createUiDomPlan('span', 'nav-list-label', {
+                    ...(item.label === undefined ? {} : { attrs: { 'data-label': item.label } }),
+                }),
+                ...(item.badge === undefined
+                    ? {}
+                    : {
+                        badge: createUiDomPlan('span', 'nav-list-badge', {
+                            attrs: { 'data-label': String(item.badge) },
+                        }),
+                    }),
+            };
+        });
+        return {
+            ...createUiDomPlan('div', 'nav-list-group', {
+                attrs: { id: `${options.id}-group-${group.id}` },
+            }),
+            groupId: group.id,
+            title: createUiDomPlan('div', 'nav-list-group-title', {
+                attrs: { id: `${options.id}-group-${group.id}-title`, 'data-label': group.title },
+            }),
+            items,
+        };
+    });
+    return {
+        root: createUiDomPlan('nav', 'nav-list', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: { id: `${options.id}-nav`, ...options.attrs },
+        }),
+        groups,
+    };
+}