@adia-ai/web-components 0.0.1

package/components/action-list/action-list.css

@@ -0,0 +1,115 @@
+@scope (action-list-ui) {
+  :where(:scope) {
+    --action-list-gap: var(--a-space-0-5);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--action-list-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+@scope (action-item-ui) {
+  :where(:scope) {
+    /* Reuse menu-item visual language for consistency */
+    --action-item-gap:             var(--a-space-2);
+    --action-item-px:              var(--a-space-2);
+    --action-item-py:              var(--a-space-1-5);
+    --action-item-radius:          var(--a-radius-md);
+
+    --action-item-bg:              transparent;
+    --action-item-fg:              var(--a-fg-subtle);
+    --action-item-fg-hover:        var(--a-fg-strong);
+    --action-item-bg-hover:        var(--a-bg-muted);
+    --action-item-fg-disabled:     var(--a-fg-muted);
+    --action-item-icon-fg:         var(--a-fg-muted);
+    --action-item-icon-fg-hover:   var(--a-fg);
+    --action-item-danger-fg:       var(--a-danger-bg);
+    --action-item-danger-bg:       var(--a-danger-muted);
+
+    --action-item-font-size:       var(--a-ui-size);
+    --action-item-icon-size:       var(--action-item-font-size);
+
+    --action-item-focus-ring:      var(--a-focus-ring);
+
+    --action-item-duration:        var(--a-duration-fast);
+    --action-item-easing:          var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--action-item-gap);
+    padding: var(--action-item-py) var(--action-item-px);
+    border-radius: var(--action-item-radius);
+    font-size: var(--action-item-font-size);
+    background: var(--action-item-bg);
+    color: var(--action-item-fg);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition:
+      background var(--action-item-duration) var(--action-item-easing),
+      color      var(--action-item-duration) var(--action-item-easing);
+  }
+
+  :scope:hover,
+  :scope:focus-visible {
+    background: var(--action-item-bg-hover);
+    color: var(--action-item-fg-hover);
+  }
+  :scope:focus-visible {
+    box-shadow: var(--action-item-focus-ring);
+  }
+
+  /* Icon (leading) */
+  [slot="icon"] {
+    flex-shrink: 0;
+    --a-icon-size: var(--action-item-icon-size);
+    color: var(--action-item-icon-fg);
+    transition: color var(--action-item-duration) var(--action-item-easing);
+  }
+  :scope:hover [slot="icon"],
+  :scope:focus-visible [slot="icon"] {
+    color: var(--action-item-icon-fg-hover);
+  }
+
+  /* Text */
+  [slot="text"] {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Default slot (trailing content: kbd, badge, chevron) pushed to far right */
+  > :not([slot="icon"]):not([slot="text"]) {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    color: var(--action-item-icon-fg);
+  }
+
+  /* Variant: danger (destructive action) — only remaps tokens */
+  :scope[variant="danger"] {
+    --action-item-fg:            var(--action-item-danger-fg);
+    --action-item-fg-hover:      var(--action-item-danger-fg);
+    --action-item-icon-fg:       var(--action-item-danger-fg);
+    --action-item-icon-fg-hover: var(--action-item-danger-fg);
+    --action-item-bg-hover:      var(--action-item-danger-bg);
+  }
+
+  /* Disabled — only remaps tokens */
+  :scope[disabled] {
+    --action-item-fg:      var(--action-item-fg-disabled);
+    --action-item-icon-fg: var(--action-item-fg-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+}

package/components/action-list/action-list.js

@@ -0,0 +1,149 @@
+/**
+ * <action-list-ui>
+ *   <action-item-ui icon="plus"     text="New Project" value="new"></action-item-ui>
+ *   <action-item-ui icon="users"    text="Invite Team" value="invite"></action-item-ui>
+ *   <action-item-ui icon="download" text="Export Data" value="export"></action-item-ui>
+ * </action-list-ui>
+ *
+ * Inline (non-dropdown) list of command actions. Think of it as a menu that
+ * stays open — useful for quick-actions cards, settings rails, sidebar shortcuts.
+ *
+ * Differs from <menu-ui> (which renders in a popover) and <list-ui> (which is
+ * passive — no hover/click semantics).
+ *
+ * Fires `action` CustomEvent with { value, text, item } when an item is clicked
+ * or activated via keyboard (Enter / Space). Keyboard nav: ArrowUp/Down, Home/End.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaActionList extends AdiaElement {
+  static properties = {};
+  static template = () => null;
+
+  #bound = false;
+
+  connected() {
+    this.setAttribute('role', 'list');
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKey);
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#bound = false;
+  }
+
+  #items() {
+    return Array.from(this.querySelectorAll(':scope > action-item-ui:not([disabled])'));
+  }
+
+  #onClick = (e) => {
+    const item = e.target.closest('action-item-ui');
+    if (!item || item.hasAttribute('disabled')) return;
+    if (!this.contains(item)) return;
+    this.dispatchEvent(new CustomEvent('action', {
+      bubbles: true,
+      detail: { value: item.getAttribute('value') || '', text: item.getAttribute('text') || item.textContent.trim(), item },
+    }));
+  };
+
+  #onKey = (e) => {
+    const items = this.#items();
+    if (!items.length) return;
+    const active = document.activeElement?.closest?.('action-item-ui');
+    const i = active ? items.indexOf(active) : -1;
+    const focus = (idx) => {
+      const next = items[(idx + items.length) % items.length];
+      next?.focus?.({ preventScroll: true });
+    };
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); focus(i + 1); break;
+      case 'ArrowUp':   e.preventDefault(); focus(i - 1); break;
+      case 'Home':      e.preventDefault(); focus(0); break;
+      case 'End':       e.preventDefault(); focus(items.length - 1); break;
+      case 'Enter':
+      case ' ': {
+        if (active) { e.preventDefault(); active.click(); }
+        break;
+      }
+    }
+  };
+}
+
+customElements.define('action-list-ui', AdiaActionList);
+
+class AdiaActionItem extends AdiaElement {
+  static properties = {
+    icon:     { type: String,  default: '', reflect: true },
+    text:     { type: String,  default: '', reflect: true },
+    value:    { type: String,  default: '', reflect: true },
+    variant:  { type: String,  default: 'default', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'listitem');
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
+    this.#stamp();
+    this.#syncAria();
+  }
+
+  #stamp() {
+    if (this.querySelector('[slot="text"]')) return;
+
+    if (this.icon) {
+      const iconEl = document.createElement('icon-ui');
+      iconEl.setAttribute('slot', 'icon');
+      iconEl.setAttribute('name', this.icon);
+      this.appendChild(iconEl);
+    }
+
+    if (this.text) {
+      const span = document.createElement('span');
+      span.setAttribute('slot', 'text');
+      span.textContent = this.text;
+      this.appendChild(span);
+    }
+  }
+
+  #syncAria() {
+    if (this.disabled) {
+      this.setAttribute('aria-disabled', 'true');
+      this.setAttribute('tabindex', '-1');
+    } else {
+      this.removeAttribute('aria-disabled');
+      this.setAttribute('tabindex', '0');
+    }
+  }
+
+  render() {
+    const iconEl = this.querySelector('[slot="icon"]');
+    if (this.icon) {
+      if (iconEl) iconEl.setAttribute('name', this.icon);
+      else {
+        const el = document.createElement('icon-ui');
+        el.setAttribute('slot', 'icon');
+        el.setAttribute('name', this.icon);
+        this.prepend(el);
+      }
+    } else if (iconEl) {
+      iconEl.remove();
+    }
+
+    const textEl = this.querySelector('[slot="text"]');
+    if (textEl) textEl.textContent = this.text;
+
+    this.#syncAria();
+  }
+}
+
+customElements.define('action-item-ui', AdiaActionItem);
+
+export { AdiaActionList, AdiaActionItem };

package/components/action-list/action-list.yaml

@@ -0,0 +1,56 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaActionList
+tag: action-list-ui
+component: ActionList
+category: navigation
+version: 1
+description: Inline list of command actions with keyboard navigation. Fires action event when an
+  item is clicked or activated via keyboard.
+props: {}
+events:
+  action:
+    description: "Fired on action."
+slots:
+  default (action-item-ui children):
+    description: "Child content region for the `default (action-item-ui children)` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-action-list
+    description: Basic ActionList usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "ActionList"
+        }
+      ]
+keywords:
+  - actionlist
+  - action-list
+  - action
+  - list
+synonyms: {}
+related: []

package/components/agent-artifact/agent-artifact.a2ui.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentArtifact.json",
+  "title": "AgentArtifact",
+  "description": "Inline container for structured agent artifacts (A2UI, JSON, tickets).",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "title": {
+      "description": "Header title.",
+      "type": "string",
+      "default": ""
+    },
+    "collapsed": {
+      "description": "Start collapsed.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "AgentArtifact"
+    },
+    "icon": {
+      "description": "icon-ui name in header.",
+      "type": "string",
+      "default": ""
+    },
+    "kind": {
+      "description": "Uppercase badge label.",
+      "type": "string",
+      "default": ""
+    },
+    "tone": {
+      "description": "neutral | accent | warning | danger",
+      "type": "string",
+      "default": "neutral"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "artifact-toggle": {
+        "description": "Fired on artifact-toggle."
+      }
+    },
+    "examples": [
+      {
+        "description": "Artifact with a code body and two actions.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AgentArtifact\",\n    \"title\": \"product-card\",\n    \"kind\": \"A2UI\",\n    \"icon\": \"layout\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "artifact",
+      "container",
+      "inline",
+      "preview",
+      "attachment"
+    ],
+    "name": "AdiaAgentArtifact",
+    "related": [
+      "card-ui",
+      "code-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      },
+      "primary": {
+        "description": "Child content region for the `primary` slot."
+      },
+      "secondary": {
+        "description": "Child content region for the `secondary` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "agent-artifact-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/agent-artifact/agent-artifact.css

@@ -0,0 +1,94 @@
+@scope (agent-artifact-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --agent-artifact-radius:            var(--a-radius);
+    --agent-artifact-padding:           var(--a-space-3);
+    --agent-artifact-header-padding-y:  var(--a-space-2);
+    --agent-artifact-header-padding-x:  var(--a-space-3);
+    --agent-artifact-gap:               var(--a-space-2);
+
+    /* ── Colors ── */
+    --agent-artifact-bg:                var(--a-bg-subtle);
+    --agent-artifact-fg:                var(--a-fg);
+    --agent-artifact-fg-muted:          var(--a-fg-muted);
+    --agent-artifact-border:            var(--a-border-subtle);
+    --agent-artifact-header-bg:         var(--a-bg);
+
+    /* ── Typography ── */
+    --agent-artifact-title-size:        var(--a-ui-md);
+    --agent-artifact-title-weight:      var(--a-weight-medium);
+
+    /* ── Motion ── */
+    --agent-artifact-duration:          var(--a-duration-fast);
+  }
+
+  :scope {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--agent-artifact-border);
+    border-radius: var(--agent-artifact-radius);
+    background: var(--agent-artifact-bg);
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  :scope[tone="accent"]  { --agent-artifact-border: var(--a-accent-bg); }
+  :scope[tone="warning"] { --agent-artifact-border: var(--a-warning-bg); }
+  :scope[tone="danger"]  { --agent-artifact-border: var(--a-danger-bg); }
+
+  [data-artifact-header] {
+    display: flex;
+    align-items: center;
+    gap: var(--agent-artifact-gap);
+    padding: var(--agent-artifact-header-padding-y) var(--agent-artifact-header-padding-x);
+    background: var(--agent-artifact-header-bg);
+    border-block-end: 1px solid var(--agent-artifact-border);
+    cursor: pointer;
+    user-select: none;
+    min-width: 0;
+  }
+
+  [data-artifact-icon] {
+    flex-shrink: 0;
+  }
+
+  [data-artifact-title] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--agent-artifact-title-size);
+    font-weight: var(--agent-artifact-title-weight);
+    color: var(--agent-artifact-fg);
+  }
+
+  /* [data-artifact-kind] is a <badge-ui size="sm"> — it brings its own pill
+     chrome (bg, radius, size, weight). We only tweak tracking so the
+     uppercase kind reads as a tag, not a label. */
+  [data-artifact-kind] {
+    flex-shrink: 0;
+    letter-spacing: 0.04em;
+  }
+
+  [data-artifact-actions] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--a-space-1);
+    flex-shrink: 0;
+  }
+
+  [data-artifact-chevron] {
+    flex-shrink: 0;
+    transition: transform var(--agent-artifact-duration);
+  }
+
+  [data-artifact-body] {
+    padding: var(--agent-artifact-padding);
+    min-width: 0;
+  }
+
+  :scope[collapsed] [data-artifact-header] {
+    border-block-end: none;
+  }
+}

