@adia-ai/web-components 0.5.6 → 0.5.8

package/components/toggle-scheme/toggle-scheme.test.js

@@ -0,0 +1,110 @@
+/**
+ * toggle-scheme-ui §200 race-fix tests — v0.5.7 (FEEDBACK-10 §1).
+ *
+ * Verifies the post-connect attribute application is HONORED — not raced over
+ * by the synchronous #initState() call in connected(). Per the bug class:
+ *
+ *   1. template.js scan() strips placeholder attributes pre-insertion
+ *   2. replaceChildren() upgrades the element; connectedCallback fires
+ *   3. #initState() reads this.scheme (default 'auto')
+ *   4. template.js update() then setAttribute('scheme', 'dark')
+ *   5. attributeChangedCallback syncs to property — but #initState already ran
+ *
+ * Pre-§200, step 4 was a no-op for the scheme cascade. Post-§200,
+ * attributeChangedCallback re-runs #initState() (until user-touched).
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './toggle-scheme.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('toggle-scheme-ui §200 race fix', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.documentElement.style.removeProperty('color-scheme');
+  });
+
+  it('honors post-connect scheme attribute application (reactive consumer)', async () => {
+    // Simulate template.js's strip-then-restamp pattern: mount without scheme,
+    // then set the attribute immediately afterward (mimics post-connect apply).
+    const t = mount('<toggle-scheme-ui></toggle-scheme-ui>');
+    await tick();
+    t.setAttribute('scheme', 'dark');
+    await tick();
+    expect(t.activeScheme).toBe('dark');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+  });
+
+  it('honors the initial scheme attribute (no race scenario)', async () => {
+    const t = mount('<toggle-scheme-ui scheme="dark"></toggle-scheme-ui>');
+    await tick();
+    expect(t.activeScheme).toBe('dark');
+  });
+
+  it('user button press locks #userTouched — subsequent attr changes are ignored', async () => {
+    const t = mount('<toggle-scheme-ui scheme="dark"></toggle-scheme-ui>');
+    await tick();
+    expect(t.activeScheme).toBe('dark');
+
+    // User press: flips to light. #userTouched flips true.
+    const btn = t.querySelector(':scope > button-ui');
+    btn.dispatchEvent(new CustomEvent('press', { bubbles: true }));
+    await tick();
+    expect(t.activeScheme).toBe('light');
+
+    // Consumer re-renders with scheme="dark" — should NOT clobber user choice.
+    t.setAttribute('scheme', 'dark');
+    await tick();
+    expect(t.activeScheme).toBe('light'); // user choice survives
+  });
+
+  it('programmatic setScheme also locks #userTouched', async () => {
+    const t = mount('<toggle-scheme-ui scheme="auto"></toggle-scheme-ui>');
+    await tick();
+
+    t.setScheme('dark');
+    await tick();
+    expect(t.activeScheme).toBe('dark');
+
+    // Consumer reactive write should NOT override.
+    t.setAttribute('scheme', 'light');
+    await tick();
+    expect(t.activeScheme).toBe('dark');
+  });
+
+  it('toggle() also locks #userTouched', async () => {
+    const t = mount('<toggle-scheme-ui scheme="auto"></toggle-scheme-ui>');
+    await tick();
+    const initial = t.activeScheme;  // depends on prefers-color-scheme (likely light in test env)
+
+    t.toggle();
+    await tick();
+    expect(t.activeScheme).not.toBe(initial);
+
+    const afterToggle = t.activeScheme;
+    t.setAttribute('scheme', initial === 'dark' ? 'dark' : 'light');
+    await tick();
+    expect(t.activeScheme).toBe(afterToggle); // user choice survives
+  });
+
+  it('removing the attribute (back to auto) is honored pre-touch', async () => {
+    const t = mount('<toggle-scheme-ui scheme="dark"></toggle-scheme-ui>');
+    await tick();
+    expect(t.activeScheme).toBe('dark');
+
+    t.removeAttribute('scheme');
+    await tick();
+    // After removal, attr is null; #initState falls to auto → resolves
+    // prefers-color-scheme. Test env should resolve to light by default.
+    expect(['light', 'dark']).toContain(t.activeScheme);
+  });
+});

package/components/upload/upload.d.ts

@@ -17,6 +17,12 @@ export type UploadChangeEvent = CustomEvent<UploadChangeEventDetail>;
 export class UIUpload extends UIFormElement {
   /** Files currently selected. */
   readonly files: FileList | File[];
+  /** §207 (v0.5.7): label rendered above the dropzone. */
+  label: string;
+  /** §207 (v0.5.7): MIME-type accept filter (e.g. `"image/*"` or `".pdf,.txt"`). */
+  accept: string;
+  /** §207 (v0.5.7): allow multi-file selection. */
+  multiple: boolean;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.6",
-  "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
+  "version": "0.5.8",
+  "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": {
@@ -28,6 +28,8 @@
       "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",

package/styles/components.css

@@ -13,6 +13,7 @@
 /* ── Components ── */
 @import "../components/icon/icon.css";
 @import "../components/button/button.css";
+@import "../components/link/link.css";
 @import "../components/input/input.css";
 @import "../components/textarea/textarea.css";
 @import "../components/check/check.css";
@@ -84,6 +85,7 @@
 @import "../components/block/block.css";
 @import "../components/text/text.css";
 @import "../components/toggle-group/toggle-group.css";
+@import "../components/toggle-scheme/toggle-scheme.css";
 @import "../components/demo-toggle/demo-toggle.css";
 @import "../components/richtext/richtext.css";
 @import "../components/stream/stream.css";

package/styles/typography.css

@@ -88,7 +88,9 @@
   /* ── Font weight — single canonical scale ──
      Conventional weights: thin=100, light=300, normal=400, medium=500,
      semibold=600, bold=700. Fonts must provide these axes or fall back
-     gracefully. --a-font-weight-* are backcompat aliases (to be removed). */
+     gracefully. Earlier --a-font-weight-* aliases were REMOVED in v0.5.0;
+     use --a-weight-* directly. (v0.5.8 §230 closed 3 consumer references
+     that still pointed at the removed family per FEEDBACK-20 §1.) */
   --a-weight-thin: 100;
   --a-weight-light: 300;
   --a-weight-normal: 400;