@adia-ai/web-components 0.4.7 → 0.4.9

package/components/nav-group/nav-group.d.ts

@@ -13,12 +13,22 @@ when [collapsible] (default true).
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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 interface NavGroupGroupToggleEventDetail {
+  /** Whether the group is now open. */
+  open: boolean;
+  /** Group label text. */
+  text: string;
+}
+
+export type NavGroupGroupToggleEvent = CustomEvent<NavGroupGroupToggleEventDetail>;
+
 export class UINavGroup extends UIElement {
   /** Optional trailing badge (count, label). */
   badge: string;
@@ -32,4 +42,11 @@ export class UINavGroup extends UIElement {
   text: string;
   /** Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant="section", this group inherits it via CSS cascade unless an explicit variant is set on the group. */
   variant: '' | 'section';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UINavGroup, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'group-toggle', listener: (ev: NavGroupGroupToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/nav-group/nav-group.yaml

@@ -44,6 +44,13 @@ props:
 events:
   group-toggle:
     description: "Fired when the header toggles via click/keyboard. Detail: { text, open }."
+    detail:
+      text:
+        type: string
+        description: Group label text.
+      open:
+        type: boolean
+        description: Whether the group is now open.
 
 slots:
   default:

package/components/nav-item/nav-item.a2ui.json

@@ -63,9 +63,24 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "nav-select": {
-        "description": "Bubbles when the item is activated. Detail: { item, text, value }."
+        "description": "Bubbles when the item is activated. Detail: { item, text, value }.",
+        "detail": {
+          "item": {
+            "description": "The nav-item element itself.",
+            "type": "object"
+          },
+          "text": {
+            "description": "Item text content.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Item value attribute.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [],

package/components/nav-item/nav-item.d.ts

@@ -13,12 +13,24 @@ bubbles a `nav-select` event.
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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 interface NavItemNavSelectEventDetail {
+  /** The nav-item element itself. */
+  item: Record<string, unknown>;
+  /** Item text content. */
+  text: string;
+  /** Item value attribute. */
+  value: string;
+}
+
+export type NavItemNavSelectEvent = CustomEvent<NavItemNavSelectEventDetail>;
+
 export class UINavItem extends UIElement {
   /** Optional trailing badge. */
   badge: string;
@@ -34,4 +46,11 @@ export class UINavItem extends UIElement {
   value: string;
   /** Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected. When the parent <nav-ui> carries variant="section", this item inherits it via CSS cascade unless an explicit variant is set. */
   variant: '' | 'section';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UINavItem, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'nav-select', listener: (ev: NavItemNavSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/nav-item/nav-item.yaml

@@ -48,6 +48,16 @@ props:
 events:
   nav-select:
     description: "Bubbles when the item is activated. Detail: { item, text, value }."
+    detail:
+      item:
+        type: object
+        description: The nav-item element itself.
+      text:
+        type: string
+        description: Item text content.
+      value:
+        type: string
+        description: Item value attribute.
 
 slots:
   default:

package/components/noodles/noodles.a2ui.json

@@ -89,12 +89,57 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {
       "noodle-connect": {
-        "description": "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }"
+        "description": "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }",
+        "detail": {
+          "from": {
+            "description": "Source node ID.",
+            "type": "string"
+          },
+          "fromPort": {
+            "description": "Source port identifier.",
+            "type": "string"
+          },
+          "id": {
+            "description": "Connection ID.",
+            "type": "string"
+          },
+          "to": {
+            "description": "Target node ID.",
+            "type": "string"
+          },
+          "toPort": {
+            "description": "Target port identifier.",
+            "type": "string"
+          }
+        }
       },
       "noodle-disconnect": {
-        "description": "Fired when a connection is removed. detail: { id, from, to, fromPort, toPort }"
+        "description": "Fired when a connection is removed. detail: { id, from, to, fromPort, toPort }",
+        "detail": {
+          "from": {
+            "description": "Source node ID.",
+            "type": "string"
+          },
+          "fromPort": {
+            "description": "Source port identifier.",
+            "type": "string"
+          },
+          "id": {
+            "description": "Connection ID.",
+            "type": "string"
+          },
+          "to": {
+            "description": "Target node ID.",
+            "type": "string"
+          },
+          "toPort": {
+            "description": "Target port identifier.",
+            "type": "string"
+          }
+        }
       },
       "noodle-drag": {
         "description": "Fired during drag-to-connect. detail: { from, fromPort, x, y, reconnect }"

package/components/noodles/noodles.d.ts

@@ -5,12 +5,43 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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 interface NoodlesNoodleConnectEventDetail {
+  /** Source node ID. */
+  from: string;
+  /** Source port identifier. */
+  fromPort: string;
+  /** Connection ID. */
+  id: string;
+  /** Target node ID. */
+  to: string;
+  /** Target port identifier. */
+  toPort: string;
+}
+
+export type NoodlesNoodleConnectEvent = CustomEvent<NoodlesNoodleConnectEventDetail>;
+export interface NoodlesNoodleDisconnectEventDetail {
+  /** Source node ID. */
+  from: string;
+  /** Source port identifier. */
+  fromPort: string;
+  /** Connection ID. */
+  id: string;
+  /** Target node ID. */
+  to: string;
+  /** Target port identifier. */
+  toPort: string;
+}
+
+export type NoodlesNoodleDisconnectEvent = CustomEvent<NoodlesNoodleDisconnectEventDetail>;
+export type NoodlesNoodleDragEvent = CustomEvent<unknown>;
+
 export class UINoodles extends UIElement {
   /** Flowing dash animation on noodles */
   animated: boolean;
@@ -30,4 +61,13 @@ export class UINoodles extends UIElement {
   strokeWidth: number;
   /** Bezier control point distance (0-1). Higher = wider curves */
   tension: number;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UINoodles, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'noodle-connect', listener: (ev: NoodlesNoodleConnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'noodle-disconnect', listener: (ev: NoodlesNoodleDisconnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'noodle-drag', listener: (ev: NoodlesNoodleDragEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/noodles/noodles.yaml

@@ -68,8 +68,40 @@ props:
 events:
   noodle-connect:
     description: "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }"
+    detail:
+      id:
+        type: string
+        description: Connection ID.
+      from:
+        type: string
+        description: Source node ID.
+      to:
+        type: string
+        description: Target node ID.
+      fromPort:
+        type: string
+        description: Source port identifier.
+      toPort:
+        type: string
+        description: Target port identifier.
   noodle-disconnect:
     description: "Fired when a connection is removed. detail: { id, from, to, fromPort, toPort }"
+    detail:
+      id:
+        type: string
+        description: Connection ID.
+      from:
+        type: string
+        description: Source node ID.
+      to:
+        type: string
+        description: Target node ID.
+      fromPort:
+        type: string
+        description: Source port identifier.
+      toPort:
+        type: string
+        description: Target port identifier.
   noodle-drag:
     description: "Fired during drag-to-connect. detail: { from, fromPort, x, y, reconnect }"
 slots: {}

package/components/option-card/option-card.a2ui.json

@@ -73,6 +73,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "change": {
         "description": "Fired when this card becomes selected (bubbles)."

package/components/option-card/option-card.yaml

@@ -12,6 +12,10 @@ description: >-
   radiogroup. The whole card is the click target; a CSS-rendered radio
   circle in the top-left signals state. Form-associated, so `name=value`
   submits with the parent form when checked.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props:
   name:
     description: Form control name. Siblings sharing a name form a radiogroup.

package/components/otp-input/otp-input.a2ui.json

@@ -44,12 +44,25 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "complete": {
-        "description": "Fired when all digits are filled. Detail contains { code }."
+        "description": "Fired exactly once when the user fills the last digit slot. detail.value is the combined string.",
+        "detail": {
+          "value": {
+            "description": "Combined digits (e.g. \"123456\").",
+            "type": "string"
+          }
+        }
       },
       "input": {
-        "description": "Fired on every digit change"
+        "description": "Fired on every digit change. detail.value is the current combined string.",
+        "detail": {
+          "value": {
+            "description": "Combined digits at the moment of the change.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/otp-input/otp-input.d.ts

@@ -12,6 +12,16 @@ export interface OtpInputEventDetail {
 }
 export type OtpInputEvent = CustomEvent<OtpInputEventDetail>;
 
+/**
+ * Detail payload for the `complete` event — fired exactly once when the
+ * user fills the last digit slot. `value` is the full combined string at
+ * the moment of completion.
+ */
+export interface OtpInputCompleteEventDetail {
+  value: string;
+}
+export type OtpInputCompleteEvent = CustomEvent<OtpInputCompleteEventDetail>;
+
 export class UIOtpInput extends UIFormElement {
   /** Number of digit slots. */
   length: number;
@@ -22,4 +32,5 @@ export class UIOtpInput extends UIFormElement {
     options?: boolean | AddEventListenerOptions,
   ): void;
   addEventListener(type: 'input', listener: (ev: OtpInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'complete', listener: (ev: OtpInputCompleteEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/otp-input/otp-input.yaml

@@ -25,9 +25,17 @@ props:
     default: ''
 events:
   complete:
-    description: Fired when all digits are filled. Detail contains { code }.
+    description: Fired exactly once when the user fills the last digit slot. detail.value is the combined string.
+    detail:
+      value:
+        type: string
+        description: Combined digits (e.g. "123456").
   input:
-    description: Fired on every digit change
+    description: Fired on every digit change. detail.value is the current combined string.
+    detail:
+      value:
+        type: string
+        description: Combined digits at the moment of the change.
 slots:
   field:
     description: Container for the digit input boxes and optional separator

package/components/page/page.a2ui.json

@@ -51,6 +51,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/page/page.d.ts

@@ -11,8 +11,9 @@ primitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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';

package/components/pagination/pagination.a2ui.json

@@ -44,9 +44,16 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [],
     "events": {
       "page-change": {
-        "description": "Fired when a page button is clicked. detail contains { page }."
+        "description": "Fired when a page button is clicked. detail contains { page }.",
+        "detail": {
+          "page": {
+            "description": "New page number.",
+            "type": "number"
+          }
+        }
       }
     },
     "examples": [

package/components/pagination/pagination.d.ts

@@ -5,12 +5,20 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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 interface PaginationPageChangeEventDetail {
+  /** New page number. */
+  page: number;
+}
+
+export type PaginationPageChangeEvent = CustomEvent<PaginationPageChangeEventDetail>;
+
 export class UIPagination extends UIElement {
   /** Current active page number. */
   page: number;
@@ -20,4 +28,11 @@ export class UIPagination extends UIElement {
   total: number;
   /** Visual variant */
   variant: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIPagination, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'page-change', listener: (ev: PaginationPageChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/pagination/pagination.yaml

@@ -27,6 +27,10 @@ props:
 events:
   page-change:
     description: Fired when a page button is clicked. detail contains { page }.
+    detail:
+      page:
+        type: number
+        description: New page number.
 slots: {}
 states:
   - name: idle

package/components/pane/pane.a2ui.json

@@ -54,7 +54,14 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
-    "events": {},
+    "composes": [
+      "icon-ui"
+    ],
+    "events": {
+      "toggle": {
+        "description": "Fired when the pane's collapsed state flips (via button press, keyboard, or programmatic toggle()). Bubbles."
+      }
+    },
     "examples": [
       {
         "description": "Split pane with TextArea for editing markdown on the left and a preview card on the right.",

package/components/pane/pane.d.ts

@@ -5,12 +5,15 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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 PaneToggleEvent = CustomEvent<unknown>;
+
 export class UIPane extends UIElement {
   /** Component property: collapsed. */
   collapsed: boolean;
@@ -28,4 +31,11 @@ Unset keeps the pane-intrinsic chrome (full border, right-edge
 grabber when resizable).
  */
   side: '' | 'leading' | 'trailing';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIPane, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/pane/pane.yaml

@@ -5,6 +5,10 @@ component: Pane
 category: layout
 version: 1
 description: Collapsible, resizable panel.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props:
   collapsed:
     description: 'Component property: collapsed.'
@@ -45,7 +49,9 @@ props:
     - leading
     - trailing
     reflect: true
-events: {}
+events:
+  toggle:
+    description: Fired when the pane's collapsed state flips (via button press, keyboard, or programmatic toggle()). Bubbles.
 slots:
   header:
     description: Auto-created header element with label text and toggle arrow

package/components/pipeline-status/pipeline-status.a2ui.json

@@ -39,6 +39,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/pipeline-status/pipeline-status.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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';

package/components/popover/popover.a2ui.json

@@ -59,6 +59,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/popover/popover.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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';

package/components/progress/progress.a2ui.json

@@ -43,6 +43,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/progress/progress.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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';

package/components/progress-row/progress-row.a2ui.json

@@ -52,6 +52,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "data",
+    "composes": [
+      "progress-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/progress-row/progress-row.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * 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';

package/components/progress-row/progress-row.yaml

@@ -8,6 +8,10 @@ category: data
 version: 1
 description: Inline labeled progress row with label, progress bar, and meta text. Used for storage
   quotas, capacity breakdowns, usage indicators.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - progress-ui
 props:
   label:
     description: Left-hand label text