@adia-ai/web-components 0.4.7 → 0.4.8

package/components/swatch/swatch.a2ui.json

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

package/components/swatch/swatch.d.ts

@@ -10,8 +10,9 @@ spacing demo pages.
  *
  * 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/swiper/swiper.a2ui.json

@@ -70,6 +70,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "autoplay-pause": {
         "description": "Fired on autoplay-pause."

package/components/swiper/swiper.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 SwiperAutoplayPauseEvent = CustomEvent<unknown>;
+export type SwiperAutoplayResumeEvent = CustomEvent<unknown>;
+export type SwiperChangeEvent = CustomEvent<unknown>;
+
 export class UISwiper extends UIElement {
   /** Enable auto-advance */
   autoplay: boolean;
@@ -28,4 +33,13 @@ export class UISwiper extends UIElement {
   slidesPerView: string;
   /** Scroll-snap alignment — start, center, end, or none. */
   snap: 'start' | 'center' | 'end' | 'none';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISwiper, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'autoplay-pause', listener: (ev: SwiperAutoplayPauseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'autoplay-resume', listener: (ev: SwiperAutoplayResumeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: SwiperChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/swiper/swiper.yaml

@@ -5,6 +5,10 @@ component: Swiper
 category: layout
 version: 1
 description: CSS-first carousel with scroll-snap. Supports autoplay, loop, and peek; JS-stamped pagination dots and paddles.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
 props:
   autoplay:
     description: Enable auto-advance

package/components/switch/switch.a2ui.json

@@ -78,6 +78,7 @@
       }
     ],
     "category": "layout",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when checked state changes"

package/components/table/table.a2ui.json

@@ -84,6 +84,13 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "check-ui",
+      "icon-ui",
+      "progress-ui",
+      "pagination-ui",
+      "badge-ui"
+    ],
     "events": {
       "cell-click": {
         "description": "Fired when a data cell is clicked."

package/components/table/table.d.ts

@@ -5,12 +5,19 @@
  *
  * 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 TableCellClickEvent = CustomEvent<unknown>;
+export type TablePageEvent = CustomEvent<unknown>;
+export type TableResizeEvent = CustomEvent<unknown>;
+export type TableSelectEvent = CustomEvent<unknown>;
+export type TableSortEvent = CustomEvent<unknown>;
+
 export class UITable extends UIElement {
   /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
   columns: unknown[];
@@ -34,4 +41,15 @@ export class UITable extends UIElement {
   sortable: boolean;
   /** Alternate row background colors for visual scanning. */
   striped: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITable, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'cell-click', listener: (ev: TableCellClickEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'page', listener: (ev: TablePageEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'resize', listener: (ev: TableResizeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'select', listener: (ev: TableSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sort', listener: (ev: TableSortEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/table/table.yaml

@@ -8,6 +8,14 @@ category: agent
 version: 1
 description: Data table with sorting, selection, pagination, search, column resize, keyboard nav,
   cell types, and CSV export. CSS grid + ARIA grid roles.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - check-ui
+  - icon-ui
+  - progress-ui
+  - pagination-ui
+  - badge-ui
 props:
   columns:
     description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -73,6 +73,18 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "text-ui",
+      "badge-ui",
+      "search-ui",
+      "button-ui",
+      "field-ui",
+      "select-ui",
+      "input-ui",
+      "menu-item-ui",
+      "icon-ui",
+      "check-ui"
+    ],
     "events": {
       "columns-change": {
         "description": "Column visibility changed. Detail: { hiddenColumns }."

package/components/table-toolbar/table-toolbar.d.ts

@@ -5,12 +5,18 @@
  *
  * 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 TableToolbarColumnsChangeEvent = CustomEvent<unknown>;
+export type TableToolbarFilterChangeEvent = CustomEvent<unknown>;
+export type TableToolbarSearchEvent = CustomEvent<unknown>;
+export type TableToolbarSortChangeEvent = CustomEvent<unknown>;
+
 export class UITableToolbar extends UIElement {
   /** Optional count badge value shown next to the title. When unset, falls back to the row count of the bound table. */
   count: string;
@@ -30,4 +36,14 @@ export class UITableToolbar extends UIElement {
   text: string;
   /** Toolbar visual variant. `default` renders bare on parent surface; `card` adds the same chrome as a card-ui header. */
   variant: 'default' | 'card';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITableToolbar, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'columns-change', listener: (ev: TableToolbarColumnsChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'filter-change', listener: (ev: TableToolbarFilterChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'search', listener: (ev: TableToolbarSearchEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sort-change', listener: (ev: TableToolbarSortChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/table-toolbar/table-toolbar.yaml

@@ -15,6 +15,19 @@ description: >-
   column descriptor's `filter` field overrides the auto-detect: `'select'`
   forces multi-select even on high-cardinality columns; `'text'` forces a
   contains input even on small enums.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - text-ui
+  - badge-ui
+  - search-ui
+  - button-ui
+  - field-ui
+  - select-ui
+  - input-ui
+  - menu-item-ui
+  - icon-ui
+  - check-ui
 props:
   for:
     description: id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted.

package/components/tabs/tabs.a2ui.json

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

package/components/tabs/tabs.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 TabsChangeEvent = CustomEvent<unknown>;
+
 export class UITabs extends UIElement {
   /** Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal. */
   orientation: string;
@@ -18,4 +21,11 @@ export class UITabs extends UIElement {
   value: string;
   /** Visual variant — default underline strip, `pills` for filled pill tabs, `underline` (explicit). */
   variant: 'default' | 'pills' | 'underline' | 'segmented' | 'bordered';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITabs, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: TabsChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/tabs/tabs.yaml

@@ -7,6 +7,10 @@ component: Tabs
 category: container
 version: 1
 description: Tabbed panel switcher. Renders button strip from child tab-ui elements.
+# 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: Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal.

package/components/tag/tag.a2ui.json

@@ -64,6 +64,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [],
     "events": {
       "remove": {
         "description": "Fired when the dismiss button is activated."

package/components/tag/tag.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 TagRemoveEvent = CustomEvent<unknown>;
+
 export class UITag extends UIElement {
   /** Disables interaction and dims the tag. */
   disabled: boolean;
@@ -24,4 +27,11 @@ export class UITag extends UIElement {
   textContent: string;
   /** Semantic variant — `default | info | success | warning | danger`. */
   variant: 'default' | 'info' | 'success' | 'warning' | 'danger';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITag, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'remove', listener: (ev: TagRemoveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/text/text.a2ui.json

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

package/components/text/text.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/textarea/textarea.a2ui.json

@@ -60,6 +60,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when the textarea loses focus after a value change."

package/components/timeline/timeline.a2ui.json

@@ -42,7 +42,24 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
-    "events": {},
+    "composes": [
+      "icon-ui"
+    ],
+    "events": {
+      "timeline-toggle": {
+        "description": "Fired when a collapsible timeline item is expanded or collapsed. Detail carries the toggled item's id + 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.",
+            "type": "boolean"
+          }
+        }
+      }
+    },
     "examples": [
       {
         "description": "Order tracking card with a timeline showing order status milestones from placed to delivered.",

package/components/timeline/timeline.d.ts

@@ -5,15 +5,32 @@
  *
  * 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 TimelineToggleEventDetail {
+  /** Item id (matches the timeline-item-ui's data-id attr). */
+  id: string;
+  /** New open state after the toggle. */
+  open: boolean;
+}
+
+export type TimelineToggleEvent = CustomEvent<TimelineToggleEventDetail>;
+
 export class UITimeline extends UIElement {
   /** Layout direction */
   orientation: 'vertical' | 'horizontal';
   /** Rail size preset — use `sm` for agent-reasoning/pipeline views; `md` is the default. */
   size: 'sm' | 'md';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITimeline, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'timeline-toggle', listener: (ev: TimelineToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/timeline/timeline.yaml

@@ -7,6 +7,10 @@ component: Timeline
 category: display
 version: 1
 description: "Timeline and step wizard. Two modes: timeline (per-item state) and steps (parent-driven)."
+# 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: Layout direction
@@ -21,7 +25,16 @@ props:
     default: md
     reflect: true
     enum: [sm, md]
-events: {}
+events:
+  timeline-toggle:
+    description: Fired when a collapsible timeline item is expanded or collapsed. Detail carries the toggled item's id + new open state.
+    detail:
+      id:
+        type: string
+        description: Item id (matches the timeline-item-ui's data-id attr).
+      open:
+        type: boolean
+        description: New open state after the toggle.
 slots:
   default:
     description: Accepts <timeline-item-ui> children.

package/components/toast/toast.a2ui.json

@@ -62,6 +62,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {
       "close": {
         "description": "Fired when the toast is dismissed via click or auto-timeout"

package/components/toast/toast.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 ToastCloseEvent = CustomEvent<unknown>;
+
 export class UIToast extends UIElement {
   /** Auto-dismiss time in milliseconds. 0 disables auto-dismiss. */
   duration: number;
@@ -20,4 +23,11 @@ export class UIToast extends UIElement {
   text: string;
   /** Semantic variant — `default | info | success | warning | danger`. `primary` and `muted` are style hints; canonical "neutral but interesting" tone is `info`. */
   variant: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | 'muted' | 'neutral';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIToast, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'close', listener: (ev: ToastCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

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

@@ -34,6 +34,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when selection changes. detail: { value }"

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

@@ -5,15 +5,25 @@
  *
  * 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 ToggleGroupChangeEvent = CustomEvent<unknown>;
+
 export class UIToggleGroup extends UIElement {
   /** When true, restrict to one active option (single-select). */
   single: boolean;
   /** Comma-separated selected values */
   value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIToggleGroup, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: ToggleGroupChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

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

@@ -124,6 +124,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "control",
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "scheme-change": {
         "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }."

package/components/toggle-scheme/toggle-scheme.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 ToggleSchemeSchemeChangeEvent = CustomEvent<unknown>;
+
 export class UIToggleScheme extends UIElement {
   /** Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle(). */
   activeScheme: '' | 'light' | 'dark';
@@ -38,4 +41,11 @@ export class UIToggleScheme extends UIElement {
   target: string;
   /** Visual style forwarded to the internal <button-ui>. Defaults to "ghost" (matches app practice). */
   variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'soft';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIToggleScheme, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'scheme-change', listener: (ev: ToggleSchemeSchemeChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

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

@@ -13,6 +13,10 @@ description: >-
   <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired
   `<button-ui id="theme-toggle">` + `applyScheme()` pattern previously
   duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
 props:
   scheme:
     description: Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force.

package/components/toolbar/toolbar.a2ui.json

@@ -48,6 +48,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [
+      "button-ui"
+    ],
     "events": {},
     "examples": [
       {

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

@@ -8,6 +8,10 @@ category: layout
 version: 1
 description: Horizontal action bar with automatic overflow. Items that don't fit move to a spillover
   popover menu.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
 props:
   bordered:
     description: Adds a border around the toolbar for visual separation from surrounding content.

package/components/tooltip/tooltip.a2ui.json

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

package/components/tooltip/tooltip.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';