@adia-ai/web-components 0.0.1 → 0.0.2

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

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

@@ -8,25 +8,8 @@ category: container
 version: 1
 description: Centered dialog overlay using native <dialog>. Focus trapping, Escape key, backdrop.
 props:
-  anchor:
-    description: ID of the element to anchor to (popover mode only). Positions the surface below the
-      anchor element.
-    type: string
-    default: ""
-  trigger:
-    description: ID of the element that opens this modal (sets aria-controls + click handler).
-    type: string
-    default: ""
-  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
-    default: dialog
-    enum:
-      - dialog
-      - popover
   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
     reflect: true
@@ -34,10 +17,6 @@ props:
     description: When true, suppress backdrop click and Escape key dismissal of the overlay
     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

package/components/noodles/noodles.a2ui.json

@@ -36,11 +36,6 @@
       ],
       "default": "bezier"
     },
-    "disabled": {
-      "description": "Disable the controller. Noodles render as dashed muted lines",
-      "type": "boolean",
-      "default": false
-    },
     "editable": {
       "description": "Allow interactive creation/deletion of connections via drag",
       "type": "boolean",

package/components/noodles/noodles.yaml

@@ -25,11 +25,6 @@ props:
       - bezier
       - step
       - straight
-  disabled:
-    description: Disable the controller. Noodles render as dashed muted lines
-    type: boolean
-    default: false
-    reflect: true
   editable:
     description: Allow interactive creation/deletion of connections via drag
     type: boolean

package/components/otp-input/otp-input.a2ui.json

@@ -31,11 +31,6 @@
       "type": "string",
       "default": ""
     },
-    "separator": {
-      "description": "Position to insert a dash separator (0 = no separator)",
-      "type": "number",
-      "default": 0
-    },
     "value": {
       "description": "Current OTP value",
       "type": "string",

package/components/otp-input/otp-input.yaml

@@ -21,10 +21,6 @@ props:
     description: Number of digit boxes
     type: number
     default: 6
-  separator:
-    description: Position to insert a dash separator (0 = no separator)
-    type: number
-    default: 0
   value:
     description: Current OTP value
     type: string

package/components/pagination/pagination.a2ui.json

@@ -16,21 +16,11 @@
     "component": {
       "const": "Pagination"
     },
-    "current": {
-      "description": "Alias for `page` — accepted for back-compat.",
-      "type": "number",
-      "default": 1
-    },
     "page": {
       "description": "Current active page number.",
       "type": "number",
       "default": 1
     },
-    "pageSize": {
-      "description": "Items per page — drives the visible window and total-page math when combined with a total item count.",
-      "type": "number",
-      "default": 10
-    },
     "siblings": {
       "description": "Number of page buttons to show on each side of the current page.",
       "type": "number",
@@ -44,7 +34,7 @@
     "variant": {
       "description": "Visual variant",
       "type": "string",
-      "default": ""
+      "default": "default"
     }
   },
   "required": [
@@ -62,12 +52,12 @@
     "examples": [
       {
         "description": "Card with header containing title and search input, table component, and pagination footer.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title-row\"\n    ]\n  },\n  {\n    \"id\": \"title-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"title\",\n      \"search\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Data Table\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Search...\",\n    \"type\": \"search\",\n    \"name\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"tbl\"\n    ]\n  },\n  {\n    \"id\": \"tbl\",\n    \"component\": \"Table\",\n    \"sortable\": true\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"totalPages\": 10,\n    \"currentPage\": 1\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title-row\"\n    ]\n  },\n  {\n    \"id\": \"title-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"title\",\n      \"search\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Data Table\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Search...\",\n    \"type\": \"search\",\n    \"name\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"tbl\"\n    ]\n  },\n  {\n    \"id\": \"tbl\",\n    \"component\": \"Table\",\n    \"sortable\": true\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"total\": 10,\n    \"page\": 1\n  }\n]",
         "name": "data-table-view"
       },
       {
         "description": "Row with centered pagination component for navigating paged content.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"justify\": \"center\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"totalPages\": 10,\n    \"currentPage\": 1\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"justify\": \"center\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"total\": 10,\n    \"page\": 1\n  }\n]",
         "name": "pagination-nav"
       }
     ],

package/components/pagination/pagination.css

@@ -16,7 +16,7 @@
     /* ── Colors ── */
     --pagination-fg:           var(--a-fg-subtle);
     --pagination-fg-hover:     var(--a-fg);
-    --pagination-fg-active:    white;
+    --pagination-fg-active:    var(--a-chrome-light);
     --pagination-fg-muted:     var(--a-fg-muted);
     --pagination-bg-hover:     var(--a-bg-muted);
     --pagination-bg-active:    var(--a-accent);

package/components/pagination/pagination.yaml

@@ -12,19 +12,10 @@ props:
     description: Current active page number.
     type: number
     default: 1
-  current:
-    description: Alias for `page` — accepted for back-compat.
-    type: number
-    default: 1
   siblings:
     description: Number of page buttons to show on each side of the current page.
     type: number
     default: 1
-  pageSize:
-    description: Items per page — drives the visible window and total-page math when combined with a total item count.
-    type: number
-    default: 10
-    attribute: page-size
   total:
     description: Total number of pages.
     type: number
@@ -32,7 +23,7 @@ props:
   variant:
     description: Visual variant
     type: string
-    default: ""
+    default: default
 events:
   page-change:
     description: Fired when a page button is clicked. detail contains { page }.
@@ -112,8 +103,8 @@ examples:
         {
           "id": "pager",
           "component": "Pagination",
-          "totalPages": 10,
-          "currentPage": 1
+          "total": 10,
+          "page": 1
         }
       ]
   - name: pagination-nav
@@ -131,8 +122,8 @@ examples:
         {
           "id": "pager",
           "component": "Pagination",
-          "totalPages": 10,
-          "currentPage": 1
+          "total": 10,
+          "page": 1
         }
       ]
 keywords:

