@a2ui/angular 0.9.0 → 0.9.1

package/fesm2022/a2ui-angular-src-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, ChangeDetectionStrategy, Component, computed as computed$1, HostBinding, Directive, effect as effect$1 } 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';
@@ -294,12 +294,6 @@ 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() {
@@ -352,11 +346,8 @@ class ComponentHostComponent {
         // component to react when a new prop is added after creation.
         const onPropsUpdateSub = 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.
@@ -365,7 +356,7 @@ class ComponentHostComponent {
         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="
@@ -406,10 +397,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']
-            }] } });
+        }], 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
@@ -587,10 +575,35 @@ class AngularCatalog extends Catalog {
  * Automatically injects the basic catalog styles when the component is instantiated.
  */
 class BasicCatalogComponent {
+    /**
+     * Reactive properties resolved from the A2UI ComponentModel.
+     */
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    componentId = input.required(...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
     constructor() {
         injectBasicCatalogStyles();
     }
+    /**
+     * Computes the weight of the component from the properties.
+     */
+    weight = computed$1(() => this.props()['weight']?.value() ?? null, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    /**
+     * Binds the flex style to the host element based on the weight.
+     */
+    get flexStyle() {
+        return this.weight() !== null ? `${this.weight()}` : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: BasicCatalogComponent, isStandalone: true, inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: true, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex": "this.flexStyle" } }, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalogComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: true }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }], flexStyle: [{
+                type: HostBinding,
+                args: ['style.flex']
+            }] } });
 
 /**
  * Copyright 2026 Google LLC
@@ -624,17 +637,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 */ []));
@@ -667,7 +669,7 @@ class TextComponent extends BasicCatalogComponent {
                     break;
             }
             const requestId = ++this.renderRequestId;
-            this.markdownRenderer.render(value).then(rendered => {
+            this.markdownRenderer.render(value).then((rendered) => {
                 if (requestId === this.renderRequestId) {
                     this.resolvedText.set(rendered);
                 }
@@ -675,18 +677,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,25 +747,13 @@ 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() || [];
@@ -784,7 +768,7 @@ class RowComponent extends BasicCatalogComponent {
     normalizedChildren = computed$1(() => {
         if (this.isRepeating())
             return [];
-        return this.children().map(child => {
+        return this.children().map((child) => {
             if (typeof child === 'object' && child !== null && 'id' in child) {
                 return child;
             }
@@ -795,26 +779,23 @@ class RowComponent extends BasicCatalogComponent {
         return getNormalizedPath(this.props()['children']?.raw?.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 +809,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,25 +858,13 @@ 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() || [];
@@ -913,7 +879,7 @@ class ColumnComponent extends BasicCatalogComponent {
     normalizedChildren = computed$1(() => {
         if (this.isRepeating())
             return [];
-        return this.children().map(child => {
+        return this.children().map((child) => {
             if (typeof child === 'object' && child !== null && 'id' in child) {
                 return child;
             }
@@ -924,26 +890,23 @@ class ColumnComponent extends BasicCatalogComponent {
         return getNormalizedPath(this.props()['children']?.raw?.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 +921,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,19 +976,6 @@ 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 */ []));
@@ -1045,7 +992,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 +1000,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-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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -1072,15 +1016,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-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"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1115,20 +1056,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 +1077,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 +1093,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 +1113,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,25 +1145,12 @@ 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()"
@@ -1255,7 +1169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [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 }] }] } });
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1272,6 +1186,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,18 +1204,6 @@ 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(() => {
@@ -1310,11 +1218,13 @@ class IconComponent extends BasicCatalogComponent {
         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()}`);
     }, ...(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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IconComponent, isStandalone: true, selector: "a2ui-v09-icon", usesInheritance: true, ngImport: i0, template: `
     @if (isPath()) {
       <svg class="a2ui-icon svg" viewBox="0 0 24 24" [style.fill]="color() || 'currentColor'">
         <path [attr.d]="path()"></path>
@@ -1324,7 +1234,7 @@ class IconComponent extends BasicCatalogComponent {
         {{ 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,
@@ -1338,8 +1248,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         {{ 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 +1275,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 +1305,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 +1333,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 +1363,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
@@ -1503,18 +1391,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - `--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(() => {
@@ -1541,16 +1417,13 @@ 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()">
           @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>
           }
@@ -1560,10 +1433,7 @@ class ListComponent extends BasicCatalogComponent {
         <ul [class]="'a2ui-list ' + orientation()" [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>
           }
@@ -1573,10 +1443,7 @@ class ListComponent extends BasicCatalogComponent {
         <div [class]="'a2ui-list ' + orientation()" 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>
           }
@@ -1593,10 +1460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <ol [class]="'a2ui-list ' + orientation()" [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>
           }
@@ -1606,10 +1470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <ul [class]="'a2ui-list ' + orientation()" [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>
           }
@@ -1619,10 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <div [class]="'a2ui-list ' + orientation()" 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 +1488,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 +1519,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-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 });
 }
 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-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"] }]
+        }] });
 
 /**
  * Copyright 2026 Google LLC
@@ -1730,16 +1572,6 @@ 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 */ []));
@@ -1756,7 +1588,7 @@ class TabsComponent extends BasicCatalogComponent {
         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) {
@@ -1807,7 +1639,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 +1669,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 +1679,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 +1693,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 +1708,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 +1718,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 +1726,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 +1753,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 +1774,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 +1810,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 +1817,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 +1827,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)}.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 +1841,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)}.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,19 +1876,6 @@ 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 */ []));
     variant = computed$1(() => this.props()['variant']?.value(), ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -2143,7 +1918,7 @@ class ChoicePickerComponent extends BasicCatalogComponent {
         }
     }
     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') {
@@ -2177,7 +1952,7 @@ class ChoicePickerComponent extends BasicCatalogComponent {
         </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,
@@ -2215,8 +1990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </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 +2021,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 +2031,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>
@@ -2286,7 +2047,7 @@ class SliderComponent extends BasicCatalogComponent {
         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,
@@ -2306,8 +2067,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         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 +2101,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 +2137,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 +2163,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 +2193,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