@adia-ai/web-components 0.6.43 → 0.6.45

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.45] — 2026-05-29
+
+### Fixed — `<canvas-ui>` lazy `a2ui-root` import uses a bare specifier (FEEDBACK-85, follow-up to FB-81)
+
+- **`components/canvas/canvas.js`** — the FB-81 lazy import used a *relative* cross-package path (`../../../web-modules/runtime/a2ui-root/a2ui-root.js`). That resolves from the real `node_modules` location but breaks once Vite pre-bundles `web-components` into `node_modules/.vite/deps/` — `vite:import-analysis` fails to resolve the relative path (even with `/* @vite-ignore */`) and aborts dep optimization, so the app won't boot (blank page, Vite overlay only). Switched to a **bare specifier** `import('@adia-ai/web-modules/runtime/a2ui-root')`, which resolves identically whether `web-components` is pre-bundled or not (via web-modules' `./runtime/*` export). **`@adia-ai/web-modules` is now declared as an `optionalDependency`** (`^0.6.0`) so the specifier resolves under any bundler; the import stays dynamic + `.catch()`-guarded, so it's loaded only when `<canvas-ui>` is used and degrades gracefully if web-modules is genuinely absent. Lockfile regen (`npm install --package-lock-only`) required at the release cut.
+
+### Fixed — `<select-ui>` derives an accessible name from `placeholder` (FEEDBACK-88)
+
+- **`components/select/select.class.js`** — a placeholder-only `<select-ui placeholder="Status">` (no `label`/`aria-label`/`<field-ui>`) had **no accessible name** (WCAG 4.1.2 fail), while the sibling `<input-ui>` names itself from its placeholder. Added `#syncAccessibleName()` (run in `render()`) mirroring input-ui: derive `aria-label` from `placeholder` when the select is otherwise unnamed. **Guards** (a placeholder-only fix must not clobber a real label): an author `aria-label`, a visible `label`, or `aria-labelledby` always win; the **default `'Select...'` prompt is never used as a name** — otherwise every `<field-ui>`-wrapped select (named via a sibling `<label for>`, which `aria-label` would override) would be renamed to the generic prompt. A `#placeholderNamed` flag tracks the derived name so re-renders refresh/clear it without touching an author's aria-label. +5 unit tests. Known residual (matches input-ui): a `<field-ui>` + a *custom* placeholder on the same select still yields an aria-label from the placeholder — an unusual author combo.
+
+### Maintenance
+
+- **`package.json`** — `@adia-ai/web-modules` added as an `optionalDependency` (`^0.6.0`) for the FB-85 bare-specifier resolution; lockfile regenerated.
+- **`dist/web-components.min.js` + `dist/icons-manifest.js`** — bundle rebuild reflecting the `canvas.js` + `select.class.js` fixes above.
+
+## [0.6.44] — 2026-05-28
+
+### Fixed — `<canvas-ui>` no longer hard-requires `@adia-ai/web-modules` at build time (FEEDBACK-81)
+
+- **`components/canvas/canvas.js`** — the A2UI renderer `<a2ui-root>` (which lives in `@adia-ai/web-modules`) was a top-level *static* import. Because `@adia-ai/web-components` declares no dependency on `@adia-ai/web-modules`, the default barrel `import '@adia-ai/web-components'` (which registers `<canvas-ui>`) failed to build for primitives-only consumers who omitted `web-modules` — a hard Vite/rolldown `UNRESOLVED_IMPORT … web-modules/runtime/a2ui-root`. The import is now lazy + guarded: `#ensureRenderer()` runs a `/* @vite-ignore */` dynamic import on `connected()`, and a missing `web-modules` degrades to a one-time console warning instead of breaking the build. Consumers that have `web-modules` keep the prior synchronous render path (fast-path when `<a2ui-root>` is already defined); `process` / `processAll` / `reset` / version-restore buffer until the renderer is ready, preserving call order. The primitives barrel is now self-contained.
+
+### Maintenance
+
+- **`dist/web-components.min.js` + `dist/icons-manifest.js`** — bundle rebuild reflecting the `components/canvas/canvas.js` decouple above.
+
 ## [0.6.43] — 2026-05-27
 
 ### Added — `<list-ui>` `[contained]` prop declared in yaml

package/components/canvas/canvas.js

@@ -1,5 +1,16 @@
 import { UIElement } from '../../core/element.js';
