@vobs/ui 0.1.0 → 0.3.0

package/dist/data-display.js

@@ -1268,32 +1268,59 @@ export function createPaginationPlans(options) {
         ...(options.siblingCount === undefined ? {} : { siblingCount: options.siblingCount }),
         ...(options.boundaryCount === undefined ? {} : { boundaryCount: options.boundaryCount }),
     });
+    const root = createUiDomPlan('nav', 'pagination', {
+        ...(options.className === undefined ? {} : { className: options.className }),
+        attrs: {
+            id: options.id,
+            'aria-label': options.label ?? 'Pagination',
+            ...options.attrs,
+            'data-page': page,
+            'data-page-count': pageCount,
+            'data-total-items': normalizeCount(options.totalItems),
+        },
+    });
+    const list = createUiDomPlan('ol', 'pagination-list', { attrs: { role: 'list' } });
+    const previous = createPaginationControl('previous', page <= 1 ? 1 : page - 1, page <= 1, options.previousLabel ?? 'Previous page');
+    const pages = items.map((item, index) => createPaginationItemPlan(item, index, options.pageLabel));
+    const next = createPaginationControl('next', page >= pageCount ? pageCount : page + 1, page >= pageCount, options.nextLabel ?? 'Next page');
+    const summary = options.summary ??
+        formatPaginationSummary({
+            ...options,
+            page,
+            pageCount,
+        });
+    const summaryPlan = createUiDomPlan('output', 'pagination-summary', {
+        attrs: {
+            'aria-live': 'polite',
+            'data-summary': summary,
+        },
+    });
     return {
-        root: createUiDomPlan('nav', 'pagination', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: options.id,
-                'aria-label': options.label ?? 'Pagination',
-                ...options.attrs,
-                'data-page': page,
-                'data-page-count': pageCount,
-                'data-total-items': normalizeCount(options.totalItems),
-            },
-        }),
-        list: createUiDomPlan('ol', 'pagination-list', { attrs: { role: 'list' } }),
-        previous: createPaginationControl('previous', page <= 1 ? 1 : page - 1, page <= 1, options.previousLabel ?? 'Previous page'),
-        pages: items.map((item, index) => createPaginationItemPlan(item, index)),
-        next: createPaginationControl('next', page >= pageCount ? pageCount : page + 1, page >= pageCount, options.nextLabel ?? 'Next page'),
-        summary: createUiDomPlan('output', 'pagination-summary', {
-            attrs: {
-                'aria-live': 'polite',
-                'data-summary': formatPaginationSummary({
-                    ...options,
-                    page,
-                    pageCount,
-                }),
-            },
-        }),
+        root,
+        list,
+        previous,
+        pages,
+        next,
+        summary: summaryPlan,
+        model: {
+            rootId: typeof root.attrs.id === 'string' ? root.attrs.id : '',
+            rootClassName: root.className,
+            page,
+            pageCount,
+            totalItems: normalizeCount(options.totalItems) ?? 0,
+            previousClassName: previous.className,
+            previousLabel: typeof previous.attrs['aria-label'] === 'string' ? previous.attrs['aria-label'] : '',
+            previousPage: typeof previous.attrs['data-page'] === 'number' ? previous.attrs['data-page'] : 1,
+            previousDisabled: previous.attrs.disabled === true || previous.attrs.disabled === '',
+            listClassName: list.className,
+            pages: items.map((item, index) => createPaginationItemModel(item, index, pages[index], options.pageLabel)),
+            nextClassName: next.className,
+            nextLabel: typeof next.attrs['aria-label'] === 'string' ? next.attrs['aria-label'] : '',
+            nextPage: typeof next.attrs['data-page'] === 'number' ? next.attrs['data-page'] : pageCount,
+            nextDisabled: next.attrs.disabled === true || next.attrs.disabled === '',
+            summaryClassName: summaryPlan.className,
+            summary,
+        },
     };
 }
 export function createPaginationItems(options) {
@@ -1837,7 +1864,7 @@ function createPaginationControl(control, page, disabled, label) {
         },
     });
 }
