@vobs/ui 0.3.0 → 1.0.0

package/dist/app-shell-dom.js

@@ -1,913 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { createIconElement } from '@vobs/icons';
-import { effect } from '@vobs/reactivity';
-import {} from '@vobs/runtime-dom';
-import { resolveUiIcon } from './icons.js';
-import { brandPresets, createStorageThemePersistence, createMediaThemePreference, createThemeController, resolveBrandColor, THEME_PREFERENCE_CHANGE_EVENT, THEME_STATE_CHANGE_EVENT, } from './theme.js';
-import { resolveAppShellText } from './app-shell.js';
-function appShellTranslate(scope) {
-    const translation = scope.translation;
-    return translation === undefined ? undefined : (key) => translation.t(key);
-}
-const defaultBrandCycle = brandPresets.map((brand) => brand.id);
-export function createAppShellFrame(shell, scope, environment) {
-    const root = document.createElement('div');
-    root.className = joinClasses('kui-app-shell', shell.className);
-    root.setAttribute('data-vobs-template', 'k-app-shell');
-    root.setAttribute('data-vobs-protocol', '1');
-    root.setAttribute('data-app-shell', shell.id);
-    root.setAttribute('data-sidebar-mode', shell.sidebarMode ?? 'expanded');
-    root.setAttribute('data-content-mode', shell.contentMode ?? 'contained');
-    setOptionalAttribute(root, 'data-theme-mode', shell.theme?.mode);
-    setOptionalAttribute(root, 'data-accent', shell.theme?.accent);
-    const brand = createBrand(shell, scope, environment);
-    const topbar = document.createElement('header');
-    topbar.className = 'kui-app-shell-topbar';
-    topbar.setAttribute('data-app-shell-region', 'topbar');
-    topbar.append(brand, createTopbarActions(shell, scope, environment));
-    const sidebar = document.createElement('aside');
-    sidebar.className = 'kui-app-shell-sidebar';
-    sidebar.setAttribute('data-app-shell-region', 'sidebar');
-    const brandLabel = resolveAppShellText(shell.brand.label, appShellTranslate(scope)) ?? '';
-    sidebar.setAttribute('aria-label', `${brandLabel} navigation`);
-    sidebar.setAttribute('data-sidebar-mode', shell.sidebarMode ?? 'expanded');
-    const primaryNav = document.createElement('nav');
-    primaryNav.className = 'kui-app-shell-nav';
-    primaryNav.setAttribute('aria-label', 'Primary');
-    const utilityNav = document.createElement('nav');
-    utilityNav.className = 'kui-app-shell-utility-nav';
-    utilityNav.setAttribute('aria-label', 'Utility');
-    sidebar.append(primaryNav, utilityNav);
-    const main = document.createElement('main');
-    main.className = 'kui-app-shell-main';
-    main.setAttribute('data-app-shell-region', 'content');
-    main.setAttribute('aria-label', `${brandLabel} content`);
-    const pageHeader = document.createElement('header');
-    pageHeader.className = 'kui-app-shell-page-header';
-    pageHeader.setAttribute('data-app-shell-region', 'page-header');
-    const pageHeading = document.createElement('div');
-    pageHeading.className = 'kui-app-shell-page-heading';
-    const pageKicker = document.createElement('p');
-    pageKicker.className = 'kui-app-shell-page-kicker';
-    const pageTitle = document.createElement('h1');
-    pageTitle.className = 'kui-app-shell-page-title';
-    pageHeading.append(pageKicker, pageTitle);
-    const pageDescription = document.createElement('p');
-    pageDescription.className = 'kui-app-shell-page-subtitle';
-    pageHeader.append(pageHeading, pageDescription);
-    const pageBody = document.createElement('section');
-    pageBody.className = 'kui-app-shell-page-body';
-    pageBody.setAttribute('data-mode', shell.contentMode ?? 'contained');
-    const pageToolbar = document.createElement('div');
-    pageToolbar.className = 'kui-app-shell-page-toolbar';
-    pageToolbar.setAttribute('role', 'toolbar');
-    const pageFrame = document.createElement('section');
-    pageFrame.className = 'kui-app-shell-page-frame';
-    pageFrame.append(pageHeader, pageToolbar, pageBody);
-    main.append(pageFrame);
-    const footer = document.createElement('footer');
-    footer.className = 'kui-app-shell-statusbar';
-    footer.setAttribute('data-app-shell-region', 'statusbar');
-    footer.setAttribute('aria-live', 'polite');
-    const status = document.createElement('span');
-    status.className = 'kui-app-shell-status';
-    status.setAttribute('data-app-shell-status', 'runtime');
-    const statusIcon = document.createElement('span');
-    statusIcon.className = 'kui-app-shell-status-icon';
-    const statusText = document.createElement('span');
-    statusText.className = 'kui-app-shell-status-text';
-    status.append(statusIcon, statusText);
-    const version = document.createElement('span');
-    version.className = 'kui-app-shell-status-version';
-    version.setAttribute('data-app-shell-version', 'true');
-    version.textContent =
-        resolveAppShellText(shell.statusbar?.version, appShellTranslate(scope)) ?? '';
-    footer.append(status, version);
-    root.append(topbar, sidebar, main, footer);
-    return {
-        root,
-        brand,
-        sidebar,
-        main,
-        primaryNav,
-        utilityNav,
-        pageFrame,
-        pageHeader,
-        pageToolbar,
-        statusbar: footer,
-        statusIcon,
-        statusText,
-        pageKicker,
-        pageTitle,
-        pageDescription,
-        version,
-    };
-}
-export function bindAppShellThemeControls(owner, frame, shell, scope, environment) {
-    if (shell.theme === undefined)
-        return;
-    const controller = createAppShellThemeController(frame, shell);
-    const themeButton = readActionButton(frame.root, 'theme');
-    const brandButton = readActionButton(frame.root, 'accent');
-    const brandCycle = createBrandCycle(shell);
-    const sync = (state) => {
-        syncAppShellThemeState(frame, themeButton, brandButton, shell, state, scope, environment);
-        frame.root.ownerDocument.dispatchEvent(new CustomEvent(THEME_STATE_CHANGE_EVENT, {
-            detail: {
-                shellId: shell.id,
-                theme: state.theme,
-                preference: controller.preference,
-                brand: state.brand,
-            },
-        }));
-    };
-    sync(controller.state);
-    owner.own(controller.subscribe(sync));
-    owner.own(() => controller.destroy());
-    if (themeButton !== null) {
-        const onClick = () => {
-            controller.toggleTheme();
-        };
-        themeButton.addEventListener('click', onClick);
-        owner.own(() => themeButton.removeEventListener('click', onClick));
-    }
-    if (brandButton !== null) {
-        const onClick = () => {
-            controller.setBrand(nextBrand(controller.brand, brandCycle));
-        };
-        brandButton.addEventListener('click', onClick);
-        owner.own(() => brandButton.removeEventListener('click', onClick));
-    }
-    const onPreferenceChange = (event) => {
-        if (!(event instanceof CustomEvent))
-            return;
-        const detail = event.detail;
-        if (detail?.shellId !== undefined && detail.shellId !== shell.id)
-            return;
-        if (detail?.theme !== undefined && isThemePreference(detail.theme)) {
-            controller.setPreference(detail.theme);
-        }
-        if (detail?.brand !== undefined && isBrandInput(detail.brand)) {
-            controller.setBrand(detail.brand);
-        }
-    };
-    frame.root.ownerDocument.addEventListener(THEME_PREFERENCE_CHANGE_EVENT, onPreferenceChange);
-    owner.own(() => frame.root.ownerDocument.removeEventListener(THEME_PREFERENCE_CHANGE_EVENT, onPreferenceChange));
-}
-export function bindAppShellAccountMenu(owner, frame, shell) {
-    const root = frame.root;
-    const account = shell.topbar?.account;
-    if (account === undefined || (account.menu?.length ?? 0) === 0)
-        return;
-    const accountRoot = root.querySelector('.kui-app-shell-account');
-    const button = root.querySelector('.kui-app-shell-account-button');
-    const menu = root.querySelector('.kui-app-shell-account-menu');
-    if (!(accountRoot instanceof HTMLElement) ||
-        !(button instanceof HTMLButtonElement) ||
-        !(menu instanceof HTMLElement)) {
-        return;
-    }
-    const sync = (expanded) => {
-        const state = expanded ? 'open' : 'closed';
-        accountRoot.setAttribute('data-state', state);
-        button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
-        button.setAttribute('data-state', state);
-        menu.setAttribute('data-state', state);
-        menu.hidden = !expanded;
-    };
-    const expanded = () => button.getAttribute('aria-expanded') === 'true';
-    const dispatchToggle = () => {
-        button.dispatchEvent(new CustomEvent('vobs:app-shell-account-toggle', {
-            bubbles: true,
-            detail: { shellId: shell.id, expanded: expanded() },
-        }));
-    };
-    const close = () => {
-        if (!expanded())
-            return;
-        sync(false);
-        dispatchToggle();
-    };
-    const toggle = () => {
-        sync(!expanded());
-        dispatchToggle();
-    };
-    const onButtonClick = () => {
-        toggle();
-        if (expanded())
-            focusAccountMenuItem(menu, 'first');
-    };
-    const onButtonKeyDown = (event) => {
-        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
-            return;
-        event.preventDefault();
-        if (!expanded()) {
-            sync(true);
-            dispatchToggle();
-        }
-        focusAccountMenuItem(menu, event.key === 'ArrowDown' ? 'first' : 'last');
-    };
-    const onDocumentPointerDown = (event) => {
-        if (!expanded())
-            return;
-        if (event.target instanceof Node && root.contains(event.target)) {
-            if (accountRoot?.contains(event.target))
-                return;
-        }
-        close();
-    };
-    const onDocumentKeyDown = (event) => {
-        if (event.key === 'Escape') {
-            close();
-            button.focus();
-        }
-    };
-    const onMenuKeyDown = (event) => {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            close();
-            button.focus();
-            return;
-        }
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-            event.preventDefault();
-            focusAccountMenuItem(menu, event.key === 'ArrowDown' ? 'next' : 'previous');
-            return;
-        }
-        if (event.key === 'Home' || event.key === 'End') {
-            event.preventDefault();
-            focusAccountMenuItem(menu, event.key === 'Home' ? 'first' : 'last');
-        }
-    };
-    const onMenuClick = (event) => {
-        const target = event.target instanceof Element ? event.target : undefined;
-        const item = target?.closest('[data-account-menu-id]');
-        if (!(item instanceof HTMLElement))
-            return;
-        const itemId = item.getAttribute('data-account-menu-id');
-        if (itemId === null || item.getAttribute('aria-disabled') === 'true') {
-            event.preventDefault();
-            return;
-        }
-        item.dispatchEvent(new CustomEvent('vobs:app-shell-account-select', {
-            bubbles: true,
-            detail: { shellId: shell.id, itemId },
-        }));
-        close();
-    };
-    sync(account.menuExpanded === true);
-    button.addEventListener('click', onButtonClick);
-    button.addEventListener('keydown', onButtonKeyDown);
-    menu.addEventListener('click', onMenuClick);
-    menu.addEventListener('keydown', onMenuKeyDown);
-    root.ownerDocument.addEventListener('pointerdown', onDocumentPointerDown);
-    root.ownerDocument.addEventListener('keydown', onDocumentKeyDown);
-    owner.own(() => {
-        button.removeEventListener('click', onButtonClick);
-        button.removeEventListener('keydown', onButtonKeyDown);
-        menu.removeEventListener('click', onMenuClick);
-        menu.removeEventListener('keydown', onMenuKeyDown);
-        root.ownerDocument.removeEventListener('pointerdown', onDocumentPointerDown);
-        root.ownerDocument.removeEventListener('keydown', onDocumentKeyDown);
-    });
-}
-export function bindAppShellActions(owner, frame, shell) {
-    for (const action of shell.topbar?.actions ?? []) {
-        const button = readActionButton(frame.root, action.id);
-        if (button === null)
-            continue;
-        const onClick = () => {
-            button.dispatchEvent(new CustomEvent('vobs:app-shell-action', {
-                bubbles: true,
-                detail: { shellId: shell.id, actionId: action.id },
-            }));
-        };
-        button.addEventListener('click', onClick);
-        owner.own(() => button.removeEventListener('click', onClick));
-    }
-}
-function focusAccountMenuItem(menu, placement) {
-    const items = Array.from(menu.querySelectorAll('.kui-app-shell-account-menu-item:not([aria-disabled="true"])'));
-    if (items.length === 0)
-        return;
-    const currentIndex = items.findIndex((item) => item === menu.ownerDocument.activeElement);
-    const nextIndex = placement === 'first'
-        ? 0
-        : placement === 'last'
-            ? items.length - 1
-            : placement === 'next'
-                ? (Math.max(0, currentIndex) + 1) % items.length
-                : currentIndex <= 0
-                    ? items.length - 1
-                    : currentIndex - 1;
-    items[nextIndex]?.focus();
-}
-export function syncAppShellFrame(frame, shell, state, status, scope, environment) {
-    setOptionalAttribute(frame.root, 'data-active-nav', state.activeId);
-    setOptionalAttribute(frame.root, 'data-route-pending', status.state === 'pending' ? 'true' : undefined);
-    setOptionalAttribute(frame.statusbar, 'data-state', status.state);
-    frame.pageHeader.hidden = !state.pageHeader.visible;
-    frame.pageHeader.setAttribute('data-state', state.pageHeader.visible ? 'visible' : 'hidden');
-    setOptionalAttribute(frame.pageHeader, 'aria-hidden', state.pageHeader.visible ? undefined : 'true');
-    frame.pageKicker.textContent = state.pageHeader.kicker;
-    frame.pageTitle.textContent = state.pageHeader.title;
-    frame.pageTitle.setAttribute('data-title', state.pageHeader.title);
-    frame.pageDescription.textContent = state.pageHeader.description;
-    frame.pageDescription.setAttribute('data-subtitle', state.pageHeader.description);
-    frame.statusText.textContent = status.text;
-    frame.statusbar.setAttribute('data-status', status.state);
-    frame.statusIcon.replaceChildren();
-    appendIcon(frame.statusIcon, status.icon, 'kui-app-shell-status-icon', scope, environment);
-    const brandLabel = resolveAppShellText(shell.brand.label, appShellTranslate(scope)) ?? '';
-    frame.brand.setAttribute('aria-label', brandLabel);
-    frame.brand.setAttribute('data-label', brandLabel);
-    const brandName = frame.brand.querySelector('.kui-app-shell-brand-name');
-    if (brandName !== null)
-        brandName.textContent = brandLabel;
-    frame.sidebar.setAttribute('aria-label', `${brandLabel} navigation`);
-    frame.main.setAttribute('aria-label', `${brandLabel} content`);
-    frame.version.textContent =
-        resolveAppShellText(shell.statusbar?.version, appShellTranslate(scope)) ?? '';
-    syncTopbarText(frame.root, shell, scope);
-    renderNavItems(frame.primaryNav, shell.navigation?.primary ?? [], state.activeId, scope, environment);
-    renderNavItems(frame.utilityNav, shell.navigation?.utility ?? [], state.activeId, scope, environment);
-}
-function createAppShellThemeController(frame, shell) {
-    const persistence = shell.theme?.persist === false
-        ? undefined
-        : createBrowserThemePersistence(frame.root.ownerDocument);
-    const systemPreference = createBrowserSystemThemePreference(frame.root.ownerDocument);
-    const options = {
-        target: frame.root.ownerDocument.documentElement,
-        initialBrand: shell.theme?.brand ?? shell.theme?.accent ?? 'green',
-        ...(shell.theme?.mode === undefined ? {} : { initialPreference: shell.theme.mode }),
-        ...(systemPreference === undefined ? {} : { systemPreference }),
-        ...(persistence === undefined ? {} : { persistence }),
-    };
-    return createThemeController(options);
-}
-function syncAppShellThemeState(frame, themeButton, brandButton, shell, state, scope, environment) {
-    frame.root.setAttribute('data-theme-mode', state.theme);
-    frame.root.setAttribute('data-accent', state.brand.id);
-    frame.root.setAttribute('data-brand', state.brand.id);
-    frame.statusbar.setAttribute('data-theme-mode', state.theme);
-    frame.statusbar.setAttribute('data-accent', state.brand.id);
-    if (themeButton !== null) {
-        themeButton.setAttribute('aria-pressed', state.theme === 'dark' ? 'true' : 'false');
-        themeButton.setAttribute('data-state', state.theme);
-        themeButton.setAttribute('data-theme-mode', state.theme);
-        themeButton.setAttribute('title', `Theme: ${state.theme}`);
-        replaceButtonIcon(themeButton, resolveThemeIcon(shell, state), scope, environment);
-    }
-    if (brandButton !== null) {
-        brandButton.setAttribute('aria-pressed', 'false');
-        brandButton.setAttribute('data-state', state.brand.id);
-        brandButton.setAttribute('data-brand', state.brand.id);
-        brandButton.setAttribute('data-color', state.brand.color);
-        brandButton.setAttribute('title', `Brand: ${state.brand.label}`);
-        brandButton.style.setProperty('--kui-app-shell-current-brand', state.brand.color);
-    }
-}
-function resolveThemeIcon(shell, state) {
-    return state.theme === 'dark' ? shell.theme?.icons?.dark : shell.theme?.icons?.light;
-}
-function replaceButtonIcon(button, iconName, scope, environment) {
-    if (iconName === undefined)
-        return;
-    for (const icon of Array.from(button.querySelectorAll(':scope > .kui-app-shell-icon'))) {
-        icon.remove();
-    }
-    appendIcon(button, iconName, 'kui-app-shell-icon', scope, environment);
-}
-function createBrandCycle(shell) {
-    const inputs = shell.theme?.brands ?? defaultBrandCycle;
-    return inputs.map((brand) => resolveBrandColor(brand));
-}
-function nextBrand(current, cycle) {
-    if (cycle.length === 0)
-        return current;
-    const currentIndex = cycle.findIndex((brand) => brand.id === current.id || brand.color === current.color);
-    return cycle[(currentIndex + 1) % cycle.length] ?? cycle[0] ?? current;
-}
-function readActionButton(root, actionId) {
-    const button = root.querySelector(`[data-action-id="${actionId}"]`);
-    return button instanceof HTMLButtonElement ? button : null;
-}
-function isThemePreference(value) {
-    return value === 'dark' || value === 'light' || value === 'system';
-}
-function isBrandInput(value) {
-    if (typeof value === 'string')
-        return true;
-    return (typeof value === 'object' &&
-        value !== null &&
-        'color' in value &&
-        typeof value.color === 'string');
-}
-function createBrowserThemePersistence(document) {
-    try {
-        const storage = document.defaultView?.localStorage;
-        if (storage === undefined)
-            return undefined;
-        return createStorageThemePersistence(storage);
-    }
-    catch {
-        return undefined;
-    }
-}
-function createBrowserSystemThemePreference(document) {
-    try {
-        const query = document.defaultView?.matchMedia?.('(prefers-color-scheme: light)');
-        return query === undefined ? undefined : createMediaThemePreference(query);
-    }
-    catch {
-        return undefined;
-    }
-}
-function createBrand(shell, scope, environment) {
-    const label = resolveAppShellText(shell.brand.label, appShellTranslate(scope)) ?? '';
-    const brand = document.createElement('a');
-    brand.className = 'kui-app-shell-brand';
-    setHref(brand, shell.brand.href ?? '#', environment);
-    brand.setAttribute('aria-label', label);
-    brand.setAttribute('data-label', label);
-    const mark = document.createElement('span');
-    mark.className = 'kui-app-shell-brand-mark';
-    mark.setAttribute('aria-hidden', 'true');
-    mark.textContent = shell.brand.mark ?? label.slice(0, 1);
-    const name = document.createElement('span');
-    name.className = 'kui-app-shell-brand-name';
-    name.textContent = label;
-    brand.append(mark, name);
-    return brand;
-}
-function createTopbarActions(shell, scope, environment) {
-    const actions = document.createElement('div');
-    actions.className = 'kui-app-shell-topbar-actions';
-    actions.setAttribute('role', 'toolbar');
-    actions.setAttribute('aria-label', 'Global actions');
-    for (const action of shell.topbar?.actions ?? []) {
-        actions.append(createTopbarAction(action, scope, environment));
-    }
-    if (shell.topbar?.language !== undefined) {
-        actions.append(createLanguageControl(shell, shell.topbar.language, scope, environment));
-    }
-    const account = shell.topbar?.account;
-    if (account !== undefined)
-        actions.append(createAccountControl(shell, account, scope, environment));
-    return actions;
-}
-function createTopbarAction(action, scope, environment) {
-    const label = resolveAppShellText(action.label, appShellTranslate(scope)) ?? '';
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'kui-app-shell-icon-button';
-    button.setAttribute('aria-label', label);
-    button.setAttribute('data-action-id', action.id);
-    setOptionalAttribute(button, 'data-app-shell-intent', action.intent);
-    button.setAttribute('data-state', action.disabled === true ? 'disabled' : action.pressed === true ? 'pressed' : 'idle');
-    button.setAttribute('data-has-badge', action.badge === undefined ? 'false' : 'true');
-    button.setAttribute('data-badge', action.badge === undefined ? '' : String(action.badge));
-    if (action.pressed !== undefined) {
-        button.setAttribute('aria-pressed', action.pressed ? 'true' : 'false');
-    }
-    if (action.disabled === true)
-        button.disabled = true;
-    appendIcon(button, action.icon, 'kui-app-shell-icon', scope, environment);
-    if (action.badge !== undefined) {
-        const badge = document.createElement('span');
-        badge.className = 'kui-app-shell-icon-button-badge';
-        badge.setAttribute('aria-hidden', 'true');
-        badge.textContent = String(action.badge);
-        button.append(badge);
-    }
-    return button;
-}
-function createLanguageControl(shell, config, scope, environment) {
-    const label = resolveAppShellText(config.label, appShellTranslate(scope)) ?? 'Language';
-    const menuId = `${shell.id}-language-menu`;
-    const root = document.createElement('div');
-    root.className = 'kui-app-shell-language';
-    root.setAttribute('data-state', 'closed');
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'kui-app-shell-icon-button';
-    button.setAttribute('aria-label', label);
-    button.setAttribute('title', label);
-    button.setAttribute('data-action-id', 'language');
-    button.setAttribute('data-app-shell-intent', 'open-language-menu');
-    button.setAttribute('data-state', 'idle');
-    button.setAttribute('aria-haspopup', 'menu');
-    button.setAttribute('aria-controls', menuId);
-    button.setAttribute('aria-expanded', 'false');
-    appendIcon(button, config.icon, 'kui-app-shell-icon', scope, environment);
-    const menu = document.createElement('div');
-    menu.id = menuId;
-    menu.className = 'kui-app-shell-language-menu';
-    menu.setAttribute('role', 'menu');
-    menu.setAttribute('aria-label', label);
-    menu.setAttribute('data-state', 'closed');
-    menu.hidden = true;
-    for (const option of config.options) {
-        const optionLabel = resolveAppShellText(option.label, appShellTranslate(scope)) ?? option.locale;
-        const item = document.createElement('button');
-        item.type = 'button';
-        item.className = 'kui-app-shell-language-option';
-        item.setAttribute('role', 'menuitemradio');
-        item.setAttribute('data-language-locale', option.locale);
-        item.setAttribute('data-label', optionLabel);
-        item.setAttribute('aria-checked', 'false');
-        item.setAttribute('data-state', 'idle');
-        item.textContent = optionLabel;
-        menu.append(item);
-    }
-    root.append(button, menu);
-    return root;
-}
-export function bindAppShellLanguageMenu(owner, frame, shell, scope, environment) {
-    const config = shell.topbar?.language;
-    if (config === undefined || config.options.length === 0)
-        return;
-    const languageRoot = frame.root.querySelector('.kui-app-shell-language');
-    const button = frame.root.querySelector('[data-action-id="language"]');
-    const menu = frame.root.querySelector('.kui-app-shell-language-menu');
-    if (!(languageRoot instanceof HTMLElement) ||
-        !(button instanceof HTMLButtonElement) ||
-        !(menu instanceof HTMLElement)) {
-        return;
-    }
-    const readLocale = () => scope.i18n?.locale.value ?? config.options[0]?.locale ?? '';
-    const expanded = () => button.getAttribute('aria-expanded') === 'true';
-    const sync = () => {
-        const locale = readLocale();
-        const activeOption = config.options.find((option) => option.locale === locale);
-        const label = resolveAppShellText(config.label, appShellTranslate(scope)) ?? 'Language';
-        const activeLabel = resolveAppShellText(activeOption?.label, appShellTranslate(scope)) ??
-            activeOption?.locale ??
-            locale;
-        const state = expanded() ? 'open' : 'closed';
-        languageRoot.setAttribute('data-state', state);
-        button.setAttribute('aria-label', label);
-        button.setAttribute('title', `${label}: ${activeLabel}`);
-        button.setAttribute('data-locale', locale);
-        button.setAttribute('aria-expanded', expanded() ? 'true' : 'false');
-        menu.setAttribute('aria-label', label);
-        menu.setAttribute('data-state', state);
-        menu.hidden = !expanded();
-        for (const option of config.options) {
-            const item = findElementByDataAttribute(menu, 'data-language-locale', option.locale);
-            if (!(item instanceof HTMLButtonElement))
-                continue;
-            const optionLabel = resolveAppShellText(option.label, appShellTranslate(scope)) ?? option.locale;
-            const selected = option.locale === locale;
-            item.textContent = optionLabel;
-            item.setAttribute('data-label', optionLabel);
-            item.setAttribute('aria-checked', selected ? 'true' : 'false');
-            item.setAttribute('data-state', selected ? 'selected' : 'idle');
-        }
-    };
-    const setExpanded = (nextExpanded) => {
-        languageRoot.setAttribute('data-state', nextExpanded ? 'open' : 'closed');
-        button.setAttribute('data-state', nextExpanded ? 'open' : 'idle');
-        button.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
-        menu.setAttribute('data-state', nextExpanded ? 'open' : 'closed');
-        menu.hidden = !nextExpanded;
-    };
-    const close = () => {
-        if (!expanded())
-            return;
-        setExpanded(false);
-        sync();
-    };
-    const focusOption = (placement) => {
-        const items = Array.from(menu.querySelectorAll('[data-language-locale]'));
-        if (items.length === 0)
-            return;
-        const currentIndex = items.findIndex((item) => item === menu.ownerDocument.activeElement);
-        const selectedIndex = items.findIndex((item) => item.getAttribute('aria-checked') === 'true');
-        const baseIndex = currentIndex < 0 ? selectedIndex : currentIndex;
-        const index = placement === 'first'
-            ? 0
-            : placement === 'last'
-                ? items.length - 1
-                : placement === 'next'
-                    ? (Math.max(0, baseIndex) + 1) % items.length
-                    : baseIndex <= 0
-                        ? items.length - 1
-                        : baseIndex - 1;
-        items[index]?.focus();
-    };
-    const onButtonClick = () => {
-        const nextExpanded = !expanded();
-        setExpanded(nextExpanded);
-        sync();
-        if (nextExpanded)
-            focusOption('first');
-    };
-    const onButtonKeyDown = (event) => {
-        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
-            return;
-        event.preventDefault();
-        if (!expanded()) {
-            setExpanded(true);
-            sync();
-        }
-        focusOption(event.key === 'ArrowDown' ? 'first' : 'last');
-    };
-    const onMenuKeyDown = (event) => {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            close();
-            button.focus();
-            return;
-        }
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-            event.preventDefault();
-            focusOption(event.key === 'ArrowDown' ? 'next' : 'previous');
-            return;
-        }
-        if (event.key === 'Home' || event.key === 'End') {
-            event.preventDefault();
-            focusOption(event.key === 'Home' ? 'first' : 'last');
-        }
-    };
-    const onMenuClick = (event) => {
-        const target = event.target instanceof Element ? event.target : undefined;
-        const item = target?.closest('[data-language-locale]');
-        if (!(item instanceof HTMLButtonElement))
-            return;
-        const locale = item.getAttribute('data-language-locale');
-        if (locale === null || !config.options.some((option) => option.locale === locale))
-            return;
-        scope.i18n?.setLocale(locale);
-        item.dispatchEvent(new CustomEvent('vobs:app-shell-language-select', {
-            bubbles: true,
-            detail: { shellId: shell.id, locale },
-        }));
-        close();
-        button.focus();
-    };
-    const onDocumentPointerDown = (event) => {
-        if (!expanded())
-            return;
-        if (event.target instanceof Node && languageRoot.contains(event.target))
-            return;
-        close();
-    };
-    const onDocumentKeyDown = (event) => {
-        if (event.key !== 'Escape')
-            return;
-        close();
-        button.focus();
-    };
-    owner.run(() => {
-        const stop = effect(() => {
-            void scope.i18n?.locale.value;
-            void scope.translation?.locale?.value;
-            sync();
-        }, { scheduler: environment.scheduler });
-        owner.own(stop);
-    });
-    button.addEventListener('click', onButtonClick);
-    button.addEventListener('keydown', onButtonKeyDown);
-    menu.addEventListener('click', onMenuClick);
-    menu.addEventListener('keydown', onMenuKeyDown);
-    frame.root.ownerDocument.addEventListener('pointerdown', onDocumentPointerDown);
-    frame.root.ownerDocument.addEventListener('keydown', onDocumentKeyDown);
-    owner.own(() => {
-        button.removeEventListener('click', onButtonClick);
-        button.removeEventListener('keydown', onButtonKeyDown);
-        menu.removeEventListener('click', onMenuClick);
-        menu.removeEventListener('keydown', onMenuKeyDown);
-        frame.root.ownerDocument.removeEventListener('pointerdown', onDocumentPointerDown);
-        frame.root.ownerDocument.removeEventListener('keydown', onDocumentKeyDown);
-    });
-}
-function syncTopbarText(root, shell, scope) {
-    const translate = appShellTranslate(scope);
-    for (const action of shell.topbar?.actions ?? []) {
-        const button = findElementByDataAttribute(root, 'data-action-id', action.id);
-        if (!(button instanceof HTMLButtonElement))
-            continue;
-        const label = resolveAppShellText(action.label, translate) ?? '';
-        button.setAttribute('aria-label', label);
-        button.setAttribute('title', label);
-    }
-    const account = shell.topbar?.account;
-    if (account !== undefined) {
-        const label = resolveAppShellText(account.label, translate) ?? '';
-        const button = root.querySelector('.kui-app-shell-account-button');
-        if (button instanceof HTMLButtonElement) {
-            button.setAttribute('aria-label', label);
-            const userName = button.querySelector('.kui-app-shell-user-name');
-            if (userName !== null)
-                userName.textContent = label;
-        }
-        const menu = root.querySelector('.kui-app-shell-account-menu');
-        if (menu instanceof HTMLElement) {
-            menu.setAttribute('aria-label', `${label} account menu`);
-            const menuLabel = menu.querySelector('.kui-app-shell-account-menu-label');
-            if (menuLabel !== null)
-                menuLabel.textContent = label;
-        }
-        for (const item of account.menu ?? []) {
-            if (item.kind === 'separator')
-                continue;
-            const element = findElementByDataAttribute(root, 'data-account-menu-id', item.id);
-            if (!(element instanceof HTMLElement))
-                continue;
-            const itemLabel = resolveAppShellText(item.label, translate) ?? item.id;
-            element.setAttribute('data-label', itemLabel);
-            const itemLabelElement = element.querySelector('.kui-app-shell-account-menu-item-label');
-            if (itemLabelElement !== null)
-                itemLabelElement.textContent = itemLabel;
-        }
-    }
-}
-function findElementByDataAttribute(root, attribute, value) {
-    return Array.from(root.querySelectorAll(`[${attribute}]`)).find((element) => element.getAttribute(attribute) === value);
-}
-function createAccountControl(shell, account, scope, environment) {
-    const root = document.createElement('div');
-    root.className = 'kui-app-shell-account';
-    root.setAttribute('data-state', account.menuExpanded === true ? 'open' : 'closed');
-    root.append(createAccountButton(shell, account, scope, environment));
-    if ((account.menu?.length ?? 0) > 0) {
-        root.append(createAccountMenu(shell, account, scope, environment));
-    }
-    return root;
-}
-function createAccountButton(shell, account, scope, environment) {
-    const label = resolveAppShellText(account.label, appShellTranslate(scope)) ?? '';
-    const button = document.createElement('button');
-    const menuId = `${shell.id}-account-menu`;
-    button.type = 'button';
-    button.className = 'kui-app-shell-account-button';
-    button.setAttribute('aria-label', label);
-    button.setAttribute('data-action-id', 'account');
-    button.setAttribute('data-app-shell-intent', 'open-account-menu');
-    button.setAttribute('data-state', account.menuExpanded === true ? 'open' : 'closed');
-    if ((account.menu?.length ?? 0) > 0) {
-        button.setAttribute('aria-haspopup', 'menu');
-        button.setAttribute('aria-controls', menuId);
-        button.setAttribute('aria-expanded', account.menuExpanded === true ? 'true' : 'false');
-    }
-    const avatar = document.createElement('span');
-    avatar.className = 'kui-app-shell-avatar';
-    avatar.setAttribute('aria-hidden', 'true');
-    appendIcon(avatar, account.icon, 'kui-app-shell-icon', scope, environment);
-    if (avatar.childNodes.length === 0)
-        avatar.textContent = account.initials ?? label.slice(0, 2);
-    const name = document.createElement('span');
-    name.className = 'kui-app-shell-user-name';
-    name.textContent = label;
-    button.append(avatar, name);
-    return button;
-}
-function createAccountMenu(shell, account, scope, environment) {
-    const accountLabel = resolveAppShellText(account.label, appShellTranslate(scope)) ?? '';
-    const menu = document.createElement('div');
-    menu.id = `${shell.id}-account-menu`;
-    menu.className = 'kui-app-shell-account-menu';
-    menu.setAttribute('role', 'menu');
-    menu.setAttribute('aria-label', `${accountLabel} account menu`);
-    menu.setAttribute('data-state', account.menuExpanded === true ? 'open' : 'closed');
-    menu.hidden = account.menuExpanded !== true;
-    const header = document.createElement('div');
-    header.className = 'kui-app-shell-account-menu-header';
-    header.setAttribute('aria-hidden', 'true');
-    const avatar = document.createElement('span');
-    avatar.className = 'kui-app-shell-avatar';
-    appendIcon(avatar, account.icon, 'kui-app-shell-icon', scope, environment);
-    if (avatar.childNodes.length === 0)
-        avatar.textContent = account.initials ?? accountLabel.slice(0, 2);
-    const label = document.createElement('span');
-    label.className = 'kui-app-shell-account-menu-label';
-    label.textContent = accountLabel;
-    header.append(avatar, label);
-    menu.append(header);
-    for (const item of account.menu ?? []) {
-        menu.append(createAccountMenuItem(item, scope, environment));
-    }
-    return menu;
-}
-function createAccountMenuItem(item, scope, environment) {
-    if (item.kind === 'separator') {
-        const separator = document.createElement('div');
-        separator.className = 'kui-app-shell-account-menu-separator';
-        separator.setAttribute('role', 'separator');
-        separator.setAttribute('data-account-menu-id', item.id);
-        return separator;
-    }
-    const itemLabel = resolveAppShellText(item.label, appShellTranslate(scope)) ?? item.id;
-    const href = item.disabled === true ? undefined : (item.href ?? item.route);
-    const element = href === undefined ? document.createElement('button') : document.createElement('a');
-    element.className = joinClasses('kui-app-shell-account-menu-item', item.tone === 'danger' ? 'kui-app-shell-account-menu-item--danger' : undefined);
-    if (href === undefined && element instanceof HTMLButtonElement) {
-        element.type = 'button';
-    }
-    else if (href !== undefined && element instanceof HTMLAnchorElement) {
-        setHref(element, href, environment);
-    }
-    element.setAttribute('role', 'menuitem');
-    element.setAttribute('data-account-menu-id', item.id);
-    element.setAttribute('data-label', itemLabel);
-    element.setAttribute('data-tone', item.tone ?? 'default');
-    if (item.disabled === true) {
-        element.setAttribute('aria-disabled', 'true');
-        element.setAttribute('tabindex', '-1');
-    }
-    appendIcon(element, item.icon, 'kui-app-shell-icon', scope, environment);
-    const label = document.createElement('span');
-    label.className = 'kui-app-shell-account-menu-item-label';
-    label.textContent = itemLabel;
-    element.append(label);
-    return element;
-}
-function renderNavItems(nav, items, activeId, scope, environment) {
-    nav.replaceChildren(...items.map((item) => createNavItemElement(item, activeId, scope, environment)));
-}
-function createNavItemElement(item, activeId, scope, environment) {
-    const active = item.id === activeId || item.active === true;
-    const disabled = item.disabled === true;
-    const label = resolveAppShellText(item.label, appShellTranslate(scope)) ?? '';
-    const anchor = document.createElement('a');
-    anchor.className = 'kui-app-shell-nav-item';
-    if (!disabled)
-        setHref(anchor, routeItemPath(item) ?? '#', environment);
-    anchor.setAttribute('aria-label', label);
-    anchor.setAttribute('data-nav-id', item.id);
-    anchor.setAttribute('data-label', label);
-    anchor.setAttribute('data-tooltip', label);
-    anchor.setAttribute('data-state', disabled ? 'disabled' : active ? 'active' : (item.state ?? 'ready'));
-    anchor.setAttribute('data-tone', item.tone ?? 'default');
-    setOptionalAttribute(anchor, 'data-route-target', routeItemPath(item));
-    if (active)
-        anchor.setAttribute('aria-current', 'page');
-    if (disabled) {
-        anchor.setAttribute('aria-disabled', 'true');
-        anchor.setAttribute('tabindex', '-1');
-    }
-    const icon = document.createElement('span');
-    icon.className = 'kui-app-shell-nav-item-icon';
-    appendIcon(icon, item.icon, 'kui-app-shell-icon', scope, environment);
-    const labelElement = document.createElement('span');
-    labelElement.className = 'kui-app-shell-nav-item-label';
-    labelElement.textContent = label;
-    anchor.append(icon, labelElement);
-    if (item.badge !== undefined) {
-        const badge = document.createElement('span');
-        badge.className = 'kui-app-shell-nav-badge';
-        badge.setAttribute('aria-hidden', 'true');
-        badge.textContent = String(item.badge);
-        anchor.append(badge);
-    }
-    return anchor;
-}
-function appendIcon(parent, iconName, className, scope, _environment) {
-    if (iconName === undefined)
-        return;
-    const icon = resolveUiIcon(scope.icons, iconName);
-    if (icon === undefined)
-        return;
-    const svg = createIconElement(document, icon, { decorative: true, size: 20 });
-    svg.classList.add(className);
-    svg.setAttribute('data-icon-name', icon.name);
-    parent.append(svg);
-}
-function routeItemPath(item) {
-    const path = item.route ?? item.href;
-    return path === undefined ? undefined : normalizeRoutePath(path);
-}
-function normalizeRoutePath(path) {
-    const [withoutHash] = path.split('#', 1);
-    const [withoutQuery] = (withoutHash ?? path).split('?', 1);
-    const normalized = withoutQuery === '' ? '/' : (withoutQuery ?? '/');
-    return normalized.length > 1 ? normalized.replace(/\/+$/u, '') : normalized;
-}
-function setHref(anchor, href, environment) {
-    const resolved = environment.security.urlPolicy.resolve(href, {
-        element: 'a',
-        attribute: 'href',
-    });
-    if (resolved !== null)
-        anchor.setAttribute('href', resolved);
-}
-function setOptionalAttribute(element, name, value) {
-    if (typeof value === 'string' || typeof value === 'number') {
-        element.setAttribute(name, String(value));
-    }
-    else {
-        element.removeAttribute(name);
-    }
-}
-function joinClasses(...classes) {
-    return classes
-        .filter((className) => className !== undefined && className.length > 0)
-        .join(' ');
-}