@a2ui/angular 0.8.3 → 0.9.0-alpha.1

package/fesm2022/a2ui-angular-src-v0_9.mjs

@@ -0,0 +1,2525 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Inject, Injectable, signal, inject, DestroyRef, NgZone, input, ChangeDetectionStrategy, Component, computed as computed$1, 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';
+import { injectBasicCatalogStyles, DateTimeInputApi, SliderApi, ChoicePickerApi, CheckBoxApi, DividerApi, ModalApi, TabsApi, CardApi, ListApi, AudioPlayerApi, VideoApi, IconApi, ImageApi, TextFieldApi, ButtonApi, ColumnApi, RowApi, TextApi, BASIC_FUNCTIONS } from '@a2ui/web_core/v0_9/basic_catalog';
+export { BASIC_FUNCTIONS } from '@a2ui/web_core/v0_9/basic_catalog';
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Injection token for the A2UI renderer configuration.
+ */
+const A2UI_RENDERER_CONFIG = new InjectionToken('A2UI_RENDERER_CONFIG');
+/**
+ * Manages A2UI v0.9 rendering sessions by bridging the MessageProcessor to Angular.
+ *
+ * This service is the central entry point for the A2UI renderer. It maintains a
+ * {@link MessageProcessor} that turns A2UI protocol messages into a reactive
+ * {@link SurfaceGroupModel}.
+ */
+class A2uiRendererService {
+    config;
+    _messageProcessor;
+    _catalogs = [];
+    constructor(config) {
+        this.config = config;
+        this._catalogs = this.config.catalogs;
+        this._messageProcessor = new MessageProcessor(this._catalogs, this.config.actionHandler);
+    }
+    /**
+     * Processes a list of A2UI messages and updates the internal surface models.
+     *
+     * This should be called whenever new messages arrive from an agent or orchestrator.
+     *
+     * @param messages The list of {@link A2uiMessage}s to process.
+     */
+    processMessages(messages) {
+        this._messageProcessor.processMessages(messages);
+    }
+    /**
+     * The current surface group model containing all active surfaces.
+     *
+     * Surfaces can be retrieved from this group using their `surfaceId`.
+     */
+    get surfaceGroup() {
+        return this._messageProcessor.model;
+    }
+    ngOnDestroy() {
+        this._messageProcessor.model.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: A2uiRendererService, deps: [{ token: A2UI_RENDERER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: A2uiRendererService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: A2uiRendererService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [A2UI_RENDERER_CONFIG]
+                }] }] });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function toAngularSignal(preactSignal, destroyRef, ngZone) {
+    const s = signal(preactSignal.peek());
+    const dispose = effect(() => {
+        if (ngZone) {
+            ngZone.run(() => s.set(preactSignal.value));
+        }
+        else {
+            s.set(preactSignal.value);
+        }
+    });
+    destroyRef.onDestroy(() => {
+        dispose();
+        // Some signals returned by DataContext.resolveSignal have a custom unsubscribe for AbortControllers
+        if (preactSignal.unsubscribe) {
+            preactSignal.unsubscribe();
+        }
+    });
+    return s.asReadonly();
+}
+/**
+ * Normalizes a data model path by combining a relative path with a base context.
+ *
+ * This is used to create unique absolute paths for components within a repeating
+ * collection or nested structure.
+ *
+ * @param path The relative or absolute path from the component properties.
+ * @param dataContextPath The current base data context path.
+ * @param index The index of the child component.
+ * @returns A fully normalized absolute path for the indexed child.
+ */
+function getNormalizedPath(path, dataContextPath, index) {
+    let normalized = path || '';
+    if (!normalized.startsWith('/')) {
+        const base = dataContextPath === '/' ? '' : dataContextPath;
+        normalized = `${base}/${normalized}`;
+    }
+    if (normalized.endsWith('/')) {
+        normalized = normalized.slice(0, -1);
+    }
+    return `${normalized}/${index}`;
+}
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Binds A2UI ComponentModel properties to reactive Angular Signals.
+ *
+ * This service is used by {@link ComponentHostComponent} to resolve data bindings
+ * from the A2UI DataContext and expose them as Angular Signals. It ensures that
+ * property updates from the A2UI protocol are correctly reflected in Angular
+ * components and provides callbacks for updating the data model.
+ */
+class ComponentBinder {
+    destroyRef = inject(DestroyRef);
+    ngZone = inject(NgZone);
+    /**
+     * Binds all properties of a component to an object of Angular Signals.
+     *
+     * @param context The ComponentContext containing the model and data context.
+     * @returns An object where each key corresponds to a component prop and its value is an Angular Signal.
+     */
+    bind(context) {
+        const props = context.componentModel.properties;
+        const bound = {};
+        for (const key of Object.keys(props)) {
+            const value = props[key];
+            let preactSig;
+            const isChildListTemplate = value && typeof value === 'object' && 'componentId' in value && 'path' in value;
+            const isBoundPath = value && typeof value === 'object' && 'path' in value && !('componentId' in value);
+            if (isChildListTemplate) {
+                const listSig = context.dataContext.resolveSignal({ path: value.path });
+                const listContext = context.dataContext.nested(value.path);
+                preactSig = computed(() => {
+                    const arr = listSig.value;
+                    const currentArr = Array.isArray(arr) ? arr : [];
+                    return currentArr.map((_, i) => ({
+                        id: value.componentId,
+                        basePath: listContext.nested(String(i)).path,
+                    }));
+                });
+            }
+            else {
+                preactSig = context.dataContext.resolveSignal(value);
+            }
+            if (['child', 'trigger', 'content'].includes(key)) {
+                const originalSig = preactSig;
+                preactSig = computed(() => {
+                    const val = originalSig.value;
+                    if (!val)
+                        return null;
+                    if (typeof val === 'object' && val !== null && 'id' in val) {
+                        return val;
+                    }
+                    return { id: val, basePath: context.dataContext.path };
+                });
+            }
+            else if (key === 'children') {
+                const originalSig = preactSig;
+                preactSig = computed(() => {
+                    const val = originalSig.value;
+                    const arr = Array.isArray(val) ? val : [];
+                    return arr.map(item => {
+                        if (typeof item === 'object' && item !== null && 'id' in item) {
+                            return item;
+                        }
+                        return { id: item, basePath: context.dataContext.path };
+                    });
+                });
+            }
+            const angSig = toAngularSignal(preactSig, this.destroyRef, this.ngZone);
+            bound[key] = {
+                value: angSig,
+                raw: value,
+                onUpdate: isBoundPath
+                    ? (newValue) => context.dataContext.set(value.path, newValue)
+                    : () => { }, // No-op for non-bound values
+            };
+            if (key === 'checks') {
+                const checksArray = Array.isArray(value) ? value : [];
+                const ruleResults = checksArray.map((rule) => {
+                    const condition = rule.condition || rule;
+                    const message = rule.message || 'Validation failed';
+                    const conditionSig = context.dataContext.resolveSignal(condition);
+                    return { conditionSig, message };
+                });
+                const isValidPreactSig = computed(() => {
+                    return ruleResults.every((r) => !!r.conditionSig.value);
+                });
+                const validationErrorsPreactSig = computed(() => {
+                    return ruleResults
+                        .filter((r) => !r.conditionSig.value)
+                        .map((r) => r.message);
+                });
+                bound['isValid'] = {
+                    value: toAngularSignal(isValidPreactSig, this.destroyRef, this.ngZone),
+                    raw: null,
+                    onUpdate: () => { },
+                };
+                bound['validationErrors'] = {
+                    value: toAngularSignal(validationErrorsPreactSig, this.destroyRef, this.ngZone),
+                    raw: null,
+                    onUpdate: () => { },
+                };
+            }
+        }
+        return bound;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ComponentBinder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ComponentBinder, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ComponentBinder, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Dynamically renders an A2UI component as defined in the current surface model.
+ *
+ * This component acts as a bridge between the A2UI surface model and Angular components.
+ * It resolves the appropriate component from the catalog based on the component's type,
+ * and uses {@link ComponentBinder} to create reactive property bindings.
+ *
+ * Usually, you'll use the higher-level {@link SurfaceComponent} which automatically
+ * sets up a host for the 'root' component.
+ */
+class ComponentHostComponent {
+    /** The key of the component to render, either an ID string or an object with ID and basePath. Defaults to 'root'. */
+    componentKey = input('root', ...(ngDevMode ? [{ debugName: "componentKey" }] : /* istanbul ignore next */ []));
+    /** The unique identifier of the surface this component belongs to. */
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    rendererService = inject(A2uiRendererService);
+    binder = inject(ComponentBinder);
+    destroyRef = inject(DestroyRef);
+    componentType = null;
+    props = {};
+    context;
+    resolvedComponentId = '';
+    resolvedDataContextPath = '/';
+    ngOnInit() {
+        const surface = this.rendererService.surfaceGroup?.getSurface(this.surfaceId());
+        if (!surface) {
+            console.warn(`Surface ${this.surfaceId()} not found`);
+            return;
+        }
+        const key = this.componentKey();
+        let id;
+        let basePath;
+        if (typeof key === 'object' && key !== null && 'id' in key) {
+            id = key.id;
+            basePath = key.basePath || '/';
+        }
+        else {
+            id = key;
+            basePath = '/';
+        }
+        this.resolvedComponentId = id;
+        const componentModel = surface.componentsModel.get(id);
+        if (!componentModel) {
+            console.warn(`Component ${id} not found in surface ${this.surfaceId()}`);
+            return;
+        }
+        // Resolve component from the surface's catalog
+        const catalog = surface.catalog;
+        const api = catalog.components.get(componentModel.type);
+        if (!api) {
+            console.error(`Component type "${componentModel.type}" not found in catalog "${catalog.id}"`);
+            return;
+        }
+        this.componentType = api.component;
+        // Create context
+        this.context = new ComponentContext(surface, id, basePath);
+        this.props = this.binder.bind(this.context);
+        this.resolvedDataContextPath = this.context.dataContext.path;
+        this.destroyRef.onDestroy(() => {
+            // ComponentContext itself doesn't have a dispose, but its inner components might.
+            // However, SurfaceModel takes care of component disposal.
+        });
+    }
+    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: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    @if (componentType) {
+      <ng-container
+        *ngComponentOutlet="
+          componentType;
+          inputs: {
+          props: props,
+          surfaceId: surfaceId(),
+          componentId: resolvedComponentId,
+          dataContextPath: resolvedDataContextPath,
+        }
+        "
+      ></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ComponentHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a2ui-v09-component-host',
+                    imports: [NgComponentOutlet],
+                    host: {
+                        'style': 'display: contents;'
+                    },
+                    template: `
+    @if (componentType) {
+      <ng-container
+        *ngComponentOutlet="
+          componentType;
+          inputs: {
+          props: props,
+          surfaceId: surfaceId(),
+          componentId: resolvedComponentId,
+          dataContextPath: resolvedDataContextPath,
+        }
+        "
+      ></ng-container>
+    }
+  `,
+                    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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * High-level component for rendering an entire A2UI surface.
+ *
+ * This component handles the boilerplate of setting up a {@link ComponentHostComponent}
+ * for the 'root' component of a surface. It is the recommended way to embed an
+ * A2UI surface in an Angular application.
+ */
+class SurfaceComponent {
+    /** The unique identifier of the surface to render. */
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    /**
+     * The path within the surface's data model that represents the current state.
+     * Defaults to the root ('/').
+     */
+    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SurfaceComponent, isStandalone: true, selector: "a2ui-v09-surface", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    <a2ui-v09-component-host
+      [componentKey]="{ id: 'root', basePath: dataContextPath() }"
+      [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: SurfaceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a2ui-v09-surface',
+                    standalone: true,
+                    imports: [ComponentHostComponent],
+                    host: {
+                        'style': 'display: contents;'
+                    },
+                    template: `
+    <a2ui-v09-component-host
+      [componentKey]="{ id: 'root', basePath: dataContextPath() }"
+      [surfaceId]="surfaceId()"
+    >
+    </a2ui-v09-component-host>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A collection of Angular component and function implementations mapped to
+ * A2UI protocol types.
+ *
+ * Catalogs are used by the {@link MessageProcessor} to resolve component
+ * definitions and by {@link ComponentHostComponent} to instantiate the
+ * correct Angular components.
+ */
+class AngularCatalog extends Catalog {
+}
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MarkdownRenderer {
+}
+class DefaultMarkdownRenderer extends MarkdownRenderer {
+    static warningLogged = false;
+    async render(markdown, options) {
+        try {
+            // @ts-ignore - optional peer dependency
+            const { renderMarkdown } = await import('@a2ui/markdown-it');
+            return await renderMarkdown(markdown, options);
+        }
+        catch (e) {
+            if (!DefaultMarkdownRenderer.warningLogged) {
+                console.warn("[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback.");
+                DefaultMarkdownRenderer.warningLogged = true;
+            }
+            return markdown;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefaultMarkdownRenderer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefaultMarkdownRenderer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefaultMarkdownRenderer, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+function provideMarkdownRenderer(renderFn) {
+    if (renderFn) {
+        return {
+            provide: MarkdownRenderer,
+            useValue: {
+                render: renderFn,
+            },
+        };
+    }
+    return { provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer };
+}
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Base class for A2UI basic catalog components in Angular.
+ *
+ * Automatically injects the basic catalog styles when the component is instantiated.
+ */
+class BasicCatalogComponent {
+    constructor() {
+        injectBasicCatalogStyles();
+    }
+}
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Text component (v0.9).
+ *
+ * Renders text with support for simple Markdown.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-text-color-text`: Controls the text color.
+ * - `--a2ui-text-margin`: Controls the margin of text elements.
+ * - `--a2ui-font-family-title`: Controls the font family for titles.
+ * - `--a2ui-line-height-headings`: Controls the line height for headings.
+ * - `--a2ui-line-height-body`: Controls the line height for body text.
+ * - `--a2ui-text-caption-color`: Controls the color for caption text.
+ * - `--a2ui-text-a-color`: Controls the color for links.
+ * - `--a2ui-text-a-font-weight`: Controls the font weight for links.
+ * - 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 */ []));
+    resolvedText = signal('', ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
+    renderRequestId = 0;
+    constructor() {
+        super();
+        effect$1(() => {
+            const text = this.text();
+            const variant = this.variant();
+            let value = text;
+            switch (variant) {
+                case 'h1':
+                    value = `# ${text}`;
+                    break;
+                case 'h2':
+                    value = `## ${text}`;
+                    break;
+                case 'h3':
+                    value = `### ${text}`;
+                    break;
+                case 'h4':
+                    value = `#### ${text}`;
+                    break;
+                case 'h5':
+                    value = `##### ${text}`;
+                    break;
+                case 'caption':
+                    value = `*${text}*`;
+                    break;
+            }
+            const requestId = ++this.renderRequestId;
+            this.markdownRenderer.render(value).then(rendered => {
+                if (requestId === this.renderRequestId) {
+                    this.resolvedText.set(rendered);
+                }
+            });
+        });
+    }
+    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 });
+}
+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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Maps A2UI justification values to CSS justify-content values.
+ */
+const JUSTIFY_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    spaceBetween: 'space-between',
+    spaceAround: 'space-around',
+    spaceEvenly: 'space-evenly',
+    stretch: 'stretch',
+};
+/**
+ * Maps A2UI alignment values to CSS align-items values.
+ */
+const ALIGN_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline',
+};
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Row component (v0.9).
+ *
+ * Arranges child components in a horizontal flex layout. Supports both static
+ * lists of children and repeating templates bound to a data collection.
+ *
+ * Supported CSS variables:
+ * - `--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;
+    }, ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    align = computed$1(() => {
+        const val = this.props()['align']?.value();
+        return val ? (ALIGN_MAP[val] || val) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    children = computed$1(() => {
+        const raw = this.props()['children']?.value() || [];
+        return Array.isArray(raw) ? raw : [];
+    }, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    isRepeating = computed$1(() => {
+        return !!this.props()['children']?.raw?.componentId;
+    }, ...(ngDevMode ? [{ debugName: "isRepeating" }] : /* istanbul ignore next */ []));
+    templateId = computed$1(() => {
+        return this.props()['children']?.raw?.componentId;
+    }, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
+    normalizedChildren = computed$1(() => {
+        if (this.isRepeating())
+            return [];
+        return this.children().map(child => {
+            if (typeof child === 'object' && child !== null && 'id' in child) {
+                return child;
+            }
+            return { id: child, basePath: this.dataContextPath() };
+        });
+    }, ...(ngDevMode ? [{ debugName: "normalizedChildren" }] : /* istanbul ignore next */ []));
+    getNormalizedPath(index) {
+        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>
+        }
+      }
+
+      @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: [{
+            type: Component,
+            args: [{
+                    selector: 'a2ui-v09-row',
+                    standalone: true,
+                    imports: [ComponentHostComponent],
+                    host: {
+                        '[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()'
+                    },
+                    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>
+        }
+      }
+  `,
+                    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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Column component (v0.9).
+ *
+ * Arranges child components in a vertical flex layout. Supports both static
+ * lists of children and repeating templates bound to a data collection.
+ *
+ * Supported CSS variables:
+ * - `--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;
+    }, ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    align = computed$1(() => {
+        const val = this.props()['align']?.value();
+        return val ? (ALIGN_MAP[val] || val) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    children = computed$1(() => {
+        const raw = this.props()['children']?.value() || [];
+        return Array.isArray(raw) ? raw : [];
+    }, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    isRepeating = computed$1(() => {
+        return !!this.props()['children']?.raw?.componentId;
+    }, ...(ngDevMode ? [{ debugName: "isRepeating" }] : /* istanbul ignore next */ []));
+    templateId = computed$1(() => {
+        return this.props()['children']?.raw?.componentId;
+    }, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
+    normalizedChildren = computed$1(() => {
+        if (this.isRepeating())
+            return [];
+        return this.children().map(child => {
+            if (typeof child === 'object' && child !== null && 'id' in child) {
+                return child;
+            }
+            return { id: child, basePath: this.dataContextPath() };
+        });
+    }, ...(ngDevMode ? [{ debugName: "normalizedChildren" }] : /* istanbul ignore next */ []));
+    getNormalizedPath(index) {
+        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>
+        }
+      }
+
+      @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: [{
+            type: Component,
+            args: [{
+                    selector: 'a2ui-v09-column',
+                    standalone: true,
+                    imports: [ComponentHostComponent],
+                    host: {
+                        '[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()'
+                    },
+                    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>
+        }
+      }
+  `,
+                    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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Button component (v0.9).
+ *
+ * Renders a clickable button with a single child component (usually Text).
+ * Dispatches an action when clicked if an `action` property is provided.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-button-padding`: Controls the padding.
+ * - `--a2ui-button-border-radius`: Controls the border radius.
+ * - `--a2ui-button-border`: Controls the border.
+ * - `--a2ui-button-margin`: Controls the margin.
+ * - `--a2ui-button-background`: Controls the background color.
+ * - `--a2ui-button-box-shadow`: Controls the box shadow.
+ * - `--a2ui-button-font-weight`: Controls the font weight.
+ */
+class ButtonComponent extends BasicCatalogComponent {
+    /**
+     * Reactive properties resolved from the A2UI {@link ComponentModel}.
+     *
+     * Expected properties:
+     * - `child`: The ID of the component to render inside the button.
+     * - `variant`: Button style variant ('default', 'primary', 'borderless').
+     * - `action`: The A2UI action to dispatch on click.
+     * - `checks`: Optional validation rules.
+     */
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    componentId = input.required(...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
+    rendererService = inject(A2uiRendererService);
+    variant = computed$1(() => this.props()['variant']?.value() ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    child = computed$1(() => this.props()['child']?.value(), ...(ngDevMode ? [{ debugName: "child" }] : /* istanbul ignore next */ []));
+    action = computed$1(() => this.props()['action']?.value(), ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    handleClick() {
+        const action = this.action();
+        if (action) {
+            const surface = this.rendererService.surfaceGroup?.getSurface(this.surfaceId());
+            if (surface) {
+                const dataContext = new DataContext(surface, this.dataContextPath());
+                const resolvedAction = dataContext.resolveAction(action);
+                surface.dispatchAction(resolvedAction, this.componentId());
+            }
+        }
+    }
+    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: `
+    <button
+      [type]="variant() === 'primary' ? 'submit' : 'button'"
+      [class]="'a2ui-button ' + variant()"
+      (click)="handleClick()"
+      [disabled]="props()['isValid']?.value() === false"
+    >
+      @if (child()) {
+        <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-button', standalone: true, imports: [ComponentHostComponent], template: `
+    <button
+      [type]="variant() === 'primary' ? 'submit' : 'button'"
+      [class]="'a2ui-button ' + variant()"
+      (click)="handleClick()"
+      [disabled]="props()['isValid']?.value() === false"
+    >
+      @if (child()) {
+        <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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI TextField component (v0.9).
+ *
+ * Renders a text input field with an optional label and placeholder.
+ * Updates the bound data model property on every input change.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-color-input`: Controls the background color of the input.
+ * - `--a2ui-color-on-input`: Controls the text color of the input.
+ * - `--a2ui-textfield-border`: Controls the border of the input.
+ * - `--a2ui-textfield-border-radius`: Controls the border radius of the input.
+ * - `--a2ui-textfield-padding`: Controls the padding of the input.
+ * - `--a2ui-textfield-color-border-focus`: Controls the border color on focus.
+ * - `--a2ui-textfield-color-error`: Controls the border and text color for error states.
+ * - `--a2ui-textfield-label-font-size`: Controls the font size of the label.
+ * - `--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 */ []));
+    variant = computed$1(() => this.props()['variant']?.value(), ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    inputType = computed$1(() => {
+        switch (this.variant()) {
+            case 'obscured':
+                return 'password';
+            case 'number':
+                return 'number';
+            default:
+                return 'text';
+        }
+    }, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    handleInput(event) {
+        const value = event.target.value;
+        // Update the data path.  If anything is listening to this path, it will be
+        // notified.
+        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: `
+    <div class="a2ui-text-field-container">
+      @if (label()) {
+        <label>{{ label() }}</label>
+      }
+      <input
+        [type]="inputType()"
+        [value]="value()"
+        (input)="handleInput($event)"
+        [placeholder]="placeholder()"
+        [class.invalid]="props()['isValid']?.value() === false"
+      />
+      @for (message of props()['validationErrors']?.value(); track message) {
+        <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-text-field', standalone: true, imports: [], template: `
+    <div class="a2ui-text-field-container">
+      @if (label()) {
+        <label>{{ label() }}</label>
+      }
+      <input
+        [type]="inputType()"
+        [value]="value()"
+        (input)="handleInput($event)"
+        [placeholder]="placeholder()"
+        [class.invalid]="props()['isValid']?.value() === false"
+      />
+      @for (message of props()['validationErrors']?.value(); track message) {
+        <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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Image component (v0.9).
+ *
+ * Renders an image with configurable fit and shape variants.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-image-border-radius`: Controls the rounded corners.
+ * - `--a2ui-image-icon-size`: Size of the icon variant.
+ * - `--a2ui-image-avatar-size`: Size of the avatar variant.
+ * - `--a2ui-image-small-feature-size`: Max-width of smallFeature variant.
+ * - `--a2ui-image-large-feature-size`: Max-height of largeFeature variant.
+ * - `--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: `
+    <img
+      [src]="url()"
+      [alt]="description()"
+      [style.object-fit]="fit()"
+      [class]="'a2ui-image ' + variant()"
+    />
+  `, isInline: true, styles: [".a2ui-image{display:block;max-width:100%;height:auto}.a2ui-image.circle{border-radius:50%;aspect-ratio:1 / 1}.a2ui-image.rounded{border-radius:var(--a2ui-image-border-radius, var(--a2ui-border-radius, 8px))}.a2ui-image.icon{width:var(--a2ui-image-icon-size, 24px);height:var(--a2ui-image-icon-size, 24px)}.a2ui-image.avatar{width:var(--a2ui-image-avatar-size, 40px);height:var(--a2ui-image-avatar-size, 40px);border-radius:50%}.a2ui-image.smallFeature{max-width:var(--a2ui-image-small-feature-size, 100px)}.a2ui-image.mediumFeature{max-width:300px;height:auto}.a2ui-image.largeFeature{width:100%;max-height:var(--a2ui-image-large-feature-size, 400px)}.a2ui-image.header{width:100%;height:var(--a2ui-image-header-size, 200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-image', standalone: true, imports: [], template: `
+    <img
+      [src]="url()"
+      [alt]="description()"
+      [style.object-fit]="fit()"
+      [class]="'a2ui-image ' + variant()"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-image{display:block;max-width:100%;height:auto}.a2ui-image.circle{border-radius:50%;aspect-ratio:1 / 1}.a2ui-image.rounded{border-radius:var(--a2ui-image-border-radius, var(--a2ui-border-radius, 8px))}.a2ui-image.icon{width:var(--a2ui-image-icon-size, 24px);height:var(--a2ui-image-icon-size, 24px)}.a2ui-image.avatar{width:var(--a2ui-image-avatar-size, 40px);height:var(--a2ui-image-avatar-size, 40px);border-radius:50%}.a2ui-image.smallFeature{max-width:var(--a2ui-image-small-feature-size, 100px)}.a2ui-image.mediumFeature{max-width:300px;height:auto}.a2ui-image.largeFeature{width:100%;max-height:var(--a2ui-image-large-feature-size, 400px)}.a2ui-image.header{width:100%;height:var(--a2ui-image-header-size, 200px)}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Icon component (v0.9).
+ *
+ * Supports both Material Icons (by name) and custom SVG icons (by path).
+ *
+ * Supported CSS variables:
+ * - `--a2ui-icon-size`: Controls the width, height, and font size of the icon.
+ * - `--a2ui-icon-font-family`: Controls the font family for icon fonts.
+ * - `--a2ui-icon-color`: Controls the color of the icon.
+ * - `--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(() => {
+        const name = this.iconNameRaw();
+        return typeof name === 'object' && name !== null && 'path' in name;
+    }, ...(ngDevMode ? [{ debugName: "isPath" }] : /* istanbul ignore next */ []));
+    path = computed$1(() => {
+        const name = this.iconNameRaw();
+        return name?.path || '';
+    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    iconName = computed$1(() => {
+        const name = this.iconNameRaw();
+        if (typeof name !== 'string')
+            return '';
+        // 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: `
+    @if (isPath()) {
+      <svg class="a2ui-icon svg" viewBox="0 0 24 24" [style.fill]="color() || 'currentColor'">
+        <path [attr.d]="path()"></path>
+      </svg>
+    } @else {
+      <i class="material-icons a2ui-icon" [style.color]="color()">
+        {{ iconName() }}
+      </i>
+    }
+  `, isInline: true, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var(--a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)));font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-icon', standalone: true, imports: [], template: `
+    @if (isPath()) {
+      <svg class="a2ui-icon svg" viewBox="0 0 24 24" [style.fill]="color() || 'currentColor'">
+        <path [attr.d]="path()"></path>
+      </svg>
+    } @else {
+      <i class="material-icons a2ui-icon" [style.color]="color()">
+        {{ iconName() }}
+      </i>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var(--a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)));font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Video component (v0.9).
+ *
+ * Renders a video player with standard controls and an optional poster image.
+ *
+ * Supported CSS variables:
+ * - `--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: `
+    <div class="a2ui-video-container">
+      <video
+        [attr.src]="url() || null"
+        controls
+        [attr.poster]="posterUrl() || null"
+        class="a2ui-video"
+      >
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-video', standalone: true, imports: [], template: `
+    <div class="a2ui-video-container">
+      <video
+        [attr.src]="url() || null"
+        controls
+        [attr.poster]="posterUrl() || null"
+        class="a2ui-video"
+      >
+        Your browser does not support the video tag.
+      </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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI AudioPlayer component (v0.9).
+ *
+ * Renders an audio player with standard controls and an optional description.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-audioplayer-background`: Controls the background of the player. Defaults to `transparent`.
+ * - `--a2ui-audioplayer-border-radius`: Controls the border radius. Defaults to `0`.
+ * - `--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: `
+    <div class="a2ui-audio-player">
+      @if (description()) {
+        <div class="a2ui-audio-description">
+          {{ description() }}
+        </div>
+      }
+      <audio [attr.src]="url() || null" controls class="a2ui-audio">
+        Your browser does not support the audio tag.
+      </audio>
+    </div>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-audio-player', standalone: true, imports: [], template: `
+    <div class="a2ui-audio-player">
+      @if (description()) {
+        <div class="a2ui-audio-description">
+          {{ description() }}
+        </div>
+      }
+      <audio [attr.src]="url() || null" controls class="a2ui-audio">
+        Your browser does not support the audio tag.
+      </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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI List component (v0.9).
+ *
+ * Renders a list of child components with support for ordered, unordered,
+ * and unstyled layouts in both vertical and horizontal orientations.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-list-gap`: Controls the gap between items.
+ * - `--a2ui-list-padding`: Controls the padding (applied to padding-inline-start).
+ */
+class ListComponent extends BasicCatalogComponent {
+    /**
+     * Reactive properties resolved from the A2UI {@link ComponentModel}.
+     *
+     * Expected properties:
+     * - `children`: A list of component IDs to render as list items.
+     * - `listStyle`: The type of list ('ordered', 'unordered', 'none').
+     * - `orientation`: The layout direction ('vertical', 'horizontal').
+     */
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
+    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
+    listStyle = computed$1(() => this.props()['listStyle']?.value(), ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
+    orientation = computed$1(() => this.props()['orientation']?.value() || 'vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    children = computed$1(() => {
+        const raw = this.props()['children']?.value();
+        return Array.isArray(raw) ? raw : [];
+    }, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    listTag = computed$1(() => {
+        const style = this.listStyle();
+        if (style === 'ordered')
+            return 'ol';
+        if (style === 'unordered')
+            return 'ul';
+        return 'div';
+    }, ...(ngDevMode ? [{ debugName: "listTag" }] : /* istanbul ignore next */ []));
+    styleType = computed$1(() => {
+        const style = this.listStyle();
+        if (style === 'none')
+            return 'none';
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "styleType" }] : /* istanbul ignore next */ []));
+    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: `
+    @switch (listTag()) {
+      @case ('ol') {
+        <ol [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+          @for (child of children(); track child.id) {
+            <li>
+              <a2ui-v09-component-host
+                [componentKey]="child"
+                [surfaceId]="surfaceId()"
+              >
+              </a2ui-v09-component-host>
+            </li>
+          }
+        </ol>
+      }
+      @case ('ul') {
+        <ul [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+          @for (child of children(); track child.id) {
+            <li>
+              <a2ui-v09-component-host
+                [componentKey]="child"
+                [surfaceId]="surfaceId()"
+              >
+              </a2ui-v09-component-host>
+            </li>
+          }
+        </ul>
+      }
+      @default {
+        <div [class]="'a2ui-list ' + orientation()" style="list-style-type: none;">
+          @for (child of children(); track child.id) {
+            <div class="a2ui-list-item-none">
+              <a2ui-v09-component-host
+                [componentKey]="child"
+                [surfaceId]="surfaceId()"
+              >
+              </a2ui-v09-component-host>
+            </div>
+          }
+        </div>
+      }
+    }
+  `, isInline: true, 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"], 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: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-list', standalone: true, imports: [ComponentHostComponent], template: `
+    @switch (listTag()) {
+      @case ('ol') {
+        <ol [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+          @for (child of children(); track child.id) {
+            <li>
+              <a2ui-v09-component-host
+                [componentKey]="child"
+                [surfaceId]="surfaceId()"
+              >
+              </a2ui-v09-component-host>
+            </li>
+          }
+        </ol>
+      }
+      @case ('ul') {
+        <ul [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
+          @for (child of children(); track child.id) {
+            <li>
+              <a2ui-v09-component-host
+                [componentKey]="child"
+                [surfaceId]="surfaceId()"
+              >
+              </a2ui-v09-component-host>
+            </li>
+          }
+        </ul>
+      }
+      @default {
+        <div [class]="'a2ui-list ' + orientation()" style="list-style-type: none;">
+          @for (child of children(); track child.id) {
+            <div class="a2ui-list-item-none">
+              <a2ui-v09-component-host
+                [componentKey]="child"
+                [surfaceId]="surfaceId()"
+              >
+              </a2ui-v09-component-host>
+            </div>
+          }
+        </div>
+      }
+    }
+  `, 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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Card component (v0.9).
+ *
+ * Renders a container with a shadow and rounded corners for grouping related content.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-card-padding`: Controls the padding.
+ * - `--a2ui-card-border-radius`: Controls the border radius.
+ * - `--a2ui-card-box-shadow`: Controls the box shadow.
+ * - `--a2ui-card-background`: Controls the background color.
+ * - `--a2ui-card-border`: Controls the border.
+ * - `--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: `
+    <div class="a2ui-card">
+      @if (child()) {
+        <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 });
+}
+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>
+      }
+    </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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Tabs component (v0.9).
+ *
+ * Renders a set of tabs where each tab has a label and associated content.
+ * Manages the active tab state internally.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-tabs-border`: Controls the border of the tab bar.
+ * - `--a2ui-tabs-header-background`: Controls the background of tab buttons.
+ * - `--a2ui-tabs-header-color`: Controls the text color of tab buttons.
+ * - `--a2ui-tabs-header-background-active`: Controls the background of the active tab button.
+ * - `--a2ui-tabs-header-color-active`: Controls the text color of the active tab button.
+ * - `--a2ui-tabs-content-padding`: Controls the padding of the tab content.
+ */
+class TabsComponent extends BasicCatalogComponent {
+    /**
+     * Reactive properties resolved from the A2UI {@link ComponentModel}.
+     *
+     * Expected properties:
+     * - `tabs`: A list of tab objects, each containing a `label` and `content` ID.
+     */
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    componentId = input(...(ngDevMode ? [undefined, { debugName: "componentId" }] : /* istanbul ignore next */ []));
+    dataContextPath = input('/', ...(ngDevMode ? [{ debugName: "dataContextPath" }] : /* istanbul ignore next */ []));
+    activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
+    tabs = computed$1(() => this.props()['tabs']?.value() || [], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    activeTab = computed$1(() => this.tabs()[this.activeTabIndex()], ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    normalizedActiveTabContent = computed$1(() => {
+        const content = this.activeTab()?.content;
+        if (!content)
+            return null;
+        if (typeof content === 'object' && content !== null && 'id' in content) {
+            return content;
+        }
+        return { id: content, basePath: this.dataContextPath() };
+    }, ...(ngDevMode ? [{ debugName: "normalizedActiveTabContent" }] : /* istanbul ignore next */ []));
+    setActiveTab(index) {
+        this.activeTabIndex.set(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TabsComponent, isStandalone: true, selector: "a2ui-v09-tabs", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="a2ui-tabs">
+      <div class="a2ui-tab-bar">
+        @for (tab of tabs(); track tab; let i = $index) {
+          <button
+            class="a2ui-tab-button"
+            [class.active]="activeTabIndex() === i"
+            (click)="setActiveTab(i)"
+          >
+            {{ tab.label }}
+          </button>
+        }
+      </div>
+      @if (normalizedActiveTabContent()) {
+        <div class="a2ui-tab-content">
+          <a2ui-v09-component-host
+            [componentKey]="normalizedActiveTabContent()!"
+            [surfaceId]="surfaceId()"
+          >
+          </a2ui-v09-component-host>
+        </div>
+      }
+    </div>
+  `, isInline: true, 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"], 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: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-tabs', standalone: true, imports: [ComponentHostComponent], template: `
+    <div class="a2ui-tabs">
+      <div class="a2ui-tab-bar">
+        @for (tab of tabs(); track tab; let i = $index) {
+          <button
+            class="a2ui-tab-button"
+            [class.active]="activeTabIndex() === i"
+            (click)="setActiveTab(i)"
+          >
+            {{ tab.label }}
+          </button>
+        }
+      </div>
+      @if (normalizedActiveTabContent()) {
+        <div class="a2ui-tab-content">
+          <a2ui-v09-component-host
+            [componentKey]="normalizedActiveTabContent()!"
+            [surfaceId]="surfaceId()"
+          >
+          </a2ui-v09-component-host>
+        </div>
+      }
+    </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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Modal component (v0.9).
+ *
+ * Renders a trigger component that opening an overlay containing a content component.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-modal-background`: Controls the background of the modal content.
+ * - `--a2ui-modal-padding`: Controls the padding of the modal content.
+ * - `--a2ui-modal-border-radius`: Controls the border radius of the modal content.
+ * - `--a2ui-modal-box-shadow`: Controls the box shadow of the modal content.
+ * - `--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 */ []));
+    openModal() {
+        this.isOpen.set(true);
+    }
+    closeModal() {
+        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: `
+    <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>
+        }
+      </div>
+
+      @if (isOpen()) {
+        <div class="a2ui-modal-overlay" (click)="closeModal()">
+          <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>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, 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"], 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: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-modal', standalone: true, imports: [ComponentHostComponent], 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>
+        }
+      </div>
+
+      @if (isOpen()) {
+        <div class="a2ui-modal-overlay" (click)="closeModal()">
+          <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>
+            }
+          </div>
+        </div>
+      }
+    </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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Divider component (v0.9).
+ *
+ * Renders a horizontal or vertical line to separate content.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-divider-border`: Controls the border of the divider (horizontal and vertical).
+ * - `--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: `
+    <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-divider', standalone: true, imports: [], host: {
+                        '[style.display]': '"block"',
+                        '[style.width]': 'axis() === "horizontal" ? "100%" : "auto"',
+                    }, template: `
+    <hr
+      class="a2ui-divider"
+      [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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI CheckBox component (v0.9).
+ *
+ * Renders a checkbox with a label. Updates the bound data model property
+ * when the checked state changes.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-checkbox-margin`: Controls the margin.
+ * - `--a2ui-checkbox-gap`: Controls the gap between checkbox and label.
+ * - `--a2ui-checkbox-label-font-size`: Controls the font size of the label.
+ * - `--a2ui-checkbox-label-font-weight`: Controls the font weight of the label.
+ * - `--a2ui-checkbox-size`: Controls the width and height of the checkbox.
+ * - `--a2ui-checkbox-background`: Controls the background of the checkbox.
+ * - `--a2ui-checkbox-border`: Controls the border of the checkbox.
+ * - `--a2ui-checkbox-border-radius`: Controls the border radius of the checkbox.
+ * - `--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) {
+        const checked = event.target.checked;
+        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: `
+    <label class="a2ui-check-box-label">
+      <input
+        type="checkbox"
+        [checked]="value()"
+        (change)="handleChange($event)"
+        class="a2ui-check-box-input"
+      />
+      <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-check-box', standalone: true, imports: [], template: `
+    <label class="a2ui-check-box-label">
+      <input
+        type="checkbox"
+        [checked]="value()"
+        (change)="handleChange($event)"
+        class="a2ui-check-box-input"
+      />
+      <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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI ChoicePicker component (v0.9).
+ *
+ * Renders a set of options as either radio buttons/checkboxes or chips.
+ * Supports both single and multiple selection.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-choicepicker-gap`: Controls spacing between options/chips.
+ * - `--a2ui-choicepicker-padding`: Controls padding of the container.
+ * - `--a2ui-choicepicker-checkbox-size`: Controls size of checkboxes/radios.
+ * - `--a2ui-choicepicker-chip-padding`: Controls padding of chips.
+ * - `--a2ui-choicepicker-chip-border-radius`: Controls border radius of chips.
+ * - `--a2ui-choicepicker-chip-border`: Controls border of chips.
+ * - `--a2ui-choicepicker-chip-background`: Controls background of chips.
+ * - `--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 */ []));
+    selectedValue = computed$1(() => this.props()['value']?.value(), ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+    isMultiple() {
+        return this.variant() === 'multipleSelection';
+    }
+    isSelected(value) {
+        const selected = this.selectedValue();
+        if (Array.isArray(selected)) {
+            return selected.includes(value);
+        }
+        return selected === value;
+    }
+    onCheckChange(value, event) {
+        const checked = event.target.checked;
+        this.updateValue(value, checked);
+    }
+    toggleActive(value) {
+        const current = this.isSelected(value);
+        this.updateValue(value, !current);
+    }
+    updateValue(value, active) {
+        const current = this.selectedValue();
+        if (this.isMultiple()) {
+            let next = Array.isArray(current) ? [...current] : [];
+            if (active) {
+                if (!next.includes(value))
+                    next.push(value);
+            }
+            else {
+                next = next.filter((v) => v !== value);
+            }
+            this.props()['value']?.onUpdate(next);
+        }
+        else {
+            if (active) {
+                this.props()['value']?.onUpdate(value);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChoicePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChoicePickerComponent, isStandalone: true, selector: "a2ui-v09-choice-picker", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="a2ui-choice-picker">
+      <!-- Chips Variant -->
+      @if (displayStyle() === 'chips') {
+        <div class="a2ui-chips-group">
+          @for (choice of choices(); track choice.value) {
+            <button
+              class="a2ui-chip"
+              [class.active]="isSelected(choice.value)"
+              (click)="toggleActive(choice.value)"
+            >
+              {{ choice.label }}
+            </button>
+          }
+        </div>
+      } @else {
+        <!-- Checkbox/Radio Variant -->
+        <div class="a2ui-options-group">
+          @for (choice of choices(); track choice.value) {
+            <label class="a2ui-option-label">
+              <input
+                [type]="isMultiple() ? 'checkbox' : 'radio'"
+                [name]="componentId()"
+                [value]="choice.value"
+                [checked]="isSelected(choice.value)"
+                (change)="onCheckChange(choice.value, $event)"
+                class="a2ui-option-input"
+              />
+              <span class="a2ui-option-text">{{ choice.label }}</span>
+            </label>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem));border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e));color:var(--a2ui-color-on-primary, #fff);border-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChoicePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-choice-picker', standalone: true, imports: [], template: `
+    <div class="a2ui-choice-picker">
+      <!-- Chips Variant -->
+      @if (displayStyle() === 'chips') {
+        <div class="a2ui-chips-group">
+          @for (choice of choices(); track choice.value) {
+            <button
+              class="a2ui-chip"
+              [class.active]="isSelected(choice.value)"
+              (click)="toggleActive(choice.value)"
+            >
+              {{ choice.label }}
+            </button>
+          }
+        </div>
+      } @else {
+        <!-- Checkbox/Radio Variant -->
+        <div class="a2ui-options-group">
+          @for (choice of choices(); track choice.value) {
+            <label class="a2ui-option-label">
+              <input
+                [type]="isMultiple() ? 'checkbox' : 'radio'"
+                [name]="componentId()"
+                [value]="choice.value"
+                [checked]="isSelected(choice.value)"
+                (change)="onCheckChange(choice.value, $event)"
+                class="a2ui-option-input"
+              />
+              <span class="a2ui-option-text">{{ choice.label }}</span>
+            </label>
+          }
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem));border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e));color:var(--a2ui-color-on-primary, #fff);border-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e))}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI Slider component (v0.9).
+ *
+ * Renders a range input slider with a label and its current value.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-slider-margin`: Controls the margin of the container.
+ * - `--a2ui-slider-label-font-size`: Controls the font size of the label.
+ * - `--a2ui-slider-label-font-weight`: Controls the font weight of the label.
+ * - `--a2ui-slider-thumb-color`: Controls the accent color of the thumb.
+ * - `--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 */ []));
+    max = computed$1(() => this.props()['max']?.value() ?? 100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = computed$1(() => this.props()['step']?.value() ?? 1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    handleInput(event) {
+        const val = Number(event.target.value);
+        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: `
+    <div class="a2ui-slider-container">
+      <div class="a2ui-slider-header">
+        <span class="a2ui-slider-label">{{ label() }}</span>
+        <span class="a2ui-slider-value">{{ value() }}</span>
+      </div>
+      <input
+        type="range"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value() ?? min()"
+        (input)="handleInput($event)"
+        class="a2ui-slider"
+      />
+    </div>
+  `, isInline: true, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var(--a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-slider', standalone: true, imports: [], template: `
+    <div class="a2ui-slider-container">
+      <div class="a2ui-slider-header">
+        <span class="a2ui-slider-label">{{ label() }}</span>
+        <span class="a2ui-slider-value">{{ value() }}</span>
+      </div>
+      <input
+        type="range"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value() ?? min()"
+        (input)="handleInput($event)"
+        class="a2ui-slider"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var(--a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], dataContextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataContextPath", required: false }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Angular implementation of the A2UI DateTimeInput component (v0.9).
+ *
+ * Renders date and/or time input fields. Combines them into an ISO string
+ * for the bound data model property.
+ *
+ * Supported CSS variables:
+ * - `--a2ui-datetimeinput-background`: Controls the background of inputs.
+ * - `--a2ui-datetimeinput-color`: Controls the text color of inputs.
+ * - `--a2ui-datetimeinput-border`: Controls the border of inputs.
+ * - `--a2ui-datetimeinput-border-radius`: Controls the border radius of inputs.
+ * - `--a2ui-datetimeinput-padding`: Controls the padding of inputs.
+ * - `--a2ui-datetimeinput-label-font-size`: Controls the font size of the label.
+ * - `--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 */ []));
+    rawValue = computed$1(() => this.props()['value']?.value() || '', ...(ngDevMode ? [{ debugName: "rawValue" }] : /* istanbul ignore next */ []));
+    dateValue = computed$1(() => {
+        const val = this.rawValue();
+        if (!val)
+            return '';
+        return val.includes('T') ? val.split('T')[0] : val;
+    }, ...(ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []));
+    timeValue = computed$1(() => {
+        const val = this.rawValue();
+        if (!val || !val.includes('T'))
+            return '';
+        return val.split('T')[1].substring(0, 5);
+    }, ...(ngDevMode ? [{ debugName: "timeValue" }] : /* istanbul ignore next */ []));
+    handleDateChange(event) {
+        const date = event.target.value;
+        const current = this.rawValue();
+        if (this.enableTime()) {
+            const time = current.includes('T') ? current.split('T')[1] : '00:00:00';
+            this.props()['value']?.onUpdate(`${date}T${time}`);
+        }
+        else {
+            this.props()['value']?.onUpdate(date);
+        }
+    }
+    handleTimeChange(event) {
+        const time = event.target.value;
+        const current = this.rawValue();
+        const date = current.includes('T')
+            ? current.split('T')[0]
+            : current || new Date().toISOString().split('T')[0];
+        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: `
+    <div class="a2ui-date-time-container">
+      @if (label()) {
+        <label class="a2ui-date-time-label">
+          {{ label() }}
+        </label>
+      }
+      <div class="a2ui-date-time-inputs">
+        @if (enableDate()) {
+          <input
+            type="date"
+            [value]="dateValue()"
+            (change)="handleDateChange($event)"
+            class="a2ui-date-time-input"
+          />
+        }
+        @if (enableTime()) {
+          <input
+            type="time"
+            [value]="timeValue()"
+            (change)="handleTimeChange($event)"
+            class="a2ui-date-time-input"
+          />
+        }
+      </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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-v09-date-time-input', standalone: true, imports: [], template: `
+    <div class="a2ui-date-time-container">
+      @if (label()) {
+        <label class="a2ui-date-time-label">
+          {{ label() }}
+        </label>
+      }
+      <div class="a2ui-date-time-inputs">
+        @if (enableDate()) {
+          <input
+            type="date"
+            [value]="dateValue()"
+            (change)="handleDateChange($event)"
+            class="a2ui-date-time-input"
+          />
+        }
+        @if (enableTime()) {
+          <input
+            type="time"
+            [value]="timeValue()"
+            (change)="handleTimeChange($event)"
+            class="a2ui-date-time-input"
+          />
+        }
+      </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 }] }] } });
+
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * The set of default Angular implementations for each component in the basic catalog.
+ */
+const DEFAULT_COMPONENT_IMPLEMENTATIONS = {
+    text: { ...TextApi, component: TextComponent },
+    row: { ...RowApi, component: RowComponent },
+    column: { ...ColumnApi, component: ColumnComponent },
+    button: { ...ButtonApi, component: ButtonComponent },
+    textField: { ...TextFieldApi, component: TextFieldComponent },
+    image: { ...ImageApi, component: ImageComponent },
+    icon: { ...IconApi, component: IconComponent },
+    video: { ...VideoApi, component: VideoComponent },
+    audioPlayer: { ...AudioPlayerApi, component: AudioPlayerComponent },
+    list: { ...ListApi, component: ListComponent },
+    card: { ...CardApi, component: CardComponent },
+    tabs: { ...TabsApi, component: TabsComponent },
+    modal: { ...ModalApi, component: ModalComponent },
+    divider: { ...DividerApi, component: DividerComponent },
+    checkBox: { ...CheckBoxApi, component: CheckBoxComponent },
+    choicePicker: { ...ChoicePickerApi, component: ChoicePickerComponent },
+    slider: { ...SliderApi, component: SliderComponent },
+    dateTimeInput: { ...DateTimeInputApi, component: DateTimeInputComponent },
+};
+/**
+ * The set of Angular UI components provided by the basic catalog.
+ */
+const BASIC_COMPONENTS = Object.values(DEFAULT_COMPONENT_IMPLEMENTATIONS);
+/**
+ * A base class for basic catalogs, providing extensibility for non-DI use cases.
+ */
+class BasicCatalogBase extends AngularCatalog {
+    constructor(options = {}) {
+        const id = options.id ?? 'https://a2ui.org/specification/v0_9/basic_catalog.json';
+        const functions = options.functions ?? BASIC_FUNCTIONS;
+        const overrides = options.components ?? {};
+        const components = [
+            ...Object.entries(DEFAULT_COMPONENT_IMPLEMENTATIONS).map(([key, defaultValue]) => {
+                const impl = overrides[key] ?? defaultValue;
+                return { ...impl, name: impl.name || key };
+            }),
+            ...(options.extraComponents ?? []),
+        ];
+        super(id, components, functions);
+    }
+}
+/**
+ * A basic catalog of components and functions for v0.9 verification.
+ *
+ * This catalog includes a wide range of UI components (Text, Button, Row, etc.)
+ * and utility functions (capitalize, formatString) defined in the A2UI v0.9
+ * basic catalog specification.
+ */
+class BasicCatalog extends BasicCatalogBase {
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicCatalog, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Public API surface for A2UI Angular Renderer v0.9.
+ *
+ * This module provides the core services, components, and catalogs required
+ * to render A2UI surfaces using the v0.9 protocol.
+ *
+ * @module v0.9
+ */
+// Core Services and Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { A2UI_RENDERER_CONFIG, A2uiRendererService, AngularCatalog, AudioPlayerComponent, BASIC_COMPONENTS, BasicCatalog, BasicCatalogBase, ButtonComponent, CardComponent, CheckBoxComponent, ChoicePickerComponent, ColumnComponent, ComponentBinder, ComponentHostComponent, DateTimeInputComponent, DividerComponent, IconComponent, ImageComponent, ListComponent, ModalComponent, RowComponent, SliderComponent, SurfaceComponent, TabsComponent, TextComponent, TextFieldComponent, VideoComponent, getNormalizedPath, toAngularSignal };
+//# sourceMappingURL=a2ui-angular-src-v0_9.mjs.map