@adia-ai/web-components 0.7.18 → 0.7.19

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.19] — 2026-06-10
+
+### Fixed
+- **`icon-ui` — glyphs always paint on the standalone import path.** Importing `components/icon` directly (or a demo page loading only `./icon.js`) never loaded `core/icons-phosphor.js`, so the weight-loader map stayed empty and every `getIcon()` returned `''` — **silently** (the not-ready guard suppressed the warning): blank icons, zero console errors. Two fixes: `icon.js` now imports the Phosphor loader as a side-effect (the barrel paths already did), and `icon.class.js` gains a signal-reactive retry (`#rev` bumped by `whenIconRegistryReady`, aborted symmetrically in `disconnected()`) so elements that connect *after* the loaders install — e.g. fetched-and-injected demo markup — re-render once the registry is ready. Production (barrel-served) was never affected; the docs/demo single-component path was. Regression probe: `scripts/dev/icon-paint-probe.mjs`. `dist/web-components.min.js` (and the web-modules kitchen-sink bundle) regenerated to carry the fix.
+
 ## [0.7.18] — 2026-06-09
 
 ### Changed

package/components/icon/icon.class.js

@@ -11,8 +11,8 @@
  * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement, signal, html } from '../../core/element.js';
-import { getIcon } from '../../core/icons.js';
+import { UIElement } from '../../core/element.js';
+import { getIcon, whenIconRegistryReady } from '../../core/icons.js';
 
 export class UIIcon extends UIElement {
   static properties = {
@@ -23,12 +23,42 @@ export class UIIcon extends UIElement {
     weight: { type: String, default: 'regular', reflect: true },
   };
 
+  // Incremented when the icon registry becomes ready so the reactive
+  // render() re-runs automatically after the loader map arrives.
+  // Declared as a private field (not a static property) to keep it out
+  // of the attribute reflection loop — it is a purely internal trigger.
+  #rev = this.signal(0);
+
+  // Abort controller for the registry-ready subscription. Cancelled on
+  // disconnectedCallback so elements removed before the registry resolves
+  // do not attempt a render on a detached host.
+  #readyCtrl = null;
+
   connected() {
     this.setAttribute('role', this.label ? 'img' : 'presentation');
     if (!this.label) this.setAttribute('aria-hidden', 'true');
+
+    // Subscribe to the registry-ready promise ONCE per connect cycle.
+    // When installIconLoaders() fires (could be before or after connect),
+    // bump #rev so the reactive render() reruns and picks up the SVG.
+    // Guard: if the registry was already ready (e.g. warm page reload),
+    // the .then() fires in a microtask — still safe, just a no-op repaint.
+    this.#readyCtrl = new AbortController();
+    const ctrl = this.#readyCtrl;
+    whenIconRegistryReady.then(() => {
+      if (!ctrl.signal.aborted) this.#rev.value++;
+    });
+  }
+
+  disconnected() {
+    this.#readyCtrl?.abort();
+    this.#readyCtrl = null;
   }
 
   render() {
+    // Read #rev so this render() is tracked as a dependent of the registry
+    // arrival. The value itself is not used — the read is the tracking hook.
+    void this.#rev.value;
     if (this.label) this.setAttribute('aria-label', this.label);
     const svg = getIcon(this.name, this.weight || 'regular');
     if (svg && this.innerHTML !== svg) this.innerHTML = svg;

package/components/icon/icon.js

@@ -12,6 +12,17 @@
 import { defineIfFree } from '../../core/register.js';
 import { UIIcon } from './icon.class.js';
 
+// Side-effect: wires the full @phosphor-icons/core asset tree into the icon
+// registry so that any Phosphor name resolves without pre-registration.
+// icon-ui is a glyph renderer — the icon loader is required for it to paint.
+// The barrel (components/index.js) and core barrel both carry this import
+// already; this import ensures standalone usage of the icon component
+// (e.g. `import '@adia-ai/web-components/components/icon'`) also works.
+// Apps with bundle-size SLOs that manage their own icon registration should
+// import the class subpath directly and call installIconLoaders() themselves:
+//   import { UIIcon } from '@adia-ai/web-components/components/icon/class';
+import '../../core/icons-phosphor.js';
+
 defineIfFree('icon-ui', UIIcon);
 
 export { UIIcon };