-import '../../../web-modules/runtime/a2ui-root/a2ui-root.js';
+// NOTE: the A2UI renderer (<a2ui-root>) lives in @adia-ai/web-modules and is
+// loaded lazily + guarded inside #ensureRenderer() (kicked off from connected()).
+// Two constraints shape this import:
+//   • NOT static (FEEDBACK-81): a static cross-package import hard-fails the build
+//     for primitives-only consumers who never use <canvas-ui>. Hence lazy import().
+//   • BARE specifier, not a relative path (FEEDBACK-85): a relative
+//     '../../../web-modules/…' breaks Vite dep pre-bundling — once web-components is
+//     flattened into node_modules/.vite/deps/, the relative path no longer resolves
+//     and import-analysis aborts (even with @vite-ignore). A bare specifier resolves
+//     identically whether pre-bundled or not. @adia-ai/web-modules is declared as an
+//     optionalDependency so it resolves; the .catch() below degrades gracefully if
+//     it is genuinely absent at runtime.
 
 /**
  * <canvas-ui> — A2UI rendering surface.
@@ -25,6 +36,10 @@ export class UICanvas extends UIElement {
   #historyIndex = -1;
   static MAX_HISTORY = 10;
 
+  // FB-81: lazy/guarded <a2ui-root> loader state.
+  #rendererReady = null;                 // Promise<boolean> | null
+  static #warnedMissingRenderer = false;
+
   #onKeydown = (e) => {
     if (e.target.closest('input, textarea, [contenteditable]')) return;
     if (!this.contains(document.activeElement) && document.activeElement !== document.body) return;
@@ -66,6 +81,8 @@ export class UICanvas extends UIElement {
     this.addEventListener('input', this.#onInput);
     // Forward a2ui-retry from wired error cards so consumers can retry generation
     this.addEventListener('a2ui-retry', this.#onRetry);
+    // Kick off the lazy renderer load now that a canvas is in the DOM.
+    this.#ensureRenderer();
   }
 
   disconnected() {
@@ -79,6 +96,53 @@ export class UICanvas extends UIElement {
     this.#bound = false;
   }
 
+  /**
+   * Lazily load the A2UI renderer (<a2ui-root>) from @adia-ai/web-modules.
+   * Resolves true once the element is defined, false if web-modules is not
+   * installed (primitives-only consumers). Idempotent — the import runs once.
+   * Guarded so a missing sibling package degrades to a one-time warning
+   * instead of a hard build/runtime failure (FEEDBACK-81).
+   */
+  #ensureRenderer() {
+    if (this.#rendererReady) return this.#rendererReady;
+    if (customElements.get('a2ui-root')) {
+      this.#rendererReady = Promise.resolve(true);
+      return this.#rendererReady;
+    }
+    this.#rendererReady = import('@adia-ai/web-modules/runtime/a2ui-root')
+      .then(() => customElements.whenDefined('a2ui-root'))
+      .then(() => true)
+      .catch((err) => {
+        if (!UICanvas.#warnedMissingRenderer) {
+          UICanvas.#warnedMissingRenderer = true;
+          console.warn(
+            '[canvas-ui] A2UI renderer <a2ui-root> could not be loaded — install ' +
+            '@adia-ai/web-modules to render generated UI in <canvas-ui>. Apps that ' +
+            'use only primitives (and never <canvas-ui>) can ignore this.',
+            err,
+          );
+        }
+        return false;
+      });
+    return this.#rendererReady;
+  }
+
+  /**
+   * Run `fn(rootEl)` against the <a2ui-root> once it is available. Synchronous
+   * fast-path when the renderer is already upgraded (preserves prior timing for
+   * consumers that have @adia-ai/web-modules); otherwise defers until the lazy
+   * import resolves, preserving call order. No-op when web-modules is absent.
+   */
+  #whenRoot(fn) {
+    if (this.#rootEl && typeof this.#rootEl.process === 'function') {
+      fn(this.#rootEl);
+      return;
+    }
+    this.#ensureRenderer().then((ok) => {
+      if (ok && this.#rootEl && typeof this.#rootEl.process === 'function') fn(this.#rootEl);
+    });
+  }
+
   render() {
     if (this.#bound) return;
     this.#bound = true;
@@ -104,18 +168,19 @@ export class UICanvas extends UIElement {
 
   /** Process a single A2UI message. */
   process(message) {
-    this.#rootEl?.process(message);
+    this.#whenRoot((root) => root.process(message));
   }
 
   /** Process an array of A2UI messages. */
   processAll(messages) {
-    if (!this.#rootEl) return;
-    for (const msg of messages) this.#rootEl.process(msg);
+    this.#whenRoot((root) => {
+      for (const msg of messages) root.process(msg);
+    });
   }
 
   /** Reset the canvas. */
   reset() {
-    this.#rootEl?.reset();
+    this.#whenRoot((root) => root.reset());
   }
 
   /** Return formatted innerHTML of the a2ui-root. */
@@ -155,10 +220,12 @@ export class UICanvas extends UIElement {
 
   #restoreVersion() {
     const messages = this.#history[this.#historyIndex];
-    this.#rootEl?.reset();
-    if (messages) {
-      for (const msg of messages) this.#rootEl?.process(msg);
-    }
+    this.#whenRoot((root) => {
+      root.reset();
+      if (messages) {
+        for (const msg of messages) root.process(msg);
+      }
+    });
   }
 
   // ── Private ──

