feat(ui): dispatch validation events from TextField

renderers/lit/src/0.8/core.ts

@@ -22,8 +22,8 @@ import * as Styles from "@a2ui/web_core/styles/index";
 import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
 import * as Primitives from "@a2ui/web_core/types/primitives";
 import { create as createSignalA2uiMessageProcessor } from "./data/signal-model-processor.js";
-
-export { Types, Guards, Schemas, Styles, A2uiMessageProcessor, Primitives };
+import { Events as WebEvents } from "@a2ui/web_core";
+export { Types, Guards, Schemas, Styles, A2uiMessageProcessor, Primitives, WebEvents };
 
 export const Data = {
   createSignalA2uiMessageProcessor,

renderers/lit/src/0.8/ui/text-field.ts

@@ -20,6 +20,7 @@ import { Root } from "./root.js";
 import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
 import * as Primitives from "@a2ui/web_core/types/primitives";
 import * as Types from "@a2ui/web_core/types/types";
+import { Events } from "@a2ui/web_core";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { extractStringValue } from "./utils/utils.js";
@@ -115,6 +116,14 @@ export class TextField extends Root {
             return;
           }
 
+      this.dispatchEvent(
+        new Events.A2UIValidationEvent({
+          componentId: this.id,
+          value: evt.target.value,
+          valid: evt.target.checkValidity(),
+            })
+      );
+
           this.#setBoundValue(evt.target.value);
         }}
         name="data"

renderers/web_core/src/v0_8/events/base.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2025 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
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * A base interface for event details.
+ * All A2UI event payloads should extend this to ensure they have an eventType property
+ * that matches the event name.
+ */
+export interface BaseEventDetail<EventType extends string> {
+  readonly eventType: EventType;
+}

renderers/web_core/src/v0_8/events/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2025 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
+ *
+ *      https://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.
+ */
+
+export * from "./base.js";
+export * from "./validation-event.js";

renderers/web_core/src/v0_8/events/validation-event.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright 2025 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
+ *
+ *      https://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.
+ */
+
+import { BaseEventDetail } from "./base.js";
+
+/**
+ * Detailed payload for the `a2ui-validation-input` event.
+ */
+export interface ValidationEventDetail
+  extends BaseEventDetail<"a2ui-validation-input"> {
+  /**
+   * The ID of the component that is being validated.
+   */
+  readonly componentId: string;
+
+  /**
+   * The current value of the input component.
+   */
+  readonly value: string;
+
+  /**
+   * Whether the current value matches the validation constraints.
+   */
+  readonly valid: boolean;
+}
+
+/**
+ * Event dispatched when an input component's validation state is updated.
+ */
+export class A2UIValidationEvent extends CustomEvent<ValidationEventDetail> {
+  static readonly EVENT_NAME = "a2ui-validation-input";
+
+  constructor(
+    detail: Omit<ValidationEventDetail, "eventType">,
+    eventInitDict?: EventInit
+  ) {
+    super(A2UIValidationEvent.EVENT_NAME, {
+      bubbles: true,
+      composed: true,
+      ...eventInitDict,
+      detail: {
+        ...detail,
+        eventType: A2UIValidationEvent.EVENT_NAME,
+      },
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    "a2ui-validation-input": A2UIValidationEvent;
+  }
+}

renderers/web_core/src/v0_8/index.ts

@@ -4,6 +4,7 @@ export * from "./types/primitives.js";
 export * from "./types/types.js";
 export * from "./types/colors.js";
 export * from "./styles/index.js";
+export * as Events from "./events/index.js";
 import A2UIClientEventMessage from "./schemas/server_to_client_with_standard_catalog.json" with { type: "json" };
 
 export const Schemas = {