@vobs/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vobsjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,24 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+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 primaryNav: HTMLElement;
+    readonly utilityNav: HTMLElement;
+    readonly pageFrame: HTMLElement;
+    readonly pageToolbar: HTMLElement;
+    readonly statusbar: HTMLElement;
+    readonly statusIcon: HTMLElement;
+    readonly statusText: HTMLSpanElement;
+    readonly pageKicker: HTMLParagraphElement;
+    readonly pageTitle: HTMLHeadingElement;
+    readonly pageDescription: HTMLParagraphElement;
+    readonly version: HTMLSpanElement;
+}
+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 syncAppShellFrame(frame: AppShellFrame, shell: AppShellDefinition, state: ResolvedAppShellState, status: ResolvedAppShellStatus, scope: AppShellComponentScope, environment: TemplateEnvironment): void;

package/dist/app-shell-dom.js

@@ -0,0 +1,573 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { createIconElement } from '@vobs/icons';
+import {} from '@vobs/runtime-dom';
+import { resolveUiIcon } from './icons.js';
+import { brandPresets, createStorageThemePersistence, createThemeController, resolveBrandColor, } from './theme.js';
+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 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));
+    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`);
+    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', `${shell.brand.label} 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 = shell.statusbar?.version ?? '';
+    footer.append(status, version);
+    root.append(topbar, sidebar, main, footer);
+    return {
+        root,
+        primaryNav,
+        utilityNav,
+        pageFrame,
+        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);
+    };
+    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));
+    }
+}
+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);
+    });
+}
+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.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.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 ?? '';
+    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 options = {
+        target: frame.root.ownerDocument.documentElement,
+        initialBrand: shell.theme?.brand ?? shell.theme?.accent ?? 'green',
+        ...(shell.theme?.mode === undefined ? {} : { initialTheme: shell.theme.mode }),
+        ...(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 createBrowserThemePersistence(document) {
+    try {
+        const storage = document.defaultView?.localStorage;
+        if (storage === undefined)
+            return undefined;
+        return createStorageThemePersistence(storage);
+    }
+    catch {
+        return undefined;
+    }
+}
+function createBrand(shell, environment) {
+    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);
+    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);
+    const name = document.createElement('span');
+    name.className = 'kui-app-shell-brand-name';
+    name.textContent = shell.brand.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));
+    }
+    const account = shell.topbar?.account;
+    if (account !== undefined)
+        actions.append(createAccountControl(shell, account, scope, environment));
+    return actions;
+}
+function createTopbarAction(action, scope, environment) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'kui-app-shell-icon-button';
+    button.setAttribute('aria-label', action.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 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 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('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 ?? account.label.slice(0, 2);
+    const name = document.createElement('span');
+    name.className = 'kui-app-shell-user-name';
+    name.textContent = account.label;
+    button.append(avatar, name);
+    return button;
+}
+function createAccountMenu(shell, account, scope, environment) {
+    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('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 ?? account.label.slice(0, 2);
+    const label = document.createElement('span');
+    label.className = 'kui-app-shell-account-menu-label';
+    label.textContent = account.label;
+    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 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', item.label ?? item.id);
+    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 = item.label ?? item.id;
+    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 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('data-nav-id', item.id);
+    anchor.setAttribute('data-label', item.label);
+    anchor.setAttribute('data-tooltip', item.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 label = document.createElement('span');
+    label.className = 'kui-app-shell-nav-item-label';
+    label.textContent = item.label;
+    anchor.append(icon, label);
+    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(' ');
+}