@adia-ai/web-components 0.4.7 → 0.4.8

package/components/noodles/noodles.d.ts

@@ -5,12 +5,17 @@
  *
  * 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 NoodlesNoodleConnectEvent = CustomEvent<unknown>;
+export type NoodlesNoodleDisconnectEvent = CustomEvent<unknown>;
+export type NoodlesNoodleDragEvent = CustomEvent<unknown>;
+
 export class UINoodles extends UIElement {
   /** Flowing dash animation on noodles */
   animated: boolean;
@@ -30,4 +35,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/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,6 +44,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "complete": {
         "description": "Fired when all digits are filled. Detail contains { code }."

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,6 +44,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [],
     "events": {
       "page-change": {
         "description": "Fired when a page button is clicked. detail contains { page }."

package/components/pagination/pagination.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 PaginationPageChangeEvent = CustomEvent<unknown>;
+
 export class UIPagination extends UIElement {
   /** Current active page number. */
   page: number;
@@ -20,4 +23,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/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

package/components/radio/radio.a2ui.json

@@ -76,6 +76,7 @@
       }
     ],
     "category": "input",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when this radio becomes selected (bubbles)"

package/components/range/range.a2ui.json

@@ -74,6 +74,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired on drag end or keyboard commit"

package/components/rating/rating.a2ui.json

@@ -74,6 +74,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "form",
+    "composes": [],
     "events": {
       "[object Object]": {
         "description": "Fired on [object Object]."

package/components/richtext/richtext.a2ui.json

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

package/components/richtext/richtext.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/row/row.a2ui.json

@@ -54,6 +54,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "drag-end": {
         "description": "Fired when a drag completes."

package/components/row/row.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 RowDragEndEvent = CustomEvent<unknown>;
+
 export class UIRow extends UIElement {
   /** Align items */
   align: string;
@@ -24,4 +27,11 @@ export class UIRow extends UIElement {
   justify: string;
   /** Enable flex wrap */
   wrap: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIRow, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'drag-end', listener: (ev: RowDragEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/search/search.a2ui.json

@@ -54,6 +54,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "clear": {
         "description": "Fired when the clear button is clicked"

package/components/section/section.a2ui.json

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

package/components/segment/segment.a2ui.json

@@ -49,6 +49,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/segment/segment.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/segment/segment.yaml

@@ -7,6 +7,10 @@ component: Segment
 category: navigation
 version: 1
 description: Individual segment option, child of segmented-ui.
+# 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:
   disabled:
     description: Disables this segment.

package/components/segmented/segmented.a2ui.json

@@ -29,6 +29,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when the selected segment changes. detail contains { value }."

package/components/select/select.a2ui.json

@@ -140,6 +140,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "change": {
         "description": "Fired when selected value changes"

package/components/select/select.yaml

@@ -7,6 +7,10 @@ component: Select
 category: input
 version: 1
 description: Alias for ChoicePicker. Dropdown select with options.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui  # chevron + option-row affixes (created in render)
 props:
   name:
     description: Form control name for form data submission

package/components/skeleton/skeleton.a2ui.json

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

package/components/skeleton/skeleton.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/slider/slider.a2ui.json

@@ -74,6 +74,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."

package/components/stack/stack.a2ui.json

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

package/components/stack/stack.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/stat/stat.a2ui.json

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

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

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

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

@@ -11,8 +11,9 @@ primitive.
  *
  * 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/stepper/stepper.a2ui.json

@@ -34,6 +34,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/stepper/stepper.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/stepper/stepper.yaml

@@ -7,6 +7,10 @@ component: Stepper
 category: navigation
 version: 1
 description: Wizard / process stepper — parent step index drives numbered children.
+# 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:
   orientation:
     description: horizontal | vertical

package/components/stream/stream.a2ui.json

@@ -39,6 +39,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {
       "stream-end": {
         "description": "Fired when stream completes naturally"

package/components/stream/stream.d.ts

@@ -5,15 +5,29 @@
  *
  * 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 StreamEndEvent = CustomEvent<unknown>;
+export type StreamErrorEvent = CustomEvent<unknown>;
+export type StreamStartEvent = CustomEvent<unknown>;
+
 export class UIStream extends UIElement {
   /** Milliseconds between character renders. 0 = real-time. */
   pace: number;
   /** Read-only reflected state, true while stream is active */
   streaming: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIStream, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'stream-end', listener: (ev: StreamEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'stream-error', listener: (ev: StreamErrorEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'stream-start', listener: (ev: StreamStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }