@adia-ai/web-components 0.0.1 → 0.0.3

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

@@ -5,7 +5,7 @@
  * <grid-ui columns="2" column-gap="2" row-gap="4">...</grid-ui>
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaGrid extends AdiaElement {
   static properties = {

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')
@@ -20,7 +20,7 @@
  *   title — optional header title
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 
@@ -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.js

@@ -1,5 +1,5 @@
-import { AdiaElement, signal, html } from '@core/element.js';
-import { getIcon } from '@core/icons.js';
+import { AdiaElement, signal, html } from '../../core/element.js';
+import { getIcon } from '../../core/icons.js';
 
 class AdiaIcon extends AdiaElement {
   static properties = {

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

@@ -14,7 +14,7 @@
  * Raw:    strips chrome (no background, no radius) for edge-to-edge rendering
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaImage extends AdiaElement {
   static properties = {

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

@@ -7,8 +7,8 @@
  *   <input-ui placeholder="Search" prefix="search"></input-ui>
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { isIconName } from '@core/icons.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { isIconName } from '../../core/icons.js';
 
 const renderAffix = (v) => isIconName(v)
   ? `<icon-ui name="${v}"></icon-ui>`

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

@@ -1,5 +1,5 @@
-import { AdiaElement } from '@core/element.js';
-import { registry } from '../../a2ui/registry.js';
+import { AdiaElement } from '../../core/element.js';
+import { registry } from '@adia-ai/a2ui-utils';
 import '../tabs/tabs.js';
 import '../tabs/tab.js';
 import '../code/code.js';

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:

package/components/kbd/kbd.js

@@ -6,7 +6,7 @@
  * Em-relative sizing so it scales with surrounding text.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaKbd extends AdiaElement {
   static properties = {

package/components/list/list.a2ui.json

@@ -13,47 +13,14 @@
     }
   ],
   "properties": {
-    "align": {
-      "description": "Alignment — values depend on container semantics.",
-      "type": "string",
-      "enum": [
-        "start",
-        "center",
-        "end",
-        "stretch"
-      ],
-      "default": "stretch"
-    },
     "component": {
       "const": "List"
     },
-    "direction": {
-      "description": "Component property: direction.",
-      "type": "string",
-      "enum": [
-        "vertical",
-        "horizontal"
-      ],
-      "default": "vertical"
-    },
     "divider": {
       "description": "Show dividers between items",
       "type": "boolean",
       "default": false
     },
-    "gap": {
-      "description": "Gap between children.",
-      "type": "string",
-      "enum": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ],
-      "default": "sm"
-    },
     "selectable": {
       "description": "Enable selection on child listitems (roving tabindex + aria-selected).",
       "type": "boolean",

package/components/list/list.js

@@ -19,7 +19,7 @@
  *   - Fires `selection-change` with { key, previousKey }.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaList extends AdiaElement {
   static properties = {

package/components/list/list.yaml

@@ -8,37 +8,10 @@ category: layout
 version: 1
 description: Styled list with optional icons and dividers.
 props:
-  align:
-    description: "Alignment — values depend on container semantics."
-    type: string
-    default: stretch
-    enum:
-      - start
-      - center
-      - end
-      - stretch
-  direction:
-    description: "Component property: direction."
-    type: string
-    default: vertical
-    enum:
-      - vertical
-      - horizontal
   divider:
     description: Show dividers between items
     type: boolean
     default: false
-  gap:
-    description: "Gap between children."
-    type: string
-    default: sm
-    enum:
-      - none
-      - xs
-      - sm
-      - md
-      - lg
-      - xl
   selectable:
     description: Enable selection on child listitems (roving tabindex + aria-selected).
     type: boolean

package/components/menu/menu.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "anchor": {
-      "description": "ID of the anchor element the menu positions relative to",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Menu"
     },
@@ -41,11 +36,6 @@
         "top-end"
       ],
       "default": "bottom-start"
-    },
-    "trigger": {
-      "description": "ID of the element that opens this menu (click handler + aria-controls).",
-      "type": "string",
-      "default": ""
     }
   },
   "required": [

package/components/menu/menu.js

@@ -15,8 +15,8 @@
  *   • Roving focus + arrow/Home/End/Enter/Escape keyboard nav.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 class AdiaMenu extends AdiaElement {
   static properties = {
@@ -30,6 +30,7 @@ class AdiaMenu extends AdiaElement {
   #anchorCleanup = null;
   #popover = null;
   #bound = false;
+  #rafId = null;
 
   connected() {
     if (!this.#bound) {
@@ -88,7 +89,8 @@ class AdiaMenu extends AdiaElement {
       requestAnimationFrame(() => this.#focusItem(0));
     }
 
-    requestAnimationFrame(() => {
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
       document.addEventListener('pointerdown', this.#onOutside);
       document.addEventListener('keydown', this.#onDocKey, true);
     });
@@ -106,6 +108,10 @@ class AdiaMenu extends AdiaElement {
       for (const item of items) this.insertBefore(item, pop);
     }
 
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
     document.removeEventListener('pointerdown', this.#onOutside);
     document.removeEventListener('keydown', this.#onDocKey, true);
   }

package/components/menu/menu.yaml

@@ -8,14 +8,6 @@ category: container
 version: 1
 description: Dropdown action menu with roving focus and keyboard navigation. Uses Popover API.
 props:
-  anchor:
-    description: ID of the anchor element the menu positions relative to
-    type: string
-    default: ""
-  trigger:
-    description: ID of the element that opens this menu (click handler + aria-controls).
-    type: string
-    default: ""
   gap:
     description: Gap in px
     type: number

package/components/modal/modal.a2ui.json

@@ -13,25 +13,11 @@
     }
   ],
   "properties": {
-    "anchor": {
-      "description": "ID of the element to anchor to (popover mode only). Positions the surface below the anchor element.",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Modal"
     },
-    "mode": {
-      "description": "Surface type. Dialog uses showModal() with backdrop and focus trap. Popover uses the Popover API with light dismiss and optional anchor positioning.",
-      "type": "string",
-      "enum": [
-        "dialog",
-        "popover"
-      ],
-      "default": "dialog"
-    },
     "open": {
-      "description": "Alias for show (backwards compatibility). Either property controls visibility.",
+      "description": "Controls overlay visibility. Setting to true opens the surface with entry animation.",
       "type": "boolean",
       "default": false
     },
@@ -40,11 +26,6 @@
       "type": "boolean",
       "default": false
     },
-    "show": {
-      "description": "Controls overlay visibility. Setting to true opens the surface with entry animation.",
-      "type": "boolean",
-      "default": false
-    },
     "size": {
       "description": "Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw.",
       "type": "string",
@@ -60,11 +41,6 @@
       "description": "Aria label applied to the surface element for accessibility",
       "type": "string",
       "default": ""
-    },
-    "trigger": {
-      "description": "ID of the element that opens this modal (sets aria-controls + click handler).",
-      "type": "string",
-      "default": ""
     }
   },
   "required": [

package/components/modal/modal.js

@@ -29,7 +29,7 @@
  *   close — fired after the modal finishes closing
  */
 
-import { AdiaElement, html } from '@core/element.js';
+import { AdiaElement, html } from '../../core/element.js';
 
 class AdiaModal extends AdiaElement {
   #bound = false;