@a2ui/angular 0.9.0-alpha.0 → 0.9.0-alpha.2

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

@@ -3,7 +3,7 @@ import { InjectionToken, Inject, Injectable, signal, inject, DestroyRef, NgZone,
 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 { 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';
+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';
 
 /**
@@ -336,7 +336,7 @@ class ComponentHostComponent {
         });
     }
     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 } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ComponentHostComponent, isStandalone: true, selector: "a2ui-v09-component-host", inputs: { componentKey: { classPropertyName: "componentKey", publicName: "componentKey", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
     @if (componentType) {
       <ng-container
         *ngComponentOutlet="
@@ -357,6 +357,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{
                     selector: 'a2ui-v09-component-host',
                     imports: [NgComponentOutlet],
+                    host: {
+                        'style': 'display: contents;'
+                    },
                     template: `
     @if (componentType) {
       <ng-container
@@ -407,7 +410,7 @@ class SurfaceComponent {
      */
     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 } }, ngImport: i0, template: `
+    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()"
@@ -421,6 +424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     selector: 'a2ui-v09-surface',
                     standalone: true,
                     imports: [ComponentHostComponent],
+                    host: {
+                        'style': 'display: contents;'
+                    },
                     template: `
     <a2ui-v09-component-host
       [componentKey]="{ id: 'root', basePath: dataContextPath() }"
