@adia-ai/web-components 0.5.20 → 0.6.0

package/CHANGELOG.md

@@ -11,6 +11,16 @@ runtime ships in the sibling `@adia-ai/a2ui-runtime` package
 
 _No pending changes._
 
+## [0.6.0] - 2026-05-18
+
+_Lockstep ride-along (no source change in this package; companion to web-components v0.6.0 — see root CHANGELOG)._
+
+**MINOR-line internal-dep range update:** internal `@adia-ai/*` dependency ranges move from `^0.5.0` to `^0.6.0` per AdiaUI lockstep policy.
+
+## [0.5.21] - 2026-05-18
+
+_Lockstep ride-along (no source change in this package; companion to web-components v0.5.21 — see root CHANGELOG)._
+
 ## [0.5.20] - 2026-05-18
 
 ### Added — §353 (v0.5.20) — `<pane-ui>` + `<tabs-ui>` bar-rule alignment

package/components/index.d.ts

@@ -0,0 +1,4 @@
+// v0.5.21 hotfix stub — TS-migration Phase 1 (568bb998d) declared this
+// types: export but Phase 2 hasn't generated real declarations yet.
+// Replace with real type declarations when Phase 2 lands.
+export {};

package/components/index.js

@@ -86,8 +86,7 @@ export { UINavItem } from './nav-item/nav-item.js';
 export { UIOtpInput } from './otp-input/otp-input.js';
 export { UIImage } from './image/image.js';
 export { UISearch } from './search/search.js';
-// Suffixed `-ui` to dodge ad-blocker rules that match `/stat.js$script`.
-export { UIStat } from './stat/stat-ui.js';
+export { UIStat } from './stat/stat.js';
 export { UIProgressRow } from './progress-row/progress-row.js';
 export { UIActionList, UIActionItem } from './action-list/action-list.js';
 export { UIEmptyState } from './empty-state/empty-state.js';

package/components/select/class.js

@@ -13,6 +13,7 @@
 
 import { UIFormElement } from '../../core/form.js';
 import { anchorPopover } from '../../core/anchor.js';
