@a2ui/angular 0.9.0 → 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, HostBinding, ChangeDetectionStrategy, Component, computed as computed$1, 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),
@@ -294,21 +299,28 @@ class ComponentHostComponent {
     componentType = null;
     props = {};
     context;
-    weight = signal(null, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
-    // TODO(#1199): Move weight handling to the catalog specification.
-    get flexStyle() {
-        const w = this.weight();
-        return w ? `${w}` : '';
-    }
     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) {
@@ -322,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);
@@ -350,22 +361,27 @@ 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);
-            // TODO(#1199): Move weight handling to the catalog specification.
-            this.weight.set(componentModel.properties['weight'] || null);
             this.cdr.markForCheck();
         });
-        this.weight.set(componentModel.properties['weight'] || null);
-        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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ComponentHostComponent, isStandalone: true, selector: "a2ui-v09-component-host", inputs: { componentKey: { classPropertyName: "componentKey", publicName: "componentKey", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.flex": "this.flexStyle" }, styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ComponentHostComponent, isStandalone: true, selector: "a2ui-v09-component-host", inputs: { componentKey: { classPropertyName: "componentKey", publicName: "componentKey", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
     @if (componentType) {
       <ng-container
         *ngComponentOutlet="
@@ -387,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) {
@@ -406,10 +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 }] }], flexStyle: [{
-                type: HostBinding,
-                args: ['style.flex']
-            }] } });
+        }], 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
@@ -444,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>
@@ -457,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>
@@ -470,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
  *
@@ -513,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;
@@ -585,12 +620,46 @@ 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 {
+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();
     }
+    /**
+     * 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: "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: { flexStyle: [{
+                type: HostBinding,
+                args: ['style.flex']
+            }], primaryColorStyle: [{
+                type: HostBinding,
+                args: ['style.--a2ui-color-primary']
+            }] } });
 
 /**
  * Copyright 2026 Google LLC
@@ -624,17 +693,6 @@ class BasicCatalogComponent {
  * - Font sizes: `--a2ui-font-size-2xl`, `--a2ui-font-size-xl`, `--a2ui-font-size-l`, `--a2ui-font-size-m`, `--a2ui-font-size-s`, `--a2ui-font-size-xs`.
  */
 class TextComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `text`: The string content to display.