package/components/agent-artifact/agent-artifact.js

@@ -0,0 +1,169 @@
+/**
+ * <agent-artifact-ui> — Inline container for a structured agent artifact.
+ *
+ * Wraps an artifact (A2UI UI, JSON blob, ticket, code, etc.) with a compact
+ * header showing a title + icon + optional kind badge, and two action slots:
+ * "primary" (e.g. "Open in canvas") and "secondary" (e.g. "Download"). The
+ * artifact body goes in the default slot.
+ *
+ * The host can attach any node (code-ui, canvas-ui, div, etc.) as the body.
+ *
+ * Usage:
+ *   <agent-artifact-ui title="product-card" kind="A2UI" icon="layout">
+ *     <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple"></button-ui>
+ *     <button-ui slot="secondary" text="Copy" icon="copy"></button-ui>
+ *     <code-ui language="json">{…}</code-ui>
+ *   </agent-artifact-ui>
+ *
+ * Attributes:
+ *   title       — header title (string)
+ *   kind        — small uppercase badge, e.g. "A2UI", "JSON", "TICKET"
+ *   icon        — icon-ui name for the header
+ *   collapsed   — start collapsed (body hidden)
+ *   tone        — neutral (default) | accent | warning | danger
+ *
+ * Events:
+ *   artifact-toggle — detail: { collapsed }
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+const TONE_TO_BADGE_VARIANT = {
+  neutral: 'default',
+  accent:  'accent',
+  warning: 'warning',
+  danger:  'danger',
+};
+
+class AdiaAgentArtifact extends AdiaElement {
+  static properties = {
+    title:     { type: String,  default: '', reflect: true },
+    kind:      { type: String,  default: '', reflect: true },
+    icon:      { type: String,  default: '', reflect: true },
+    collapsed: { type: Boolean, default: false, reflect: true },
+    tone:      { type: String,  default: 'neutral', reflect: true },
+  };
+
+  static template = () => null;
+
+  #headerEl = null;
+  #iconEl = null;
+  #titleEl = null;
+  #kindEl = null;
+  #chevronEl = null;
+  #bodyEl = null;
+
+  connected() {
+    this.#build();
+  }
+
+  disconnected() {
+    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
+    this.#headerEl = this.#iconEl = this.#titleEl = null;
+    this.#kindEl = this.#chevronEl = this.#bodyEl = null;
+  }
+
+  #onHeaderClick = (e) => {
+    // Ignore clicks that land on header action buttons
+    if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('artifact-toggle', {
+      bubbles: true, detail: { collapsed: this.collapsed },
+    }));
+    this.render();
+  };
+
+  render() {
+    if (!this.#headerEl) return;
+
+    if (this.#iconEl) {
+      if (this.icon) { this.#iconEl.setAttribute('name', this.icon); this.#iconEl.hidden = false; }
+      else { this.#iconEl.hidden = true; }
+    }
+    if (this.#titleEl) {
+      this.#titleEl.textContent = this.title || '';
+      this.#titleEl.hidden = !this.title;
+    }
+    if (this.#kindEl) {
+      this.#kindEl.setAttribute('text', (this.kind || '').toUpperCase());
+      this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
+      this.#kindEl.hidden = !this.kind;
+    }
+    if (this.#chevronEl) {
+      this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
+    }
+    if (this.#bodyEl) {
+      this.#bodyEl.hidden = this.collapsed;
+    }
+  }
+
+  #build() {
+    // We operate in a slotted model: the author's children that match
+    // slot="primary"/slot="secondary" live in the header; the rest is body.
+    // We build scaffolding DOM around those children without reparenting.
+    //
+    // To keep the Light-DOM approach consistent, we wrap existing children
+    // into a body container if one isn't already present.
+
+    // Capture any existing non-slotted children to put into the body wrapper
+    const existingBodyNodes = Array.from(this.childNodes).filter((n) => {
+      if (n.nodeType === 1) {
+        const slot = /** @type {Element} */ (n).getAttribute?.('slot') || '';
+        return slot !== 'primary' && slot !== 'secondary';
+      }
+      return true;
+    });
+
+    // Clear — we'll rebuild, preserving slotted action buttons
+    const primaryBtns = this.querySelectorAll(':scope > [slot="primary"]');
+    const secondaryBtns = this.querySelectorAll(':scope > [slot="secondary"]');
+
+    this.innerHTML = '';
+
+    // Header
+    this.#headerEl = document.createElement('div');
+    this.#headerEl.setAttribute('data-artifact-header', '');
+    this.#headerEl.addEventListener('click', this.#onHeaderClick);
+
+    this.#iconEl = document.createElement('icon-ui');
+    this.#iconEl.setAttribute('data-artifact-icon', '');
+    this.#iconEl.setAttribute('color', 'muted');
+    if (this.icon) this.#iconEl.setAttribute('name', this.icon);
+    else this.#iconEl.hidden = true;
+
+    this.#titleEl = document.createElement('span');
+    this.#titleEl.setAttribute('data-artifact-title', '');
+    if (this.title) this.#titleEl.textContent = this.title;
+    else this.#titleEl.hidden = true;
+
+    this.#kindEl = document.createElement('badge-ui');
+    this.#kindEl.setAttribute('data-artifact-kind', '');
+    this.#kindEl.setAttribute('size', 'sm');
+    this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
+    if (this.kind) this.#kindEl.setAttribute('text', this.kind.toUpperCase());
+    else this.#kindEl.hidden = true;
+
+    const actions = document.createElement('span');
+    actions.setAttribute('data-artifact-actions', '');
+    for (const btn of secondaryBtns) actions.appendChild(btn);
+    for (const btn of primaryBtns) actions.appendChild(btn);
+
+    this.#chevronEl = document.createElement('icon-ui');
+    this.#chevronEl.setAttribute('color', 'muted');
+    this.#chevronEl.setAttribute('data-artifact-chevron', '');
+    this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
+
+    this.#headerEl.append(this.#iconEl, this.#titleEl, this.#kindEl, actions, this.#chevronEl);
+
+    // Body
+    this.#bodyEl = document.createElement('div');
+    this.#bodyEl.setAttribute('data-artifact-body', '');
+    for (const n of existingBodyNodes) this.#bodyEl.appendChild(n);
+    if (this.collapsed) this.#bodyEl.hidden = true;
+
+    this.append(this.#headerEl, this.#bodyEl);
+  }
+}
+
+customElements.define('agent-artifact-ui', AdiaAgentArtifact);
+export { AdiaAgentArtifact };