@vobs/ui 0.2.0 → 1.0.0

package/dist/app-shell-dom.js

@@ -1,573 +0,0 @@
-/** @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(' ');
-}