feat(ui): dispatch validation events from TextField

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

@@ -115,6 +115,18 @@ export class TextField extends Root {
             return;
           }
 
+      this.dispatchEvent(
+        new CustomEvent("a2ui-validation-input", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            componentId: this.id,
+            value: evt.target.value,
+            valid: evt.target.checkValidity(),
+          },
+        })
+      );
+
           this.#setBoundValue(evt.target.value);
         }}
         name="data"

samples/client/lit/component_gallery/component-gallery.ts

@@ -186,16 +186,40 @@ export class A2UIComponentGallery extends SignalWatcher(LitElement) {
 
   async connectedCallback() {
     super.connectedCallback();
+    this.addEventListener("a2ui-validation-input", this.#handleValidationInput);
     await this.#initiateSession();
   }
 
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("a2ui-validation-input", this.#handleValidationInput);
+  }
+
   async #initiateSession() {
     const message: v0_8.Types.A2UIClientEventMessage = {
       request: "START_GALLERY"
     };
     await this.#sendAndProcessMessage(message);
   }
 
+  // Debug Validation Events
+  #handleValidationInput = (e: Event) => {
+    const detail = (e as CustomEvent).detail;
+
+    // Log to Console
+    console.log(
+      `%c[Validation] Component: ${detail.componentId} | Valid: ${detail.valid} | Value: "${detail.value}"`,
+      detail.valid ? "color: green" : "color: red; font-weight: bold"
+    );
+
+    // Log to Debug Panel
+    this.#log(
+      "info",
+      `Validation: ${detail.componentId} is ${detail.valid ? "VALID" : "INVALID"}`,
+      detail
+    );
+  };
+
   render() {
     return html`
       <header>