@adia-ai/web-components 0.4.8 → 0.4.9

package/components/table/table.yaml

@@ -74,15 +74,67 @@ props:
     default: false
 events:
   cell-click:
-    description: Fired when a data cell is clicked.
+    description: Fired when a data cell is clicked. detail carries the cell location + value.
+    detail:
+      key:
+        type: string
+        description: Column key.
+      row:
+        type: object
+        description: Row data object.
+      value:
+        description: Cell value (type depends on column).
+      dataIndex:
+        type: number
+        description: Row index in the underlying data array.
+  filter-change:
+    description: Fired when an interactive filter row applies / clears. detail.filters is the current filter map.
+    detail:
+      filters:
+        type: object
+        description: "Map of `{ [columnKey]: filterValue }` reflecting active filters."
   page:
     description: Fired when the user navigates to a different page.
+    detail:
+      page:
+        type: number
+        description: New active page index (1-based).
   resize:
     description: Fired when a column is resized via drag.
+    detail:
+      key:
+        type: string
+        description: Column key being resized.
+      width:
+        type: number
+        description: New column width in pixels.
+  row-expand:
+    description: Fired when an expandable row's chevron is activated. detail.index is the row position; detail.row is the row data.
+    detail:
+      index:
+        type: number
+        description: Row index in the underlying data array.
+      row:
+        type: object
+        description: Row data object.
   select:
-    description: Fired when row selection changes.
+    description: Fired when row selection changes. detail.selected is an array of row indices or IDs.
+    detail:
+      selected:
+        type: array
+        description: Array of selected row indices or IDs (driven by [select-mode]).
   sort:
     description: Fired when sort state changes via header click.
+    detail:
+      key:
+        type: string
+        description: Column key being sorted.
+      dir:
+        type: string
+        description: Sort direction — "asc" / "desc" / null (cleared).
+      sortState:
+        type: array
+        description: Full sort state array (multi-column support).
 slots: {}
 states:
   - name: idle

package/components/tabs/tabs.a2ui.json

