@vobs/ui 0.1.0 → 0.3.0

package/dist/app-shell-dom.d.ts

@@ -6,9 +6,13 @@ import { type Owner, type TemplateEnvironment } from '@vobs/runtime-dom';
 import type { AppShellDefinition, AppShellComponentScope, ResolvedAppShellState, ResolvedAppShellStatus } from './app-shell.js';
 export interface AppShellFrame {
     readonly root: HTMLDivElement;
+    readonly brand: HTMLAnchorElement;
+    readonly sidebar: HTMLElement;
+    readonly main: HTMLElement;
     readonly primaryNav: HTMLElement;
     readonly utilityNav: HTMLElement;
     readonly pageFrame: HTMLElement;
+    readonly pageHeader: HTMLElement;
     readonly pageToolbar: HTMLElement;
     readonly statusbar: HTMLElement;
     readonly statusIcon: HTMLElement;
@@ -21,4 +25,6 @@ export interface AppShellFrame {
 export declare function createAppShellFrame(shell: AppShellDefinition, scope: AppShellComponentScope, environment: TemplateEnvironment): AppShellFrame;
 export declare function bindAppShellThemeControls(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition, scope: AppShellComponentScope, environment: TemplateEnvironment): void;
 export declare function bindAppShellAccountMenu(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition): void;
+export declare function bindAppShellActions(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition): void;
 export declare function syncAppShellFrame(frame: AppShellFrame, shell: AppShellDefinition, state: ResolvedAppShellState, status: ResolvedAppShellStatus, scope: AppShellComponentScope, environment: TemplateEnvironment): void;
+export declare function bindAppShellLanguageMenu(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition, scope: AppShellComponentScope, environment: TemplateEnvironment): void;

package/dist/app-shell-dom.js

@@ -3,9 +3,15 @@
  * @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, createThemeController, resolveBrandColor, } from './theme.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');
@@ -17,14 +23,16 @@ export function createAppShellFrame(shell, scope, environment) {
     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(createBrand(shell, environment), createTopbarActions(shell, scope, environment));
+    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');
-    sidebar.setAttribute('aria-label', `${shell.brand.label} navigation`);
+    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';
@@ -36,7 +44,7 @@ export function createAppShellFrame(shell, scope, environment) {
     const main = document.createElement('main');
     main.className = 'kui-app-shell-main';
     main.setAttribute('data-app-shell-region', 'content');
-    main.setAttribute('aria-label', `${shell.brand.label} 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');
@@ -75,14 +83,19 @@ export function createAppShellFrame(shell, scope, environment) {
     const version = document.createElement('span');
     version.className = 'kui-app-shell-status-version';
     version.setAttribute('data-app-shell-version', 'true');
-    version.textContent = shell.statusbar?.version ?? '';
+    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,
@@ -102,6 +115,14 @@ export function bindAppShellThemeControls(owner, frame, shell, scope, environmen
     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));
@@ -120,6 +141,21 @@ export function bindAppShellThemeControls(owner, frame, shell, scope, environmen
         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;
@@ -239,6 +275,21 @@ export function bindAppShellAccountMenu(owner, frame, shell) {
         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)
@@ -259,16 +310,29 @@ export function syncAppShellFrame(frame, shell, state, status, scope, environmen
     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.pageKicker.textContent = shell.pageHeader?.kicker ?? shell.title ?? shell.brand.label;
-    frame.pageTitle.textContent = state.title;
-    frame.pageTitle.setAttribute('data-title', state.title);
-    frame.pageDescription.textContent = state.description;
-    frame.pageDescription.setAttribute('data-subtitle', state.description);
+    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);
-    frame.version.textContent = shell.statusbar?.version ?? '';
+    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);
 }
@@ -276,10 +340,12 @@ 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 ? {} : { initialTheme: shell.theme.mode }),
+        ...(shell.theme?.mode === undefined ? {} : { initialPreference: shell.theme.mode }),
+        ...(systemPreference === undefined ? {} : { systemPreference }),
         ...(persistence === undefined ? {} : { persistence }),
     };
     return createThemeController(options);
@@ -331,6 +397,17 @@ 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;
@@ -342,19 +419,29 @@ function createBrowserThemePersistence(document) {
         return undefined;
     }
 }
-function createBrand(shell, environment) {
+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', shell.brand.label);
-    brand.setAttribute('data-label', shell.brand.label);
+    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 ?? shell.brand.label.slice(0, 1);
+    mark.textContent = shell.brand.mark ?? label.slice(0, 1);
     const name = document.createElement('span');
     name.className = 'kui-app-shell-brand-name';
-    name.textContent = shell.brand.label;
+    name.textContent = label;
     brand.append(mark, name);
     return brand;
 }
@@ -366,16 +453,20 @@ function createTopbarActions(shell, scope, environment) {
     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', action.label);
+    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');
@@ -396,6 +487,251 @@ function createTopbarAction(action, scope, environment) {
     }
     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';
@@ -407,11 +743,12 @@ function createAccountControl(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', account.label);
+    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');
@@ -425,19 +762,20 @@ function createAccountButton(shell, account, scope, environment) {
     avatar.setAttribute('aria-hidden', 'true');
     appendIcon(avatar, account.icon, 'kui-app-shell-icon', scope, environment);
     if (avatar.childNodes.length === 0)
-        avatar.textContent = account.initials ?? account.label.slice(0, 2);
+        avatar.textContent = account.initials ?? label.slice(0, 2);
     const name = document.createElement('span');
     name.className = 'kui-app-shell-user-name';
-    name.textContent = account.label;
+    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', `${account.label} account 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');
@@ -447,10 +785,10 @@ function createAccountMenu(shell, account, scope, environment) {
     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 ?? account.label.slice(0, 2);
+        avatar.textContent = account.initials ?? accountLabel.slice(0, 2);
     const label = document.createElement('span');
     label.className = 'kui-app-shell-account-menu-label';
-    label.textContent = account.label;
+    label.textContent = accountLabel;
     header.append(avatar, label);
     menu.append(header);
     for (const item of account.menu ?? []) {
@@ -466,6 +804,7 @@ function createAccountMenuItem(item, scope, environment) {
         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);
@@ -477,7 +816,7 @@ function createAccountMenuItem(item, scope, environment) {
     }
     element.setAttribute('role', 'menuitem');
     element.setAttribute('data-account-menu-id', item.id);
-    element.setAttribute('data-label', item.label ?? item.id);
+    element.setAttribute('data-label', itemLabel);
     element.setAttribute('data-tone', item.tone ?? 'default');
     if (item.disabled === true) {
         element.setAttribute('aria-disabled', 'true');
@@ -486,7 +825,7 @@ function createAccountMenuItem(item, scope, environment) {
     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 = item.label ?? item.id;
+    label.textContent = itemLabel;
     element.append(label);
     return element;
 }
@@ -496,14 +835,15 @@ function renderNavItems(nav, items, 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', item.label);
+    anchor.setAttribute('aria-label', label);
     anchor.setAttribute('data-nav-id', item.id);
-    anchor.setAttribute('data-label', item.label);
-    anchor.setAttribute('data-tooltip', item.label);
+    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));
@@ -516,10 +856,10 @@ function createNavItemElement(item, activeId, scope, environment) {
     const icon = document.createElement('span');
     icon.className = 'kui-app-shell-nav-item-icon';
     appendIcon(icon, item.icon, 'kui-app-shell-icon', scope, environment);
-    const label = document.createElement('span');
-    label.className = 'kui-app-shell-nav-item-label';
-    label.textContent = item.label;
-    anchor.append(icon, label);
+    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';