@adia-ai/web-components 0.4.3 → 0.4.5

package/components/select/select.a2ui.json

@@ -81,6 +81,11 @@
       "type": "boolean",
       "default": false
     },
+    "options": {
+      "description": "Option list. Array of {value, label, disabled?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children.",
+      "type": "array",
+      "default": []
+    },
     "pattern": {
       "description": "Regex pattern for validation",
       "type": "string",
@@ -101,6 +106,16 @@
       "type": "boolean",
       "default": false
     },
+    "size": {
+      "description": "Sizing scale via universal `[size]` attribute system (packages/web-components/styles/tokens.css). Matches Input's sizing tokens so a Select rendered alongside an Input feels coherent in a form row.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
     "value": {
       "description": "Currently selected option value",
       "type": "string",

package/components/select/select.js

@@ -46,7 +46,7 @@ class UISelect extends UIFormElement {
     this.open = false;
     this.#query = '';
     this.syncValue(opt.value);
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   connected() {
@@ -293,7 +293,7 @@ class UISelect extends UIFormElement {
           this.#query = '';
           this.open = false;
           this.syncValue?.(q);
-          this.dispatchEvent(new Event('change', { bubbles: true }));
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
         } else {
           this.open = false;
         }

package/components/select/select.yaml

@@ -17,6 +17,16 @@ props:
     type: string
     default: default
     enum: [default, outline, ghost, soft]
+  size:
+    description: >-
+      Sizing scale via universal `[size]` attribute system
+      (packages/web-components/styles/tokens.css). Matches Input's
+      sizing tokens so a Select rendered alongside an Input feels
+      coherent in a form row.
+    type: string
+    default: md
+    enum: [sm, md, lg]
+    reflect: true
   required:
     description: Marks the field as required for form validation
     type: boolean
@@ -70,6 +80,10 @@ props:
     type: boolean
     default: false
     reflect: true
+  options:
+    description: "Option list. Array of {value, label, disabled?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children."
+    type: array
+    default: []
   pattern:
     description: Regex pattern for validation
     type: string

package/components/slider/slider.js

@@ -110,7 +110,7 @@ class UISlider extends UIFormElement {
   #setValue(v) {
     if (v === this.value) return;
     this.value = v;
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
   }
 
   #onPointerDown = (e) => {
@@ -132,13 +132,13 @@ class UISlider extends UIFormElement {
     this.#thumbEl.releasePointerCapture(e.pointerId);
     this.#thumbEl.removeEventListener('pointermove', this.#onPointerMove);
     this.#thumbEl.removeEventListener('pointerup', this.#onPointerUp);
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   #onTrackClick = (e) => {
     if (this.disabled || e.target === this.#thumbEl) return;
     this.#setValue(this.#valueFromX(e.clientX));
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   #onKey = (e) => {
@@ -155,7 +155,7 @@ class UISlider extends UIFormElement {
     }
     e.preventDefault();
     this.#setValue(this.#snap(v));
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   disconnected() {

package/components/slider/slider.test.js

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './slider.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('slider-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders thumb at correct % for initial value', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    const thumb = s.querySelector('[slot="thumb"]');
+    expect(thumb.style.left).toBe('50%');
+  });
+
+  // Property reactivity contract — locks in the behavior that consumer
+  // feedback (FEEDBACK-adia-packages.md §5, 2026-05-12) incorrectly
+  // claimed was broken. UIElement's signal-backed property setters
+  // (core/element.js:31-50) trigger the host's render effect on every
+  // property change; slider-ui's render() reads this.value and updates
+  // [slot="thumb"].style.left. This test catches any regression that
+  // would break undo/redo or any other programmatic-value flow.
+  it('moves thumb when .value is set programmatically', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    const thumb = s.querySelector('[slot="thumb"]');
+    expect(thumb.style.left).toBe('50%');
+
+    s.value = 75;
+    await tick();
+    expect(thumb.style.left).toBe('75%');
+
+    s.value = 10;
+    await tick();
+    expect(thumb.style.left).toBe('10%');
+  });
+
+  it('moves thumb when attribute is set imperatively', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    const thumb = s.querySelector('[slot="thumb"]');
+
+    s.setAttribute('value', '25');
+    await tick();
+    expect(thumb.style.left).toBe('25%');
+  });
+
+  it('updates [slot="value"] readout text when .value changes', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    const readout = s.querySelector('[slot="value"]');
+    expect(readout.textContent).toBe('50');
+
+    s.value = 88;
+    await tick();
+    expect(readout.textContent).toBe('88');
+  });
+
+  it('emits CustomEvent("change") with detail.value on keyboard step', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100" step="1"></slider-ui>');
+    await tick();
+
+    let captured = null;
+    s.addEventListener('change', (e) => { captured = e; });
+
+    s.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    await tick();
+
+    expect(captured).not.toBeNull();
+    expect(captured).toBeInstanceOf(CustomEvent);
+    expect(captured.detail).toEqual({ value: 51 });
+  });
+
+  it('emits CustomEvent("input") with detail.value on internal value change', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100" step="1"></slider-ui>');
+    await tick();
+
+    let captured = null;
+    s.addEventListener('input', (e) => { captured = e; });
+
+    s.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    await tick();
+
+    expect(captured).not.toBeNull();
+    expect(captured.detail).toEqual({ value: 51 });
+  });
+
+  it('reflects value to [aria-valuenow] for screen readers', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    expect(s.getAttribute('aria-valuenow')).toBe('50');
+
+    s.value = 80;
+    await tick();
+    expect(s.getAttribute('aria-valuenow')).toBe('80');
+  });
+});

