@vaadin/field-highlighter 25.3.0-alpha12 → 25.3.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "25.3.0-alpha12",
+  "version": "25.3.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -32,33 +32,33 @@
     "field"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.3.0-alpha12",
-    "@vaadin/component-base": "25.3.0-alpha12",
-    "@vaadin/overlay": "25.3.0-alpha12",
-    "@vaadin/popover": "25.3.0-alpha12",
-    "@vaadin/tooltip": "25.3.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha12",
+    "@vaadin/a11y-base": "25.3.0-alpha13",
+    "@vaadin/component-base": "25.3.0-alpha13",
+    "@vaadin/overlay": "25.3.0-alpha13",
+    "@vaadin/popover": "25.3.0-alpha13",
+    "@vaadin/tooltip": "25.3.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha13",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha12",
-    "@vaadin/chai-plugins": "25.3.0-alpha12",
-    "@vaadin/checkbox": "25.3.0-alpha12",
-    "@vaadin/checkbox-group": "25.3.0-alpha12",
-    "@vaadin/custom-field": "25.3.0-alpha12",
-    "@vaadin/date-picker": "25.3.0-alpha12",
-    "@vaadin/date-time-picker": "25.3.0-alpha12",
-    "@vaadin/item": "25.3.0-alpha12",
-    "@vaadin/list-box": "25.3.0-alpha12",
-    "@vaadin/radio-group": "25.3.0-alpha12",
-    "@vaadin/select": "25.3.0-alpha12",
-    "@vaadin/test-runner-commands": "25.3.0-alpha12",
+    "@vaadin/aura": "25.3.0-alpha13",
+    "@vaadin/chai-plugins": "25.3.0-alpha13",
+    "@vaadin/checkbox": "25.3.0-alpha13",
+    "@vaadin/checkbox-group": "25.3.0-alpha13",
+    "@vaadin/custom-field": "25.3.0-alpha13",
+    "@vaadin/date-picker": "25.3.0-alpha13",
+    "@vaadin/date-time-picker": "25.3.0-alpha13",
+    "@vaadin/item": "25.3.0-alpha13",
+    "@vaadin/list-box": "25.3.0-alpha13",
+    "@vaadin/radio-group": "25.3.0-alpha13",
+    "@vaadin/select": "25.3.0-alpha13",
+    "@vaadin/test-runner-commands": "25.3.0-alpha13",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/text-area": "25.3.0-alpha12",
-    "@vaadin/text-field": "25.3.0-alpha12",
-    "@vaadin/time-picker": "25.3.0-alpha12",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha12",
+    "@vaadin/text-area": "25.3.0-alpha13",
+    "@vaadin/text-field": "25.3.0-alpha13",
+    "@vaadin/time-picker": "25.3.0-alpha13",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha13",
     "sinon": "^22.0.0"
   },
-  "gitHead": "0f0337783efe38332f5dc6a8968f207d2982de4b"
+  "gitHead": "e23e44d29e6bc1e47245d5e2cc0e4b022ec61818"
 }

package/src/vaadin-ai-field-marker.d.ts

@@ -62,6 +62,10 @@ export type AiFieldRevertEvent = CustomEvent<{ value: unknown }>;
  * in progress, set the `working` property to show an "AI is working" shimmer
  * on the field along with a client-side read-only guard.
  *
+ * The popover can show custom content — such as a summary of what the AI
+ * based the value on — below the explanation, given as a DOM node through
+ * the `content` property.
+ *
  * Set the `confidence` property to show the confidence level of the filled
  * value (`low`, `medium` or `high`) as an indicator in the field's helper
  * text section, ahead of a helper the field itself may have. While the
@@ -122,6 +126,23 @@ declare class AiFieldMarker extends I18nMixin<typeof HTMLElement, AiFieldMarkerI
    */
   i18n: AiFieldMarkerI18n;
 
+  /**
+   * A DOM node to show in the popover, between the message and the revert
+   * control — for example a summary of what the AI based the value on.
+   *
+   * The node is rendered as given, and moved into the marker's own light DOM.
+   * The host owns it: setting the property to another node or to `null`
+   * removes the previous node from the popover.
+   *
+   * ```js
+   * const source = document.createElement('a');
+   * source.href = '/documents/invoice.pdf';
+   * source.textContent = 'invoice.pdf';
+   * marker.content = source;
+   * ```
+   */
+  content: Node | null | undefined;
+
   /**
    * Whether an AI is currently working on the field. While `true`, the field
    * shows an "AI is working" shimmer and is made read-only on the client so

package/src/vaadin-ai-field-marker.js

@@ -222,6 +222,10 @@ class DelayedFieldValue {
  * annotates is about to be replaced; setting `working` back to `false`
  * brings it back, so a cancelled or failed fill leaves the mark intact.
  *
+ * The popover can show custom content — such as a summary of what the AI
+ * based the value on — below the explanation, given as a DOM node through
+ * the `content` property.
+ *
  * The pieces that construct the marker — the badge, its tooltip and the
  * popover with the explanation and the revert control — are rendered
  * directly into the marker's light DOM, so that document-level themes
@@ -273,6 +277,25 @@ class AiFieldMarker extends SlotStylesMixin(I18nMixin(DirMixin(PolylitMixin(LitE
 
   static get properties() {
     return {
+      /**
+       * A DOM node to show in the popover, between the message and the revert
+       * control — for example a summary of what the AI based the value on.
+       *
+       * The node is rendered as given, and moved into the marker's own light
+       * DOM. The host owns it: setting the property to another node or to
+       * `null` removes the previous node from the popover.
+       *
+       * ```js
+       * const source = document.createElement('a');
+       * source.href = '/documents/invoice.pdf';
+       * source.textContent = 'invoice.pdf';
+       * marker.content = source;
+       * ```
+       */
+      content: {
+        type: Object,
+      },
+
       /**
        * Whether an AI is currently working on the field. While `true`, the
        * field shows an "AI is working" shimmer and is made read-only on the
@@ -590,6 +613,7 @@ class AiFieldMarker extends SlotStylesMixin(I18nMixin(DirMixin(PolylitMixin(LitE
       <vaadin-tooltip for="${this.#badgeId}" text="${badgeTooltip}"></vaadin-tooltip>
       <vaadin-popover for="${this.#badgeId}" aria-label="${badgeLabel}" autofocus theme="arrow" position="end-top">
         <p class="message">${message}</p>
+        ${this.content ?? nothing}
         <div class="actions">
           <button type="button" tabindex="0" @click="${this.#onRevert}">${revert}</button>
         </div>