@a2ui/angular 0.9.1 → 0.10.0

package/fesm2022/a2ui-angular-v0_9.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Injectable, signal, inject, DestroyRef, NgZone, input, ChangeDetectorRef, ChangeDetectionStrategy, Component, computed as computed$1, HostBinding, Directive, effect as effect$1 } from '@angular/core';
+import { InjectionToken, Inject, Injectable, signal, inject, DestroyRef, NgZone, input, ChangeDetectorRef, effect as effect$1, ChangeDetectionStrategy, Component, Directive, computed as computed$1, HostBinding } from '@angular/core';
 import { MessageProcessor, effect, computed, ComponentContext, Catalog, DataContext } from '@a2ui/web_core/v0_9';
 export { signal as preactSignal } from '@a2ui/web_core/v0_9';
 import { NgComponentOutlet } from '@angular/common';
@@ -164,6 +164,7 @@ class ComponentBinder {
     bind(context) {
         const props = context.componentModel.properties;
         const bound = {};
+        let template = undefined;
         for (const key of Object.keys(props)) {
             const value = props[key];
             let preactSig;
@@ -198,6 +199,11 @@ class ComponentBinder {
             }
             else if (key === 'children') {
                 const originalSig = preactSig;
+                const id = value.componentId;
+                const path = value.path;
+                if (id && path) {
+                    template = { id, path };
+                }
                 preactSig = computed(() => {
                     const val = originalSig.value;
                     const arr = Array.isArray(val) ? val : [];
@@ -213,6 +219,7 @@ class ComponentBinder {
             bound[key] = {
                 value: angSig,
                 raw: value,
+                template,
                 onUpdate: isBoundPath
                     ? (newValue) => context.dataContext.set(value.path, newValue)
                     : () => { }, // No-op for non-bound values
@@ -229,9 +236,7 @@ class ComponentBinder {
                     return ruleResults.every((r) => !!r.conditionSig.value);
                 });
                 const validationErrorsPreactSig = computed(() => {
-                    return ruleResults
-                        .filter((r) => !r.conditionSig.value)
-                        .map((r) => r.message);
+                    return ruleResults.filter((r) => !r.conditionSig.value).map((r) => r.message);
                 });
                 bound['isValid'] = {
                     value: toAngularSignal(isValidPreactSig, this.destroyRef, this.ngZone),
@@ -296,13 +301,26 @@ class ComponentHostComponent {
     context;
     resolvedComponentId = '';
     resolvedDataContextPath = '/';
-    ngOnInit() {
-        const surface = this.rendererService.surfaceGroup?.getSurface(this.surfaceId());
+    propsSub;
+    createSub;
+    constructor() {
+        effect$1(() => {
+            const key = this.componentKey();
+            const surfaceId = this.surfaceId();
+            this.setupComponent(key, surfaceId);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.propsSub?.unsubscribe();
+            this.createSub?.unsubscribe();
+        });
+    }
+    setupComponent(key, surfaceId) {
+        this.resetState();
+        const surface = this.rendererService.surfaceGroup?.getSurface(surfaceId);
         if (!surface) {
-            console.warn(`Surface ${this.surfaceId()} not found`);
+            console.warn(`Surface ${surfaceId} not found`);
             return;
         }
-        const key = this.componentKey();
         let id;
         let basePath;
         if (typeof key === 'object' && key !== null && 'id' in key) {
@@ -316,15 +334,14 @@ class ComponentHostComponent {
         this.resolvedComponentId = id;
         const componentModel = surface.componentsModel.get(id);
         if (!componentModel) {
-            console.warn(`Component ${id} not found in surface ${this.surfaceId()}. Waiting for it...`);
-            const sub = surface.componentsModel.onCreated.subscribe((comp) => {
+            console.warn(`Component ${id} not found in surface ${surfaceId}. Waiting for it...`);
+            const sub = surface.componentsModel.onCreated.subscribe(comp => {
                 if (comp.id === id) {
                     this.initializeComponent(surface, comp, id, basePath);
-                    this.cdr.markForCheck();
                     sub.unsubscribe();
                 }
             });
-            this.destroyRef.onDestroy(() => sub.unsubscribe());
+            this.createSub = sub;
             return;
         }
         this.initializeComponent(surface, componentModel, id, basePath);
@@ -344,15 +361,23 @@ class ComponentHostComponent {
         this.resolvedDataContextPath = this.context.dataContext.path;
         // Subscribes to updates to the component model properties, to get the
         // component to react when a new prop is added after creation.
-        const onPropsUpdateSub = componentModel.onUpdated.subscribe(() => {
+        this.propsSub = componentModel.onUpdated.subscribe(() => {
             this.props = this.binder.bind(this.context);
             this.cdr.markForCheck();
         });
-        this.destroyRef.onDestroy(() => {
-            // ComponentContext itself doesn't have a dispose, but its inner components might.
-            // However, SurfaceModel takes care of component disposal.
-            onPropsUpdateSub.unsubscribe();
-        });
+        this.cdr.markForCheck();
+    }
+    /**
+     * Resets the component host state, unsubscribing from active subscriptions
+     * and clearing component properties to avoid rendering stale data while
+     * a new component is being loaded.
+     */
+    resetState() {
+        this.propsSub?.unsubscribe();
+        this.createSub?.unsubscribe();
+        this.componentType = null;
+        this.props = {};
+        this.resolvedDataContextPath = '/';
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ComponentHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -378,7 +403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     selector: 'a2ui-v09-component-host',
                     imports: [NgComponentOutlet],
                     host: {
-                        'style': 'display: contents;'
+                        style: 'display: contents;',
                     },
                     template: `
     @if (componentType) {
@@ -397,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { componentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentKey", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { componentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentKey", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }] } });
 
 /**
  * Copyright 2026 Google LLC
@@ -432,7 +457,7 @@ class SurfaceComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SurfaceComponent, isStandalone: true, selector: "a2ui-v09-surface", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
     <a2ui-v09-component-host
-      [componentKey]="{ id: 'root', basePath: dataContextPath() }"
+      [componentKey]="{id: 'root', basePath: dataContextPath()}"
       [surfaceId]="surfaceId()"
     >
     </a2ui-v09-component-host>
@@ -445,11 +470,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     standalone: true,
                     imports: [ComponentHostComponent],
                     host: {
-                        'style': 'display: contents;'
+                        style: 'display: contents;',
                     },
                     template: `
     <a2ui-v09-component-host
-      [componentKey]="{ id: 'root', basePath: dataContextPath() }"
+      [componentKey]="{id: 'root', basePath: dataContextPath()}"
       [surfaceId]="surfaceId()"
     >
     </a2ui-v09-component-host>
@@ -458,6 +483,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
 
+/**
+ * Base class for A2UI catalog component in Angular.
+ *
+ * All Angular catalog components should extend this base class,
+ * which provides type safe access to props() and other common
+ * fields.
+ */
+class CatalogComponent {
+    /**
+     * Reactive properties resolved from the A2UI ComponentModel.
+     */
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    componentId = input.required(...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: CatalogComponent, isStandalone: true, inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: true, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CatalogComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: true }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+
 /**
  * Copyright 2026 Google LLC
  *
@@ -501,7 +548,7 @@ class DefaultMarkdownRenderer extends MarkdownRenderer {
         }
         catch (e) {
             if (!DefaultMarkdownRenderer.warningLogged) {
-                console.warn("[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback.");
+                console.warn('[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback.');
                 DefaultMarkdownRenderer.warningLogged = true;
             }
             return markdown;
@@ -573,36 +620,45 @@ class AngularCatalog extends Catalog {
  * Base class for A2UI basic catalog components in Angular.
  *
  * Automatically injects the basic catalog styles when the component is instantiated.
+ * Also binds the primary brand color to the host element.
  */
-class BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI ComponentModel.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input.required(...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
+class BasicCatalogComponent extends CatalogComponent {
+    rendererService = inject(A2uiRendererService);
+    surface = computed$1(() => {
+        return this.rendererService.surfaceGroup.getSurface(this.surfaceId());
+    }, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    theme = computed$1(() => {
+        return this.surface()?.theme;
+    }, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    primaryColor = computed$1(() => {
+        return this.theme()?.primaryColor;
+    }, ...(ngDevMode ? [{ debugName: "primaryColor" }] : /* istanbul ignore next */ []));
+    /** Weight is applied as flex css property on the component host HTML element. */
+    weight = computed$1(() => this.props()['weight']?.value() ?? null, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
     constructor() {
+        super();
         injectBasicCatalogStyles();
     }
-    /**
-     * Computes the weight of the component from the properties.
-     */
-    weight = computed$1(() => this.props()['weight']?.value() ?? null, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
     /**
      * Binds the flex style to the host element based on the weight.
      */
     get flexStyle() {
         return this.weight() !== null ? `${this.weight()}` : null;
     }
+    get primaryColorStyle() {
+        return this.primaryColor() || null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: BasicCatalogComponent, isStandalone: true, inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: true, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex": "this.flexStyle" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: BasicCatalogComponent, isStandalone: true, host: { properties: { "style.flex": "this.flexStyle", "style.--a2ui-color-primary": "this.primaryColorStyle" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalogComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: true }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }], flexStyle: [{
+        }], ctorParameters: () => [], propDecorators: { flexStyle: [{
                 type: HostBinding,
                 args: ['style.flex']
+            }], primaryColorStyle: [{
+                type: HostBinding,
+                args: ['style.--a2ui-color-primary']
             }] } });
 
 /**
@@ -669,7 +725,7 @@ class TextComponent extends BasicCatalogComponent {
                     break;
             }
             const requestId = ++this.renderRequestId;
-            this.markdownRenderer.render(value).then((rendered) => {
+            this.markdownRenderer.render(value).then(rendered => {
                 if (requestId === this.renderRequestId) {
                     this.resolvedText.set(rendered);
                 }
@@ -755,20 +811,17 @@ class RowComponent extends BasicCatalogComponent {
         const val = this.props()['align']?.value();
         return val ? ALIGN_MAP[val] || val : undefined;
     }, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    children = computed$1(() => {
-        const raw = this.props()['children']?.value() || [];
-        return Array.isArray(raw) ? raw : [];
-    }, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    children = computed$1(() => this.props()['children'].value() || [], ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
     isRepeating = computed$1(() => {
-        return !!this.props()['children']?.raw?.componentId;
+        return !!this.props()['children'].template;
     }, ...(ngDevMode ? [{ debugName: "isRepeating" }] : /* istanbul ignore next */ []));
     templateId = computed$1(() => {
-        return this.props()['children']?.raw?.componentId;
+        return this.props()['children'].template?.id;
     }, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
     normalizedChildren = computed$1(() => {
         if (this.isRepeating())
             return [];
-        return this.children().map((child) => {
+        return this.children().map(child => {
             if (typeof child === 'object' && child !== null && 'id' in child) {
                 return child;
             }
@@ -776,7 +829,7 @@ class RowComponent extends BasicCatalogComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "normalizedChildren" }] : /* istanbul ignore next */ []));
     getNormalizedPath(index) {
-        return getNormalizedPath(this.props()['children']?.raw?.path, this.dataContextPath(), index);
+        return getNormalizedPath(this.props()['children'].template?.path, this.dataContextPath(), index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: RowComponent, isStandalone: true, selector: "a2ui-v09-row", host: { properties: { "style.display": "\"flex\"", "style.flex-direction": "\"row\"", "style.gap": "\"var(--a2ui-row-gap, var(--a2ui-spacing-m, 16px))\"", "style.justify-content": "justify()", "style.align-items": "align()" } }, usesInheritance: true, ngImport: i0, template: `
@@ -790,7 +843,7 @@ class RowComponent extends BasicCatalogComponent {
     @if (isRepeating()) {
       @for (item of children(); track item; let i = $index) {
         <a2ui-v09-component-host
-          [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
           [surfaceId]="surfaceId()"
         >
         </a2ui-v09-component-host>
@@ -822,7 +875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     @if (isRepeating()) {
       @for (item of children(); track item; let i = $index) {
         <a2ui-v09-component-host
-          [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
           [surfaceId]="surfaceId()"
         >
         </a2ui-v09-component-host>
@@ -866,20 +919,17 @@ class ColumnComponent extends BasicCatalogComponent {
         const val = this.props()['align']?.value();
         return val ? ALIGN_MAP[val] || val : undefined;
     }, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    children = computed$1(() => {
-        const raw = this.props()['children']?.value() || [];
-        return Array.isArray(raw) ? raw : [];
-    }, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    children = computed$1(() => this.props()['children'].value() || [], ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
     isRepeating = computed$1(() => {
-        return !!this.props()['children']?.raw?.componentId;
+        return !!this.props()['children'].template;
     }, ...(ngDevMode ? [{ debugName: "isRepeating" }] : /* istanbul ignore next */ []));
     templateId = computed$1(() => {
-        return this.props()['children']?.raw?.componentId;
+        return this.props()['children'].template?.id;
     }, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
     normalizedChildren = computed$1(() => {
         if (this.isRepeating())
             return [];
-        return this.children().map((child) => {
+        return this.children().map(child => {
             if (typeof child === 'object' && child !== null && 'id' in child) {
                 return child;
             }
@@ -887,7 +937,7 @@ class ColumnComponent extends BasicCatalogComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "normalizedChildren" }] : /* istanbul ignore next */ []));
     getNormalizedPath(index) {
-        return getNormalizedPath(this.props()['children']?.raw?.path, this.dataContextPath(), index);
+        return getNormalizedPath(this.props()['children'].template?.path, this.dataContextPath(), index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ColumnComponent, isStandalone: true, selector: "a2ui-v09-column", host: { properties: { "style.display": "\"flex\"", "style.flex-direction": "\"column\"", "style.width": "\"100%\"", "style.gap": "\"var(--a2ui-column-gap, var(--a2ui-spacing-m, 16px))\"", "style.justify-content": "justify()", "style.align-items": "align()" } }, usesInheritance: true, ngImport: i0, template: `
@@ -901,7 +951,7 @@ class ColumnComponent extends BasicCatalogComponent {
     @if (isRepeating()) {
       @for (item of children(); track item; let i = $index) {
         <a2ui-v09-component-host
-          [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
           [surfaceId]="surfaceId()"
         >
         </a2ui-v09-component-host>
@@ -934,7 +984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     @if (isRepeating()) {
       @for (item of children(); track item; let i = $index) {
         <a2ui-v09-component-host
-          [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
           [surfaceId]="surfaceId()"
         >
         </a2ui-v09-component-host>
@@ -976,14 +1026,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-button-font-weight`: Controls the font weight.
  */
 class ButtonComponent extends BasicCatalogComponent {
-    rendererService = inject(A2uiRendererService);
     variant = computed$1(() => this.props()['variant']?.value() ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     child = computed$1(() => this.props()['child']?.value(), ...(ngDevMode ? [{ debugName: "child" }] : /* istanbul ignore next */ []));
     action = computed$1(() => this.props()['action']?.value(), ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
     handleClick() {
         const action = this.action();
         if (action) {
-            const surface = this.rendererService.surfaceGroup?.getSurface(this.surfaceId());
+            const surface = this.surface();
             if (surface) {
                 const dataContext = new DataContext(surface, this.dataContextPath());
                 const resolvedAction = dataContext.resolveAction(action);
@@ -1004,7 +1053,7 @@ class ButtonComponent extends BasicCatalogComponent {
         </a2ui-v09-component-host>
       }
     </button>
-  `, isInline: true, styles: [".a2ui-button{padding:var( --a2ui-button-padding, var(--a2ui-spacing-m, .5rem) var(--a2ui-spacing-l, 1rem) );border-radius:var(--a2ui-button-border-radius, var(--a2ui-spacing-s, .25rem));border:var( --a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );cursor:pointer;margin:var(--a2ui-button-margin, var(--a2ui-spacing-m, .5rem));background:var(--a2ui-button-background, var(--a2ui-color-surface, #fff));box-shadow:var(--a2ui-button-box-shadow, none);font-weight:var(--a2ui-button-font-weight, normal);--_a2ui-text-margin: 0;--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);color:var(--_a2ui-text-color)}.a2ui-button.primary{background-color:var(--a2ui-color-primary, #17e);--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);color:var(--_a2ui-text-color);border-color:var(--a2ui-color-primary-hover, #0069d9)}.a2ui-button.borderless{background:none;border:none;padding:0;color:var(--a2ui-color-primary, #17e)}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-button{padding:var( --a2ui-button-padding, var(--a2ui-spacing-m, .5rem) var(--a2ui-spacing-l, 1rem) );border-radius:var(--a2ui-button-border-radius, var(--a2ui-spacing-s, .25rem));border:var( --a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );cursor:pointer;margin:var(--a2ui-button-margin, var(--a2ui-spacing-m, .5rem));background:var(--a2ui-button-background, var(--a2ui-color-surface, #fff));box-shadow:var(--a2ui-button-box-shadow, none);font-weight:var(--a2ui-button-font-weight, normal);--_a2ui-text-margin: 0;--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);color:var(--_a2ui-text-color)}.a2ui-button.primary{background:var(--a2ui-color-primary, #17e);--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);color:var(--_a2ui-text-color);border:none}.a2ui-button.borderless{background:none;border:none;padding:0;color:var(--a2ui-color-primary, #17e)}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -1020,7 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </a2ui-v09-component-host>
       }
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-button{padding:var( --a2ui-button-padding, var(--a2ui-spacing-m, .5rem) var(--a2ui-spacing-l, 1rem) );border-radius:var(--a2ui-button-border-radius, var(--a2ui-spacing-s, .25rem));border:var( --a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );cursor:pointer;margin:var(--a2ui-button-margin, var(--a2ui-spacing-m, .5rem));background:var(--a2ui-button-background, var(--a2ui-color-surface, #fff));box-shadow:var(--a2ui-button-box-shadow, none);font-weight:var(--a2ui-button-font-weight, normal);--_a2ui-text-margin: 0;--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);color:var(--_a2ui-text-color)}.a2ui-button.primary{background-color:var(--a2ui-color-primary, #17e);--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);color:var(--_a2ui-text-color);border-color:var(--a2ui-color-primary-hover, #0069d9)}.a2ui-button.borderless{background:none;border:none;padding:0;color:var(--a2ui-color-primary, #17e)}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-button{padding:var( --a2ui-button-padding, var(--a2ui-spacing-m, .5rem) var(--a2ui-spacing-l, 1rem) );border-radius:var(--a2ui-button-border-radius, var(--a2ui-spacing-s, .25rem));border:var( --a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );cursor:pointer;margin:var(--a2ui-button-margin, var(--a2ui-spacing-m, .5rem));background:var(--a2ui-button-background, var(--a2ui-color-surface, #fff));box-shadow:var(--a2ui-button-box-shadow, none);font-weight:var(--a2ui-button-font-weight, normal);--_a2ui-text-margin: 0;--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);color:var(--_a2ui-text-color)}.a2ui-button.primary{background:var(--a2ui-color-primary, #17e);--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);color:var(--_a2ui-text-color);border:none}.a2ui-button.borderless{background:none;border:none;padding:0;color:var(--a2ui-color-primary, #17e)}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"] }]
         }] });
 
 /**
@@ -1157,7 +1206,7 @@ class ImageComponent extends BasicCatalogComponent {
       [style.object-fit]="fit()"
       [class]="'a2ui-image ' + variant()"
     />
-  `, isInline: true, styles: [".a2ui-image{display:block;max-width:100%;height:auto}.a2ui-image.circle{border-radius:50%;aspect-ratio:1 / 1}.a2ui-image.rounded{border-radius:var(--a2ui-image-border-radius, var(--a2ui-border-radius, 8px))}.a2ui-image.icon{width:var(--a2ui-image-icon-size, 24px);height:var(--a2ui-image-icon-size, 24px)}.a2ui-image.avatar{width:var(--a2ui-image-avatar-size, 40px);height:var(--a2ui-image-avatar-size, 40px);border-radius:50%}.a2ui-image.smallFeature{max-width:var(--a2ui-image-small-feature-size, 100px)}.a2ui-image.mediumFeature{max-width:300px;height:auto}.a2ui-image.largeFeature{width:100%;max-height:var(--a2ui-image-large-feature-size, 400px)}.a2ui-image.header{width:100%;height:var(--a2ui-image-header-size, 200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-image{display:block;max-width:100%;height:auto;border-radius:var(--a2ui-image-border-radius, var(--a2ui-border-radius, 8px))}.a2ui-image.icon{width:var(--a2ui-image-icon-size, 24px);height:var(--a2ui-image-icon-size, 24px)}.a2ui-image.avatar{width:var(--a2ui-image-avatar-size, 40px);height:var(--a2ui-image-avatar-size, 40px);border-radius:50%}.a2ui-image.smallFeature{max-width:var(--a2ui-image-small-feature-size, 100px)}.a2ui-image.largeFeature{max-height:var(--a2ui-image-large-feature-size, 400px)}.a2ui-image.header{height:var(--a2ui-image-header-size, 200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
@@ -1168,7 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [style.object-fit]="fit()"
       [class]="'a2ui-image ' + variant()"
     />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-image{display:block;max-width:100%;height:auto}.a2ui-image.circle{border-radius:50%;aspect-ratio:1 / 1}.a2ui-image.rounded{border-radius:var(--a2ui-image-border-radius, var(--a2ui-border-radius, 8px))}.a2ui-image.icon{width:var(--a2ui-image-icon-size, 24px);height:var(--a2ui-image-icon-size, 24px)}.a2ui-image.avatar{width:var(--a2ui-image-avatar-size, 40px);height:var(--a2ui-image-avatar-size, 40px);border-radius:50%}.a2ui-image.smallFeature{max-width:var(--a2ui-image-small-feature-size, 100px)}.a2ui-image.mediumFeature{max-width:300px;height:auto}.a2ui-image.largeFeature{width:100%;max-height:var(--a2ui-image-large-feature-size, 400px)}.a2ui-image.header{width:100%;height:var(--a2ui-image-header-size, 200px)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-image{display:block;max-width:100%;height:auto;border-radius:var(--a2ui-image-border-radius, var(--a2ui-border-radius, 8px))}.a2ui-image.icon{width:var(--a2ui-image-icon-size, 24px);height:var(--a2ui-image-icon-size, 24px)}.a2ui-image.avatar{width:var(--a2ui-image-avatar-size, 40px);height:var(--a2ui-image-avatar-size, 40px);border-radius:50%}.a2ui-image.smallFeature{max-width:var(--a2ui-image-small-feature-size, 100px)}.a2ui-image.largeFeature{max-height:var(--a2ui-image-large-feature-size, 400px)}.a2ui-image.header{height:var(--a2ui-image-header-size, 200px)}\n"] }]
         }] });
 
 /**
@@ -1206,14 +1255,17 @@ const ICON_NAME_OVERRIDES = {
 class IconComponent extends BasicCatalogComponent {
     color = computed$1(() => this.props()['color']?.value(), ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     iconNameRaw = computed$1(() => this.props()['name']?.value(), ...(ngDevMode ? [{ debugName: "iconNameRaw" }] : /* istanbul ignore next */ []));
-    isPath = computed$1(() => {
+    isSvgPath = computed$1(() => {
         const name = this.iconNameRaw();
-        return typeof name === 'object' && name !== null && 'path' in name;
-    }, ...(ngDevMode ? [{ debugName: "isPath" }] : /* istanbul ignore next */ []));
-    path = computed$1(() => {
+        return typeof name === 'object' && name !== null && 'svgPath' in name;
+    }, ...(ngDevMode ? [{ debugName: "isSvgPath" }] : /* istanbul ignore next */ []));
+    svgPath = computed$1(() => {
         const name = this.iconNameRaw();
-        return name?.path || '';
-    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+        if (typeof name === 'object' && name !== null && 'svgPath' in name) {
+            return name.svgPath;
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "svgPath" }] : /* istanbul ignore next */ []));
     iconName = computed$1(() => {
         const name = this.iconNameRaw();
         if (typeof name !== 'string')
@@ -1221,13 +1273,13 @@ class IconComponent extends BasicCatalogComponent {
         if (ICON_NAME_OVERRIDES[name])
             return ICON_NAME_OVERRIDES[name];
         // Convert camelCase to snake_case for Material Icons
-        return name.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+        return name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
     }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IconComponent, isStandalone: true, selector: "a2ui-v09-icon", usesInheritance: true, ngImport: i0, template: `
-    @if (isPath()) {
+    @if (isSvgPath()) {
       <svg class="a2ui-icon svg" viewBox="0 0 24 24" [style.fill]="color() || 'currentColor'">
-        <path [attr.d]="path()"></path>
+        <path [attr.d]="svgPath()"></path>
       </svg>
     } @else {
       <i class="material-icons a2ui-icon" [style.color]="color()">
@@ -1239,9 +1291,9 @@ class IconComponent extends BasicCatalogComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-v09-icon', standalone: true, imports: [], template: `
-    @if (isPath()) {
+    @if (isSvgPath()) {
       <svg class="a2ui-icon svg" viewBox="0 0 24 24" [style.fill]="color() || 'currentColor'">
-        <path [attr.d]="path()"></path>
+        <path [attr.d]="svgPath()"></path>
       </svg>
     } @else {
       <i class="material-icons a2ui-icon" [style.color]="color()">
@@ -1384,7 +1436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Angular implementation of the A2UI List component (v0.9).
  *
  * Renders a list of child components with support for ordered, unordered,
- * and unstyled layouts in both vertical and horizontal orientations.
+ * and unstyled layouts in both vertical and horizontal directions.
  *
  * Supported CSS variables:
  * - `--a2ui-list-gap`: Controls the gap between items.
@@ -1392,11 +1444,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  */
 class ListComponent extends BasicCatalogComponent {
     listStyle = computed$1(() => this.props()['listStyle']?.value(), ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
-    orientation = computed$1(() => this.props()['orientation']?.value() || 'vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    children = computed$1(() => {
-        const raw = this.props()['children']?.value();
-        return Array.isArray(raw) ? raw : [];
-    }, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    direction = computed$1(() => this.props()['direction']?.value() || 'vertical', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    children = computed$1(() => this.props()['children'].value(), ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
     listTag = computed$1(() => {
         const style = this.listStyle();
         if (style === 'ordered')
@@ -1420,7 +1469,7 @@ class ListComponent extends BasicCatalogComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ListComponent, isStandalone: true, selector: "a2ui-v09-list", usesInheritance: true, ngImport: i0, template: `
     @switch (listTag()) {
       @case ('ol') {
-        <ol [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+        <ol [class]="'a2ui-list ' + direction()" [style.list-style-type]="styleType()">
           @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
@@ -1430,7 +1479,7 @@ class ListComponent extends BasicCatalogComponent {
         </ol>
       }
       @case ('ul') {
-        <ul [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+        <ul [class]="'a2ui-list ' + direction()" [style.list-style-type]="styleType()">
           @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
@@ -1440,7 +1489,7 @@ class ListComponent extends BasicCatalogComponent {
         </ul>
       }
       @default {
-        <div [class]="'a2ui-list ' + orientation()" style="list-style-type: none;">
+        <div [class]="'a2ui-list ' + direction()" style="list-style-type: none;">
           @for (child of children(); track trackBy($index, child)) {
             <div class="a2ui-list-item-none">
               <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
@@ -1457,7 +1506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ selector: 'a2ui-v09-list', standalone: true, imports: [ComponentHostComponent], template: `
     @switch (listTag()) {
       @case ('ol') {
-        <ol [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+        <ol [class]="'a2ui-list ' + direction()" [style.list-style-type]="styleType()">
           @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
@@ -1467,7 +1516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </ol>
       }
       @case ('ul') {
-        <ul [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+        <ul [class]="'a2ui-list ' + direction()" [style.list-style-type]="styleType()">
           @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
@@ -1477,7 +1526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </ul>
       }
       @default {
-        <div [class]="'a2ui-list ' + orientation()" style="list-style-type: none;">
+        <div [class]="'a2ui-list ' + direction()" style="list-style-type: none;">
           @for (child of children(); track trackBy($index, child)) {
             <div class="a2ui-list-item-none">
               <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
@@ -1528,7 +1577,7 @@ class CardComponent extends BasicCatalogComponent {
         </a2ui-v09-component-host>
       }
     </div>
-  `, isInline: true, styles: [".a2ui-card{padding:var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));border-radius:var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));box-shadow:var(--a2ui-card-box-shadow, 0 2px 4px rgba(0, 0, 0, .1));background-color:var(--a2ui-card-background, var(--a2ui-color-surface, #fff));border:var( --a2ui-card-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );margin:var(--a2ui-card-margin, var(--a2ui-spacing-m, 16px))}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-card{padding:var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));border-radius:var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));box-shadow:var(--a2ui-card-box-shadow, 0 2px 4px rgba(0, 0, 0, .1));background:var(--a2ui-card-background, var(--a2ui-color-surface, #fff));border:var( --a2ui-card-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );margin:var(--a2ui-card-margin, var(--a2ui-spacing-m, 16px))}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -1539,7 +1588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </a2ui-v09-component-host>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-card{padding:var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));border-radius:var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));box-shadow:var(--a2ui-card-box-shadow, 0 2px 4px rgba(0, 0, 0, .1));background-color:var(--a2ui-card-background, var(--a2ui-color-surface, #fff));border:var( --a2ui-card-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );margin:var(--a2ui-card-margin, var(--a2ui-spacing-m, 16px))}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-card{padding:var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));border-radius:var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));box-shadow:var(--a2ui-card-box-shadow, 0 2px 4px rgba(0, 0, 0, .1));background:var(--a2ui-card-background, var(--a2ui-color-surface, #fff));border:var( --a2ui-card-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );margin:var(--a2ui-card-margin, var(--a2ui-spacing-m, 16px))}\n"] }]
         }] });
 
 /**
@@ -1575,15 +1624,15 @@ class TabsComponent extends BasicCatalogComponent {
     activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
     tabs = computed$1(() => this.props()['tabs']?.value() || [], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     activeTab = computed$1(() => this.tabs()[this.activeTabIndex()], ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-    normalizedActiveTabContent = computed$1(() => {
-        const content = this.activeTab()?.content;
-        if (!content)
+    normalizedActiveTabChild = computed$1(() => {
+        const child = this.activeTab()?.child;
+        if (!child)
             return null;
-        if (typeof content === 'object' && content !== null && 'id' in content) {
-            return content;
+        if (typeof child === 'object' && child !== null && 'id' in child) {
+            return child;
         }
-        return { id: content, basePath: this.dataContextPath() };
-    }, ...(ngDevMode ? [{ debugName: "normalizedActiveTabContent" }] : /* istanbul ignore next */ []));
+        return { id: child, basePath: this.dataContextPath() };
+    }, ...(ngDevMode ? [{ debugName: "normalizedActiveTabChild" }] : /* istanbul ignore next */ []));
     setActiveTab(index) {
         this.activeTabIndex.set(index);
     }
@@ -1597,14 +1646,14 @@ class TabsComponent extends BasicCatalogComponent {
             [class.active]="activeTabIndex() === i"
             (click)="setActiveTab(i)"
           >
-            {{ tab.label }}
+            {{ tab.title }}
           </button>
         }
       </div>
-      @if (normalizedActiveTabContent()) {
+      @if (normalizedActiveTabChild()) {
         <div class="a2ui-tab-content">
           <a2ui-v09-component-host
-            [componentKey]="normalizedActiveTabContent()!"
+            [componentKey]="normalizedActiveTabChild()!"
             [surfaceId]="surfaceId()"
           >
           </a2ui-v09-component-host>
@@ -1624,14 +1673,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             [class.active]="activeTabIndex() === i"
             (click)="setActiveTab(i)"
           >
-            {{ tab.label }}
+            {{ tab.title }}
           </button>
         }
       </div>
-      @if (normalizedActiveTabContent()) {
+      @if (normalizedActiveTabChild()) {
         <div class="a2ui-tab-content">
           <a2ui-v09-component-host
-            [componentKey]="normalizedActiveTabContent()!"
+            [componentKey]="normalizedActiveTabChild()!"
             [surfaceId]="surfaceId()"
           >
           </a2ui-v09-component-host>
@@ -1827,7 +1876,7 @@ class CheckBoxComponent extends BasicCatalogComponent {
       />
       <span class="a2ui-check-box-text">{{ label() }}</span>
     </label>
-  `, isInline: true, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, .5rem));cursor:pointer;padding:4px 0;margin:var(--a2ui-checkbox-margin, var(--a2ui-spacing-m, 16px));color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-check-box-input{width:var(--a2ui-checkbox-size, 1rem);height:var(--a2ui-checkbox-size, 1rem);cursor:pointer;background:var(--a2ui-checkbox-background, inherit);border:var(--a2ui-checkbox-border, var(--a2ui-border-width, 1px) solid #ccc);border-radius:var(--a2ui-checkbox-border-radius, 4px)}.a2ui-check-box-text{font-size:var( --a2ui-checkbox-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 16px)) );font-weight:var(--a2ui-checkbox-label-font-weight, bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, .5rem));cursor:pointer;padding:4px 0;margin:var(--a2ui-checkbox-margin, var(--a2ui-spacing-m, 16px));color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-check-box-input{width:var(--a2ui-checkbox-size, 1rem);height:var(--a2ui-checkbox-size, 1rem);cursor:pointer;background:var(--a2ui-checkbox-background, inherit);border:var(--a2ui-checkbox-border, var(--a2ui-border-width, 1px) solid #ccc);border-radius:var(--a2ui-checkbox-border-radius, 4px);accent-color:var(--a2ui-color-primary)}.a2ui-check-box-text{font-size:var( --a2ui-checkbox-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 16px)) );font-weight:var(--a2ui-checkbox-label-font-weight, bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -1841,7 +1890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       />
       <span class="a2ui-check-box-text">{{ label() }}</span>
     </label>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, .5rem));cursor:pointer;padding:4px 0;margin:var(--a2ui-checkbox-margin, var(--a2ui-spacing-m, 16px));color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-check-box-input{width:var(--a2ui-checkbox-size, 1rem);height:var(--a2ui-checkbox-size, 1rem);cursor:pointer;background:var(--a2ui-checkbox-background, inherit);border:var(--a2ui-checkbox-border, var(--a2ui-border-width, 1px) solid #ccc);border-radius:var(--a2ui-checkbox-border-radius, 4px)}.a2ui-check-box-text{font-size:var( --a2ui-checkbox-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 16px)) );font-weight:var(--a2ui-checkbox-label-font-weight, bold)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, .5rem));cursor:pointer;padding:4px 0;margin:var(--a2ui-checkbox-margin, var(--a2ui-spacing-m, 16px));color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-check-box-input{width:var(--a2ui-checkbox-size, 1rem);height:var(--a2ui-checkbox-size, 1rem);cursor:pointer;background:var(--a2ui-checkbox-background, inherit);border:var(--a2ui-checkbox-border, var(--a2ui-border-width, 1px) solid #ccc);border-radius:var(--a2ui-checkbox-border-radius, 4px);accent-color:var(--a2ui-color-primary)}.a2ui-check-box-text{font-size:var( --a2ui-checkbox-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 16px)) );font-weight:var(--a2ui-checkbox-label-font-weight, bold)}\n"] }]
         }] });
 
 /**
@@ -1877,7 +1926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  */
 class ChoicePickerComponent extends BasicCatalogComponent {
     displayStyle = computed$1(() => this.props()['displayStyle']?.value(), ...(ngDevMode ? [{ debugName: "displayStyle" }] : /* istanbul ignore next */ []));
-    choices = computed$1(() => this.props()['choices']?.value() || this.props()['options']?.value() || [], ...(ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []));
+    options = computed$1(() => this.props()['options']?.value() || [], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     variant = computed$1(() => this.props()['variant']?.value(), ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     selectedValue = computed$1(() => this.props()['value']?.value(), ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
     isMultiple() {
@@ -1913,7 +1962,7 @@ class ChoicePickerComponent extends BasicCatalogComponent {
         }
         else {
             if (active) {
-                this.props()['value']?.onUpdate(value);
+                this.props()['value']?.onUpdate([value]);
             }
         }
     }
@@ -1923,30 +1972,30 @@ class ChoicePickerComponent extends BasicCatalogComponent {
       <!-- Chips Variant -->
       @if (displayStyle() === 'chips') {
         <div class="a2ui-chips-group">
-          @for (choice of choices(); track choice.value) {
+          @for (option of options(); track option.value) {
             <button
               class="a2ui-chip"
-              [class.active]="isSelected(choice.value)"
-              (click)="toggleActive(choice.value)"
+              [class.active]="isSelected(option.value)"
+              (click)="toggleActive(option.value)"
             >
-              {{ choice.label }}
+              {{ option.label }}
             </button>
           }
         </div>
       } @else {
         <!-- Checkbox/Radio Variant -->
         <div class="a2ui-options-group">
-          @for (choice of choices(); track choice.value) {
+          @for (option of options(); track option.value) {
             <label class="a2ui-option-label">
               <input
                 [type]="isMultiple() ? 'checkbox' : 'radio'"
                 [name]="componentId()"
-                [value]="choice.value"
-                [checked]="isSelected(choice.value)"
-                (change)="onCheckChange(choice.value, $event)"
+                [value]="option.value"
+                [checked]="isSelected(option.value)"
+                (change)="onCheckChange(option.value, $event)"
                 class="a2ui-option-input"
               />
-              <span class="a2ui-option-text">{{ choice.label }}</span>
+              <span class="a2ui-option-text">{{ option.label }}</span>
             </label>
           }
         </div>
@@ -1961,30 +2010,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       <!-- Chips Variant -->
       @if (displayStyle() === 'chips') {
         <div class="a2ui-chips-group">
-          @for (choice of choices(); track choice.value) {
+          @for (option of options(); track option.value) {
             <button
               class="a2ui-chip"
-              [class.active]="isSelected(choice.value)"
-              (click)="toggleActive(choice.value)"
+              [class.active]="isSelected(option.value)"
+              (click)="toggleActive(option.value)"
             >
-              {{ choice.label }}
+              {{ option.label }}
             </button>
           }
         </div>
       } @else {
         <!-- Checkbox/Radio Variant -->
         <div class="a2ui-options-group">
-          @for (choice of choices(); track choice.value) {
+          @for (option of options(); track option.value) {
             <label class="a2ui-option-label">
               <input
                 [type]="isMultiple() ? 'checkbox' : 'radio'"
                 [name]="componentId()"
-                [value]="choice.value"
-                [checked]="isSelected(choice.value)"
-                (change)="onCheckChange(choice.value, $event)"
+                [value]="option.value"
+                [checked]="isSelected(option.value)"
+                (change)="onCheckChange(option.value, $event)"
                 class="a2ui-option-input"
               />
-              <span class="a2ui-option-text">{{ choice.label }}</span>
+              <span class="a2ui-option-text">{{ option.label }}</span>
             </label>
           }
         </div>
@@ -2042,7 +2091,7 @@ class SliderComponent extends BasicCatalogComponent {
         [min]="min()"
         [max]="max()"
         [step]="step()"
-        [value]="value() ?? min()"
+        [value]="value()"
         (input)="handleInput($event)"
         class="a2ui-slider"
       />
@@ -2062,7 +2111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         [min]="min()"
         [max]="max()"
         [step]="step()"
-        [value]="value() ?? min()"
+        [value]="value()"
         (input)="handleInput($event)"
         class="a2ui-slider"
       />
@@ -2213,26 +2262,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  */
 /**
  * The set of default Angular implementations for each component in the basic catalog.
+ * Using string literals as keys, to survive property renaming, as these names need to match the JSON payload.
  */
+// Ignore Prettier to preserve quoted keys, needed to survive property renaming.
+// prettier-ignore
 const DEFAULT_COMPONENT_IMPLEMENTATIONS = {
-    text: { ...TextApi, component: TextComponent },
-    row: { ...RowApi, component: RowComponent },
-    column: { ...ColumnApi, component: ColumnComponent },
-    button: { ...ButtonApi, component: ButtonComponent },
-    textField: { ...TextFieldApi, component: TextFieldComponent },
-    image: { ...ImageApi, component: ImageComponent },
-    icon: { ...IconApi, component: IconComponent },
-    video: { ...VideoApi, component: VideoComponent },
-    audioPlayer: { ...AudioPlayerApi, component: AudioPlayerComponent },
-    list: { ...ListApi, component: ListComponent },
-    card: { ...CardApi, component: CardComponent },
-    tabs: { ...TabsApi, component: TabsComponent },
-    modal: { ...ModalApi, component: ModalComponent },
-    divider: { ...DividerApi, component: DividerComponent },
-    checkBox: { ...CheckBoxApi, component: CheckBoxComponent },
-    choicePicker: { ...ChoicePickerApi, component: ChoicePickerComponent },
-    slider: { ...SliderApi, component: SliderComponent },
-    dateTimeInput: { ...DateTimeInputApi, component: DateTimeInputComponent },
+    'text': { ...TextApi, component: TextComponent },
+    'row': { ...RowApi, component: RowComponent },
+    'column': { ...ColumnApi, component: ColumnComponent },
+    'button': { ...ButtonApi, component: ButtonComponent },
+    'textField': { ...TextFieldApi, component: TextFieldComponent },
+    'image': { ...ImageApi, component: ImageComponent },
+    'icon': { ...IconApi, component: IconComponent },
+    'video': { ...VideoApi, component: VideoComponent },
+    'audioPlayer': { ...AudioPlayerApi, component: AudioPlayerComponent },
+    'list': { ...ListApi, component: ListComponent },
+    'card': { ...CardApi, component: CardComponent },
+    'tabs': { ...TabsApi, component: TabsComponent },
+    'modal': { ...ModalApi, component: ModalComponent },
+    'divider': { ...DividerApi, component: DividerComponent },
+    'checkBox': { ...CheckBoxApi, component: CheckBoxComponent },
+    'choicePicker': { ...ChoicePickerApi, component: ChoicePickerComponent },
+    'slider': { ...SliderApi, component: SliderComponent },
+    'dateTimeInput': { ...DateTimeInputApi, component: DateTimeInputComponent },
 };
 /**
  * The set of Angular UI components provided by the basic catalog.
@@ -2306,5 +2358,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { A2UI_RENDERER_CONFIG, A2uiRendererService, AngularCatalog, AudioPlayerComponent, BASIC_COMPONENTS, BasicCatalog, BasicCatalogBase, ButtonComponent, CardComponent, CheckBoxComponent, ChoicePickerComponent, ColumnComponent, ComponentBinder, ComponentHostComponent, DateTimeInputComponent, DefaultMarkdownRenderer, DividerComponent, IconComponent, ImageComponent, ListComponent, MarkdownRenderer, ModalComponent, RowComponent, SliderComponent, SurfaceComponent, TabsComponent, TextComponent, TextFieldComponent, VideoComponent, getNormalizedPath, provideMarkdownRenderer, toAngularSignal };
+export { A2UI_RENDERER_CONFIG, A2uiRendererService, AngularCatalog, AudioPlayerComponent, BASIC_COMPONENTS, BasicCatalog, BasicCatalogBase, ButtonComponent, CardComponent, CatalogComponent, CheckBoxComponent, ChoicePickerComponent, ColumnComponent, ComponentBinder, ComponentHostComponent, DateTimeInputComponent, DefaultMarkdownRenderer, DividerComponent, IconComponent, ImageComponent, ListComponent, MarkdownRenderer, ModalComponent, RowComponent, SliderComponent, SurfaceComponent, TabsComponent, TextComponent, TextFieldComponent, VideoComponent, getNormalizedPath, provideMarkdownRenderer, toAngularSignal };
 //# sourceMappingURL=a2ui-angular-v0_9.mjs.map