@adia-ai/web-components 0.5.10 → 0.5.12

package/core/template.js

@@ -175,6 +175,25 @@ function scan(fragment, count) {
         } else if (name[0] === '.') {
           n.removeAttribute(name);
           parts[i] = { t: 'p', n, name: name.slice(1), c: undefined, _fx: null };
+        } else if (name[0] === '?') {
+          // §250 (v0.5.11, FEEDBACK-27): Lit-style boolean attribute syntax
+          // (`?attr=${bool}`) is NOT supported. Without this branch, the
+          // attribute name registers verbatim including the `?` — silent
+          // inert binding. Strip the bogus attribute, warn loudly + degrade
+          // to a no-op text-node part so nothing reaches the DOM.
+          // Consumers should use `.attr=${bool}` (property binding); AdiaUI
+          // primitives reflect properties to DOM attributes automatically.
+          // Parallel structural fix to v0.5.3 §152 partial-interpolation warn.
+          n.removeAttribute(name);
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[template] Lit-style boolean attribute "${name}=" is not supported.\n` +
+            `  Element: <${n.tagName.toLowerCase()}>\n` +
+            `  Use .${name.slice(1)}=\${value} (property binding) instead — ` +
+            `the primitive reflects the property to the DOM attribute for you.\n` +
+            `  See USAGE.md § Template parser — invariants + unsupported syntaxes.`
+          );
+          parts[i] = { t: 'n', n: document.createTextNode(''), c: undefined, _fx: null };
         } else {
           parts[i] = { t: 'a', n, name, c: undefined, _fx: null };
         }

package/core/template.test.js

@@ -0,0 +1,97 @@
+/**
+ * core/template.js — focused tests for the §250 (v0.5.11) `?attr=${bool}`
+ * silent-failure-trap close. Surfaced by FEEDBACK-27 against v0.5.10 source.
+ *
+ * Pre-§250: `?disabled=${true}` registered a literal `?disabled` DOM
+ * attribute with no console warning. Consumer ergonomics gap — Lit-familiar
+ * developers reach for the most ergonomic syntax + ship inert bindings.
+ *
+ * Post-§250: scan-time `console.warn` fires + the bogus part is degraded to
+ * a no-op text-node, so nothing reaches the DOM. Migration path is
+ * `.attr=${bool}` (property binding) — primitives reflect properties to DOM
+ * attributes automatically.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { html, stamp } from './template.js';
+
+describe('html template — §250 (v0.5.11) ?attr=${bool} silent-failure trap', () => {
+  let container;
+  let warnSpy;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    container.remove();
+    warnSpy.mockRestore();
+  });
+
+  it('fires console.warn at scan time when ?attr=${bool} is encountered', () => {
+    const tpl = html`<div ?disabled=${true}></div>`;
+    stamp(tpl, container);
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    const msg = warnSpy.mock.calls[0][0];
+    expect(msg).toMatch(/Lit-style boolean attribute/);
+    expect(msg).toMatch(/\?disabled=/);
+    expect(msg).toMatch(/\.disabled=/);  // migration path mentioned
+  });
+
+  it('does NOT register a literal "?attr" attribute on the DOM node', () => {
+    const tpl = html`<div ?disabled=${true} data-test="probe"></div>`;
+    stamp(tpl, container);
+
+    const node = container.querySelector('[data-test="probe"]');
+    expect(node).not.toBeNull();
+    expect(node.getAttribute('?disabled')).toBeNull();
+    expect(node.hasAttribute('?disabled')).toBe(false);
+  });
+
+  it('does NOT set the matching DOM attribute either (no Lit-attr semantics)', () => {
+    // AdiaUI intentionally does not implement `?attr=${bool}` semantics.
+    // The warn + degrade-to-no-op path means truthy `?disabled` does NOT
+    // add `[disabled]` to the DOM. Consumer must use `.disabled=` for that.
+    const tpl = html`<div ?disabled=${true} data-test="probe"></div>`;
+    stamp(tpl, container);
+
+    const node = container.querySelector('[data-test="probe"]');
+    expect(node.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('fires the warn even when the bound value is falsy', () => {
+    // Lit's `?attr=${false}` removes the attribute. AdiaUI's contract is
+    // "this syntax is not supported, period" — warn fires regardless of
+    // truthiness to maximize visibility of the authoring error.
+    const tpl = html`<div ?disabled=${false}></div>`;
+    stamp(tpl, container);
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not warn on canonical .prop=${val} (no false positive)', () => {
+    // Make sure the new `?`-prefix branch doesn't accidentally fire on
+    // adjacent canonical syntaxes.
+    const tpl = html`<div .className=${'x'}></div>`;
+    stamp(tpl, container);
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('does not warn on canonical @event=${handler} (no false positive)', () => {
+    const tpl = html`<div @click=${() => {}}></div>`;
+    stamp(tpl, container);
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('does not warn on canonical attr=${value} (no false positive)', () => {
+    const tpl = html`<div data-id=${'42'}></div>`;
+    stamp(tpl, container);
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "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",
@@ -33,10 +33,15 @@
     "./styles/*": "./styles/*",
     "./traits": "./traits/index.js",
     "./traits/*": "./traits/*.js",
+    "./color": {
+      "types": "./color/index.d.ts",
+      "default": "./color/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "core/",
+    "color/",
     "components/",
     "!components/**/*.html",
     "!components/**/*.examples.js",
@@ -50,7 +55,9 @@
     "index.js",
     "index.css",
     "index.d.ts",
-    "USAGE.md"
+    "USAGE.md",
+    "README.md",
+    "CHANGELOG.md"
   ],
   "sideEffects": [
     "*.css",

package/styles/components.css

@@ -40,6 +40,7 @@
 @import "../components/breadcrumb/breadcrumb.css";
 @import "../components/command/command.css";
 @import "../components/color-picker/color-picker.css";
+@import "../components/color-input/color-input.css";
 @import "../components/noodles/noodles.css";
 @import "../components/table/table.css";
 @import "../components/table-toolbar/table-toolbar.css";