@@ -51,7 +51,13 @@
     ],
     "events": {
       "change": {
-        "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."
+        "description": "Fired when the value changes (on blur for inputs, on selection for pickers).",
+        "detail": {
+          "value": {
+            "description": "New active tab value.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/tabs/tabs.d.ts

@@ -12,7 +12,12 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type TabsChangeEvent = CustomEvent<unknown>;
+export interface TabsChangeEventDetail {
+  /** New active tab value. */
+  value: string;
+}
+
+export type TabsChangeEvent = CustomEvent<TabsChangeEventDetail>;
 
 export class UITabs extends UIElement {
   /** Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal. */

package/components/tabs/tabs.yaml

@@ -29,6 +29,10 @@ props:
 events:
   change:
     description: "Fired when the value changes (on blur for inputs, on selection for pickers)."
+    detail:
+      value:
+        type: string
+        description: New active tab value.
 slots:
   default:
     description: Child tab-ui elements that form the tab strip

package/components/tag/tag.a2ui.json

@@ -67,7 +67,17 @@
     "composes": [],
     "events": {
       "remove": {
-        "description": "Fired when the dismiss button is activated."
+        "description": "Fired when the dismiss button is activated.",
+        "detail": {
+          "text": {
+            "description": "Tag text content.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Tag value (same as text).",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/tag/tag.d.ts

@@ -12,7 +12,14 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type TagRemoveEvent = CustomEvent<unknown>;
+export interface TagRemoveEventDetail {
+  /** Tag text content. */
+  text: string;
+  /** Tag value (same as text). */
+  value: string;
+}
+
+export type TagRemoveEvent = CustomEvent<TagRemoveEventDetail>;
 
 export class UITag extends UIElement {
   /** Disables interaction and dims the tag. */

package/components/tag/tag.yaml

@@ -45,6 +45,13 @@ props:
 events:
   remove:
     description: Fired when the dismiss button is activated.
+    detail:
+      text:
+        type: string
+        description: Tag text content.
+      value:
+        type: string
+        description: Tag value (same as text).
 slots: {}
 states:
   - name: idle

package/components/timeline/timeline.a2ui.json

@@ -47,14 +47,10 @@
     ],
     "events": {
       "timeline-toggle": {
-        "description": "Fired when a collapsible timeline item is expanded or collapsed. Detail carries the toggled item's id + new open state.",
+        "description": "Fired when a collapsible timeline item is expanded or collapsed. detail.expanded carries the new open state.",
         "detail": {
-          "id": {
-            "description": "Item id (matches the timeline-item-ui's data-id attr).",
-            "type": "string"
-          },
-          "open": {
-            "description": "New open state after the toggle.",
+          "expanded": {
+            "description": "New open state of the toggled item after the press.",
             "type": "boolean"
           }
         }

package/components/timeline/timeline.d.ts

@@ -13,10 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export interface TimelineToggleEventDetail {
-  /** Item id (matches the timeline-item-ui's data-id attr). */
-  id: string;
-  /** New open state after the toggle. */
-  open: boolean;
+  /** New open state of the toggled item after the press. */
+  expanded: boolean;
 }
 
 export type TimelineToggleEvent = CustomEvent<TimelineToggleEventDetail>;

package/components/timeline/timeline.yaml

@@ -27,14 +27,11 @@ props:
     enum: [sm, md]
 events:
   timeline-toggle:
-    description: Fired when a collapsible timeline item is expanded or collapsed. Detail carries the toggled item's id + new open state.
+    description: Fired when a collapsible timeline item is expanded or collapsed. detail.expanded carries the new open state.
     detail:
-      id:
-        type: string
-        description: Item id (matches the timeline-item-ui's data-id attr).
-      open:
+      expanded:
         type: boolean
-        description: New open state after the toggle.
+        description: New open state of the toggled item after the press.
 slots:
   default:
     description: Accepts <timeline-item-ui> children.

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

@@ -37,7 +37,13 @@
     "composes": [],
     "events": {
       "change": {
-        "description": "Fired when selection changes. detail: { value }"
+        "description": "Fired when selection changes. detail: { value }",
+        "detail": {
+          "value": {
+            "description": "New toggle-group value.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

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

@@ -12,7 +12,12 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type ToggleGroupChangeEvent = CustomEvent<unknown>;
+export interface ToggleGroupChangeEventDetail {
+  /** New toggle-group value. */
+  value: string;
+}
+
+export type ToggleGroupChangeEvent = CustomEvent<ToggleGroupChangeEventDetail>;
 
 export class UIToggleGroup extends UIElement {
   /** When true, restrict to one active option (single-select). */

package/components/toggle-group/toggle-group.yaml

@@ -19,6 +19,10 @@ props:
 events:
   change:
     description: "Fired when selection changes. detail: { value }"
+    detail:
+      value:
+        type: string
+        description: New toggle-group value.
 slots:
   default:
     description: "Default slot — primary child content."

package/components/toggle-scheme/toggle-scheme.a2ui.json

@@ -129,7 +129,17 @@
     ],
     "events": {
       "scheme-change": {
-        "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }."
+        "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }.",
+        "detail": {
+          "scheme": {
+            "description": "Active color scheme (\"light\" or \"dark\").",
+            "type": "string"
+          },
+          "source": {
+            "description": "Change source — \"press\" / \"media\" / \"programmatic\".",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/toggle-scheme/toggle-scheme.d.ts

@@ -12,7 +12,14 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type ToggleSchemeSchemeChangeEvent = CustomEvent<unknown>;
+export interface ToggleSchemeSchemeChangeEventDetail {
+  /** Active color scheme ("light" or "dark"). */
+  scheme: string;
+  /** Change source — "press" / "media" / "programmatic". */
+  source: string;
+}
+
+export type ToggleSchemeSchemeChangeEvent = CustomEvent<ToggleSchemeSchemeChangeEventDetail>;
 
 export class UIToggleScheme extends UIElement {
   /** Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle(). */

package/components/toggle-scheme/toggle-scheme.yaml

@@ -124,6 +124,13 @@ events:
     description: >-
       Fired when the active scheme changes. detail contains
       { scheme: "light" | "dark", source: "press" | "media" | "programmatic" }.
+    detail:
+      scheme:
+        type: string
+        description: Active color scheme ("light" or "dark").
+      source:
+        type: string
+        description: Change source — "press" / "media" / "programmatic".
 slots: {}
 states:
   - name: idle

package/components/tree/tree.a2ui.json

@@ -29,7 +29,21 @@
     ],
     "events": {
       "tree-select": {
-        "description": "Fired when an item is selected. detail: { item, text, value }"
+        "description": "Fired when an item is selected. detail: { item, text, value }",
+        "detail": {
+          "item": {
+            "description": "Selected tree-item element.",
+            "type": "object"
+          },
+          "text": {
+            "description": "Item text content.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Item value attribute.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/tree/tree.d.ts

@@ -12,7 +12,16 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type TreeSelectEvent = CustomEvent<unknown>;
+export interface TreeSelectEventDetail {
+  /** Selected tree-item element. */
+  item: Record<string, unknown>;
+  /** Item text content. */
+  text: string;
+  /** Item value attribute. */
+  value: string;
+}
+
+export type TreeSelectEvent = CustomEvent<TreeSelectEventDetail>;
 
 export class UITree extends UIElement {
 

package/components/tree/tree.yaml

@@ -16,6 +16,16 @@ props: {}
 events:
   tree-select:
     description: "Fired when an item is selected. detail: { item, text, value }"
+    detail:
+      item:
+        type: object
+        description: Selected tree-item element.
+      text:
+        type: string
+        description: Item text content.
+      value:
+        type: string
+        description: Item value attribute.
 slots:
   default (tree-item-ui children):
     description: "Child content region for the `default (tree-item-ui children)` slot."

package/index.d.ts

@@ -86,6 +86,8 @@ export type {
   UIOtpInput,
   OtpInputEvent,
   OtpInputEventDetail,
+  OtpInputCompleteEvent,
+  OtpInputCompleteEventDetail,
 } from './components/otp-input/otp-input.js';
 
 export type {
@@ -99,9 +101,10 @@ export type {
   ColorFormat,
   ColorPickerChangeEvent,
   ColorPickerInputEvent,
-  ColorPickerFormatChangeEvent,
   ColorPickerChangeEventDetail,
-  ColorPickerFormatChangeEventDetail,
+  ColorPickerClampRecord,
+  ColorPickerConstraintClampEvent,
+  ColorPickerConstraintClampEventDetail,
 } from './components/color-picker/color-picker.js';
 
 export type {
@@ -115,6 +118,10 @@ export type {
   CodeChangeEvent,
   CodeInputEvent,
   CodeChangeEventDetail,
+  CodeSaveEvent,
+  CodeSaveEventDetail,
+  CodeLanguageLoadErrorEvent,
+  CodeLanguageLoadErrorEventDetail,
 } from './components/code/code.js';
 
 export type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",