@adia-ai/web-components 0.4.7 → 0.4.8

package/components/feed/feed.yaml

@@ -11,6 +11,11 @@ description: >-
   (SPEC-FEED-CHANNEL-001). Per-position singletons mounted lazily into
   document.body via Popover API; consumers post via the static API
   (`UIFeed.post()`) or the global 'feed' CustomEvent.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
+  - feed-item-ui
 props:
   position:
     description: Lane the feed renders into
@@ -28,6 +33,8 @@ props:
     description: Cap on simultaneously visible items per lane
     type: number
     default: 5
-events: {}
+events:
+  close:
+    description: Fired on per-item dismissal (manual close, swipe, or auto-timeout). Bubbles.
 slots: {}
 states: {}

package/components/field/field.a2ui.json

@@ -57,6 +57,7 @@
       }
     ],
     "category": "form",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/field/field.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/fields/fields.a2ui.json

@@ -43,6 +43,7 @@
       }
     ],
     "category": "form",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/fields/fields.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/footer/footer.a2ui.json

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

package/components/grid/grid.a2ui.json

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

package/components/grid/grid.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/header/header.a2ui.json

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

package/components/heatmap/heatmap.a2ui.json

@@ -84,6 +84,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "data-display",
+    "composes": [],
     "events": {
       "cell-click": {
         "description": "Fired on cell-click."

package/components/heatmap/heatmap.d.ts

@@ -5,12 +5,16 @@
  *
  * 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 HeatmapCellClickEvent = CustomEvent<unknown>;
+export type HeatmapCellHoverEvent = CustomEvent<unknown>;
+
 export class UIHeatmap extends UIElement {
   /** Heatmap type */
   type: 'day-grid' | 'matrix' | 'density';
@@ -28,4 +32,12 @@ export class UIHeatmap extends UIElement {
   scale: 'linear' | 'log' | 'quantile';
   /** ISO start date; labels months in day-grid mode */
   startDate: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIHeatmap, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'cell-click', listener: (ev: HeatmapCellClickEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'cell-hover', listener: (ev: HeatmapCellHoverEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/icon/icon.a2ui.json

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

package/components/icon/icon.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/image/image.a2ui.json

@@ -81,6 +81,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [
+      "skeleton-ui"
+    ],
     "events": {},
     "examples": [
       {

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

@@ -7,6 +7,10 @@ component: Image
 category: display
 version: 1
 description: Lazy-loading image with skeleton fallback. Shows skeleton while loading, falls back on error.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - skeleton-ui
 props:
   alt:
     description: Alt text for the image.

package/components/index.js

@@ -9,6 +9,14 @@
    list-ui). See packages/web-components/core/data-stream.js. */
 import '../core/data-stream.js';
 
+/* Side-effect import — wires the full @phosphor-icons/core asset tree
+   into the icon registry (`core/icons.js`). Consumers who load the
+   components barrel are loading ~90 elements; pulling phosphor along is
+   the zero-config expectation. Apps with bundle-size SLOs should skip
+   this barrel, import primitives piecemeal, and call
+   `installIconLoaders()` with a scoped glob — see `core/icons.js` JSDoc. */
+import '../core/icons-phosphor.js';
+
 export { UIIcon } from './icon/icon.js';
 export { UIButton } from './button/button.js';
 export { UILink } from './link/link.js';

package/components/input/input.a2ui.json

@@ -159,6 +159,10 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [
+      "button-ui",
+      "icon-ui"
+    ],
     "events": {
       "change": {
         "description": "Fired on blur, Enter, or a stepper-button click (bubbles)"

package/components/input/input.yaml

@@ -8,6 +8,12 @@ description: Text input field with contenteditable surface. Supports prefix/suff
   `type="number"` mode that renders [+]/[-] stepper buttons, numeric input filtering, and ARIA spinbutton semantics — no native
   `<input type="number">` under the hood. Password type uses a native `<input>` (only path that still wraps native, for `-webkit-text-security`
   disc masking).
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui  # [+]/[-] stepper buttons (created when type="number")
+  - icon-ui    # caret-up/caret-down icons inside the stepper buttons
+
 props:
   name:
     description: Form control name for form data submission

package/components/inspector/inspector.a2ui.json

@@ -29,6 +29,11 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "tabs-ui",
+      "tab-ui",
+      "code-ui"
+    ],
     "events": {},
     "examples": [
       {

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

@@ -5,6 +5,12 @@ component: Inspector
 category: agent
 version: 1
 description: Developer tools pane for inspecting A2UI state.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - tabs-ui
+  - tab-ui
+  - code-ui
 props:
   value:
     description: Active tab. One of 'catalog', 'surface', 'messages', 'code'.

package/components/kbd/kbd.a2ui.json

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

package/components/kbd/kbd.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/link/link.a2ui.json

@@ -80,6 +80,7 @@
       "❌ `<link-ui>` for form submission — submission is a button concern. Use `<button-ui type=\"submit\">`."
     ],
     "category": "content",
+    "composes": [],
     "events": {
       "press": {
         "description": "Bubbles when the link is activated by click or Enter. Detail: `{ href, target }`. Fires BEFORE the browser's native navigation so handlers can `preventDefault()` and route through the A2UI action handler system. If no handler intercepts, native navigation proceeds."

package/components/link/link.d.ts

@@ -29,12 +29,15 @@ wiring. ARIA role is "link" (set automatically by `<a>` element).
  *
  * 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 LinkPressEvent = CustomEvent<unknown>;
+
 export class UILink extends UIElement {
   /** Stretches the link to fill its container; useful for standalone link rows. */
   block: boolean;
@@ -52,4 +55,11 @@ export class UILink extends UIElement {
   text: string;
   /** Visual treatment. `default` underlines on rest + hover (standard link affordance). `subtle` underlines only on hover (for tighter designs where always-underlined would be noisy). `quiet` drops the link color and matches surrounding text color (used for footer-link rows where the link affordance is implied by context, not by color). */
   variant: 'default' | 'subtle' | 'quiet';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UILink, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'press', listener: (ev: LinkPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/list/list.a2ui.json

@@ -44,6 +44,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "selection-change": {
         "description": "Fired on selection-change."

package/components/list/list.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 ListSelectionChangeEvent = CustomEvent<unknown>;
+
 export class UIList extends UIElement {
   /** Show dividers between items */
   divider: boolean;
@@ -20,4 +23,11 @@ export class UIList extends UIElement {
   selectedKey: string;
   /** Item spacing */
   spacing: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIList, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'selection-change', listener: (ev: ListSelectionChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/list/list.yaml

@@ -7,6 +7,10 @@ component: List
 category: layout
 version: 1
 description: Styled list with optional icons and dividers.
+# 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:
   divider:
     description: Show dividers between items

package/components/menu/menu.a2ui.json

@@ -45,6 +45,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "action": {
         "description": "Fired when a menu item is activated. Detail contains the triggering element."

package/components/menu/menu.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 MenuActionEvent = CustomEvent<unknown>;
+
 export class UIMenu extends UIElement {
   /** Gap in px */
   gap: number;
@@ -18,4 +21,11 @@ export class UIMenu extends UIElement {
   open: boolean;
   /** Preferred position relative to the anchor element */
   placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIMenu, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'action', listener: (ev: MenuActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/menu/menu.yaml

@@ -7,6 +7,10 @@ component: Menu
 category: container
 version: 1
 description: Dropdown action menu with roving focus and keyboard navigation. Uses Popover API.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui  # leading affordances on menu items (created in render)
 props:
   gap:
     description: Gap in px

package/components/modal/modal.a2ui.json

@@ -50,6 +50,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {
       "close": {
         "description": "Fired when the overlay is dismissed via backdrop click, Escape key, popover toggle, or programmatic hide(). Bubbles."

package/components/modal/modal.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 ModalCloseEvent = CustomEvent<unknown>;
+
 export class UIModal extends UIElement {
   /** Controls overlay visibility. Setting to true opens the surface with entry animation. */
   open: boolean;
@@ -20,4 +23,11 @@ export class UIModal extends UIElement {
   size: 'sm' | 'md' | 'lg' | 'xl';
   /** Aria label applied to the surface element for accessibility */
   text: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIModal, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'close', listener: (ev: ModalCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/nav/nav.a2ui.json

@@ -48,6 +48,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "nav-select": {
         "description": "Bubbles from <nav-item-ui> children when one is selected. Detail: { item, text, value }."

package/components/nav/nav.d.ts

@@ -13,12 +13,15 @@ and a [heading] kicker rendered via CSS.
  *
  * 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 NavSelectEvent = CustomEvent<unknown>;
+
 export class UINav extends UIElement {
   /** Primary-variant only. Force icon-only collapse regardless of viewport width. */
   collapsed: boolean;
@@ -28,4 +31,11 @@ export class UINav extends UIElement {
   heading: string;
   /** Visual treatment. primary = app sidebar; section = subnav rail. */
   variant: 'primary' | 'section';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UINav, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'nav-select', listener: (ev: NavSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

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

@@ -58,6 +58,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "group-toggle": {
         "description": "Fired when the header toggles via click/keyboard. Detail: { text, open }."

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

@@ -13,12 +13,15 @@ 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 type NavGroupGroupToggleEvent = CustomEvent<unknown>;
+
 export class UINavGroup extends UIElement {
   /** Optional trailing badge (count, label). */
   badge: string;
@@ -32,4 +35,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-item/nav-item.a2ui.json

@@ -63,6 +63,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "nav-select": {
         "description": "Bubbles when the item is activated. Detail: { item, text, value }."

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

@@ -13,12 +13,15 @@ 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 type NavItemNavSelectEvent = CustomEvent<unknown>;
+
 export class UINavItem extends UIElement {
   /** Optional trailing badge. */
   badge: string;
@@ -34,4 +37,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/noodles/noodles.a2ui.json

@@ -89,6 +89,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {
       "noodle-connect": {
         "description": "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }"