@adia-ai/web-components 0.4.6 → 0.4.8

package/components/action-list/class.js

@@ -0,0 +1,156 @@
+/**
+ * Non-side-effect class export for `<action-list-ui>` (+ co-located primitives).
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/action-list`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <action-list-ui>
+ *   <action-item-ui icon="plus"     text="New Project" value="new"></action-item-ui>
+ *   <action-item-ui icon="users"    text="Invite Team" value="invite"></action-item-ui>
+ *   <action-item-ui icon="download" text="Export Data" value="export"></action-item-ui>
+ * </action-list-ui>
+ *
+ * Inline (non-dropdown) list of command actions. Think of it as a menu that
+ * stays open — useful for quick-actions cards, settings rails, sidebar shortcuts.
+ *
+ * Differs from <menu-ui> (which renders in a popover) and <list-ui> (which is
+ * passive — no hover/click semantics).
+ *
+ * Fires `action` CustomEvent with { value, text, item } when an item is clicked
+ * or activated via keyboard (Enter / Space). Keyboard nav: ArrowUp/Down, Home/End.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIActionList extends UIElement {
+  static properties = {};
+  static template = () => null;
+
+  #bound = false;
+
+  connected() {
+    this.setAttribute('role', 'list');
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKey);
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#bound = false;
+  }
+
+  #items() {
+    return Array.from(this.querySelectorAll(':scope > action-item-ui:not([disabled])'));
+  }
+
+  #onClick = (e) => {
+    const item = e.target.closest('action-item-ui');
+    if (!item || item.hasAttribute('disabled')) return;
+    if (!this.contains(item)) return;
+    this.dispatchEvent(new CustomEvent('action', {
+      bubbles: true,
+      detail: { value: item.getAttribute('value') || '', text: item.getAttribute('text') || item.textContent.trim(), item },
+    }));
+  };
+
+  #onKey = (e) => {
+    const items = this.#items();
+    if (!items.length) return;
+    const active = document.activeElement?.closest?.('action-item-ui');
+    const i = active ? items.indexOf(active) : -1;
+    const focus = (idx) => {
+      const next = items[(idx + items.length) % items.length];
+      next?.focus?.({ preventScroll: true });
+    };
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); focus(i + 1); break;
+      case 'ArrowUp':   e.preventDefault(); focus(i - 1); break;
+      case 'Home':      e.preventDefault(); focus(0); break;
+      case 'End':       e.preventDefault(); focus(items.length - 1); break;
+      case 'Enter':
+      case ' ': {
+        if (active) { e.preventDefault(); active.click(); }
+        break;
+      }
+    }
+  };
+}
+
+export class UIActionItem extends UIElement {
+  static properties = {
+    icon:     { type: String,  default: '', reflect: true },
+    text:     { type: String,  default: '', reflect: true },
+    value:    { type: String,  default: '', reflect: true },
+    variant:  { type: String,  default: 'default', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'listitem');
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
+    this.#stamp();
+    this.#syncAria();
+  }
+
+  #stamp() {
+    if (this.querySelector('[slot="text"]')) return;
+
+    if (this.icon) {
+      const iconEl = document.createElement('icon-ui');
+      iconEl.setAttribute('slot', 'icon');
+      iconEl.setAttribute('name', this.icon);
+      this.appendChild(iconEl);
+    }
+
+    if (this.text) {
+      const span = document.createElement('span');
+      span.setAttribute('slot', 'text');
+      span.textContent = this.text;
+      this.appendChild(span);
+    }
+  }
+
+  #syncAria() {
+    if (this.disabled) {
+      this.setAttribute('aria-disabled', 'true');
+      this.setAttribute('tabindex', '-1');
+    } else {
+      this.removeAttribute('aria-disabled');
+      this.setAttribute('tabindex', '0');
+    }
+  }
+
+  render() {
+    const iconEl = this.querySelector('[slot="icon"]');
+    if (this.icon) {
+      if (iconEl) iconEl.setAttribute('name', this.icon);
+      else {
+        const el = document.createElement('icon-ui');
+        el.setAttribute('slot', 'icon');
+        el.setAttribute('name', this.icon);
+        this.prepend(el);
+      }
+    } else if (iconEl) {
+      iconEl.remove();
+    }
+
+    const textEl = this.querySelector('[slot="text"]');
+    if (textEl) textEl.textContent = this.text;
+
+    this.#syncAria();
+  }
+}

package/components/agent-artifact/agent-artifact.a2ui.json

@@ -49,6 +49,10 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "icon-ui",
+      "badge-ui"
+    ],
     "events": {
       "artifact-toggle": {
         "description": "Fired on artifact-toggle."

package/components/agent-artifact/agent-artifact.d.ts

@@ -0,0 +1,35 @@
+/**
+ * `<agent-artifact-ui>` — Inline container for structured agent artifacts (A2UI, JSON, tickets).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/agent-artifact
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type AgentArtifactArtifactToggleEvent = CustomEvent<unknown>;
+
+export class UIAgentArtifact extends UIElement {
+  /** Header title. */
+  title: string;
+  /** Start collapsed. */
+  collapsed: boolean;
+  /** icon-ui name in header. */
+  icon: string;
+  /** Badge label; value is normalized to uppercase before rendering. */
+  kind: string;
+  /** neutral | accent | warning | danger */
+  tone: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentArtifact, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'artifact-toggle', listener: (ev: AgentArtifactArtifactToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/agent-artifact/agent-artifact.js

@@ -1,190 +1,17 @@
 /**
- * <agent-artifact-ui> — Inline container for a structured agent artifact.
+ * `<agent-artifact-ui>` — auto-registers the tag on import.
  *
- * Wraps an artifact (A2UI UI, JSON blob, ticket, code, etc.) with a compact
- * header showing a title + icon + optional kind badge, and two action slots:
- * "primary" (e.g. "Open in canvas") and "secondary" (e.g. "Download"). The
- * artifact body goes in the default slot.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * The host can attach any node (code-ui, canvas-ui, div, etc.) as the body.
+ *   import { UIAgentArtifact } from '@adia-ai/web-components/components/agent-artifact/class';
  *
- * Usage:
- *   <agent-artifact-ui title="product-card" kind="A2UI" icon="layout">
- *     <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple"></button-ui>
- *     <button-ui slot="secondary" text="Copy" icon="copy"></button-ui>
- *     <code-ui language="json">{…}</code-ui>
- *   </agent-artifact-ui>
- *
- * Attributes:
- *   title       — header title (string)
- *   kind        — small badge, e.g. "A2UI", "JSON", "TICKET" (value is
- *                 normalized to uppercase before rendering)
- *   icon        — icon-ui name for the header
- *   collapsed   — start collapsed (body hidden)
- *   tone        — neutral (default) | accent | warning | danger
- *
- * Events:
- *   artifact-toggle — detail: { collapsed }
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-const TONE_TO_BADGE_VARIANT = {
-  neutral: 'default',
-  accent:  'accent',
-  warning: 'warning',
-  danger:  'danger',
-};
-
-class UIAgentArtifact extends UIElement {
-  static properties = {
-    title:     { type: String,  default: '', reflect: true },
-    kind:      { type: String,  default: '', reflect: true },
-    icon:      { type: String,  default: '', reflect: true },
-    collapsed: { type: Boolean, default: false, reflect: true },
-    tone:      { type: String,  default: 'neutral', reflect: true },
-  };
-
-  static template = () => null;
-
-  #headerEl = null;
-  #iconEl = null;
-  #titleEl = null;
-  #kindEl = null;
-  #chevronEl = null;
-  #bodyEl = null;
-
-  connected() {
-    this.#build();
-  }
-
-  disconnected() {
-    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
-    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
-    this.#headerEl = this.#iconEl = this.#titleEl = null;
-    this.#kindEl = this.#chevronEl = this.#bodyEl = null;
-  }
-
-  #onHeaderClick = (e) => {
-    // Ignore clicks that land on header action buttons
-    if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
-    this.collapsed = !this.collapsed;
-    this.dispatchEvent(new CustomEvent('artifact-toggle', {
-      bubbles: true, detail: { collapsed: this.collapsed },
-    }));
-    this.render();
-  };
-
-  // Keyboard activation — Space/Enter toggle (matches role="button" semantics).
-  #onHeaderKey = (e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      // Don't fire when the focus is on a slotted action button — let those
-      // handle their own activation.
-      if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
-      e.preventDefault();
-      this.#onHeaderClick(e);
-    }
-  };
-
-  render() {
-    if (!this.#headerEl) return;
-
-    if (this.#iconEl) {
-      if (this.icon) { this.#iconEl.setAttribute('name', this.icon); this.#iconEl.hidden = false; }
-      else { this.#iconEl.hidden = true; }
-    }
-    if (this.#titleEl) {
-      this.#titleEl.textContent = this.title || '';
-      this.#titleEl.hidden = !this.title;
-    }
-    if (this.#kindEl) {
-      this.#kindEl.setAttribute('text', (this.kind || '').toUpperCase());
-      this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
-      this.#kindEl.hidden = !this.kind;
-    }
-    if (this.#chevronEl) {
-      this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
-    }
-    if (this.#bodyEl) {
-      this.#bodyEl.hidden = this.collapsed;
-    }
-    if (this.#headerEl) {
-      this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
-    }
-  }
-
-  #build() {
-    // We operate in a slotted model: the author's children that match
-    // slot="primary"/slot="secondary" live in the header; the rest is body.
-    // We build scaffolding DOM around those children without reparenting.
-    //
-    // To keep the Light-DOM approach consistent, we wrap existing children
-    // into a body container if one isn't already present.
-
-    // Capture any existing non-slotted children to put into the body wrapper
-    const existingBodyNodes = Array.from(this.childNodes).filter((n) => {
-      if (n.nodeType === 1) {
-        const slot = /** @type {Element} */ (n).getAttribute?.('slot') || '';
-        return slot !== 'primary' && slot !== 'secondary';
-      }
-      return true;
-    });
-
-    // Clear — we'll rebuild, preserving slotted action buttons
-    const primaryBtns = this.querySelectorAll(':scope > [slot="primary"]');
-    const secondaryBtns = this.querySelectorAll(':scope > [slot="secondary"]');
-
-    this.innerHTML = '';
-
-    // Header — keyboard-focusable button-style row that toggles collapsed.
-    // role/tabindex make Space/Enter activate it the same as click.
-    this.#headerEl = document.createElement('div');
-    this.#headerEl.setAttribute('data-artifact-header', '');
-    this.#headerEl.setAttribute('role', 'button');
-    this.#headerEl.setAttribute('tabindex', '0');
-    this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
-    this.#headerEl.addEventListener('click', this.#onHeaderClick);
-    this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
-
-    this.#iconEl = document.createElement('icon-ui');
-    this.#iconEl.setAttribute('data-artifact-icon', '');
-    this.#iconEl.setAttribute('color', 'muted');
-    if (this.icon) this.#iconEl.setAttribute('name', this.icon);
-    else this.#iconEl.hidden = true;
-
-    this.#titleEl = document.createElement('span');
-    this.#titleEl.setAttribute('data-artifact-title', '');
-    if (this.title) this.#titleEl.textContent = this.title;
-    else this.#titleEl.hidden = true;
-
-    this.#kindEl = document.createElement('badge-ui');
-    this.#kindEl.setAttribute('data-artifact-kind', '');
-    this.#kindEl.setAttribute('size', 'sm');
-    this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
-    if (this.kind) this.#kindEl.setAttribute('text', this.kind.toUpperCase());
-    else this.#kindEl.hidden = true;
-
-    const actions = document.createElement('span');
-    actions.setAttribute('data-artifact-actions', '');
-    for (const btn of secondaryBtns) actions.appendChild(btn);
-    for (const btn of primaryBtns) actions.appendChild(btn);
-
-    this.#chevronEl = document.createElement('icon-ui');
-    this.#chevronEl.setAttribute('color', 'muted');
-    this.#chevronEl.setAttribute('data-artifact-chevron', '');
-    this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
-
-    this.#headerEl.append(this.#iconEl, this.#titleEl, this.#kindEl, actions, this.#chevronEl);
-
-    // Body
-    this.#bodyEl = document.createElement('div');
-    this.#bodyEl.setAttribute('data-artifact-body', '');
-    for (const n of existingBodyNodes) this.#bodyEl.appendChild(n);
-    if (this.collapsed) this.#bodyEl.hidden = true;
+import { defineIfFree } from '../../core/register.js';
+import { UIAgentArtifact } from './class.js';
 
-    this.append(this.#headerEl, this.#bodyEl);
-  }
-}
+defineIfFree('agent-artifact-ui', UIAgentArtifact);
 
-customElements.define('agent-artifact-ui', UIAgentArtifact);
 export { UIAgentArtifact };

package/components/agent-artifact/agent-artifact.yaml

@@ -7,6 +7,11 @@ component: AgentArtifact
 category: agent
 version: 1
 description: Inline container for structured agent artifacts (A2UI, JSON, tickets).
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
+  - badge-ui
 props:
   kind:
     description: Badge label; value is normalized to uppercase before rendering.

package/components/agent-artifact/class.js

@@ -0,0 +1,200 @@
+/**
+ * Non-side-effect class export for `<agent-artifact-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/agent-artifact`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <agent-artifact-ui> — Inline container for a structured agent artifact.
+ *
+ * Wraps an artifact (A2UI UI, JSON blob, ticket, code, etc.) with a compact
+ * header showing a title + icon + optional kind badge, and two action slots:
+ * "primary" (e.g. "Open in canvas") and "secondary" (e.g. "Download"). The
+ * artifact body goes in the default slot.
+ *
+ * The host can attach any node (code-ui, canvas-ui, div, etc.) as the body.
+ *
+ * Usage:
+ *   <agent-artifact-ui title="product-card" kind="A2UI" icon="layout">
+ *     <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple"></button-ui>
+ *     <button-ui slot="secondary" text="Copy" icon="copy"></button-ui>
+ *     <code-ui language="json">{…}</code-ui>
+ *   </agent-artifact-ui>
+ *
+ * Attributes:
+ *   title       — header title (string)
+ *   kind        — small badge, e.g. "A2UI", "JSON", "TICKET" (value is
+ *                 normalized to uppercase before rendering)
+ *   icon        — icon-ui name for the header
+ *   collapsed   — start collapsed (body hidden)
+ *   tone        — neutral (default) | accent | warning | danger
+ *
+ * Events:
+ *   artifact-toggle — detail: { collapsed }
+ */
+
+import { UIElement } from '../../core/element.js';
+
+const TONE_TO_BADGE_VARIANT = {
+  neutral: 'default',
+  accent:  'accent',
+  warning: 'warning',
+  danger:  'danger',
+};
+
+export class UIAgentArtifact extends UIElement {
+  static properties = {
+    title:     { type: String,  default: '', reflect: true },
+    kind:      { type: String,  default: '', reflect: true },
+    icon:      { type: String,  default: '', reflect: true },
+    collapsed: { type: Boolean, default: false, reflect: true },
+    tone:      { type: String,  default: 'neutral', reflect: true },
+  };
+
+  static template = () => null;
+
+  #headerEl = null;
+  #iconEl = null;
+  #titleEl = null;
+  #kindEl = null;
+  #chevronEl = null;
+  #bodyEl = null;
+
+  connected() {
+    this.#build();
+  }
+
+  disconnected() {
+    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
+    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
+    this.#headerEl = this.#iconEl = this.#titleEl = null;
+    this.#kindEl = this.#chevronEl = this.#bodyEl = null;
+  }
+
+  #onHeaderClick = (e) => {
+    // Ignore clicks that land on header action buttons
+    if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('artifact-toggle', {
+      bubbles: true, detail: { collapsed: this.collapsed },
+    }));
+    this.render();
+  };
+
+  // Keyboard activation — Space/Enter toggle (matches role="button" semantics).
+  #onHeaderKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      // Don't fire when the focus is on a slotted action button — let those
+      // handle their own activation.
+      if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
+      e.preventDefault();
+      this.#onHeaderClick(e);
+    }
+  };
+
+  render() {
+    if (!this.#headerEl) return;
+
+    if (this.#iconEl) {
+      if (this.icon) { this.#iconEl.setAttribute('name', this.icon); this.#iconEl.hidden = false; }
+      else { this.#iconEl.hidden = true; }
+    }
+    if (this.#titleEl) {
+      this.#titleEl.textContent = this.title || '';
+      this.#titleEl.hidden = !this.title;
+    }
+    if (this.#kindEl) {
+      this.#kindEl.setAttribute('text', (this.kind || '').toUpperCase());
+      this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
+      this.#kindEl.hidden = !this.kind;
+    }
+    if (this.#chevronEl) {
+      this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
+    }
+    if (this.#bodyEl) {
+      this.#bodyEl.hidden = this.collapsed;
+    }
+    if (this.#headerEl) {
+      this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
+    }
+  }
+
+  #build() {
+    // We operate in a slotted model: the author's children that match
+    // slot="primary"/slot="secondary" live in the header; the rest is body.
+    // We build scaffolding DOM around those children without reparenting.
+    //
+    // To keep the Light-DOM approach consistent, we wrap existing children
+    // into a body container if one isn't already present.
+
+    // Capture any existing non-slotted children to put into the body wrapper
+    const existingBodyNodes = Array.from(this.childNodes).filter((n) => {
+      if (n.nodeType === 1) {
+        const slot = /** @type {Element} */ (n).getAttribute?.('slot') || '';
+        return slot !== 'primary' && slot !== 'secondary';
+      }
+      return true;
+    });
+
+    // Clear — we'll rebuild, preserving slotted action buttons
+    const primaryBtns = this.querySelectorAll(':scope > [slot="primary"]');
+    const secondaryBtns = this.querySelectorAll(':scope > [slot="secondary"]');
+
+    this.innerHTML = '';
+
+    // Header — keyboard-focusable button-style row that toggles collapsed.
+    // role/tabindex make Space/Enter activate it the same as click.
+    this.#headerEl = document.createElement('div');
+    this.#headerEl.setAttribute('data-artifact-header', '');
+    this.#headerEl.setAttribute('role', 'button');
+    this.#headerEl.setAttribute('tabindex', '0');
+    this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
+    this.#headerEl.addEventListener('click', this.#onHeaderClick);
+    this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
+
+    this.#iconEl = document.createElement('icon-ui');
+    this.#iconEl.setAttribute('data-artifact-icon', '');
+    this.#iconEl.setAttribute('color', 'muted');
+    if (this.icon) this.#iconEl.setAttribute('name', this.icon);
+    else this.#iconEl.hidden = true;
+
+    this.#titleEl = document.createElement('span');
+    this.#titleEl.setAttribute('data-artifact-title', '');
+    if (this.title) this.#titleEl.textContent = this.title;
+    else this.#titleEl.hidden = true;
+
+    this.#kindEl = document.createElement('badge-ui');
+    this.#kindEl.setAttribute('data-artifact-kind', '');
+    this.#kindEl.setAttribute('size', 'sm');
+    this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
+    if (this.kind) this.#kindEl.setAttribute('text', this.kind.toUpperCase());
+    else this.#kindEl.hidden = true;
+
+    const actions = document.createElement('span');
+    actions.setAttribute('data-artifact-actions', '');
+    for (const btn of secondaryBtns) actions.appendChild(btn);
+    for (const btn of primaryBtns) actions.appendChild(btn);
+
+    this.#chevronEl = document.createElement('icon-ui');
+    this.#chevronEl.setAttribute('color', 'muted');
+    this.#chevronEl.setAttribute('data-artifact-chevron', '');
+    this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
+
+    this.#headerEl.append(this.#iconEl, this.#titleEl, this.#kindEl, actions, this.#chevronEl);
+
+    // Body
+    this.#bodyEl = document.createElement('div');
+    this.#bodyEl.setAttribute('data-artifact-body', '');
+    for (const n of existingBodyNodes) this.#bodyEl.appendChild(n);
+    if (this.collapsed) this.#bodyEl.hidden = true;
+
+    this.append(this.#headerEl, this.#bodyEl);
+  }
+}

package/components/agent-feedback-bar/agent-feedback-bar.a2ui.json

@@ -39,6 +39,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "feedback-rate": {
         "description": "Fired on feedback-rate."

package/components/agent-feedback-bar/agent-feedback-bar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `<agent-feedback-bar-ui>` — Thumbs + save row under an agent response.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/agent-feedback-bar
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type AgentFeedbackBarFeedbackRateEvent = CustomEvent<unknown>;
+export type AgentFeedbackBarFeedbackSaveEvent = CustomEvent<unknown>;
+
+export class UIAgentFeedbackBar extends UIElement {
+  /** Disable all actions. */
+  disabled: boolean;
+  /** Save button icon. */
+  saveIcon: string;
+  /** Save button text; empty hides it. */
+  saveLabel: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentFeedbackBar, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'feedback-rate', listener: (ev: AgentFeedbackBarFeedbackRateEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'feedback-save', listener: (ev: AgentFeedbackBarFeedbackSaveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}