@adia-ai/web-components 0.0.1 → 0.0.3

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.js

@@ -23,8 +23,8 @@
  *   draggable — enables drag handle + cursor:grab; wires the draggable trait
  */
 
-import { AdiaElement } from '@core/element.js';
-import { draggable } from '@traits/draggable.js';
+import { AdiaElement } from '../../core/element.js';
+import { draggable } from '../../traits/draggable.js';
 
 class AdiaCard extends AdiaElement {
   static properties = {

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.js

@@ -19,7 +19,7 @@
  *   .data = [{...}, ...]  — array of data objects
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /* ── Helpers ────────────────────────────────────────────────────── */
 

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/chat/chat-input.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <chat-input-ui> — Composable chat input bar.

package/components/chat/chat.js

@@ -1,5 +1,5 @@
-import { AdiaElement } from '@core/element.js';
-import { renderMarkdown } from '@core/markdown.js';
+import { AdiaElement } from '../../core/element.js';
+import { renderMarkdown } from '../../core/markdown.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

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/check/check.js

@@ -3,8 +3,8 @@
  * Pure CSS checkmark via border trick on [slot="box"]::after. No SVG.
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { html } from '@core/element.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
 
 class AdiaCheck extends AdiaFormElement {
   static properties = {

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.js

@@ -9,7 +9,7 @@
  * updates the rendered code in place.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaCode extends AdiaElement {
   static properties = {

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": [

package/components/col/col.js

@@ -4,7 +4,7 @@
  * <col-ui gap="md" align="center">...</col-ui>
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaCol extends AdiaElement {
   static properties = {

package/components/col/col.yaml

@@ -22,26 +22,6 @@ props:
     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
-    reflect: true
-  basis:
-    description: Flex basis override (CSS length or keyword like "auto"/"content").
-    type: string
-    default: ""
-  active:
-    description: Marks this column as the active one in a tab-panel layout.
-    type: boolean
-    default: false
-    reflect: true
 events: {}
 slots:
   default:

package/components/color-picker/color-picker.a2ui.json

@@ -38,7 +38,7 @@
     "value": {
       "description": "Current color as hex string",
       "type": "string",
-      "default": ""
+      "default": "#3b82f6"
     }
   },
   "required": [

package/components/color-picker/color-picker.js

@@ -16,7 +16,7 @@
  * Form-associated via AdiaFormElement + ElementInternals.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 // ── OKLCH ↔ sRGB conversion ──────────────────────────────
 
@@ -426,7 +426,10 @@ class AdiaColorPicker extends AdiaFormElement {
     };
 
     if (navigator.clipboard?.writeText) {
-      navigator.clipboard.writeText(text).then(() => onDone(true), () => onDone(false));
+      navigator.clipboard.writeText(text).then(
+        () => { if (!this.isConnected) return; onDone(true); },
+        () => { if (!this.isConnected) return; onDone(false); },
+      );
     } else {
       const ta = Object.assign(document.createElement('textarea'), { value: text });
       ta.style.cssText = 'position:fixed;opacity:0';

package/components/color-picker/color-picker.yaml

@@ -27,7 +27,7 @@ props:
   value:
     description: Current color as hex string
     type: string
-    default: ""
+    default: "#3b82f6"
 events:
   change:
     description: Fired on every color change

package/components/command/command.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <command-ui> — Searchable command palette.
@@ -34,6 +34,21 @@ class AdiaCommand extends AdiaElement {
   #listEl = null;
   #footerEl = null;
   #bound = false;
+  #itemByEl = new WeakMap();
+
+  #onListClick = (e) => {
+    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
+    if (!el) return;
+    const item = this.#itemByEl.get(el);
+    if (item) this.#select(item);
+  };
+
+  #onListPointerOver = (e) => {
+    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
+    if (!el) return;
+    const idx = parseInt(el.dataset.idx);
+    if (Number.isFinite(idx) && idx !== this.#activeIdx) this.#activate(idx);
+  };
 
   connected() {
     if (!this.#bound) {
@@ -66,6 +81,9 @@ class AdiaCommand extends AdiaElement {
       this.#footerEl = this.querySelector('footer');
 
       this.#inputEl.addEventListener('input', this.#onInput);
+      // Delegated item handlers — handler identity is stable so teardown is symmetric.
+      this.#listEl.addEventListener('click', this.#onListClick);
+      this.#listEl.addEventListener('pointerover', this.#onListPointerOver);
       this.#renderItems();
     }
 
@@ -173,16 +191,7 @@ class AdiaCommand extends AdiaElement {
       ${item.shortcut ? `<span data-shortcut>${item.shortcut}</span>` : ''}
     `;
 
-    el.addEventListener('click', () => {
-      if (item.disabled) return;
-      this.#select(item);
-    });
-
-    el.addEventListener('pointerenter', () => {
-      if (item.disabled) return;
-      this.#activate(idx);
-    });
-
+    this.#itemByEl.set(el, item);
     return el;
   }
 
@@ -273,6 +282,8 @@ class AdiaCommand extends AdiaElement {
   disconnected() {
     this.removeEventListener('keydown', this.#onKeydown);
     this.#inputEl?.removeEventListener('input', this.#onInput);
+    this.#listEl?.removeEventListener('click', this.#onListClick);
+    this.#listEl?.removeEventListener('pointerover', this.#onListPointerOver);
     this.#inputEl = null;
     this.#listEl = null;
     this.#footerEl = null;

package/components/description-list/description-list.js

@@ -19,7 +19,7 @@
  *   items     — optional JSON array of {term, description} pairs
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaDescriptionList extends AdiaElement {
   static properties = {

package/components/divider/divider.a2ui.json

@@ -13,15 +13,6 @@
     }
   ],
   "properties": {
-    "axis": {
-      "description": "Divider orientation.",
-      "type": "string",
-      "enum": [
-        "horizontal",
-        "vertical"
-      ],
-      "default": "horizontal"
-    },
     "component": {
       "const": "Divider"
     },
@@ -30,16 +21,6 @@
       "type": "string",
       "default": ""
     },
-    "orientation": {
-      "description": "Alias for `axis` — accepted for back-compat.",
-      "type": "string",
-      "enum": [
-        "",
-        "horizontal",
-        "vertical"
-      ],
-      "default": ""
-    },
     "vertical": {
       "description": "Vertical orientation",
       "type": "boolean",

package/components/divider/divider.js

@@ -7,7 +7,7 @@
  * Renders as a simple line, or a line broken by centered text.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaDivider extends AdiaElement {
   static properties = {

package/components/divider/divider.yaml

@@ -8,18 +8,6 @@ category: display
 version: 1
 description: Horizontal or vertical divider with optional label.
 props:
-  axis:
-    description: Divider orientation.
-    type: string
-    default: horizontal
-    enum:
-      - horizontal
-      - vertical
-  orientation:
-    description: Alias for `axis` — accepted for back-compat.
-    type: string
-    default: ""
-    enum: ["", horizontal, vertical]
   label:
     description: Center label text
     type: string

package/components/drawer/drawer.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Drawer.json",
   "title": "Drawer",
-  "description": "Slide-out panel anchored to a viewport edge. Uses native <dialog> for focus trap, Escape dismiss, and ::backdrop. Panel is a flex column that scrolls as a whole — the header and footer stick to the top/bottom of the panel when the body overflows. Authors can compose content with either card-n-style bare tags (<header>, <section>, <footer>) or explicit [slot=\"header|body|footer\"] attributes; multiple <section> siblings are allowed and stack in author order between the sticky header and footer. The header activates a card-n-aligned 3-column grid (icon | heading+description | action+close) when any direct [slot=\"icon|heading|description|action\"] child is present.",
+  "description": "Slide-out panel anchored to a viewport edge. Uses native <dialog> for focus trap, Escape dismiss, and ::backdrop. Panel is a flex column that scrolls as a whole — the header and footer stick to the top/bottom of the panel when the body overflows. Authors can compose content with either card-ui-style bare tags (<header>, <section>, <footer>) or explicit [slot=\"header|body|footer\"] attributes; multiple <section> siblings are allowed and stack in author order between the sticky header and footer. The header activates a card-ui-aligned 3-column grid (icon | heading+description | action+close) when any direct [slot=\"icon|heading|description|action\"] child is present.",
   "type": "object",
   "allOf": [
     {
@@ -112,7 +112,7 @@
         "description": "Optional sticky action row pinned to the bottom of the panel. Only mounted if the author supplies a bare <footer> tag or [slot=\"footer\"]. Inner [slot=\"description\"] + [slot=\"action\"] triggers space-between layout, matching card-ui footer semantics."
       },
       "header": {
-        "description": "Title bar — pinned to the top of the panel via position:sticky. Accepts either a bare <header> tag or [slot=\"header\"]. When any direct child has [slot=\"icon|heading|description|action\"], the header activates a card-n-aligned 3-column grid; otherwise renders as a block with the close button appended."
+        "description": "Title bar — pinned to the top of the panel via position:sticky. Accepts either a bare <header> tag or [slot=\"header\"]. When any direct child has [slot=\"icon|heading|description|action\"], the header activates a card-ui-aligned 3-column grid; otherwise renders as a block with the close button appended."
       },
       "heading": {
         "description": "Direct child of <header> — grid row 1. Also accepts bare <h1>-<h6> tags. Renders as a flex container, so inline badges/metadata sit alongside the title. If the drawer has a [text] attribute and no author-supplied heading, a <span slot=\"heading\" data-stamped> is stamped with the text value."

package/components/drawer/drawer.css

@@ -167,7 +167,7 @@
     transform: translateY(-100%); opacity: 0;
   }
 
-  /* ═══════ Header — card-n-aligned grid ═══════
+  /* ═══════ Header — card-ui-aligned grid ═══════
      Block by default (fallback for empty/free-form content).
      Grid activates when any slotted child is present. Column template
      adapts to the presence of [slot="icon"] and [slot="action"|"close"]. */

package/components/drawer/drawer.js

@@ -5,7 +5,7 @@
  * Content panel slides in/out with CSS transitions.
  * Exit animation plays before dialog.close() via [data-closing].
  *
- * Authoring — card-n-style tags (recommended):
+ * Authoring — card-ui-style tags (recommended):
  *   <drawer-ui side="right" size="md">
  *     <header>Title block</header>
  *     <section>Body content</section>
@@ -29,7 +29,7 @@
  *   close — fired after the drawer finishes closing
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaDrawer extends AdiaElement {
   #bound = false;

package/components/drawer/drawer.yaml

@@ -10,10 +10,10 @@ description: >-
   Slide-out panel anchored to a viewport edge. Uses native <dialog> for focus trap,
   Escape dismiss, and ::backdrop. Panel is a flex column that scrolls as a whole — the
   header and footer stick to the top/bottom of the panel when the body overflows.
-  Authors can compose content with either card-n-style bare tags (<header>, <section>,
+  Authors can compose content with either card-ui-style bare tags (<header>, <section>,
   <footer>) or explicit [slot="header|body|footer"] attributes; multiple <section>
   siblings are allowed and stack in author order between the sticky header and footer.
-  The header activates a card-n-aligned 3-column grid (icon | heading+description |
+  The header activates a card-ui-aligned 3-column grid (icon | heading+description |
   action+close) when any direct [slot="icon|heading|description|action"] child is
   present.
 props:
@@ -59,7 +59,7 @@ slots:
     description: >-
       Title bar — pinned to the top of the panel via position:sticky. Accepts either
       a bare <header> tag or [slot="header"]. When any direct child has
-      [slot="icon|heading|description|action"], the header activates a card-n-aligned
+      [slot="icon|heading|description|action"], the header activates a card-ui-aligned
       3-column grid; otherwise renders as a block with the close button appended.
   body:
     description: >-

package/components/embed/embed.js

@@ -10,7 +10,7 @@
  *   aspect — optional CSS aspect-ratio (e.g. '16/9')
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaEmbed extends AdiaElement {
   static properties = {

package/components/empty-state/empty-state.a2ui.json

@@ -30,19 +30,6 @@
       "description": "Icon name displayed above the heading",
       "type": "string",
       "default": ""
-    },
-    "variant": {
-      "description": "Semantic variant — colors the icon and sets the border tone (default, info, success, warning, danger).",
-      "type": "string",
-      "enum": [
-        "default",
-        "info",
-        "success",
-        "warning",
-        "danger",
-        "muted"
-      ],
-      "default": "default"
     }
   },
   "required": [

package/components/empty-state/empty-state.js

@@ -9,7 +9,7 @@
  * Note: Uses 'heading' attribute instead of 'title' to avoid native tooltip.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaEmptyState extends AdiaElement {
   static properties = {

package/components/empty-state/empty-state.yaml

@@ -20,11 +20,6 @@ props:
     description: Icon name displayed above the heading
     type: string
     default: ""
-  variant:
-    description: Semantic variant — colors the icon and sets the border tone (default, info, success, warning, danger).
-    type: string
-    default: default
-    enum: [default, info, success, warning, danger, muted]
 events: {}
 slots:
   action:

package/components/footer/footer.a2ui.json

@@ -71,7 +71,7 @@
       }
     ],
     "synonyms": {},
-    "tag": "footer-n",
+    "tag": "footer-ui",
     "tokens": {},
     "traits": [],
     "version": 1

package/components/footer/footer.yaml

@@ -2,7 +2,7 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: AdiaFooter
-tag: footer-n
+tag: footer-ui
 component: Footer
 category: container
 version: 1