-     * - `variant`: A hint for the base text style ('h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     markdownRenderer = inject(MarkdownRenderer);
     variant = computed$1(() => this.props()['variant']?.value() || 'body', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     text = computed$1(() => this.props()['text']?.value() || '', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
@@ -675,18 +733,12 @@ class TextComponent extends BasicCatalogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: TextComponent, isStandalone: true, selector: "a2ui-v09-text", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()">
-    </span>
-  `, isInline: true, styles: [":host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6,:host ::ng-deep .a2ui-text ol,:host ::ng-deep .a2ui-text ul,:host ::ng-deep .a2ui-text li,:host ::ng-deep .a2ui-text blockquote,:host ::ng-deep .a2ui-text pre{margin:var(--_a2ui-text-margin, 0)}:host ::ng-deep .a2ui-text{color:var(--_a2ui-text-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background)))}:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6{font-family:var(--a2ui-font-family-title, inherit);line-height:var(--a2ui-line-height-headings, 1.2)}:host ::ng-deep .a2ui-text h1{font-size:var(--a2ui-font-size-2xl)}:host ::ng-deep .a2ui-text h2{font-size:var(--a2ui-font-size-xl)}:host ::ng-deep .a2ui-text h3{font-size:var(--a2ui-font-size-l)}:host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h4{font-size:var(--a2ui-font-size-m)}:host ::ng-deep .a2ui-text h5{font-size:var(--a2ui-font-size-s)}:host ::ng-deep .a2ui-text p{line-height:var(--a2ui-line-height-body, 1.5)}:host ::ng-deep .a2ui-text.caption{font-size:var(--a2ui-font-size-xs);color:var(--a2ui-text-caption-color, light-dark(#666, #aaa))}:host ::ng-deep .a2ui-text a{color:var(--a2ui-text-a-color, inherit);font-weight:var(--a2ui-text-a-font-weight, inherit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: TextComponent, isStandalone: true, selector: "a2ui-v09-text", usesInheritance: true, ngImport: i0, template: ` <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()"> </span> `, isInline: true, styles: [":host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6,:host ::ng-deep .a2ui-text ol,:host ::ng-deep .a2ui-text ul,:host ::ng-deep .a2ui-text li,:host ::ng-deep .a2ui-text blockquote,:host ::ng-deep .a2ui-text pre{margin:var(--_a2ui-text-margin, 0)}:host ::ng-deep .a2ui-text{color:var( --_a2ui-text-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background)) )}:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6{font-family:var(--a2ui-font-family-title, inherit);line-height:var(--a2ui-line-height-headings, 1.2)}:host ::ng-deep .a2ui-text h1{font-size:var(--a2ui-font-size-2xl)}:host ::ng-deep .a2ui-text h2{font-size:var(--a2ui-font-size-xl)}:host ::ng-deep .a2ui-text h3{font-size:var(--a2ui-font-size-l)}:host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h4{font-size:var(--a2ui-font-size-m)}:host ::ng-deep .a2ui-text h5{font-size:var(--a2ui-font-size-s)}:host ::ng-deep .a2ui-text p{line-height:var(--a2ui-line-height-body, 1.5)}:host ::ng-deep .a2ui-text.caption{font-size:var(--a2ui-font-size-xs);color:var(--a2ui-text-caption-color, light-dark(#666, #aaa))}:host ::ng-deep .a2ui-text a{color:var(--a2ui-text-a-color, inherit);font-weight:var(--a2ui-text-a-font-weight, inherit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a2ui-v09-text', standalone: true, template: `
-    <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()">
-    </span>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6,:host ::ng-deep .a2ui-text ol,:host ::ng-deep .a2ui-text ul,:host ::ng-deep .a2ui-text li,:host ::ng-deep .a2ui-text blockquote,:host ::ng-deep .a2ui-text pre{margin:var(--_a2ui-text-margin, 0)}:host ::ng-deep .a2ui-text{color:var(--_a2ui-text-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background)))}:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6{font-family:var(--a2ui-font-family-title, inherit);line-height:var(--a2ui-line-height-headings, 1.2)}:host ::ng-deep .a2ui-text h1{font-size:var(--a2ui-font-size-2xl)}:host ::ng-deep .a2ui-text h2{font-size:var(--a2ui-font-size-xl)}:host ::ng-deep .a2ui-text h3{font-size:var(--a2ui-font-size-l)}:host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h4{font-size:var(--a2ui-font-size-m)}:host ::ng-deep .a2ui-text h5{font-size:var(--a2ui-font-size-s)}:host ::ng-deep .a2ui-text p{line-height:var(--a2ui-line-height-body, 1.5)}:host ::ng-deep .a2ui-text.caption{font-size:var(--a2ui-font-size-xs);color:var(--a2ui-text-caption-color, light-dark(#666, #aaa))}:host ::ng-deep .a2ui-text a{color:var(--a2ui-text-a-color, inherit);font-weight:var(--a2ui-text-a-font-weight, inherit)}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+            args: [{ selector: 'a2ui-v09-text', standalone: true, template: ` <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()"> </span> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6,:host ::ng-deep .a2ui-text ol,:host ::ng-deep .a2ui-text ul,:host ::ng-deep .a2ui-text li,:host ::ng-deep .a2ui-text blockquote,:host ::ng-deep .a2ui-text pre{margin:var(--_a2ui-text-margin, 0)}:host ::ng-deep .a2ui-text{color:var( --_a2ui-text-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background)) )}:host ::ng-deep .a2ui-text h1,:host ::ng-deep .a2ui-text h2,:host ::ng-deep .a2ui-text h3,:host ::ng-deep .a2ui-text h4,:host ::ng-deep .a2ui-text h5,:host ::ng-deep .a2ui-text h6{font-family:var(--a2ui-font-family-title, inherit);line-height:var(--a2ui-line-height-headings, 1.2)}:host ::ng-deep .a2ui-text h1{font-size:var(--a2ui-font-size-2xl)}:host ::ng-deep .a2ui-text h2{font-size:var(--a2ui-font-size-xl)}:host ::ng-deep .a2ui-text h3{font-size:var(--a2ui-font-size-l)}:host ::ng-deep .a2ui-text p,:host ::ng-deep .a2ui-text h4{font-size:var(--a2ui-font-size-m)}:host ::ng-deep .a2ui-text h5{font-size:var(--a2ui-font-size-s)}:host ::ng-deep .a2ui-text p{line-height:var(--a2ui-line-height-body, 1.5)}:host ::ng-deep .a2ui-text.caption{font-size:var(--a2ui-font-size-xs);color:var(--a2ui-text-caption-color, light-dark(#666, #aaa))}:host ::ng-deep .a2ui-text a{color:var(--a2ui-text-a-color, inherit);font-weight:var(--a2ui-text-a-font-weight, inherit)}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Copyright 2026 Google LLC
@@ -751,35 +803,20 @@ const ALIGN_MAP = {
  * - `--a2ui-row-gap`: Controls the gap between items in the row. Defaults to `--a2ui-spacing-m` (16px).
  */
 class RowComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `children`: A list of component IDs OR a repeating collection definition.
-     * - `justify`: Flexbox justify-content value (e.g., 'flex-start', 'center').
-     * - `align`: Flexbox align-items value (e.g., 'flex-start', 'center').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     justify = computed$1(() => {
         const val = this.props()['justify']?.value();
-        return val ? (JUSTIFY_MAP[val] || val) : undefined;
+        return val ? JUSTIFY_MAP[val] || val : undefined;
     }, ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
     align = computed$1(() => {
         const val = this.props()['align']?.value();
-        return val ? (ALIGN_MAP[val] || val) : undefined;
+        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())
@@ -792,29 +829,26 @@ 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", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, 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: `
-      @if (!isRepeating()) {
-        @for (child of normalizedChildren(); track child.id) {
-          <a2ui-v09-component-host
-            [componentKey]="child"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    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: `
+    @if (!isRepeating()) {
+      @for (child of normalizedChildren(); track child.id) {
+        <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
+        </a2ui-v09-component-host>
       }
+    }
 
-      @if (isRepeating()) {
-        @for (item of children(); track item; let i = $index) {
-          <a2ui-v09-component-host
-            [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    @if (isRepeating()) {
+      @for (item of children(); track item; let i = $index) {
+        <a2ui-v09-component-host
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
+          [surfaceId]="surfaceId()"
+        >
+        </a2ui-v09-component-host>
       }
+    }
   `, isInline: true, 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: RowComponent, decorators: [{
@@ -828,32 +862,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         '[style.flex-direction]': '"row"',
                         '[style.gap]': '"var(--a2ui-row-gap, var(--a2ui-spacing-m, 16px))"',
                         '[style.justify-content]': 'justify()',
-                        '[style.align-items]': 'align()'
+                        '[style.align-items]': 'align()',
                     },
                     template: `
-      @if (!isRepeating()) {
-        @for (child of normalizedChildren(); track child.id) {
-          <a2ui-v09-component-host
-            [componentKey]="child"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    @if (!isRepeating()) {
+      @for (child of normalizedChildren(); track child.id) {
+        <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
+        </a2ui-v09-component-host>
       }
+    }
 
-      @if (isRepeating()) {
-        @for (item of children(); track item; let i = $index) {
-          <a2ui-v09-component-host
-            [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    @if (isRepeating()) {
+      @for (item of children(); track item; let i = $index) {
+        <a2ui-v09-component-host
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
+          [surfaceId]="surfaceId()"
+        >
+        </a2ui-v09-component-host>
       }
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -880,35 +911,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-column-gap`: Controls the gap between items in the column. Defaults to `--a2ui-spacing-m` (16px).
  */
 class ColumnComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `children`: A list of component IDs OR a repeating collection definition.
-     * - `justify`: Flexbox justify-content value (e.g., 'flex-start', 'center').
-     * - `align`: Flexbox align-items value (e.g., 'flex-start', 'center').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     justify = computed$1(() => {
         const val = this.props()['justify']?.value();
-        return val ? (JUSTIFY_MAP[val] || val) : undefined;
+        return val ? JUSTIFY_MAP[val] || val : undefined;
     }, ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
     align = computed$1(() => {
         const val = this.props()['align']?.value();
-        return val ? (ALIGN_MAP[val] || val) : undefined;
+        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())
@@ -921,29 +937,26 @@ 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", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, 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: `
-      @if (!isRepeating()) {
-        @for (child of normalizedChildren(); track child.id) {
-          <a2ui-v09-component-host
-            [componentKey]="child"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    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: `
+    @if (!isRepeating()) {
+      @for (child of normalizedChildren(); track child.id) {
+        <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
+        </a2ui-v09-component-host>
       }
+    }
 
-      @if (isRepeating()) {
-        @for (item of children(); track item; let i = $index) {
-          <a2ui-v09-component-host
-            [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    @if (isRepeating()) {
+      @for (item of children(); track item; let i = $index) {
+        <a2ui-v09-component-host
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
+          [surfaceId]="surfaceId()"
+        >
+        </a2ui-v09-component-host>
       }
+    }
   `, isInline: true, 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: ColumnComponent, decorators: [{
@@ -958,32 +971,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         '[style.width]': '"100%"',
                         '[style.gap]': '"var(--a2ui-column-gap, var(--a2ui-spacing-m, 16px))"',
                         '[style.justify-content]': 'justify()',
-                        '[style.align-items]': 'align()'
+                        '[style.align-items]': 'align()',
                     },
                     template: `
-      @if (!isRepeating()) {
-        @for (child of normalizedChildren(); track child.id) {
-          <a2ui-v09-component-host
-            [componentKey]="child"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    @if (!isRepeating()) {
+      @for (child of normalizedChildren(); track child.id) {
+        <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
+        </a2ui-v09-component-host>
       }
+    }
 
-      @if (isRepeating()) {
-        @for (item of children(); track item; let i = $index) {
-          <a2ui-v09-component-host
-            [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
-            [surfaceId]="surfaceId()"
-          >
-          </a2ui-v09-component-host>
-        }
+    @if (isRepeating()) {
+      @for (item of children(); track item; let i = $index) {
+        <a2ui-v09-component-host
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
+          [surfaceId]="surfaceId()"
+        >
+        </a2ui-v09-component-host>
       }
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1016,27 +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 {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `child`: The ID of the component to render inside the button.
-     * - `variant`: Button style variant ('default', 'primary', 'borderless').
-     * - `action`: The A2UI action to dispatch on click.
-     * - `checks`: Optional validation rules.
-     */
-    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 */ []));
-    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);
@@ -1045,7 +1041,7 @@ class ButtonComponent extends BasicCatalogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "a2ui-v09-button", 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 } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "a2ui-v09-button", usesInheritance: true, ngImport: i0, template: `
     <button
       [type]="variant() === 'primary' ? 'submit' : 'button'"
       [class]="'a2ui-button ' + variant()"
@@ -1053,14 +1049,11 @@ class ButtonComponent extends BasicCatalogComponent {
       [disabled]="props()['isValid']?.value() === false"
     >
       @if (child()) {
-        <a2ui-v09-component-host
-          [componentKey]="child()!"
-          [surfaceId]="surfaceId()"
-        >
+        <a2ui-v09-component-host [componentKey]="child()!" [surfaceId]="surfaceId()">
         </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,
@@ -1072,15 +1065,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [disabled]="props()['isValid']?.value() === false"
     >
       @if (child()) {
-        <a2ui-v09-component-host
-          [componentKey]="child()!"
-          [surfaceId]="surfaceId()"
-        >
+        <a2ui-v09-component-host [componentKey]="child()!" [surfaceId]="surfaceId()">
         </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"] }]
-        }], 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 }] }] } });
+  `, 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"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1115,20 +1105,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-textfield-label-font-weight`: Controls the font weight of the label.
  */
 class TextFieldComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `value`: The current string value of the input.
-     * - `label`: Optional label text to display above the input.
-     * - `placeholder`: Hint text shown when the input is empty.
-     * - `variant`: Input type variant ('default', 'obscured' (password), 'number').
-     * - `checks`: Optional validation rules.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     label = computed$1(() => this.props()['label']?.value(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     value = computed$1(() => this.props()['value']?.value() || '', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     placeholder = computed$1(() => this.props()['placeholder']?.value() || '', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -1150,7 +1126,7 @@ class TextFieldComponent extends BasicCatalogComponent {
         this.props()['value']?.onUpdate(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TextFieldComponent, isStandalone: true, selector: "a2ui-v09-text-field", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TextFieldComponent, isStandalone: true, selector: "a2ui-v09-text-field", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-text-field-container">
       @if (label()) {
         <label>{{ label() }}</label>
@@ -1166,7 +1142,7 @@ class TextFieldComponent extends BasicCatalogComponent {
         <div class="a2ui-error-message">{{ message }}</div>
       }
     </div>
-  `, isInline: true, styles: [".a2ui-text-field-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-spacing-xs, 4px)}label{font-size:var(--a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-textfield-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}input{padding:var(--a2ui-textfield-padding, 8px);border:var(--a2ui-textfield-border, 1px solid var(--a2ui-color-border, #ccc));border-radius:var(--a2ui-textfield-border-radius, 4px);background-color:var(--a2ui-color-input, #fff);color:var(--a2ui-color-on-input, #333)}input:focus{border-color:var(--a2ui-textfield-color-border-focus, var(--a2ui-color-primary, #17e));outline:none}input.invalid{border-color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red))}.a2ui-error-message{color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red));font-size:var(--a2ui-font-size-xs, 12px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-text-field-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-spacing-xs, 4px)}label{font-size:var( --a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)) );font-weight:var(--a2ui-textfield-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}input{padding:var(--a2ui-textfield-padding, 8px);border:var(--a2ui-textfield-border, 1px solid var(--a2ui-color-border, #ccc));border-radius:var(--a2ui-textfield-border-radius, 4px);background-color:var(--a2ui-color-input, #fff);color:var(--a2ui-color-on-input, #333)}input:focus{border-color:var(--a2ui-textfield-color-border-focus, var(--a2ui-color-primary, #17e));outline:none}input.invalid{border-color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red))}.a2ui-error-message{color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red));font-size:var(--a2ui-font-size-xs, 12px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
@@ -1186,8 +1162,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <div class="a2ui-error-message">{{ message }}</div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-text-field-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-spacing-xs, 4px)}label{font-size:var(--a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-textfield-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}input{padding:var(--a2ui-textfield-padding, 8px);border:var(--a2ui-textfield-border, 1px solid var(--a2ui-color-border, #ccc));border-radius:var(--a2ui-textfield-border-radius, 4px);background-color:var(--a2ui-color-input, #fff);color:var(--a2ui-color-on-input, #333)}input:focus{border-color:var(--a2ui-textfield-color-border-focus, var(--a2ui-color-primary, #17e));outline:none}input.invalid{border-color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red))}.a2ui-error-message{color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red));font-size:var(--a2ui-font-size-xs, 12px)}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-text-field-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-spacing-xs, 4px)}label{font-size:var( --a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)) );font-weight:var(--a2ui-textfield-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}input{padding:var(--a2ui-textfield-padding, 8px);border:var(--a2ui-textfield-border, 1px solid var(--a2ui-color-border, #ccc));border-radius:var(--a2ui-textfield-border-radius, 4px);background-color:var(--a2ui-color-input, #fff);color:var(--a2ui-color-on-input, #333)}input:focus{border-color:var(--a2ui-textfield-color-border-focus, var(--a2ui-color-primary, #17e));outline:none}input.invalid{border-color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red))}.a2ui-error-message{color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red));font-size:var(--a2ui-font-size-xs, 12px)}\n"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1218,32 +1194,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-image-header-size`: Height of header variant.
  */
 class ImageComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `url`: The absolute URL of the image.
-     * - `description`: Accessibility text for the image.
-     * - `fit`: Object-fit mode ('cover', 'contain', 'fill', 'none', 'scale-down').
-     * - `variant`: Style variant ('default', 'circle', 'rounded', 'icon', 'avatar', 'smallFeature', 'mediumFeature', 'largeFeature', 'header').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     url = computed$1(() => this.props()['url']?.value(), ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
     description = computed$1(() => this.props()['description']?.value() || '', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     fit = computed$1(() => this.props()['fit']?.value() || 'cover', ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
     variant = computed$1(() => this.props()['variant']?.value() || 'default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ImageComponent, isStandalone: true, selector: "a2ui-v09-image", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ImageComponent, isStandalone: true, selector: "a2ui-v09-image", usesInheritance: true, ngImport: i0, template: `
     <img
       [src]="url()"
       [alt]="description()"
       [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,
@@ -1254,8 +1217,8 @@ 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"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, 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"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1272,6 +1235,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const ICON_NAME_OVERRIDES = {
+    play: 'play_arrow',
+    rewind: 'fast_rewind',
+    favoriteOff: 'favorite_border',
+    starOff: 'star_border',
+};
 /**
  * Angular implementation of the A2UI Icon component (v0.9).
  *
@@ -1284,62 +1253,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-icon-font-variation-settings`: Controls font variation settings (e.g. FILL).
  */
 class IconComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `name`: The name of the icon (e.g., 'home', 'settings') OR an object
-     *           with a `path` property for SVG icons.
-     * - `color`: The CSS color to apply to the icon.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     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')
             return '';
+        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", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (isPath()) {
+    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 (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()">
         {{ iconName() }}
       </i>
     }
-  `, isInline: true, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var(--a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)));font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var( --a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)) );font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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()">
         {{ iconName() }}
       </i>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var(--a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)));font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var( --a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)) );font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1365,21 +1327,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-video-border-radius`: Controls the border radius of the video element.
  */
 class VideoComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `url`: The absolute URL of the video file.
-     * - `posterUrl`: The URL of an image to show before the video starts.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     url = computed$1(() => this.props()['url']?.value(), ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
     posterUrl = computed$1(() => this.props()['posterUrl']?.value(), ...(ngDevMode ? [{ debugName: "posterUrl" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VideoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: VideoComponent, isStandalone: true, selector: "a2ui-v09-video", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: VideoComponent, isStandalone: true, selector: "a2ui-v09-video", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-video-container">
       <video
         [attr.src]="url() || null"
@@ -1406,7 +1357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       </video>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-video-container{width:100%;max-width:100%}.a2ui-video{width:100%;height:auto;display:block;border-radius:var(--a2ui-video-border-radius, 0)}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1434,21 +1385,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-audioplayer-padding`: Controls the padding. Defaults to `0`.
  */
 class AudioPlayerComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `url`: The absolute URL of the audio file.
-     * - `description`: Optional text to display above the player.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input(...(ngDevMode ? [undefined, { debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input(...(ngDevMode ? [undefined, { debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     description = computed$1(() => this.props()['description']?.value(), ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     url = computed$1(() => this.props()['url']?.value(), ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioPlayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AudioPlayerComponent, isStandalone: true, selector: "a2ui-v09-audio-player", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AudioPlayerComponent, isStandalone: true, selector: "a2ui-v09-audio-player", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-audio-player">
       @if (description()) {
         <div class="a2ui-audio-description">
@@ -1475,7 +1415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       </audio>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-audio-player{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, .25rem);background:var(--a2ui-audioplayer-background, transparent);border-radius:var(--a2ui-audioplayer-border-radius, 0);padding:var(--a2ui-audioplayer-padding, 0);width:100%}.a2ui-audio-description{font-size:var(--a2ui-font-size-s, .875rem);color:var(--a2ui-text-caption-color, light-dark(#666, #aaa))}.a2ui-audio{width:100%}\n"] }]
-        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: false }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1496,31 +1436,16 @@ 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.
  * - `--a2ui-list-padding`: Controls the padding (applied to padding-inline-start).
  */
 class ListComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `children`: A list of component IDs to render as list items.
-     * - `listStyle`: The type of list ('ordered', 'unordered', 'none').
-     * - `orientation`: The layout direction ('vertical', 'horizontal').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     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')
@@ -1541,42 +1466,33 @@ class ListComponent extends BasicCatalogComponent {
      */
     trackBy = (index, item) => `${item.basePath}/${item.id}`;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ListComponent, isStandalone: true, selector: "a2ui-v09-list", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    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()"
-              >
+              <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             </li>
           }
         </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()"
-              >
+              <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             </li>
           }
         </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()"
-              >
+              <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             </div>
           }
@@ -1590,39 +1506,30 @@ 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()"
-              >
+              <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             </li>
           }
         </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()"
-              >
+              <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             </li>
           }
         </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()"
-              >
+              <a2ui-v09-component-host [componentKey]="child" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             </div>
           }
@@ -1630,7 +1537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       }
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-list{display:flex;padding-inline-start:var(--a2ui-list-padding, var(--a2ui-spacing-l, 24px));margin:0}.a2ui-list.vertical{flex-direction:column;gap:var(--a2ui-list-gap, var(--a2ui-spacing-s, 8px))}.a2ui-list.horizontal{flex-direction:row;gap:var(--a2ui-list-gap, var(--a2ui-spacing-m, 16px));list-style-position:inside}.a2ui-list-item-none{display:block}.horizontal .a2ui-list-item-none{display:inline-block}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1661,44 +1568,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-card-margin`: Controls the margin.
  */
 class CardComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `child`: The component ID to render inside the card.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     child = computed$1(() => this.props()['child']?.value(), ...(ngDevMode ? [{ debugName: "child" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "a2ui-v09-card", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "a2ui-v09-card", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-card">
       @if (child()) {
-        <a2ui-v09-component-host
-          [componentKey]="child()!"
-          [surfaceId]="surfaceId()"
-        >
+        <a2ui-v09-component-host [componentKey]="child()!" [surfaceId]="surfaceId()">
         </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,
             args: [{ selector: 'a2ui-v09-card', standalone: true, imports: [ComponentHostComponent], template: `
     <div class="a2ui-card">
       @if (child()) {
-        <a2ui-v09-component-host
-          [componentKey]="child()!"
-          [surfaceId]="surfaceId()"
-        >
+        <a2ui-v09-component-host [componentKey]="child()!" [surfaceId]="surfaceId()">
         </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"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, 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"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1730,33 +1621,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-tabs-content-padding`: Controls the padding of the tab content.
  */
 class TabsComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `tabs`: A list of tab objects, each containing a `label` and `content` ID.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     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);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TabsComponent, isStandalone: true, selector: "a2ui-v09-tabs", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TabsComponent, isStandalone: true, selector: "a2ui-v09-tabs", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-tabs">
       <div class="a2ui-tab-bar">
         @for (tab of tabs(); track tab; let i = $index) {
@@ -1765,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>
@@ -1792,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>
@@ -1807,7 +1688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       }
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-tabs{display:flex;flex-direction:column;width:100%}.a2ui-tab-bar{display:flex;border-bottom:var(--a2ui-tabs-border, 2px solid var(--a2ui-color-border, #eee));gap:var(--a2ui-spacing-m, 16px)}.a2ui-tab-button{padding:var(--a2ui-spacing-s, 8px) var(--a2ui-spacing-m, 16px);border:none;background:var(--a2ui-tabs-header-background, transparent);cursor:pointer;font-weight:500;color:var(--a2ui-tabs-header-color, var(--a2ui-text-caption-color, #666));border-bottom:2px solid transparent;margin-bottom:-2px}.a2ui-tab-button.active{background:var(--a2ui-tabs-header-background-active, transparent);color:var(--a2ui-tabs-header-color-active, var(--a2ui-color-primary, #007bff));border-bottom:2px solid var(--a2ui-color-primary, #007bff)}.a2ui-tab-content{padding:var(--a2ui-tabs-content-padding, var(--a2ui-spacing-m, 16px) 0)}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1837,17 +1718,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-modal-backdrop-bg`: Controls the background of the backdrop.
  */
 class ModalComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `trigger`: The ID of the component that opens the modal.
-     * - `content`: The ID of the component to display inside the modal.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     trigger = computed$1(() => this.props()['trigger']?.value(), ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     content = computed$1(() => this.props()['content']?.value(), ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
@@ -1858,14 +1728,11 @@ class ModalComponent extends BasicCatalogComponent {
         this.isOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ModalComponent, isStandalone: true, selector: "a2ui-v09-modal", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ModalComponent, isStandalone: true, selector: "a2ui-v09-modal", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-modal-wrapper">
       <div (click)="openModal()" class="a2ui-modal-trigger">
         @if (trigger()) {
-          <a2ui-v09-component-host
-            [componentKey]="trigger()!"
-            [surfaceId]="surfaceId()"
-          >
+          <a2ui-v09-component-host [componentKey]="trigger()!" [surfaceId]="surfaceId()">
           </a2ui-v09-component-host>
         }
       </div>
@@ -1875,10 +1742,7 @@ class ModalComponent extends BasicCatalogComponent {
           <div class="a2ui-modal-content" (click)="$event.stopPropagation()">
             <button class="a2ui-modal-close" (click)="closeModal()">&times;</button>
             @if (content()) {
-              <a2ui-v09-component-host
-                [componentKey]="content()!"
-                [surfaceId]="surfaceId()"
-              >
+              <a2ui-v09-component-host [componentKey]="content()!" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             }
           </div>
@@ -1893,10 +1757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     <div class="a2ui-modal-wrapper">
       <div (click)="openModal()" class="a2ui-modal-trigger">
         @if (trigger()) {
-          <a2ui-v09-component-host
-            [componentKey]="trigger()!"
-            [surfaceId]="surfaceId()"
-          >
+          <a2ui-v09-component-host [componentKey]="trigger()!" [surfaceId]="surfaceId()">
           </a2ui-v09-component-host>
         }
       </div>
@@ -1906,10 +1767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           <div class="a2ui-modal-content" (click)="$event.stopPropagation()">
             <button class="a2ui-modal-close" (click)="closeModal()">&times;</button>
             @if (content()) {
-              <a2ui-v09-component-host
-                [componentKey]="content()!"
-                [surfaceId]="surfaceId()"
-              >
+              <a2ui-v09-component-host [componentKey]="content()!" [surfaceId]="surfaceId()">
               </a2ui-v09-component-host>
             }
           </div>
@@ -1917,7 +1775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       }
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-modal-wrapper{display:inline-block}.a2ui-modal-trigger{cursor:pointer}.a2ui-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--a2ui-modal-backdrop-bg, rgba(0, 0, 0, .5));display:flex;justify-content:center;align-items:center;z-index:1000}.a2ui-modal-content{background:var(--a2ui-modal-background, var(--a2ui-color-surface, white));padding:var(--a2ui-modal-padding, var(--a2ui-spacing-xl, 32px));border-radius:var(--a2ui-modal-border-radius, var(--a2ui-border-radius, 8px));position:relative;min-width:300px;max-width:80%;max-height:80%;overflow-y:auto;box-shadow:var(--a2ui-modal-box-shadow, 0 10px 25px rgba(0, 0, 0, .2))}.a2ui-modal-close{position:absolute;top:10px;right:15px;border:none;background:none;font-size:24px;cursor:pointer;color:var(--a2ui-text-caption-color, #999)}.a2ui-modal-close:hover{color:var(--a2ui-text-color, #333)}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1944,25 +1802,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-divider-spacing`: Controls the margin around the divider.
  */
 class DividerComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `axis`: The orientation of the divider ('horizontal' (default) or 'vertical').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     axis = computed$1(() => this.props()['axis']?.value() ?? 'horizontal', ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: DividerComponent, isStandalone: true, selector: "a2ui-v09-divider", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "axis() === \"horizontal\" ? \"100%\" : \"auto\"" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: DividerComponent, isStandalone: true, selector: "a2ui-v09-divider", host: { properties: { "style.display": "\"block\"", "style.width": "axis() === \"horizontal\" ? \"100%\" : \"auto\"" } }, usesInheritance: true, ngImport: i0, template: `
     <hr
       class="a2ui-divider"
       [class.horizontal]="axis() === 'horizontal'"
       [class.vertical]="axis() === 'vertical'"
     />
-  `, isInline: true, styles: [".a2ui-divider{border:0;border-top:var(--a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));margin:var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px)) 0;width:100%}.a2ui-divider.vertical{width:var(--a2ui-border-width, 1px);height:100%;margin:0 var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px));border-top:0;border-left:var(--a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-divider{border:0;border-top:var( --a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );margin:var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px)) 0;width:100%}.a2ui-divider.vertical{width:var(--a2ui-border-width, 1px);height:100%;margin:0 var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px));border-top:0;border-left:var( --a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
@@ -1975,8 +1823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [class.horizontal]="axis() === 'horizontal'"
       [class.vertical]="axis() === 'vertical'"
     />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-divider{border:0;border-top:var(--a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));margin:var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px)) 0;width:100%}.a2ui-divider.vertical{width:var(--a2ui-border-width, 1px);height:100%;margin:0 var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px));border-top:0;border-left:var(--a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc))}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-divider{border:0;border-top:var( --a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) );margin:var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px)) 0;width:100%}.a2ui-divider.vertical{width:var(--a2ui-border-width, 1px);height:100%;margin:0 var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px));border-top:0;border-left:var( --a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc) )}\n"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -2011,17 +1859,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-checkbox-color-error`: Controls the color for error states.
  */
 class CheckBoxComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `label`: The text to display next to the checkbox.
-     * - `value`: Boolean indicating whether the checkbox is checked.
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     value = computed$1(() => this.props()['value']?.value() === true, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     label = computed$1(() => this.props()['label']?.value(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     handleChange(event) {
@@ -2029,7 +1866,7 @@ class CheckBoxComponent extends BasicCatalogComponent {
         this.props()['value']?.onUpdate(checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CheckBoxComponent, isStandalone: true, selector: "a2ui-v09-check-box", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: CheckBoxComponent, isStandalone: true, selector: "a2ui-v09-check-box", usesInheritance: true, ngImport: i0, template: `
     <label class="a2ui-check-box-label">
       <input
         type="checkbox"
@@ -2039,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,
@@ -2053,8 +1890,8 @@ 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"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, 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"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -2088,21 +1925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-choicepicker-chip-background-selected`: Controls background of selected chips.
  */
 class ChoicePickerComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `value`: The currently selected value(s).
-     * - `choices` or `options`: List of choice objects (label and value).
-     * - `displayStyle`: How to render the choices ('default' or 'chips').
-     * - `variant`: Selection mode ('singleSelection' or 'multipleSelection').
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     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() {
@@ -2138,46 +1962,46 @@ class ChoicePickerComponent extends BasicCatalogComponent {
         }
         else {
             if (active) {
-                this.props()['value']?.onUpdate(value);
+                this.props()['value']?.onUpdate([value]);
             }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChoicePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChoicePickerComponent, isStandalone: true, selector: "a2ui-v09-choice-picker", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChoicePickerComponent, isStandalone: true, selector: "a2ui-v09-choice-picker", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-choice-picker">
       <!-- 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>
       }
     </div>
-  `, isInline: true, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem));border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e));color:var(--a2ui-color-on-primary, #fff);border-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var( --a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem) );border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var( --a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e) );color:var(--a2ui-color-on-primary, #fff);border-color:var( --a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChoicePickerComponent, decorators: [{
             type: Component,
@@ -2186,37 +2010,37 @@ 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>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem));border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e));color:var(--a2ui-color-on-primary, #fff);border-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e))}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var( --a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem) );border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var( --a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e) );color:var(--a2ui-color-on-primary, #fff);border-color:var( --a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e) )}\n"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -2246,20 +2070,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-slider-track-color`: Controls the background of the track.
  */
 class SliderComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `value`: The current numeric value.
-     * - `label`: Label text to display.
-     * - `min`: Minimum value (default: 0).
-     * - `max`: Maximum value (default: 100).
-     * - `step`: Increment step (default: 1).
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     label = computed$1(() => this.props()['label']?.value(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     value = computed$1(() => this.props()['value']?.value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     min = computed$1(() => this.props()['min']?.value() ?? 0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
@@ -2270,7 +2080,7 @@ class SliderComponent extends BasicCatalogComponent {
         this.props()['value']?.onUpdate(val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SliderComponent, isStandalone: true, selector: "a2ui-v09-slider", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: SliderComponent, isStandalone: true, selector: "a2ui-v09-slider", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-slider-container">
       <div class="a2ui-slider-header">
         <span class="a2ui-slider-label">{{ label() }}</span>
@@ -2281,12 +2091,12 @@ class SliderComponent extends BasicCatalogComponent {
         [min]="min()"
         [max]="max()"
         [step]="step()"
-        [value]="value() ?? min()"
+        [value]="value()"
         (input)="handleInput($event)"
         class="a2ui-slider"
       />
     </div>
-  `, isInline: true, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var(--a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var( --a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)) );font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -2301,13 +2111,13 @@ 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"
       />
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var(--a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var( --a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)) );font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -2340,19 +2150,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--a2ui-datetimeinput-label-font-weight`: Controls the font weight of the label.
  */
 class DateTimeInputComponent extends BasicCatalogComponent {
-    /**
-     * Reactive properties resolved from the A2UI {@link ComponentModel}.
-     *
-     * Expected properties:
-     * - `value`: The current ISO date/time string.
-     * - `label`: Optional label text.
-     * - `enableDate`: Whether to show the date picker (default: true).
-     * - `enableTime`: Whether to show the time picker (default: false).
-     */
-    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
-    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     label = computed$1(() => this.props()['label']?.value(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     enableDate = computed$1(() => this.props()['enableDate']?.value() ?? true, ...(ngDevMode ? [{ debugName: "enableDate" }] : /* istanbul ignore next */ []));
     enableTime = computed$1(() => this.props()['enableTime']?.value() ?? false, ...(ngDevMode ? [{ debugName: "enableTime" }] : /* istanbul ignore next */ []));
@@ -2389,7 +2186,7 @@ class DateTimeInputComponent extends BasicCatalogComponent {
         this.props()['value']?.onUpdate(`${date}T${time}:00`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DateTimeInputComponent, isStandalone: true, selector: "a2ui-v09-date-time-input", 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: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DateTimeInputComponent, isStandalone: true, selector: "a2ui-v09-date-time-input", usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-date-time-container">
       @if (label()) {
         <label class="a2ui-date-time-label">
@@ -2415,7 +2212,7 @@ class DateTimeInputComponent extends BasicCatalogComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);width:100%}.a2ui-date-time-label{font-size:var(--a2ui-datetimeinput-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-datetimeinput-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-date-time-inputs{display:flex;gap:var(--a2ui-spacing-s, 8px);width:100%}.a2ui-date-time-input{padding:var(--a2ui-datetimeinput-padding, 8px);border-radius:var(--a2ui-datetimeinput-border-radius, 4px);border:var(--a2ui-datetimeinput-border, 1px solid var(--a2ui-color-border, #ccc));background-color:var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff));color:var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333));font-family:inherit;flex:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);width:100%}.a2ui-date-time-label{font-size:var( --a2ui-datetimeinput-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)) );font-weight:var(--a2ui-datetimeinput-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-date-time-inputs{display:flex;gap:var(--a2ui-spacing-s, 8px);width:100%}.a2ui-date-time-input{padding:var(--a2ui-datetimeinput-padding, 8px);border-radius:var(--a2ui-datetimeinput-border-radius, 4px);border:var(--a2ui-datetimeinput-border, 1px solid var(--a2ui-color-border, #ccc));background-color:var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff));color:var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333));font-family:inherit;flex:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
@@ -2445,8 +2242,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);width:100%}.a2ui-date-time-label{font-size:var(--a2ui-datetimeinput-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-datetimeinput-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-date-time-inputs{display:flex;gap:var(--a2ui-spacing-s, 8px);width:100%}.a2ui-date-time-input{padding:var(--a2ui-datetimeinput-padding, 8px);border-radius:var(--a2ui-datetimeinput-border-radius, 4px);border:var(--a2ui-datetimeinput-border, 1px solid var(--a2ui-color-border, #ccc));background-color:var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff));color:var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333));font-family:inherit;flex:1}\n"] }]
-        }], 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: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);width:100%}.a2ui-date-time-label{font-size:var( --a2ui-datetimeinput-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)) );font-weight:var(--a2ui-datetimeinput-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-date-time-inputs{display:flex;gap:var(--a2ui-spacing-s, 8px);width:100%}.a2ui-date-time-input{padding:var(--a2ui-datetimeinput-padding, 8px);border-radius:var(--a2ui-datetimeinput-border-radius, 4px);border:var(--a2ui-datetimeinput-border, 1px solid var(--a2ui-color-border, #ccc));background-color:var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff));color:var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333));font-family:inherit;flex:1}\n"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -2465,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.
@@ -2558,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