package/components/select/select.class.js

@@ -324,6 +324,37 @@ export class UISelect extends UIFormElement {
     else this.selectAllOptions();
   };
 
+  // FB-88: tracks whether the host's current aria-label was derived from
+  // `placeholder` (vs author-supplied), so re-renders refresh/clear OUR name
+  // without ever clobbering an author's aria-label.
+  #placeholderNamed = false;
+
+  /**
+   * Derive an accessible name from `placeholder` when the select is otherwise
+   * unnamed — mirrors input-ui so a placeholder-only select (the idiomatic
+   * filter-bar shape) still has a name for assistive tech (WCAG 4.1.2, FB-88).
+   *
+   * Guards (a placeholder-only fix must NOT clobber a real label):
+   *  • an author `aria-label`, a visible `label`, or an `aria-labelledby` wins;
+   *  • the default 'Select...' prompt is NOT used as a name — otherwise every
+   *    field-ui-wrapped select (named by a sibling `<label for>`, which aria-label
+   *    would override) would be renamed to the generic prompt.
+   */
+  #syncAccessibleName() {
+    const DEFAULT_PLACEHOLDER = 'Select...'; // matches static properties.placeholder.default
+    const authoredAria = this.hasAttribute('aria-label') && !this.#placeholderNamed;
+    const labeledElsewhere = !!this.label || this.hasAttribute('aria-labelledby');
+    const namable = !authoredAria && !labeledElsewhere
+      && this.placeholder && this.placeholder !== DEFAULT_PLACEHOLDER;
+    if (namable) {
+      this.setAttribute('aria-label', this.placeholder);
+      this.#placeholderNamed = true;
+    } else if (this.#placeholderNamed) {
+      this.removeAttribute('aria-label');
+      this.#placeholderNamed = false;
+    }
+  }
+
   connected() {
     super.connected();
     this.setAttribute('role', 'combobox');
@@ -349,6 +380,10 @@ export class UISelect extends UIFormElement {
     if (this.multiple) this.setAttribute('data-multi-chips', '');
     else this.removeAttribute('data-multi-chips');
 
+    // A11y (FB-88): name a placeholder-only select from its placeholder, like
+    // input-ui, so it isn't unnamed for assistive tech (WCAG 4.1.2).
+    this.#syncAccessibleName();
+
     // Stamp default trigger if none provided
     if (!this.querySelector('[slot="trigger"]')) {
       // Detach listbox before innerHTML wipe so it isn't destroyed

package/components/select/select.test.js

@@ -288,4 +288,38 @@ describe('select-ui', () => {
     await tick();
     expect(s.value).toBe('b');
   });
+
+  // §FB-88 — placeholder-only select derives an accessible name (WCAG 4.1.2),
+  // mirroring input-ui, without clobbering a real label.
+  describe('accessible name from placeholder (FB-88)', () => {
+    it('names a placeholder-only select from its placeholder', async () => {
+      const s = mount(`<select-ui placeholder="Status"></select-ui>`);
+      await tick();
+      expect(s.getAttribute('aria-label')).toBe('Status');
+    });
+
+    it('does NOT derive a name from the default "Select..." placeholder', async () => {
+      const s = mount(`<select-ui></select-ui>`);
+      await tick();
+      expect(s.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('preserves an author-supplied aria-label (override wins over placeholder)', async () => {
+      const s = mount(`<select-ui aria-label="Filter by status" placeholder="Status"></select-ui>`);
+      await tick();
+      expect(s.getAttribute('aria-label')).toBe('Filter by status');
+    });
+
+    it('does not set aria-label when a visible label is present', async () => {
+      const s = mount(`<select-ui label="Status" placeholder="Pick one"></select-ui>`);
+      await tick();
+      expect(s.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('does not set aria-label when aria-labelledby is present (e.g. field-ui)', async () => {
+      const s = mount(`<select-ui aria-labelledby="ext-label" placeholder="Pick one"></select-ui>`);
+      await tick();
+      expect(s.hasAttribute('aria-label')).toBe(false);
+    });
+  });
 });