-function createPaginationItemPlan(item, index) {
+function createPaginationItemPlan(item, index, pageLabel) {
     if (item.kind === 'ellipsis') {
         return createUiDomPlan('span', 'pagination-ellipsis', {
             attrs: {
@@ -1852,13 +1879,26 @@ function createPaginationItemPlan(item, index) {
         state: item.current === true ? 'current' : 'idle',
         attrs: {
             type: 'button',
-            'aria-label': `Page ${page}`,
+            'aria-label': pageLabel?.(page) ?? `Page ${page}`,
             'aria-current': item.current === true ? 'page' : undefined,
             'data-kind': 'page',
             'data-page': page,
         },
     });
 }
+function createPaginationItemModel(item, index, plan, pageLabel) {
+    const page = item.page ?? 1;
+    const isPage = item.kind === 'page';
+    return {
+        id: String(index),
+        className: plan?.className ?? '',
+        kind: item.kind,
+        page,
+        state: item.kind === 'ellipsis' ? 'ellipsis' : item.current === true ? 'current' : 'idle',
+        current: item.current === true ? 'page' : undefined,
+        label: isPage ? (pageLabel?.(page) ?? `Page ${page}`) : '',
+    };
+}
 function createNoteLikePlans(kind, options) {
     const tone = options.tone ?? 'info';
     return {
@@ -2045,9 +2085,11 @@ function normalizeColumnPreferenceIds(ids, knownIds) {
     if (ids === undefined)
         return [];
     const result = [];
+    const seen = new Set();
     for (const id of ids) {
-        if (!knownIds.has(id) || result.includes(id))
+        if (!knownIds.has(id) || seen.has(id))
             continue;
+        seen.add(id);
         result.push(id);
     }
     return result;
@@ -2056,10 +2098,11 @@ function orderTableColumns(columns, orderIds) {
     if (orderIds.length === 0)
         return [...columns];
     const columnById = new Map(columns.map((column) => [column.id, column]));
+    const orderedIdSet = new Set(orderIds);
     const ordered = orderIds
         .map((id) => columnById.get(id))
         .filter((column) => column !== undefined);
-    const remaining = columns.filter((column) => !orderIds.includes(column.id));
+    const remaining = columns.filter((column) => !orderedIdSet.has(column.id));
     return [...ordered, ...remaining];
 }
 function tableColumnPreferenceSticky(column, stickyStartIds, stickyEndIds) {

package/dist/dialog.d.ts

@@ -0,0 +1,26 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { type ComponentProps, type ComponentSlotContract } from '@vobs/runtime-dom';
+import { type OverlayCloseReason } from './overlay.js';
+export type DialogSize = 'lg' | 'md' | 'sm';
+export interface DialogProps {
+    readonly open: boolean;
+    readonly id: string;
+    readonly size?: DialogSize;
+    readonly modal?: boolean;
+    readonly 'title-id'?: string;
+    readonly 'description-id'?: string;
+    readonly 'surface-class'?: string;
+    readonly [key: string]: unknown;
+}
+export interface DialogEvents extends Record<string, (...args: never[]) => unknown> {
+    readonly close: (reason: OverlayCloseReason) => void;
+}
+export interface DialogScope {
+    readonly props: ComponentProps<DialogProps>;
+    readonly emit: <Name extends keyof DialogEvents & string>(name: Name, ...args: Parameters<DialogEvents[Name]>) => void;
+}
+export type DialogSlots = Readonly<ComponentSlotContract>;
+export declare const Dialog: import("@vobs/runtime-core").ComponentDefinition<DialogProps, DialogEvents, DialogScope, Readonly<Readonly<Record<string, Readonly<Record<string, unknown>>>>>>;

package/dist/dialog.js

@@ -0,0 +1,94 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { effect } from '@vobs/reactivity';
+import { COMPONENT_SLOTS, createCompiledTemplate, defineComponent, } from '@vobs/runtime-dom';
+import { createOverlayStack } from './overlay.js';
+export const Dialog = defineComponent({
+    template: createCompiledTemplate({
+        templateId: 'k-dialog',
+        sourceId: '@vobs/ui/dialog',
+        rootTag: 'div',
+        mount(owner, scope, environment) {
+            return mountDialog(owner, scope, environment);
+        },
+    }),
+    props: ['open', 'id', 'size', 'modal', 'title-id', 'description-id', 'surface-class'],
+    emits: ['close'],
+    [COMPONENT_SLOTS]: { default: {} },
+    setup(context) {
+        return {
+            props: context.props,
+            emit: (name, ...args) => context.emit(name, ...args),
+        };
+    },
+});
+function mountDialog(owner, scope, environment) {
+    const root = document.createElement('div');
+    root.className = 'kui-overlay-root';
+    root.setAttribute('data-backdrop', 'true');
+    root.setAttribute('role', 'presentation');
+    const surface = document.createElement('section');
+    surface.className = 'kui-dialog';
+    surface.setAttribute('role', 'dialog');
+    surface.setAttribute('aria-modal', 'true');
+    root.append(surface);
+    environment.slots?.default?.(owner, surface);
+    const stack = createOverlayStack({ document });
+    let handle;
+    let wasOpen = false;
+    const stop = effect(() => {
+        const props = scope.props;
+        const open = props.open.value === true;
+        const id = readString(props.id.value, 'dialog');
+        const size = readSize(props.size?.value);
+        const modal = props.modal?.value !== false;
+        root.hidden = !open;
+        root.setAttribute('data-state', open ? 'open' : 'closed');
+        surface.id = id;
+        surface.setAttribute('data-size', size);
+        surface.setAttribute('aria-modal', String(modal));
+        setOptionalAttribute(surface, 'aria-labelledby', props['title-id']?.value);
+        setOptionalAttribute(surface, 'aria-describedby', props['description-id']?.value);
+        const surfaceClass = readString(props['surface-class']?.value, '');
+        surface.className = `kui-dialog${surfaceClass === '' ? '' : ` ${surfaceClass}`}`;
+        if (open === wasOpen)
+            return;
+        wasOpen = open;
+        if (open) {
+            handle = stack.open({
+                id,
+                kind: 'dialog',
+                modal,
+                element: surface,
+                managedElement: false,
+                closeOnOutside: true,
+                onClose: (reason) => scope.emit('close', reason),
+            });
+        }
+        else {
+            handle?.destroy();
+            handle = undefined;
+        }
+    }, { scheduler: environment.scheduler, flush: 'post' });
+    owner.own(stop);
+    owner.own(() => {
+        handle?.destroy();
+        stack.destroy();
+    });
+    return { root, refs: {} };
+}
+function readString(value, fallback) {
+    return typeof value === 'string' && value.trim() !== '' ? value : fallback;
+}
+function readSize(value) {
+    return value === 'sm' || value === 'lg' ? value : 'md';
+}
+function setOptionalAttribute(element, name, value) {
+    const normalized = typeof value === 'string' ? value.trim() : '';
+    if (normalized === '')
+        element.removeAttribute(name);
+    else
+        element.setAttribute(name, normalized);
+}

package/dist/forms.js

@@ -361,14 +361,16 @@ export function createChoiceGroupCardOptionStateContract(options) {
     const descriptionIds = normalizeKnownIds(options.descriptionIds ??
         options.options
             .filter((option) => option.description !== undefined)
-            .map((option) => option.id), knownIds).filter((id) => options.options.find((option) => option.id === id)?.description !== undefined);
+            .map((option) => option.id), knownIds);
+    const optionById = new Map(options.options.map((option) => [option.id, option]));
+    const filteredDescriptionIds = descriptionIds.filter((id) => optionById.get(id)?.description !== undefined);
     const actionIds = normalizeKnownIds(options.actionIds, knownIds);
     const actionSet = new Set(actionIds);
     const actionDisabledIds = normalizeKnownIds(options.actionDisabledIds, knownIds).filter((id) => actionSet.has(id));
     const cardSet = new Set(cardIds);
     const selectedEmphasisSet = new Set(selectedEmphasisIds);
     const disabledEmphasisSet = new Set(disabledEmphasisIds);
-    const descriptionSet = new Set(descriptionIds);
+    const descriptionSet = new Set(filteredDescriptionIds);
     const actionDisabledSet = new Set(actionDisabledIds);
     const state = options.options.length === 0
         ? 'empty'
@@ -431,13 +433,13 @@ export function createChoiceGroupCardOptionStateContract(options) {
         cardCount: cardIds.length,
         selectedEmphasisCount: selectedEmphasisIds.length,
         disabledEmphasisCount: disabledEmphasisIds.length,
-        descriptionCount: descriptionIds.length,
+        descriptionCount: filteredDescriptionIds.length,
         actionCount: actionIds.length,
         actionDisabledCount: actionDisabledIds.length,
         cardIds,
         selectedEmphasisIds,
         disabledEmphasisIds,
-        descriptionIds,
+        descriptionIds: filteredDescriptionIds,
         actionIds,
         actionDisabledIds,
         attrs: {
@@ -453,7 +455,7 @@ export function createChoiceGroupCardOptionStateContract(options) {
             'data-card-ids': cardIds.join(','),
             'data-selected-emphasis-ids': selectedEmphasisIds.join(','),
             'data-disabled-emphasis-ids': disabledEmphasisIds.join(','),
-            'data-description-ids': descriptionIds.join(','),
+            'data-description-ids': filteredDescriptionIds.join(','),
             'data-action-ids': actionIds.join(','),
             'data-action-disabled-ids': actionDisabledIds.join(','),
         },
@@ -875,9 +877,11 @@ function normalizeKnownIds(value, knownIds) {
     if (value === undefined)
         return [];
     const result = [];
+    const seen = new Set();
     for (const id of value) {
-        if (!knownIds.has(id) || result.includes(id))
+        if (!knownIds.has(id) || seen.has(id))
             continue;
+        seen.add(id);
         result.push(id);
     }
     return result;

package/dist/index.d.ts

@@ -5,18 +5,27 @@
 import { type ComponentRegistry, type InjectionScope } from '@vobs/runtime-dom';
 import { type AppShellConfigInput } from './app-shell.js';
 import { type UiIconSource } from './icons.js';
+export { PageState, type PageStateEvents, type PageStateProps, type PageStateScope, type PageStateStatus, } from './page-state.js';
 export * from './theme.js';
 export * from './icons.js';
 export * from './calendar.js';
 export * from './calendar-picker.js';
+export * from './dialog.js';
 export * from './workbench.js';
-export { AppShell, UiAppShellEnvironmentKey, createAppShellRegistry, defineAppShell, defineAppShellConfig, provideUiAppShells, resolveActiveAppShellNavItemId, resolveAppShellState, resolveAppShellStatus, type AppShellAccountConfig, type AppShellAccountMenuItem, type AppShellAccountMenuItemKind, type AppShellAccountMenuItemTone, type AppShellAction, type AppShellBrandConfig, type AppShellConfigInput, type AppShellContentMode, type AppShellDefinition, type AppShellDefinitionRecord, type AppShellNavigationConfig, type AppShellNavItem, type AppShellNavItemTone, type AppShellPageHeaderConfig, type AppShellProps, type AppShellRegistry, type AppShellRouteConfig, type AppShellSidebarMode, type AppShellStatusbarConfig, type AppShellThemeIconConfig, type AppShellThemeConfig, type AppShellTopbarConfig, type ResolvedAppShellState, type ResolvedAppShellStatus, } from './app-shell.js';
+export { AppShell, UiAppShellEnvironmentKey, createAppShellRegistry, defineAppShell, defineAppShellConfig, provideUiAppShells, resolveActiveAppShellNavItemId, resolveAppShellState, resolveAppShellStatus, type AppShellAccountConfig, type AppShellAccountMenuItem, type AppShellAccountMenuItemKind, type AppShellAccountMenuItemTone, type AppShellAction, type AppShellBrandConfig, type AppShellConfigInput, type AppShellContentMode, type AppShellDefinition, type AppShellDefinitionRecord, type AppShellLanguageConfig, type AppShellLanguageOption, type AppShellNavigationConfig, type AppShellNavItem, type AppShellNavItemTone, type AppShellPageHeaderConfig, type AppShellProps, type AppShellRegistry, type AppShellRouteConfig, type AppShellRoutePageHeaderConfig, type AppShellSidebarMode, type AppShellStatusbarConfig, type AppShellThemeIconConfig, type AppShellThemeConfig, type AppShellText, type AppShellTextConfig, type AppShellTopbarConfig, type ResolvedAppShellPageHeader, type ResolvedAppShellState, type ResolvedAppShellStatus, resolveAppShellText, } from './app-shell.js';
 export interface SetupUiOptions {
     readonly icons?: true | UiIconSource;
     readonly appShells?: AppShellConfigInput;
 }
+declare const uiComponents: {
+    'k-app-shell': ComponentRegistry[string];
+    'k-icon': ComponentRegistry[string];
+    'k-calendar-picker': ComponentRegistry[string];
+    'k-dialog': ComponentRegistry[string];
+    'k-page-state': ComponentRegistry[string];
+};
 export interface UiSetupEnvironment {
-    readonly components: ComponentRegistry;
+    readonly components: typeof uiComponents;
     readonly injections?: InjectionScope;
 }
 export declare function setupUi(options?: SetupUiOptions): UiSetupEnvironment;

package/dist/index.js

@@ -5,19 +5,25 @@
 import { createInjectionScope, } from '@vobs/runtime-dom';
 import { AppShell, provideUiAppShells } from './app-shell.js';
 import { CalendarPicker } from './calendar-picker.js';
+import { Dialog } from './dialog.js';
 import { Icon, provideUiIcons } from './icons.js';
+import { PageState } from './page-state.js';
+export { PageState, } from './page-state.js';
 export * from './theme.js';
 export * from './icons.js';
 export * from './calendar.js';
 export * from './calendar-picker.js';
+export * from './dialog.js';
 export * from './workbench.js';
-export { AppShell, UiAppShellEnvironmentKey, createAppShellRegistry, defineAppShell, defineAppShellConfig, provideUiAppShells, resolveActiveAppShellNavItemId, resolveAppShellState, resolveAppShellStatus, } from './app-shell.js';
+export { AppShell, UiAppShellEnvironmentKey, createAppShellRegistry, defineAppShell, defineAppShellConfig, provideUiAppShells, resolveActiveAppShellNavItemId, resolveAppShellState, resolveAppShellStatus, resolveAppShellText, } from './app-shell.js';
+const uiComponents = {
+    'k-app-shell': AppShell,
+    'k-icon': Icon,
+    'k-calendar-picker': CalendarPicker,
+    'k-dialog': Dialog,
+    'k-page-state': PageState,
+};
 export function setupUi(options = {}) {
-    const components = {
-        'k-app-shell': AppShell,
-        'k-icon': Icon,
-        'k-calendar-picker': CalendarPicker,
-    };
     const injections = createInjectionScope();
     if (options.icons !== undefined && options.icons !== true) {
         provideUiIcons(injections, options.icons);
@@ -26,7 +32,9 @@ export function setupUi(options = {}) {
         provideUiAppShells(injections, options.appShells);
     }
     if (options.icons === undefined || options.icons === true) {
-        return options.appShells === undefined ? { components } : { components, injections };
+        return options.appShells === undefined
+            ? { components: uiComponents }
+            : { components: uiComponents, injections };
     }
-    return { components, injections };
+    return { components: uiComponents, injections };
 }

package/dist/overlay.d.ts

@@ -30,6 +30,10 @@ export interface OpenOverlayOptions {
     readonly closeOnOutside?: boolean;
     readonly element?: HTMLElement;
     readonly initialFocus?: HTMLElement;
+    readonly autoFocus?: boolean;
+    readonly restoreFocusTarget?: HTMLElement;
+    /** Keep a caller-owned element in its current DOM position and leave it mounted on destroy. */
+    readonly managedElement?: boolean;
     readonly onClose?: (reason: OverlayCloseReason) => void;
 }
 export interface OverlayHandle {

package/dist/overlay.js

@@ -47,13 +47,15 @@ export function createOverlayStack(options) {
         open(openOptions) {
             const previouslyFocused = activeHtmlElement(options.document);
             const modal = openOptions.modal ?? (openOptions.kind === undefined || openOptions.kind === 'dialog');
-            const entry = createEntry(openOptions, modal, entries.length + 1, previouslyFocused);
+            const entry = createEntry(openOptions, modal, entries.length + 1, openOptions.restoreFocusTarget ?? previouslyFocused);
             entries.push(entry);
-            if (portalTarget !== undefined && entry.element !== undefined)
+            if (portalTarget !== undefined &&
+                entry.element !== undefined &&
+                openOptions.managedElement !== false)
                 portalTarget.append(entry.element);
             if (modal)
                 lockScroll();
-            focusInitialElement(openOptions.initialFocus, entry.element);
+            focusInitialElement(openOptions.initialFocus, entry.element, openOptions.autoFocus === true);
             return entry.handle;
         },
         destroy() {
@@ -98,7 +100,8 @@ export function createOverlayStack(options) {
                     entries.splice(index, 1);
                 if (modal)
                     unlockScroll();
-                openOptions.element?.remove();
+                if (openOptions.managedElement !== false)
+                    openOptions.element?.remove();
                 if (openOptions.restoreFocus !== false)
                     previouslyFocused?.focus();
             },
@@ -617,11 +620,13 @@ function activeHtmlElement(document) {
     const active = document.activeElement;
     return isHTMLElement(active) ? active : undefined;
 }
-function focusInitialElement(initialFocus, element) {
+function focusInitialElement(initialFocus, element, autoFocus) {
     if (initialFocus !== undefined) {
         initialFocus.focus();
         return;
     }
+    if (!autoFocus)
+        return;
     const target = element === undefined ? undefined : (firstFocusable(element) ?? element);
     target?.focus();
 }

package/dist/page-state.d.ts

@@ -0,0 +1,23 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { type ComponentProps } from '@vobs/runtime-dom';
+export type PageStateStatus = 'loading' | 'ready' | 'empty' | 'error' | 'submitting';
+export interface PageStateProps {
+    readonly state: PageStateStatus;
+    readonly 'loading-label'?: string;
+    readonly 'error-title'?: string;
+    readonly 'error-description'?: string;
+    readonly 'error-message'?: string;
+    readonly 'retry-label'?: string;
+    readonly [key: string]: unknown;
+}
+export interface PageStateEvents extends Record<string, (...args: never[]) => unknown> {
+    readonly retry: () => void;
+}
+export interface PageStateScope {
+    readonly props: ComponentProps<PageStateProps>;
+    readonly emit: <Name extends keyof PageStateEvents & string>(name: Name, ...args: Parameters<PageStateEvents[Name]>) => void;
+}
+export declare const PageState: import("@vobs/runtime-core").ComponentDefinition<PageStateProps, PageStateEvents, PageStateScope, Readonly<Record<string, Readonly<Record<string, unknown>>>>>;

package/dist/page-state.js

@@ -0,0 +1,96 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { effect } from '@vobs/reactivity';
+import { createCompiledTemplate, defineComponent, } from '@vobs/runtime-dom';
+export const PageState = defineComponent({
+    template: createCompiledTemplate({
+        templateId: 'k-page-state',
+        sourceId: '@vobs/ui/page-state',
+        rootTag: 'section',
+        mount(owner, scope, environment) {
+            return mountPageState(owner, scope, environment);
+        },
+        hydrate(owner, root, scope, environment) {
+            return mountPageState(owner, scope, environment, root);
+        },
+    }),
+    props: [
+        'state',
+        'loading-label',
+        'error-title',
+        'error-description',
+        'error-message',
+        'retry-label',
+    ],
+    emits: ['retry'],
+    setup(context) {
+        return {
+            props: context.props,
+            emit: (name, ...args) => context.emit(name, ...args),
+        };
+    },
+});
+function mountPageState(owner, scope, environment, existingRoot) {
+    const root = existingRoot ?? document.createElement('section');
+    root.className = 'kui-page-state';
+    root.setAttribute('role', 'status');
+    root.setAttribute('aria-live', 'polite');
+    const stop = effect(() => {
+        renderPageState(root, scope);
+    }, { scheduler: environment.scheduler });
+    owner.own(stop);
+    return { root, refs: {} };
+}
+function renderPageState(root, scope) {
+    const state = readState(scope.props.state?.value);
+    const isError = state === 'error';
+    const isBlocking = state === 'loading' || isError;
+    root.hidden = !isBlocking;
+    root.setAttribute('data-state', state);
+    root.replaceChildren();
+    if (!isBlocking)
+        return;
+    const mark = document.createElement('span');
+    mark.className = 'kui-page-state-mark';
+    mark.setAttribute('aria-hidden', 'true');
+    mark.textContent = isError ? '!' : '...';
+    root.append(mark);
+    if (!isError) {
+        const loading = document.createElement('p');
+        loading.className = 'kui-page-state-loading';
+        loading.textContent = readString(scope.props['loading-label']?.value, 'Loading...');
+        root.append(loading);
+        return;
+    }
+    const error = document.createElement('div');
+    error.className = 'kui-page-state-error';
+    const title = document.createElement('h2');
+    title.textContent = readString(scope.props['error-title']?.value, 'Unable to load');
+    const description = document.createElement('p');
+    description.textContent = readString(scope.props['error-description']?.value, 'Try again to reload this page.');
+    error.append(title, description);
+    const message = readString(scope.props['error-message']?.value, '');
+    if (message !== '') {
+        const detail = document.createElement('p');
+        detail.className = 'kui-page-state-message';
+        detail.textContent = message;
+        error.append(detail);
+    }
+    const retry = document.createElement('button');
+    retry.type = 'button';
+    retry.className = 'kui-button kui-button--solid kui-button--md';
+    retry.textContent = readString(scope.props['retry-label']?.value, 'Try again');
+    retry.addEventListener('click', () => scope.emit('retry'));
+    error.append(retry);
+    root.append(error);
+}
+function readState(value) {
+    return value === 'ready' || value === 'empty' || value === 'error' || value === 'submitting'
+        ? value
+        : 'loading';
+}
+function readString(value, fallback) {
+    return typeof value === 'string' && value.trim() !== '' ? value : fallback;
+}