@adia-ai/web-components 0.6.44 → 0.6.45

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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)

package/components/canvas/canvas.js

@@ -1,9 +1,16 @@
 import { UIElement } from '../../core/element.js';
 // NOTE: the A2UI renderer (<a2ui-root>) lives in @adia-ai/web-modules and is
 // loaded lazily + guarded inside #ensureRenderer() (kicked off from connected()).
-// It is deliberately NOT a static import: @adia-ai/web-components declares no
-// dependency on @adia-ai/web-modules, so a static cross-package import hard-fails
-// the build for primitives-only consumers who never use <canvas-ui> (FEEDBACK-81).
+// 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.
@@ -102,7 +109,7 @@ export class UICanvas extends UIElement {
       this.#rendererReady = Promise.resolve(true);
       return this.#rendererReady;
     }
-    this.#rendererReady = import(/* @vite-ignore */ '../../../web-modules/runtime/a2ui-root/a2ui-root.js')
+    this.#rendererReady = import('@adia-ai/web-modules/runtime/a2ui-root')
       .then(() => customElements.whenDefined('a2ui-root'))
       .then(() => true)
       .catch((err) => {

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);
+    });
+  });
 });