package/components/switch/switch.a2ui.json

@@ -69,7 +69,14 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "description": "Wrapping a switch-ui in field-ui. The widget already self-labels.",
+        "right": "<switch-ui label=\"Email notifications\"></switch-ui>\n",
+        "rule": "Use [label] on switch-ui directly; do not wrap in field-ui.",
+        "wrong": "<field-ui inline label=\"Email notifications\">\n  <switch-ui></switch-ui>\n</field-ui>\n"
+      }
+    ],
     "category": "layout",
     "events": {
       "change": {

package/components/switch/switch.js

@@ -35,7 +35,7 @@ class UISwitch extends UIFormElement {
   #toggle = () => {
     if (this.disabled) return;
     this.checked = !this.checked;
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
   };
 
   #onKey = (e) => {

package/components/switch/switch.yaml

@@ -83,8 +83,17 @@ tokens:
   --toggle-track-width:
     description: Track width
 a2ui:
-  rules: []
-anti_patterns: []
+  rules:
+    - "Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label inline via CSS attr() pattern. For settings rows (label-left, switch-right), put the descriptive text in switch-ui's own [label] attribute; do not introduce a field-ui wrapper. For descriptive helper text below the switch, use <text-ui variant='caption'> as a sibling — not field-ui's hint slot."
+anti_patterns:
+  - description: Wrapping a switch-ui in field-ui. The widget already self-labels.
+    wrong: |
+      <field-ui inline label="Email notifications">
+        <switch-ui></switch-ui>
+      </field-ui>
+    right: |
+      <switch-ui label="Email notifications"></switch-ui>
+    rule: Use [label] on switch-ui directly; do not wrap in field-ui.
 examples:
   - name: notification-preferences
     description: Notification preferences card with toggle switches for different notification channels

package/components/table/table.a2ui.json

@@ -13,9 +13,19 @@
     }
   ],
   "properties": {
+    "columns": {
+      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.",
+      "type": "array",
+      "default": []
+    },
     "component": {
       "const": "Table"
     },
+    "data": {
+      "description": "Row records. Array of plain objects keyed to columns[].key.",
+      "type": "array",
+      "default": []
+    },
     "density": {
       "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",
       "type": "string",

package/components/table/table.yaml

@@ -9,6 +9,14 @@ version: 1
 description: Data table with sorting, selection, pagination, search, column resize, keyboard nav,
   cell types, and CSV export. CSS grid + ARIA grid roles.
 props:
+  columns:
+    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.
+    type: array
+    default: []
+  data:
+    description: Row records. Array of plain objects keyed to columns[].key.
+    type: array
+    default: []
   density:
     description: Controls cell padding and row height. 'compact' for dense data, 'standard' for default
       spacing, 'comfortable' for spacious rows.

package/components/tag/tag.a2ui.json

@@ -40,6 +40,10 @@
       "type": "string",
       "default": ""
     },
+    "textContent": {
+      "description": "Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
     "variant": {
       "description": "Semantic variant — `default | info | success | warning | danger`.",
       "type": "string",

package/components/tag/tag.js

@@ -16,6 +16,7 @@ import { UIElement } from '../../core/element.js';
 class UITag extends UIElement {
   static properties = {
     text:      { type: String,  default: '', reflect: true },
+    textContent: { type: String, default: '' },
     variant:   { type: String,  default: 'default', reflect: true },
     size:      { type: String,  default: 'md', reflect: true },
     removable: { type: Boolean, default: false, reflect: true },

package/components/tag/tag.yaml

@@ -28,6 +28,10 @@ props:
     description: Tag text content.
     type: string
     default: ""
+  textContent:
+    description: Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after.
+    type: string
+    dynamic: true
   variant:
     description: Semantic variant — `default | info | success | warning | danger`.
     type: string

package/components/text/text.a2ui.json

@@ -21,6 +21,11 @@
       "type": "number",
       "default": 0
     },
+    "strong": {
+      "description": "When true, applies stronger emphasis (heavier weight + accent color). Styled via :scope[strong] in text.css. Use instead of variant=heading when you want a single emphasized word inline in body copy.",
+      "type": "boolean",
+      "default": false
+    },
     "textContent": {
       "description": "Display text content. The main payload field for Text components extracted from HTML.",
       "$ref": "common_types.json#/$defs/DynamicString"

package/components/text/text.js

@@ -16,6 +16,7 @@ import { UIElement } from '../../core/element.js';
 class UIText extends UIElement {
   static properties = {
     variant:  { type: String,  default: 'body', reflect: true },
+    strong:   { type: Boolean, default: false, reflect: true },
     truncate: { type: Boolean, default: false, reflect: true },
     lines:    { type: Number,  default: 0, reflect: true },
   };

package/components/text/text.yaml

@@ -12,6 +12,11 @@ props:
     description: Multi-line clamp count (0 = no clamp)
     type: number
     default: 0
+  strong:
+    description: When true, applies stronger emphasis (heavier weight + accent color). Styled via :scope[strong] in text.css. Use instead of variant=heading when you want a single emphasized word inline in body copy.
+    type: boolean
+    default: false
+    reflect: true
   truncate:
     description: Single-line truncation with ellipsis. Ignored when `lines` is set.
     type: boolean

package/components/textarea/textarea.a2ui.json

@@ -26,6 +26,11 @@
       "type": "string",
       "default": ""
     },
+    "name": {
+      "description": "Form control name for form data submission. Inherited from UIFormElement.",
+      "type": "string",
+      "default": ""
+    },
     "placeholder": {
       "description": "Placeholder text shown when textarea is empty.",
       "type": "string",

package/components/textarea/textarea.js

@@ -76,7 +76,7 @@ class UITextarea extends UIFormElement {
     this.value = text;
     this.#textEl.toggleAttribute('data-empty', !text);
     this.syncValue(text);
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
   };
 
   #onKeydown = (e) => {
@@ -88,7 +88,7 @@ class UITextarea extends UIFormElement {
   };
 
   #onBlur = () => {
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   #onPaste = (e) => {

package/components/textarea/textarea.yaml

@@ -16,6 +16,10 @@ props:
     description: Label text displayed above the textarea.
     type: string
     default: ""
+  name:
+    description: Form control name for form data submission. Inherited from UIFormElement.
+    type: string
+    default: ""
   placeholder:
     description: Placeholder text shown when textarea is empty.
     type: string

package/components/upload/upload.js

@@ -168,7 +168,7 @@ class UIUpload extends UIFormElement {
     }
     this.internals.setFormValue(fd);
 
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, files: this.files } }));
     this.render();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "exports": {
@@ -10,6 +10,7 @@
     "./core/*": "./core/*.js",
     "./components": "./components/index.js",
     "./components/*": "./components/*/*.js",
+    "./components/*.css": "./components/*/*.css",
     "./styles/*": "./styles/*",
     "./traits": "./traits/index.js",
     "./traits/*": "./traits/*.js",