@adia-ai/web-components 0.0.1 → 0.0.2

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

@@ -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

@@ -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/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.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>

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

package/components/grid/grid.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "cols": {
-      "description": "Alias for `columns` — accepted for back-compat.",
-      "type": "string",
-      "default": ""
-    },
     "columnGap": {
       "description": "Column gap override",
       "type": "string",

package/components/grid/grid.yaml

@@ -23,10 +23,6 @@ props:
     description: Number of columns or grid-template-columns
     type: string
     default: "3"
-  cols:
-    description: Alias for `columns` — accepted for back-compat.
-    type: string
-    default: ""
   gap:
     description: Grid gap
     type: string

package/components/header/header.a2ui.json

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

package/components/header/header.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: AdiaHeader
-tag: header-n
+tag: header-ui
 component: Header
 category: container
 version: 1

package/components/heatmap/heatmap.a2ui.json

@@ -51,10 +51,10 @@
     "component": {
       "const": "Heatmap"
     },
-    "legend": {
-      "description": "Show Less/More legend strip",
+    "noLegend": {
+      "description": "Hide the Less/More legend strip",
       "type": "boolean",
-      "default": true
+      "default": false
     },
     "rows": {
       "description": "Row count",
@@ -95,7 +95,7 @@
     "examples": [
       {
         "description": "Basic 7x12 matrix heatmap with random data.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"hm\"\n    ]\n  },\n  {\n    \"id\": \"hm\",\n    \"component\": \"Heatmap\",\n    \"type\": \"matrix\",\n    \"rows\": 7,\n    \"cols\": 12,\n    \"legend\": true,\n    \"colorScheme\": \"data-ramp\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"hm\"\n    ]\n  },\n  {\n    \"id\": \"hm\",\n    \"component\": \"Heatmap\",\n    \"type\": \"matrix\",\n    \"rows\": 7,\n    \"cols\": 12,\n    \"colorScheme\": \"data-ramp\"\n  }\n]",
         "name": "basic-heatmap"
       }
     ],

package/components/heatmap/heatmap.js

@@ -7,7 +7,7 @@
  *   cols         — Number                              (default 12)
  *   scale        — 'linear' | 'log' | 'quantile'       (default 'linear')
  *   data         — JSON string OR .data property [{ r, c, v, label? }]
- *   legend       — Boolean                              (default true)
+ *   no-legend    — Boolean                              (default false — legend shown)
  *   color-scheme — 'accent' | 'success' | 'warning' | 'data-ramp'  (default 'data-ramp')
  *   start-date   — ISO date (for day-grid to label months)
  *   aspect       — 'square' | 'wide'                   (default 'wide')
@@ -30,7 +30,7 @@ class AdiaHeatmap extends AdiaElement {
     rows:        { type: Number,  default: 7,           reflect: true },
     cols:        { type: Number,  default: 12,          reflect: true },
     scale:       { type: String,  default: 'linear',    reflect: true },
-    legend:      { type: Boolean, default: true,        reflect: true },
+    noLegend:    { type: Boolean, default: false,       reflect: true, attribute: 'no-legend' },
     colorScheme: { type: String,  default: 'data-ramp', reflect: true, attribute: 'color-scheme' },
     startDate:   { type: String,  default: '',          reflect: true, attribute: 'start-date' },
     aspect:      { type: String,  default: 'wide',      reflect: true },
@@ -192,7 +192,7 @@ class AdiaHeatmap extends AdiaElement {
     this.appendChild(grid);
 
     // ── Legend ──
-    if (this.legend) {
+    if (!this.noLegend) {
       const legend = document.createElement('div');
       legend.setAttribute('data-legend', '');
       const less = document.createElement('span');

package/components/heatmap/heatmap.yaml

@@ -38,10 +38,11 @@ props:
     description: Column count
     type: number
     default: 12
-  legend:
-    description: Show Less/More legend strip
+  noLegend:
+    description: Hide the Less/More legend strip
     type: boolean
-    default: true
+    default: false
+    attribute: no-legend
   rows:
     description: Row count
     type: number
@@ -100,7 +101,6 @@ examples:
           "type": "matrix",
           "rows": 7,
           "cols": 12,
-          "legend": true,
           "colorScheme": "data-ramp"
         }
       ]

package/components/icon/icon.a2ui.json

@@ -30,6 +30,19 @@
       "description": "Icon size. Accepts the named scale (xs/sm/md/lg/xl) or a pixel value as a string (\"12\", \"16\", \"24\", \"32\", \"48\"). Overrides --a-icon-size.",
       "type": "string",
       "default": ""
+    },
+    "weight": {
+      "description": "Icon weight — selects the Phosphor weight variant (thin/light/regular/bold/fill/duotone).",
+      "type": "string",
+      "enum": [
+        "thin",
+        "light",
+        "regular",
+        "bold",
+        "fill",
+        "duotone"
+      ],
+      "default": "regular"
     }
   },
   "required": [

package/components/icon/icon.yaml

@@ -22,6 +22,12 @@ props:
       as a string ("12", "16", "24", "32", "48"). Overrides --a-icon-size.
     type: string
     default: ""
+  weight:
+    description: Icon weight — selects the Phosphor weight variant (thin/light/regular/bold/fill/duotone).
+    type: string
+    default: regular
+    reflect: true
+    enum: [thin, light, regular, bold, fill, duotone]
 events: {}
 slots: {}
 states:

package/components/image/image.a2ui.json

@@ -18,22 +18,6 @@
       "type": "string",
       "default": ""
     },
-    "aspect": {
-      "description": "Aspect ratio preset — sets the intrinsic aspect-ratio CSS property.",
-      "type": "string",
-      "enum": [
-        "",
-        "1/1",
-        "3/2",
-        "4/3",
-        "16/9",
-        "21/9",
-        "2/3",
-        "3/4",
-        "9/16"
-      ],
-      "default": ""
-    },
     "component": {
       "const": "Image"
     },
@@ -58,11 +42,6 @@
       "type": "string",
       "default": ""
     },
-    "lazy": {
-      "description": "Enables native lazy loading.",
-      "type": "boolean",
-      "default": false
-    },
     "radius": {
       "description": "Border radius token",
       "type": "string",
@@ -74,6 +53,16 @@
       ],
       "default": ""
     },
+    "raw": {
+      "description": "Strip chrome (no background, no radius) for edge-to-edge rendering.",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Size preset — e.g. 'full' fills the container width and height.",
+      "type": "string",
+      "default": ""
+    },
     "src": {
       "description": "Image source URL.",
       "type": "string",

package/components/image/image.yaml

@@ -12,20 +12,6 @@ props:
     description: Alt text for the image.
     type: string
     default: ""
-  aspect:
-    description: Aspect ratio preset — sets the intrinsic aspect-ratio CSS property.
-    type: string
-    default: ""
-    enum:
-      - ""
-      - 1/1
-      - 3/2
-      - 4/3
-      - 16/9
-      - 21/9
-      - 2/3
-      - 3/4
-      - 9/16
   fallback:
     description: Fallback image URL on error
     type: string
@@ -43,10 +29,16 @@ props:
     description: CSS height
     type: string
     default: ""
-  lazy:
-    description: Enables native lazy loading.
+  raw:
+    description: Strip chrome (no background, no radius) for edge-to-edge rendering.
     type: boolean
     default: false
+    reflect: true
+  size:
+    description: Size preset — e.g. 'full' fills the container width and height.
+    type: string
+    default: ""
+    reflect: true
   radius:
     description: Border radius token
     type: string

package/components/input/input.a2ui.json

@@ -51,11 +51,6 @@
       "type": "string",
       "default": ""
     },
-    "icon": {
-      "description": "Leading Phosphor icon name (shortcut for setting `prefix` to an icon tag).",
-      "type": "string",
-      "default": ""
-    },
     "label": {
       "description": "Label text rendered above the input field",
       "type": "string",
@@ -71,11 +66,6 @@
       "type": "number",
       "default": null
     },
-    "multiline": {
-      "description": "Render a multiline textarea-like surface. Prefer TextArea; kept for back-compat.",
-      "type": "boolean",
-      "default": false
-    },
     "name": {
       "description": "Form control name for form data submission",
       "type": "string",
@@ -106,11 +96,6 @@
       "type": "boolean",
       "default": false
     },
-    "rows": {
-      "description": "Visible row count when multiline is true. Ignored otherwise.",
-      "type": "number",
-      "default": 3
-    },
     "suffix": {
       "description": "Suffix text rendered after the text surface (e.g., unit like 'kg')",
       "type": "string",

package/components/input/input.yaml

@@ -13,18 +13,6 @@ props:
     description: Form control name for form data submission
     type: string
     default: ""
-  icon:
-    description: Leading Phosphor icon name (shortcut for setting `prefix` to an icon tag).
-    type: string
-    default: ""
-  multiline:
-    description: Render a multiline textarea-like surface. Prefer TextArea; kept for back-compat.
-    type: boolean
-    default: false
-  rows:
-    description: Visible row count when multiline is true. Ignored otherwise.
-    type: number
-    default: 3
   type:
     description: Input type hint. Password type applies disc masking via -webkit-text-security.
     type: string

package/components/inspector/inspector.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "active": {
-      "description": "Active tab (alias for `value`, accepts same enum).",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Inspector"
     },

package/components/inspector/inspector.yaml

@@ -12,10 +12,6 @@ props:
     description: Active tab. One of 'catalog', 'surface', 'messages', 'code'.
     type: string
     default: surface
-  active:
-    description: Active tab (alias for `value`, accepts same enum).
-    type: string
-    default: ""
 events: {}
 slots:
   default: