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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2ui/angular",
-  "version": "0.9.0-alpha.0",
+  "version": "0.9.0-alpha.2",
   "license": "Apache-2.0",
   "homepage": "https://a2ui.org/",
   "repository": {
@@ -20,7 +20,7 @@
     "renderer"
   ],
   "dependencies": {
-    "@a2ui/web_core": "^0.9.1-alpha.0",
+    "@a2ui/web_core": "^0.9.1-alpha.2",
     "@preact/signals-core": "^1.13.0",
     "tslib": "^2.3.0",
     "zod": "^3.25.76"
@@ -29,7 +29,7 @@
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
-    "@a2ui/markdown-it": "file:../markdown/markdown-it"
+    "@a2ui/markdown-it": "^0.0.1"
   },
   "peerDependenciesMeta": {
     "@a2ui/markdown-it": {

package/types/a2ui-angular-src-v0_9.d.ts

@@ -311,12 +311,47 @@ declare class BasicCatalog extends BasicCatalogBase {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<BasicCatalog>;
 }
 
+/**
+ * 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.
+ */
+declare abstract class BasicCatalogComponent {
+    constructor();
+}
+
 /**
  * Angular implementation of the A2UI Text component (v0.9).
  *
  * Renders text with support for simple Markdown.
- */
-declare class TextComponent {
+ *
+ * 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`.
+ */
+declare class TextComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -343,8 +378,11 @@ declare class TextComponent {
  *
  * 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).
  */
-declare class RowComponent {
+declare class RowComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -376,8 +414,11 @@ declare class RowComponent {
  *
  * 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).
  */
-declare class ColumnComponent {
+declare class ColumnComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -409,8 +450,17 @@ declare class ColumnComponent {
  *
  * 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.
  */
-declare class ButtonComponent {
+declare class ButtonComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -438,8 +488,19 @@ declare class ButtonComponent {
  *
  * Renders a text input field with an optional label and placeholder.
  * Updates the bound data model property on every input change.
- */
-declare class TextFieldComponent {
+ *
+ * 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.
+ */
+declare class TextFieldComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -468,8 +529,16 @@ declare class TextFieldComponent {
  * 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.
  */
-declare class ImageComponent {
+declare class ImageComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -495,8 +564,14 @@ declare class ImageComponent {
  * 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).
  */
-declare class IconComponent {
+declare class IconComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -522,8 +597,11 @@ declare class IconComponent {
  * 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.
  */
-declare class VideoComponent {
+declare class VideoComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -545,8 +623,13 @@ declare class VideoComponent {
  * 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`.
  */
-declare class AudioPlayerComponent {
+declare class AudioPlayerComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -569,8 +652,12 @@ declare class AudioPlayerComponent {
  *
  * 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).
  */
-declare class ListComponent {
+declare class ListComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -596,8 +683,16 @@ declare class ListComponent {
  * 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.
  */
-declare class CardComponent {
+declare class CardComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -618,8 +713,16 @@ declare class CardComponent {
  *
  * 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.
  */
-declare class TabsComponent {
+declare class TabsComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -646,8 +749,15 @@ declare class TabsComponent {
  * 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.
  */
-declare class ModalComponent {
+declare class ModalComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -672,8 +782,12 @@ declare class ModalComponent {
  * 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.
  */
-declare class DividerComponent {
+declare class DividerComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -694,8 +808,19 @@ declare class DividerComponent {
  *
  * Renders a checkbox with a label. Updates the bound data model property
  * when the checked state changes.
- */
-declare class CheckBoxComponent {
+ *
+ * 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.
+ */
+declare class CheckBoxComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -719,8 +844,18 @@ declare class CheckBoxComponent {
  *
  * Renders a set of options as either radio buttons/checkboxes or chips.
  * Supports both single and multiple selection.
- */
-declare class ChoicePickerComponent {
+ *
+ * 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.
+ */
+declare class ChoicePickerComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -751,8 +886,15 @@ declare class ChoicePickerComponent {
  * 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.
  */
-declare class SliderComponent {
+declare class SliderComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *
@@ -782,8 +924,17 @@ declare class SliderComponent {
  *
  * 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.
  */
-declare class DateTimeInputComponent {
+declare class DateTimeInputComponent extends BasicCatalogComponent {
     /**
      * Reactive properties resolved from the A2UI {@link ComponentModel}.
      *