@adia-ai/web-components 0.8.4 → 0.8.6

package/components/swatch/swatch.class.js

@@ -208,31 +208,34 @@ export class UISwatch extends UIElement {
     // the canonical post-tile region. MutationObserver closes this gap for
     // every arrival path: single-template ordering skew, separate render
     // cycle, or imperative host.appendChild().
-    this.#chromeObserver = new MutationObserver((mutations) => {
-      let hasChrome = false;
-      for (const m of mutations) {
-        for (const n of m.addedNodes) {
-          if (n.nodeType !== 1) continue;
-          // Direct chrome child OR a display:contents wrapper-span carrying chrome.
-          if (n.getAttribute?.('slot') === 'chrome') { hasChrome = true; break; }
-          if (
-            n.tagName === 'SPAN' &&
-            n.style?.display === 'contents' &&
-            n.querySelector?.('[slot="chrome"]')
-          ) { hasChrome = true; break; }
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#chromeObserver = new MutationObserver((mutations) => {
+        let hasChrome = false;
+        for (const m of mutations) {
+          for (const n of m.addedNodes) {
+            if (n.nodeType !== 1) continue;
+            // Direct chrome child OR a display:contents wrapper-span carrying chrome.
+            if (n.getAttribute?.('slot') === 'chrome') { hasChrome = true; break; }
+            if (
+              n.tagName === 'SPAN' &&
+              n.style?.display === 'contents' &&
+              n.querySelector?.('[slot="chrome"]')
+            ) { hasChrome = true; break; }
+          }
+          if (hasChrome) break;
         }
-        if (hasChrome) break;
-      }
-      if (!hasChrome) return;
-      // Re-entrancy guard: #absorbChromeSlot() calls insertBefore() which itself
-      // generates childList mutations on the host. Without this guard, every
-      // absorb pass would re-trigger the observer indefinitely. takeRecords()
-      // drains the queue without dispatch so the next observation cycle starts
-      // clean.
-      this.#absorbChromeSlot();
-      this.#chromeObserver.takeRecords();
-    });
-    this.#chromeObserver.observe(this, { childList: true });
+        if (!hasChrome) return;
+        // Re-entrancy guard: #absorbChromeSlot() calls insertBefore() which itself
+        // generates childList mutations on the host. Without this guard, every
+        // absorb pass would re-trigger the observer indefinitely. takeRecords()
+        // drains the queue without dispatch so the next observation cycle starts
+        // clean.
+        this.#absorbChromeSlot();
+        this.#chromeObserver.takeRecords();
+      });
+      this.#chromeObserver.observe(this, { childList: true });
+    }
   }
 
   render() {

package/components/swiper/swiper.class.js

@@ -436,7 +436,10 @@ export class UISwiper extends UIElement {
     if (dots.children.length !== desired) {
       while (dots.firstChild) dots.removeChild(dots.firstChild);
       for (let i = 0; i < desired; i++) {
-        const dot = document.createElement('button');
+        // button-ui, not a native <button> (gh issue 276 wave 4) — it
+        // respects the consumer-set role, so the tab semantics survive.
+        const dot = document.createElement('button-ui');
+        dot.setAttribute('variant', 'ghost');
         dot.setAttribute('role', 'tab');
         dot.setAttribute('aria-label', `Page ${i + 1}`);
         dot.addEventListener('click', () => this.goTo(this.#pageToSlideIndex(i)));

package/components/swiper/swiper.css

@@ -191,7 +191,16 @@
      `--swiper-dot-size` for idle dots and `--swiper-dot-size-active`
      for the active one (one space token larger). Padding is computed
      from the size so the dot stays centered in the hitbox. */
-  :scope [data-swiper-dots] > button {
+  :scope [data-swiper-dots] > button-ui {
+    /* Stamped <button-ui variant="ghost" role="tab"> (gh issue 276 wave 4).
+       The dot look is bespoke (content-box clip keeps a 1rem hitbox around
+       a --swiper-dot-size circle) — these host declarations out-specify
+       button-ui's token-driven chrome; the ghost variant keeps its own
+       hover fill out of the way. */
+    /* button-ui floors min-width/height at --button-height — point it at
+       the VISIBLE circle so the padding (not the min-floor) builds the
+       1rem hitbox, exactly like the native dot did. */
+    --button-height: var(--swiper-dot-size);
     width: var(--swiper-dot-size);
     height: var(--swiper-dot-size);
     border-radius: var(--swiper-dot-radius);
@@ -208,18 +217,18 @@
      `background-clip: content-box` from the base rule isn't reset to
      its initial `border-box` value — the colored area would otherwise
      fill the full 1rem hitbox and turn into a huge circle. */
-  :scope [data-swiper-dots] > button:hover {
+  :scope [data-swiper-dots] > button-ui:hover {
     background-color: var(--swiper-dot-bg-active);
   }
 
   /* Focus ring is rendered INSIDE the padding area (inset shadow), so
      the dot's visual footprint stays the size of every other dot. */
-  :scope [data-swiper-dots] > button:focus-visible {
+  :scope [data-swiper-dots] > button-ui:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 var(--a-focus-width) var(--a-focus-color);
   }
 
-  :scope [data-swiper-dots] > button[aria-current="true"] {
+  :scope [data-swiper-dots] > button-ui[aria-current="true"] {
     background-color: var(--swiper-dot-bg-active);
     width: var(--swiper-dot-size-active);
     height: var(--swiper-dot-size-active);

package/components/table/table.a2ui.json

@@ -21,7 +21,7 @@
       "const": "Table"
     },
     "data": {
-      "description": "Row records. Array of plain objects keyed to columns[].key.",
+      "description": "JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute.",
       "$ref": "common_types.json#/$defs/DynamicObjectList"
     },
     "density": {

package/components/table/table.class.js

@@ -341,6 +341,23 @@ export class UITable extends UIElement {
     // Parse declarative <col-def> children
     this.#parseColDefs();
 
+    /* gh#288 — hydrate from an inline `data="[…]"` HTML attribute, same
+       pattern as chart-ui's `data` attribute (chart.class.js connected()).
+       The canonical entry point is the `.data` property (set
+       programmatically), but a static-HTML/SSR-authored table has no other
+       way to seed rows — `columns` has `<col-def>` children as its
+       declarative form; `data` had none. JSON-parse once at connect; a
+       malformed payload is ignored silently, and a later property
+       assignment still wins (guarded by the `#data.length === 0` check, so
+       a real programmatic `.data = [...]` set before connect is never
+       overwritten by a stale attribute). */
+    if (this.#data.length === 0 && this.hasAttribute('data')) {
+      try {
+        const parsed = JSON.parse(this.getAttribute('data'));
+        if (Array.isArray(parsed)) this.data = parsed;
+      } catch (_) { /* malformed JSON — leave empty, render() shows empty state */ }
+    }
+
     this.setAttribute('role', 'grid');
     this.setAttribute('tabindex', '0');
 

package/components/table/table.css

@@ -250,7 +250,6 @@
     align-items: center;
     align-self: stretch;
     padding: var(--table-py) var(--table-px);
-    border-bottom: 1px solid var(--table-border);
     min-width: 0;
     /* Default: single line with ellipsis. Authors opt in to wrapping
        via [wrap] on the host (whole table) or [data-wrap] on a column /
@@ -262,6 +261,17 @@
     text-overflow: ellipsis;
   }
 
+  /* Row divider as border-top, not border-bottom (TKT-0026) — a
+     border-bottom on every cell put the LAST row's own border at the
+     same coordinate as :scope's inset box-shadow perimeter (:133),
+     doubling the table's bottom edge. border-top divides every OTHER
+     adjacent row pair identically; :not(:first-child) keeps the first
+     body row from doubling against [data-header]'s own border-bottom
+     (:170) instead — the same class of collision, just relocated. */
+  [data-body] [role="row"]:not(:first-child) [role="gridcell"] {
+    border-top: 1px solid var(--table-border);
+  }
+
   /* text-overflow on a flex container doesn't reach text nodes (anonymous
      flex items). Built-in cell types now wrap text in <span>; link type
      creates <a>; avatar/progress composite types use row-ui > span. */
@@ -342,8 +352,11 @@
 
   /* ═══════ Striped ═══════ */
 
+  /* border-top, not border-bottom (TKT-0026) — matches the base rule's
+     own divider property now; striping uses background alone to
+     distinguish rows, no divider lines. */
   :scope[striped] [data-body] [role="gridcell"] {
-    border-bottom: none;
+    border-top: none;
   }
 
   :scope[striped] [data-body] > [role="row"]:nth-child(even) {

package/components/table/table.d.ts

@@ -88,7 +88,7 @@ export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 export class UITable extends UIElement {
   /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
   columns: string;
-  /** Row records. Array of plain objects keyed to columns[].key. */
+  /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;
   /** Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows. */
   density: 'compact' | 'standard' | 'comfortable';

package/components/table/table.test.js

@@ -426,3 +426,54 @@ describe('table-ui — "markdown" cell type (TKT-0008)', () => {
     expect(cell.textContent).toBe('Plain sentence, no special characters.');
   });
 });
+
+// gh#288 — declarative `data="[…]"` attribute, mirroring chart-ui's existing
+// pattern. Row data previously had no declarative form at all — `columns`
+// already had `<col-def>` children; `data` had nothing, so a static-HTML or
+// SSR-authored table always rendered its data empty.
+describe('table-ui — declarative data="[…]" attribute (gh#288)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('hydrates .data from a JSON-array data attribute at connect', async () => {
+    const el = mount(
+      `<table-ui data='${JSON.stringify(ROWS)}'></table-ui>`,
+    );
+    el.columns = COLS;
+    await raf();
+    expect(el.data).toEqual(ROWS);
+    expect(el.querySelectorAll('[role="gridcell"][data-key="name"]').length).toBe(2);
+  });
+
+  it('a malformed data attribute is ignored silently, not thrown', async () => {
+    expect(() => mount(`<table-ui data='not json'></table-ui>`)).not.toThrow();
+    const el = document.querySelector('table-ui');
+    expect(el.data).toEqual([]);
+  });
+
+  it('a non-array JSON value in the attribute is ignored, not coerced', async () => {
+    const el = mount(`<table-ui data='{"not":"an array"}'></table-ui>`);
+    await raf();
+    expect(el.data).toEqual([]);
+  });
+
+  it('a programmatic .data set before connect wins over the attribute', () => {
+    const el = document.createElement('table-ui');
+    el.setAttribute('data', JSON.stringify(ROWS));
+    el.data = [{ id: 99, name: 'Override', email: 'override@acme.com' }];
+    document.body.appendChild(el);
+    expect(el.data).toEqual([{ id: 99, name: 'Override', email: 'override@acme.com' }]);
+  });
+
+  it('works together with declarative <col-def> children — fully static-HTML table', async () => {
+    const el = mount(`
+      <table-ui data='${JSON.stringify(ROWS)}'>
+        <col-def key="id" label="ID"></col-def>
+        <col-def key="name" label="Name"></col-def>
+      </table-ui>
+    `);
+    await raf();
+    expect(el.data).toEqual(ROWS);
+    expect(el.columns.length).toBe(2);
+    expect(el.querySelectorAll('[role="gridcell"][data-key="name"]').length).toBe(2);
+  });
+});

package/components/table/table.yaml

@@ -25,7 +25,12 @@ props:
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
   data:
-    description: Row records. Array of plain objects keyed to columns[].key.
+    description: >-
+      JS property (set programmatically — `el.data = [...]`) — row records,
+      an array of plain objects keyed to columns[].key. May also be supplied
+      declaratively as a JSON-array `data="[…]"` attribute, hydrated once at
+      connect (gh#288) — the same pattern chart-ui's `data` attribute uses.
+      Custom accessor on the element class, not a reflected attribute.
     type: array
     items:
       type: object

package/components/toolbar/toolbar.class.js

@@ -114,12 +114,17 @@ export class UIToolbar extends UIElement {
   connected() {
     this.setAttribute('role', 'toolbar');
     this.#ensureSpillover();
-    this.#ro = new ResizeObserver(() => this.#queueReflow());
-    this.#ro.observe(this);
-    this.#mo = new MutationObserver(() => {
-      if (this.#measuring) return;
-      this.#queueReflow();
-    });
+    // gh#285 — SSR DOM shims (linkedom) have neither observer global.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#ro = new ResizeObserver(() => this.#queueReflow());
+      this.#ro.observe(this);
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mo = new MutationObserver(() => {
+        if (this.#measuring) return;
+        this.#queueReflow();
+      });
+    }
     this.#moObserve();
     this.#queueReflow();
   }

package/components/tree/tree.class.js

@@ -324,8 +324,11 @@ export class UITreeItem extends UIElement {
     // role=button child of the group/tree (axe `aria-required-children`). Adopt
     // what's present now, then observe for the late arrivals.
     this.#adoptSlotted();
-    this.#slotObserver = new MutationObserver(() => this.#adoptSlotted());
-    this.#slotObserver.observe(this, { childList: true, subtree: true });
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#slotObserver = new MutationObserver(() => this.#adoptSlotted());
+      this.#slotObserver.observe(this, { childList: true, subtree: true });
+    }
   }
 
   #stamp() {

package/core/data-stream.js

@@ -453,24 +453,30 @@ function visitSubtree(root, fn) {
   }
 }
 
-const observer = new MutationObserver((mutations) => {
-  for (const m of mutations) {
-    if (m.type === 'attributes' && ATTR_FILTER.includes(m.attributeName)) {
-      const el = m.target;
-      if (isStreamingEl(el)) start(el);
-      else stop(el);
-      continue;
-    }
-    if (m.type === 'childList') {
-      m.addedNodes.forEach(n => visitSubtree(n, start));
-      m.removedNodes.forEach(n => visitSubtree(n, stop));
-    }
-  }
-});
+// gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+// Constructed lazily so import-time evaluation never throws; bootstrap()
+// no-ops the document-level watch when the global is missing (existing
+// stream elements found via querySelectorAll still get started once).
+const observer = typeof MutationObserver !== 'undefined'
+  ? new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === 'attributes' && ATTR_FILTER.includes(m.attributeName)) {
+          const el = m.target;
+          if (isStreamingEl(el)) start(el);
+          else stop(el);
+          continue;
+        }
+        if (m.type === 'childList') {
+          m.addedNodes.forEach(n => visitSubtree(n, start));
+          m.removedNodes.forEach(n => visitSubtree(n, stop));
+        }
+      }
+    })
+  : null;
 
 function bootstrap() {
   if (typeof document === 'undefined') return;
-  observer.observe(document.documentElement, {
+  observer?.observe(document.documentElement, {
     childList: true, subtree: true,
     attributes: true, attributeFilter: ATTR_FILTER,
   });

package/core/element.js

@@ -64,6 +64,26 @@ function installProps(el, props) {
   }
 }
 
+// A minimal no-op ElementInternals shim for environments with no real
+// implementation (linkedom and other DOM-shim SSR passes — gh#285). Real
+// form-participation/validation behavior is meaningless server-side (no
+// live user interaction to validate); the shim exists so the ~12
+// call sites across the framework that read `this.internals.setValidity(…)`
+// / `.setFormValue(…)` / `.validity` etc. keep working as inert no-ops
+// instead of throwing on a missing method. Surface matches exactly what
+// the framework's own consumers call (grepped, not guessed).
+const NOOP_INTERNALS = Object.freeze({
+  setFormValue() {},
+  setValidity() {},
+  checkValidity() { return true; },
+  reportValidity() { return true; },
+  get form() { return null; },
+  get labels() { return []; },
+  get validity() { return {}; },
+  get validationMessage() { return ''; },
+  get willValidate() { return false; },
+});
+
 function reflect(el, a, v, t) {
   t === Boolean
     ? v ? el.setAttribute(a, '') : el.removeAttribute(a)
@@ -78,6 +98,11 @@ function adoptStyles(ctor) {
   ctor._sa = true;
   const sheets = ctor.styles;
   if (!sheets) return;
+  // gh#285 — linkedom's document has no adoptedStyleSheets at all; SSR
+  // has no rendered stylesheet to adopt into anyway (styles matter for
+  // paint, which doesn't happen server-side), so skipping is a correct
+  // no-op, not a degraded feature.
+  if (!('adoptedStyleSheets' in document)) return;
   const list = Array.isArray(sheets) ? sheets : [sheets];
   document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...list.filter(s => !document.adoptedStyleSheets.includes(s))];
 }
@@ -114,7 +139,17 @@ export class UIElement extends HTMLElement {
 
   constructor() {
     super();
-    this.internals = this.attachInternals();
+    // gh#285 — linkedom (and other DOM-shim SSR passes) implement no
+    // ElementInternals; an unconditional attachInternals() call threw
+    // HERE, before ANY subclass code ran — the single highest-leverage
+    // crash site in the whole framework under SSR. Feature-detect and
+    // fall back to a no-op shim (form participation is meaningless
+    // server-side) rather than leaving `this.internals` undefined,
+    // which would just move the crash to every consumer's first
+    // `.setValidity(…)` call instead of fixing it.
+    this.internals = typeof this.attachInternals === 'function'
+      ? this.attachInternals()
+      : NOOP_INTERNALS;
     installProps(this, this.constructor.properties);
   }
 
@@ -123,6 +158,30 @@ export class UIElement extends HTMLElement {
     if (!ctor._tag) ctor._tag = this.localName;
     adoptStyles(ctor);
     prepareParts(ctor);
+    // gh#284 — the custom-elements spec's "upgrade an element" algorithm
+    // (§4.13.5 step 6) requires replaying attributeChangedCallback for
+    // every attribute already present on the element BEFORE
+    // connectedCallback fires. Several DOM shims used for SSR (linkedom)
+    // and this repo's own happy-dom test environment skip that replay —
+    // confirmed directly (element.test.js, "SSR attribute-upgrade replay
+    // (gh#284)"): a bare custom element upgraded with a pre-existing
+    // observed attribute gets connectedCallback but never the matching
+    // attributeChangedCallback.
+    // Any reflected property whose only value came from server-rendered
+    // or otherwise pre-parsed HTML is silently stuck at its class
+    // default — e.g. <nav-item-ui text="Profile"> renders an empty
+    // label. connectedCallback fires reliably everywhere, so re-sync
+    // every declared property from its live attribute here rather than
+    // trusting the shim's upgrade-reaction queue. A no-op in spec-
+    // compliant environments: the value already matches (the property
+    // setter's Object.is check short-circuits), so this never causes an
+    // extra render pass on browsers/environments that already got it right.
+    for (const [key, cfg] of Object.entries(ctor.properties)) {
+      const attr = cfg.attribute ?? key.toLowerCase();
+      if (this.hasAttribute(attr)) {
+        this[key] = parseAttr(this.getAttribute(attr), cfg.type ?? String);
+      }
+    }
     // connected() commonly reads this element's reactive properties via
     // template-literal interpolation (`${this.label}` etc.) to stamp its
     // inner DOM. If the outer call path is inside another effect (e.g.

package/core/element.test.js

@@ -249,3 +249,141 @@ describe('UIElement — addTrait', () => {
     expect(disconnects).toBe(1);
   });
 });
+
+// gh#285 — SSR DOM shims (linkedom et al.) implement no ElementInternals
+// and no document.adoptedStyleSheets. These tests simulate that absence
+// directly (deleting the real APIs) rather than trusting a mock — the
+// bug was an unconditional call crashing the CONSTRUCTOR, before any
+// subclass code ran, so the only real proof is exercising construction
+// with the API genuinely gone.
+describe('UIElement — SSR browser-API absence (gh#285)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('constructs without throwing when attachInternals does not exist', () => {
+    const original = HTMLElement.prototype.attachInternals;
+    delete HTMLElement.prototype.attachInternals;
+    try {
+      class El extends UIElement {}
+      const tag = registerTestElement(El);
+      expect(() => mount(tag)).not.toThrow();
+    } finally {
+      HTMLElement.prototype.attachInternals = original;
+    }
+  });
+
+  it('the no-op internals shim answers every call site the framework actually makes', () => {
+    const original = HTMLElement.prototype.attachInternals;
+    delete HTMLElement.prototype.attachInternals;
+    let el;
+    try {
+      class El extends UIElement {}
+      const tag = registerTestElement(El);
+      el = mount(tag);
+    } finally {
+      HTMLElement.prototype.attachInternals = original;
+    }
+    expect(() => el.internals.setFormValue('x')).not.toThrow();
+    expect(() => el.internals.setValidity({})).not.toThrow();
+    expect(el.internals.checkValidity()).toBe(true);
+    expect(el.internals.reportValidity()).toBe(true);
+    expect(el.internals.form).toBeNull();
+    expect(el.internals.labels).toEqual([]);
+    expect(el.internals.validity).toEqual({});
+    expect(el.internals.validationMessage).toBe('');
+    expect(el.internals.willValidate).toBe(false);
+  });
+
+  it('a real attachInternals is still used when the browser provides one (no regression)', () => {
+    class El extends UIElement {}
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    // happy-dom's real attachInternals — not the shim.
+    expect(el.internals).not.toBe(null);
+    expect(typeof el.internals.setFormValue).toBe('function');
+  });
+
+  it('adoptStyles no-ops instead of throwing when adoptedStyleSheets does not exist', () => {
+    const desc = Object.getOwnPropertyDescriptor(Document.prototype, 'adoptedStyleSheets');
+    delete Document.prototype.adoptedStyleSheets;
+    try {
+      class El extends UIElement {
+        static styles = ['/* fake sheet */'];
+      }
+      const tag = registerTestElement(El);
+      expect(() => mount(tag)).not.toThrow();
+    } finally {
+      if (desc) Object.defineProperty(Document.prototype, 'adoptedStyleSheets', desc);
+    }
+  });
+});
+
+// gh#284 — the custom-elements spec's "upgrade an element" algorithm
+// (§4.13.5 step 6) requires replaying attributeChangedCallback for every
+// attribute already present on an element BEFORE connectedCallback fires
+// on upgrade. happy-dom (this repo's own test DOM) skips that replay —
+// confirmed directly: a bare custom element upgraded with a pre-existing
+// observed attribute gets connectedCallback but never the matching
+// attributeChangedCallback. linkedom (the real SSR consumer's DOM shim,
+// per adia-ssr) is a similarly from-scratch custom-elements registry, so
+// the same gap is expected there too. Simulating the absence directly
+// (a real late-upgrade sequence, not a mock) rather than trusting that
+// happy-dom already reproduces the SSR shape — it does, which is exactly
+// how this was found.
+describe('UIElement — SSR attribute-upgrade replay (gh#284)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  // Parses markup into an UNDEFINED custom element (so its attributes land
+  // on the element the way a server-rendered / pre-parsed document would),
+  // THEN defines the tag — matching the "define after parse" shape SSR
+  // hydration and lazy client registration both produce.
+  function mountLateUpgrade(tag, BaseImpl, html) {
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    document.body.appendChild(container);
+    customElements.define(tag, BaseImpl);
+    return container.querySelector(tag);
+  }
+
+  it('confirms the environment gap this fix compensates for', () => {
+    const tag = `test-plain-${++registrationCounter}`;
+    const calls = [];
+    class Plain extends HTMLElement {
+      static get observedAttributes() { return ['foo']; }
+      attributeChangedCallback(name, oldV, newV) { calls.push([name, oldV, newV]); }
+      connectedCallback() { calls.push(['connected']); }
+    }
+    mountLateUpgrade(tag, Plain, `<${tag} foo="bar"></${tag}>`);
+    expect(calls).toEqual([['connected']]); // NOT ['foo', null, 'bar'] first, per spec
+  });
+
+  it('a reflected property set only via pre-parsed HTML is not stuck at its class default', () => {
+    const tag = `test-late-${++registrationCounter}`;
+    class El extends UIElement {
+      static properties = { label: { type: String, default: '', reflect: true } };
+    }
+    const el = mountLateUpgrade(tag, El, `<${tag} label="Profile"></${tag}>`);
+    expect(el.label).toBe('Profile');
+  });
+
+  it('a reflected boolean attribute present-with-no-value resolves true, not the class default', () => {
+    const tag = `test-late-bool-${++registrationCounter}`;
+    class El extends UIElement {
+      static properties = { active: { type: Boolean, default: false, reflect: true } };
+    }
+    const el = mountLateUpgrade(tag, El, `<${tag} active></${tag}>`);
+    expect(el.active).toBe(true);
+  });
+
+  it('no regression: normal define-before-parse still gets attributeChangedCallback (no extra render)', async () => {
+    let renders = 0;
+    class El extends UIElement {
+      static properties = { label: { type: String, default: '', reflect: true } };
+      render() { renders++; }
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag, { label: 'Profile' });
+    await tick();
+    expect(el.label).toBe('Profile');
+    expect(renders).toBe(1); // the connectedCallback re-sync is a no-op here, not a second render
+  });
+});