+import { untracked } from '../../core/signals.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -244,21 +245,30 @@ export class UISelect extends UIFormElement {
   }
 
   set options(list) {
-    this.#options = list;
-    // Ensure listbox exists before rendering (may be called before first render)
-    if (!this.#listbox) {
-      this.#listbox = this.querySelector('[slot="listbox"]');
+    // Wrap the internal rebuild in `untracked` so reads of `this.value` inside
+    // `#renderOptions()` (for aria-selected) and `#displayText()` (for the
+    // trigger label) don't subscribe a calling effect to this element's value
+    // signal. Without this, setting `.options` followed by `.value` from
+    // inside an effect creates a self-trigger cycle — the effect subscribes
+    // to value via #renderOptions, then notifies itself via the value write,
+    // and re-runs until the drain-loop guard fires.
+    untracked(() => {
+      this.#options = list;
+      // Ensure listbox exists before rendering (may be called before first render)
       if (!this.#listbox) {
-        this.#listbox = document.createElement('div');
-        this.#listbox.setAttribute('slot', 'listbox');
-        this.#listbox.setAttribute('role', 'listbox');
-        this.#listbox.setAttribute('popover', 'manual');
-        this.appendChild(this.#listbox);
+        this.#listbox = this.querySelector('[slot="listbox"]');
+        if (!this.#listbox) {
+          this.#listbox = document.createElement('div');
+          this.#listbox.setAttribute('slot', 'listbox');
+          this.#listbox.setAttribute('role', 'listbox');
+          this.#listbox.setAttribute('popover', 'manual');
+          this.appendChild(this.#listbox);
+        }
       }
-    }
-    this.#renderOptions();
-    const display = this.querySelector('[slot="display"]');
-    if (display) display.textContent = this.#displayText();
+      this.#renderOptions();
+      const display = this.querySelector('[slot="display"]');
+      if (display) display.textContent = this.#displayText();
+    });
   }
 
   get options() { return this.#options; }

package/components/stat/stat.a2ui.json

@@ -49,7 +49,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
-    "composes": [],
+    "composes": [
+      "icon-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/stat/stat.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `<stat-ui>` — Metric/KPI display — value + label + optional change indicator and trend.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/stat
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIStat extends UIElement {
+  /** Change indicator text (e.g. '+12%', '-3%') */
+  change: string;
+  /** Icon name displayed in the icon slot */
+  icon: string;
+  /** Eyebrow label describing the metric */
+  label: string;
+  /** Trend direction or narrative subtitle. Canonical values color the change badge (up=success, down=danger, neutral/flat=muted); any other string renders as caption-style text under the primary value. */
+  trend: string;
+  /** The primary metric value to display */
+  value: string;
+}

package/components/stat/stat.yaml

@@ -3,6 +3,8 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIStat
 tag: stat-ui
+composes:
+  - icon-ui
 component: Stat
 category: display
 version: 1

package/package.json

@@ -1,48 +1,58 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.20",
+  "version": "0.6.0",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "types": "./index.d.ts",
+      "import": "./index.js",
       "default": "./index.js"
     },
     "./css": "./index.css",
     "./core": {
       "types": "./core/index.d.ts",
+      "import": "./core/index.js",
       "default": "./core/index.js"
     },
     "./core/*": {
       "types": "./core/*.d.ts",
+      "import": "./core/*.js",
       "default": "./core/*.js"
     },
-    "./components": "./components/index.js",
+    "./components": {
+      "types": "./components/index.d.ts",
+      "import": "./components/index.js",
+      "default": "./components/index.js"
+    },
     "./components/*": {
       "types": "./components/*/*.d.ts",
+      "import": "./components/*/*.js",
       "default": "./components/*/*.js"
     },
-    "./components/stat": {
-      "types": "./components/stat/stat-ui.d.ts",
-      "default": "./components/stat/stat-ui.js"
-    },
-    "./components/stat/stat-ui.js": {
-      "types": "./components/stat/stat-ui.d.ts",
-      "default": "./components/stat/stat-ui.js"
-    },
     "./components/*/class": {
       "types": "./components/*/*.d.ts",
+      "import": "./components/*/class.js",
       "default": "./components/*/class.js"
     },
     "./components/*.css": "./components/*/*.css",
     "./components/*/*.css": "./components/*/*.css",
     "./components/*/css/*.css": "./components/*/css/*.css",
     "./styles/*": "./styles/*",
-    "./traits": "./traits/index.js",
-    "./traits/*": "./traits/*.js",
+    "./traits": {
+      "types": "./traits.d.ts",
+      "import": "./traits/index.js",
+      "default": "./traits/index.js"
+    },
+    "./traits/*": {
+      "types": "./traits.d.ts",
+      "import": "./traits/*.js",
+      "default": "./traits/*.js"
+    },
     "./color": {
       "types": "./color/index.d.ts",
+      "import": "./color/index.js",
       "default": "./color/index.js"
     },
     "./package.json": "./package.json"
@@ -75,7 +85,7 @@
     "./core/icons-phosphor.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-runtime": "^0.5.0",
+    "@adia-ai/a2ui-runtime": "^0.6.0",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/language": "^6.12.3",
     "@codemirror/lint": "^6.9.5",

package/styles/components.css

@@ -77,7 +77,7 @@
 @import "../components/otp-input/otp-input.css";
 @import "../components/image/image.css";
 @import "../components/search/search.css";
-@import "../components/stat/stat-ui.css";
+@import "../components/stat/stat.css";
 @import "../components/progress-row/progress-row.css";
 @import "../components/action-list/action-list.css";
 @import "../components/empty-state/empty-state.css";

package/components/stat/stat-ui.d.ts

@@ -1,38 +0,0 @@
-/**
- * `<stat-ui>` — Metric/KPI display. Value + label + optional change indicator and trend.
- *
- * @see https://ui-kit.exe.xyz/site/components/stat
- *
- * HAND-AUTHORED (v0.5.12 §253 FB-30 close-out). The codegen pipeline's
- * `isCssOnly()` check at `scripts/build/dts-codegen.mjs:186-194` looks for
- * `${dirname}.js` — but stat ships `stat-ui.js` (irregular filename; the
- * v0.6.0 §303 rename will normalize to `stat.js`). Pre-§303 the codegen
- * false-positives `isCssOnly` and skips this directory entirely. Hand-author
- * this file matching `stat.yaml` props until §303 lands.
- *
- * Filename mirrors the JS file (`stat-ui.js` → `stat-ui.d.ts`) so TypeScript
- * resolves the side-effect import `import '@adia-ai/web-components/components/stat/stat-ui.js'`
- * to a typed module. Post-§303, both files rename to `stat.{js,d.ts}` and
- * codegen takes over.
- */
-
-import { UIElement } from '../../core/element.js';
-
-export class UIStat extends UIElement {
-  /** Eyebrow label describing the metric. */
-  label: string;
-  /** Primary metric value (large display number / string). */
-  value: string;
-  /** Change indicator text (e.g. "+12%", "-3%"). Slotted as a badge next to value. */
-  change: string;
-  /**
-   * Trend direction or narrative subtitle. Canonical values color the change
-   * badge: `up` = success (green), `down` = danger (red), `flat`/`neutral` =
-   * muted. Any other string renders as caption-style text under the primary
-   * value (not enum-validated; yaml documents the canonical set but the type
-   * stays `string` for narrative subtitles).
-   */
-  trend: string;
-  /** Icon name displayed in the icon slot (Phosphor icon registry). */
-  icon: string;
-}