@@ -528,6 +534,32 @@ function provideMarkdownRenderer(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
  *
@@ -547,8 +579,19 @@ function provideMarkdownRenderer(renderFn) {
  * 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 {
+class TextComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -566,6 +609,7 @@ class TextComponent {
     resolvedText = signal('', ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
     renderRequestId = 0;
     constructor() {
+        super();
         effect$1(() => {
             const text = this.text();
             const variant = this.variant();
@@ -599,24 +643,57 @@ class TextComponent {
         });
     }
     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 } }, ngImport: i0, template: `
+    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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: `
+            args: [{ selector: 'a2ui-v09-text', standalone: true, template: `
     <span [class]="'a2ui-text ' + variant()" [innerHTML]="resolvedText()">
     </span>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+  `, 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
  *
@@ -637,8 +714,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class RowComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -651,8 +731,14 @@ class RowComponent {
     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(() => this.props()['justify']?.value(), ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
-    align = computed$1(() => this.props()['align']?.value(), ...(ngDevMode ? [{ debugName: "align" }] : /* 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 : [];
@@ -676,14 +762,8 @@ class RowComponent {
     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: [], 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 } }, ngImport: i0, template: `
-    <div
-      class="a2ui-row"
-      [style.justify-content]="justify()"
-      [style.align-items]="align()"
-      style="display: flex; flex-direction: row; width: 100%; gap: 4px;"
-    >
+    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
@@ -703,7 +783,6 @@ class RowComponent {
           </a2ui-v09-component-host>
         }
       }
-    </div>
   `, 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: [{
@@ -712,13 +791,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     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: `
-    <div
-      class="a2ui-row"
-      [style.justify-content]="justify()"
-      [style.align-items]="align()"
-      style="display: flex; flex-direction: row; width: 100%; gap: 4px;"
-    >
       @if (!isRepeating()) {
         @for (child of normalizedChildren(); track child.id) {
           <a2ui-v09-component-host
@@ -738,7 +818,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           </a2ui-v09-component-host>
         }
       }
-    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -764,8 +843,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class ColumnComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -778,8 +860,14 @@ class ColumnComponent {
     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(() => this.props()['justify']?.value(), ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
-    align = computed$1(() => this.props()['align']?.value(), ...(ngDevMode ? [{ debugName: "align" }] : /* 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 : [];
@@ -803,14 +891,8 @@ class ColumnComponent {
     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: [], 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 } }, ngImport: i0, template: `
-    <div
-      class="a2ui-column"
-      [style.justify-content]="justify()"
-      [style.align-items]="align()"
-      style="display: flex; flex-direction: column; width: 100%; gap: 4px;"
-    >
+    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
@@ -830,7 +912,6 @@ class ColumnComponent {
           </a2ui-v09-component-host>
         }
       }
-    </div>
   `, 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: [{
@@ -839,13 +920,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     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: `
-    <div
-      class="a2ui-column"
-      [style.justify-content]="justify()"
-      [style.align-items]="align()"
-      style="display: flex; flex-direction: column; width: 100%; gap: 4px;"
-    >
       @if (!isRepeating()) {
         @for (child of normalizedChildren(); track child.id) {
           <a2ui-v09-component-host
@@ -865,7 +948,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           </a2ui-v09-component-host>
         }
       }
-    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -891,8 +973,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class ButtonComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -921,8 +1012,8 @@ class ButtonComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], 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 } }, ngImport: i0, template: `
+    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()"
@@ -937,7 +1028,7 @@ class ButtonComponent {
         </a2ui-v09-component-host>
       }
     </button>
-  `, isInline: true, styles: [".a2ui-button{padding:8px 16px;border-radius:4px;border:1px solid #ccc;cursor:pointer}.a2ui-button.primary{background-color:#007bff;color:#fff;border-color:#0069d9}.a2ui-button.borderless{background:none;border:none;padding:0;color:#007bff}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-button{padding:var(--a2ui-button-padding, var(--a2ui-spacing-m, .5rem) var(--a2ui-spacing-l, 1rem));border-radius:var(--a2ui-button-border-radius, var(--a2ui-spacing-s, .25rem));border:var(--a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));cursor:pointer;margin:var(--a2ui-button-margin, var(--a2ui-spacing-m, .5rem));background:var(--a2ui-button-background, var(--a2ui-color-surface, #fff));box-shadow:var(--a2ui-button-box-shadow, none);font-weight:var(--a2ui-button-font-weight, normal);--_a2ui-text-margin: 0;--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);color:var(--_a2ui-text-color)}.a2ui-button.primary{background-color:var(--a2ui-color-primary, #17e);--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);color:var(--_a2ui-text-color);border-color:var(--a2ui-color-primary-hover, #0069d9)}.a2ui-button.borderless{background:none;border:none;padding:0;color:var(--a2ui-color-primary, #17e)}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -956,7 +1047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </a2ui-v09-component-host>
       }
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-button{padding:8px 16px;border-radius:4px;border:1px solid #ccc;cursor:pointer}.a2ui-button.primary{background-color:#007bff;color:#fff;border-color:#0069d9}.a2ui-button.borderless{background:none;border:none;padding:0;color:#007bff}.a2ui-button:disabled{background-color:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-button{padding:var(--a2ui-button-padding, var(--a2ui-spacing-m, .5rem) var(--a2ui-spacing-l, 1rem));border-radius:var(--a2ui-button-border-radius, var(--a2ui-spacing-s, .25rem));border:var(--a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));cursor:pointer;margin:var(--a2ui-button-margin, var(--a2ui-spacing-m, .5rem));background:var(--a2ui-button-background, var(--a2ui-color-surface, #fff));box-shadow:var(--a2ui-button-box-shadow, none);font-weight:var(--a2ui-button-font-weight, normal);--_a2ui-text-margin: 0;--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);color:var(--_a2ui-text-color)}.a2ui-button.primary{background-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 }] }] } });
 
 /**
@@ -979,8 +1070,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class TextFieldComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1015,8 +1117,8 @@ class TextFieldComponent {
         // notified.
         this.props()['value']?.onUpdate(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextFieldComponent, deps: [], 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 } }, ngImport: i0, template: `
+    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>
@@ -1032,7 +1134,7 @@ class TextFieldComponent {
         <div class="a2ui-error-message">{{ message }}</div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;flex:1;width:100%}.a2ui-text-field-container{display:flex;flex-direction:column;gap:4px;margin:4px}input{padding:8px;border:1px solid #ccc;border-radius:4px}input.invalid{border-color:red}.a2ui-error-message{color:red;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-text-field-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-spacing-xs, 4px)}label{font-size:var(--a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-textfield-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}input{padding:var(--a2ui-textfield-padding, 8px);border:var(--a2ui-textfield-border, 1px solid var(--a2ui-color-border, #ccc));border-radius:var(--a2ui-textfield-border-radius, 4px);background-color:var(--a2ui-color-input, #fff);color:var(--a2ui-color-on-input, #333)}input:focus{border-color:var(--a2ui-textfield-color-border-focus, var(--a2ui-color-primary, #17e));outline:none}input.invalid{border-color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red))}.a2ui-error-message{color:var(--a2ui-textfield-color-error, var(--a2ui-color-error, red));font-size:var(--a2ui-font-size-xs, 12px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
@@ -1052,7 +1154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <div class="a2ui-error-message">{{ message }}</div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;flex:1;width:100%}.a2ui-text-field-container{display:flex;flex-direction:column;gap:4px;margin:4px}input{padding:8px;border:1px solid #ccc;border-radius:4px}input.invalid{border-color:red}.a2ui-error-message{color:red;font-size:12px}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1074,8 +1176,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class ImageComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1093,15 +1203,15 @@ class ImageComponent {
     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: [], 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 } }, ngImport: i0, template: `
+    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:8px}.a2ui-image.icon{width:24px;height:24px}.a2ui-image.avatar{width:40px;height:40px;border-radius:50%}.a2ui-image.smallFeature{width:100px;height:100px}.a2ui-image.mediumFeature{max-width:300px;height:auto}.a2ui-image.largeFeature{width:100%;max-height:400px}.a2ui-image.header{width:100%;height:200px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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,
@@ -1112,7 +1222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [style.object-fit]="fit()"
       [class]="'a2ui-image ' + variant()"
     />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-image{display:block;max-width:100%;height:auto}.a2ui-image.circle{border-radius:50%;aspect-ratio:1 / 1}.a2ui-image.rounded{border-radius:8px}.a2ui-image.icon{width:24px;height:24px}.a2ui-image.avatar{width:40px;height:40px;border-radius:50%}.a2ui-image.smallFeature{width:100px;height:100px}.a2ui-image.mediumFeature{max-width:300px;height:auto}.a2ui-image.largeFeature{width:100%;max-height:400px}.a2ui-image.header{width:100%;height:200px}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1134,8 +1244,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class IconComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1165,8 +1281,8 @@ class IconComponent {
         // 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: [], 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 } }, ngImport: i0, template: `
+    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>
@@ -1176,7 +1292,7 @@ class IconComponent {
         {{ iconName() }}
       </i>
     }
-  `, isInline: true, styles: [".a2ui-icon{display:inline-block;width:24px;height:24px;font-size:24px;font-family:Material Icons;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-icon{display:inline-block;width:var(--a2ui-icon-size, 24px);height:var(--a2ui-icon-size, 24px);font-size:var(--a2ui-icon-size, 24px);font-family:var(--a2ui-icon-font-family, \"Material Icons\");color:var(--a2ui-icon-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333)));font-variation-settings:var(--a2ui-icon-font-variation-settings, \"FILL\" 1);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";vertical-align:middle}.a2ui-icon.svg{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
@@ -1190,7 +1306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         {{ iconName() }}
       </i>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-icon{display:inline-block;width:24px;height:24px;font-size:24px;font-family:Material Icons;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: 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 }] }] } });
 
 /**
@@ -1212,8 +1328,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class VideoComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1227,8 +1346,8 @@ class VideoComponent {
     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: [], 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 } }, ngImport: i0, template: `
+    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"
@@ -1239,7 +1358,7 @@ class VideoComponent {
         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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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,
@@ -1254,7 +1373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         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}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1276,8 +1395,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class AudioPlayerComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1291,8 +1415,8 @@ class AudioPlayerComponent {
     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: [], 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 } }, ngImport: i0, template: `
+    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">
@@ -1303,7 +1427,7 @@ class AudioPlayerComponent {
         Your browser does not support the audio tag.
       </audio>
     </div>
-  `, isInline: true, styles: [".a2ui-audio-player{display:flex;flex-direction:column;gap:8px;width:100%}.a2ui-audio-description{font-size:14px;color:#666}.a2ui-audio{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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,
@@ -1318,7 +1442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         Your browser does not support the audio tag.
       </audio>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-audio-player{display:flex;flex-direction:column;gap:8px;width:100%}.a2ui-audio-description{font-size:14px;color:#666}.a2ui-audio{width:100%}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1341,8 +1465,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class ListComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1375,8 +1503,8 @@ class ListComponent {
             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: [], 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 } }, ngImport: i0, template: `
+    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()">
@@ -1418,7 +1546,7 @@ class ListComponent {
         </div>
       }
     }
-  `, isInline: true, styles: [".a2ui-list{display:flex;padding-inline-start:24px;margin:0}.a2ui-list.vertical{flex-direction:column;gap:8px}.a2ui-list.horizontal{flex-direction:row;gap: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 });
+  `, 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,
@@ -1464,7 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </div>
       }
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-list{display:flex;padding-inline-start:24px;margin:0}.a2ui-list.vertical{flex-direction:column;gap:8px}.a2ui-list.horizontal{flex-direction:row;gap:16px;list-style-position:inside}.a2ui-list-item-none{display:block}.horizontal .a2ui-list-item-none{display:inline-block}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1486,8 +1614,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class CardComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1499,8 +1635,8 @@ class CardComponent {
     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: [], 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 } }, ngImport: i0, template: `
+    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
@@ -1510,7 +1646,7 @@ class CardComponent {
         </a2ui-v09-component-host>
       }
     </div>
-  `, isInline: true, styles: [".a2ui-card{padding:16px;border-radius:8px;box-shadow:0 4px 6px #0000001a;background-color:#fff;border:1px solid #eee}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-card{padding:var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));border-radius:var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));box-shadow:var(--a2ui-card-box-shadow, 0 2px 4px rgba(0,0,0,.1));background-color:var(--a2ui-card-background, var(--a2ui-color-surface, #fff));border:var(--a2ui-card-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));margin:var(--a2ui-card-margin, var(--a2ui-spacing-m, 16px))}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -1524,7 +1660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </a2ui-v09-component-host>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-card{padding:16px;border-radius:8px;box-shadow:0 4px 6px #0000001a;background-color:#fff;border:1px solid #eee}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-card{padding:var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));border-radius:var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));box-shadow:var(--a2ui-card-box-shadow, 0 2px 4px rgba(0,0,0,.1));background-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 }] }] } });
 
 /**
@@ -1547,8 +1683,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class TabsComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1574,8 +1718,8 @@ class TabsComponent {
     setActiveTab(index) {
         this.activeTabIndex.set(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabsComponent, deps: [], 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 } }, ngImport: i0, template: `
+    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) {
@@ -1598,7 +1742,7 @@ class TabsComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".a2ui-tabs{display:flex;flex-direction:column;width:100%}.a2ui-tab-bar{display:flex;border-bottom:2px solid #eee;gap:16px}.a2ui-tab-button{padding:8px 16px;border:none;background:none;cursor:pointer;font-weight:500;color:#666;border-bottom:2px solid transparent;margin-bottom:-2px}.a2ui-tab-button.active{color:#007bff;border-bottom:2px solid #007bff}.a2ui-tab-content{padding:16px 0}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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,
@@ -1625,7 +1769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-tabs{display:flex;flex-direction:column;width:100%}.a2ui-tab-bar{display:flex;border-bottom:2px solid #eee;gap:16px}.a2ui-tab-button{padding:8px 16px;border:none;background:none;cursor:pointer;font-weight:500;color:#666;border-bottom:2px solid transparent;margin-bottom:-2px}.a2ui-tab-button.active{color:#007bff;border-bottom:2px solid #007bff}.a2ui-tab-content{padding:16px 0}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1647,8 +1791,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class ModalComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1669,8 +1820,8 @@ class ModalComponent {
     closeModal() {
         this.isOpen.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ModalComponent, deps: [], 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 } }, ngImport: i0, template: `
+    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()) {
@@ -1697,7 +1848,7 @@ class ModalComponent {
         </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:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.a2ui-modal-content{background:#fff;padding:32px;border-radius:8px;position:relative;min-width:300px;max-width:80%;max-height:80%;overflow-y:auto;box-shadow:0 10px 25px #0003}.a2ui-modal-close{position:absolute;top:10px;right:15px;border:none;background:none;font-size:24px;cursor:pointer;color:#999}.a2ui-modal-close:hover{color:#333}\n"], dependencies: [{ kind: "component", type: ComponentHostComponent, selector: "a2ui-v09-component-host", inputs: ["componentKey", "surfaceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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,
@@ -1728,7 +1879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </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:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.a2ui-modal-content{background:#fff;padding:32px;border-radius:8px;position:relative;min-width:300px;max-width:80%;max-height:80%;overflow-y:auto;box-shadow:0 10px 25px #0003}.a2ui-modal-close{position:absolute;top:10px;right:15px;border:none;background:none;font-size:24px;cursor:pointer;color:#999}.a2ui-modal-close:hover{color:#333}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1750,8 +1901,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class DividerComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1763,24 +1918,27 @@ class DividerComponent {
     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: [], 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 } }, ngImport: i0, template: `
+    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:1px solid #eee;margin:16px 0;width:100%}.a2ui-divider.vertical{width:1px;height:100%;margin:0 16px;border-top:0;border-left:1px solid #eee}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-divider{border:0;border-top:var(--a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));margin:var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px)) 0;width:100%}.a2ui-divider.vertical{width:var(--a2ui-border-width, 1px);height:100%;margin:0 var(--a2ui-divider-spacing, var(--a2ui-spacing-m, 16px));border-top:0;border-left:var(--a2ui-divider-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a2ui-v09-divider', standalone: true, imports: [], template: `
+            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:1px solid #eee;margin:16px 0;width:100%}.a2ui-divider.vertical{width:1px;height:100%;margin:0 16px;border-top:0;border-left:1px solid #eee}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -1803,8 +1961,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class CheckBoxComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1822,8 +1991,8 @@ class CheckBoxComponent {
         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: [], 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 } }, ngImport: i0, template: `
+    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"
@@ -1833,7 +2002,7 @@ class CheckBoxComponent {
       />
       <span class="a2ui-check-box-text">{{ label() }}</span>
     </label>
-  `, isInline: true, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}.a2ui-check-box-input{width:18px;height:18px;cursor:pointer}.a2ui-check-box-text{font-size:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, .5rem));cursor:pointer;padding:4px 0;margin:var(--a2ui-checkbox-margin, var(--a2ui-spacing-m, 16px));color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-check-box-input{width:var(--a2ui-checkbox-size, 1rem);height:var(--a2ui-checkbox-size, 1rem);cursor:pointer;background:var(--a2ui-checkbox-background, inherit);border:var(--a2ui-checkbox-border, var(--a2ui-border-width, 1px) solid #ccc);border-radius:var(--a2ui-checkbox-border-radius, 4px)}.a2ui-check-box-text{font-size:var(--a2ui-checkbox-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 16px)));font-weight:var(--a2ui-checkbox-label-font-weight, bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -1847,7 +2016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       />
       <span class="a2ui-check-box-text">{{ label() }}</span>
     </label>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}.a2ui-check-box-input{width:18px;height:18px;cursor:pointer}.a2ui-check-box-text{font-size:16px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-check-box-label{display:flex;align-items:center;gap:var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, .5rem));cursor:pointer;padding:4px 0;margin:var(--a2ui-checkbox-margin, var(--a2ui-spacing-m, 16px));color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-check-box-input{width:var(--a2ui-checkbox-size, 1rem);height:var(--a2ui-checkbox-size, 1rem);cursor:pointer;background:var(--a2ui-checkbox-background, inherit);border:var(--a2ui-checkbox-border, var(--a2ui-border-width, 1px) solid #ccc);border-radius:var(--a2ui-checkbox-border-radius, 4px)}.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 }] }] } });
 
 /**
@@ -1870,8 +2039,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class ChoicePickerComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -1926,8 +2105,8 @@ class ChoicePickerComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChoicePickerComponent, deps: [], 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 } }, ngImport: i0, template: `
+    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') {
@@ -1961,7 +2140,7 @@ class ChoicePickerComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".a2ui-choice-picker{width:100%}.a2ui-options-group{display:flex;flex-direction:column;gap:8px}.a2ui-option-label{display:flex;align-items:center;gap:8px;cursor:pointer}.a2ui-option-input{width:18px;height:18px}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:8px}.a2ui-chip{padding:4px 12px;border-radius:16px;border:1px solid #ccc;background:#fff;cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:#007bff;color:#fff;border-color:#007bff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-choice-picker{width:100%;padding:var(--a2ui-choicepicker-padding, 0)}.a2ui-options-group{display:flex;flex-direction:column;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-option-label{display:flex;align-items:center;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem));cursor:pointer;color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-option-input{width:var(--a2ui-choicepicker-checkbox-size, 1rem);height:var(--a2ui-choicepicker-checkbox-size, 1rem)}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, .25rem))}.a2ui-chip{padding:var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, .5rem) var(--a2ui-spacing-m, 1rem));border-radius:var(--a2ui-choicepicker-chip-border-radius, 100px);border:var(--a2ui-choicepicker-chip-border, 1px solid var(--a2ui-color-border, #ccc));background:var(--a2ui-choicepicker-chip-background, var(--a2ui-color-surface, #fff));cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e));color:var(--a2ui-color-on-primary, #fff);border-color:var(--a2ui-choicepicker-chip-background-selected, var(--a2ui-color-primary, #17e))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChoicePickerComponent, decorators: [{
             type: Component,
@@ -1999,7 +2178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-choice-picker{width:100%}.a2ui-options-group{display:flex;flex-direction:column;gap:8px}.a2ui-option-label{display:flex;align-items:center;gap:8px;cursor:pointer}.a2ui-option-input{width:18px;height:18px}.a2ui-chips-group{display:flex;flex-wrap:wrap;gap:8px}.a2ui-chip{padding:4px 12px;border-radius:16px;border:1px solid #ccc;background:#fff;cursor:pointer;transition:all .2s}.a2ui-chip.active{background-color:#007bff;color:#fff;border-color:#007bff}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -2021,8 +2200,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * 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 {
+class SliderComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -2046,8 +2232,8 @@ class SliderComponent {
         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: [], 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 } }, ngImport: i0, template: `
+    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>
@@ -2063,7 +2249,7 @@ class SliderComponent {
         class="a2ui-slider"
       />
     </div>
-  `, isInline: true, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:4px}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:14px}.a2ui-slider{width:100%;cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);margin:var(--a2ui-slider-margin, var(--a2ui-spacing-m, 16px))}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:var(--a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-slider-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-slider{width:100%;cursor:pointer;accent-color:var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));background:var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -2083,7 +2269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         class="a2ui-slider"
       />
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-slider-container{width:100%;display:flex;flex-direction:column;gap:4px}.a2ui-slider-header{display:flex;justify-content:space-between;font-size:14px}.a2ui-slider{width:100%;cursor:pointer}\n"] }]
+  `, 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 }] }] } });
 
 /**
@@ -2106,8 +2292,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * 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 {
+class DateTimeInputComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -2156,8 +2351,8 @@ class DateTimeInputComponent {
             : 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: [], 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 } }, ngImport: i0, template: `
+    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">
@@ -2183,7 +2378,7 @@ class DateTimeInputComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:4px;width:100%}.a2ui-date-time-label{font-size:14px;color:#666}.a2ui-date-time-inputs{display:flex;gap:8px;width:100%}.a2ui-date-time-input{padding:8px;border-radius:4px;border:1px solid #ccc;font-family:inherit;flex:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:var(--a2ui-spacing-xs, 4px);width:100%}.a2ui-date-time-label{font-size:var(--a2ui-datetimeinput-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s, 14px)));font-weight:var(--a2ui-datetimeinput-label-font-weight, bold);color:var(--a2ui-text-color-text, var(--a2ui-color-on-background, #333))}.a2ui-date-time-inputs{display:flex;gap:var(--a2ui-spacing-s, 8px);width:100%}.a2ui-date-time-input{padding:var(--a2ui-datetimeinput-padding, 8px);border-radius:var(--a2ui-datetimeinput-border-radius, 4px);border:var(--a2ui-datetimeinput-border, 1px solid var(--a2ui-color-border, #ccc));background-color:var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff));color:var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333));font-family:inherit;flex:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
@@ -2213,7 +2408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".a2ui-date-time-container{display:flex;flex-direction:column;gap:4px;width:100%}.a2ui-date-time-label{font-size:14px;color:#666}.a2ui-date-time-inputs{display:flex;gap:8px;width:100%}.a2ui-date-time-input{padding:8px;border-radius:4px;border:1px solid #ccc;font-family:inherit;flex:1}\n"] }]
+  `, 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 }] }] } });
 
 /**