@adia-ai/web-components 0.0.1 → 0.0.2

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

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "autocollapse": {
-      "description": "Auto-collapse after finish().",
-      "type": "boolean",
-      "default": true
-    },
     "collapsed": {
       "description": "Start collapsed.",
       "type": "boolean",
@@ -31,10 +26,21 @@
       "type": "string",
       "default": ""
     },
-    "mode": {
-      "description": "compact | expanded",
+    "noAutocollapse": {
+      "description": "Disable auto-collapse after finish().",
+      "type": "boolean",
+      "default": false
+    },
+    "status": {
+      "description": "Drives the status icon — idle, active (spinner), done (check), error (warning).",
       "type": "string",
-      "default": "compact"
+      "enum": [
+        "idle",
+        "active",
+        "done",
+        "error"
+      ],
+      "default": "active"
     }
   },
   "required": [

package/components/agent-reasoning/agent-reasoning.css

@@ -149,7 +149,7 @@
   /* ═══════ Plan — card in content+aside, marker empty ═══════ */
 
   [data-reasoning-plan] {
-    grid-column: content / -1 !important;
+    grid-column: content / -1;
     display: flex;
     flex-direction: column;
     gap: var(--a-space-1);

package/components/agent-reasoning/agent-reasoning.js

@@ -33,9 +33,9 @@
  *   r.finish('2 iterations · 94/100 · 7s');
  *
  * Attributes:
- *   collapsed     — start collapsed
- *   autocollapse  — collapse 1.2s after finish (default: true)
- *   heading       — fallback summary label while active
+ *   collapsed         — start collapsed
+ *   no-autocollapse   — disable auto-collapse 1.2s after finish (default: false — auto-collapse on)
+ *   heading           — fallback summary label while active
  *   status        — 'idle' | 'active' | 'done' | 'error' (default: 'active')
  *                   Drives the status icon: spinner / check-circle / warning-circle
  *
@@ -56,10 +56,10 @@ const REASONING_STATUSES = new Set(['idle', 'active', 'done', 'error']);
 
 class AdiaAgentReasoning extends AdiaElement {
   static properties = {
-    collapsed:    { type: Boolean, default: false,    reflect: true },
-    autocollapse: { type: Boolean, default: true,     reflect: true },
-    heading:      { type: String,  default: '',       reflect: true },
-    status:       { type: String,  default: 'active', reflect: true },
+    collapsed:       { type: Boolean, default: false,    reflect: true },
+    noAutocollapse:  { type: Boolean, default: false,    reflect: true, attribute: 'no-autocollapse' },
+    heading:         { type: String,  default: '',       reflect: true },
+    status:          { type: String,  default: 'active', reflect: true },
   };
 
   static template = () => null;
@@ -202,7 +202,7 @@ class AdiaAgentReasoning extends AdiaElement {
     }));
 
     if (this.#finishTimer != null) clearTimeout(this.#finishTimer);
-    if (this.autocollapse && !isError) {
+    if (!this.noAutocollapse && !isError) {
       this.#finishTimer = setTimeout(() => {
         this.#finishTimer = null;
         this.collapsed = true;

package/components/agent-reasoning/agent-reasoning.yaml

@@ -8,10 +8,11 @@ category: agent
 version: 1
 description: Agent inner monologue + pipeline viewer with steps, thoughts, plans, and iterations.
 props:
-  autocollapse:
-    description: Auto-collapse after finish().
+  noAutocollapse:
+    description: Disable auto-collapse after finish().
     type: boolean
-    default: true
+    default: false
+    attribute: no-autocollapse
   collapsed:
     description: Start collapsed.
     type: boolean
@@ -20,10 +21,12 @@ props:
     description: Fallback summary label.
     type: string
     default: ""
-  mode:
-    description: compact | expanded
+  status:
+    description: Drives the status icon — idle, active (spinner), done (check), error (warning).
     type: string
-    default: compact
+    default: active
+    reflect: true
+    enum: [idle, active, done, error]
 events:
   reasoning-finish:
     description: "Fired on reasoning-finish."

package/components/avatar/avatar.a2ui.json

@@ -21,11 +21,6 @@
       "type": "string",
       "default": ""
     },
-    "initials": {
-      "description": "Explicit initials override. When set, takes precedence over `name`.",
-      "type": "string",
-      "default": ""
-    },
     "name": {
       "description": "User name for initials (first letter of each word, max 2).",
       "type": "string",
@@ -65,11 +60,6 @@
       "description": "Display name (for initials)",
       "type": "string",
       "default": ""
-    },
-    "variant": {
-      "description": "Color/emphasis variant for the placeholder background + initials foreground.",
-      "type": "string",
-      "default": "default"
     }
   },
   "required": [

package/components/avatar/avatar.css

@@ -120,7 +120,7 @@
   /* Hover: pop single avatar */
   :scope > avatar-ui:hover {
     transform: translateY(-2px) scale(1.05);
-    z-index: 99 !important;
+    z-index: 99;
   }
 
   /* Group hover: spread apart */

package/components/avatar/avatar.yaml

@@ -12,10 +12,6 @@ props:
     description: User name for initials (first letter of each word, max 2).
     type: string
     default: ""
-  initials:
-    description: Explicit initials override. When set, takes precedence over `name`.
-    type: string
-    default: ""
   icon:
     description: Phosphor icon name shown instead of initials when `src`/`name` are empty.
     type: string
@@ -27,10 +23,6 @@ props:
     enum:
       - circle
       - square
-  variant:
-    description: Color/emphasis variant for the placeholder background + initials foreground.
-    type: string
-    default: default
   size:
     description: >-
       Avatar size. Canonical scale (xs/sm/md/lg/xl); long-form aliases

package/components/badge/badge.a2ui.json

@@ -34,14 +34,14 @@
       "default": "md"
     },
     "status": {
-      "description": "Semantic status shorthand. Auto-maps to variant and sets text.",
+      "description": "Semantic status shorthand. Auto-maps to variant and sets text. `new` → success \"New\"; `updated` → info \"Updated\"; `deprecated` → warning \"Deprecated\"; `removed` → danger \"Removed\"; `beta` → accent \"Beta\". Use `variant` + `text` directly for custom chips.",
       "type": "string",
       "enum": [
-        "New",
-        "Updated",
-        "Deprecated",
-        "Removed",
-        "Beta"
+        "new",
+        "updated",
+        "deprecated",
+        "removed",
+        "beta"
       ],
       "default": ""
     },

package/components/badge/badge.js

@@ -2,6 +2,7 @@
  * <badge-ui text="New" variant="accent"></badge-ui>
  * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
  * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
+ * <badge-ui status="beta"></badge-ui>                                ← status shorthand
  *
  * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
  *
@@ -10,16 +11,26 @@
  * Icon: optional leading icon (any registered icon name; "dot" for legend
  *       markers). Inherits the variant's foreground color so legend chips
  *       read as a single visual unit instead of icon + label collage.
+ * Status: semantic shorthand that auto-maps variant + text.
  */
 
 import { AdiaElement } from '@core/element.js';
 
+const STATUS_MAP = {
+  new:        { variant: 'success', text: 'New' },
+  updated:    { variant: 'info',    text: 'Updated' },
+  deprecated: { variant: 'warning', text: 'Deprecated' },
+  removed:    { variant: 'danger',  text: 'Removed' },
+  beta:       { variant: 'accent',  text: 'Beta' },
+};
+
 class AdiaBadge extends AdiaElement {
   static properties = {
     text:    { type: String,  default: '', reflect: true },
     variant: { type: String,  default: 'default', reflect: true },
     size:    { type: String,  default: 'md', reflect: true },
     icon:    { type: String,  default: '',        reflect: true },
+    status:  { type: String,  default: '',        reflect: true },
   };
 
   static template = () => null;
@@ -29,6 +40,16 @@ class AdiaBadge extends AdiaElement {
   }
 
   render() {
+    // Status shorthand wins over explicit variant/text while it's set —
+    // mixing is unsupported. Converges in one extra render pass.
+    if (this.status) {
+      const entry = STATUS_MAP[this.status];
+      if (entry) {
+        if (this.variant !== entry.variant) this.variant = entry.variant;
+        if (this.text !== entry.text) this.text = entry.text;
+      }
+    }
+
     if (this.text) this.setAttribute('aria-label', this.text);
 
     // Stamp / update the leading icon. Pattern mirrors button-ui so the same

package/components/badge/badge.yaml

@@ -25,14 +25,17 @@ props:
       - xl
   status:
     description: Semantic status shorthand. Auto-maps to variant and sets text.
+      `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning
+      "Deprecated"; `removed` → danger "Removed"; `beta` → accent "Beta".
+      Use `variant` + `text` directly for custom chips.
     type: string
     default: ""
     enum:
-      - New
-      - Updated
-      - Deprecated
-      - Removed
-      - Beta
+      - new
+      - updated
+      - deprecated
+      - removed
+      - beta
   text:
     description: Badge text content. Falls back to existing textContent.
     type: string

package/components/button/button.a2ui.json

@@ -18,11 +18,6 @@
       "type": "string",
       "default": "button"
     },
-    "active": {
-      "description": "Indicates an active/pressed toggle state (for group-buttons and segmented controls).",
-      "type": "boolean",
-      "default": false
-    },
     "component": {
       "const": "Button"
     },
@@ -36,11 +31,6 @@
       "type": "string",
       "default": ""
     },
-    "iconRight": {
-      "description": "Trailing Phosphor icon name (rendered after text).",
-      "type": "string",
-      "default": ""
-    },
     "size": {
       "description": "Sizing scale (xs/sm/md/lg/xl).",
       "type": "string",
@@ -70,7 +60,6 @@
         "default",
         "solid",
         "outline",
-        "outlined",
         "ghost",
         "danger",
         "primary",

package/components/button/button.css

@@ -13,7 +13,7 @@
     --button-fg-hover:         var(--a-ui-text-hover);
     --button-border-hover:     transparent;
     --button-bg-primary:       var(--a-primary);
-    --button-fg-primary:       white;
+    --button-fg-primary:       var(--a-chrome-light);
     --button-bg-outline:       transparent;
     --button-fg-outline:       var(--a-fg);
     --button-border-outline:   var(--a-ui-border);

package/components/button/button.js

@@ -37,7 +37,7 @@ class AdiaButton extends AdiaElement {
   #onClick = (e) => {
     if (this.disabled) { e.stopPropagation(); return; }
     if (this.type === 'submit') {
-      const form = this.closest('form, form-container-n');
+      const form = this.closest('form');
       if (form?.requestSubmit) form.requestSubmit();
     }
     this.dispatchEvent(new Event('press', { bubbles: true }));

package/components/button/button.yaml

@@ -12,11 +12,6 @@ props:
     description: HTML button type (button, submit, reset)
     type: string
     default: button
-  active:
-    description: Indicates an active/pressed toggle state (for group-buttons and segmented controls).
-    type: boolean
-    default: false
-    reflect: true
   stretch:
     description: "Makes the button stretch to fill the parent's width"
     type: boolean
@@ -31,11 +26,6 @@ props:
     description: Leading Phosphor icon name (rendered before text).
     type: string
     default: ""
-  iconRight:
-    description: Trailing Phosphor icon name (rendered after text).
-    type: string
-    default: ""
-    attribute: icon-right
   size:
     description: "Sizing scale (xs/sm/md/lg/xl)."
     type: string
@@ -58,7 +48,6 @@ props:
       - default
       - solid
       - outline
-      - outlined
       - ghost
       - danger
       - primary

package/components/calendar-picker/calendar-picker.js

@@ -58,6 +58,18 @@ class AdiaCalendarPicker extends AdiaFormElement {
   #viewYear = new Date().getFullYear();
   #viewMonth = new Date().getMonth();
   #focusedDay = null;
+  #popoverClickBound = false;
+
+  #onPopoverClick = (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    const prev = target.closest('[data-cal-prev]');
+    if (prev) { e.stopPropagation(); this.#navigate(-1); return; }
+    const next = target.closest('[data-cal-next]');
+    if (next) { e.stopPropagation(); this.#navigate(1); return; }
+    const day = target.closest('[data-cal-day][data-date]:not([disabled])');
+    if (day) { e.stopPropagation(); this.#selectDate(day.dataset.date); }
+  };
 
   connected() {
     super.connected();
@@ -88,6 +100,8 @@ class AdiaCalendarPicker extends AdiaFormElement {
       this.#popover.setAttribute('slot', 'popover');
       this.#popover.setAttribute('popover', 'manual');
       this.appendChild(this.#popover);
+      this.#popover.addEventListener('click', this.#onPopoverClick);
+      this.#popoverClickBound = true;
     } else {
       const display = this.querySelector('[slot="display"]');
       if (display) display.textContent = this.#displayText();
@@ -95,6 +109,10 @@ class AdiaCalendarPicker extends AdiaFormElement {
 
     if (!this.#popover) this.#popover = this.querySelector('[slot="popover"]');
     if (!this.#trigger) this.#trigger = this.querySelector('[slot="trigger"]');
+    if (this.#popover && !this.#popoverClickBound) {
+      this.#popover.addEventListener('click', this.#onPopoverClick);
+      this.#popoverClickBound = true;
+    }
 
     // Toggle popover
     if (this.open) {
@@ -195,23 +213,7 @@ class AdiaCalendarPicker extends AdiaFormElement {
     h += '</div>';
 
     this.#popover.innerHTML = h;
-
-    // Wire events
-    this.#popover.querySelector('[data-cal-prev]')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.#navigate(-1);
-    });
-    this.#popover.querySelector('[data-cal-next]')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.#navigate(1);
-    });
-
-    for (const btn of this.#popover.querySelectorAll('[data-cal-day][data-date]:not([disabled])')) {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.#selectDate(btn.dataset.date);
-      });
-    }
+    // Events are delegated on #popover (see #onPopoverClick) — no per-element wiring.
   }
 
   #navigate(delta) {
@@ -312,6 +314,10 @@ class AdiaCalendarPicker extends AdiaFormElement {
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKey);
     document.removeEventListener('pointerdown', this.#onOutside);
+    if (this.#popover && this.#popoverClickBound) {
+      this.#popover.removeEventListener('click', this.#onPopoverClick);
+    }
+    this.#popoverClickBound = false;
     this.#anchorCleanup?.();
     this.#anchorCleanup = null;
     this.#popover?.hidePopover?.();

package/components/canvas/canvas.js

@@ -89,7 +89,7 @@ export class AdiaCanvas extends AdiaElement {
     this.#rootEl = document.createElement('a2ui-root');
 
     if (this.theme) {
-      const themeEl = document.createElement('theme-n');
+      const themeEl = document.createElement('theme-ui');
       themeEl.setAttribute('preset', this.theme);
       themeEl.appendChild(this.#rootEl);
       this.#rootContainer.appendChild(themeEl);

package/components/card/card.a2ui.json

@@ -16,17 +16,6 @@
     "component": {
       "const": "Card"
     },
-    "density": {
-      "description": "Interior density — compact/comfortable/spacious. Tightens or loosens padding + gap.",
-      "type": "string",
-      "enum": [
-        "",
-        "compact",
-        "comfortable",
-        "spacious"
-      ],
-      "default": ""
-    },
     "draggable": {
       "description": "Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.",
       "type": "boolean",
@@ -43,21 +32,11 @@
       ],
       "default": 1
     },
-    "interactive": {
-      "description": "Marks the card as clickable — enables hover elevation, pointer cursor, and focus ring.",
-      "type": "boolean",
-      "default": false
-    },
     "padding": {
       "description": "Interior padding scale (overrides --card-padding). Accepts the named scale (none/xs/sm/md/lg/xl) or a numeric rung (\"1\"…\"16\").",
       "type": "string",
       "default": "md"
     },
-    "radius": {
-      "description": "Border radius preset (overrides --card-radius). Named (none/sm/md/lg/round) or numeric.",
-      "type": "string",
-      "default": ""
-    },
     "raw": {
       "description": "Strips background, border, and shadow. Parent owns the surface. Content structure still applies.",
       "type": "boolean",

package/components/card/card.yaml

@@ -22,20 +22,6 @@ props:
       scale (none/xs/sm/md/lg/xl) or a numeric rung ("1"…"16").
     type: string
     default: md
-  interactive:
-    description: Marks the card as clickable — enables hover elevation, pointer cursor, and focus ring.
-    type: boolean
-    default: false
-    reflect: true
-  radius:
-    description: Border radius preset (overrides --card-radius). Named (none/sm/md/lg/round) or numeric.
-    type: string
-    default: ""
-  density:
-    description: Interior density — compact/comfortable/spacious. Tightens or loosens padding + gap.
-    type: string
-    default: ""
-    enum: ["", compact, comfortable, spacious]
   draggable:
     description: Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.
     type: boolean

package/components/chart/chart.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "title": {
-      "description": "Chart title above the canvas",
-      "type": "string",
-      "default": ""
-    },
     "type": {
       "description": "Chart type. Only 'bar' is built-in.",
       "type": "string",
@@ -38,11 +33,12 @@
       "description": "Aspect ratio",
       "type": "string",
       "enum": [
+        "std",
         "wide",
         "square",
         "tall"
       ],
-      "default": "wide"
+      "default": "std"
     },
     "color": {
       "description": "Color scheme",
@@ -59,6 +55,11 @@
     "component": {
       "const": "Chart"
     },
+    "heading": {
+      "description": "Chart heading text rendered above the canvas.",
+      "type": "string",
+      "default": ""
+    },
     "hideAverage": {
       "description": "When true, suppress the overlaid average line",
       "type": "boolean",
@@ -75,9 +76,9 @@
       "default": false
     },
     "radius": {
-      "description": "Bar corner radius",
+      "description": "Bar corner radius (null = let CSS tokens decide)",
       "type": "number",
-      "default": 4
+      "default": null
     },
     "size": {
       "description": "Chart size",

package/components/chart/chart.yaml

@@ -26,8 +26,9 @@ props:
   aspect:
     description: Aspect ratio
     type: string
-    default: wide
+    default: std
     enum:
+      - std
       - wide
       - square
       - tall
@@ -57,9 +58,9 @@ props:
     default: false
     attribute: hide-values
   radius:
-    description: Bar corner radius
+    description: Bar corner radius (null = let CSS tokens decide)
     type: number
-    default: 4
+    default: null
   size:
     description: Chart size
     type: string
@@ -72,10 +73,11 @@ props:
     description: Line smoothing factor
     type: number
     default: 0.4
-  title:
-    description: Chart title above the canvas
+  heading:
+    description: Chart heading text rendered above the canvas.
     type: string
     default: ""
+    reflect: true
   x:
     description: Data key for x-axis (category) values
     type: string

package/components/check/check.css

@@ -24,7 +24,7 @@
     /* ── State: checked ── */
     --check-bg-checked:       var(--a-primary);
     --check-border-checked:   var(--a-primary);
-    --check-fg-checked:       white;
+    --check-fg-checked:       var(--a-chrome-light);
     --check-bg-checked-hover: var(--a-primary-hover);
 
     /* ── State: disabled ── */

package/components/code/code.a2ui.json

@@ -35,11 +35,6 @@
       "description": "Code text content",
       "type": "string",
       "default": ""
-    },
-    "wrap": {
-      "description": "Enable word wrapping",
-      "type": "boolean",
-      "default": false
     }
   },
   "required": [

package/components/code/code.yaml

@@ -25,10 +25,6 @@ props:
     description: Code text content
     type: string
     default: ""
-  wrap:
-    description: Enable word wrapping
-    type: boolean
-    default: false
 events:
   copy:
     description: Fired when text is copied to clipboard

package/components/col/col.a2ui.json

@@ -13,21 +13,11 @@
     }
   ],
   "properties": {
-    "active": {
-      "description": "Marks this column as the active one in a tab-panel layout.",
-      "type": "boolean",
-      "default": false
-    },
     "align": {
       "description": "Align items",
       "type": "string",
       "default": "stretch"
     },
-    "basis": {
-      "description": "Flex basis override (CSS length or keyword like \"auto\"/\"content\").",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Column"
     },
@@ -40,16 +30,6 @@
       "description": "Justify content",
       "type": "string",
       "default": "start"
-    },
-    "span": {
-      "description": "Column span — consumed by a parent Grid to make this column wrap multiple grid tracks. Accepts a numeric rung (\"1\"..\"6\") or \"full\".",
-      "type": "string",
-      "default": ""
-    },
-    "wrap": {
-      "description": "Allow children to wrap onto multiple lines (default is flex nowrap).",
-      "type": "boolean",
-      "default": false
     }
   },
   "required": [