@webjsdev/core 0.7.65 → 0.8.0

package/index-browser.js

@@ -23,7 +23,7 @@
  * Keep this list in sync with `./index.js` for everything else.
  */
 
-export { html, isTemplate, MARKER } from './src/html.js';
+export { html, svg, isTemplate, MARKER } from './src/html.js';
 export { css, isCSS, adoptStyles, stylesToString } from './src/css.js';
 export { WebComponent, prop } from './src/component.js';
 export { lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
@@ -100,3 +100,7 @@ export { createContext, ContextProvider, ContextConsumer, ContextRequestEvent }
 
 // Task controller, also available via '@webjsdev/core/task'
 export { Task, TaskStatus } from './src/task.js';
+
+export { nothing, noChange } from './src/sentinels.js';
+
+export { classMap, styleMap, ifDefined } from './src/attribute-directives.js';

package/index.d.ts

@@ -74,7 +74,7 @@ export type {
   NonSerializable,
 } from './src/serializable.d.ts';
 
-export { html, isTemplate, MARKER } from './src/html.js';
+export { html, svg, isTemplate, MARKER } from './src/html.js';
 // The `html\`\`` return type. A JSDoc typedef in html.js used across the
 // component / route / testing type surfaces; re-exported so an app or the
 // docs/website can annotate a value as `TemplateResult` (#772).
@@ -159,3 +159,7 @@ export function optimistic<T, R>(
   action: () => Promise<R> | R,
 ): Promise<R>;
 
+
+export { nothing, noChange } from './src/sentinels.js';
+
+export { classMap, styleMap, ifDefined } from './src/attribute-directives.js';

package/index.js

@@ -6,7 +6,7 @@
  * renderer is only reached on the server.
  */
 
-export { html, isTemplate, MARKER } from './src/html.js';
+export { html, svg, isTemplate, MARKER } from './src/html.js';
 export { css, isCSS, adoptStyles, stylesToString } from './src/css.js';
 export { WebComponent, prop } from './src/component.js';
 export { lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
@@ -68,3 +68,7 @@ export { createContext, ContextProvider, ContextConsumer, ContextRequestEvent }
 
 // Task controller, also available via '@webjsdev/core/task'
 export { Task, TaskStatus } from './src/task.js';
+
+export { nothing, noChange } from './src/sentinels.js';
+
+export { classMap, styleMap, ifDefined } from './src/attribute-directives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.65",
+  "version": "0.8.0",
   "type": "module",
   "description": "The runtime for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Ships the html and css template tags, the WebComponent base class, signals, directives, and the isomorphic renderers.",
   "types": "./index.d.ts",

package/src/attribute-directives.d.ts

@@ -0,0 +1,6 @@
+import { nothing } from './sentinels.js';
+export interface ClassMapDirective { readonly _$webjs: 'class-map'; readonly value: Record<string, unknown>; }
+export interface StyleMapDirective { readonly _$webjs: 'style-map'; readonly value: Record<string, string | number | null | undefined>; }
+export function classMap(classes: Record<string, unknown>): ClassMapDirective;
+export function styleMap(styles: Record<string, string | number | null | undefined>): StyleMapDirective;
+export function ifDefined<T>(value: T): NonNullable<T> | typeof nothing;

package/src/attribute-directives.js

@@ -0,0 +1,49 @@
+import { nothing } from './sentinels.js';
+
+/** Map class names to whether each should be present. @param {Record<string, unknown>} classes */
+export function classMap(classes) { return { _$webjs: 'class-map', value: classes }; }
+/** Map CSS property names to their values. @param {Record<string, string | number | null | undefined>} styles */
+export function styleMap(styles) { return { _$webjs: 'style-map', value: styles }; }
+/** Remove an attribute when its value is nullish. @template T @param {T} value */
+export function ifDefined(value) { return value ?? nothing; }
+
+export function isAttributeMap(value) {
+  return value && (value._$webjs === 'class-map' || value._$webjs === 'style-map');
+}
+export function cssName(name) { return name.startsWith('--') ? name : name.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase()); }
+export function attributeMapText(value, name) {
+  const classes = value._$webjs === 'class-map';
+  if (name !== (classes ? 'class' : 'style')) throw new Error('classMap/styleMap must be used in a class/style attribute.');
+  // Lit deliberately pads even an empty map to separate adjacent static classes.
+  return classes
+    ? ' ' + Object.keys(value.value).filter((key) => value.value[key]).join(' ') + ' '
+    : Object.entries(value.value).filter(([, v]) => v != null).map(([key, v]) => `${cssName(key)}:${v};`).join('');
+}
+
+/** Commit only the map-owned tokens, preserving static and externally added values. */
+export function applyAttributeMap(part, value) {
+  if (part.kind !== 'attr' && part.kind !== 'attr-mixed') throw new Error('classMap/styleMap require an attribute binding.');
+  const classes = value._$webjs === 'class-map';
+  if (part.name !== (classes ? 'class' : 'style')) throw new Error('classMap/styleMap must be used in a class/style attribute.');
+  if (part.group && part.group.length !== 1) throw new Error('classMap/styleMap require a single expression.');
+  if (part.__mapKind !== value._$webjs) {
+    part.el.setAttribute(part.name, (part.statics || []).join(classes ? ' ' : ''));
+    part.__mapKind = value._$webjs;
+    part.__mapKeys = new Set();
+    part.__staticClasses = classes ? new Set(part.el.classList) : new Set();
+  }
+  const next = new Set();
+  for (const [key, v] of Object.entries(value.value)) {
+    if (classes) {
+      if (v && !part.__staticClasses.has(key)) { part.el.classList.add(key); next.add(key); }
+    } else if (v != null) {
+      const name = cssName(key); const text = String(v);
+      part.el.style.setProperty(name, text.replace(/\s*!important\s*$/, ''), /!important\s*$/.test(text) ? 'important' : '');
+      next.add(name);
+    }
+  }
+  for (const key of part.__mapKeys) if (!next.has(key)) {
+    if (classes) part.el.classList.remove(key); else part.el.style.removeProperty(key);
+  }
+  part.__mapKeys = next;
+}

package/src/attribute-reader.js

@@ -39,6 +39,20 @@
  * JS under a hand-written overlay, so the shared code moves out instead.
  */
 
+/**
+ * Whether a declared property has an HTML attribute at all. lit's two ways to
+ * say no, both honoured: `state: true` (internal state, which lit normalizes
+ * to `attribute: false`) and `attribute: false` (a public, property-only
+ * input). A property without one is never observed, never read from a source
+ * attribute at SSR, and never reflected; a `.prop` binding still reaches it.
+ *
+ * @param {{ state?: boolean, attribute?: string | false } | null | undefined} decl
+ * @returns {boolean}
+ */
+export function isAttributeBacked(decl) {
+  return !!decl && decl.state !== true && decl.attribute !== false;
+}
+
 /**
  * Read one attribute string into its declared property value.
  *
@@ -110,7 +124,7 @@ export function readAttributeValue(def, value) {
     // The two readers now see the SAME attribute set, so this fallback is not
     // the only thing they agree on (#1341). Both resolve a name through
     // `resolveAttributeProperty` below, which matches the same names
-    // `observedAttributes` lists (via `observedAttributeNames`) and nothing else, so it skips a `state: true` prop and ignores a name that
+    // `observedAttributes` lists (via `observedAttributeNames`) and nothing else, so it skips a `state: true` or `attribute: false` prop and ignores a name that
     // maps to no attribute-backed property exactly as the observed list does.
     // The SSR caller lowercases its source name first, because the browser
     // lowercases while parsing. And both are handed a value with every
@@ -130,7 +144,7 @@ function hyphenate(s) {
  * Resolve an attribute NAME to the property it feeds, and to that property's
  * normalised declaration.
  *
- * `state: true` props are skipped, because they are absent from
+ * `state: true` and `attribute: false` props are skipped, because they are absent from
  * `observedAttributes` and so the browser never delivers their attribute to any
  * reader. lit reaches the same outcome the same way, resolving through the very
  * map `observedAttributes` is built from (`reactive-element.ts`
@@ -236,7 +250,7 @@ function buildAttributeBackedProps(Cls) {
   const out = [];
   for (const [k, decl] of Object.entries(props)) {
     const d = typeof decl === 'object' && decl !== null ? decl : { type: decl };
-    if (d.state) continue;
+    if (!isAttributeBacked(d)) continue;
     const primary = d.attribute || hyphenate(k);
     const lower = k.toLowerCase();
     const alias = !d.attribute && lower !== primary ? lower : undefined;

package/src/binding-prefixes.js

@@ -1,3 +1,4 @@
+import { nothing, noChange } from './sentinels.js';
 /**
  * The template attribute-binding prefixes the renderers recognise.
  *
@@ -42,48 +43,16 @@ export function isBindingPrefix(ch) {
 }
 
 /**
- * The HTML boolean attributes: present means on, absent means off, and the
- * value is meant to be empty. A boolean in a PLAIN hole on one of these renders
- * exactly like `?attr` (#1579), so `checked=${isDefault}` cannot serve the
- * `checked="false"` that HTML reads as checked. Lowercase, from the HTML spec's
- * attribute index.
- */
-const BOOLEAN_ATTRIBUTES = new Set([
-  'allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls',
-  'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'inert',
-  'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate',
-  'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected',
-  'shadowrootclonable', 'shadowrootdelegatesfocus', 'shadowrootserializable',
-]);
-
-/**
- * What a PLAIN attribute hole (`name=${value}`, unquoted, the whole value)
- * writes, or `null` when the attribute is omitted. The one rule both renderers
- * follow, so the server never serves an attribute the client then removes
- * (#1573, #1579):
- *
- *   - `null` / `undefined` omit the attribute. This is the "omit" value, so a
- *     conditional attribute is `aria-current=${active ? 'page' : null}`.
- *   - `false` omits it too, EXCEPT on an `aria-*` attribute, where it writes
- *     `"false"`. For a tri-state ARIA attribute (`aria-expanded`,
- *     `aria-pressed`, `aria-checked`) `"false"` and absent mean different
- *     things, so the value an author passes is the value the user agent gets.
- *   - `true` on an HTML boolean attribute (`checked`, `selected`, `disabled`,
- *     and the rest) writes the empty value, exactly as `?attr=${true}` does. Anywhere
- *     else it is `"true"`.
- *   - anything else is `String(value)`.
- *
- * A quoted or mixed value (`title="${x}"`, `class="a ${x}"`) is not a plain
- * hole: the author wrote the attribute statically, so it stays and a nullish
- * piece reads as empty text.
+ * Serialize an ordinary whole-value attribute expression for SSR and client
+ * commits. Nullish values become empty strings and booleans stringify.
+ * `nothing` omits the attribute. `noChange` omits it on initial SSR; client
+ * updates handle that sentinel before serialization to retain the prior value.
  *
- * @param {string} name the attribute name as written
- * @param {unknown} value the hole's value (`live()` already unwrapped)
+ * @param {string} _name attribute name (kept for the shared call signature)
+ * @param {unknown} value the expression value (`live()` already unwrapped)
  * @returns {string | null}
  */
-export function attrHoleValue(name, value) {
-  if (value == null) return null;
-  if (value === false) return /^aria-/i.test(name) ? 'false' : null;
-  if (value === true && BOOLEAN_ATTRIBUTES.has(String(name).toLowerCase())) return '';
-  return String(value);
+export function attrHoleValue(_name, value) {
+  if (value === nothing || value === noChange) return null;
+  return String(value ?? '');
 }

package/src/component/lifecycle.js

@@ -1,5 +1,5 @@
 import { render as clientRender } from '../render-client.js';
-import { readAttributeValue, resolveAttributeProperty, observedAttributeNames } from '../attribute-reader.js';
+import { readAttributeValue, resolveAttributeProperty, observedAttributeNames, isAttributeBacked } from '../attribute-reader.js';
 import { setActiveActionSignal, activeActionSignal } from '../action-abort-client.js';
 import { carriesFunction } from '../form-action.js';
 import { isCSS, adoptStyles } from '../css.js';
@@ -84,7 +84,7 @@ const isBrowser = typeof window !== 'undefined' && typeof HTMLElement !== 'undef
  * @property {(newValue: unknown, oldValue: unknown) => boolean} [hasChanged]
  *   Custom dirty-check function. Called by the generated setter before
  *   scheduling an update. Return `true` to trigger a re-render, `false`
- *   to skip. Default: strict inequality `(a, b) => a !== b`.
+ *   to skip. Default: `(a, b) => !Object.is(a, b)`.
  *
  *   Note: this fires on the FIRST assignment too, with `oldValue` set
  *   to `undefined`. Numeric comparators that subtract against undefined
@@ -148,11 +148,16 @@ function installAccessors(Ctor, props) {
       get() { return this.__propValues[propName]; },
       set(newVal) {
         const oldVal = this.__propValues[propName];
-        if (!changedCheck(newVal, oldVal)) return;
         this.__propValues[propName] = newVal;
-        // Reflect to attribute if requested (and not internal state).
-        if (d.reflect && !d.state && this._connected) {
-          this._reflectAttribute(propName, newVal, d);
+        if (!changedCheck(newVal, oldVal)) return;
+        // Reflect to attribute if requested (_reflectAttribute skips a prop
+        // with no attribute: `state: true` or `attribute: false`).
+        if (d.reflect) {
+          if (this._connected) {
+            this._reflectAttribute(propName, newVal, d);
+          } else {
+            (this.__reflectPending ??= new Set()).add(propName);
+          }
         }
         // requestUpdate records the (name, oldValue) entry AND schedules a
         // render. During the update phase the scheduler short-circuits and
@@ -196,8 +201,9 @@ class WebComponentBase extends Base {
    * that trigger re-renders on change, coerce attribute values by type,
    * and optionally reflect back to attributes.
    *
-   * Properties with `state: true` are excluded from `observedAttributes`
-   * and never reflect: they behave like private reactive state.
+   * Properties with `state: true` (internal state) or `attribute: false` (a
+   * property-only input) are excluded from `observedAttributes` and never
+   * reflect.
    *
    * @type {Record<string, PropertyDeclaration>}
    */
@@ -228,8 +234,8 @@ class WebComponentBase extends Base {
 
   /**
    * Returns the list of attribute names the browser should observe.
-   * Properties with `state: true` are excluded: they are internal-only
-   * and do not correspond to any HTML attribute.
+   * Properties with `state: true` or `attribute: false` are excluded: they
+   * do not correspond to any HTML attribute.
    *
    * @returns {string[]}
    */
@@ -400,6 +406,9 @@ class WebComponentBase extends Base {
    * @private
    */
   _reflectAttribute(propName, value, decl) {
+    // A property with no attribute (`state: true` / `attribute: false`) has
+    // nothing to reflect to.
+    if (!isAttributeBacked(decl)) return;
     // A custom `attribute` option wins over the kebab-cased property name.
     const attrName = decl.attribute || hyphenate(propName);
     // Guard against re-entrant loops: attributeChangedCallback fires when
@@ -577,6 +586,17 @@ class WebComponentBase extends Base {
 
   _activate() {
     this._connected = true;
+    // A value written on the element before its class was defined is an own
+    // data property, and it hides any accessor of the same name for good.
+    // `_initializeProperties` lifts the declared properties in the
+    // constructor; an accessor the subclass defines itself (a getter/setter
+    // over a private signal, the shape internal state another element assigns
+    // takes) gets the same lift here, on the first connect, since its private
+    // field does not exist yet while the base constructor runs.
+    if (!this.__accessorsLifted) {
+      this.__accessorsLifted = true;
+      liftShadowedAccessors(this);
+    }
     // Reflect declared reflect:true properties from their current value now
     // that the element is connected. Constructor / willUpdate defaults were
     // set while disconnected (the setter skips reflection then), so this is
@@ -773,9 +793,12 @@ class WebComponentBase extends Base {
     // Dispose the signal watcher so dependency edges drop. Without
     // this the element holds references to module-scope signals
     // (and vice versa) forever.
-    if (this.__signalWatcher) {
-      this.__signalWatcher.dispose();
-      this.__signalWatcher = undefined;
+    for (const slot of ['__signalWatcher', '__postWatcher']) {
+      const self = /** @type {any} */ (this);
+      if (self[slot]) {
+        self[slot].dispose();
+        self[slot] = undefined;
+      }
     }
     for (const c of this.__controllers || NO_CONTROLLERS) {
       if (c.hostDisconnected) c.hostDisconnected();
@@ -874,18 +897,92 @@ class WebComponentBase extends Base {
    *   7. `firstUpdated(changedProperties)` runs once, on the first render only
    *   8. `updated(changedProperties)` runs after every commit
    *   9. Resolve `updateComplete` promise
+   *
+   * Every signal the SYNCHRONOUS part of that cycle reads is tracked, not
+   * only the ones `render()` reads, which is the span lit-labs/signals tracks
+   * by running `performUpdate` inside a computed. So a signal read only in
+   * `willUpdate()` or `updated()` (a host attribute derived from internal
+   * state) re-renders the component when it changes. Two watchers split it
+   * (see {@link _tracked}): one over steps 2-6 (`render()` included), one
+   * over the post-commit hooks, so a write `updated()` makes to something
+   * `render()` read still schedules the next update. The DOM commits are
+   * the parts left untracked (see `update()`).
    * @private
    */
   _performRender() {
     if (!this._renderRoot) return;
+    this.__cycleRendered = false;
+    const postCommit = this._tracked('__signalWatcher', () => this._runUpdateCycle());
+    // A sync commit runs its post-commit hooks OUTSIDE the first watcher's
+    // phase, under their own watcher.
+    if (postCommit) postCommit();
+  }
+
+  /**
+   * Run one phase of the update cycle with the signals it reads recorded on
+   * the watcher in `slot`, creating the watcher on first use. A watcher
+   * re-records its read set on every phase it observes, and a later change
+   * to any of those signals schedules an update.
+   *
+   * Three rules keep that safe:
+   *  - A phase ignores notifications from its OWN writes. A write to a signal
+   *    the phase read earlier is the phase's business, not a reason to run it
+   *    again: before a commit it is already folded into this pass, and after
+   *    one it is often not the component's code at all (an event `updated()`
+   *    dispatches, whose listener does a read-modify-write on a store), which
+   *    would otherwise loop.
+   *  - A pre-commit phase that never reached `render()` (`shouldUpdate()`
+   *    returned false, or a hook threw) keeps the signals the last render
+   *    read on top of the ones it read itself, or a skipped cycle would
+   *    silently unsubscribe the component.
+   *  - A watcher disposed during its own phase (a hook that detached the
+   *    host) is disposed again afterwards, since the phase kept recording.
+   *
+   * @template T
+   * @param {'__signalWatcher' | '__postWatcher'} slot
+   * @param {() => T} fn
+   * @returns {T}
+   * @private
+   */
+  _tracked(slot, fn) {
+    const self = /** @type {any} */ (this);
+    /** @type {any} */
+    let watcher = self[slot];
+    if (!watcher) {
+      watcher = self[slot] = new Signal.subtle.Watcher(() => {
+        if (!watcher.__inPhase && this._connected) this.requestUpdate();
+      });
+    }
+    const before = slot === '__signalWatcher' ? Signal.subtle.introspectSources(watcher) : null;
+    watcher.__inPhase = true;
+    try {
+      return watcher.observe(fn);
+    } finally {
+      watcher.__inPhase = false;
+      if (before && !this.__cycleRendered) {
+        watcher.watch(...new Set([...before, ...Signal.subtle.introspectSources(watcher)]));
+      }
+      if (!this._connected) {
+        watcher.dispose();
+        if (self[slot] === watcher) self[slot] = undefined;
+      }
+    }
+  }
+
+  /**
+   * Steps 1-6 of the update cycle, the phase {@link _performRender} tracks
+   * with the first watcher. Returns the post-commit half to run for a sync
+   * commit, or nothing (an async commit runs it when it lands).
+   * @returns {(() => void) | undefined}
+   * @private
+   */
+  _runUpdateCycle() {
 
     // Hold a stable reference to the current Map so all hooks see the same
     // snapshot. During the update phase (steps 3-6) the Map is mutated in
     // place when property setters fire, folding those changes into THIS
-    // cycle. The Map is replaced with a fresh empty one only after a
-    // successful commit so post-commit assignments queue the NEXT cycle.
-    // On `shouldUpdate=false` or hook errors, the Map is preserved so the
-    // accumulated changes survive into the next render.
+    // cycle. The Map is replaced when this phase finishes, including skipped
+    // updates and hook errors, so post-commit writes belong to the NEXT cycle.
     const changedProperties = this._changedProperties;
 
     // --- 1. Mark we're inside an update cycle ---
@@ -923,6 +1020,7 @@ class WebComponentBase extends Base {
         // in _commitAsync.
         if (this.__renderAbort) this.__renderAbort.abort();
         this.__renderAbort = typeof AbortController !== 'undefined' ? new AbortController() : null;
+        this.__cycleRendered = true;
         try {
           const r = this.update(changedProperties);
           if (r && typeof r.then === 'function') pendingCommit = r;
@@ -931,26 +1029,17 @@ class WebComponentBase extends Base {
         }
 
         if (!pendingCommit) {
-          // --- 6. controllers' hostUpdated (sync commit) ---
-          for (const c of this.__controllers || NO_CONTROLLERS) {
-            if (c.hostUpdated) c.hostUpdated();
-          }
           didCommit = true;
         }
       }
-      // shouldUpdate=false: preserve _changedProperties so the next
-      // requestUpdate keeps accumulating on top of the entries that
-      // didn't render this cycle.
     } catch (preCommitError) {
       console.error(`[webjs] lifecycle hook threw during update phase:`, preCommitError);
     } finally {
       this._isUpdating = false;
-      // The snapshot is consumed once the commit is DISPATCHED. For an async
-      // render it resets here too, so a property change during the in-flight
-      // fetch starts a fresh cycle (whose render token supersedes this one).
-      if (didCommit || pendingCommit) {
-        this._changedProperties = new Map();
-      }
+      // Consume this phase's snapshot even when shouldUpdate skips it. For an
+      // async render, changes during the fetch start a new cycle whose token
+      // supersedes the in-flight commit.
+      this._changedProperties = new Map();
     }
 
     // --- Async render: finish the cycle when the pending commit settles. ---
@@ -967,10 +1056,6 @@ class WebComponentBase extends Base {
         this.__pendingAsyncCommits--;
         // A newer render superseded this one; let the newer cycle finish.
         if (token !== this.__renderToken) return;
-        // --- 6. controllers' hostUpdated (after the async commit) ---
-        for (const c of this.__controllers || NO_CONTROLLERS) {
-          if (c.hostUpdated) c.hostUpdated();
-        }
         // --- 7-8 + updateComplete ---
         this._postCommit(changedProperties);
       };
@@ -1008,16 +1093,21 @@ class WebComponentBase extends Base {
       return;
     }
 
-    // --- 7-8. Post-commit hooks (sync path). Errors are caught so the
-    // updateComplete promise always resolves.
+    // --- 7-8. Post-commit hooks (sync path), returned so they run outside
+    // this phase. Errors are caught so the updateComplete promise always
+    // resolves.
     if (didCommit) {
-      this._postCommit(changedProperties);
+      return () => this._postCommit(changedProperties);
     } else if (!this.__pendingAsyncCommits) {
       // A non-committing cycle resolves updateComplete only when no async
       // commit is in flight; otherwise the pending commit resolves it once it
       // lands, so `await el.updateComplete` never returns before that DOM.
       this._resolveUpdate();
     }
+    // No post-commit phase this cycle: re-arm its watcher, so a change it
+    // was notified of meanwhile does not leave it deaf to the next one.
+    if (!didCommit && /** @type {any} */ (this).__postWatcher) /** @type {any} */ (this).__postWatcher.watch();
+    return undefined;
   }
 
   /**
@@ -1028,7 +1118,7 @@ class WebComponentBase extends Base {
    */
   _resolveUpdate() {
     if (this._updateResolve) {
-      const settled = this._changedProperties.size === 0;
+      const settled = !this._scheduled;
       this._updateResolve(settled);
       this._updateResolve = null;
     }
@@ -1090,7 +1180,7 @@ class WebComponentBase extends Base {
     const props = /** @type {any} */ (this.constructor).properties || {};
     for (const name of Object.keys(props)) {
       const decl = props[name];
-      if (!decl || !decl.reflect || decl.state) continue;
+      if (!decl || !decl.reflect) continue;
       this._reflectAttribute(name, this[name], decl);
     }
   }
@@ -1154,16 +1244,14 @@ class WebComponentBase extends Base {
    * @param {Map<string, unknown>} _changedProperties
    */
   update(_changedProperties) {
-    // Track signal reads during render so the component re-renders when
-    // any of them change. The watcher is lazy-allocated on first
-    // render and disposed in disconnectedCallback. observe() clears
-    // prior dep edges before fn(), so each render re-records its own
-    // (possibly different) read set.
-    if (!this.__signalWatcher) {
-      this.__signalWatcher = new Signal.subtle.Watcher(() => {
-        if (this._connected) this.requestUpdate();
-      });
+    const pendingReflection = this.__reflectPending;
+    this.__reflectPending = undefined;
+    for (const name of pendingReflection || []) {
+      const def = this.constructor.properties[name];
+      this._reflectAttribute(name, this[name], def);
     }
+    // The signal reads render() makes are tracked by the watcher
+    // _performRender runs the whole cycle under.
     let tpl;
     // Bind this render's abort signal (#492) around the synchronous part of
     // render() ONLY, so the RPC stub ties an action called there to this
@@ -1176,7 +1264,7 @@ class WebComponentBase extends Base {
     const outer = activeActionSignal();
     setActiveActionSignal(this.__renderAbort ? this.__renderAbort.signal : null);
     try {
-      this.__signalWatcher.observe(() => { tpl = this.render(); });
+      tpl = this.render();
     } finally {
       setActiveActionSignal(outer || null);
     }
@@ -1191,7 +1279,10 @@ class WebComponentBase extends Base {
     if (tpl && typeof (/** @type any */ (tpl).then) === 'function') {
       return this._commitAsync(/** @type {Promise<unknown>} */ (tpl));
     }
-    clientRender(tpl, this._renderRoot);
+    // The commit is untracked: a signal read while the DOM is patched (a
+    // `watch()` part, a child's synchronous work) belongs to whatever read
+    // it, not to this component's next render.
+    Signal.subtle.untrack(() => clientRender(tpl, this._renderRoot, { host: this }));
     return undefined;
   }
 
@@ -1220,7 +1311,7 @@ class WebComponentBase extends Base {
     if (this.__firstRendered && this._overridesRenderFallback()) {
       try {
         const fb = this.renderFallback();
-        if (fb !== undefined) clientRender(fb, this._renderRoot);
+        if (fb !== undefined) Signal.subtle.untrack(() => clientRender(fb, this._renderRoot, { host: this }));
       } catch (e) {
         console.error(`[webjs] renderFallback() threw:`, e);
       }
@@ -1239,7 +1330,7 @@ class WebComponentBase extends Base {
         // The sync path routes an identical throw to the same boundary, so
         // this is what makes the two paths agree.
         try {
-          clientRender(tpl, this._renderRoot);
+          clientRender(tpl, this._renderRoot, { host: this });
         } catch (commitError) {
           this._handleRenderError(
             commitError instanceof Error ? commitError : new Error(String(commitError)),
@@ -1276,7 +1367,7 @@ class WebComponentBase extends Base {
     );
     try {
       const fallback = this.renderError(error);
-      if (fallback !== undefined) clientRender(fallback, this._renderRoot);
+      if (fallback !== undefined) Signal.subtle.untrack(() => clientRender(fallback, this._renderRoot, { host: this }));
     } catch (fallbackError) {
       console.error(`[webjs] renderError() also threw:`, fallbackError);
     }
@@ -1289,16 +1380,21 @@ class WebComponentBase extends Base {
    * @private
    */
   _postCommit(changedProperties) {
+    const resolve = this._updateResolve;
+    this._updateResolve = null;
     try {
-      if (!this.__firstRendered) {
-        this.__firstRendered = true;
-        this.firstUpdated(changedProperties);
-      }
-      this.updated(changedProperties);
+      this._tracked('__postWatcher', () => {
+        for (const c of this.__controllers || NO_CONTROLLERS) c.hostUpdated?.();
+        if (!this.__firstRendered) {
+          this.__firstRendered = true;
+          this.firstUpdated(changedProperties);
+        }
+        this.updated(changedProperties);
+      });
     } catch (postCommitError) {
       console.error(`[webjs] lifecycle hook threw during post-commit phase:`, postCommitError);
     } finally {
-      this._resolveUpdate();
+      resolve?.(!this._scheduled);
     }
   }
 
@@ -1529,6 +1625,28 @@ export function WebComponent(properties) {
   }
 }
 
+/**
+ * Re-assign every own data property of `el` that hides a setter defined on
+ * its class chain below the WebJs base, so the value goes through the
+ * accessor instead of shadowing it.
+ *
+ * @param {any} el
+ */
+function liftShadowedAccessors(el) {
+  for (const key of Object.keys(el)) {
+    for (let p = Object.getPrototypeOf(el); p && p !== WebComponentBase.prototype; p = Object.getPrototypeOf(p)) {
+      const d = Object.getOwnPropertyDescriptor(p, key);
+      if (!d) continue;
+      if (d.set) {
+        const value = el[key];
+        delete el[key];
+        el[key] = value;
+      }
+      break;
+    }
+  }
+}
+
 // Ensure static inheritance and instanceof checks work
 Object.setPrototypeOf(WebComponent, WebComponentBase);
 WebComponent.prototype = WebComponentBase.prototype;