@adia-ai/web-components 0.0.1 → 0.0.3

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

@@ -10,7 +10,7 @@
  * Supports bezier, step, and straight curve modes.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 let nextId = 0;
 

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

@@ -8,7 +8,7 @@
  * Events: 'complete' (detail: {value}), 'input'
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaOtpInput extends AdiaFormElement {
   static properties = {

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

@@ -8,7 +8,7 @@
  *   page-change — { detail: { page } }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaPagination extends AdiaElement {
   static properties = {

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

@@ -25,7 +25,7 @@
  *   pane.toggle()
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaPane extends AdiaElement {
   static properties = {

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/pipeline-status/pipeline-status.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <pipeline-status-ui> — Single updating pipeline status indicator.

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

@@ -13,8 +13,8 @@
  * Triggers: click | hover | manual. ESC closes click/manual popovers.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 const HOVER_CLOSE_DELAY = 120;
 
@@ -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.js

@@ -8,7 +8,7 @@
  * (Legacy `value="-1"` is still treated as indeterminate for back-compat.)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaProgress extends AdiaElement {
   static properties = {

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

@@ -17,7 +17,7 @@
  *   variant — success | warning | danger (colors the fill; inherits otherwise)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaProgressRow extends AdiaElement {
   static properties = {

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

@@ -3,8 +3,8 @@
  * Pure CSS dot via [slot="dot"]::after inner circle. No SVG, no inset shadow hack.
  */
 
-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 AdiaRadio extends AdiaFormElement {
   static properties = {

package/components/range/range.js

@@ -11,7 +11,7 @@
  *   - While dragging: accent highlight on the field
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaRange extends AdiaFormElement {
   static properties = {

package/components/rating/rating.js

@@ -9,7 +9,7 @@
  *   <rating-ui value="5" readonly></rating-ui>
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaRating extends AdiaFormElement {
   static properties = {

package/components/richtext/richtext.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';
 
 /**
  * <richtext-ui> — Renders markdown to styled HTML.

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

@@ -5,8 +5,8 @@
  * <row-ui draggable>...</row-ui>   wires the draggable trait, emits drag-end
  */
 
-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 AdiaRow extends AdiaElement {
   static properties = {

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

package/components/search/search.a2ui.json

@@ -31,11 +31,6 @@
       "type": "boolean",
       "default": false
     },
-    "icon": {
-      "description": "Leading icon name. Defaults to search (magnifying glass).",
-      "type": "string",
-      "default": "search"
-    },
     "name": {
       "description": "Form field name",
       "type": "string",

package/components/search/search.js

@@ -7,7 +7,7 @@
  * Fires debounced 'search' event. Clear button resets and fires immediately.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaSearch extends AdiaFormElement {
   static properties = {

package/components/search/search.yaml

@@ -26,10 +26,6 @@ props:
     type: boolean
     default: false
     reflect: true
-  icon:
-    description: Leading icon name. Defaults to search (magnifying glass).
-    type: string
-    default: search
   placeholder:
     description: Placeholder text
     type: string

package/components/section/section.a2ui.json

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

package/components/section/section.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: AdiaSection
-tag: section-n
+tag: section-ui
 component: Section
 category: container
 version: 1