@adia-ai/web-components 0.4.4 → 0.4.6

package/components/select/select.d.ts

@@ -0,0 +1,57 @@
+/**
+ * `<select-ui>` — Custom-styled select / combobox / multi-select.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/select
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SelectOption {
+  value: string;
+  label?: string;
+  icon?: string;
+  avatar?: string;
+  disabled?: boolean;
+  action?: string;
+  divider?: boolean;
+}
+
+export interface SelectChangeEventDetail {
+  value: string;
+}
+export type SelectChangeEvent = CustomEvent<SelectChangeEventDetail>;
+
+export interface SelectActionEventDetail {
+  action: string;
+}
+export type SelectActionEvent = CustomEvent<SelectActionEventDetail>;
+
+export class UISelect extends UIFormElement {
+  placeholder: string;
+  /** Open/closed reflected attribute — toggled by trigger click / keyboard. */
+  open: boolean;
+  label: string;
+  /** Leading icon name (Phosphor registry). */
+  icon: string;
+  /** Leading avatar URL or name. */
+  avatar: string;
+  multiple: boolean;
+  searchable: boolean;
+  /** Allow values not in the option list (combobox mode). */
+  freeText: boolean;
+  divider: boolean;
+
+  /**
+   * Dynamic option list. Setting `.options = [...]` stamps option elements at
+   * connection time + auto-syncs the listbox.
+   */
+  options: readonly SelectOption[];
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISelect, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SelectChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'action', listener: (ev: SelectActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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/slider/slider.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<slider-ui>` — Single-handle slider for numeric input.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/slider
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SliderChangeEventDetail {
+  value: number;
+}
+export type SliderChangeEvent = CustomEvent<SliderChangeEventDetail>;
+export type SliderInputEvent = CustomEvent<SliderChangeEventDetail>;
+
+export class UISlider extends UIFormElement {
+  /** Numeric value — overrides UIFormElement.value (which is String). */
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  label: string;
+  suffix: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISlider, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SliderChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: SliderInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * `<switch-ui>` — Toggle switch (boolean-semantic form control).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/switch
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SwitchChangeEventDetail {
+  /** Submitted value (defaults to `"on"` when checked). */
+  value: string;
+  /** Current checked state. */
+  checked: boolean;
+}
+export type SwitchChangeEvent = CustomEvent<SwitchChangeEventDetail>;
+
+export class UISwitch extends UIFormElement {
+  /** Checked state — reflected, toggles on click. */
+  checked: boolean;
+  label: string;
+  /** Size — `sm` / `md` / `lg`. */
+  size: '' | 'sm' | 'md' | 'lg';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISwitch, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SwitchChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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/textarea/textarea.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<textarea-ui>` — Multi-line text input with Enter-submit semantic.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/textarea
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface TextareaChangeEventDetail {
+  value: string;
+}
+export type TextareaChangeEvent = CustomEvent<TextareaChangeEventDetail>;
+export type TextareaInputEvent = CustomEvent<TextareaChangeEventDetail>;
+
+export class UITextarea extends UIFormElement {
+  placeholder: string;
+  label: string;
+  rows: number;
+  /** CSS `resize` value — `none` / `vertical` (default) / `horizontal` / `both`. */
+  resize: 'none' | 'vertical' | 'horizontal' | 'both';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITextarea, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: TextareaChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: TextareaInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  /** Fired on Enter without Shift; user can `e.preventDefault()` to insert newline. */
+  addEventListener(type: 'submit', listener: (ev: Event) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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/toggle-scheme/toggle-scheme.a2ui.json

@@ -0,0 +1,197 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ToggleScheme.json",
+  "title": "ToggleScheme",
+  "description": "Icon-button primitive that toggles `color-scheme` between light and dark on a target element (default `:root`). Encapsulates the prefers-color-scheme initial-resolution, the inline-style write to the target, optional localStorage persistence (sharing the `adia-theme-` namespace with <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired `<button-ui id=\"theme-toggle\">` + `applyScheme()` pattern previously duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "activeScheme": {
+      "description": "Resolved scheme (\"light\" | \"dark\"). Read-only; mutate via .setScheme() or .toggle().",
+      "type": "string",
+      "enum": [
+        "",
+        "light",
+        "dark"
+      ],
+      "default": ""
+    },
+    "color": {
+      "description": "Semantic intent forwarded to the internal <button-ui>.",
+      "type": "string",
+      "enum": [
+        "",
+        "default",
+        "accent",
+        "info",
+        "success",
+        "warning",
+        "danger"
+      ],
+      "default": ""
+    },
+    "component": {
+      "const": "ToggleScheme"
+    },
+    "disabled": {
+      "description": "Disables the internal button.",
+      "type": "boolean",
+      "default": false
+    },
+    "iconDark": {
+      "description": "Phosphor icon shown when active-scheme is \"dark\" (clicking switches to light).",
+      "type": "string",
+      "default": "moon"
+    },
+    "iconLight": {
+      "description": "Phosphor icon shown when active-scheme is \"light\" (clicking switches to dark).",
+      "type": "string",
+      "default": "sun"
+    },
+    "labelDark": {
+      "description": "aria-label / title applied to the internal button when active-scheme is \"dark\".",
+      "type": "string",
+      "default": "Switch to light mode"
+    },
+    "labelLight": {
+      "description": "aria-label / title applied to the internal button when active-scheme is \"light\".",
+      "type": "string",
+      "default": "Switch to dark mode"
+    },
+    "persist": {
+      "description": "Persist the user's choice to localStorage under `${storage-prefix}scheme`.",
+      "type": "boolean",
+      "default": false
+    },
+    "scheme": {
+      "description": "Initial scheme — \"auto\" follows prefers-color-scheme; \"light\" / \"dark\" force.",
+      "type": "string",
+      "enum": [
+        "auto",
+        "light",
+        "dark"
+      ],
+      "default": "auto"
+    },
+    "size": {
+      "description": "Sizing scale forwarded to the internal <button-ui>.",
+      "type": "string",
+      "enum": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "storagePrefix": {
+      "description": "LocalStorage key prefix; default matches <theme-panel> for cross-element interop.",
+      "type": "string",
+      "default": "adia-theme-"
+    },
+    "target": {
+      "description": "CSS selector for the element receiving `color-scheme`. \":root\" → <html>.",
+      "type": "string",
+      "default": ":root"
+    },
+    "variant": {
+      "description": "Visual style forwarded to the internal <button-ui>. Defaults to \"ghost\" (matches app practice).",
+      "type": "string",
+      "enum": [
+        "default",
+        "solid",
+        "outline",
+        "ghost",
+        "primary",
+        "secondary",
+        "soft"
+      ],
+      "default": "ghost"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "control",
+    "events": {
+      "scheme-change": {
+        "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }."
+      }
+    },
+    "examples": [
+      {
+        "description": "Drop into a toolbar / app header as a single icon-button affordance.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"ToggleScheme\",\n    \"persist\": true\n  }\n]",
+        "name": "header-action"
+      }
+    ],
+    "keywords": [
+      "scheme",
+      "color-scheme",
+      "dark-mode",
+      "light-mode",
+      "theme",
+      "toggle",
+      "moon",
+      "sun"
+    ],
+    "name": "UIToggleScheme",
+    "related": [
+      "Button",
+      "Switch"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Active scheme is light.",
+        "attribute": "active-scheme",
+        "name": "light"
+      },
+      {
+        "description": "Active scheme is dark.",
+        "attribute": "active-scheme",
+        "name": "dark"
+      },
+      {
+        "description": "Non-interactive; the internal button is disabled.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {
+      "dark-mode": [
+        "toggle-scheme"
+      ],
+      "theme-toggle": [
+        "toggle-scheme"
+      ],
+      "toggle": [
+        "toggle-scheme",
+        "switch"
+      ]
+    },
+    "tag": "toggle-scheme-ui",
+    "tokens": {
+      "--toggle-scheme-icon-transition": {
+        "description": "Duration + easing for icon-color transition when scheme flips."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/toggle-scheme/toggle-scheme.css

@@ -0,0 +1,20 @@
+@scope (toggle-scheme-ui) {
+  :where(:scope) {
+    --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
+  }
+
+  :scope {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  :scope[disabled] {
+    pointer-events: none;
+  }
+
+  :scope > [part="button"] {
+    transition: color var(--toggle-scheme-icon-transition);
+  }
+}