package/components/pane/pane.a2ui.json

@@ -31,20 +31,10 @@
       "type": "number",
       "default": 200
     },
-    "open": {
-      "description": "Controls whether the panel content is visible",
-      "type": "boolean",
-      "default": false
-    },
     "resizable": {
       "description": "Component property: resizable.",
       "type": "boolean",
       "default": false
-    },
-    "text": {
-      "description": "Text displayed in the header",
-      "type": "string",
-      "default": ""
     }
   },
   "required": [

package/components/pane/pane.yaml

@@ -22,19 +22,10 @@ props:
     type: number
     default: 200
     attribute: min-width
-  open:
-    description: Controls whether the panel content is visible
-    type: boolean
-    default: false
-    reflect: true
   resizable:
     description: "Component property: resizable."
     type: boolean
     default: false
-  text:
-    description: Text displayed in the header
-    type: string
-    default: ""
 events: {}
 slots:
   header:

package/components/popover/popover.a2ui.json

@@ -13,20 +13,6 @@
     }
   ],
   "properties": {
-    "type": {
-      "description": "'auto' dismisses on outside click, 'manual' requires explicit close",
-      "type": "string",
-      "enum": [
-        "auto",
-        "manual"
-      ],
-      "default": "auto"
-    },
-    "anchor": {
-      "description": "ID of the anchor element to position relative to",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Popover"
     },

package/components/popover/popover.js

@@ -32,6 +32,7 @@ class AdiaPopover extends AdiaElement {
   #bound = false;
   #hoverTimer = null;
   #content = null;
+  #rafId = null;
 
   connected() {
     const content = this.querySelector('[slot="content"]');
@@ -88,7 +89,8 @@ class AdiaPopover extends AdiaElement {
 
     if (this.trigger === 'click' || this.trigger === 'manual') {
       // Defer to next frame so the opening click doesn't trigger outside-dismiss.
-      requestAnimationFrame(() => {
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
         document.addEventListener('pointerdown', this.#onOutside);
         document.addEventListener('keydown', this.#onKey);
       });
@@ -102,6 +104,10 @@ class AdiaPopover extends AdiaElement {
     const content = this.#content ?? this.querySelector('[slot="content"]');
     if (content?.matches(':popover-open')) content.hidePopover?.();
 
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
     document.removeEventListener('pointerdown', this.#onOutside);
     document.removeEventListener('keydown', this.#onKey);
   }

package/components/popover/popover.yaml

@@ -8,17 +8,6 @@ category: container
 version: 1
 description: "Popover using Popover API + CSS Anchor Positioning. Triggers: click, hover, manual."
 props:
-  type:
-    description: "'auto' dismisses on outside click, 'manual' requires explicit close"
-    type: string
-    default: auto
-    enum:
-      - auto
-      - manual
-  anchor:
-    description: ID of the anchor element to position relative to
-    type: string
-    default: ""
   gap:
     description: Pixel offset between the anchor and the popover
     type: number

package/components/progress/progress.a2ui.json

@@ -16,20 +16,10 @@
     "component": {
       "const": "Progress"
     },
-    "indeterminate": {
-      "description": "Force indeterminate mode (animated loop) regardless of value.",
-      "type": "boolean",
-      "default": false
-    },
-    "max": {
-      "description": "Upper bound for value. When omitted, value is treated as a 0..1 fraction.",
-      "type": "number",
-      "default": 100
-    },
     "value": {
-      "description": "Current progress. 0..max (or 0..1 when max omitted). Negative = indeterminate.",
+      "description": "Current progress. 0..max (or 0..1 when max omitted). null = indeterminate (legacy -1 accepted for back-compat).",
       "type": "number",
-      "default": -1
+      "default": null
     },
     "variant": {
       "description": "Display variant. Structural values (bar, spinner) set the render mode; semantic values (primary/success/warning/danger/info) set the fill color. Prefer the `color` global attribute for color; variant-as-color accepted for back-compat with older exemplars.",

package/components/progress/progress.yaml

@@ -9,18 +9,9 @@ version: 1
 description: Progress indicator. Bar (default) or spinner. Value < 0 = indeterminate.
 props:
   value:
-    description: Current progress. 0..max (or 0..1 when max omitted). Negative = indeterminate.
+    description: Current progress. 0..max (or 0..1 when max omitted). null = indeterminate (legacy -1 accepted for back-compat).
     type: number
-    default: -1
-  max:
-    description: Upper bound for value. When omitted, value is treated as a 0..1 fraction.
-    type: number
-    default: 100
-  indeterminate:
-    description: Force indeterminate mode (animated loop) regardless of value.
-    type: boolean
-    default: false
-    reflect: true
+    default: null
   variant:
     description: >-
       Display variant. Structural values (bar, spinner) set the render mode;

package/components/progress-row/progress-row.a2ui.json

@@ -16,30 +16,20 @@
     "component": {
       "const": "ProgressRow"
     },
-    "icon": {
-      "description": "Optional Phosphor icon name rendered leading the label.",
-      "type": "string",
-      "default": ""
-    },
     "label": {
       "description": "Left-hand label text",
       "type": "string",
       "default": ""
     },
-    "max": {
-      "description": "Upper bound for value. Defaults to 100.",
-      "type": "number",
-      "default": 100
-    },
     "meta": {
       "description": "Right-hand meta text (e.g. '32 GB', '4.2k / 10k')",
       "type": "string",
       "default": ""
     },
     "value": {
-      "description": "Progress value 0-100 (-1 = indeterminate)",
+      "description": "Progress value 0-100 (null = indeterminate; legacy -1 accepted for back-compat)",
       "type": "number",
-      "default": -1
+      "default": null
     },
     "variant": {
       "description": "Color variant for the progress fill",
@@ -51,7 +41,7 @@
         "info",
         "primary"
       ],
-      "default": ""
+      "default": "default"
     }
   },
   "required": [

package/components/progress-row/progress-row.yaml

@@ -18,21 +18,13 @@ props:
     type: string
     default: ""
   value:
-    description: Progress value 0-100 (-1 = indeterminate)
+    description: Progress value 0-100 (null = indeterminate; legacy -1 accepted for back-compat)
     type: number
-    default: -1
-  max:
-    description: Upper bound for value. Defaults to 100.
-    type: number
-    default: 100
-  icon:
-    description: Optional Phosphor icon name rendered leading the label.
-    type: string
-    default: ""
+    default: null
   variant:
     description: Color variant for the progress fill
     type: string
-    default: ""
+    default: default
     enum:
       - success
       - warning

package/components/radio/radio.css

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

package/components/row/row.a2ui.json

@@ -36,11 +36,6 @@
       "type": "string",
       "default": "start"
     },
-    "variant": {
-      "description": "Visual variant — default, bordered, muted, separator.",
-      "type": "string",
-      "default": "default"
-    },
     "wrap": {
       "description": "Enable flex wrap",
       "type": "boolean",

package/components/row/row.yaml

@@ -12,10 +12,6 @@ props:
     description: Align items
     type: string
     default: center
-  variant:
-    description: Visual variant — default, bordered, muted, separator.
-    type: string
-    default: default
   draggable:
     description: Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.
     type: boolean